fix calendar mode watch/emit handling; WIP roomInfo routes

public/js/apps/Dashboard/Fhc.js

@@ -64,7 +64,6 @@ const router = VueRouter.createRouter({
 			name: "StundenplanNumeric",
 			component: Stundenplan,
 			redirect: (to) => {
-				debugger
 				return { // redirect to longer Stundenplan url and map params
 					name: "Stundenplan",
 					params: {
@@ -106,7 +105,6 @@ const router = VueRouter.createRouter({
 				};
 			},
 			beforeEnter: (to, from, next) => {
-				console.log('beforeEnter')
 				// If missing mode or focus_date, redirect with defaults
 				if (!to.params.mode || !to.params.focus_date) {
 					next({

public/js/components/Calendar/Calendar.js

@@ -62,6 +62,9 @@ export default {
 		noMonthView: Boolean
 	},
 	watch:{
+		mode(newVal) {
+			console.log('mode watcher', newVal)
+		},
 		selectedEvent:{
 			handler(newSelectedEvent) {
 				this.$emit('selectedEvent', newSelectedEvent);
@@ -122,6 +125,7 @@ export default {
 					this.prevMode = this.currMode;
 					this.currMode = v;
 				}
+				this.$emit('change:mode', this.currMode)
 			}
 		},
 		eventsPerDay() {

public/js/components/Cis/Mylv/RoomInformation.js

@@ -3,7 +3,9 @@ import CalendarDate from "../../../composables/CalendarDate.js";
 import LvModal from "../../../components/Cis/Mylv/LvModal.js";
 import LvInfo from "../../../components/Cis/Mylv/LvInfo.js"
 
-export default{
+export const DEFAULT_MODE = 'Week'
+
+const RoomInformation = {
 	name: "RoomInformation",
     props:{
         ort_kurzbz: {
@@ -123,7 +125,7 @@ export default{
 		<h2>Room Information {{ ort_kurzbz }}</h2>
 		<hr>
 		<lv-modal v-if="currentlySelectedEvent" :showMenu="false" :event="currentlySelectedEvent" ref="lvmodal" />
-		<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
+		<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="DEFAULT_MODE" show-weeks @select:day="selectDay" v-model:minimized="minimized">
             <template #monthPage="{event,day}">
 				<span >
 					{{event.topic}}
@@ -155,7 +157,7 @@ export default{
 			<template #pageMobilContent>
 				<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
 				<div class="w-100">
-					<lv-info  :event="currentlySelectedEvent" />
+					<lv-info :event="currentlySelectedEvent" />
 				</div>
 			</template>
 			<template #pageMobilContentEmpty >
@@ -163,4 +165,6 @@ export default{
 			</template>
         </fhc-calendar>
     `,
-};
+};
+
+export default RoomInformation

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

@@ -4,13 +4,14 @@ import LvModal from "../Mylv/LvModal.js";
 import LvInfo from "../Mylv/LvInfo.js"
 import LvMenu from "../Mylv/LvMenu.js"
 
-// TODO: define in one place that week is the default mode, it is hardcoded in 27 places currently
-export const Stundenplan = {
+export const DEFAULT_MODE = 'Week'
+
+const Stundenplan = {
 	name: 'Stundenplan',
 	data() {
 		return {
 			events: null,
-			calendarMode: "Week",
+			calendarMode: DEFAULT_MODE,
 			calendarDate: new CalendarDate(new Date()),
 			eventCalendarDate: new CalendarDate(new Date()),
 			currentlySelectedEvent: null,
@@ -102,20 +103,20 @@ export const Stundenplan = {
 			this.currentDay = day;
 		},
 		handleChangeMode(mode) {
-			console.log('handleChangeMode', mode)
 			const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
-			
-			// TODO: clashes with initial mode and needs to be differentiated
-			// 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
+			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
+			}
 		},
 		showModal: function(event){
 			this.currentlySelectedEvent = event;