Calendar uses path instead of query params

"No marathons" text only shows if there's nothing for the whole display

Related to Issue #38

components/calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="marathon-calendar-container">
     <CalendarController :year="year" :month="month" />
     <CalendarView :year="year" :month="month" />
   </div>
@@ -9,13 +9,23 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-  computed: {
-    year(): number {
-      return Number.parseInt(this.$route.query.calendarYear as string ?? new Date().getFullYear(), 10);
+  props: {
+    year: {
+      type: Number,
+      default: new Date().getFullYear(),
     },
-    month(): number {
-      return Number.parseInt(this.$route.query.calendarMonth as string ?? new Date().getMonth() + 1, 10);
+    month: {
+      type: Number,
+      default: new Date().getMonth(),
     },
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.marathon-calendar-container {
+  > :not(:last-child) {
+    margin-block-end: var(--spacing);
+  }
+}
+</style>

components/calendar/Controller.vue

@@ -4,13 +4,13 @@
       <ElementTemporalDateTime :datetime="datetime" format="longMonth" />
     </h4>
     <div class="controls-container">
-      <ElementLink :to="{ query: { ...$route.query, ...previousCalendar }}" class="button">
+      <ElementLink :to="`/calendar/${previousCalendar.year}/${previousCalendar.month}`" class="button">
         <FontAwesomeIcon :icon="[ 'fas', 'caret-left' ]" />
       </ElementLink>
-      <ElementLink :to="{ query: { ...$route.query, ...nowCalendar }}" class="button" no-active>
+      <ElementLink to="/calendar" class="button" no-active>
         {{ $t('calendar.now') }}
       </ElementLink>
-      <ElementLink :to="{ query: { ...$route.query, ...nextCalendar }}" class="button">
+      <ElementLink :to="`/calendar/${nextCalendar.year}/${nextCalendar.month}`" class="button">
         <FontAwesomeIcon :icon="[ 'fas', 'caret-right' ]" />
       </ElementLink>
     </div>
@@ -21,8 +21,8 @@
 import Vue from 'vue';
 
 interface CalendarLinkInfo {
-  calendarYear: number;
-  calendarMonth: number;
+  year: number;
+  month: number;
 }
 
 export default Vue.extend({
@@ -46,21 +46,14 @@ export default Vue.extend({
     },
     previousCalendar(): CalendarLinkInfo {
       return {
-        calendarYear: this.month !== 1 ? this.year : this.year - 1,
-        calendarMonth: this.month !== 1 ? this.month - 1 : 12,
-      };
-    },
-    nowCalendar(): CalendarLinkInfo {
-      return {
-        calendarYear: new Date().getFullYear(),
-        // JavaScript offests by one month (0 indexed)
-        calendarMonth: new Date().getMonth() + 1,
+        year: this.month !== 1 ? this.year : this.year - 1,
+        month: this.month !== 1 ? this.month - 1 : 12,
       };
     },
     nextCalendar(): CalendarLinkInfo {
       return {
-        calendarYear: this.month !== 12 ? this.year : this.year + 1,
-        calendarMonth: this.month !== 12 ? this.month + 1 : 1,
+        year: this.month !== 12 ? this.year : this.year + 1,
+        month: this.month !== 12 ? this.month + 1 : 1,
       };
     },
   },

components/calendar/view/View.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <WidgetLoading :while="[ calendar ]" />
+    <div class="is-centered">
+      <WidgetLoading :while="[ calendar ]" @done="isLoading = false" />
+    </div>
 
-    <ElementTable class="marathon-calendar-table">
+    <ElementTable v-if="!isLoading" class="marathon-calendar-table">
       <template v-for="(dailyCalendar, datetime) in dailyCalendars">
         <template v-if="Array.isArray(dailyCalendar)">
           <ElementTableCell :key="`day-${datetime}`" is-header class="day is-info" column-start="1" column-end="-1">
@@ -45,6 +47,12 @@ export default Vue.extend({
     },
   },
 
+  data() {
+    return {
+      isLoading: true,
+    };
+  },
+
   async fetch(): Promise<void> {
     await Promise.allSettled([
       this.getCalendar(this.calendarParams),
@@ -71,6 +79,10 @@ export default Vue.extend({
           startNoMarathonRun = new Date(this.year, this.month - 1, day);
         }
       }
+      // If the month ends on a non-run day
+      if (startNoMarathonRun) {
+        dailyCalendars[new Date(this.year, this.month, 0).toISOString()] = startNoMarathonRun.toISOString();
+      }
       return dailyCalendars;
     },
     start(): string {
@@ -132,6 +144,16 @@ export default Vue.extend({
   > .day-range {
     text-align: center;
   }
+
+  // Only display the "no marathons" text if there are no marathons for the whole month
+  // Because of compensations dealing with timezones, it's not as simple as "array length"
+  > .no-marathons {
+    display: none;
+
+    &:nth-child(2):last-child {
+      display: inherit;
+    }
+  }
 }
 </style>
 

pages/calendar/_year/_month.vue

@@ -0,0 +1,16 @@
+/***************************************************
+ *                      XXXXX                      *
+ *                                                 *
+ *     This file is very intentionally a clone     *
+ *                  DO NOT MODIFY                  *
+ * unless you very specifically want it to diverge *
+ ***************************************************/
+
+<script lang="ts">
+import Vue from 'vue';
+import CalendarPage from '~/pages/calendar/index.vue';
+
+export default Vue.extend({
+  extends: CalendarPage,
+});
+</script>

pages/calendar/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h3 class="title is-3">
+      {{ $t('calendar.title') }}
+    </h3>
+    <Calendar :year="year" :month="month" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  computed: {
+    year(): number {
+      return Number.parseInt(this.$route.params.year ?? new Date().getFullYear(), 10);
+    },
+    month(): number {
+      return Number.parseInt(this.$route.params.month ?? new Date().getMonth() + 1, 10);
+    },
+  },
+});
+</script>