Marathon Calendar basic controllers

Improves .is-active class additions handling, allowing links to opt-out

Related to Issue #38

components/calendar/Calendar.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <CalendarController :year="year" :month="month" />
+    <CalendarView :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.query.calendarYear as string ?? new Date().getFullYear(), 10);
+    },
+    month(): number {
+      return Number.parseInt(this.$route.query.calendarMonth as string ?? new Date().getMonth() + 1, 10);
+    },
+  },
+});
+</script>

components/calendar/Controller.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="controller-container">
+    <h4 class="title is-4">
+      <ElementTemporalDateTime :datetime="datetime" format="longMonth" />
+    </h4>
+    <div class="controls-container">
+      <ElementLink :to="{ query: { ...$route.query, ...previousCalendar }}" class="button">
+        <FontAwesomeIcon :icon="[ 'fas', 'caret-left' ]" />
+      </ElementLink>
+      <ElementLink :to="{ query: { ...$route.query, ...nowCalendar }}" class="button" no-active>
+        {{ $t('calendar.now') }}
+      </ElementLink>
+      <ElementLink :to="{ query: { ...$route.query, ...nextCalendar }}" class="button">
+        <FontAwesomeIcon :icon="[ 'fas', 'caret-right' ]" />
+      </ElementLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+interface CalendarLinkInfo {
+  calendarYear: number;
+  calendarMonth: number;
+}
+
+export default Vue.extend({
+  props: {
+    year: {
+      type: Number,
+      default: new Date().getFullYear(),
+    },
+    month: {
+      type: Number,
+      // JavaScript offests by one month (0 indexed)
+      default: new Date().getMonth() + 1,
+    },
+  },
+
+  computed: {
+    datetime(): string {
+      const month = (this.month).toString().padStart(2, '0');
+      // Passing with time is important, otherwise it's handled as UTC.
+      return `${this.year}-${month}-01 00:00:00`;
+    },
+    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,
+      };
+    },
+    nextCalendar(): CalendarLinkInfo {
+      return {
+        calendarYear: this.month !== 12 ? this.year : this.year + 1,
+        calendarMonth: this.month !== 12 ? this.month + 1 : 1,
+      };
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'sass:math' as math;
+@use '~bulmaswatch/solar/variables' as solar;
+@use '~bulma/sass/utilities/initial-variables' as bulma;
+
+.controller-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing);
+}
+
+.title {
+  margin: 0;
+}
+
+.controls-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  > * {
+    border-radius: 0;
+
+    &:first-child {
+      border-start-start-radius: bulma.$radius-rounded;
+      border-end-start-radius: bulma.$radius-rounded;
+      border-inline-start-width: solar.$border-width;
+    }
+
+    &:last-child {
+      border-start-end-radius: bulma.$radius-rounded;
+      border-end-end-radius: bulma.$radius-rounded;
+      border-inline-end-width: solar.$border-width;
+    }
+  }
+}
+</style>
+
+<!-- Temporary language info to avoid having the i18n string -->
+<i18n>
+{
+  "en-GB": {
+    "calendar": {
+      "now": "Now"
+    }
+  }
+}
+</i18n>

components/calendar/view/View.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    This is definitely a calendar, don't let the lack of any date information mislead you.
+  </div>
+</template>

components/element/Link.vue

@@ -28,12 +28,16 @@ export default Vue.extend({
       type: [ String, Object ],
       default: '',
     },
+    noActive: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
     isActive(): IsActive {
       return {
-        'is-active': (this.isHash ? this.$route.hash : this.$route.path) === this.path,
+        'is-active': !this.noActive && ((this.isHash ? this.$route.hash : this.$route.path) === this.path),
       };
     },
     path(): string|Location {

configs/font-awesome.config.js

@@ -12,6 +12,7 @@ const solid = [
   'Calendar',
   'CalendarCheck',
   'CaretDown',
+  'CaretLeft',
   'CaretRight',
   'Check',
   'CheckSquare',

configs/i18n.config.js

@@ -26,6 +26,7 @@ export const locales = [
 
 export const dateTimeFormats = {
   longDate: { dateStyle: 'long' },
+  longMonth: { year: 'numeric', month: 'long' },
   shortTime: { timeStyle: 'short' },
   mediumDateTime: { dateStyle: 'medium', timeStyle: 'short' },
 };

configs/router.config.js

@@ -2,7 +2,6 @@
 
 export function routerConfig() {
   return {
-    linkExactActiveClass: 'is-active',
     middleware: 'oengus-v1-redirect',
   };
 }

pages/calendar.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
-    Oengus calendar page stub
+    <h3 class="title is-3">
+      {{ $t('calendar.title') }}
+    </h3>
+    <Calendar />
   </div>
 </template>