From 585e6cacfd8c2812bcdc3b44aba02f04c5400ea8 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Tue, 10 Sep 2024 16:58:22 +0200
Subject: [PATCH] Add date to timetable overview route

---
 .../chronos/frontend/components/Timetable.vue | 79 +++++++++++++++++++
 aleksis/apps/chronos/frontend/index.js        | 11 +++
 2 files changed, 90 insertions(+)

diff --git a/aleksis/apps/chronos/frontend/components/Timetable.vue b/aleksis/apps/chronos/frontend/components/Timetable.vue
index 5c0f6681..78947059 100644
--- a/aleksis/apps/chronos/frontend/components/Timetable.vue
+++ b/aleksis/apps/chronos/frontend/components/Timetable.vue
@@ -1,9 +1,84 @@
 <script setup>
 import TimetableWrapper from "./TimetableWrapper.vue";
 </script>
+
 <script>
+import { DateTime } from "luxon";
+
 export default {
   name: "Timetable",
+  data() {
+    return {
+      calendarFocus: "",
+      calendarType: "week",
+      initialRouteFocusSet: false,
+    };
+  },
+  methods: {
+    setCalendarFocus(val) {
+      this.calendarFocus = val;
+    },
+    setCalendarType(val) {
+      this.calendarType = val;
+    },
+    setInnerFocusAndType() {
+      if (this.$route.name === "chronos.timetableWithId") {
+        this.$refs.calendarWithControls.setCalendarFocus(
+          DateTime.now().toISODate(),
+        );
+        this.$refs.calendarWithControls.setCalendarType(
+          this.$vuetify.breakpoint.mdAndDown ? "day" : "week",
+        );
+      } else {
+        this.initialRouteFocusSet = true;
+        this.$refs.calendarWithControls.setCalendarFocus(
+          [
+            this.$route.params.year,
+            this.$route.params.month,
+            this.$route.params.day,
+          ].join("-"),
+        );
+        this.$refs.calendarWithControls.setCalendarType(
+          this.$route.params.view,
+        );
+      }
+    },
+  },
+  watch: {
+    calendarFocus(newValue, oldValue) {
+      // Do not redirect on first page load
+      if (oldValue === "") return;
+
+      // Do not redirect when calendar focus was just set with route param values
+      if (this.initialRouteFocusSet) {
+        this.initialRouteFocusSet = false;
+        return;
+      }
+
+      const [year, month, day] = newValue.split("-");
+      this.$router.push({
+        name: "chronos.timetableWithIdAndParams",
+        params: {
+          view: this.calendarType,
+          year,
+          month,
+          day,
+        },
+      });
+    },
+    calendarType(newValue) {
+      const [year, month, day] = this.calendarFocus.split("-");
+      this.$router.push({
+        name: "chronos.timetableWithIdAndParams",
+        params: {
+          view: newValue,
+          year,
+          month,
+          day,
+        },
+      });
+    },
+  },
 };
 </script>
 
@@ -17,6 +92,10 @@ export default {
           { name: 'holidays' },
         ]"
         :params="{ type: selected.type, id: selected.objId }"
+        ref="calendarWithControls"
+        @changeCalendarFocus="setCalendarFocus"
+        @changeCalendarType="setCalendarType"
+        @calendarReady="setInnerFocusAndType"
       />
     </template>
   </timetable-wrapper>
diff --git a/aleksis/apps/chronos/frontend/index.js b/aleksis/apps/chronos/frontend/index.js
index 4749ac59..fa829bbf 100644
--- a/aleksis/apps/chronos/frontend/index.js
+++ b/aleksis/apps/chronos/frontend/index.js
@@ -31,6 +31,17 @@ export default {
         permission: "chronos.view_timetable_overview_rule",
         fullWidth: true,
       },
+      children: [
+        {
+          path: ":view(month|week|day)/:year(\\d\\d\\d\\d)/:month(\\d\\d)/:day(\\d\\d)/",
+          component: Timetable,
+          name: "chronos.timetableWithIdAndParams",
+          meta: {
+            permission: "chronos.view_timetable_overview_rule",
+            fullWidth: true,
+          },
+        },
+      ],
     },
     {
       path: "substitutions/print/",
-- 
GitLab