Spythere/srjp-td2
1
0
Fork 0
mirror of https://github.com/Spythere/srjp-td2.git synced 2026-05-03 05:28:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: added light, dark & print modes

Browse Source
This commit is contained in:
Spythere
2025-01-29 19:20:48 +01:00
parent a650a2f719
commit 2a3f4ca1ef
9 changed files with 89 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -33,7 +33,7 @@
<meta name="twitter:description" content="Generator rozkładów jazdy dla symulatora Train Driver 2" /> <meta name="twitter:description" content="Generator rozkładów jazdy dla symulatora Train Driver 2" />
<meta property="og:image" content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/srjp-banner.png" /> <meta property="og:image" content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/srjp-banner.png" />
</head> </head>
<body> <body >
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
src/App.vue
+9 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="min-h-screen bg-zinc-950"> <div class="text-white min-h-screen bg-zinc-950">
<Navbar /> <Navbar />
<MainContainer /> <MainContainer />
</div> </div>
@@ -10,17 +10,23 @@ import Navbar from './components/App/Navbar.vue';
import MainContainer from './components/App/MainContainer.vue'; import MainContainer from './components/App/MainContainer.vue';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { useApiStore } from './stores/api.store'; import { useApiStore } from './stores/api.store';
import { useGlobalStore } from './stores/global.store';
const originalDcumentTitle = document.title; const originalDocumentTitle = document.title;
const apiStore = useApiStore(); const apiStore = useApiStore();
const globalStore = useGlobalStore();
onMounted(() => { onMounted(() => {
apiStore.setupAPIData(); apiStore.setupAPIData();
// Setup dark mode
globalStore.darkMode =
localStorage.currentTheme === 'dark' || (!('currentTheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
}); });
// Resetting after print dialog is closed // Resetting after print dialog is closed
window.addEventListener('afterprint', () => { window.addEventListener('afterprint', () => {
document.title = originalDcumentTitle; document.title = originalDocumentTitle;
}); });
</script> </script>
src/components/Timetable/TimetableBody.vue
+25 -20
View File
@@ -2,16 +2,16 @@
<tbody> <tbody>
<tr v-for="(row, i) in computedTimetable"> <tr v-for="(row, i) in computedTimetable">
<td <td
class="text-center align-top border-l border-t-white print:border-l-black" class="text-center align-top border-l border-l-black dark:border-l-white"
:class="{ :class="{
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].realLine != row.realLine, 'border-t border-t-black dark:border-t-white': i != 0 && computedTimetable[i - 1].realLine != row.realLine,
'border-b print:border-b-black': i == computedTimetable.length - 1, 'border-b border-b-black dark:border-b-white': i == computedTimetable.length - 1,
}" }"
> >
{{ i == 0 || computedTimetable[i - 1].realLine != row.realLine ? row.realLine : '&nbsp;' }} {{ i == 0 || computedTimetable[i - 1].realLine != row.realLine ? row.realLine : '&nbsp;' }}
</td> </td>
<td class="border border-white print:border-black relative"> <td class="border border-black dark:border-white relative">
<div class="absolute top-0 left-0 w-full h-full p-0.5"> <div class="absolute top-0 left-0 w-full h-full p-0.5">
<table class="h-full w-full border-collapse"> <table class="h-full w-full border-collapse">
<tbody> <tbody>
@@ -27,10 +27,10 @@
</td> </td>
<td <td
class="text-center align-top p-0 print:border-l-black relative" class="text-center align-top p-0 border-l-black dark:border-l-white relative"
:class="{ :class="{
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed, 'border-t border-t-black dark:border-t-white': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
'border-b print:border-b-black': i == computedTimetable.length - 1, 'border-b border-b-black dark:border-b-white': i == computedTimetable.length - 1,
}" }"
colspan="2" colspan="2"
> >
@@ -51,7 +51,7 @@
: '&nbsp; ' : '&nbsp; '
}} }}
</td> </td>
<td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black" width="35"> <td v-if="row.arrivalTracks == 2" class="border-l border-l-black dark:border-l-white" width="35">
{{ {{
i == 0 || i == 0 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed || computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
@@ -63,7 +63,7 @@
</tr> </tr>
<tr <tr
:class="{ :class="{
'border-t print:border-t-black': row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed, 'border-t border-t-black dark:border-t-white': row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
'align-top': row.arrivalTracks != row.departureTracks, 'align-top': row.arrivalTracks != row.departureTracks,
}" }"
> >
@@ -71,7 +71,7 @@
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }} {{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
</td> </td>
<td v-if="row.departureTracks == 2" class="border-l print:border-l-black" width="35"> <td v-if="row.departureTracks == 2" class="border-l border-l-black dark:border-l-white" width="35">
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }} {{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
</td> </td>
</tr> </tr>
@@ -80,7 +80,7 @@
</div> </div>
</td> </td>
<td class="border border-white print:border-black relative"> <td class="border border-black dark:border-white relative">
<div class="absolute top-0 left-0 w-full h-full"> <div class="absolute top-0 left-0 w-full h-full">
<div class="flex flex-col h-full justify-between p-1"> <div class="flex flex-col h-full justify-between p-1">
<div :class="{ 'font-bold': row.isMain }"> <div :class="{ 'font-bold': row.isMain }">
@@ -96,12 +96,12 @@
</div> </div>
</td> </td>
<td class="p-0 border border-white print:border-black relative"> <td class="p-0 border border-black dark:border-white relative">
<div class="absolute top-0 left-0 w-full h-full"> <div class="absolute top-0 left-0 w-full h-full">
<table class="h-full w-full border-collapse"> <table class="h-full w-full border-collapse">
<tbody> <tbody>
<tr class="text-center align-top h-full"> <tr class="text-center align-top h-full">
<td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }"> <td class="border-r-[1px] border-r-black dark:border-r-white" :class="{ 'font-bold': row.stopTime > 0 }">
{{ {{
(row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0) (row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0)
? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) ? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })
@@ -111,7 +111,7 @@
<td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td> <td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td>
</tr> </tr>
<tr class="text-center align-bottom h-full"> <tr class="text-center align-bottom h-full">
<td class="border-r-[1px] border-r-white print:border-r-black" :class="{ 'font-bold': row.stopTime > 0 }"> <td class="border-r-[1px] border-r-black dark:border-r-white" :class="{ 'font-bold': row.stopTime > 0 }">
{{ row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }} {{ row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
</td> </td>
<td width="30" class="font-bold">{{ row.stopTime || '' }}</td> <td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
@@ -121,13 +121,13 @@
</div> </div>
</td> </td>
<td class="p-0 text-center border border-white print:border-black relative h-24 text-sm" :class="{ 'text-stone-400 ': i > 0 }"> <td class="p-0 text-center border border-black dark:border-white relative h-24 text-sm" :class="{ 'text-stone-400 ': i > 0 }">
<table class="h-full w-full border-collapse"> <table class="h-full w-full border-collapse">
<tbody> <tbody>
<tr class="border-b-[1px] border-b-white print:border-b-black"> <tr class="border-b-[1px] border-b-black dark:border-b-white">
<td>{{ row.headLocos[0] }}</td> <td>{{ row.headLocos[0] }}</td>
</tr> </tr>
<tr class="border-b-[1px] border-b-white print:border-b-black"> <tr class="border-b-[1px] border-b-black dark:border-b-white">
<td>{{ row.headLocos[1] ?? '&nbsp;' }}</td> <td>{{ row.headLocos[1] ?? '&nbsp;' }}</td>
</tr> </tr>
<tr> <tr>
@@ -137,11 +137,11 @@
</table> </table>
</td> </td>
<td class="p-0 text-center border border-white print:border-black relative" :class="{ 'text-stone-400 ': i > 0 }"> <td class="p-0 text-center border border-black dark:border-white relative" :class="{ 'text-stone-400 ': i > 0 }">
<div class="absolute top-0 left-0 w-full h-full"> <div class="absolute top-0 left-0 w-full h-full">
<table class="h-full w-full border-collapse"> <table class="h-full w-full border-collapse">
<tbody> <tbody>
<tr class="border-b-[1px] border-b-white print:border-b-black"> <tr class="border-b-[1px] border-b-black dark:border-b-white">
<td>{{ row.stockMass }}</td> <td>{{ row.stockMass }}</td>
</tr> </tr>
<tr> <tr>
@@ -152,7 +152,7 @@
</div> </div>
</td> </td>
<td class="text-center border border-white print:border-black" :class="{ 'text-stone-400 ': i > 0 }">{{ row.stockVmax }}</td> <td class="text-center border border-black dark:border-white" :class="{ 'text-stone-400 ': i > 0 }">{{ row.stockVmax }}</td>
</tr> </tr>
</tbody> </tbody>
</template> </template>
@@ -183,5 +183,10 @@ defineProps({
thead { thead {
display: table-header-group; display: table-header-group;
} }
tr,
td {
border-color: theme('colors.black');
}
} }
</style> </style>
src/components/Timetable/TimetableHeader.vue
+20 -12
View File
@@ -1,19 +1,19 @@
<template> <template>
<thead> <thead>
<tr> <tr>
<th width="40" class="border border-white print:border-black">Nr <br />linii</th> <th width="40" class="border border-black dark:border-white">Nr <br />linii</th>
<th width="100" class="border border-white print:border-black">Km</th> <th width="100" class="border border-black dark:border-white">Km</th>
<th width="35" class="border border-white print:border-black">V<sub>P</sub></th> <th width="35" class="border border-black dark:border-white">V<sub>P</sub></th>
<th width="35" class="border border-white print:border-black">V<sub>L</sub></th> <th width="35" class="border border-black dark:border-white">V<sub>L</sub></th>
<th width="200" class="border border-white print:border-black">Stacja</th> <th width="200" class="border border-black dark:border-white">Stacja</th>
<th width="100" class="border border-white print:border-black">Godzina</th> <th width="100" class="border border-black dark:border-white">Godzina</th>
<th width="50" class="border border-white print:border-black text-xs p-0"> <th width="50" class="border border-black dark:border-white text-xs p-0">
<table class="h-full w-full border-collapse"> <table class="h-full w-full border-collapse">
<tbody> <tbody>
<tr class="border-b-white print:border-b-black border-b"> <tr class="border-b-black dark:border-b-white border-b">
<td class="">Lok I</td> <td class="">Lok I</td>
</tr> </tr>
<tr class="border-b-white print:border-b-black border-b"> <tr class="border-b-black dark:border-b-white border-b">
<td>Lok II</td> <td>Lok II</td>
</tr> </tr>
<tr> <tr>
@@ -22,11 +22,11 @@
</tbody> </tbody>
</table> </table>
</th> </th>
<th width="55" class="border border-white print:border-black text-xs relative"> <th width="55" class="border border-black dark:border-white text-xs relative">
<div class="absolute top-0 left-0 w-full h-full"> <div class="absolute top-0 left-0 w-full h-full">
<table class="h-full w-full border-collapse"> <table class="h-full w-full border-collapse">
<tbody> <tbody>
<tr class="border-b-white print:border-b-black border-b k"> <tr class="border-b-black dark:border-b-white border-b k">
<td>Obc. lok.</td> <td>Obc. lok.</td>
</tr> </tr>
<tr> <tr>
@@ -36,7 +36,15 @@
</table> </table>
</div> </div>
</th> </th>
<th width="50" class="border border-white print:border-black">Vmax</th> <th width="50" class="border border-black dark:border-white">Vmax</th>
</tr> </tr>
</thead> </thead>
</template> </template>
<style scoped>
@media print {
th {
border-color: theme('colors.black');
}
}
</style>
src/components/Timetable/TimetableSelect.vue
+15 -2
View File
@@ -14,6 +14,11 @@
</option> </option>
</select> </select>
<button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="toggleDarkMode">
<SunIcon v-if="globalStore.darkMode" class="text-white size-6" />
<MoonIcon v-else class="text-white size-6" />
</button>
<button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="openPrintingWindow"> <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="openPrintingWindow">
<PrinterIcon class="text-white size-6" /> <PrinterIcon class="text-white size-6" />
</button> </button>
@@ -30,7 +35,7 @@ import { ref, type Ref } from 'vue';
import { useApiStore } from '../../stores/api.store'; import { useApiStore } from '../../stores/api.store';
import { DataStatus } from '../../types/api.types'; import { DataStatus } from '../../types/api.types';
import { useGlobalStore } from '../../stores/global.store'; 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'; import { getRegionNameById } from '../../utils/trainUtils';
// Stores // Stores
@@ -51,9 +56,17 @@ function selectTrain() {
} }
} }
function toggleDarkMode() {
globalStore.darkMode = !globalStore.darkMode;
window.localStorage.setItem('currentTheme', globalStore.darkMode ? 'dark' : 'light');
}
function openPrintingWindow() { function openPrintingWindow() {
if (globalStore.selectedTrain != null) { 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} document.title = `${globalStore.selectedTrain.driverName} ; ${globalStore.selectedTrain.timetable!.category} ${globalStore.selectedTrain.trainNo}
${globalStore.selectedTrain.timetable?.route.replace('|', ' - ')} ; ${date}`; ${globalStore.selectedTrain.timetable?.route.replace('|', ' - ')} ; ${date}`;
src/components/Timetable/TrainTimetable.vue
+9 -3
View File
@@ -1,14 +1,20 @@
<template> <template>
<div class="overflow-auto py-1"> <div
<b v-if="globalStore.selectedTrain" class="my-2"> id="train-timetable"
:class="{ dark: globalStore.darkMode }"
class="overflow-auto p-1 bg-white print:bg-white dark:bg-zinc-950 print:text-black text-black dark:text-white min-h-full"
>
<div v-if="globalStore.selectedTrain">
<div class="p-1 font-bold w-max">
{{ globalStore.selectedTrain.timetable!.category }} {{ globalStore.selectedTrain.trainNo }} Relacja {{ globalStore.selectedTrain.timetable!.category }} {{ globalStore.selectedTrain.trainNo }} Relacja
{{ globalStore.selectedTrain.timetable?.route.replace('|', ' - ') }} {{ globalStore.selectedTrain.timetable?.route.replace('|', ' - ') }}
</b> </div>
<table class="table-fixed mt-2 w-full border-collapse" v-if="computedTimetable.length > 0"> <table class="table-fixed mt-2 w-full border-collapse" v-if="computedTimetable.length > 0">
<TimetableHeader /> <TimetableHeader />
<TimetableBody :computed-timetable="computedTimetable" /> <TimetableBody :computed-timetable="computedTimetable" />
</table> </table>
</div>
<div class="text-center font-bold text-zinc-400 p-2" v-else>Wybierz aktywny pociąg, aby wygenerować SRJP</div> <div class="text-center font-bold text-zinc-400 p-2" v-else>Wybierz aktywny pociąg, aby wygenerować SRJP</div>
</div> </div>
src/stores/global.store.ts
+2 -2
View File
@@ -4,9 +4,9 @@ import type { ActiveTrain } from '../types/common.types';
export const useGlobalStore = defineStore('global', { export const useGlobalStore = defineStore('global', {
state: () => ({ state: () => ({
darkMode: false,
selectedTrain: null as ActiveTrain | null, selectedTrain: null as ActiveTrain | null,
generatedDate: null as Date | null, generatedDate: null as Date | null,
generatedMs: 0, generatedMs: 0,
}), }),
src/style.css
-5
View File
@@ -2,10 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
color-scheme: dark;
}
body { body {
margin: 0; margin: 0;
} }
@@ -24,7 +20,6 @@ body {
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: theme('colors.stone.900'); background: theme('colors.stone.900');
border-radius: theme('borderRadius.md');
} }
/* Handle */ /* Handle */
tailwind.config.js
+1
View File
@@ -4,6 +4,7 @@ export default {
theme: { theme: {
extend: {}, extend: {},
}, },
darkMode: 'selector',
plugins: [], plugins: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
} }