add hour indicator

timetable/static/bundled/timetable/generator-index.ts

@@ -82,6 +82,7 @@ document.addEventListener("alpine:init", () => {
     displayedWeekdays: [] as WeekDay[],
     courses: [] as TimetableSlot[],
     startSlot: 0,
+    endSlot: 0,
     table: {
       height: 0,
       width: 0,
@@ -150,6 +151,25 @@ document.addEventListener("alpine:init", () => {
       };
     },
 
+    getHours(): [string, object][] {
+      let hour: number = Number.parseInt(
+        this.courses
+          .map((c: TimetableSlot) => c.startHour)
+          .reduce((res: string, hour: string) => (hour < res ? hour : res), "24:00")
+          .split(":")[0],
+      );
+      const res: [string, object][] = [];
+      for (let i = 0; i <= this.endSlot - this.startSlot; i += 60 / MINUTES_PER_SLOT) {
+        res.push([`${hour}:00`, { top: `${i * SLOT_HEIGHT}px` }]);
+        hour += 1;
+      }
+      return res;
+    },
+
+    getWidth() {
+      return this.displayedWeekdays.length * SLOT_WIDTH + 20;
+    },
+
     async savePng() {
       const elem = document.getElementById("timetable");
       const img = (await html2canvas(elem)).toDataURL();

timetable/static/timetable/css/generator.scss

@@ -1,10 +1,17 @@
+@import "core/static/core/colors";
+
 #timetable {
+  --hour-side-width: 60px;
+
   display: block;
   margin: 2em auto;
   .header {
-    background-color: white;
+    background-color: $white-color;
+    font-weight: bold;
     box-shadow: none;
-    width: 100%;
+    width: calc(100% - var(--hour-side-width) - 10px);
+    margin-left: var(--hour-side-width);
+    padding-left: 0;
     display: flex;
     flex-direction: row;
     gap: 0;
@@ -15,7 +22,32 @@
   }
   .content {
     position: relative;
+  }
+  .hours {
+    position: absolute;
+    width: 40px;
+    left: 0;
+    top: -.5em;
+
+    .hour {
+      position: absolute;
+
+      .hour-bar {
+        content: "";
+        position: absolute;
+        height: 1px;
+        background: lightgray;
+        top: 50%;
+        left: 100%;
+        margin-left: 10px;
+      }
+    }
+  }
+  .courses {
+    position: absolute;
     text-align: center;
+    top: 0;
+    left: var(--hour-side-width);
 
     .slot {
       background-color: cadetblue;

timetable/templates/timetable/generator.jinja

@@ -28,7 +28,7 @@
     <div
       id="timetable"
       x-show="table.height > 0 && table.width > 0"
-      :style="{width: `${table.width}px`, height: `${table.height+40}px`}"
+      :style="{width: `${table.width+80}px`, height: `${table.height+40}px`}"
     >
       <div class="header">
         <template x-for="weekday in displayedWeekdays">
@@ -36,6 +36,15 @@
         </template>
       </div>
       <div class="content">
+        <div class="hours" :height="(endSlot - endSlot%4) - (startSlot - startSlot%4)">
+          <template x-for="[hour, style] in getHours()">
+            <div class="hour" :style="style">
+              <div x-text="hour"></div>
+              <div class="hour-bar" :style="{width: `${getWidth()}px`}"></div>
+            </div>
+          </template>
+        </div>
+        <div class="courses">
           <template x-for="course in courses">
             <div class="slot" :style="getStyle(course)">
               <span class="course-type" x-text="course.courseType"></span>
@@ -47,6 +56,7 @@
           </template>
         </div>
       </div>
+    </div>
     <button
       class="margin-bottom btn btn-blue"
       @click="savePng"