From 2a3f4ca1ef515419444fceba0cd0f1efab1b530a Mon Sep 17 00:00:00 2001 From: Spythere Date: Wed, 29 Jan 2025 19:20:48 +0100 Subject: [PATCH] chore: added light, dark & print modes --- index.html | 2 +- src/App.vue | 12 ++++-- src/components/Timetable/TimetableBody.vue | 45 +++++++++++--------- src/components/Timetable/TimetableHeader.vue | 32 ++++++++------ src/components/Timetable/TimetableSelect.vue | 19 +++++++-- src/components/Timetable/TrainTimetable.vue | 24 +++++++---- src/stores/global.store.ts | 4 +- src/style.css | 5 --- tailwind.config.js | 1 + 9 files changed, 89 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index 550e1c9..b0ff889 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,7 @@ - +
diff --git a/src/App.vue b/src/App.vue index 2ab63fd..6fa7915 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ @@ -183,5 +183,10 @@ defineProps({ thead { display: table-header-group; } + + tr, + td { + border-color: theme('colors.black'); + } } diff --git a/src/components/Timetable/TimetableHeader.vue b/src/components/Timetable/TimetableHeader.vue index 3c5151d..ce984bf 100644 --- a/src/components/Timetable/TimetableHeader.vue +++ b/src/components/Timetable/TimetableHeader.vue @@ -1,19 +1,19 @@ + + diff --git a/src/components/Timetable/TimetableSelect.vue b/src/components/Timetable/TimetableSelect.vue index 3b4d399..8647b3c 100644 --- a/src/components/Timetable/TimetableSelect.vue +++ b/src/components/Timetable/TimetableSelect.vue @@ -14,6 +14,11 @@ + + @@ -30,7 +35,7 @@ import { ref, type Ref } from 'vue'; import { useApiStore } from '../../stores/api.store'; import { DataStatus } from '../../types/api.types'; import { useGlobalStore } from '../../stores/global.store'; -import { PrinterIcon, ArrowPathIcon } from '@heroicons/vue/16/solid'; +import { PrinterIcon, ArrowPathIcon, MoonIcon, SunIcon } from '@heroicons/vue/16/solid'; import { getRegionNameById } from '../../utils/trainUtils'; // Stores @@ -51,12 +56,20 @@ function selectTrain() { } } +function toggleDarkMode() { + globalStore.darkMode = !globalStore.darkMode; + + window.localStorage.setItem('currentTheme', globalStore.darkMode ? 'dark' : 'light'); +} + function openPrintingWindow() { if (globalStore.selectedTrain != null) { - const date = `${globalStore.generatedDate!.toLocaleDateString('pl-PL').replace(/\./g, '-')}--${globalStore.generatedDate!.toLocaleTimeString('pl-PL').replace(/:/g, '-')}`; + const date = `${globalStore.generatedDate!.toLocaleDateString('pl-PL').replace(/\./g, '-')}--${globalStore + .generatedDate!.toLocaleTimeString('pl-PL') + .replace(/:/g, '-')}`; document.title = `${globalStore.selectedTrain.driverName} ; ${globalStore.selectedTrain.timetable!.category} ${globalStore.selectedTrain.trainNo} - ${globalStore.selectedTrain.timetable?.route.replace('|', ' - ')} ; ${date}`; + ${globalStore.selectedTrain.timetable?.route.replace('|', ' - ')} ; ${date}`; } window.print(); diff --git a/src/components/Timetable/TrainTimetable.vue b/src/components/Timetable/TrainTimetable.vue index 414b3eb..d8f777d 100644 --- a/src/components/Timetable/TrainTimetable.vue +++ b/src/components/Timetable/TrainTimetable.vue @@ -1,14 +1,20 @@