From 999827b3ecdce3661c05187e8bd1f0a4b557871b Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Tue, 21 Apr 2026 15:49:51 +0200
Subject: [PATCH 1/6] in mobile replacing lvplan weekview with listview

---
 public/js/apps/Dashboard/Fhc.js               |  9 ++---
 public/js/components/Calendar/LvPlan.js       | 36 ++++++++++++++-----
 public/js/components/Calendar/Mode/List.js    |  2 +-
 .../Cis/LvPlan/Lehrveranstaltung.js           | 13 +++++--
 public/js/components/Cis/LvPlan/LvPlan.js     |  7 ++--
 public/js/components/Cis/LvPlan/Personal.js   | 13 +++++--
 .../js/components/Cis/Mylv/RoomInformation.js |  7 ++--
 7 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index 140c76402..97d3a37c8 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -11,7 +11,7 @@ import Raumsuche from "../../components/Cis/Raumsuche/Raumsuche.js";
 import CmsNews from "../../components/Cis/Cms/News.js";
 import CmsContent from "../../components/Cis/Cms/Content.js";
 import Info from "../../components/Cis/Mylv/Semester/Studiengang/Lv/Info.js";
-import RoomInformation, {DEFAULT_MODE_RAUMINFO} from "../../components/Cis/Mylv/RoomInformation.js";
+import RoomInformation, {DEFAULT_MODE_RAUMINFO_DESKTOP, DEFAULT_MODE_RAUMINFO_MOBILE} from "../../components/Cis/Mylv/RoomInformation.js";
 import AbgabetoolStudent from "../../components/Cis/Abgabetool/AbgabetoolStudent.js";
 import AbgabetoolMitarbeiter from "../../components/Cis/Abgabetool/AbgabetoolMitarbeiter.js";
 import AbgabetoolAssistenz from "../../components/Cis/Abgabetool/AbgabetoolAssistenz.js";
@@ -23,6 +23,7 @@ import ApiRouteInfo from '../../api/factory/routeinfo.js';
 import {capitalize} from "../../helpers/StringHelpers.js";
 
 const ciPath = FHC_JS_DATA_STORAGE_OBJECT.app_root.replace(/(https:|)(^|\/\/)(.*?\/)/g, '') + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
