Use Moment instead of Date

master
John Montagu, the 4th Earl of Sandvich 2024-11-10 01:57:25 -08:00
parent f5bcbb85b5
commit 9b9b86171f
Signed by: sandvich
GPG Key ID: 9A39BE37E602B22D
3 changed files with 24 additions and 25 deletions

View File

@ -49,13 +49,14 @@ function selectionInside(dayIndex, hour) {
} }
const days = computed(() => { const days = computed(() => {
let ret = []; let ret = [0, 1, 2, 3, 4, 5, 6];
for (let i = 0; i < 7; i++) { //for (let i = 0; i < 7; i++) {
const date = new Date(props.dateStart); // const date = new Date(props.dateStart);
date.setDate(props.dateStart.getDate() + i); // date.setDate(props.dateStart.getDate() + i);
ret.push(date); // ret.push(date);
} //}
return ret; return ret
.map((val) => props.dateStart.clone().add(val, "days"));
}); });
const hours = computed(() => { const hours = computed(() => {
@ -176,8 +177,8 @@ onUnmounted(() => {
</div> </div>
<div v-for="(day, dayIndex) in days" :key="dayIndex" class="column"> <div v-for="(day, dayIndex) in days" :key="dayIndex" class="column">
<div class="date"> <div class="date">
<div class="day-of-week">{{ daysOfWeek[day.getDay()] }}</div> <div class="day-of-week">{{ day.format("ddd") }}</div>
<div class="day">{{ day.getDate() }}</div> <div class="day">{{ day.date() }}</div>
</div> </div>
<div class="column-time-slots"> <div class="column-time-slots">
<div <div

View File

@ -7,17 +7,14 @@ const props = defineProps({
isDisabled: Boolean, isDisabled: Boolean,
}); });
const dateStart = computed(() => model.value.toLocaleDateString()); const dateStart = computed(() => model.value.format("L"));
const dateEnd = computed(() => { const dateEnd = computed(() => model.value.clone().add(6, "days").format("L"));
let dateEndObject = new Date(model.value);
dateEndObject.setDate(model.value.getDate() + 6);
return dateEndObject.toLocaleDateString();
});
function incrementDate(delta: number) { function incrementDate(delta: number) {
let newDate = new Date(model.value); model.value = model.value.clone().add(delta, "days");
newDate.setDate(newDate.getDate() + delta); //let newDate = new Date(model.value);
model.value = newDate; //newDate.setDate(newDate.getDate() + delta);
//model.value = newDate;
} }
</script> </script>

View File

@ -4,15 +4,15 @@ import { reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useClientStore } from "./client"; import { useClientStore } from "./client";
import type { TeamSchema } from "@/client"; import type { TeamSchema } from "@/client";
import moment from "moment"; import moment, { type Moment } from "moment";
import "moment-timezone"; import "moment-timezone";
export const useScheduleStore = defineStore("schedule", () => { export const useScheduleStore = defineStore("schedule", () => {
const client = useClientStore().client; 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)); const availability = reactive(new Array(168));
@ -50,13 +50,14 @@ export const useScheduleStore = defineStore("schedule", () => {
}); });
watch(team, () => { watch(team, () => {
dateStart.value = getWindowStart(team.value).toDate(); dateStart.value = getWindowStart(team.value);
console.log(dateStart.value); console.log(dateStart.value);
}); });
async function fetchSchedule() { async function fetchSchedule(dateStartOverride?: Moment) {
dateStartOverride = dateStartOverride ?? dateStart.value;
return client.default.getApiSchedule( return client.default.getApiSchedule(
Math.floor(dateStart.value.getTime() / 1000).toString(), Math.floor(dateStartOverride.unix()).toString(),
team.value.id, team.value.id,
) )
.then((response) => { .then((response) => {
@ -82,7 +83,7 @@ export const useScheduleStore = defineStore("schedule", () => {
async function saveSchedule() { async function saveSchedule() {
return client.default.putApiSchedule({ return client.default.putApiSchedule({
windowStart: Math.floor(dateStart.value.getTime() / 1000).toString(), windowStart: Math.floor(dateStart.value.unix()).toString(),
teamId: team.value.id, teamId: team.value.id,
availability, availability,
}); });