Events are now fetch from the API

front/.env.development

@@ -0,0 +1 @@
+VITE_API_URL = http://127.0.0.1:5001/

front/.env.production

@@ -0,0 +1 @@
+VITE_API_URL =

front/src/components/Button.vue

@@ -2,12 +2,13 @@
 
   const props = defineProps<{
     description: string;
+    action?: Function;
   }>();
 
 </script>
 
 <template>
-  <div class="button">{{ description }}</div>
+  <div @click="action ? action : null" class="button">{{ description }}</div>
 </template>
 
 <style scoped>

front/src/components/InputField.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 
+let value;
+const emit = defineEmits(['update:value']);
+
+// Method to handle the update
+const updateValue = (event : any) => {
+  emit('update:value', event.target.value);
+};
+
 </script>
 
 <template>
-    <input class="input-field" />
+    <input class="input-field" :value="value" @input="updateValue" />
 </template>
 
 <style scoped>

front/src/config/ApiConfig.ts

@@ -0,0 +1,8 @@
+export const API_PATHS = {
+  BASE_URL: import.meta.env.VITE_API_URL,
+  ENDPOINTS: {
+    EVENTS: '/event/',
+    CREATE: '/create/',
+    JOIN: '/join/'
+  }
+};

front/src/models/Event.ts

@@ -0,0 +1,32 @@
+export class Event {
+
+  private name: string;
+  private token: string;
+  private participants: Participant[];
+
+  public constructor(name: string, token : string, participants: Participant[]) {
+    this.name = name;
+    this.participants = participants;
+  }
+
+}
+
+/*
+
+{
+    "name": "Event for test 2",
+    "participants": [
+        {
+            "name": "tony",
+            "dates": [
+                {
+                    "timestamp": 0
+                },
+                {
+                    "timestamp": 2
+                }
+            ]
+        }
+    ]
+}
+ */

front/src/models/Participant.ts

@@ -0,0 +1,13 @@
+import type {TimeStamp} from "@/models/TimeStamp.ts";
+
+export class Participant {
+
+  private name: string;
+  private dates: TimeStamp[];
+
+  public constructor(name: string, dates: TimeStamp[]) {
+    this.name = name;
+    this.dates = dates;
+  }
+
+}

front/src/requests/EventRequests.ts

@@ -0,0 +1,33 @@
+import { API_PATHS } from "@/config/ApiConfig.ts";
+
+export class EventRequests {
+
+  private readonly baseUrl: string;
+  private readonly endpoints;
+
+  public constructor() {
+    this.baseUrl = API_PATHS.BASE_URL;
+    this.endpoints = API_PATHS.ENDPOINTS;
+  }
+
+  private formatUrl(parts:string[]) : string {
+    let res = "";
+    console.log(parts)
+    parts.forEach((value) => {
+      console.log(value)
+      res += value.trim();
+    })
+    return res.replace(/(http|https?:\/\/[^\/]+)\/\//, '$1/');
+  }
+
+  public queryEvent(token : string) {
+
+    let url = this.formatUrl([this.baseUrl, this.endpoints.EVENTS, token]);
+    console.log(url);
+    fetch(url)
+      .then(response => response.json())
+      .then(data => console.log(data))
+      .catch(error => console.error(error));
+
+  }
+}

front/src/stores/EventStore.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import {EventRequests} from "@/requests/EventRequests.ts";
+
+const requests = new EventRequests();
+
+export const eventStore = defineStore('datePicker', {
+  state: () => {
+    return {
+      event: Event
+    }
+  },
+
+  actions: {
+    fetch: (token : string) => {
+      requests.queryEvent(token);
+    }
+  },
+})

front/src/views/JoinView.vue

@@ -3,6 +3,15 @@
 import TextBlock from "@/components/TextBlock.vue";
 import Button from "@/components/Button.vue";
 import InputField from "@/components/InputField.vue";
+import { eventStore } from "@/stores/EventStore.ts";
+
+let token : string = '';
+const event = eventStore();
+
+function fetch(){
+  event.fetch(token);
+}
+
 </script>
 
 <template>
@@ -14,8 +23,8 @@ import InputField from "@/components/InputField.vue";
 
     <div class="actions-group">
       <h1>Event <span class="colored-text">code</span></h1>
-      <InputField/>
-      <Button description="Go for it !"/>
+      <InputField @update:value="(newValue) => {token = newValue}" />
+      <Button description="Go for it !" @click="fetch"/>
     </div>
 
   </div>