Calendar items can now be selected

deploy.sh

@@ -1,2 +1,4 @@
+#!/bin/sh
+
 docker build -t letsmeet .
 docker run -d -p 8080:8080 letsmeet

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 { ref, onMounted } from "vue";
-  import {Calendar} from "@/models/Calendar.ts";
+  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>

src/models/Calendar.ts

@@ -1,8 +1,6 @@
 export class Calendar {
 
-  private year : number;
+  private readonly monthsName : string[] = [
-  private month : number;
-  private 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(){
+  public getDate(): Date {
-    return this.monthsName[this.month]  + " " + this.year;
+    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;
+  }
 }

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: '/',       name: 'home',   component: HomeView},
-    { path: '/about', name: 'about', component: AboutView},
+    { path: '/about',  name: 'about',  component: AboutView},
     { path: '/create', name: 'create', component: CreateView},
-    { path: '/join', name: 'join', component: JoinView},
+    { path: '/join',   name: 'join',   component: JoinView},
-    { path: '/:pathMatch(.*)*', component: ErrorView }
+    { path: '/:pathMatch(.*)*',        component: ErrorView }
   ]
 })
 

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;
+    },
+  },
+})