Add time ranges to period cards

aleksis/apps/lesrooster/frontend/components/timetable_management/TimetableManagement.vue

@@ -46,6 +46,7 @@ export default defineComponent({
     return {
       weekdays: [],
       periods: [],
+      slotsByPeriods: [],
       internalTimeGrid: null,
       courseSearch: null,
       lessonsUsed: {},
@@ -135,6 +136,12 @@ export default defineComponent({
               .map((slot) => slot.period)
           )
         );
+        this.slotsByPeriods = this.periods.map((period) => ({
+          period: period,
+          slots: items.filter(
+            (slot) => slot.model === "Slot" && slot.period === period
+          ),
+        }));
       },
     },
     timeGrids: {
@@ -721,6 +728,38 @@ export default defineComponent({
         item.group.name,
       ]);
     },
+    timeRangesByWeekdays(period) {
+      return period.slots
+        .map((slot) => ({ timeStart: slot.timeStart, timeEnd: slot.timeEnd }))
+        .filter(
+          (value, index, self) =>
+            index ===
+            self.findIndex(
+              (timeRange) =>
+                timeRange.timeStart === value.timeStart &&
+                timeRange.timeEnd === value.timeEnd
+            )
+        )
+        .map((timeRange) => ({
+          ...timeRange,
+          weekdays: period.slots
+            .filter(
+              (slot) =>
+                slot.timeStart === timeRange.timeStart &&
+                slot.timeEnd === timeRange.timeEnd
+            )
+            .map((slot) => slot.weekday),
+        }));
+    },
+    getTimeRangesByWeekdaysString(timeRange) {
+      return `${
+        timeRange.weekdays.length === this.weekdays.length
+          ? ""
+          : timeRange.weekdays
+              .map((weekday) => this.$t("weekdays_short." + weekday))
+              .join(", ") + ": "
+      }${timeRange.timeStart}-${timeRange.timeEnd}`;
+    },
   },
 });
 </script>
@@ -792,6 +831,18 @@ export default defineComponent({
             class="d-flex justify-center align-center"
           >
             <v-card-title>{{ period }}</v-card-title>
+            <v-card-text>
+              <div
+                class="text-caption"
+                v-for="timeRange in timeRangesByWeekdays(
+                  slotsByPeriods.find(
+                    (periodWithSlots) => periodWithSlots.period === period
+                  )
+                )"
+              >
+                {{ getTimeRangesByWeekdaysString(timeRange) }}
+              </div>
+            </v-card-text>
           </v-card>
         </div>
         <drag-grid