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 property="og:image" content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/srjp-banner.png" />
</head>
<body>
<body >
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
src/App.vue
+9 -3
View File
@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen bg-zinc-950">
<div class="text-white min-h-screen bg-zinc-950">
<Navbar />
<MainContainer />
</div>
@@ -10,17 +10,23 @@ import Navbar from './components/App/Navbar.vue';
import MainContainer from './components/App/MainContainer.vue';
import { onMounted } from 'vue';
import { useApiStore } from './stores/api.store';
import { useGlobalStore } from './stores/global.store';
const originalDcumentTitle = document.title;
const originalDocumentTitle = document.title;
const apiStore = useApiStore();
const globalStore = useGlobalStore();
onMounted(() => {
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
window.addEventListener('afterprint', () => {
document.title = originalDcumentTitle;
document.title = originalDocumentTitle;
});
</script>
src/components/Timetable/TimetableBody.vue
+25 -20
View File
@@ -2,16 +2,16 @@
<tbody>
<tr v-for="(row, i) in computedTimetable">
<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="{
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].realLine != row.realLine,
'border-b print:border-b-black': i == computedTimetable.length - 1,
'border-t border-t-black dark:border-t-white': i != 0 && computedTimetable[i - 1].realLine != row.realLine,
'border-b border-b-black dark:border-b-white': i == computedTimetable.length - 1,
}"
>
{{ i == 0 || computedTimetable[i - 1].realLine != row.realLine ? row.realLine : '&nbsp;' }}
</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">
<table class="h-full w-full border-collapse">
<tbody>
@@ -27,10 +27,10 @@
</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="{
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
'border-b print:border-b-black': i == computedTimetable.length - 1,
'border-t border-t-black dark:border-t-white': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
'border-b border-b-black dark:border-b-white': i == computedTimetable.length - 1,
}"
colspan="2"
>
@@ -51,7 +51,7 @@
: '&nbsp; '
}}
</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 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
@@ -63,7 +63,7 @@
</tr>
<tr
: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,
}"
>
@@ -71,7 +71,7 @@
{{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
</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; ' }}
</td>
</tr>
@@ -80,7 +80,7 @@
</div>
</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="flex flex-col h-full justify-between p-1">
<div :class="{ 'font-bold': row.isMain }">
@@ -96,12 +96,12 @@
</div>
</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">
<table class="h-full w-full border-collapse">
<tbody>
<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?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })
@@ -111,7 +111,7 @@
<td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td>
</tr>
<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' }) }}
</td>
<td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
@@ -121,13 +121,13 @@
</div>
</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">
<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>
</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>
</tr>
<tr>
@@ -137,11 +137,11 @@
</table>
</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">
<table class="h-full w-full border-collapse">
<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>
</tr>
<tr>
@@ -152,7 +152,7 @@
</div>
</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>
</tbody>
</template>
@@ -183,5 +183,10 @@ defineProps({
thead {
display: table-header-group;
}
tr,
td {
border-color: theme('colors.black');
}
}
</style>
src/components/Timetable/TimetableHeader.vue
+20 -12
View File
@@ -1,19 +1,19 @@
<template>
<thead>
<tr>
<th width="40" class="border border-white print:border-black">Nr <br />linii</th>
<th width="100" class="border border-white print:border-black">Km</th>
<th width="35" class="border border-white print:border-black">V<sub>P</sub></th>
<th width="35" class="border border-white print:border-black">V<sub>L</sub></th>
<th width="200" class="border border-white print:border-black">Stacja</th>
<th width="100" class="border border-white print:border-black">Godzina</th>
<th width="50" class="border border-white print:border-black text-xs p-0">
<th width="40" class="border border-black dark:border-white">Nr <br />linii</th>
<th width="100" class="border border-black dark:border-white">Km</th>
<th width="35" class="border border-black dark:border-white">V<sub>P</sub></th>
<th width="35" class="border border-black dark:border-white">V<sub>L</sub></th>
<th width="200" class="border border-black dark:border-white">Stacja</th>
<th width="100" class="border border-black dark:border-white">Godzina</th>
<th width="50" class="border border-black dark:border-white text-xs p-0">
<table class="h-full w-full border-collapse">
<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>
</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>
</tr>
<tr>
@@ -22,11 +22,11 @@
</tbody>
</table>
</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">
<table class="h-full w-full border-collapse">
<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>
</tr>
<tr>
@@ -36,7 +36,15 @@
</table>
</div>
</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>
</thead>
</template>
<style scoped>
@media print {
th {
border-color: theme('colors.black');
}
}
</style>
src/components/Timetable/TimetableSelect.vue
+16 -3
View File
@@ -14,6 +14,11 @@
</option>
</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">
<PrinterIcon class="text-white size-6" />
</button>
@@ -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();
src/components/Timetable/TrainTimetable.vue
+15 -9
View File
@@ -1,14 +1,20 @@
<template>
<div class="overflow-auto py-1">
<b v-if="globalStore.selectedTrain" class="my-2">
{{ globalStore.selectedTrain.timetable!.category }} {{ globalStore.selectedTrain.trainNo }} Relacja
{{ globalStore.selectedTrain.timetable?.route.replace('|', ' - ') }}
</b>
<div
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?.route.replace('|', ' - ') }}
</div>
<table class="table-fixed mt-2 w-full border-collapse" v-if="computedTimetable.length > 0">
<TimetableHeader />
<TimetableBody :computed-timetable="computedTimetable" />
</table>
<table class="table-fixed mt-2 w-full border-collapse" v-if="computedTimetable.length > 0">
<TimetableHeader />
<TimetableBody :computed-timetable="computedTimetable" />
</table>
</div>
<div class="text-center font-bold text-zinc-400 p-2" v-else>Wybierz aktywny pociąg, aby wygenerować SRJP</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', {
state: () => ({
darkMode: false,
selectedTrain: null as ActiveTrain | null,
generatedDate: null as Date | null,
generatedMs: 0,
}),
src/style.css
-5
View File
@@ -2,10 +2,6 @@
@tailwind components;
@tailwind utilities;
:root {
color-scheme: dark;
}
body {
margin: 0;
}
@@ -24,7 +20,6 @@ body {
/* Track */
::-webkit-scrollbar-track {
background: theme('colors.stone.900');
border-radius: theme('borderRadius.md');
}
/* Handle */
tailwind.config.js
+1
View File
@@ -4,6 +4,7 @@ export default {
theme: {
extend: {},
},
darkMode: 'selector',
plugins: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
}