Support concurrent lessons in mini timetables

aleksis/apps/lesrooster/frontend/components/timetable_management/timetables/MiniTimeTable.vue

@@ -64,15 +64,40 @@ export default defineComponent({
     lessons() {
       return [];
     },
+    lessonsPerSlot() {
+      let weekdayPeriodSlots = Object.fromEntries(
+        this.weekdays.map((weekday) => [
+          weekday,
+          Object.fromEntries(this.periods.map((period) => [period, []])),
+        ]),
+      );
+
+      this.lessons?.forEach((lesson) => {
+        const weekdayStart = lesson.slotStart.weekday;
+        const weekdayEnd = lesson.slotEnd.weekday;
+        const periodStart = lesson.slotStart.period;
+        const periodEnd = lesson.slotEnd.period;
+
+        // If lesson start and end is on the same day, just add it in between the periods
+        if (weekdayStart === weekdayEnd) {
+          this.periods.map((period) => {
+            if (period <= periodEnd && period >= periodStart) {
+              weekdayPeriodSlots[weekdayStart][period].push(lesson);
+            }
+          });
+        } else {
+          // this is more complicated.
+          // As it is currently not possible to create timetables like this, we will just ignore it
+        }
+      });
+
+      return weekdayPeriodSlots;
+    },
   },
   methods: {
-    styleForLesson(lesson) {
+    styleForWeekdayAndPeriod(weekday, period) {
       return {
-        gridArea:
-          `period-${lesson.slotStart.period} / ${lesson.slotStart.weekday} / ` +
-          `span ${lesson.slotEnd.period - lesson.slotStart.period + 1} / ${
-            lesson.slotEnd.weekday
-          }`,
+        gridArea: `period-${period} / ${weekday} / ` + `span 1 / ${weekday}`,
       };
     },
   },
@@ -100,12 +125,20 @@ export default defineComponent({
     >
       <v-card-text>{{ $t("weekdays." + weekday) }}</v-card-text>
     </v-card>
-    <lesson-card
-      v-for="lesson in lessons"
-      :lesson="lesson"
-      :style="styleForLesson(lesson)"
-      :key="lesson.id"
-    />
+    <template v-for="weekday in weekdays">
+      <div
+        v-for="period in periods"
+        :key="'lesson-container-' + weekday + '-' + period"
+        :style="styleForWeekdayAndPeriod(weekday, period)"
+        class="d-flex flex-column gap-small"
+      >
+        <lesson-card
+          v-for="lesson in lessonsPerSlot[weekday][period]"
+          :lesson="lesson"
+          :key="lesson.id"
+        />
+      </div>
+    </template>
 
     <message-box type="info" v-if="!lessons || lessons.length === 0">
       {{ $t("lesrooster.timetable_management.no_lessons") }}
@@ -127,4 +160,8 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 }
+
+.gap-small {
+  gap: 0.4em;
+}
 </style>