Adds a duration range bar to the calendar

Each marathon gains a bar that says when during the day it occurs Related to Issue #38
oengusio · Nov 23, 2021 · c5a1f70 · c5a1f70
1 parent f00f9ae
commit c5a1f70
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/components/calendar/view/Row.vue b/components/calendar/view/Row.vue
@@ -1,7 +1,7 @@
 <template>
   <ElementTableRow>
     <ElementTableCell class="duration">
-      Duration
+      <ElementRange class="is-primary" :min="0" :max="24" :start="start" :end="end" />
     </ElementTableCell>
     <ElementTableCell class="name">
       <ElementLink :to="`/marathon/${marathon.id}`">
@@ -24,6 +24,40 @@ export default Vue.extend({
       type: Object as () => Marathon,
       default: undefined,
     },
+    datetime: {
+      type: String,
+      // The Date() function returns a string denoting "now"
+      default: () => Date(),
+    },
+  },
+
+  computed: {
+    start(): number {
+      return this.todayStart < this.marathonStart ? this.getHoursFraction(this.marathonStart) : 0;
+    },
+    end(): number {
+      return this.todayEnd > this.marathonEnd ? this.getHoursFraction(this.marathonEnd) : 24;
+    },
+    todayStart(): Date {
+      return new Date(this.datetime);
+    },
+    todayEnd(): Date {
+      const todayEnd = new Date(this.todayStart);
+      todayEnd.setDate(this.todayStart.getDate() + 1);
+      return todayEnd;
+    },
+    marathonStart(): Date {
+      return new Date(this.marathon.startDate);
+    },
+    marathonEnd(): Date {
+      return new Date(this.marathon.endDate);
+    },
+  },
+
+  methods: {
+    getHoursFraction(date: Date): number {
+      return date.getHours() + date.getMinutes() / 60;
+    },
   },
 });
 </script>
diff --git a/components/calendar/view/View.vue b/components/calendar/view/View.vue
@@ -12,7 +12,7 @@
           </ElementTableCell>
 
           <template v-for="(marathon, index) in dailyCalendar">
-            <CalendarViewRow :key="`day-${datetime}-marathon-${marathon.id}`" :marathon="marathon" :class="getClasses(marathon, index)" />
+            <CalendarViewRow :key="`day-${datetime}-marathon-${marathon.id}`" :marathon="marathon" :datetime="datetime" :class="getClasses(marathon, index)" />
           </template>
         </template>
         <template v-else>
@@ -117,7 +117,7 @@ export default Vue.extend({
     getMarathons(day: number): Array<Marathon>|undefined {
       const dayStart = new Date(this.year, this.month - 1, day);
       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);
+      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();