revert router.replace strategy in month page; added weeks component without header into modal when week page header is clicked to enable week selection but without leaving the week carousel page

public/js/apps/Dashboard/Fhc.js

@@ -198,17 +198,6 @@ const router = VueRouter.createRouter({
 	]
 })
 
-router.beforeEach((to, from) => {
-	// this avoids redundant routing navigation in place due to router.replace on a route with param function and
-	// beforeEnter navigation guard
-	
-	// TODO: manage the infinite forward navigation issue somehow
-	// https://stackoverflow.com/questions/28028297/how-can-i-delete-a-window-history-state?rq=3
-	if (to.fullPath === from.fullPath) {
-		return false
-	}
-})
-
 const app = Vue.createApp({
 	name: 'FhcApp',
 	data: () => ({

public/js/components/Calendar/Month.js

@@ -44,7 +44,6 @@ export default {
 			this.emitRangeChanged()
 		},
 		emitRangeChanged(mounted = false) {
-
 			this.$emit('change:range', {
 				start: new Date(this.focusDate.y, this.focusDate.m, 1),
 				end: new Date(this.focusDate.y, this.focusDate.m+1, 0),

public/js/components/Calendar/Month/Page.js

@@ -67,10 +67,12 @@ export default {
 			let classstring = 'fhc-calendar-month-page-day text-decoration-none overflow-hidden'
 			const isHighlightedWeek = this.isHighlightedWeek(week)
 			const isHighlightedDay = this.isHighlightedDay(day)
-			const isThisDate = this.date.compare(day)
+			const isThisDate = this.focusDate.compare(day)
+
 			const isNotThisMonth = day.getMonth() != this.month
 			const isInThePast = day.getTime() < this.today // this.date is just the focusDate but not the initial Date
 			
+			if(isThisDate) classstring += ' border-8'
 			if(isHighlightedWeek) classstring += ' fhc-highlight-week'
 			if(isHighlightedDay) classstring += ' fhc-highlight-day'
 			

public/js/components/Calendar/Months.js

@@ -12,6 +12,7 @@ export default {
 	],
 	data() {
 		return {
+			// TODO: 36, 24, 16 (2+ 12 + 2) months to enable year switch?
 			monthIndices: [...Array(12).keys()]
 		}
 	},

public/js/components/Calendar/Week.js

@@ -1,6 +1,8 @@
 import CalendarAbstract from './Abstract.js';
 import CalendarPane from './Pane.js';
 import CalendarWeekPage from './Week/Page.js';
+import BsModal from "../Bootstrap/Modal.js";
+import Weeks from "./Weeks";
 
 export default {
 	mixins: [
@@ -8,7 +10,9 @@ export default {
 	],
 	components: {
 		CalendarWeekPage,
-		CalendarPane
+		CalendarPane,
+		BsModal,
+		Weeks
 	},
 	computed: {
 		title() {
@@ -16,6 +20,16 @@ export default {
 		}
 	},
 	methods: {
+		handleWeekChanged(week) {
+			// this.$emit('change:offset', { y: 0, m: month - this.focusDate.m, d: 0 });
+			this.$refs.modalDatepickerContainer.hide()
+		},
+		hideMonthsModal() {
+			this.$refs.modalDatepickerContainer.hide()
+		},
+		handleHeaderClickWeek() {
+			this.$refs.modalDatepickerContainer.show()
+		},
 		paneChanged(dir) {
 			this.focusDate.d += dir * 7;
 			this.emitRangeChanged();
@@ -42,7 +56,7 @@ export default {
 	},
 	template: /*html*/`
 	<div class="fhc-calendar-week">
-		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'weeks')">
+		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="handleHeaderClickWeek">
 			<template #calendarDownloads>
 				<slot name="calendarDownloads"></slot>
 			</template>
@@ -54,5 +68,12 @@ export default {
 				</template>
 			</calendar-week-page>
 		</calendar-pane>
-	</div>`
+	</div>
+
+	<bs-modal ref="modalDatepickerContainer" dialogClass='modal-lg' class="bootstrap-prompt">
+		<template v-slot:default>
+			<weeks :header="false" @change="handleWeekChanged"></weeks>
+		</template>
+	</bs-modal>
+`
 }

public/js/components/Calendar/Weeks.js

@@ -4,10 +4,19 @@ export default {
 	mixins: [
 		CalendarAbstract
 	],
+	emits: [
+		'change'
+	],
 	inject: [
 		'size',
 		'focusDate'
 	],
+	props: {
+		header: {
+			type: Boolean,
+			default: true
+		}
+	},
 	computed: {
 		weeks(){
 			return [...Array(this.focusDate.numWeeks).keys()].map(i => i + 1);
@@ -20,7 +29,7 @@ export default {
 		setWeek(week) {
 			// TODO(chris): test is there a week jump on year select? => yes there is if the same month/day are in different weeks ... should we prevent that?
 			this.focusDate.w = week;
-			this.$emit('updateMode', 'week');
+			this.$emit('change', week);
 		},
 		prev(){
 			this.focusDate.y--;
@@ -33,7 +42,7 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-weeks h-100">
-		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
+		<calendar-header v-if="header" :title="title" @prev="prev" @next="next" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
 		<div class="d-flex flex-wrap">
 			<div v-for="(week, key) in weeks" :key="key" class="d-grid col-2">
 				<button @click="setWeek(week)" class="btn btn-outline-secondary" :class="{'border-0': week != focusDate.w}">

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

@@ -121,28 +121,15 @@ const Stundenplan = {
 				String(day.getMonth() + 1).padStart(2, "0") + "-" +
 				String(day.getDate()).padStart(2, "0");
 			const capitalizedMode = this.calendarMode[0].toUpperCase() + this.calendarMode.slice(1);
-			const isMonthMode = capitalizedMode === 'Month'
-			const isInCurrentMonth = day.getMonth() == this.currentDay.getMonth()
-			
-			if(isMonthMode && isInCurrentMonth) {
-				this.$router.replace({
-					name: "Stundenplan",
-					params: {
-						mode: capitalizedMode,
-						focus_date: date,
-						lv_id: this.propsViewData?.lv_id || null
-					}
-				})
-			} else {
-				this.$router.push({
-					name: "Stundenplan",
-					params: {
-						mode: capitalizedMode,
-						focus_date: date,
-						lv_id: this.propsViewData?.lv_id || null
-					}
-				})
-			}
+
+			this.$router.push({
+				name: "Stundenplan",
+				params: {
+					mode: capitalizedMode,
+					focus_date: date,
+					lv_id: this.propsViewData?.lv_id || null
+				}
+			})
 
 			this.currentDay = day;
 		},