From 5aa53521f7347e0b771d1c677972009abe9daf0a Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 11 Oct 2022 18:33:53 +0200 Subject: [PATCH] =?UTF-8?q?Ulepszono=20informacje=20o=20szlakach=20i=20sta?= =?UTF-8?q?tusach=20rozk=C5=82ad=C3=B3w=20scenerii?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SceneryView/SceneryTimetable.vue | 124 +++++++----------- .../SceneryView/ScheduledTrainStatus.vue | 88 +++++++++++++ src/locales/en.json | 8 +- src/locales/pl.json | 8 +- src/scripts/interfaces/ScheduledTrain.ts | 6 + src/scripts/utils/storeUtils.ts | 25 +++- 6 files changed, 163 insertions(+), 96 deletions(-) create mode 100644 src/components/SceneryView/ScheduledTrainStatus.vue diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index df44a00..900811e 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -10,12 +10,6 @@ {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }} -
@@ -69,23 +63,15 @@  |  - + {{ scheduledTrain.driverName }} -  |  - - - {{ $t(`timetables.${scheduledTrain.stopStatus}`) }} - {{ scheduledTrain.prevStationName }} - {{ - scheduledTrain.nextStationName - }} - -
{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}
+ + @@ -127,9 +113,13 @@ - {{ scheduledTrain.arrivingLine }} - {{ scheduledTrain.arrivingLine && scheduledTrain.departureLine && '>' }} - {{ scheduledTrain.departureLine }} + + {{ scheduledTrain.arrivingLine }} + + + + {{ scheduledTrain.departureLine }} + @@ -178,11 +168,12 @@ import Station from '../../scripts/interfaces/Station'; import { useStore } from '../../store/store'; import imageMixin from '../../mixins/imageMixin'; import modalTrainMixin from '../../mixins/modalTrainMixin'; +import ScheduledTrainStatus from './ScheduledTrainStatus.vue'; export default defineComponent({ name: 'SceneryTimetable', - components: { SelectBox, Loading, TrainModal }, + components: { SelectBox, Loading, TrainModal, ScheduledTrainStatus }, mixins: [dateMixin, routerMixin, imageMixin, modalTrainMixin], @@ -320,12 +311,14 @@ export default defineComponent({ &-item { margin: 0.5em auto; - padding: 0 0.5em; + padding: 0.5em; max-width: 1100px; display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - gap: 0 0.5em; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2em 0.5em; + + overflow: hidden; background: #353535; @@ -340,9 +333,6 @@ export default defineComponent({ } &-general { - padding: 0.5rem 0; - border-radius: 10px; - display: flex; align-items: center; justify-content: space-between; @@ -353,6 +343,10 @@ export default defineComponent({ &-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); + + width: 100%; + max-width: 400px; + margin: 0 auto; } } @@ -415,7 +409,6 @@ export default defineComponent({ } .info-route { - margin-top: 0.5em; width: 100%; } @@ -431,38 +424,6 @@ export default defineComponent({ } } -.general-status { - text-align: right; - - span.arriving { - color: #ccc; - } - - span.departed { - color: lime; - font-weight: bold; - - &-away { - font-weight: bold; - color: #5ecc5e; - } - } - - span.stopped { - color: #ffa600; - font-weight: bold; - } - - span.online { - color: gold; - } - - span.terminated { - color: salmon; - font-weight: bold; - } -} - .schedule { &-arrival, &-stop, @@ -472,23 +433,40 @@ export default defineComponent({ align-items: center; margin: 0 0.3rem; - font-size: 1.1em; + font-size: 1.15em; } &-stop { position: relative; display: flex; flex-direction: column; - font-size: 0.85em; + font-size: 0.9em; padding: 0.3em 0; .stop-line { - margin-top: 0.25em; + display: flex; + position: absolute; + + span { + width: 65px; + word-break: break-all; + } + + span:first-child { + text-align: right; + } + + span:last-child { + text-align: left; + } } .stop-time { - transform: translateY(-0.25em); + position: absolute; + transform: translateY(-15px); + + color: $accentCol; } } } @@ -513,21 +491,9 @@ export default defineComponent({ } } -@include smallScreen() { - .timetable { - &-item { - display: flex; - flex-direction: column; - align-items: center; - } - - &-general { - width: 100%; - } - - &-schedule { - width: 100%; - } +@include smallScreen { + .timetable-item { + grid-template-columns: 1fr; } } diff --git a/src/components/SceneryView/ScheduledTrainStatus.vue b/src/components/SceneryView/ScheduledTrainStatus.vue new file mode 100644 index 0000000..d35a9be --- /dev/null +++ b/src/components/SceneryView/ScheduledTrainStatus.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/locales/en.json b/src/locales/en.json index 09d132c..beca281 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -301,12 +301,8 @@ }, "timetables": { "timetable-only": "Switch to timetable-only view", - "online": "At station", - "departed": "Dispatched to:", - "departed-away": "Departed to:", - "arriving": "Arriving from:", - "stopped": "Stopped", - "terminated": "Terminated", + "end": "Timetable terminates here", + "terminated": "Timetable terminated", "begins": "BEGINS HERE", "terminates": "TERMINATES\nHERE" }, diff --git a/src/locales/pl.json b/src/locales/pl.json index ac6aab9..76f6f15 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -305,12 +305,8 @@ }, "timetables": { "timetable-only": "Wyodrębnij rozkłady jazdy", - "online": "Na stacji", - "departed": "Odprawiony do:", - "departed-away": "Odjechał do:", - "arriving": "W drodze z:", - "stopped": "Postój", - "terminated": "Skończył bieg", + "end": "Koniec rozkładu jazdy", + "terminated": "Rozkład jazdy zakończony", "begins": "ROZPOCZYNA\nBIEG", "terminates": "KOŃCZY BIEG" }, diff --git a/src/scripts/interfaces/ScheduledTrain.ts b/src/scripts/interfaces/ScheduledTrain.ts index bd13433..e03a44f 100644 --- a/src/scripts/interfaces/ScheduledTrain.ts +++ b/src/scripts/interfaces/ScheduledTrain.ts @@ -20,6 +20,12 @@ export default interface ScheduledTrain { arrivingLine: string | null; departureLine: string | null; + prevDepartureLine: string | null; + nextArrivalLine: string | null; + + signal: string; + connectedTrack: string; + stopLabel: string; stopStatus: string; stopStatusID: number; diff --git a/src/scripts/utils/storeUtils.ts b/src/scripts/utils/storeUtils.ts index 6ae3fd7..57fb74a 100644 --- a/src/scripts/utils/storeUtils.ts +++ b/src/scripts/utils/storeUtils.ts @@ -117,17 +117,21 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN let prevStationName = '', nextStationName = ''; + let prevDepartureLine: string | null = null, + nextArrivalLine: string | null = null; for (let i = trainStopIndex - 1; i >= 0; i--) { if (/strong|podg/g.test(followingStops[i].stopName)) { - prevStationName = followingStops[i].stopNameRAW; + prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g,""); + break; } } for (let i = trainStopIndex + 1; i < followingStops.length; i++) { if (/strong|podg/g.test(followingStops[i].stopName)) { - nextStationName = followingStops[i].stopNameRAW; + nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g,""); + break; } } @@ -138,10 +142,12 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN for (let i = trainStopIndex; i < followingStops.length; i++) { const currentStop = followingStops[i]; - if (currentStop.departureLine == null) break; + if (currentStop.departureLine == null) continue; if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) { departureLine = currentStop.departureLine; + nextArrivalLine = followingStops[i + 1]?.arrivalLine || null; + break; } } @@ -149,10 +155,12 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN for (let i = trainStopIndex; i >= 0; i--) { const currentStop = followingStops[i]; - if (currentStop.arrivalLine == null) break; + if (currentStop.arrivalLine == null) continue; if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) { arrivingLine = currentStop.arrivalLine; + prevDepartureLine = followingStops[i - 1]?.departureLine || null; + break; } } @@ -160,7 +168,11 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN return { trainNo: train.trainNo, trainId: train.trainId, - + + signal: train.signal, + connectedTrack: train.connectedTrack, + + driverName: train.driverName, driverId: train.driverId, currentStationName: train.currentStationName, @@ -179,5 +191,8 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN arrivingLine, departureLine, + + nextArrivalLine, + prevDepartureLine, }; }