Show current day in url hash fragment

It's important to keep the date out of computed gqlQueryArgs to not resend query.

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -61,8 +61,9 @@
         v-for="day in groupDocsByDay(items)"
         two-line
         :key="'day-' + day[0]"
+        :id="'documentation_' + day[0].toISODate()"
       >
-        <v-list-item-content :id="'documentation_' + day[0].toISODate()">
+        <v-list-item-content>
           <v-subheader class="text-h6">{{
             $d(day[0], "dateWithWeekday")
           }}</v-subheader>
@@ -163,7 +164,6 @@ export default {
   computed: {
     gqlQueryArgs() {
       console.log('computing gqlQueryArgs');
-      const date = this.$route.hash.substring(1)
       return {
         own: this.filterType === "all" ? false : true,
         objId: this.objId ? Number(this.objId) : undefined,
@@ -223,6 +223,38 @@ export default {
         .sort()
         .map((key) => byDay[key]);
     },
+    debounce(fn, delay) {
+      let timer;
+      return () => {
+        console.log('debounce');
+        clearTimeout(timer);
+        timer = setTimeout(fn, delay);
+      }
+    },
+    // Adapted from 
+    // https://github.com/vuejs/vuepress/blob/38e98634af117f83b6a32c8ff42488d91b66f663/packages/%40vuepress/plugin-active-header-links/clientRootMixin.js
+    setCurrentDay() {
+      const days = Array.from(document.querySelectorAll("[id^='documentation_']"));
+
+      const scrollTop = Math.max(
+        window.pageYOffset,
+        document.documentElement.scrollTop,
+        document.body.scrollTop
+      );
+
+      for (let i = 0; i < days.length; i++) {
+        const day = days[i];
+        const nextDay =days[i + 1];
+
+        if ((scrollTop >= day.offsetTop + 10 || i == 0) && (!nextDay || scrollTop < nextDay.offsetTop - 10)) {
+          const date = day.id.split("_")[1];
+          if (date !== this.$route.hash.substring(1)) {
+            this.gotoDate(date);
+          }
+          return
+        }
+      }
+    },
     /**
      * @param {"prev"|"next"} direction
      */
@@ -286,7 +318,7 @@ export default {
     },
     gotoDate(date, scroll) {
       // show
-      this.$router.push({ hash: date.toISODate() })
+      this.$router.replace({ hash: date })
       console.log('hash', this.$route.hash);
       // assure
       // scroll
@@ -297,8 +329,11 @@ export default {
     console.log('mounted with hash', this.$route.hash);
     if (!this.$route.hash) {
       console.log('initialized hash');
-      this.$router.push({ hash: DateTime.now().toISODate() })
+      this.$router.replace({ hash: DateTime.now().toISODate() })
     }
+    this.dateStart = this.$route.hash.substring(1);
+    this.dateEnd = DateTime.fromISO(this.dateStart).plus({ weeks: 1 }).toISODate()
+    window.addEventListener('scroll', this.debounce(this.setCurrentDay, 300));
   },
 };
 </script>