Merge pull request #117 from filips123/show-dates-in-timetable

Add setting for showing dates on desktop timetable
filips123 · Nov 17, 2024 · b990d69 · b990d69
2 parents b65e4b3 + bfd5528
commit b990d69
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/website/src/components/TimetableDisplay.vue b/website/src/components/TimetableDisplay.vue
@@ -8,8 +8,8 @@ import TimetableLesson from '@/components/TimetableLesson.vue'
 import { useSessionStore } from '@/stores/session'
 import { EntityType, useSettingsStore } from '@/stores/settings'
 import { type MergedLesson, useTimetableStore } from '@/stores/timetable'
-import { getCurrentDay, getIsWeekend } from '@/utils/days'
-import { localizedWeekdays } from '@/utils/localization'
+import { getCurrentDate, getCurrentDay, getIsWeekend, getWeekdays } from '@/utils/days'
+import { localizeDate, localizeDay } from '@/utils/localization'
 import { getCurrentTime, lessonTimes } from '@/utils/times'
 
 const { targetDay } = defineProps<{ targetDay?: number }>()
@@ -23,7 +23,7 @@ const detailsProps = defineModel<{ day: number; time: number; lessons: MergedLes
 const { currentEntityType } = storeToRefs(useSessionStore())
 const { lessons } = storeToRefs(useTimetableStore())
 
-const { showHoursInTimetable, highlightCurrentTime, enableLessonDetails } =
+const { showDatesInTimetable, showHoursInTimetable, highlightCurrentTime, enableLessonDetails } =
   storeToRefs(useSettingsStore())
 
 const isWeekend = ref(getIsWeekend())
@@ -81,14 +81,19 @@ function filterForTargetDay(lessonsTime: MergedLesson[][]) {
 <template>
   <v-table-main>
     <thead v-if="!daySpecific">
-      <tr class="bg-surface-subtle text-h6">
-        <th :colspan="!daySpecific && showHoursInTimetable ? 2 : 1">Ura</th>
+      <tr class="bg-surface-subtle">
+        <th :colspan="showHoursInTimetable ? 2 : 1" class="text-h6">Ura</th>
         <th
-          v-for="(weekday, index) in localizedWeekdays"
+          v-for="(date, index) in getWeekdays(getCurrentDate())"
           :key="index"
-          :class="{ 'bg-surface-medium': index === currentDay && !isWeekend }"
-          v-text="weekday"
-        />
+          :class="{
+            'bg-surface-medium': index === currentDay && !isWeekend,
+            'py-1': showDatesInTimetable,
+          }"
+        >
+          <span class="text-h6">{{ localizeDay(date) }}</span>
+          <div v-if="showDatesInTimetable" class="pb-1 opacity-70">{{ localizeDate(date) }}</div>
+        </th>
       </tr>
     </thead>
 

diff --git a/website/src/stores/settings.ts b/website/src/stores/settings.ts
@@ -51,6 +51,7 @@ export const useSettingsStore = defineStore('settings', {
 
     showSubstitutions: true,
     showLinksInTimetable: true,
+    showDatesInTimetable: true,
     showHoursInTimetable: true,
     highlightCurrentTime: true,
     enableLessonDetails: true,

diff --git a/website/src/views/ViewSettings.vue b/website/src/views/ViewSettings.vue
@@ -41,6 +41,7 @@ const {
   lunchType,
   showSubstitutions,
   showLinksInTimetable,
+  showDatesInTimetable,
   showHoursInTimetable,
   highlightCurrentTime,
   enableLessonDetails,
@@ -99,6 +100,7 @@ async function updateApp() {
 
     <SettingsBaseSwitch v-model="showSubstitutions" label="Prikaži nadomeščanja" />
     <SettingsBaseSwitch v-model="showLinksInTimetable" label="Prikaži povezave v urniku" />
+    <SettingsBaseSwitch v-model="showDatesInTimetable" label="Prikaži datume v urniku" />
     <SettingsBaseSwitch v-model="showHoursInTimetable" label="Prikaži ure v urniku" />
     <SettingsBaseSwitch v-model="highlightCurrentTime" label="Označi trenutno uro" />
     <SettingsBaseSwitch v-model="enableLessonDetails" label="Klikni za podrobnosti" />