update to user feedback

frontend/src/components/AddRoom.vue

@@ -11,9 +11,10 @@ const roomName = ref<string>();
 async function addRoom(e: SubmitEvent) {
     e.preventDefault();
     let uid = await $cookies.get("userId");
+    console.log(uid);
     const res = await fetch("/addRoom", {
         method: "POST",
-        body: JSON.stringify({ roomName: roomName.value, userid: uid?.value }),
+        body: JSON.stringify({ roomName: roomName.value, userid: uid }),
         headers: new Headers({'content-type': 'application/json'})
     });
     if (res.ok) {

frontend/src/components/AddTimeSlot.vue

@@ -16,6 +16,11 @@ onBeforeMount(async () => {
         method: "GET"
     });
     rooms.value = await res.json();
+    const date = new Date();
+    day.value = date.getDay();
+    res = await fetch("getPeriod", { method: "GET" });
+    const json = await res.json();
+    period.value = json.period;
 });
 
 async function addTimeSlot(e: SubmitEvent) {
@@ -23,7 +28,7 @@ async function addTimeSlot(e: SubmitEvent) {
     let uid = await $cookies.get("userId");
     await fetch("/addTimeSlot", {
         method: "POST",
-        body: JSON.stringify({ roomid: room.value.Id, userid: uid?.value, day: (day.value * weekNumber.value), period: period.value }),
+        body: JSON.stringify({ roomid: room.value.Id, userid: uid, day: (day.value * weekNumber.value), period: period.value }),
         headers: new Headers({'content-type': 'application/json'})
     });
     emit('goHome');

frontend/src/components/HomePage.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { onBeforeMount, ref } from 'vue';
+import { inject, onBeforeMount, ref } from 'vue';
+import type { VueCookies } from 'vue-cookies';
+
+type timeSlot_t = {Id: number, Period: number, Day: number, Room: number, RoomName: string};
+
+const $cookies = inject<VueCookies>("$cookies") as VueCookies;
 
 const rooms = ref();
 const showRooms = ref<boolean>(false);
@@ -8,9 +13,9 @@ const weekNumber = ref<number>(1);
 async function getData() {
     showRooms.value = false;
     const today = new Date();
-    if (today.getDay() == 0 || today.getDay() == 6) {
-        return;
-    }
+    // if (today.getDay() == 0 || today.getDay() == 6) {
+    //     return;
+    // }
     const day = today.getDay() * weekNumber.value;
     const res = await fetch("/currentRooms", {
         method: "POST",
@@ -18,11 +23,28 @@ async function getData() {
         headers: new Headers({'content-type': 'application/json'})
     });
     if (res.ok) {
-        rooms.value = await res.json();
-        showRooms.value = true;
-        return;
+        let json = await res.json();
+        if (json.records.length == 0) {
+            showRooms.value = false;
+        } else {
+            rooms.value = json;
+            showRooms.value = true;
+        }
+    } 
+}
+
+async function deleteTimeSlot(timeSlot: timeSlot_t) {
+    const uid = await $cookies.get("userId");
+    const res = await fetch("/removeTimeSlot", {
+        method: "POST",
+        body: JSON.stringify({ Id: timeSlot.Id, userId: uid }),
+        headers: new Headers({ "content-type": "application/json" })
+    });
+    if (res.ok) {
+        await getData();
+    } else {
+        console.log(await res.text());
     }
-    console.log(await res.text());
 }
 
 defineEmits(['addSlot']);
@@ -34,7 +56,8 @@ onBeforeMount(async () => {
     <header>
         <h1>What's free in my free?</h1>
         <button @click="$emit('addSlot')">Add new slot</button> <br>
-        <select v-model="weekNumber" @change="getData">
+        <label for="weekNumber">Week Number</label>
+        <select v-model="weekNumber" @change="getData" id="weekNumber">
             <option :value="1">1</option>
             <option :value="2">2</option>
         </select>
@@ -43,7 +66,7 @@ onBeforeMount(async () => {
         <h2>Free Rooms:</h2>
         <p v-if="!showRooms">No free rooms right now</p>
         <ul v-else v-for="slot in rooms.records">
-            <li>Room: {{ slot.RoomName }}, in {{ slot.Period }}</li>
+            <li>Room: {{ slot.RoomName }}, in Period {{ slot.Period }}, <button type="button" @click="deleteTimeSlot(slot)">X</button></li>
         </ul>
     </article>
 </template>