blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 12:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

stundenplan modal for LVs and making calendar header sticky

Browse Source
This commit is contained in:
SimonGschnell
2024-05-24 11:17:06 +02:00
parent 234ec03db9
commit 16f90604b6
5 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/apps/Cis/Stundenplan.js
+2
View File
@@ -1,4 +1,5 @@
import FhcCalendar from "../../components/Calendar/Calendar.js";
import Phrasen from "../../plugin/Phrasen.js";
const app = Vue.createApp({
components: {
@@ -50,4 +51,5 @@ const app = Vue.createApp({
}
});
app.config.unwrapInjectedRef = true;
app.use(Phrasen);
app.mount('#content');
public/js/components/Calendar/Calendar.js
+1 -1
View File
@@ -106,7 +106,7 @@ export default {
methods: {
handleInput(day) {
// set the event when clicking on the lernveranstaltung in the data
this.currentlySelectedEvent = day;
this.currentlySelectedEvent = day[1];
console.log(this.currentlySelectedEvent)
// showing the modal
Vue.nextTick(()=>{
public/js/components/Calendar/CalendarModal.js
+39 -4
View File
@@ -133,7 +133,16 @@ export default {
}
},
},
computed: {},
computed: {
start_time: function(){
if(!this.data.start) return 'N/A';
return this.data.start.getHours() + ":" + this.data.start.getMinutes();
},
end_time: function(){
if(!this.data.end) return 'N/A';
return this.data.end.getHours() + ":" + this.data.end.getMinutes();
}
},
created() {
console.log("this is an test")
},
@@ -145,11 +154,37 @@ export default {
},
template: /*html*/ `
<bs-modal ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false" >
<template v-slot:title>
{{data.title + ' - ' + data.lehrfach_bez + ' [' + data.ort_kurzbz+']' }}
</template>
<template v-slot:default>
<p>{{JSON.stringify(data,null,2)}}</p>
<div class="row">
<div class="offset-3 col-4"><span>Datum:</span></div>
<div class=" col"><span>{{data.datum}}</span></div>
</div>
<div class="row">
<div class="offset-3 col-4"><span>Raum:</span></div>
<div class=" col"><span>{{data.ort_kurzbz}}</span></div>
</div>
<div class="row">
<div class="offset-3 col-4"><span>LV:</span></div>
<div class=" col"><span>{{'('+data.lehrform+') ' + data.lehrfach_bez}}</span></div>
</div>
<div class="row">
<div class="offset-3 col-4"><span>Lektor:</span></div>
<div class=" col"><span>{{data.lektor}}</span></div>
</div>
<div class="row">
<div class="offset-3 col-4"><span>Zeitraum:</span></div>
<div class=" col"><span>{{start_time + ' - ' + end_time}}</span></div>
</div>
</template>
<!-- end of optional footer -->
<!-- optional footer -->
<template v-slot:footer >
<button class="btn btn-outline-secondary " @click="hide">{{$p.t('ui','cancel')}}</button>
</template>
<!-- end of optional footer -->
</bs-modal>`,
};
public/js/components/Calendar/Pane.js
+2 -1
View File
@@ -46,7 +46,8 @@ export default {
},
template: `
<div ref="carousel" class="calendar-pane carousel slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
<div class="carousel-inner">
<!--height calc function just for user testing purpose (has to be fixed)-->
<div class="carousel-inner " style="height:calc(100vh - 220px); overflow:scroll">
<div v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item">
<slot :index="i" :offset="offsets[i]" />
</div>
public/js/components/Calendar/Week/Page.js
+3 -3
View File
@@ -92,19 +92,19 @@ export default {
template: `
<div class="fhc-calendar-week-page">
<div class="d-flex flex-column border-top">
<div class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex">
<div style="position:sticky; top:10px; z-index:1020;" class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex">
<div v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})">
<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
<a href="#" class="small text-secondary text-decoration-none" @click.prevent="changeToMonth(day)">{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
</div>
</div>
<div ref="eventcontainer" class="flex-grow-1 overflow-auto">
<div ref="eventcontainer" class="flex-grow-1">
<div class="events">
<div class="hours">
<div v-for="hour in hours" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
</div>
<div v-for="day in eventsPerDayAndHour" :key="day" class="day border-start" :style="{'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)', 'grid-template-rows': 'repeat(' + (1440 / smallestTimeFrame) + ', 1fr)'}">
<a href="#" :title="event.orig.title + ' - ' + event.orig.lehrfach_bez + ' [' + event.orig.ort_kurzbz+']'" v-for="event in day.events" :key="event" class="m-2 border border-dark border-2 small rounded overflow-hidden text-decoration-none text-dark" :style="{'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end), '--test': dateToMinutesOfDay(event.end), background: event.orig.farbe}" @click.prevent="$emit('input', event.orig)">
<a href="#" :title="event.orig.title + ' - ' + event.orig.lehrfach_bez + ' [' + event.orig.ort_kurzbz+']'" v-for="event in day.events" :key="event" class="mx-2 border border-dark border-2 small rounded overflow-hidden text-decoration-none text-dark" :style="{'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end), 'background': event.orig.farbe?event.orig.farbe:'white' ,'--test': dateToMinutesOfDay(event.end)}" @click.prevent="$emit('input', event.orig)">
<div class="d-flex flex-column align-items-center justify-content-evenly h-100">
<span>{{event.orig.title}}</span>
<span>{{event.orig.ort_kurzbz}}</span>