✨ Display times on the timetable

server/api/index.js

@@ -21,6 +21,7 @@ export async function getTimetable(req, res) {
       updatedAt: "desc",
     },
   });
+  const times = await prisma.time.findMany();
   if (!timetable) {
     res.status(404).send({
       success: false,
@@ -33,6 +34,7 @@ export async function getTimetable(req, res) {
     trusted: timetable.trusted,
     source: timetable.source,
     data: timetable.data,
+    times: times,
   });
 }
 

server/prisma/schema.prisma

@@ -65,6 +65,12 @@ model Class {
   regex String
 }
 
+model Time {
+  lesson Int      @unique
+  start  DateTime
+  end    DateTime
+}
+
 model Session {
   token      String   @id @unique @default(uuid())
   createdAt  DateTime @default(now())

src/components/timetable-list.vue

@@ -50,6 +50,21 @@ function isCancelled(substitution) {
   if (!substitution) return false;
   return substitution.type == "cancellation";
 }
+
+function getTime(index) {
+  const times = {
+    ...(timetable.value.times.find((e) => e.lesson == index + 1) || {}),
+  };
+  console.log(times);
+  Object.keys(times).forEach((e) => {
+    if (e == "lesson") return;
+    const date = new Date(times[e]);
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    times[e] = `${hours}:${minutes}`;
+  });
+  return times;
+}
 </script>
 <template>
   <div class="container">
@@ -94,6 +109,10 @@ function isCancelled(substitution) {
             </span>
           </div>
         </div>
+        <div class="times" v-if="getTime(index).start">
+          <span>{{ getTime(index).start }} -</span>
+          <span>{{ getTime(index).end }}</span>
+        </div>
       </div>
     </template>
   </div>
@@ -128,7 +147,7 @@ function isCancelled(substitution) {
   min-height: 50px;
   border-radius: 11px;
   padding: 15px;
-  grid-template-columns: max-content auto;
+  grid-template-columns: max-content auto auto;
   gap: 15px;
 }
 
@@ -153,4 +172,14 @@ function isCancelled(substitution) {
   font-weight: 200;
   font-size: 14px;
 }
+
+.times {
+  margin-left: auto;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  align-items: center;
+  color: var(--text-color);
+  opacity: 0.5;
+  font-weight: 300;
+}
 </style>