From 9b9b86171f70f3e1d4c7ea893ac932edf856d2cd Mon Sep 17 00:00:00 2001
From: HumanoidSandvichDispenser <humanoidsandvichdispenser@gmail.com>
Date: Sun, 10 Nov 2024 01:57:25 -0800
Subject: [PATCH] Use Moment instead of Date

---
 .../src/components/AvailabilityGrid.vue       | 19 ++++++++++---------
 .../src/components/WeekSelectionBox.vue       | 15 ++++++---------
 availabili.tf/src/stores/schedule.ts          | 15 ++++++++-------
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/availabili.tf/src/components/AvailabilityGrid.vue b/availabili.tf/src/components/AvailabilityGrid.vue
index e50f8f6..b3a7812 100644
--- a/availabili.tf/src/components/AvailabilityGrid.vue
+++ b/availabili.tf/src/components/AvailabilityGrid.vue
@@ -49,13 +49,14 @@ function selectionInside(dayIndex, hour) {
 }
 
 const days = computed(() => {
-  let ret = [];
-  for (let i = 0; i < 7; i++) {
-    const date = new Date(props.dateStart);
-    date.setDate(props.dateStart.getDate() + i);
-    ret.push(date);
-  }
-  return ret;
+  let ret = [0, 1, 2, 3, 4, 5, 6];
+  //for (let i = 0; i < 7; i++) {
+  //  const date = new Date(props.dateStart);
+  //  date.setDate(props.dateStart.getDate() + i);
+  //  ret.push(date);
+  //}
+  return ret
+    .map((val) => props.dateStart.clone().add(val, "days"));
 });
 
 const hours = computed(() => {
@@ -176,8 +177,8 @@ onUnmounted(() => {
     </div>
     <div v-for="(day, dayIndex) in days" :key="dayIndex" class="column">
       <div class="date">
-        <div class="day-of-week">{{ daysOfWeek[day.getDay()] }}</div>
-        <div class="day">{{ day.getDate() }}</div>
+        <div class="day-of-week">{{ day.format("ddd") }}</div>
+        <div class="day">{{ day.date() }}</div>
       </div>
       <div class="column-time-slots">
         <div
diff --git a/availabili.tf/src/components/WeekSelectionBox.vue b/availabili.tf/src/components/WeekSelectionBox.vue
index bee5139..bcb49fd 100644
--- a/availabili.tf/src/components/WeekSelectionBox.vue
+++ b/availabili.tf/src/components/WeekSelectionBox.vue
@@ -7,17 +7,14 @@ const props = defineProps({
   isDisabled: Boolean,
 });
 
-const dateStart = computed(() => model.value.toLocaleDateString());
-const dateEnd = computed(() => {
-  let dateEndObject = new Date(model.value);
-  dateEndObject.setDate(model.value.getDate() + 6);
-  return dateEndObject.toLocaleDateString();
-});
+const dateStart = computed(() => model.value.format("L"));
+const dateEnd = computed(() => model.value.clone().add(6, "days").format("L"));
 
 function incrementDate(delta: number) {
-  let newDate = new Date(model.value);
-  newDate.setDate(newDate.getDate() + delta);
-  model.value = newDate;
+  model.value = model.value.clone().add(delta, "days");
+  //let newDate = new Date(model.value);
+  //newDate.setDate(newDate.getDate() + delta);
+  //model.value = newDate;
 }
 </script>
 
diff --git a/availabili.tf/src/stores/schedule.ts b/availabili.tf/src/stores/schedule.ts
index 00940ad..5c1ec11 100644
--- a/availabili.tf/src/stores/schedule.ts
+++ b/availabili.tf/src/stores/schedule.ts
@@ -4,15 +4,15 @@ import { reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useClientStore } from "./client";
 import type { TeamSchema } from "@/client";
-import moment from "moment";
+import moment, { type Moment } from "moment";
 import "moment-timezone";
 
 export const useScheduleStore = defineStore("schedule", () => {
   const client = useClientStore().client;
 
-  const dateStart = ref(new Date(2024, 9, 21, 0, 30));
+  const dateStart = ref(moment());
 
-  const windowStart = computed(() => Math.floor(dateStart.value.getTime() / 1000));
+  const windowStart = computed(() => Math.floor(dateStart.value.unix()));
 
   const availability = reactive(new Array(168));
 
@@ -50,13 +50,14 @@ export const useScheduleStore = defineStore("schedule", () => {
   });
 
   watch(team, () => {
-    dateStart.value = getWindowStart(team.value).toDate();
+    dateStart.value = getWindowStart(team.value);
     console.log(dateStart.value);
   });
 
-  async function fetchSchedule() {
+  async function fetchSchedule(dateStartOverride?: Moment) {
+    dateStartOverride = dateStartOverride ?? dateStart.value;
     return client.default.getApiSchedule(
-      Math.floor(dateStart.value.getTime() / 1000).toString(),
+      Math.floor(dateStartOverride.unix()).toString(),
       team.value.id,
     )
       .then((response) => {
@@ -82,7 +83,7 @@ export const useScheduleStore = defineStore("schedule", () => {
 
   async function saveSchedule() {
     return client.default.putApiSchedule({
-      windowStart: Math.floor(dateStart.value.getTime() / 1000).toString(),
+      windowStart: Math.floor(dateStart.value.unix()).toString(),
       teamId: team.value.id,
       availability,
     });