consistent naming of calendar modes in english; fixed routerguard to work with router.push on mode or date changes inside stpl component;

application/controllers/Cis/Stundenplan.php

@@ -25,7 +25,7 @@ class Stundenplan extends Auth_Controller
 	 */
 	public function index($mode = 'Week', $focus_date = null, $lv_id = null)
 	{
-		// Convert string "null" to actual null values -> ci3 reroute fix
+		// convert string "null" to actual null values -> ci3 reroute fix
 		$mode = ($mode === 'null') ? 'Week' : ucfirst(strtolower($mode));
 		$focus_date = ($focus_date === 'null') ? date('Y-m-d') : $focus_date;
 		$lv_id = ($lv_id === 'null') ? null : $lv_id;

public/js/apps/Dashboard/Fhc.js

@@ -3,7 +3,7 @@ import FhcApi from '../../plugin/FhcApi.js';
 import Phrasen from '../../plugin/Phrasen.js';
 import contrast from '../../directives/contrast.js';
 import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers";
-import Stundenplan from "../../components/Cis/Stundenplan/Stundenplan";
+import Stundenplan, {DEFAULT_MODE_STUNDENPLAN} from "../../components/Cis/Stundenplan/Stundenplan";
 import MylvStudent from "../../components/Cis/Mylv/Student";
 import Profil from "../../components/Cis/Profil/Profil";
 import CmsNews from "../../components/Cis/Cms/News";
@@ -60,62 +60,55 @@ const router = VueRouter.createRouter({
 		},
 		// Redirect old links to new format
 		{
-			path: "/Cis/Stundenplan/:lv_id(\\d+)", // define lv_id as numeric so this matches
-			name: "StundenplanNumeric",
+			// only trigger on first param being numeric to avoid paths like "Stundenplan/Month" entering here
+			path: "/Cis/Stundenplan/:lv_id(\\d+)", 
+			name: "StundenplanOld",
 			component: Stundenplan,
 			redirect: (to) => {
 				return { // redirect to longer Stundenplan url and map params
 					name: "Stundenplan",
 					params: {
-						mode: "Week",
-						focus_date: new Date().toISOString().split("T")[0],
-						lv_id: to.params.lv_id || null
-						
+						lv_id: to.params.lv_id
 					},
 				};
 			},
 		},
-		{ 
-			// actual routes after Stundenplan -> config/routes.php
-			// actual param handling -> controllers/Cis/Stundenplan.php
+		{
 			path: `/Cis/Stundenplan/:mode?/:focus_date?/:lv_id?`,
 			name: 'Stundenplan',
 			component: Stundenplan,
 			props: (route) => { // validate and set mode/focus date if for some reason missing
 				const validModes = ["Month", "Week", "Day"];
 
-				// default to mode week if not provided
+				// check mode string
 				let 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()
-						: "Week";
+						: DEFAULT_MODE_STUNDENPLAN;
 
-				// default focus_date: today date if not provided
+				// default to today date if not provided
 				let focusDate = route.params.focus_date || new Date().toISOString().split("T")[0];
 				
-				// for consistency reasons format the props into the viewData object so we have consistency in the form 
-				// we access route specific data whether it is codigniter served or just another vue component that has been
-				// mounted
+				// 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
 				return {
-					viewData: {
+					propsViewData: {
 						mode,
 						focusDate,
-						lv_id: route.params.lv_id || null
+						lv_id: route.params.lv_id
 					}
 				};
 			},
 			beforeEnter: (to, from, next) => {
-				// If missing mode or focus_date, redirect with defaults
+				//  missing mode or focus_date -> set defaults
 				if (!to.params.mode || !to.params.focus_date) {
 					next({
 						name: "Stundenplan",
 						params: {
-							
-							mode: to.params.mode || "Week",
+							mode: to.params.mode || DEFAULT_MODE_STUNDENPLAN,
 							focus_date: to.params.focus_date || new Date().toISOString().split("T")[0],
-							lv_id: to.params.lv_id || null
-							
-						},
+							lv_id: to.params.lv_id
+						}
 					});
 				} else {
 					next();

public/js/components/Calendar/Calendar.js

@@ -63,7 +63,7 @@ export default {
 	},
 	watch:{
 		mode(newVal) {
-			console.log('mode watcher', newVal)
+			this.$emit('change:mode', newVal)
 		},
 		selectedEvent:{
 			handler(newSelectedEvent) {
@@ -125,7 +125,6 @@ export default {
 					this.prevMode = this.currMode;
 					this.currMode = v;
 				}
-				this.$emit('change:mode', this.currMode)
 			}
 		},
 		eventsPerDay() {
@@ -165,12 +164,12 @@ export default {
 			if (this.events && Array.isArray(this.events) && this.events.length > 0) {
 				let filteredEvents = this.events.filter(event => {
 					let eventDate = new CalendarDate(new Date(event.datum));
-					if (this.mode == 'week') 
+					if (this.mode == 'week' || this.mode == 'Week')
 					{
 						// week view filters the elements only for the same week
 						return this.focusDate.w == eventDate.w;
 					}
-					else if (this.mode == 'day') 
+					else if (this.mode == 'day' || this.mode == 'Day')
 					{
 						// day view filters the elements for the same day and the same week
 						return this.focusDate.d == eventDate.d && this.focusDate.w == eventDate.w;
@@ -191,13 +190,16 @@ export default {
 		},
 	},
 	methods: {
+		setMode(mode) {
+			this.mode = mode
+		},
 		handleInput(day) {
 			this.$emit(day[0], day[1]);
 		},
 	},
 	created() {
 		const initMode = this.initialMode.toLowerCase()
-		const allowedInitialModes = ['years', 'day'];
+		const allowedInitialModes = ['day'];
 		if (!this.noWeekView)
 			allowedInitialModes.push('week');
 		if (!this.noMonthView)

public/js/components/Calendar/Header.js

@@ -3,9 +3,9 @@ export default {
 		return{
 			selected: this.mode,
 			modes:{
-				day: { mode_bezeichnung: "Tag", icon: "fa-calendar-day" , condition:true}, 
-				week: { mode_bezeichnung: "Woche", icon: "fa-calendar-week", condition: !this.noWeekView }, 
-				month: { mode_bezeichnung: "Monat", icon: "fa-calendar-days", condition: !this.noMonthView }, 
+				day: { mode_bezeichnung: "day", icon: "fa-calendar-day" , condition:true}, 
+				week: { mode_bezeichnung: "week", icon: "fa-calendar-week", condition: !this.noWeekView }, 
+				month: { mode_bezeichnung: "month", icon: "fa-calendar-days", condition: !this.noMonthView }, 
 			},
 			headerPadding:null,
 		}
@@ -62,7 +62,7 @@ export default {
 			<div ref="viewButtons" v-if="!noWeekView && !noMonthView" :class="getHeaderClassSide" class="d-flex justify-content-center justify-content-md-end align-items-center" style="pointer-events: none;">
 				<div  style="pointer-events: all;">
 					<div  role="group" aria-label="Kalender Modus">
-						<button type="button" :class="{'active':mode_kurzbz === mode}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="({mode_bezeichnung,icon,condition},mode_kurzbz) in modes">
+						<button type="button" :class="{'active':mode_kurzbz.toLowerCase() === mode.toLowerCase()}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="({mode_bezeichnung,icon,condition},mode_kurzbz) in modes">
 							<i v-if="condition" class="fa" :class="icon" ></i>
 						</button>
 					</div>

public/js/components/Cis/Stundenplan/Stundenplan.js

@@ -4,14 +4,14 @@ import LvModal from "../Mylv/LvModal.js";
 import LvInfo from "../Mylv/LvInfo.js"
 import LvMenu from "../Mylv/LvMenu.js"
 
-export const DEFAULT_MODE = 'Week'
+export const DEFAULT_MODE_STUNDENPLAN = 'Week'
 
 const Stundenplan = {
 	name: 'Stundenplan',
 	data() {
 		return {
 			events: null,
-			calendarMode: DEFAULT_MODE,
+			calendarMode: DEFAULT_MODE_STUNDENPLAN,
 			calendarDate: new CalendarDate(new Date()),
 			eventCalendarDate: new CalendarDate(new Date()),
 			currentlySelectedEvent: null,
@@ -20,11 +20,11 @@ const Stundenplan = {
 			studiensemester_kurzbz: null,
 			studiensemester_start: null,
 			studiensemester_ende: null,
-			uid: null,
+			uid: null
 		}
 	},
 	props: [
-		"viewData"
+		"propsViewData"
 	],
 	watch: {
 		weekFirstDay: {
@@ -37,12 +37,12 @@ const Stundenplan = {
 			},
 			immediate: true,
 		},
-		'viewData.lv_id'(newVal) {
-			// console.log('viewData.lv_id', newVal)
+		// forward/backward on history entries happening in stundenplan
+		'propsViewData.lv_id'(newVal) {
+		},
+		'propsViewData.mode'(newVal) {
+			if(this.$refs.calendar) this.$refs.calendar.setMode(newVal)
 		},
-		'viewData.focus_date'(newVal) {
-			// console.log('viewData.focus_date', newVal)
-		}
 	},
 	components: {
 		FhcCalendar, LvModal, LvMenu, LvInfo
@@ -91,12 +91,12 @@ const Stundenplan = {
 				String(day.getMonth() + 1).padStart(2, "0") + "-" +
 				String(day.getDate()).padStart(2, "0");
 			
-			this.$router.replace({
+			this.$router.push({
 				name: "Stundenplan",
 				params: {
 					mode: this.calendarMode,
 					focus_date: date,
-					lv_id: this.viewData?.lv_id || null
+					lv_id: this.propsViewData?.lv_id || null
 				}
 			})
 			
@@ -104,19 +104,18 @@ const Stundenplan = {
 		},
 		handleChangeMode(mode) {
 			const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
-			const calendarModeCapitalized = this.calendarMode.charAt(0).toUpperCase() + this.calendarMode.slice(1)
-			if(modeCapitalized !== calendarModeCapitalized) { // avoid the first $emit event where mode is initialized 
-				this.$router.replace({
-					name: "Stundenplan",
-					params: {
-						mode: modeCapitalized,
-						focus_date: this.currentDay.toISOString().split("T")[0],
-						lv_id: this.viewData?.lv_id || null
-					}
-				})
 
-				this.calendarMode = mode
-			}
+			this.$router.push({
+				name: "Stundenplan",
+				params: {
+					mode: modeCapitalized,
+					focus_date: this.currentDay.toISOString().split("T")[0],
+					lv_id: this.propsViewData?.lv_id ?? null
+				}
+			})
+		
+			this.calendarMode = mode
+
 		},
 		showModal: function(event){
 			this.currentlySelectedEvent = event;
@@ -149,7 +148,7 @@ const Stundenplan = {
 		},
 		loadEvents: function(){
 			Promise.allSettled([
-				this.$fhcApi.factory.stundenplan.getStundenplan(this.monthFirstDay, this.monthLastDay, this.viewData.lv_id),
+				this.$fhcApi.factory.stundenplan.getStundenplan(this.monthFirstDay, this.monthLastDay, this.propsViewData.lv_id),
 				this.$fhcApi.factory.stundenplan.getStundenplanReservierungen(this.monthFirstDay, this.monthLastDay)
 			]).then((result) => {
 				let promise_events = [];
@@ -196,11 +195,12 @@ const Stundenplan = {
 	<hr>
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
 	<fhc-calendar 
+		ref="calendar"
 		@selectedEvent="setSelectedEvent"
 		:initial-date="currentDay"
 		@change:range="updateRange"
 		:events="events"
-		:initial-mode="viewData.mode"
+		:initial-mode="propsViewData.mode"
 		show-weeks
 		@select:day="selectDay"
 		@change:mode="handleChangeMode"