From 0827bf512c65dcfef378a05734bb9f9fb7360d4e Mon Sep 17 00:00:00 2001
From: Laurent <58115082+naaturel@users.noreply.github.com>
Date: Sun, 9 Mar 2025 19:27:08 +0100
Subject: [PATCH] Calendar items can now be selected

---
 deploy.sh                   |  2 ++
 src/components/Calendar.vue | 38 ++++++++++++++++++++++++++-----------
 src/models/Calendar.ts      | 20 +++++++++++++------
 src/router/index.ts         |  8 ++++----
 src/stores/CalendarStore.ts | 13 +++++++++++++
 5 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 src/stores/CalendarStore.ts

diff --git a/deploy.sh b/deploy.sh
index 1c55b12..27fd650 100644
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,2 +1,4 @@
+#!/bin/sh
+
 docker build -t letsmeet .
 docker run -d -p 8080:8080 letsmeet
\ No newline at end of file
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index b9537b6..d184bc6 100644
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -2,10 +2,12 @@
   import ArrowRight from "@/assets/arrow-right.svg"
   import ArrowLeft from "@/assets/arrow-left.svg";
 
-  import {ref, onMounted} from "vue";
-  import {Calendar} from "@/models/Calendar.ts";
+  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)[]);
@@ -14,6 +16,18 @@
     setupCalendar();
   })
 
+  function setupCalendar(){
+    dates.value = calendar.datesOfCurrentMonth();
+    updateMonth();
+  }
+
+  function selectDay(event : Event, day : number | null){
+    if(!(event.target instanceof HTMLElement) || day == null) return;
+    event.target.classList.toggle("item-selected");
+    calendar.setDay(day);
+    datePicker.select(calendar.getDate());
+  }
+
   function clickPrev(){
     dates.value = calendar.datesOfPrevMonth();
     updateMonth();
@@ -24,13 +38,8 @@
     updateMonth();
   }
 
-  function setupCalendar(){
-    dates.value = calendar.datesOfToday();
-    updateMonth();
-  }
-
   function updateMonth(){
-    monthYear.value = calendar.getDate();
+    monthYear.value = calendar.toString();
   }
 
 </script>
@@ -56,7 +65,10 @@
     </div>
 
     <div class="day-picker">
-      <div v-for="(day, index) in dates" :key="day ?? `null-${index}`" :class="{'item': day !== null}">
+      <div v-on:click="selectDay($event, day)"
+           v-for  ="(day, index) in dates"
+           :id    ="day !== null ? `day-${index}` : undefined"
+           :class ="{'item': day !== null}">
         {{ day }}
       </div>
     </div>
@@ -129,10 +141,14 @@
   user-select: none;
 }
 
-.item:hover
+.item-selected
 {
-  transform: scale(1.1);
   background-color: var(--secondary-color);
 }
 
+.item:hover
+{
+  transform: scale(1.1);
+}
+
 </style>
diff --git a/src/models/Calendar.ts b/src/models/Calendar.ts
index fa48d9b..2a3596d 100644
--- a/src/models/Calendar.ts
+++ b/src/models/Calendar.ts
@@ -1,8 +1,6 @@
 export class Calendar {
 
-  private year : number;
-  private month : number;
-  private monthsName : string[] = [
+  private readonly monthsName : string[] = [
     "January",
     "February",
     "March",
@@ -16,18 +14,24 @@ export class Calendar {
     "November",
     "December"
   ];
+  private year : number;
+  private month : number;
+  private day : number;
 
   public constructor() {
     let date = new Date();
     this.year = date.getFullYear();
     this.month = date.getMonth();
+    this.day = date.getDay();
   }
 
-  public getDate(){
-    return this.monthsName[this.month]  + " " + this.year;
+  public getDate(): Date {
+    return new Date(this.year, this.month, this.day);
   }
 
-  public datesOfToday(){
+  public setDay(day : number) { this.day = day; }
+
+  public datesOfCurrentMonth(){
     return this.datesOf();
   }
 
@@ -67,4 +71,8 @@ export class Calendar {
     }
     return dates;
   }
+
+  public toString(){
+    return this.monthsName[this.month]  + " " + this.year;
+  }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index d54cf5c..61e4dca 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,11 +8,11 @@ import ErrorView from '../views/ErrorView.vue';
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: '/', name: 'home', component: HomeView},
-    { path: '/about', name: 'about', component: AboutView},
+    { path: '/',       name: 'home',   component: HomeView},
+    { path: '/about',  name: 'about',  component: AboutView},
     { path: '/create', name: 'create', component: CreateView},
-    { path: '/join', name: 'join', component: JoinView},
-    { path: '/:pathMatch(.*)*', component: ErrorView }
+    { path: '/join',   name: 'join',   component: JoinView},
+    { path: '/:pathMatch(.*)*',        component: ErrorView }
   ]
 })
 
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
new file mode 100644
index 0000000..3aadfdc
--- /dev/null
+++ b/src/stores/CalendarStore.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+
+export const datePickerStore = defineStore('datePicker', {
+  state: () => {
+    return { from: new Date(), to: new Date() }
+  },
+  actions: {
+    select(date : Date) {
+      this.from = date < this.from ? date : this.from;
+      this.to =   date > this.to   ? date : this.to;
+    },
+  },
+})