Use Moment instead of Date
							parent
							
								
									f5bcbb85b5
								
							
						
					
					
						commit
						9b9b86171f
					
				| 
						 | 
					@ -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
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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,
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue