holy ravioli

front/src/components/Calendar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  import ArrowRight from "@/assets/arrow-right.svg"
-  import ArrowLeft from "@/assets/arrow-left.svg";
+  import ArrowRight from "@/assets/svg/arrow-right.svg"
+  import ArrowLeft from "@/assets/svg/arrow-left.svg";
   import {ref, onMounted, watch} from "vue";
   import { datePickerStore } from "@/stores/CalendarStore.ts";
   import { Calendar } from "@/models/Calendar.ts";

front/src/components/InputField.vue

@@ -10,7 +10,6 @@ const props = defineProps({
   }
 });
 
-// Method to handle the update
 const updateValue = (event : any) => {
   emit('update:value', event.target.value);
 };

front/src/dto/EventDto.ts

@@ -1,17 +1,17 @@
 import type {Attendee} from "@/models/Attendee.ts";
-import type {TimeStamp} from "@/models/TimeStamp.ts";
+import type {EventDate} from "@/models/EventDate.ts";
 import type {AttendeeDto} from "@/dto/AttendeeDto.ts";
 
 export class EventDto {
 
   public name: string;
   public token: string;
-  public attendees: AttendeeDto[];
+  public dates : Map<EventDate, Attendee[]>
 
-  public constructor(name: string, token: string, attendees: AttendeeDto[]) {
+  public constructor(name: string, token: string, dates: Map<EventDate, Attendee[]>) {
     this.name = name;
     this.token = token;
-    this.attendees = attendees;
+    this.dates = dates;
   }
 
 }

front/src/models/Attendee.ts

@@ -1,25 +1,18 @@
-import type {TimeStamp, TimeStampState} from "@/models/TimeStamp.ts";
+import type {EventDate, EventDateState} from "@/models/EventDate.ts";
 
 export class Attendee {
 
   private name: string;
-  private dates: TimeStamp[];
 
-  public constructor(name: string, dates: TimeStamp[]) {
+  public constructor(name: string) {
     this.name = name;
-    this.dates = dates;
   }
 
   public getName() : string {
     return this.name;
   }
-
-  public getDates() : TimeStamp[] {
-    return this.dates;
-  }
 }
 
 export interface AttendeeState {
   name : string
-  dates : TimeStampState[]
 }

front/src/models/Event.ts

@@ -1,18 +1,16 @@
 import type {Attendee, AttendeeState} from "@/models/Attendee.ts";
-import type {TimeStamp} from "@/models/TimeStamp.ts";
+import type {EventDate, EventDateState} from "@/models/EventDate.ts";
 
 export class Event {
 
   private name: string;
   private token: string;
-  private attendees: Attendee[];
-  private groups : Map<number, string[]>;
+  private dates: Map<number, Attendee[]>;
 
-  public constructor(name: string, token: string, attendees: Attendee[]) {
+  public constructor(name: string, token: string, dates : Map<number, Attendee[]>) {
     this.name = name;
     this.token = token;
-    this.attendees = attendees;
-    this.groups = this.byDates();
+    this.dates = dates;
   }
 
   public getName() : string {
@@ -23,34 +21,14 @@ export class Event {
     return this.token;
   }
 
-  public getAttendees() : Attendee[] {
-    return this.attendees;
+  public getDates() : Map<number, Attendee[]> {
+    return this.dates;
   }
-
-  public getGroups() : Map<number, string[]> { return this.groups; }
-
-  private byDates() : Map<number, string[]> {
-    let res : Map<number, string[]> = new Map();
-    this.attendees.forEach((attendee: Attendee) => {
-      attendee.getDates().forEach((timeStamp: TimeStamp) => {
-        let value : number = timeStamp.getValue();
-        if(res.has(value)) {
-          res.get(value)?.push(attendee.getName());
-        } else {
-          res.set(value, []);
-          res.get(value)?.push(attendee.getName());
-        }
-      });
-    });
-
-    return res;
-  }
-
 }
 
 export interface EventState {
-  name : String
-  token : String
-  attendees: AttendeeState[];
+  name : string
+  token : string
+  dates: Map<EventDateState, AttendeeState[]>;
 }
 

front/src/models/EventDate.ts

@@ -1,4 +1,4 @@
-export class TimeStamp {
+export class EventDate {
 
   private readonly value : number;
 
@@ -9,8 +9,13 @@ export class TimeStamp {
   public getValue() : number{
     return this.value;
   }
+
+  public toString() {
+    this.value.toString();
+  }
+
 }
 
-export interface TimeStampState {
+export interface EventDateState {
   value : number;
 }

front/src/requests/EventRequests.ts

@@ -23,8 +23,22 @@ export class EventRequests {
 
     let url = this.formatUrl([this.baseUrl, this.endpoints.EVENTS, token]);
     return fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        return new EventDto(data.name, data.token, data.dates)
+      })
+      .catch(error => console.error(error));
+  }
+
+  public async createEvent(event : EventDto){
+    let url = this.formatUrl([this.baseUrl, this.endpoints.CREATE]);
+    return fetch(url, {
+      method: "POST",
+      body : JSON.stringify(event)
+    })
       .then(response => response.json())
       .then(data => new EventDto(data.name, data.token, data.attendees))
       .catch(error => console.error(error));
   }
+
 }

front/src/stores/CalendarStore.ts

@@ -1,22 +1,22 @@
 import { defineStore } from 'pinia'
-import {TimeStamp} from "@/models/TimeStamp.ts";
+import {EventDate} from "@/models/EventDate.ts";
 
 export const datePickerStore = defineStore('datePicker', {
   state: () => {
-    return { dates: [] as TimeStamp[] }
+    return { dates: [] as EventDate[] }
   },
   getters: {
-    value: (state) : TimeStamp[] => state.dates as TimeStamp[],
+    value: (state) : EventDate[] => state.dates as EventDate[],
   },
   actions: {
     getValue(){
       return this.dates;
     },
     update(dates : Date[]) : void {
-      this.dates = dates.map(date => new TimeStamp(date));
+      this.dates = dates.map(date => new EventDate(date));
     },
     clear() : void {
-      this.dates = [] as TimeStamp[];
+      this.dates = [] as EventDate[];
     },
   },
 })

front/src/stores/EventStore.ts

@@ -1,50 +1,69 @@
 import {defineStore} from 'pinia'
 import {EventRequests} from "@/requests/EventRequests.ts";
-import type {EventDto} from "@/dto/EventDto.ts";
+import {EventDto} from "@/dto/EventDto.ts";
 import {Event, type EventState} from "@/models/Event.ts";
-import type {AttendeeDto} from "@/dto/AttendeeDto.ts";
 import {Attendee, type AttendeeState} from "@/models/Attendee.ts";
-import {TimeStamp, type TimeStampState} from "@/models/TimeStamp.ts";
-import type {TimeStampDto} from "@/dto/TimeStampDto.ts";
+import {EventDate, type EventDateState} from "@/models/EventDate.ts";
 
 const requests = new EventRequests();
 
+function mapToDto() : EventDto{
+  return new EventDto("", "", new Map());
+}
+
+function mapToModel(state : EventState) : Event{
+  let dates: Map<number, Attendee[]> = new Map();
+  for (let [date, attendeesState] of state.dates.entries()) {
+    let attendees : Attendee[] = attendeesState.map(attendee => {
+      return new Attendee(attendee.name);
+    })
+    dates.set(date.value, attendees);
+  }
+  return new Event(state.name, state.token, dates);
+}
+
+function mapToState(dto : EventDto) : EventState {
+  let event : EventState = {name : "", token : "", dates: new Map<EventDateState, AttendeeState[]>()};
+  event.name = dto.name;
+  event.token = dto.token;
+  Object.entries(dto.dates).forEach(([key, attendees]) => {
+    let dateState : EventDateState = { value: Number(key) };
+    event.dates.set(dateState, attendees);
+  });
+  return event;
+}
+
 export const eventStore = defineStore('eventStore', {
   state: (): {event : EventState} => {
     return {
       event : {
         name: "",
         token: "",
-        attendees: [] as AttendeeState[]
+        dates: new Map<EventDateState, AttendeeState[]>()
       }};
   },
   getters : {
     getEvent(state) : Event  {
-      let attendees : Attendee[] = state.event.attendees.map((a : AttendeeState) => {
-        let dates: TimeStamp[] = a.dates.map(d => new TimeStamp(new Date(d.value)))
-        return new Attendee(a.name, dates);
-      });
-      return new Event(state.event.name.toString(), "", attendees);
+      return mapToModel(state.event);
     }
   },
   actions: {
+    setName(name : string){
+      this.event.name = name;
+    },
     async fetch(token: string): Promise<void> {
         try{
           let data : EventDto | void = await requests.queryEvent(token);
           if(!data) throw new Error("No event found");
-          this.event.name = data.name;
-          this.event.token = data.token;
-
-          this.event.attendees = data.attendees.map((a: AttendeeDto) => ({
-            name: a.name,
-            dates: a.dates.map((date: TimeStampDto) => ({
-              value: date.timestamp
-            })) as TimeStampState[]
-          }));
+          this.event = mapToState(data);
         } catch (error) {
           console.error(error);
-          throw new Error("Unable to fetch.");
+          throw new Error("Unable to fetch. " + error);
         }
     },
+    async create(){
+      let event = mapToDto();
+      await requests.createEvent(event)
+    }
   },
 });

front/src/utils/CutomMap.ts

@@ -1,11 +1,11 @@
-import type {TimeStamp} from "@/models/TimeStamp.ts";
+import type {EventDate} from "@/models/EventDate.ts";
 import type {Attendee} from "@/models/Attendee.ts";
 
 /**
  * I hate JavaScript and TypeScript with every single inch of my body
  */
-export class CustomMap extends Map<TimeStamp, Attendee> {
-  has(obj: TimeStamp): boolean {
+export class CustomMap extends Map<EventDate, Attendee> {
+  has(obj: EventDate): boolean {
     obj.getValue()
     return false;
   }

front/src/views/CreateView.vue

@@ -4,6 +4,10 @@ import Calendar from "@/components/Calendar.vue";
 import TextBlock from "@/components/TextBlock.vue";
 import NavLink from "@/components/NavLink.vue";
 import InputField from "@/components/InputField.vue";
+import {eventStore} from "@/stores/EventStore.ts";
+
+const store = eventStore();
+
 </script>
 
 <template>
@@ -13,7 +17,7 @@ import InputField from "@/components/InputField.vue";
       <h1>Create an <span class="colored-text">event</span></h1>
     </TextBlock>
     <div class="event-form">
-      <InputField placeholder="Event name"/>
+      <InputField placeholder="Event name" @update:value="(newValue) => { store.setName(newValue) }"/>
       <Calendar class="calendar"/>
       <NavLink name="Create" description="Create" class="create-button"></NavLink>
     </div>

front/src/views/EventView.vue

@@ -43,12 +43,11 @@ function formatDate(timestamp : number) : String{
 
     <div v-else>
       Name : {{ event.getName() }} <br>
-      <div v-for="(timestamp) in event.getGroups().keys()" >
-        {{ formatDate(timestamp)  }}
-        <div v-for="(attendee) in event.getGroups().get(timestamp)">
-          {{ attendee }}
+      <div v-for="(date) in event.getDates().keys()">
+        {{formatDate(date)}}
+        <div v-for="(attendee) in event.getDates().get(date)">
+          {{attendee.getName()}}
         </div>
-        =================
       </div>
     </div>
 

front/src/views/HomeView.vue

@@ -11,7 +11,7 @@ import TextBlock from "@/components/TextBlock.vue";
       <h1>Welcome !</h1>
       <p>
         This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
-        bla bla bla I'm just writting things nobody will read to fill the space and see how it looks.
+        bla bla bla I'm just writing things nobody will read to fill the space and see how it looks.
       </p>
       <p>
         Yes I know i could have use

front/src/views/JoinView.vue

@@ -19,7 +19,7 @@ const token = ref("");
     <div class="actions-group">
       <h1>Event <span class="colored-text">code</span></h1>
       <InputField @update:value="(newValue) => {token = newValue}" />
-      <NavLink description="Go for it !" name="event" :params="{ token: token }" />
+      <NavLink description="Go for it !" name="event" :params="{ token: token }"/>
     </div>
 
   </div>