WIP stundenplan widget tagesansicht

application/config/routes.php

@@ -62,6 +62,7 @@ $route['api/v1/ressource/[B|b]etriebsmittelperson/(:any)'] = 'api/v1/ressource/b
 $route['api/v1/system/[S|s]prache/(:any)'] = 'api/v1/system/sprache2/$1';
 
 $route['CisVue'] = 'CisVue/dashboard';
+$route['Cis/Stundenplan/(:any)'] = 'Cis/Stundenplan';
 
 // load routes from extensions
 $subdir = 'application/config/extensions';
@@ -83,5 +84,4 @@ if ($dirlist)
 			}
 		}
 	}
-}
-
+}

public/js/apps/Cis/Stundenplan.js

@@ -8,6 +8,7 @@ const app = Vue.createApp({
 	data() {
 		return {
 			stunden: [],
+			lv_id: null,
 			events: null,
 			calendarDate: new CalendarDate(new Date()),
 			currentlySelectedEvent: null,
@@ -34,6 +35,9 @@ const app = Vue.createApp({
 		},
 	},
 	methods:{
+		getLvID: function () {
+			this.lv_id = window.location.pathname
+		},
 		selectDay: function(day){
 			this.currentDay = day;
 		},
@@ -99,6 +103,7 @@ const app = Vue.createApp({
 		},
 	},
 	created(){
+		this.getLvID()
 		this.loadEvents();
 	},
 	//TODO: Stundenplan phrase

public/js/components/DashboardWidget/Stundenplan.js

@@ -21,7 +21,7 @@ export default {
 			stunden: [],
 			minimized: true,
 			events: null,
-			currentDay: new Date(),
+			currentDay: this.getCurrentDate(),
 			calendarDate: new CalendarDate(new Date()),
 			roomInfoContentID: null,
 			ort_kurzbz: null,
@@ -29,23 +29,51 @@ export default {
 		}
 	},
 	computed: {
-		
+		nextEventsGrouped() {
+			// groups all events of all days until end of week together
+			return new Map((this.events || []).filter(evt => evt.end < this.endOfWeek && evt.start >= this.currentDay).reduce((acc, cur) => {
+				const date = new CalendarDate(new Date(cur.datum))
+				const arr = acc.find(el => el[0].compare(date))
+				if(arr) {
+					arr[1].push(cur)
+				} else {
+					acc.push([date, [cur]])
+				}
+				return acc
+			}, []))
+		},
 		currentEvents() {
-			return (this.events || []).filter(evt => evt.end < this.dayAfterCurrentDay && evt.start >= this.currentDay);
+			return (this.events || []).filter(evt => evt.end < this.dayAfterCurrentDay && evt.start >= this.currentDay)//.sort((e1, e2) => e1.beginn > e2.beginn);
 		},
 		dayAfterCurrentDay() {
 			let currentDay = new Date(this.currentDay);
 			currentDay.setDate(currentDay.getDate() + 1);
 			return currentDay;
 		},
+		endOfWeek() {
+			let endOfWeek = new Date(this.currentDay); //
+			endOfWeek.setDate(this.currentDay.getDate() + (7 - this.currentDay.getDay()));
+			endOfWeek.setHours(23, 59, 59, 999);
+			return endOfWeek;
+		},
 		monthFirstDay: function () {
 			return this.calendarDateToString(this.calendarDate.cdFirstDayOfCalendarMonth);
 		},
 		monthLastDay: function () {
 			return this.calendarDateToString(this.calendarDate.cdLastDayOfCalendarMonth);
-		},
+		}
 	},
 	methods: {
+		getEventStyle: function(evt) {
+			const styles = {'background-color': evt.color};
+			if(evt.start.getTime() < Date.now()) styles.opacity = 0.5;
+			return styles;
+		},
+		getCurrentDate: function() {
+			const today = new Date()
+			today.setHours(0,0,0)
+			return today
+		},
 		calendarDateToString: function (calendarDate) {
 
 			return calendarDate instanceof CalendarDate ?
@@ -127,6 +155,10 @@ export default {
 				this.events = promise_events;
 			});
 		},
+
+		setCalendarMaximized() {
+			this.minimized = false
+		}
 	
 
 	},
@@ -160,23 +192,29 @@ export default {
 	<div class="dashboard-widget-stundenplan d-flex flex-column h-100">
 		<lv-modal v-if="selectedEvent" ref="lvmodal" :event="selectedEvent"  />
 		<content-modal :contentID="roomInfoContentID" :ort_kurzbz="" dialogClass="modal-lg" ref="contentModal"/>
-		<fhc-calendar @change:range="updateRange" :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
+		<fhc-calendar ref="calendar" @change:range="updateRange" :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
 		<div v-show="minimized" class="flex-grow-1 overflow-scroll">
 			<div v-if="events === null" class="d-flex h-100 justify-content-center align-items-center">
 				<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 			</div>
-			<div v-else-if="currentEvents.length" class="list-group list-group-flush">
-				<div role="button" @click="showLvUebersicht(evt)" class="" v-for="evt in currentEvents" :key="evt.id" class="list-group-item small" :style="{'background-color':evt.color}">
-					<b>{{evt.topic}}</b>
-					<br>
-					<small class="d-flex w-100 justify-content-between">
-						<!-- event modifier stop to prevent opening the modal for the lv Uebersicht when clicking on the ort_kurzbz -->
-						<span @click.stop="showRoomInfoModal(evt.ort_kurzbz)" style="text-decoration:underline" type="button">{{evt.ort_kurzbz}}</span>
-						<span>{{evt.start.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}-{{evt.end.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}</span>
-					</small>
-				</div>
+			<div v-if="nextEventsGrouped.size" class="list-group list-group-flush">
+				<template v-for="([key, value], index) in nextEventsGrouped" :key="index" style="margin-top: 8px;">
+					<div v-if="index > 0" class="card-header d-grid p-0">
+						<button class="btn btn-link link-secondary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"})}}</button>
+					</div>
+					<div role="button" @click="showLvUebersicht(evt)" v-for="evt in value" :key="evt.id" class="list-group-item small" :style="getEventStyle(evt)">
+						<b>{{evt.topic}}</b>
+						<br>
+						<small class="d-flex w-100 justify-content-between">
+							<!-- event modifier stop to prevent opening the modal for the lv Uebersicht when clicking on the ort_kurzbz -->
+							<span @click.stop="showRoomInfoModal(evt.ort_kurzbz)" style="text-decoration:underline" type="button">{{evt.ort_kurzbz}}</span>
+							<span>{{evt.start.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}-{{evt.end.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}</span>
+						</small>
+					</div>
+				</template>
 			</div>
-			<div v-else class="d-flex h-100 justify-content-center align-items-center fst-italic text-center">
+		
+			<div v-else-if class="d-flex h-100 justify-content-center align-items-center fst-italic text-center">
 				{{ p.t('lehre/noLvFound') }}
 			</div>
 		</div>