Fix remaining selected dates in calendar

src/components/Calendar.vue

@@ -1,31 +1,47 @@
 <script setup lang="ts">
   import ArrowRight from "@/assets/arrow-right.svg"
   import ArrowLeft from "@/assets/arrow-left.svg";
-
+  import {ref, onMounted, watch} from "vue";
-  import { ref, onMounted } from "vue";
   import { datePickerStore } from "@/stores/CalendarStore.ts";
   import { Calendar } from "@/models/Calendar.ts";
 
   const calendar = new Calendar();
   const datePicker = datePickerStore();
-
   const monthYear = ref("");
   const dates = ref([] as (number | null)[]);
+  const selectedDays = ref(new Map<string, Date>());
 
   onMounted(() => {
     setupCalendar();
   })
 
-  function setupCalendar(){
+  watch(selectedDays, (newValue) => {
-    dates.value = calendar.datesOfCurrentMonth();
+    let dates = Array.from(selectedDays.value.values())
-    updateMonth();
+    datePicker.update(dates);
-  }
+  }, { deep: true });
 
   function selectDay(event : Event, day : number | null){
     if(!(event.target instanceof HTMLElement) || day == null) return;
     calendar.setDay(day);
-    datePicker.select(calendar.getDate());
+    toggleSelectedDay(event.target.id,  calendar.getDate());
-    event.target.classList.toggle("item-selected");
+    highlightSelectedDay(event.target);
+  }
+
+  function toggleSelectedDay(id : string, date : Date) : void {
+    if(selectedDays.value.has(id)){
+      selectedDays.value.delete(id);
+    } else {
+      selectedDays.value.set(id, date);
+    }
+  }
+
+  function highlightSelectedDay(element : HTMLElement){
+    element.classList.toggle("item-selected");
+  }
+
+  function setupCalendar(){
+    dates.value = calendar.datesOfCurrentMonth();
+    updateMonth();
   }
 
   function clickPrev(){
@@ -39,7 +55,7 @@
   }
 
   function updateMonth(){
-    monthYear.value = calendar.toString();
+    monthYear.value = calendar.getMonthYear();
   }
 
 </script>
@@ -64,11 +80,16 @@
       <div>S</div>
     </div>
 
+    <!--Elements are not recreated ? Does only the id change ? -->
+    <!--Keep track of all selected ids and update view when month is update ? -->
     <div class="day-picker">
       <div v-on:click="selectDay($event, day)"
-           v-for  ="(day, index) in dates"
+           v-for  ="(day) in dates"
-           :id    ="day !== null ? `day-${index}` : undefined"
+           :id    ="day !== null ? `${day}-${monthYear}` : undefined"
-           :class ="{'item': day !== null}">
+           :class ="{
+             'item': day !== null,
+             'item-selected' : selectedDays.has(`${day}-${monthYear}`)
+           }">
         {{ day }}
       </div>
     </div>

src/helpers/ArrayHelper.ts

@@ -7,18 +7,4 @@ export abstract class ArrayHelper {
   public static indexOf(array : any[], element : any) : number {
     return array.indexOf(element);
   }
-
-  public static toggleElement(array : any[], element : any) : void {
-
-    let index = ArrayHelper.indexOf(array, element);
-    console.log(index);
-    if(index < 0) {
-      console.log("Not in array")
-      array.push(element);
-    } else {
-      console.log("Already in array")
-      array.splice(index, 1);
-    }
-  }
-
 }

src/models/Calendar.ts

@@ -29,6 +29,10 @@ export class Calendar {
     return new Date(this.year, this.month, this.day);
   }
 
+  public getMonthYear(){
+    return `${this.monthsName[this.month]} ${this.year}`;
+  }
+
   public setDay(day : number) { this.day = day; }
 
   public datesOfCurrentMonth(){
@@ -73,6 +77,6 @@ export class Calendar {
   }
 
   public toString(){
-    return this.monthsName[this.month]  + " " + this.year;
+    return `${this.day}-${this.monthsName[this.month]}-${this.year}`
   }
 }

src/models/TimeStamp.ts

@@ -0,0 +1,12 @@
+export class TimeStamp {
+
+  private readonly value : number;
+
+  public constructor(date : Date) {
+    this.value = date.getTime();
+  }
+
+  public getValue() : number{
+    return this.value;
+  }
+}

src/stores/CalendarStore.ts

@@ -1,23 +1,14 @@
 import { defineStore } from 'pinia'
-import { ArrayHelper} from "@/helpers/ArrayHelper.ts";
+import {TimeStamp} from "@/models/TimeStamp.ts";
 
 export const datePickerStore = defineStore('datePicker', {
   state: () => {
-    return { dates: [] as number[] }
+    return { dates: [] as TimeStamp[] }
   },
   actions: {
-    select(date : Date) {
+    update(dates : Date[]) {
-      toggleElement(this.dates, date.getTime());
+      this.dates = dates.map(date => new TimeStamp(date));
       console.log(this.dates);
     },
   },
 })
-
-function toggleElement(arr : any[], element:any) : void {
-  let index = ArrayHelper.indexOf(arr, element);
-  if (index < 0) {
-    arr.push(element);
-  } else {
-    arr.splice(index, 1);
-  }
-}