Merge branch 'merge_C4_25999_61235_61730' into rc1_FHC4_C4

public/css/Cis4/CoreCalendarEvents.css

@@ -4,96 +4,96 @@
 	height: 100%;
 }
 
-/* Feiertag */
-.feiertagEventContent {
+/* Feiertage */
+.cis-renderer-feiertage-calendar-event {
 	align-items: center;
 	color: var(--fhc-light);
 }
-.monthPageContainer .feiertagEventContent,
-.weekPageContainer .feiertagEventContent,
-.dayPageContainer .feiertagEventContent {
+.monthPageContainer .cis-renderer-feiertage-calendar-event,
+.weekPageContainer .cis-renderer-feiertage-calendar-event,
+.dayPageContainer .cis-renderer-feiertage-calendar-event {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	justify-items: center;
 }
-.listPageContainer .feiertagEventContent {
+.listPageContainer .cis-renderer-feiertage-calendar-event {
 	display: flex;
 	justify-content: center;
 }
 
-.monthPageContainer .feiertagEventContent #ferienEventIcon {
+.monthPageContainer .cis-renderer-feiertage-calendar-event .event-icon {
 	margin: 0 .5rem;
 }
-.weekPageContainer .feiertagEventContent #ferienEventIcon,
-.dayPageContainer .feiertagEventContent #ferienEventIcon,
-.listPageContainer .feiertagEventContent #ferienEventIcon {
+.weekPageContainer .cis-renderer-feiertage-calendar-event .event-icon,
+.dayPageContainer .cis-renderer-feiertage-calendar-event .event-icon,
+.listPageContainer .cis-renderer-feiertage-calendar-event .event-icon {
 	margin: .5rem;
 }
 
-.listPageContainer .feiertagEventContent #ferienEventTitle {
+.listPageContainer .cis-renderer-feiertage-calendar-event .event-title {
 	flex-grow: 1;
 }
 
 /* Lehreinheit */
-.monthPageContainer .lehreinheitEventContent {
+/* Reservierungen */
+.monthPageContainer .calendar-event-default {
 	padding: 0!important;
 }
-.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader,
-.monthPageContainer .lehreinheitEventContent #lehreinheitLektoren,
-.monthPageContainer .lehreinheitEventContent #lektorEllipsis {
+.monthPageContainer .calendar-event-default .event-time,
+.monthPageContainer .calendar-event-default .event-lectors {
 	display: none!important;
 }
-.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
+.monthPageContainer .calendar-event-default .event-text {
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
 }
-.weekPageContainer .lehreinheitEventContent {
+.weekPageContainer .calendar-event-default {
 	display: grid;
 	grid-template-columns: auto 1fr;
 }
-.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+.weekPageContainer .calendar-event-default .event-time {
 	border-inline-end: solid 1px var(--bs-secondary);
 	align-self: stretch;
 	align-content: center;
 	padding: .25em .5em .25em .25em;
 	margin-inline-end: .25rem;
 }
-.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
+.weekPageContainer .calendar-event-default .event-text {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-evenly;
 	align-items: center;
 }
-.dayPageContainer .lehreinheitEventContent,
-.listPageContainer .lehreinheitEventContent {
+.dayPageContainer .calendar-event-default,
+.listPageContainer .calendar-event-default {
 	display: flex;
 	align-items: center;
 }
-.dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader,
-.listPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+.dayPageContainer .calendar-event-default .event-time,
+.listPageContainer .calendar-event-default .event-time {
 	align-content: center;
 	padding-inline-end: .5em;
 	border-inline-end: solid 1px;
 	margin-inline-end: .5em;
 }
-.dayPageContainer .lehreinheitEventContent #lehreinheitEventText,
-.listPageContainer .lehreinheitEventContent #lehreinheitEventText {
+.dayPageContainer .calendar-event-default .event-text,
+.listPageContainer .calendar-event-default .event-text {
 	flex: 1 1 auto;
 	display: flex;
 	flex-wrap: wrap;
 	gap: .25em;
 	justify-content: center;
 }
-.dayPageContainer .lehreinheitEventContent #lehreinheitTopic,
-.dayPageContainer .lehreinheitEventContent #lehreinheitOrt,
-.listPageContainer .lehreinheitEventContent #lehreinheitTopic,
-.listPageContainer .lehreinheitEventContent #lehreinheitOrt {
+.dayPageContainer .calendar-event-default .event-topic,
+.dayPageContainer .calendar-event-default .event-place,
+.listPageContainer .calendar-event-default .event-topic,
+.listPageContainer .calendar-event-default .event-place {
 	flex: 0 0 100%;
 	text-align: center;
 }
 
-.fhc-roominformation .lehreinheitEventContent #lehreinheitOrt {
+.fhc-roominformation .calendar-event-default .event-place {
 	display: none;
 }
 

public/js/api/factory/lvPlan.js

@@ -30,8 +30,21 @@ export default {
 			params: { start_date, end_date, lv_id }
 		};
 	},
+	eventsPersonal(start_date, end_date) {
+		return {
+			method: 'post',
+			url: '/api/frontend/v1/lvPlan/eventsPersonal',
+			params: { start_date, end_date }
+		};
+	},
+	eventsLv(lv_id, start_date, end_date) {
+		return {
+			method: 'post',
+			url: '/api/frontend/v1/lvPlan/eventsLv',
+			params: { lv_id, start_date, end_date }
+		};
+	},
 	getStunden() {
-		// TODO(chris): seems to be called from nowhere?
 		return {
 			method: 'get',
 			url: '/api/frontend/v1/LvPlan/Stunden'
@@ -65,7 +78,7 @@ export default {
 	},
 	LvPlanEvents(start_date, end_date, lv_id) {
 		return {
-			method: 'get',
+			method: 'post',
 			url: '/api/frontend/v1/LvPlan/LvPlanEvents',
 			params: { 
 				start_date: start_date, 
@@ -74,4 +87,10 @@ export default {
 			}
 		};
 	},
+	getLv(lehrveranstaltung_id) {
+		return {
+			method: 'get',
+			url: '/api/frontend/v1/LvPlan/getLv/' + lehrveranstaltung_id
+		};
+	}
 };

public/js/apps/Dashboard/Fhc.js

@@ -3,7 +3,8 @@ import PluginsPhrasen from '../../plugins/Phrasen.js';
 import Theme from '../../plugin/Theme.js';
 import contrast from '../../directives/contrast.js';
 import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers.js";
-import LvPlan, {DEFAULT_MODE_LVPLAN} from "../../components/Cis/LvPlan/LvPlan.js";
+import LvPlan from "../../components/Cis/LvPlan/Lehrveranstaltung.js";
+import MyLvPlan from "../../components/Cis/LvPlan/Personal.js";
 import MylvStudent from "../../components/Cis/Mylv/Student.js";
 import Profil from "../../components/Cis/Profil/Profil.js";
 import Raumsuche from "../../components/Cis/Raumsuche/Raumsuche.js";
@@ -154,10 +155,14 @@ const router = VueRouter.createRouter({
 			path: "/Cis/LvPlan/:lv_id(\\d+)", 
 			name: "LvPlanOld",
 			component: LvPlan,
-			redirect: (to) => {
+			redirect(to) {
+				const route = Vue.unref(router.currentRoute);
+				const { mode, focus_date } = route.params; // keep mode and focus_date if available
 				return { // redirect to longer LvPlan url and map params
 					name: "LvPlan",
 					params: {
+						mode,
+						focus_date,
 						lv_id: to.params.lv_id
 					},
 				};
@@ -167,42 +172,20 @@ const router = VueRouter.createRouter({
 			path: `/Cis/LvPlan/:mode?/:focus_date?/:lv_id?`,
 			name: 'LvPlan',
 			component: LvPlan,
-			props: (route) => { // validate and set mode/focus date if for some reason missing
-				const validModes = ["Month", "Week", "Day"];
-
-				// check mode string
-				const mode = route.params.mode &&
-					validModes.includes(route.params.mode.charAt(0).toUpperCase() + route.params.mode.slice(1).toLowerCase())
-						? route.params.mode.charAt(0).toUpperCase() + route.params.mode.slice(1).toLowerCase()
-						: DEFAULT_MODE_LVPLAN;
-
-				// default to today date if not provided or string forms invalid date
-				const d = new Date(route.params.focus_date)
-				const focus_date = !isNaN(d) ? route.params.focus_date : new Date().toISOString().split("T")[0];
-				// for consistency reasons format the props into one object but actually use a new name to we dont collide with
-				// existing viewData declaration written from codeigniter 3 into routerview tag
+			props(route) {
 				return {
-					propsViewData: {
-						mode,
-						focus_date,
-						lv_id: route.params.lv_id
-					}
+					propsViewData: route.params
+				};
+			}
+		},
+		{
+			path: `/Cis/MyLvPlan/:mode?/:focus_date?`,
+			name: 'MyLvPlan',
+			component: MyLvPlan,
+			props(route) {
+				return {
+					propsViewData: route.params
 				};
-			},
-			beforeEnter: (to, from, next) => {
-				//  missing mode or focus_date -> set defaults
-				if (!to.params.mode || !to.params.focus_date) {
-					next({
-						name: "LvPlan",
-						params: {
-							mode: to.params.mode || DEFAULT_MODE_LVPLAN,
-							focus_date: to.params.focus_date || new Date().toISOString().split("T")[0],
-							lv_id: to.params.lv_id
-						}
-					});
-				} else {
-					next();
-				}
 			}
 		},
 		{

public/js/components/Calendar/Base.js

@@ -258,6 +258,9 @@ export default {
 				this.modalEvent.closeFn();
 		}
 	},
+	beforeUnmount() {
+		this.hideEventModal();
+	},
 	template: /* html */`
 	<div class="fhc-calendar-base h-100">
 		<base-draganddrop

public/js/components/Cis/LvPlan/Lehrveranstaltung.js

@@ -0,0 +1,107 @@
+import FhcCalendar from "../../Calendar/LvPlan.js";
+
+import ApiLvPlan from '../../../api/factory/lvPlan.js';
+import ApiAuthinfo from '../../../api/factory/authinfo.js';
+
+export const DEFAULT_MODE_LVPLAN = 'Week'
+
+export default {
+	name: 'LvPlanLehrveranstaltung',
+	components: {
+		FhcCalendar
+	},
+	props: {
+		viewData: Object, // NOTE(chris): this is inherited from router-view
+		propsViewData: Object
+	},
+	data() {
+		return {
+			lv: null
+		};
+	},
+	computed:{
+		currentDay() {
+			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			return this.propsViewData?.focus_date;
+		},
+		currentMode() {
+			if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+				return DEFAULT_MODE_LVPLAN;
+			return this.propsViewData?.mode;
+		},
+		currentLv() {
+			if (isNaN(parseInt(this.propsViewData?.lv_id)))
+				return null;
+			return this.propsViewData.lv_id;
+		},
+		lvTitle() {
+			if (this.currentLv === null)
+				return '';
+			if (!this.lv)
+				return '';
+
+			if (this.$p.user_language.value === 'English')
+				return this.lv.bezeichnung_english;
+
+			return this.lv.bezeichnung;
+		}
+	},
+	methods: {
+		handleChangeDate(day, newMode) {
+			return this.handleChangeMode(newMode, day);
+		},
+		handleChangeMode(newMode, day) {
+			const mode = newMode[0].toUpperCase() + newMode.slice(1)
+			const focus_date = day.toISODate();
+			
+			this.$router.push({
+				name: "LvPlan",
+				params: {
+					mode,
+					focus_date,
+					lv_id: this.currentLv
+				}
+			});
+		},
+		getPromiseFunc(start, end) {
+			return [
+				this.$api.call(ApiLvPlan.eventsLv(this.propsViewData.lv_id, start.toISODate(), end.toISODate())),
+				this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate()))
+			];
+		}
+	},
+	created() {
+		if (this.currentLv === null)
+			return;
+		this.$api
+			.call(ApiLvPlan.getLv(this.propsViewData?.lv_id))
+			.then(res => {
+				this.lv = res.data;
+			});
+	},
+	template: /*html*/`
+	<div class="cis-lvplan-personal d-flex flex-column h-100">
+		<h2>
+			{{ $p.t('lehre/stundenplan') }}
+			<span v-if="lvTitle" class="ps-3">
+				{{ lvTitle }}
+			</span>
+		</h2>
+		<hr>
+		<div v-if="currentLv === null || lv === false">
+			{{ $p.t('lehre/noLvFound') }}
+		</div>
+		<fhc-calendar
+			v-else-if="lv"
+			ref="calendar"
+			:timezone="viewData.timezone"
+			:get-promise-func="getPromiseFunc"
+			:date="currentDay"
+			:mode="currentMode"
+			@update:date="handleChangeDate"
+			@update:mode="handleChangeMode"
+			class="responsive-calendar"
+		/>
+	</div>`
+};

public/js/components/Cis/LvPlan/Personal.js

@@ -0,0 +1,143 @@
+import FhcCalendar from "../../Calendar/LvPlan.js";
+
+import ApiLvPlan from '../../../api/factory/lvPlan.js';
+import ApiAuthinfo from '../../../api/factory/authinfo.js';
+
+export const DEFAULT_MODE_LVPLAN = 'Week'
+
+export default {
+	name: 'LvPlanPersonal',
+	components: {
+		FhcCalendar
+	},
+	props: {
+		viewData: Object, // NOTE(chris): this is inherited from router-view
+		propsViewData: Object
+	},
+	data() {
+		return {
+			studiensemester_kurzbz: null,
+			studiensemester_start: null,
+			studiensemester_ende: null,
+			uid: null
+		};
+	},
+	computed:{
+		currentDay() {
+			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
+				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			return this.propsViewData?.focus_date;
+		},
+		currentMode() {
+			if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
+				return DEFAULT_MODE_LVPLAN;
+			return this.propsViewData?.mode;
+		},
+		downloadLinks() {
+			if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+				return false;
+			
+			const opts = { zone: this.viewData.timezone };
+			const start = luxon.DateTime
+				.fromISO(this.studiensemester_start, opts)
+				.toUnixInteger();
+			const ende = luxon.DateTime
+				.fromISO(this.studiensemester_ende, opts)
+				.toUnixInteger();
+
+			const download_link = FHC_JS_DATA_STORAGE_OBJECT.app_root
+				+ 'cis/private/lvplan/stpl_kalender.php'
+				+ '?type=student'
+				+ '&pers_uid=' + this.uid
+				+ '&begin=' + start
+				+ '&ende=' + ende;
+
+			return [
+				{ title: "excel", icon: 'fa-solid fa-file-excel', link: download_link + '&format=excel' },
+				{ title: "csv", icon: 'fa-solid fa-file-csv', link: download_link + '&format=csv' },
+				{ title: "ical1", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=1&target=ical' },
+				{ title: "ical2", icon: 'fa-regular fa-calendar', link: download_link + '&format=ical&version=2&target=ical' }
+			];
+		}
+	},
+	methods: {
+		handleChangeDate(day, newMode) {
+			return this.handleChangeMode(newMode, day);
+		},
+		handleChangeMode(newMode, day) {
+			const mode = newMode[0].toUpperCase() + newMode.slice(1)
+			const focus_date = day.toISODate();
+			
+			this.$router.push({
+				name: "MyLvPlan",
+				params: {
+					mode,
+					focus_date
+				}
+			});
+		},
+		updateRange(rangeInterval) {
+			this.$api
+				.call(ApiLvPlan.studiensemesterDateInterval(
+					rangeInterval.end.startOf('week').toISODate()
+				))
+				.then(res => {
+					this.studiensemester_kurzbz = res.data.studiensemester_kurzbz;
+					this.studiensemester_start = res.data.start;
+					this.studiensemester_ende = res.data.ende;
+				});
+		},
+		getPromiseFunc(start, end) {
+			return [
+				this.$api.call(ApiLvPlan.eventsPersonal(start.toISODate(), end.toISODate())),
+				this.$api.call(ApiLvPlan.getLvPlanReservierungen(start.toISODate(), end.toISODate()))
+			];
+		}
+	},
+	created() {
+		this.$api
+			.call(ApiAuthinfo.getAuthUID())
+			.then(res => {
+				this.uid = res.data.uid;
+			});
+	},
+	template: /*html*/`
+	<div class="cis-lvplan-personal d-flex flex-column h-100">
+		<h2>
+			{{ $p.t('lehre/stundenplan') }}
+			<span v-if="studiensemester_kurzbz" class="ps-3">
+				{{ studiensemester_kurzbz }}
+			</span>
+		</h2>
+		<hr>
+		<fhc-calendar
+			ref="calendar"
+			:timezone="viewData.timezone"
+			:get-promise-func="getPromiseFunc"
+			:date="currentDay"
+			:mode="currentMode"
+			@update:date="handleChangeDate"
+			@update:mode="handleChangeMode"
+			@update:range="updateRange"
+			class="responsive-calendar"
+		>
+			<div
+				v-if="downloadLinks"
+				class="d-flex gap-1 justify-items-start"
+			>
+				<div v-for="{ title, icon, link } in downloadLinks">
+					<a
+						:href="link"
+						:aria-label="title"
+						class="py-1 btn btn-outline-secondary"
+					>
+						<div class="d-flex flex-column">
+							<i aria-hidden="true" :class="icon"></i>
+							<span style="font-size:.5rem">{{ title }}</span>
+						</div>
+					</a>
+				</div>
+			</div>
+		</fhc-calendar>
+	</div>`
+};

public/js/components/Cis/Renderer/Feiertage/calendarEvent.js

@@ -7,8 +7,8 @@ export default {
 		},
 	},
 	template: `
-		<div class="feiertagEventContent " >
-			<i id="ferienEventIcon" class="fa-regular fa-calendar"></i>
-			<span id="ferienEventTitle" class="fw-bold text-center">{{event.titel}}</span>
-		</div>`,
+	<div class="cis-renderer-feiertage-calendar-event">
+		<i class="event-icon" class="fa-regular fa-calendar"></i>
+		<span class="event-title fw-bold text-center">{{ event.titel }}</span>
+	</div>`,
 };

public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js

@@ -1,59 +1,92 @@
 export default {
-	methods:{
-		convertTime: function ([hour, minute]) {
-			let date = new Date();
-			date.setHours(hour);
-			date.setMinutes(minute);
-			// returns date string as hh:mm
-			return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12: false });
-
-		},
-	},
-	computed:{
-		calendarEventTooltip: function(){
-			let lektorenEmpty = true;
-			let tooltipString = `${this.$p.t('global','uhrzeit')}: ${this.convertTime(this.event.beginn.split(":"))} / ${this.convertTime(this.event.ende.split(":")) }`;
-			
-			tooltipString += `\n${this.$p.t('profilUpdate', 'topic')}: ${this.event.topic}`;
-			tooltipString += `${this.$p.t('person', 'ort')}: ${this.event.ort_kurzbz}`;
-			if(Array.isArray(this.event.lektor) && this.event.lektor.length > 0){
-				lektorenEmpty = false;
-				tooltipString += `\n${this.$p.t('lehre','lektor')}: `;
-				this.event.lektor.slice(0,3).forEach(lektor => {
-					tooltipString += `${lektor.kurzbz}\n`;
-				})
-				if(this.event.lektor.length > 3){
-					tooltipString += `${this.$p.t('lehre', 'weitereLektoren', [(this.event.lektor.length - 3)])}\n`;
-				}
-			}
-			if(lektorenEmpty){
-				tooltipString += "\n";	
-			}
-			
-			
-			return tooltipString;
-		},
-	},
 	props:{
 		event: {
-			type:Object,
-			required:true,
+			type: Object,
+			required: true
+		}
+	},
+	computed:{
+		tooltipString() {
+			const tooltipArray = [];
+
+			tooltipArray.push([
+				this.$p.t('global/uhrzeit'),
+				[this.start, this.end].join(' - ')
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('profilUpdate/topic'),
+				this.event.topic
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('person/ort'),
+				this.event.ort_kurzbz
+			].join(": "));
+
+			this.event.lektor = [
+				this.event.lektor[0],
+				this.event.lektor[0],
+				this.event.lektor[0],
+				this.event.lektor[0],
+				this.event.lektor[0],
+			];
+			
+			if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) {
+				if (this.event.lektor.length > 3) {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n")
+						+ "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3])
+					].join(": "));
+				} else {console.log(this.event.lektor);
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.map(lektor => lektor.kurzbz).join("\n")
+					].join(": "));
+				}
+			}
+			
+			return tooltipArray.join("\n");
 		},
+		start() {
+			return luxon.Duration
+				.fromISOTime(this.event.beginn)
+				.toISOTime({ suppressSeconds: true });
+		},
+		end() {
+			return luxon.Duration
+				.fromISOTime(this.event.ende)
+				.toISOTime({ suppressSeconds: true });
+		}
 	},
 	template: /*html*/`
-	<div class="lehreinheitEventContent h-100 w-100 p-1" @wheel.stop >
-		<div id="lehreinheitEventHeader" class="d-none d-xl-grid h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
-			<span >{{convertTime(event.beginn.split(":"))}}</span>
-			<span >{{convertTime(event.ende.split(":"))}}</span>
+	<div
+		class="cis-renderer-lehreinheit-calendar-event calendar-event-default h-100 w-100 p-1"
+		@wheel.stop
+	>
+		<div
+			v-if="!event.allDayEvent && event?.beginn && event?.ende"
+			class="event-time d-none d-xl-grid h-100"
+		>
+			<span>{{ start }}</span>
+			<span>{{ end }}</span>
 		</div>
-		<div id="lehreinheitEventText" v-tooltip="calendarEventTooltip">
-			<span id="lehreinheitTopic">{{event.topic}}</span>
-			<span id="lehreinheitOrt">{{event.ort_kurzbz}}</span>
-			<span id="lehreinheitLektoren" v-for="(lektor,index) in event.lektor.slice(0,3)">
-				{{lektor.kurzbz}}
+		<div class="event-text" v-tooltip="tooltipString">
+			<span class="event-topic">{{ event.topic }}</span>
+			<span class="event-place">{{ event.ort_kurzbz }}</span>
+			<span
+				v-for="(lektor,index) in event.lektor.slice(0, 3)"
+				class="event-lectors"
+			>
+				{{ lektor.kurzbz }}
+			</span>
+			<span
+				v-if="event.lektor.length > 3"
+				class="event-lectors-plus"
+			>
+				... +{{ event.lektor.length - 3 }}
 			</span>
-			<span id="lektorEllipsis" class="fw-bold" v-if="event.lektor.length > 3">...+ 
-		 	{{event.lektor.length-3}}</span>
 		</div>
 	</div>
 	`,

public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js

@@ -1,30 +1,83 @@
 export default {
-	methods: {
-		convertTime: function ([hour, minute]) {
-			let date = new Date();
-			date.setHours(hour);
-			date.setMinutes(minute);
-			// returns date string as hh:mm
-			return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12: false });
-
-		},
-	},
 	props: {
 		event: {
 			type: Object,
-			required: true,
-		},
+			required: true
+		}
 	},
-	template: `
-	<div class="lehreinheitEventContent h-100 w-100 p-1" >
-		<div id="lehreinheitEventHeader" class="h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
-			<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
-			<span class="small">{{convertTime(event.ende.split(":"))}}</span>
+	computed: {
+		tooltipString() {
+			const tooltipArray = [];
+
+			tooltipArray.push([
+				this.$p.t('global/uhrzeit'),
+				[this.start, this.end].join(' - ')
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('profilUpdate/topic'),
+				this.event.topic
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('person/ort'),
+				this.event.ort_kurzbz
+			].join(": "));
+			
+			if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) {
+				if (this.event.lektor.length > 3) {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n")
+						+ "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3])
+					].join(": "));
+				} else {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.map(lektor => lektor.kurzbz).join("\n")
+					].join(": "));
+				}
+			}
+			
+			return tooltipArray.join("\n");
+		},
+		start() {
+			return luxon.Duration
+				.fromISOTime(this.event.beginn)
+				.toISOTime({ suppressSeconds: true });
+		},
+		end() {
+			return luxon.Duration
+				.fromISOTime(this.event.ende)
+				.toISOTime({ suppressSeconds: true });
+		}
+	},
+	template: /* html */`
+	<div
+		class="cis-renderer-reservierungen-calendar-event calendar-event-default h-100 w-100 p-1"
+	>
+		<div
+			v-if="!event.allDayEvent && event?.beginn && event?.ende"
+			class="event-time d-grid h-100"
+		>
+			<span>{{ start }}</span>
+			<span>{{ end }}</span>
 		</div>
-		<div id="lehreinheitEventText">
-			<span>{{event.topic}}</span>
-			<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
-			<span>{{event.ort_kurzbz}}</span>
+		<div class="event-text" v-tooltip="tooltipString">
+			<span class="event-topic">{{ event.topic }}</span>
+			<span
+				v-for="lektor in event.lektor.slice(0, 3)"
+				class="event-lectors"
+			>
+				{{ lektor.kurzbz }}
+			</span>
+			<span
+				v-if="event.lektor.length > 3"
+				class="event-lectors-plus"
+			>
+				... +{{ event.lektor.length - 3 }}
+			</span>
+			<span class="event-place">{{ event.ort_kurzbz }}</span>
 		</div>
 	</div>
 	`,

public/js/components/Cis/Renderer/Reservierungen/modalContent.js

@@ -34,7 +34,7 @@ export default {
 		start_time: function () {
 			if (!this.event.beginn)
 				return 'N/A';
-			if (!this.event.beginn instanceof Date) {
+			if (!(this.event.beginn instanceof Date)) {
 				return this.event.beginn;
 			}
 			return numberPadding(this.event.beginn.getHours()) + ":" + numberPadding(this.event.beginn.getMinutes());
@@ -42,7 +42,7 @@ export default {
 		end_time: function () {
 			if (!this.event.ende)
 				return 'N/A';
-			if (!this.event.ende instanceof Date) {
+			if (!(this.event.ende instanceof Date)) {
 				return this.event.ende;
 			}
 			return numberPadding(this.event.ende.getHours()) + ":" + numberPadding(this.event.ende.getMinutes());