listing slots within current hour

backend/index.js

@@ -4,6 +4,11 @@ import bodyParser from "body-parser";
 import bcrypt from "bcrypt";
 import Database from "better-sqlite3";
 
+Date.prototype.addHours= function(h){
+this.setTime(this.getTime() + (h*60*60*1000));
+  return this;
+}
+
 const app = e();
 const port = 3000;
 const db = new Database("./database.db");
@@ -20,7 +25,8 @@ app.get('/currentRooms', (req, res) => {
     // req has no data
     // res has all room at current time
     console.log("currentRooms");
-    let stmt = db.prepare(`SELECT * FROM TimeSlots`);
+    const today = new Date();
+    let stmt = db.prepare(`SELECT * FROM TimeSlots INNER JOIN Rooms ON Rooms.Id=TimeSlots.Room WHERE TimeEnd BETWEEN '${today.toISOString()}' AND '${today.addHours(1).toISOString()}';`);
     let records = stmt.all();
     res.status(200).json({records: records});
 });

frontend/src/components/HomePage.vue

@@ -18,10 +18,9 @@ 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>
+        <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>
         </ul>
     </article>
 </template>