Stundenplan Widget

public/js/components/Calendar/Abstract.js

@@ -1,4 +1,4 @@
-import CalendarHeader from './Header';
+import CalendarHeader from './Header.js';
 
 export default {
 	components: {

public/js/components/Calendar/Calendar.js

@@ -27,11 +27,16 @@ export default {
 			showWeeks: this.showWeeks,
 			noMonthView: this.noMonthView,
 			noWeekView: this.noWeekView,
-			eventsAreNull: Vue.computed(() => this.events === null)
+			eventsAreNull: Vue.computed(() => this.events === null),
+			classHeader: this.classHeader
 		};
 	},
 	props: {
 		events: Array,
+		initialDate: {
+			type: [Date, String],
+			default: new Date()
+		},
 		showWeeks: {
 			type: Boolean,
 			default: true
@@ -40,6 +45,10 @@ export default {
 			type: String,
 			default: 'month'
 		},
+		classHeader: {
+			type: [String,Object,Array],
+			default: ''
+		},
 		minimized: Boolean,
 		noWeekView: Boolean,
 		noMonthView: Boolean
@@ -103,7 +112,7 @@ export default {
 		if (!this.noMonthView)
 			allowedInitialModes.push('month');
 		this.mode = allowedInitialModes[allowedInitialModes.indexOf(this.initialMode)] || allowedInitialModes.pop();
-		this.date.set(new Date(2023,0,1));
+		this.date.set(new Date(this.initialDate));
 		this.focusDate.set(this.date);
 	},
 	mounted() {

public/js/components/Calendar/Header.js

@@ -1,7 +1,8 @@
 export default {
 	inject: [
 		'eventsAreNull',
-		'size'
+		'size',
+		'classHeader'
 	],
 	props: {
 		title: String
@@ -11,9 +12,26 @@ export default {
 		'next',
 		'click'
 	],
+	computed: {
+		myClassHeader() {
+			// TODO(chris): + {'btn-sm': !this.size}
+			let c = this.classHeader;
+			if (Array.isArray(c)) {
+				if (!this.size)
+					c.push('btn-sm');
+			} else if (typeof c === 'string' || c instanceof String) {
+				if (!this.size)
+					c += ' btn-sm';
+			} else {
+				c['btn-sm'] = !this.size;
+			}
+
+			return c;
+		}
+	},
 	template: `
-	<div class="calendar-header card-header btn-group w-100">
-		<button class="btn btn-outline-secondary border-0 flex-grow-0" :class="{'btn-sm': !this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
+	<div class="calendar-header card-header btn-group w-100" :class="classHeader">
+		<button class="btn btn-outline-secondary border-0 flex-grow-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
 		<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
 			{{ title }}
 			<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>

public/js/components/Calendar/Minimized.js

@@ -7,7 +7,8 @@ export default {
 	inject: [
 		'size',
 		'minimized',
-		'date'
+		'date',
+		'classHeader'
 	],
 	data() {
 		return {
@@ -22,7 +23,7 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-minimized">
-		<div class="card-header d-grid">
+		<div class="card-header d-grid" :class="classHeader">
 			<button class="btn btn-link link-secondary text-decoration-none" @click="maximize">{{ date.format({dateStyle: ['long','full','full','full'][this.size]}) }}</button>
 		</div>
 	</div>`

public/js/components/DashboardWidget/Stundenplan.js

@@ -1,8 +1,10 @@
-import AbstractWidget from './Abstract';
-import FhcCalendar from '../Calendar/Calendar';
+import Phrasen from '../../mixins/Phrasen.js';
+import AbstractWidget from './Abstract.js';
+import FhcCalendar from '../Calendar/Calendar.js';
 
 export default {
 	mixins: [
+		Phrasen,
 		AbstractWidget
 	],
 	components: {
@@ -10,6 +12,7 @@ export default {
 	},
 	data() {
 		return {
+			stunden: [],
 			minimized: true,
 			events: null,
 			currentDay: new Date()
@@ -17,39 +20,65 @@ export default {
 	},
 	computed: {
 		currentEvents() {
-			return (this.events || []).filter(evt => evt.end > this.currentDay && evt.start <= this.currentDay);
+			return (this.events || []).filter(evt => evt.end < this.dayAfterCurrentDay && evt.start >= this.currentDay);
+		},
+		dayAfterCurrentDay() {
+			let currentDay = new Date(this.currentDay);
+			currentDay.setDate(currentDay.getDate() + 1);
+			return currentDay;
 		}
 	},
 	methods: {
 		selectDay(day) {
+			this.currentDay = day;
 			this.minimized = true;
 		}
 	},
 	created() {
+		this.$emit('setConfig', false);
 		axios
-			.get(this.apiurl + '/components/Cis/Stundenplan')
-			.then(res => {
-				res.data.retval.forEach((el, i) => {
-					el.id = i;
-					el.color = '#' + (el.farbe || 'CCCCCC');
-					el.start = new Date(el.datum + ' ' + this.stunden[el.stunde].beginn);
-					el.end = new Date(el.datum + ' ' + this.stunden[el.stunde].ende);
-					el.title = el.lehrfach;
-					if (el.lehrform)
-						el.title += '-' + el.lehrform;
+			.get(this.apiurl + '/components/Cis/Stundenplan/Stunden').then(res => {
+				res.data.retval.forEach(std => {
+					this.stunden[std.stunde] = std; // TODO(chris): geht besser
 				});
-				this.events = res.data.retval || [];
+				axios
+					.get(this.apiurl + '/components/Cis/Stundenplan')
+					.then(res => {
+						res.data.retval.forEach((el, i) => {
+							el.id = i;
+							el.color = '#' + (el.farbe || 'CCCCCC');
+							el.start = new Date(el.datum + ' ' + this.stunden[el.stunde].beginn);
+							el.end = new Date(el.datum + ' ' + this.stunden[el.stunde].ende);
+							el.title = el.lehrfach;
+							if (el.lehrform)
+								el.title += '-' + el.lehrform;
+						});
+						this.events = res.data.retval || [];
+					})
+					.catch(err => { console.log(err);console.error('ERROR: ', err.response.data) });
 			})
 			.catch(err => { console.error('ERROR: ', err.response.data) });
 	},
 	template: `
-	<div class="dashboard-widget-stundenplan" v-if="configMode">
-		config
-	</div>
-	<div class="dashboard-widget-stundenplan" v-else>
-		<fhc-calendar class="border-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
-		<div v-show="minimized">
-			{{currentEvents}}
+	<div class="dashboard-widget-stundenplan d-flex flex-column h-100">
+		<fhc-calendar :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 class="" v-for="evt in currentEvents" :key="evt.id" class="list-group-item small" :style="{'background-color':evt.color}">
+					<b>{{evt.title}}</b>
+					<br>
+					<small class="d-flex w-100 justify-content-between">
+						<span>{{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>
+			<div v-else class="d-flex h-100 justify-content-center align-items-center fst-italic text-center">
+				{{ p.t('lehre/noLvFound') }}
+			</div>
 		</div>
 	</div>`
 }