adding rooms

frontend/src/App.vue

@@ -3,6 +3,7 @@ import { onBeforeMount, ref } from 'vue';
 import Login from './components/Login.vue';
 import HomePage from './components/HomePage.vue';
 import AddTimeSlot from './components/AddTimeSlot.vue';
+import AddRoom from './components/AddRoom.vue';
 
 const page = ref<number>(0);
 
@@ -17,5 +18,6 @@ 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--"/>
+    <AddTimeSlot v-if="page == 2" @go-home="page--" @add-room="page++"/>
+    <AddRoom v-if="page == 3" @go-back="page--"/>
 </template>

frontend/src/components/AddRoom.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+
+const emit = defineEmits(['goBack']);
+
+const roomName = ref<string>();
+
+async function addRoom(e: SubmitEvent) {
+    e.preventDefault();
+    let uid = await cookieStore.get("userId");
+    const res = await fetch("http://localhost:3000/addRoom", {
+        method: "POST",
+        body: JSON.stringify({ roomName: roomName.value, userid: uid?.value }),
+        headers: new Headers({'content-type': 'application/json'})
+    });
+    if (res.ok) {
+        emit('goBack');
+    }
+}
+</script>
+<template>
+    <h1>Add Room</h1>
+    <button @click="$emit('goBack')">Go Back</button>
+    <form @submit="addRoom">
+        <label for="name">Room Name</label><br>
+        <input type="text" v-model="roomName"/><br>
+        <button type="submit">Add</button><br>
+    </form>
+</template>

frontend/src/components/AddTimeSlot.vue

@@ -1,7 +1,45 @@
 <script setup lang="ts">
-defineEmits(['goHome']);
+import { onBeforeMount, ref } from 'vue';
+
+const emit = defineEmits(['goHome', 'addRoom']);
+const rooms = ref();
+
+const room = ref();
+const startTime = ref();
+const endTime = ref();
+
+onBeforeMount(async () => {
+    let res = await fetch("http://localhost:3000/getRooms", {
+        method: "GET"
+    });
+    rooms.value = await res.json();
+});
+
+async function addTimeSlot(e: SubmitEvent) {
+    e.preventDefault();
+    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 }),
+        headers: new Headers({'content-type': 'application/json'})
+    });
+    emit('goHome');
+}
+
 </script>
 <template>
-    <p>AddTimeSlot</p>
-    <button @click="$emit('goHome')">Done</button>
+    <h1>AddTimeSlot</h1>
+    <button @click="$emit('goHome')">go Back</button>
+    <form @submit="addTimeSlot">
+        <label for="room">Room</label> <br>
+        <select id="room" v-model="room">
+            <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>
+        <button type="submit">Add</button>
+    </form>
 </template>

frontend/src/components/HomePage.vue

@@ -6,8 +6,7 @@ const rooms = ref();
 defineEmits(['addSlot']);
 onBeforeMount(async () => {
     const res = await fetch("http://localhost:3000/currentRooms", {
-        method: "GET",
-        headers: new Headers({'content-type': 'application/json'})
+        method: "GET"
     });
     rooms.value = await res.json();
 });
@@ -19,6 +18,7 @@ onBeforeMount(async () => {
     </header>
     <article v-if="rooms">
         <h2>Free Rooms:</h2>
+        {{ rooms.records }}
         <p v-if="rooms.records.length == 0">No free rooms right now</p>
         <ul v-for="(slot, index) in rooms.records">
             <li :id="index">{{ slot }}</li>

frontend/src/components/Login.vue

@@ -17,6 +17,8 @@ async function login(e: SubmitEvent) {
     });
     if (res.ok) {
         cookieStore.set("loggedIn", "true");
+        let uid = await res.json();
+        cookieStore.set("userId", uid.uid.Id);
         emit('nextPage');
     } else {
         text.value = await res.text();
@@ -33,6 +35,8 @@ async function signup(e: Event) {
     });
     if (res.ok) {
         cookieStore.set("loggedIn", "true");
+        let uid = await res.json();
+        cookieStore.set("userId", uid.uid.Id);
         emit('nextPage');
     } else {
         text.value = await res.text();
@@ -42,6 +46,7 @@ async function signup(e: Event) {
 </script>
 
 <template>
+    <h1>Login</h1>
     <form @submit="login">
         <label for="email">Email</label> <br>
         <input type="email" id="email" v-model="email"/> <br>