W.I.P EventView

front/src/components/Calendar.vue

@@ -4,7 +4,6 @@
   import {ref, onMounted, watch} from "vue";
   import { datePickerStore } from "@/stores/CalendarStore.ts";
   import { Calendar } from "@/models/Calendar.ts";
-  import router from "@/router";
 
   const calendar = new Calendar();
   const datePicker = datePickerStore();

front/src/components/ErrorBlock.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+import TextBlock from "@/components/TextBlock.vue";
+</script>
+
+<template>
+  <TextBlock>
+    <slot></slot>
+  </TextBlock>
+</template>
+
+<style scoped>
+.text-block {
+  border-left: solid 4px red;
+}
+</style>

front/src/models/Attendee.ts

@@ -10,16 +10,16 @@ export class Attendee {
     this.dates = dates;
   }
 
-  public getName(){
+  public getName() : string {
     return this.name;
   }
 
-  public getDate() : TimeStamp[]{
+  public getDates() : TimeStamp[] {
     return this.dates;
   }
 }
 
 export interface AttendeeState {
-  name : String
+  name : string
   dates : TimeStampState[]
 }

front/src/models/Event.ts

@@ -1,15 +1,18 @@
 import type {Attendee, AttendeeState} from "@/models/Attendee.ts";
+import type {TimeStamp} from "@/models/TimeStamp.ts";
 
 export class Event {
 
   private name: string;
   private token: string;
   private attendees: Attendee[];
+  private groups : Map<number, string[]>;
 
   public constructor(name: string, token: string, attendees: Attendee[]) {
     this.name = name;
     this.token = token;
     this.attendees = attendees;
+    this.groups = this.byDates();
   }
 
   public getName() : string {
@@ -24,6 +27,25 @@ export class Event {
     return this.attendees;
   }
 
+  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 {

front/src/stores/EventStore.ts

@@ -1,10 +1,10 @@
 import {defineStore} from 'pinia'
 import {EventRequests} from "@/requests/EventRequests.ts";
 import type {EventDto} from "@/dto/EventDto.ts";
-import type {EventState} from "@/models/Event.ts";
+import {Event, type EventState} from "@/models/Event.ts";
 import type {AttendeeDto} from "@/dto/AttendeeDto.ts";
-import type {AttendeeState} from "@/models/Attendee.ts";
+import {Attendee, type AttendeeState} from "@/models/Attendee.ts";
-import type {TimeStamp, TimeStampState} from "@/models/TimeStamp.ts";
+import {TimeStamp, type TimeStampState} from "@/models/TimeStamp.ts";
 import type {TimeStampDto} from "@/dto/TimeStampDto.ts";
 
 const requests = new EventRequests();
@@ -19,7 +19,12 @@ export const eventStore = defineStore('eventStore', {
       }};
   },
   getters : {
-    getEvent()  {
+    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);
     }
   },
   actions: {
@@ -30,14 +35,15 @@ export const eventStore = defineStore('eventStore', {
           this.event.name = data.name;
           this.event.token = data.token;
 
-          this.event.attendees = data.attendees.map((p: AttendeeDto) => ({
+          this.event.attendees = data.attendees.map((a: AttendeeDto) => ({
-            name: p.name,
+            name: a.name,
-            dates: p.dates.map((date: TimeStampDto) => ({
+            dates: a.dates.map((date: TimeStampDto) => ({
               value: date.timestamp
             })) as TimeStampState[]
           }));
         } catch (error) {
-          console.error("Unable to fetch. " + error);
+          console.error(error);
+          throw new Error("Unable to fetch.");
         }
     },
   },

front/src/utils/CutomMap.ts

@@ -0,0 +1,8 @@
+/**
+ * I hate JavaScript and TypeScript with every single inch of my body
+ */
+export class CustomMap<K, V> extends Map<K, V> {
+  has(obj: K): boolean {
+    return false;
+  }
+}

front/src/views/ErrorView.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 
 import TextBlock from "@/components/TextBlock.vue";
+import ErrorBlock from "@/components/ErrorBlock.vue";
 </script>
 
 <template>
   <div class="container">
-    <TextBlock>
+    <ErrorBlock>
       <h1>Oopsie</h1>
       <p>Something went wrong</p>
-    </TextBlock>
+    </ErrorBlock>
   </div>
 
 </template>

front/src/views/EventView.vue

@@ -1,25 +1,30 @@
 <script setup lang="ts">
 import {eventStore} from "@/stores/EventStore.ts";
-import {onMounted} from "vue";
+import {onBeforeMount, ref} from "vue";
 import {useRoute} from "vue-router";
-import {DateHelper} from "../helpers/DateHelper.ts";
+import {DateHelper} from "@/helpers/DateHelper.ts";
+import {Event} from "@/models/Event.ts";
+import ErrorBlock from "@/components/ErrorBlock.vue";
 
 const route = useRoute();
 const store = eventStore();
 const token = extractToken();
+let event = ref<Event | undefined>();
 
-onMounted(async () => {
+onBeforeMount(async () => {
+  try{
     await store.fetch(token);
+    event.value = store.getEvent;
+  } catch (error){
+    console.error(error);
+    event.value = undefined;
+  }
 })
 
 function extractToken() : string {
   return Array.isArray(route.params.token) ? route.params.token[0] : route.params.token;
 }
 
-function attendeesByDates(){
-
-}
-
 function formatDate(timestamp : number) : String{
   let date = DateHelper.toDate(timestamp)
   return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
@@ -28,17 +33,31 @@ function formatDate(timestamp : number) : String{
 </script>
 
 <template>
+  <div class="container">
 
-  Name : {{ store.event.name }} <br>
+    <div v-if="!event" class="error-block">
-  attendees :
+      <ErrorBlock>
-  <div v-for="(p) in store.event.attendees" >
+        <h1>This event does not exist</h1>
-    {{ p.name  }}
+      </ErrorBlock>
-    <div v-for="(d) in p.dates">
+    </div>
-      {{ formatDate(d.value) }}
+
+    <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>
+        =================
       </div>
     </div>
+
+  </div>
+
 </template>
 
 <style scoped>
-
+.error-block{
+  width: 100%;
+}
 </style>