time based on periods rather than timestamps

frontend/src/App.vue

@@ -17,7 +17,7 @@ onBeforeMount(async () => {
 
 <template>
     <Login v-if="page == 0" @next-page="page++"/>
-    <HomePage v-if="page == 1" @add-slot="page++"/>
-    <AddTimeSlot v-if="page == 2" @go-home="page--" @add-room="page++"/>
-    <AddRoom v-if="page == 3" @go-back="page--"/>
+    <HomePage v-else-if="page == 1" @add-slot="page++"/>
+    <AddTimeSlot v-else-if="page == 2" @go-home="page--" @add-room="page++"/>
+    <AddRoom v-else-if="page == 3" @go-back="page--"/>
 </template>

frontend/src/components/AddTimeSlot.vue

@@ -5,8 +5,9 @@ const emit = defineEmits(['goHome', 'addRoom']);
 const rooms = ref();
 
 const room = ref();
-const startTime = ref();
-const endTime = ref();
+const weekNumber = ref<number>(1);
+const day = ref<number>(1);
+const period = ref<number>(1);
 
 onBeforeMount(async () => {
     let res = await fetch("http://localhost:3000/getRooms", {
@@ -20,7 +21,7 @@ async function addTimeSlot(e: SubmitEvent) {
     let uid = await cookieStore.get("userId");
     await fetch("http://localhost:3000/addTimeSlot", {
         method: "POST",
-        body: JSON.stringify({ roomid: room.value.Id, userid: uid?.value, startTime: startTime.value, endTime: endTime.value }),
+        body: JSON.stringify({ roomid: room.value.Id, userid: uid?.value, day: (day.value * weekNumber.value), period: period.value }),
         headers: new Headers({'content-type': 'application/json'})
     });
     emit('goHome');
@@ -36,10 +37,12 @@ async function addTimeSlot(e: SubmitEvent) {
             <option v-for="item in rooms.records" :value="item">{{ item.RoomName }}</option>
         </select><br>
         <button @click="$emit('addRoom')">Add room?</button><br>
-        <label for="start" >Start Time</label><br>
-        <input type="datetime-local" id="start" v-model="startTime" /><br>
-        <label for="end">End Time</label><br>
-        <input type="datetime-local" id="end" v-model="endTime" /><br>
+        <label for="week">Week number</label><br>
+        <input type="number" id="week" v-model="weekNumber" min="1" max="2"/><br>
+        <label for="day">Day</label><br>
+        <input type="number" id="day" v-model="day" min="1" max="5"/><br>
+        <label for="period">Period</label><br>
+        <input type="number" id="period" v-model="period" min="1" max="5"/><br>
         <button type="submit">Add</button>
     </form>
 </template>

frontend/src/components/HomePage.vue

@@ -2,25 +2,48 @@
 import { onBeforeMount, ref } from 'vue';
 
 const rooms = ref();
+const showRooms = ref<boolean>(false);
+const weekNumber = ref<number>(1);
+
+async function getData() {
+    showRooms.value = false;
+    const today = new Date();
+    if (today.getDay() == 0 || today.getDay() == 6) {
+        return;
+    }
+    const day = today.getDay() * weekNumber.value;
+    const res = await fetch("http://localhost:3000/currentRooms", {
+        method: "POST",
+        body: JSON.stringify({day: day}),
+        headers: new Headers({'content-type': 'application/json'})
+    });
+    if (res.ok) {
+        rooms.value = await res.json();
+        showRooms.value = true;
+        return;
+    }
+    console.log(await res.text());
+}
 
 defineEmits(['addSlot']);
 onBeforeMount(async () => {
-    const res = await fetch("http://localhost:3000/currentRooms", {
-        method: "GET"
-    });
-    rooms.value = await res.json();
+    await getData();
 });
 </script>
 <template>
     <header>
         <h1>What's free in my free?</h1>
-        <button @click="$emit('addSlot')">Add new slot</button>
+        <button @click="$emit('addSlot')">Add new slot</button> <br>
+        <select v-model="weekNumber" @change="getData">
+            <option :value="1">1</option>
+            <option :value="2">2</option>
+        </select>
     </header>
-    <article v-if="rooms">
+    <article>
         <h2>Free Rooms:</h2>
-        <p v-if="rooms.records.length == 0">No free rooms right now</p>
-        <ul v-for="slot in rooms.records">
-            <li>Room: {{ slot.RoomName }}, from {{ slot.TimeStart.toString().split("T")[1] }} til {{ slot.TimeEnd.toString().split("T")[1] }}</li>
+        <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>
         </ul>
     </article>
 </template>