✨ Display times on the timetable

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>