+const isMobile = window.matchMedia("(max-width: 767px)").matches;
 
 const router = VueRouter.createRouter({
 	history: VueRouter.createWebHistory(`/${ciPath}`),
@@ -85,7 +86,7 @@ const router = VueRouter.createRouter({
 					name: "RoomInformation",
 					params: { // in this case always populate other params since they are not optional
 						ort_kurzbz: to.params.ort_kurzbz,
-						mode: DEFAULT_MODE_RAUMINFO,
+						mode: isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP,
 						focus_date: new Date().toISOString().split("T")[0]
 					},
 				};
@@ -102,7 +103,7 @@ const router = VueRouter.createRouter({
 				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_RAUMINFO;
+					: (isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP);
 
 				// default to today date if not provided
 				const d = new Date(route.params.focus_date)
@@ -124,7 +125,7 @@ const router = VueRouter.createRouter({
 					next({
 						name: "RoomInformation",
 						params: {
-							mode: to.params.mode || DEFAULT_MODE_RAUMINFO,
+							mode: to.params.mode || (isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP),
 							focus_date: to.params.focus_date || new Date().toISOString().split("T")[0],
 							ort_kurzbz: route.params.ort_kurzbz
 						}
diff --git a/public/js/components/Calendar/LvPlan.js b/public/js/components/Calendar/LvPlan.js
index e0e918f01..d03e06171 100644
--- a/public/js/components/Calendar/LvPlan.js
+++ b/public/js/components/Calendar/LvPlan.js
@@ -7,6 +7,7 @@ import { useEventLoader } from '../../composables/EventLoader.js';
 import ModeDay from './Mode/Day.js';
 import ModeWeek from './Mode/Week.js';
 import ModeMonth from './Mode/Month.js';
+import ModeList from './Mode/List.js';
 
 export default {
 	name: "CalendarLvPlan",
@@ -14,7 +15,8 @@ export default {
 		FhcCalendar
 	},
 	inject: [
-		"renderers"
+		"renderers",
+		"isMobile",
 	],
 	props: {
 		timezone: {
@@ -27,7 +29,7 @@ export default {
 		},
 		mode: {
 			type: String,
-			default: 'Week'
+			default: 'Day'
 		},
 		getPromiseFunc: {
 			type: Function,
@@ -41,11 +43,6 @@ export default {
 	],
 	data() {
 		return {
-			modes: {
-				day: Vue.markRaw(ModeDay),
-				week: Vue.markRaw(ModeWeek),
-				month: Vue.markRaw(ModeMonth)
-			},
 			modeOptions: {
 				day: {
 					emptyMessage: Vue.computed(() => this.$p.t('lehre/noLvFound')),
@@ -53,6 +50,9 @@ export default {
 				},
 				week: {
 					collapseEmptyDays: false
+				},
+				list: {
+					length: 7
 				}
 			},
 			teachingunits: null
@@ -77,7 +77,20 @@ export default {
 					label: now.startOf('minute').toISOTime({ suppressSeconds: true, includeOffset: false })
 				}
 			];
-		}
+		},
+		modes() {
+			let modes = {
+				day: Vue.markRaw(ModeDay),
+				month: Vue.markRaw(ModeMonth)
+			};
+			if (this.isMobile) {
+				modes.list = Vue.markRaw(ModeList);
+			} else {
+				modes.week = Vue.markRaw(ModeWeek);
+			}
+
+			return modes;
+		},
 	},
 	methods: {
 		eventStyle(event) {
@@ -136,6 +149,13 @@ export default {
 	>
 		<template v-slot="{ event, mode }">
 			<div
+				v-if="!event"
+				class="h-100 d-flex justify-content-center align-items-center"
+			>
+				{{ $p.t('lehre/noLvFound') }}
+			</div>
+			<div
+				v-else
 				:class="'event-type-' + event.type + ' ' + mode + 'PageContainer'"
 				:type="mode == 'day' ? 'button' : undefined"
  				:style="eventStyle(event)"
diff --git a/public/js/components/Calendar/Mode/List.js b/public/js/components/Calendar/Mode/List.js
index 76acfc610..92a42a1e9 100644
--- a/public/js/components/Calendar/Mode/List.js
+++ b/public/js/components/Calendar/Mode/List.js
@@ -93,7 +93,7 @@ export default {
 	mounted() {
 		this.$emit('update:range', this.range);
 	},
-	template: `
+	template: /*html*/ `
 	<div
 		class="fhc-calendar-mode-list flex-grow-1 position-relative"
 		@cal-click-default.capture="handleClickDefaults"
diff --git a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
index 4364a5df4..35c92b622 100644
--- a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
+++ b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
@@ -3,7 +3,8 @@ 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 const DEFAULT_MODE_LVPLAN_MOBILE = 'List';
+export const DEFAULT_MODE_LVPLAN_DESKTOP = 'Week';
 
 export default {
 	name: 'LvPlanLehrveranstaltung',
@@ -19,6 +20,7 @@ export default {
 			lv: null
 		};
 	},
+	inject: ["isMobile"],
 	computed:{
 		currentDay() {
 			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
@@ -26,8 +28,13 @@ export default {
 			return this.propsViewData?.focus_date;
 		},
 		currentMode() {
-			if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
-				return DEFAULT_MODE_LVPLAN;
+			let validModes = ['day', 'month'];
+			validModes.push(this.isMobile ? 'list' : 'week');
+
+			const defaultMode = this.isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP;
+
+			if (!this.propsViewData?.mode || !validModes.includes(this.propsViewData?.mode.toLowerCase()))
+				return defaultMode;
 			return this.propsViewData?.mode;
 		},
 		currentLv() {
diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js
index f7763c54b..b86ab0366 100644
--- a/public/js/components/Cis/LvPlan/LvPlan.js
+++ b/public/js/components/Cis/LvPlan/LvPlan.js
@@ -3,7 +3,8 @@ 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 const DEFAULT_MODE_LVPLAN_MOBILE = 'List';
+export const DEFAULT_MODE_LVPLAN_DESKTOP = 'Week';
 
 export default {
 	name: 'LvPlan',
@@ -24,12 +25,14 @@ export default {
 			lv: null
 		};
 	},
+	inject: ["isMobile"],
 	computed:{
 		currentDay() {
 			return this.propsViewData?.focus_date || luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
 		},
 		currentMode() {
-			return this.propsViewData?.mode || DEFAULT_MODE_LVPLAN;
+			const defaultMode = this.isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP;
+			return this.propsViewData?.mode || defaultMode;
 		},
 		downloadLinks() {
 			if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
diff --git a/public/js/components/Cis/LvPlan/Personal.js b/public/js/components/Cis/LvPlan/Personal.js
index f6fd462da..c77c6eea0 100644
--- a/public/js/components/Cis/LvPlan/Personal.js
+++ b/public/js/components/Cis/LvPlan/Personal.js
@@ -3,7 +3,8 @@ 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 const DEFAULT_MODE_LVPLAN_DESKTOP = 'Week';
+export const DEFAULT_MODE_LVPLAN_MOBILE = 'List';
 
 export default {
 	name: 'LvPlanPersonal',
@@ -24,6 +25,7 @@ export default {
 			isStudent: false
 		};
 	},
+	inject: ["isMobile"],
 	computed:{
 		currentDay() {
 			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
@@ -31,8 +33,13 @@ export default {
 			return this.propsViewData?.focus_date;
 		},
 		currentMode() {
-			if (!this.propsViewData?.mode || !['day', 'week', 'month'].includes(this.propsViewData?.mode.toLowerCase()))
-				return DEFAULT_MODE_LVPLAN;
+			let validModes = ['day', 'month'];
+			validModes.push(this.isMobile ? 'list' : 'week');
+
+			const defaultMode = this.isMobile ? DEFAULT_MODE_LVPLAN_MOBILE : DEFAULT_MODE_LVPLAN_DESKTOP;
+
+			if (!this.propsViewData?.mode || !validModes.includes(this.propsViewData?.mode.toLowerCase()))
+				return defaultMode;
 			return this.propsViewData?.mode;
 		},
 		downloadLinks() {
diff --git a/public/js/components/Cis/Mylv/RoomInformation.js b/public/js/components/Cis/Mylv/RoomInformation.js
index 2dd3d518d..ac4c57a77 100644
--- a/public/js/components/Cis/Mylv/RoomInformation.js
+++ b/public/js/components/Cis/Mylv/RoomInformation.js
@@ -2,7 +2,8 @@ import FhcCalendar from "../../Calendar/LvPlan.js";
 
 import ApiLvPlan from '../../../api/factory/lvPlan.js';
 
-export const DEFAULT_MODE_RAUMINFO = 'Week'
+export const DEFAULT_MODE_RAUMINFO_MOBILE = 'List';
+export const DEFAULT_MODE_RAUMINFO_DESKTOP = 'Week';
 
 export default {
 	name: "RoomInformation",
@@ -13,12 +14,14 @@ export default {
 		viewData: Object, // NOTE(chris): this is inherited from router-view
 		propsViewData: Object
 	},
+	inject: ["isMobile"],
 	computed: {
 		currentDay() {
 			return this.propsViewData?.focus_date || luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
 		},
 		currentMode() {
-			return this.propsViewData?.mode || DEFAULT_MODE_RAUMINFO;
+			const defaultMode = this.isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP;
+			return this.propsViewData?.mode || defaultMode;
 		}
 	},
 	methods:{

From b41c8acddd697efb08ad10da39db775b3be4e8f1 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Tue, 21 Apr 2026 16:04:30 +0200
Subject: [PATCH 2/6] adapted other/stgorg lvplans to mobile view changes

---
 .../js/components/Cis/LvPlan/OtherLvPlan.js   | 379 +++++++++---------
 public/js/components/Cis/LvPlan/Personal.js   | 163 +++++---
 public/js/components/Cis/LvPlan/StgOrg.js     | 278 ++++++++-----
 3 files changed, 484 insertions(+), 336 deletions(-)

diff --git a/public/js/components/Cis/LvPlan/OtherLvPlan.js b/public/js/components/Cis/LvPlan/OtherLvPlan.js
index f4948ca50..c932c5338 100644
--- a/public/js/components/Cis/LvPlan/OtherLvPlan.js
+++ b/public/js/components/Cis/LvPlan/OtherLvPlan.js
@@ -6,199 +6,212 @@ import ApiLvPlan from "../.././../api/factory/lvPlan.js";
 import ApiOtherLvPlan from "../.././../api/factory/otherLvPlan.js";
 import ApiAuthinfo from "../../../api/factory/authinfo.js";
 
-export const DEFAULT_MODE_LVPLAN = "Week";
+export const DEFAULT_MODE_LVPLAN_DESKTOP = "Week";
+export const DEFAULT_MODE_LVPLAN_MOBILE = "List";
 
 export default {
-  name: "OtherLvPlan",
-  components: {
-    FormForm,
-    FormInput,
-    FhcCalendar,
-  },
-  props: {
-    viewData: Object,
-    propsViewData: Object,
-  },
-  data() {
-    return {
-      localProps: {},
-      studiensemester_kurzbz: null,
-      studiensemester_start: null,
-      studiensemester_ende: null,
-      isOtherPersonMitarbeiter: false,
-      isOtherPersonStudent: false,
-      currentStgBezeichnung: null,
-      listVerband: [],
-      listGroup: [],
-      rangeIntervalFirst: null,
-      otherPersonData: {
-        fullName: "",
-        photo: "",
-      },
-    };
-  },
-  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.propsViewData.otherUid
-      )
-        return false;
+	name: "OtherLvPlan",
+	components: {
+		FormForm,
+		FormInput,
+		FhcCalendar,
+	},
+	props: {
+		viewData: Object,
+		propsViewData: Object,
+	},
+	data() {
+		return {
+			localProps: {},
+			studiensemester_kurzbz: null,
+			studiensemester_start: null,
+			studiensemester_ende: null,
+			isOtherPersonMitarbeiter: false,
+			isOtherPersonStudent: false,
+			currentStgBezeichnung: null,
+			listVerband: [],
+			listGroup: [],
+			rangeIntervalFirst: null,
+			otherPersonData: {
+				fullName: "",
+				photo: "",
+			},
+		};
+	},
+	inject: ["isMobile"],
+	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() {
+			let validModes = ["day", "month"];
+			validModes.push(this.isMobile ? "list" : "week");
 
-      const type = this.isOtherPersonStudent
-        ? "student"
-        : this.isOtherPersonMitarbeiter
-          ? "lektor"
-          : null;
+			const defaultMode = this.isMobile
+				? DEFAULT_MODE_LVPLAN_MOBILE
+				: DEFAULT_MODE_LVPLAN_DESKTOP;
 
-      if (!type) return;
+			if (
+				!this.propsViewData?.mode ||
+				!validModes.includes(this.propsViewData?.mode.toLowerCase())
+			)
+				return defaultMode;
+			return this.propsViewData?.mode;
+		},
+		downloadLinks() {
+			if (
+				!this.studiensemester_start ||
+				!this.studiensemester_ende ||
+				!this.propsViewData.otherUid
+			)
+				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 type = this.isOtherPersonStudent
+				? "student"
+				: this.isOtherPersonMitarbeiter
+					? "lektor"
+					: null;
 
-      const download_link =
-        FHC_JS_DATA_STORAGE_OBJECT.app_root +
-        "cis/private/lvplan/stpl_kalender.php" +
-        "?type=" +
-        type +
-        "&pers_uid=" +
-        this.propsViewData.otherUid +
-        "&begin=" +
-        start +
-        "&ende=" +
-        ende;
+			if (!type) return;
 
-      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",
-        },
-      ];
-    },
-    get_image_base64_src: function () {
-      if (!this.otherPersonData.photo?.length) {
-        return "";
-      }
-      return "data:image/jpeg;base64," + this.otherPersonData.photo;
-    },
-  },
-  watch: {
-    "propsViewData.otherUid": {
-      handler() {
-        this.$router.go();
-      },
-    },
-  },
-  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();
+			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();
 
-      this.$router.push({
-        name: "OtherLvPlan",
-        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.propsViewData.otherUid,
-          ),
-        ),
-        this.$api.call(
-          ApiLvPlan.getLvPlanReservierungen(
-            start.toISODate(),
-            end.toISODate(),
-            this.propsViewData.otherUid,
-          ),
-        ),
-      ];
-    },
-  },
-  async created() {
-    const authInfoResponse = await this.$api.call(ApiAuthinfo.getAuthInfo());
-    const authId = authInfoResponse.data.uid;
-    if (authId === this.propsViewData.otherUid) {
-      this.$router.push({ name: "MyLvPlan" });
-    }
+			const download_link =
+				FHC_JS_DATA_STORAGE_OBJECT.app_root +
+				"cis/private/lvplan/stpl_kalender.php" +
+				"?type=" +
+				type +
+				"&pers_uid=" +
+				this.propsViewData.otherUid +
+				"&begin=" +
+				start +
+				"&ende=" +
+				ende;
 
-    const userDataResponse = await this.$api.call(
-      ApiOtherLvPlan.getBasicUserAttributesForLvPlanDisplay(
-        this.propsViewData.otherUid,
-      ),
-    );
+			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",
+				},
+			];
+		},
+		get_image_base64_src: function () {
+			if (!this.otherPersonData.photo?.length) {
+				return "";
+			}
+			return "data:image/jpeg;base64," + this.otherPersonData.photo;
+		},
+	},
+	watch: {
+		"propsViewData.otherUid": {
+			handler() {
+				this.$router.go();
+			},
+		},
+	},
+	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();
 
-    const userData = userDataResponse.data;
-    this.isOtherPersonMitarbeiter = !!userData.is_mitarbeiter;
-    this.isOtherPersonStudent = !!userData.is_student;
-    this.otherPersonData.fullName = userData.vorname + " " + userData.nachname;
-    this.otherPersonData.photo = userData.foto;
-  },
-  template: `
+			this.$router.push({
+				name: "OtherLvPlan",
+				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.propsViewData.otherUid,
+					),
+				),
+				this.$api.call(
+					ApiLvPlan.getLvPlanReservierungen(
+						start.toISODate(),
+						end.toISODate(),
+						this.propsViewData.otherUid,
+					),
+				),
+			];
+		},
+	},
+	async created() {
+		const authInfoResponse = await this.$api.call(
+			ApiAuthinfo.getAuthInfo(),
+		);
+		const authId = authInfoResponse.data.uid;
+		if (authId === this.propsViewData.otherUid) {
+			this.$router.push({ name: "MyLvPlan" });
+		}
+
+		const userDataResponse = await this.$api.call(
+			ApiOtherLvPlan.getBasicUserAttributesForLvPlanDisplay(
+				this.propsViewData.otherUid,
+			),
+		);
+
+		const userData = userDataResponse.data;
+		this.isOtherPersonMitarbeiter = !!userData.is_mitarbeiter;
+		this.isOtherPersonStudent = !!userData.is_student;
+		this.otherPersonData.fullName =
+			userData.vorname + " " + userData.nachname;
+		this.otherPersonData.photo = userData.foto;
+	},
+	template: `
     <div class="d-flex flex-column h-100">
         <h2>
             <div class="d-flex flex-row justify-content-between align-items-center">
diff --git a/public/js/components/Cis/LvPlan/Personal.js b/public/js/components/Cis/LvPlan/Personal.js
index c77c6eea0..e0adc6ae7 100644
--- a/public/js/components/Cis/LvPlan/Personal.js
+++ b/public/js/components/Cis/LvPlan/Personal.js
@@ -1,19 +1,19 @@
 import FhcCalendar from "../../Calendar/LvPlan.js";
 
-import ApiLvPlan from '../../../api/factory/lvPlan.js';
-import ApiAuthinfo from '../../../api/factory/authinfo.js';
+import ApiLvPlan from "../../../api/factory/lvPlan.js";
+import ApiAuthinfo from "../../../api/factory/authinfo.js";
 
-export const DEFAULT_MODE_LVPLAN_DESKTOP = 'Week';
-export const DEFAULT_MODE_LVPLAN_MOBILE = 'List';
+export const DEFAULT_MODE_LVPLAN_DESKTOP = "Week";
+export const DEFAULT_MODE_LVPLAN_MOBILE = "List";
 
 export default {
-	name: 'LvPlanPersonal',
+	name: "LvPlanPersonal",
 	components: {
-		FhcCalendar
+		FhcCalendar,
 	},
 	props: {
 		viewData: Object, // NOTE(chris): this is inherited from router-view
-		propsViewData: Object
+		propsViewData: Object,
 	},
 	data() {
 		return {
@@ -22,105 +22,152 @@ export default {
 			studiensemester_ende: null,
 			uid: null,
 			isMitarbeiter: false,
-			isStudent: false
+			isStudent: false,
 		};
 	},
 	inject: ["isMobile"],
-	computed:{
+	computed: {
 		currentDay() {
-			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
-				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			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() {
-			let validModes = ['day', 'month'];
-			validModes.push(this.isMobile ? 'list' : 'week');
+			let validModes = ["day", "month"];
+			validModes.push(this.isMobile ? "list" : "week");
 
-			const defaultMode = this.isMobile ? DEFAULT_MODE_LVPLAN_MOBILE : DEFAULT_MODE_LVPLAN_DESKTOP;
+			const defaultMode = this.isMobile
+				? DEFAULT_MODE_LVPLAN_MOBILE
+				: DEFAULT_MODE_LVPLAN_DESKTOP;
 
-			if (!this.propsViewData?.mode || !validModes.includes(this.propsViewData?.mode.toLowerCase()))
+			if (
+				!this.propsViewData?.mode ||
+				!validModes.includes(this.propsViewData?.mode.toLowerCase())
+			)
 				return defaultMode;
 			return this.propsViewData?.mode;
 		},
 		downloadLinks() {
-			if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+			if (
+				!this.studiensemester_start ||
+				!this.studiensemester_ende ||
+				!this.uid
+			)
 				return false;
 
 			let type = false;
-			type = this.isStudent ? 'student' : type;
-			type = this.isMitarbeiter ? 'lektor' : type;
-			if (false === type)
-			{
+			type = this.isStudent ? "student" : type;
+			type = this.isMitarbeiter ? "lektor" : type;
+			if (false === type) {
 				return;
 			}
 
 			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 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=' + type
-				+ '&pers_uid=' + this.uid
-				+ '&begin=' + start
-				+ '&ende=' + ende;
+			const download_link =
+				FHC_JS_DATA_STORAGE_OBJECT.app_root +
+				"cis/private/lvplan/stpl_kalender.php" +
+				"?type=" +
+				type +
+				"&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' }
+				{
+					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 mode = newMode[0].toUpperCase() + newMode.slice(1);
 			const focus_date = day.toISODate();
-			
+
 			this.$router.push({
 				name: "MyLvPlan",
 				params: {
 					mode,
-					focus_date
-				}
+					focus_date,
+				},
 			});
 		},
 		updateRange(rangeInterval) {
 			this.$api
-				.call(ApiLvPlan.studiensemesterDateInterval(
-					rangeInterval.end.startOf('week').toISODate()
-				))
-				.then(res => {
-					this.studiensemester_kurzbz = res.data.studiensemester_kurzbz;
+				.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()))
+				this.$api.call(
+					ApiLvPlan.eventsPersonal(
+						start.toISODate(),
+						end.toISODate(),
+					),
+				),
+				this.$api.call(
+					ApiLvPlan.getLvPlanReservierungen(
+						start.toISODate(),
+						end.toISODate(),
+					),
+				),
 			];
-		}
+		},
 	},
 	created() {
-		this.$api
-			.call(ApiAuthinfo.getAuthInfo())
-			.then(res => {
-				this.uid = res.data.uid;
-				this.isMitarbeiter = res.data.isMitarbeiter;
-				this.isStudent = res.data.isStudent;
-			});
+		this.$api.call(ApiAuthinfo.getAuthInfo()).then((res) => {
+			this.uid = res.data.uid;
+			this.isMitarbeiter = res.data.isMitarbeiter;
+			this.isStudent = res.data.isStudent;
+		});
 	},
-	template: /*html*/`
+	template: /*html*/ `
 	<div class="cis-lvplan-personal d-flex flex-column h-100">
 		<h2>
 			{{ $p.t('lehre/stundenplan') }}
@@ -158,5 +205,5 @@ export default {
 				</div>
 			</div>
 		</fhc-calendar>
-	</div>`
+	</div>`,
 };
diff --git a/public/js/components/Cis/LvPlan/StgOrg.js b/public/js/components/Cis/LvPlan/StgOrg.js
index f6bc51c12..08bec3674 100644
--- a/public/js/components/Cis/LvPlan/StgOrg.js
+++ b/public/js/components/Cis/LvPlan/StgOrg.js
@@ -1,14 +1,15 @@
-import FormForm from '../../Form/Form.js';
-import FormInput from '../../Form/Input.js';
+import FormForm from "../../Form/Form.js";
+import FormInput from "../../Form/Input.js";
 import FhcCalendar from "../../Calendar/LvPlan.js";
 
-import ApiLvPlan from '../.././../api/factory/lvPlan.js';
-import ApiAuthinfo from '../../../api/factory/authinfo.js';
+import ApiLvPlan from "../.././../api/factory/lvPlan.js";
+import ApiAuthinfo from "../../../api/factory/authinfo.js";
 
-export const DEFAULT_MODE_LVPLAN = 'Week';
+export const DEFAULT_MODE_LVPLAN_DESKTOP = "Week";
+export const DEFAULT_MODE_LVPLAN_MOBILE = "List";
 
 export default {
-	name: 'LvPlanStgOrg',
+	name: "LvPlanStgOrg",
 	components: {
 		FormForm,
 		FormInput,
@@ -16,7 +17,7 @@ export default {
 	},
 	props: {
 		viewData: Object,
-		propsViewData: Object
+		propsViewData: Object,
 	},
 	data() {
 		return {
@@ -28,85 +29,134 @@ export default {
 			isMitarbeiter: false,
 			isStudent: false,
 			currentStgBezeichnung: null,
-			formData:  {
+			formData: {
 				stgkz: null,
 				sem: null,
 				verband: null,
 				gruppe: null,
 			},
 			listStg: [],
-			listSem: [1,2,3,4,5,6,7,8,9,10],
+			listSem: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
 			listVerband: [],
 			listGroup: [],
-			rangeIntervalFirst: null
+			rangeIntervalFirst: null,
 		};
 	},
+	inject: ["isMobile"],
 	computed: {
-		maxSemester(){
+		maxSemester() {
 			const currentStg = this.listStg.find(
-				item => item.studiengang_kz === this.formData.stgkz
+				(item) => item.studiengang_kz === this.formData.stgkz,
 			);
 			return currentStg?.max_semester;
 		},
 		currentDay() {
-			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
-				return luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
+			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;
+			let validModes = ["day", "month"];
+			validModes.push(this.isMobile ? "list" : "week");
+
+			const defaultMode = this.isMobile
+				? DEFAULT_MODE_LVPLAN_MOBILE
+				: DEFAULT_MODE_LVPLAN_DESKTOP;
+
+			if (
+				!this.propsViewData?.mode ||
+				!validModes.includes(this.propsViewData?.mode.toLowerCase())
+			)
+				return defaultMode;
 			return this.propsViewData?.mode;
 		},
 		downloadLinks() {
-			if (!this.studiensemester_start || !this.studiensemester_ende || !this.uid)
+			if (
+				!this.studiensemester_start ||
+				!this.studiensemester_ende ||
+				!this.uid
+			)
 				return false;
 
 			let type = false;
-			type = this.isStudent ? 'student' : type;
-			type = this.isMitarbeiter ? 'lektor' : type;
-			if (false === type)
-			{
+			type = this.isStudent ? "student" : type;
+			type = this.isMitarbeiter ? "lektor" : type;
+			if (false === type) {
 				return;
 			}
 
 			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 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=' + type
-				+ '&pers_uid=' + this.uid
-				+ '&begin=' + start
-				+ '&ende=' + ende;
+			const download_link =
+				FHC_JS_DATA_STORAGE_OBJECT.app_root +
+				"cis/private/lvplan/stpl_kalender.php" +
+				"?type=" +
+				type +
+				"&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' }
+				{
+					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: {
-		loadLvPlan(){
-			if(!this.formData.stgkz){
-				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'chooseStg'));
+		loadLvPlan() {
+			if (!this.formData.stgkz) {
+				this.$fhcAlert.alertError(this.$p.t("LvPlan", "chooseStg"));
 				return;
 			}
 
-			if(!this.formData.sem && (this.formData.verband || this.formData.gruppe)){
-				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'error_SemMissing'));
+			if (
+				!this.formData.sem &&
+				(this.formData.verband || this.formData.gruppe)
+			) {
+				this.$fhcAlert.alertError(
+					this.$p.t("LvPlan", "error_SemMissing"),
+				);
 				return;
 			}
 
-			if(!this.formData.verband && this.formData.gruppe){
-				this.$fhcAlert.alertError(this.$p.t('LvPlan', 'error_VerbandMissing'));
+			if (!this.formData.verband && this.formData.gruppe) {
+				this.$fhcAlert.alertError(
+					this.$p.t("LvPlan", "error_VerbandMissing"),
+				);
 				return;
 			}
 
@@ -120,18 +170,17 @@ export default {
 			};
 
 			//ensure logic: no value after a null value in route
-			if(params.sem == null)
-			{
+			if (params.sem == null) {
 				params.verband = null;
 				params.gruppe = null;
 			}
-			if(params.verband == null) {
+			if (params.verband == null) {
 				params.gruppe = null;
 			}
 
 			//delete all null values to avoid null in router
 			Object.keys(params).forEach(
-				key => params[key] == null && delete params[key]
+				(key) => params[key] == null && delete params[key],
 			);
 
 			this.$router.push({
@@ -139,37 +188,60 @@ export default {
 				params,
 			});
 
-			this.$refs['calendar'].resetEventLoader();
+			this.$refs["calendar"].resetEventLoader();
 		},
-		loadListSem(){
-			this.listSem = [...Array(this.maxSemester).keys()].map(i => i + 1);
+		loadListSem() {
+			this.listSem = [...Array(this.maxSemester).keys()].map(
+				(i) => i + 1,
+			);
 		},
-		loadListVerband(){
+		loadListVerband() {
 			this.$api
-				.call(ApiLvPlan.getLehrverband(this.formData.stgkz, this.formData.semester, this.formData.verband))
-				.then(result => {
+				.call(
+					ApiLvPlan.getLehrverband(
+						this.formData.stgkz,
+						this.formData.semester,
+						this.formData.verband,
+					),
+				)
+				.then((result) => {
 					const data = result.data;
-					const mappedData = data.map(item => item.verband);
-					this.listVerband = [...new Set(mappedData.filter(v =>
-						v !== null &&
-						v !== undefined &&
-						String(v).trim() !== ""
-					))]
-						.sort();
+					const mappedData = data.map((item) => item.verband);
+					this.listVerband = [
+						...new Set(
+							mappedData.filter(
+								(v) =>
+									v !== null &&
+									v !== undefined &&
+									String(v).trim() !== "",
+							),
+						),
+					].sort();
 				})
 				.catch(this.$fhcAlert.handleSystemError);
 		},
-		loadListGroup(){
+		loadListGroup() {
 			this.$api
-				.call(ApiLvPlan.getGruppe(this.formData.stgkz, this.formData.semester, this.formData.verband))
-				.then(result => {
+				.call(
+					ApiLvPlan.getGruppe(
+						this.formData.stgkz,
+						this.formData.semester,
+						this.formData.verband,
+					),
+				)
+				.then((result) => {
 					const data = result.data;
-					const mappedData = data.map(item => item.gruppe);
-					this.listGroup =  [...new Set(mappedData.filter(v =>
-						v !== null &&
-						v !== undefined &&
-						String(v).trim() !== ""))]
-						.sort();
+					const mappedData = data.map((item) => item.gruppe);
+					this.listGroup = [
+						...new Set(
+							mappedData.filter(
+								(v) =>
+									v !== null &&
+									v !== undefined &&
+									String(v).trim() !== "",
+							),
+						),
+					].sort();
 				})
 				.catch(this.$fhcAlert.handleSystemError);
 		},
@@ -194,42 +266,60 @@ export default {
 		},
 		updateRange(rangeInterval) {
 			this.$api
-				.call(ApiLvPlan.studiensemesterDateInterval(
-					rangeInterval.end.startOf('week').toISODate()
-				))
-				.then(res => {
-					this.studiensemester_kurzbz = res.data.studiensemester_kurzbz;
+				.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.eventsStgOrg(start, end, this.formData.stgkz, this.formData.sem, this.formData.verband, this.formData.gruppe))
+				this.$api.call(
+					ApiLvPlan.eventsStgOrg(
+						start,
+						end,
+						this.formData.stgkz,
+						this.formData.sem,
+						this.formData.verband,
+						this.formData.gruppe,
+					),
+				),
 			];
 		},
 	},
-	created(){
-		this.$api
-			.call(ApiAuthinfo.getAuthInfo())
-			.then(res => {
-				this.uid = res.data.uid;
-				this.isMitarbeiter = res.data.isMitarbeiter;
-				this.isStudent = res.data.isStudent;
-			});
+	created() {
+		this.$api.call(ApiAuthinfo.getAuthInfo()).then((res) => {
+			this.uid = res.data.uid;
+			this.isMitarbeiter = res.data.isMitarbeiter;
+			this.isStudent = res.data.isStudent;
+		});
 
 		this.$api
 			.call(ApiLvPlan.getStudiengaenge())
-			.then(result => {
-				this. listStg = result.data;
+			.then((result) => {
+				this.listStg = result.data;
 			})
 			.catch(this.$fhcAlert.handleSystemError);
 
-		if(this.propsViewData) {
-			this.formData.stgkz = this.propsViewData.stgkz ? this.propsViewData.stgkz: null;
-			this.formData.sem = this.propsViewData.sem ? this.propsViewData.sem: null;
-			this.formData.verband = this.propsViewData.verband ? this.propsViewData.verband: null;
-			this.formData.gruppe = this.propsViewData.gruppe ? this.propsViewData.gruppe: null;
+		if (this.propsViewData) {
+			this.formData.stgkz = this.propsViewData.stgkz
+				? this.propsViewData.stgkz
+				: null;
+			this.formData.sem = this.propsViewData.sem
+				? this.propsViewData.sem
+				: null;
+			this.formData.verband = this.propsViewData.verband
+				? this.propsViewData.verband
+				: null;
+			this.formData.gruppe = this.propsViewData.gruppe
+				? this.propsViewData.gruppe
+				: null;
 		}
 	},
 	template: `
@@ -331,6 +421,4 @@ export default {
 		</fhc-calendar>
 	</div>
 	`,
-
-
-};
\ No newline at end of file
+};

From 5171a7b7b343769c784894fe2ca3a423c2281f79 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Tue, 21 Apr 2026 17:22:32 +0200
Subject: [PATCH 3/6] minor fix

---
 public/js/components/Cis/LvPlan/Lehrveranstaltung.js | 2 +-
 public/js/components/Cis/LvPlan/LvPlan.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
index 35c92b622..2ed0bf48a 100644
--- a/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
+++ b/public/js/components/Cis/LvPlan/Lehrveranstaltung.js
@@ -31,7 +31,7 @@ export default {
 			let validModes = ['day', 'month'];
 			validModes.push(this.isMobile ? 'list' : 'week');
 
-			const defaultMode = this.isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP;
+			const defaultMode = this.isMobile ? DEFAULT_MODE_LVPLAN_MOBILE : DEFAULT_MODE_LVPLAN_DESKTOP;
 
 			if (!this.propsViewData?.mode || !validModes.includes(this.propsViewData?.mode.toLowerCase()))
 				return defaultMode;
diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js
index b86ab0366..bc332fb76 100644
--- a/public/js/components/Cis/LvPlan/LvPlan.js
+++ b/public/js/components/Cis/LvPlan/LvPlan.js
@@ -31,7 +31,7 @@ export default {
 			return this.propsViewData?.focus_date || luxon.DateTime.now().setZone(this.viewData.timezone).toISODate();
 		},
 		currentMode() {
-			const defaultMode = this.isMobile ? DEFAULT_MODE_RAUMINFO_MOBILE : DEFAULT_MODE_RAUMINFO_DESKTOP;
+			const defaultMode = this.isMobile ? DEFAULT_MODE_LVPLAN_MOBILE : DEFAULT_MODE_LVPLAN_DESKTOP;
 			return this.propsViewData?.mode || defaultMode;
 		},
 		downloadLinks() {

From e57846566ea48aba3e49b2e49db0188e6c36f217 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Wed, 22 Apr 2026 14:35:06 +0200
Subject: [PATCH 4/6] displaying 'compacted' events in mobile monthview lv plan

---
 .../js/components/Calendar/Base/Grid/Line.js  | 157 +++++++++++++-----
 public/js/components/Calendar/LvPlan.js       |   5 +
 2 files changed, 125 insertions(+), 37 deletions(-)

diff --git a/public/js/components/Calendar/Base/Grid/Line.js b/public/js/components/Calendar/Base/Grid/Line.js
index 9a6c2f579..e5241de1d 100644
--- a/public/js/components/Calendar/Base/Grid/Line.js
+++ b/public/js/components/Calendar/Base/Grid/Line.js
@@ -1,5 +1,5 @@
-import LineEvent from './Line/Event.js';
-import LineBackground from './Line/Background.js';
+import LineEvent from "./Line/Event.js";
+import LineBackground from "./Line/Background.js";
 
 /**
  * TODO(chris):
@@ -10,54 +10,117 @@ export default {
 	name: "GridLine",
 	components: {
 		LineEvent,
-		LineBackground
-	},
-	inject: {
-		axisRow: "axisRow"
+		LineBackground,
 	},
+	inject: ["axisRow", "shouldCompactEvents"],
 	props: {
 		date: {
 			type: luxon.DateTime,
-			required: true
+			required: true,
 		},
 		start: {
 			type: luxon.DateTime,
-			required: true
+			required: true,
 		},
 		end: {
 			type: luxon.DateTime,
-			required: true
+			required: true,
 		},
 		events: {
 			type: Array,
-			default: []
+			default: [],
 		},
 		backgrounds: {
 			type: Array,
-			default: []
-		}
+			default: [],
+		},
 	},
 	computed: {
-		eventsWithRowInfo() {
-			const events = [];
-			this.events.forEach(event => {
-				const rows = [1, -1];
+		formattedEvents() {
+			let formattedEvents = this.events.map((event) => {
+				event.rows = [1, -1];
 				if (event.startsHere) {
-					rows[0] = 't_' + event.start.diff(this.date).toMillis();
+					event.rows[0] =
+						"t_" + event.start.diff(this.date).toMillis();
 				}
 				if (event.endsHere) {
-					rows[1] = 't_' + event.end.diff(this.date).toMillis();
+					event.rows[1] = "t_" + event.end.diff(this.date).toMillis();
 				}
 
-				events.push({
-					...event,
-					rows
-				});
+				return event;
 			});
-			return events;
-		}
+
+			if (this.shouldCompactEvents) {
+				formattedEvents =
+					this.compactEventsForMobileView(formattedEvents);
+			}
+
+			return formattedEvents;
+		},
 	},
-	template: /* html */`
+	methods: {
+		compactEventsForMobileView(events) {
+			let formattedEvents = events
+				.filter(
+					(event) =>
+						!["lehreinheit", "reservierung"].includes(event.type),
+				)
+				.map((event) => {
+					event.display = "default";
+					return event;
+				});
+			let eventsToBeCompacted = events.filter((event) =>
+				["lehreinheit", "reservierung"].includes(event.type),
+			);
+			let compactedEvents = [];
+
+			eventsToBeCompacted.forEach((event) => {
+				let existingCompactedEvent = compactedEvents.find(
+					(compactedEvent) =>
+						event.rows[0] === compactedEvent.rows[0] &&
+						event.rows[1] === compactedEvent.rows[1],
+				);
+
+				if (!existingCompactedEvent) {
+					compactedEvents.push({
+						events: [
+							{
+								farbe: event.orig.farbe,
+							},
+						],
+						rows: event.rows,
+					});
+				} else {
+					existingCompactedEvent.events.push({
+						farbe: event.orig.farbe,
+					});
+				}
+			});
+
+			compactedEvents.forEach((compactedEvent) => {
+				if (compactedEvent.events.length < 4) {
+					formattedEvents.push({
+						display: "compacted",
+						...compactedEvent,
+					});
+				} else {
+					formattedEvents.push({
+						display: "compacted",
+						events: compactedEvent.events.slice(0, 3),
+						rows: compactedEvent.rows,
+					});
+					formattedEvents.push({
+						display: "compactedExtra",
+						events: compactedEvent.events.slice(3),
+						rows: compactedEvent.rows,
+					});
+				}
+			});
+
+			return formattedEvents;
+		},
+	},
+	template: /* html */ `
 	<div
 		class="fhc-calendar-base-grid-line"
 		style="position:relative;display:grid;grid-auto-flow:dense"
@@ -69,17 +132,37 @@ export default {
 			:end="end"
 			:background="bg"
 		></line-background>
-		<line-event
-			v-for="(event, i) in eventsWithRowInfo"
-			:key="i"
-			:style="'grid-' + axisRow + ': ' + event.rows.join('/')"
-			:event="event"
-		>
-			<template v-slot="slot">
-				<slot name="event" v-bind="slot" />
-			</template>
-		</line-event>
+		<template v-for="(event, i) in formattedEvents" :key="i">
+			<line-event
+				v-if="!event.display || event.display === 'default'"
+				:style="'grid-' + axisRow + ': ' + event.rows.join('/')"
+				:event="event"
+			>
+				<template v-slot="slot">
+					<slot name="event" v-bind="slot" />
+				</template>
+			</line-event>
+			<div
+				v-else-if="event.display === 'compacted'"
+				:style="'grid-' + axisRow + ': ' + event.rows.join('/')"
+				class="d-flex flex-row justify-content-center gap-1 align-items-center"
+			>
+				<i
+					v-for="(subEvent, subEventIndex) in event.events"
+					:key="subEventIndex"
+					class="fa-solid fa-circle fa-2xs"
+					:style="subEvent.farbe ? {color: '#' + subEvent.farbe} : {}"
+				></i>
+			</div>
+			<div
+				v-else-if="event.display === 'compactedExtra'"
+				:style="'grid-' + axisRow + ': ' + event.rows.join('/')"
+				class="w-100 d-flex flex-row justify-content-center"
+			>
+				{{"+" + event.events.length}}
+			</div>
+		</template>
 		<slot name="dropzone" />
 	</div>
-	`
-}
+	`,
+};
diff --git a/public/js/components/Calendar/LvPlan.js b/public/js/components/Calendar/LvPlan.js
index 9016622ee..7f96b3d2f 100644
--- a/public/js/components/Calendar/LvPlan.js
+++ b/public/js/components/Calendar/LvPlan.js
@@ -36,6 +36,11 @@ export default {
 			required: true
 		}
 	},
+	provide() {
+		return {
+			shouldCompactEvents: Vue.computed(() => this.$props.mode === "Month" && this.isMobile)
+		}
+	},
 	emits: [
 		"update:date",
 		"update:mode",

From 2eb58e334669f1b150ae1edbe3639150873c5aed Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Thu, 23 Apr 2026 11:43:25 +0200
Subject: [PATCH 5/6] reworked how 'compactible event types' are defined

---
 .../controllers/api/frontend/v1/LvPlan.php    |  11 ++
 public/js/api/factory/lvPlan.js               |   8 +-
 .../js/components/Calendar/Base/Grid/Line.js  |  12 +-
 public/js/components/Calendar/LvPlan.js       | 135 ++++++++++--------
 4 files changed, 99 insertions(+), 67 deletions(-)

diff --git a/application/controllers/api/frontend/v1/LvPlan.php b/application/controllers/api/frontend/v1/LvPlan.php
index 99dc8bf59..dc87732b9 100644
--- a/application/controllers/api/frontend/v1/LvPlan.php
+++ b/application/controllers/api/frontend/v1/LvPlan.php
@@ -48,6 +48,7 @@ class LvPlan extends FHCAPI_Controller
 			'getStudiengaenge' => self::PERM_LOGGED,
 			'getLehrverband' => self::PERM_LOGGED,
 			'permissionOtherLvPlan' => self::PERM_LOGGED,
+			'compactibleEventTypes' => self::PERM_LOGGED,
 		]);
 
 		$this->load->library('LogLib');
@@ -393,6 +394,16 @@ class LvPlan extends FHCAPI_Controller
 		$this->terminateWithSuccess($this->permissionlib->isBerechtigt('basis/other_lv_plan'));
 	}
 
+	/**
+	 * get event types which can be compacted in lv plan display
+	 *
+	 * @return void
+	 */
+	public function compactibleEventTypes()
+	{
+		$this->terminateWithSuccess(["lehreinheit", "reservierung"]);
+	}
+
 	/**
 	 * fetch moodle events
 	 *
diff --git a/public/js/api/factory/lvPlan.js b/public/js/api/factory/lvPlan.js
index 41aa29299..0b652025f 100644
--- a/public/js/api/factory/lvPlan.js
+++ b/public/js/api/factory/lvPlan.js
@@ -123,5 +123,11 @@ export default {
 			method: 'get',
 			url: '/api/frontend/v1/lvPlan/permissionOtherLvPlan',
 		}
-	}
+	},
+	getCompactibleEventTypes(){
+		return {
+			method: 'get',
+			url: '/api/frontend/v1/lvPlan/compactibleEventTypes',
+		}
+	},
 };
\ No newline at end of file
diff --git a/public/js/components/Calendar/Base/Grid/Line.js b/public/js/components/Calendar/Base/Grid/Line.js
index e5241de1d..6519e63d9 100644
--- a/public/js/components/Calendar/Base/Grid/Line.js
+++ b/public/js/components/Calendar/Base/Grid/Line.js
@@ -12,7 +12,7 @@ export default {
 		LineEvent,
 		LineBackground,
 	},
-	inject: ["axisRow", "shouldCompactEvents"],
+	inject: ["axisRow", "shouldCompactEvents", "compactibleEventTypes"],
 	props: {
 		date: {
 			type: luxon.DateTime,
@@ -50,27 +50,27 @@ export default {
 				return event;
 			});
 
-			if (this.shouldCompactEvents) {
+			if (this.shouldCompactEvents && this.compactibleEventTypes?.length) {
 				formattedEvents =
-					this.compactEventsForMobileView(formattedEvents);
+					this.compactEventsForMobileView(formattedEvents, this.compactibleEventTypes);
 			}
 
 			return formattedEvents;
 		},
 	},
 	methods: {
-		compactEventsForMobileView(events) {
+		compactEventsForMobileView(events, compactibleEventTypes) {
 			let formattedEvents = events
 				.filter(
 					(event) =>
-						!["lehreinheit", "reservierung"].includes(event.type),
+						!compactibleEventTypes.includes(event.type),
 				)
 				.map((event) => {
 					event.display = "default";
 					return event;
 				});
 			let eventsToBeCompacted = events.filter((event) =>
-				["lehreinheit", "reservierung"].includes(event.type),
+				compactibleEventTypes.includes(event.type),
 			);
 			let compactedEvents = [];
 
diff --git a/public/js/components/Calendar/LvPlan.js b/public/js/components/Calendar/LvPlan.js
index 7f96b3d2f..e448741fa 100644
--- a/public/js/components/Calendar/LvPlan.js
+++ b/public/js/components/Calendar/LvPlan.js
@@ -1,92 +1,98 @@
 import FhcCalendar from "./Base.js";
 
-import ApiLvPlan from '../../api/factory/lvPlan.js';
+import ApiLvPlan from "../../api/factory/lvPlan.js";
 
-import { useEventLoader } from '../../composables/EventLoader.js';
+import { useEventLoader } from "../../composables/EventLoader.js";
 
-import ModeDay from './Mode/Day.js';
-import ModeWeek from './Mode/Week.js';
-import ModeMonth from './Mode/Month.js';
-import ModeList from './Mode/List.js';
+import ModeDay from "./Mode/Day.js";
+import ModeWeek from "./Mode/Week.js";
+import ModeMonth from "./Mode/Month.js";
+import ModeList from "./Mode/List.js";
 
 export default {
 	name: "CalendarLvPlan",
 	components: {
-		FhcCalendar
+		FhcCalendar,
 	},
-	inject: [
-		"renderers",
-		"isMobile",
-	],
+	inject: ["renderers", "isMobile"],
 	props: {
 		timezone: {
 			type: String,
-			required: true
+			required: true,
 		},
 		date: {
 			type: [Date, String, Number, luxon.DateTime],
-			default: luxon.DateTime.local()
+			default: luxon.DateTime.local(),
 		},
 		mode: {
 			type: String,
-			default: 'Day'
+			default: "Day",
 		},
 		getPromiseFunc: {
 			type: Function,
-			required: true
-		}
+			required: true,
+		},
 	},
 	provide() {
 		return {
-			shouldCompactEvents: Vue.computed(() => this.$props.mode === "Month" && this.isMobile)
-		}
+			shouldCompactEvents: Vue.computed(
+				() => this.$props.mode === "Month" && this.isMobile,
+			),
+			compactibleEventTypes: Vue.computed(
+				() => this.compactibleEventTypes,
+			),
+		};
 	},
-	emits: [
-		"update:date",
-		"update:mode",
-		"update:range"
-	],
+	emits: ["update:date", "update:mode", "update:range"],
 	data() {
 		return {
 			modeOptions: {
 				day: {
-					emptyMessage: Vue.computed(() => this.$p.t('lehre/noLvFound')),
-					emptyMessageDetails: Vue.computed(() => this.$p.t('lehre/noLvFound'))
+					emptyMessage: Vue.computed(() =>
+						this.$p.t("lehre/noLvFound"),
+					),
+					emptyMessageDetails: Vue.computed(() =>
+						this.$p.t("lehre/noLvFound"),
+					),
 				},
 				week: {
-					collapseEmptyDays: false
+					collapseEmptyDays: false,
 				},
 				list: {
-					length: 7
-				}
+					length: 7,
+				},
 			},
-			teachingunits: null
+			teachingunits: null,
+			compactibleEventTypes: [],
 		};
 	},
 	computed: {
 		backgrounds() {
 			let now = luxon.DateTime.now().setZone(this.timezone);
 
-			if (this.mode == 'Month')
+			if (this.mode == "Month")
 				return [
 					{
-						class: 'background-past',
-						end: now.startOf('day')
-					}
+						class: "background-past",
+						end: now.startOf("day"),
+					},
 				];
 
 			return [
 				{
-					class: 'background-past',
+					class: "background-past",
 					end: now,
-					label: now.startOf('minute').toISOTime({ suppressSeconds: true, includeOffset: false })
-				}
+					label: now.startOf("minute").toISOTime({
+						suppressSeconds: true,
+						includeOffset: false,
+					}),
+				},
 			];
 		},
 		modes() {
 			let modes = {
 				day: Vue.markRaw(ModeDay),
-				month: Vue.markRaw(ModeMonth)
+				month: Vue.markRaw(ModeMonth),
 			};
 			if (this.isMobile) {
 				modes.list = Vue.markRaw(ModeList);
@@ -99,46 +105,55 @@ export default {
 	},
 	methods: {
 		eventStyle(event) {
-			if (!event.farbe)
-				return undefined;
-			return '--event-bg:#' + event.farbe;
+			if (!event.farbe) return undefined;
+			return "--event-bg:#" + event.farbe;
 		},
 		updateRange(rangeInterval) {
 			this.rangeInterval = rangeInterval;
-			this.$emit('update:range', rangeInterval);
+			this.$emit("update:range", rangeInterval);
 		},
 		resetEventLoader() {
 			this.reset();
-		}
+		},
+		async getStunden() {
+			let stundenResponse = await this.$api.call(ApiLvPlan.getStunden());
+			this.teachingunits = stundenResponse.data.map((el) => ({
+				id: el.stunde,
+				start: el.beginn,
+				end: el.ende,
+			}));
+		},
+		async getCompactibleEventTypes() {
+			let compactibleEventTypesResponse = await this.$api.call(
+				ApiLvPlan.getCompactibleEventTypes(),
+			);
+			this.compactibleEventTypes = compactibleEventTypesResponse.data;
+		},
 	},
 	setup(props, context) {
 		const rangeInterval = Vue.ref(null);
-		
-		const { events, lv, reset } = useEventLoader(rangeInterval, props.getPromiseFunc);
 
-		Vue.watch(lv, newValue => {
-			context.emit('update:lv', newValue);
+		const { events, lv, reset } = useEventLoader(
+			rangeInterval,
+			props.getPromiseFunc,
+		);
+
+		Vue.watch(lv, (newValue) => {
+			context.emit("update:lv", newValue);
 		});
 
 		return {
 			rangeInterval,
 			events,
 			lv,
-			reset
+			reset,
 		};
 	},
-	created() {
-		this.$api
-			.call(ApiLvPlan.getStunden())
-			.then(res => {
-				return this.teachingunits = res.data.map(el => ({
-					id: el.stunde,
-					start: el.beginn,
-					end: el.ende
-				}));
-			});
+	async created() {
+		await this.getStunden();
+		await this.getCompactibleEventTypes();
 	},
-	template: /* html */`
+	template: /* html */ `
 	<fhc-calendar
 		ref="calendar"
 		class="fhc-calendar-lvplan"
@@ -189,5 +204,5 @@ export default {
 		<template #actions>
 			<slot />
 		</template>
-	</fhc-calendar>`
-}
+	</fhc-calendar>`,
+};

From e89ab9b92f7e8a728e05fa422287facec00c5c89 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Thu, 23 Apr 2026 13:57:27 +0200
Subject: [PATCH 6/6] minor naming change

---
 public/js/components/Calendar/Base/Grid/Line.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/js/components/Calendar/Base/Grid/Line.js b/public/js/components/Calendar/Base/Grid/Line.js
index 6519e63d9..64a71c5f0 100644
--- a/public/js/components/Calendar/Base/Grid/Line.js
+++ b/public/js/components/Calendar/Base/Grid/Line.js
@@ -52,14 +52,14 @@ export default {
 
 			if (this.shouldCompactEvents && this.compactibleEventTypes?.length) {
 				formattedEvents =
-					this.compactEventsForMobileView(formattedEvents, this.compactibleEventTypes);
+					this.compactEvents(formattedEvents, this.compactibleEventTypes);
 			}
 
 			return formattedEvents;
 		},
 	},
 	methods: {
-		compactEventsForMobileView(events, compactibleEventTypes) {
+		compactEvents(events, compactibleEventTypes) {
 			let formattedEvents = events
 				.filter(
 					(event) =>