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