From 9b0a0532f8f840f61bb4abe161768f63caf6e635 Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Fri, 26 Nov 2021 01:20:32 -0800
Subject: [PATCH] Calendar day header show current day

If the current day is in the day header's duration, it changes
The colors used match the colors used in Schedule for "current run"

Related to Issue #38
---
 components/calendar/view/View.vue | 40 ++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/components/calendar/view/View.vue b/components/calendar/view/View.vue
index 70ee3b8f..c40e29c1 100644
--- a/components/calendar/view/View.vue
+++ b/components/calendar/view/View.vue
@@ -7,16 +7,30 @@
     <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">
+          <ElementTableCell
+            :key="`day-${datetime}`"
+            is-header
+            class="day"
+            :class="isToday(datetime)"
+            column-start="1"
+            column-end="-1"
+          >
             <ElementTemporalDateTime :datetime="datetime" format="longDate" />
           </ElementTableCell>
 
           <template v-for="(marathon, index) in dailyCalendar">
-            <CalendarViewRow :key="`day-${datetime}-marathon-${marathon.id}`" :marathon="marathon" :datetime="datetime" :class="getClasses(marathon, index)" />
+            <CalendarViewRow :key="`day-${datetime}-marathon-${marathon.id}`" :marathon="marathon" :datetime="datetime" :class="getClasses(index)" />
           </template>
         </template>
         <template v-else>
-          <ElementTableCell :key="`day-range-${datetime}`" is-header class="day-range is-info" column-start="1" column-end="-1">
+          <ElementTableCell
+            :key="`day-range-${datetime}`"
+            is-header
+            class="day-range"
+            :class="isToday(dailyCalendar, datetime)"
+            column-start="1"
+            column-end="-1"
+          >
             <ElementTemporalRange :start="dailyCalendar" :end="datetime" format="longDate" />
           </ElementTableCell>
 
@@ -119,12 +133,26 @@ export default Vue.extend({
       const dayEnd = new Date(this.year, this.month - 1, day + 1);
       return this.calendar?.calendar?.filter(marathon => new Date(marathon.endDate) > dayStart && new Date(marathon.startDate) < dayEnd);
     },
-    getClasses(marathon: Marathon, index: number): { 'is-primary': boolean, 'is-even': boolean, 'is-odd': boolean } {
-      const now = new Date();
+    getClasses(index: number): { 'is-even': boolean, 'is-odd': boolean } {
       return {
         'is-even': index % 2 === 0,
         'is-odd': index % 2 === 1,
-        'is-primary': new Date(marathon.startDate) <= now && now <= new Date(marathon.endDate),
+      };
+    },
+    isToday(firstDay: string|Date, lastDay?: string|Date): { 'is-primary': boolean, 'is-info': boolean } {
+      if (typeof firstDay === 'string') {
+        firstDay = new Date(firstDay);
+      }
+      if (typeof lastDay === 'string') {
+        lastDay = new Date(lastDay);
+      }
+      lastDay ??= firstDay;
+      const now = new Date();
+      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+      const isToday = firstDay.getTime() <= today && today <= lastDay.getTime();
+      return {
+        'is-primary': isToday,
+        'is-info': !isToday,
       };
     },
     ...mapActions({