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

Merge pull request #109 from Spythere/development

Browse Source 
v1.28.0
This commit is contained in:
Spythere
2024-09-09 14:26:32 +02:00
committed by GitHub
parent 7079f20791 fac8fced3e
commit f53f3a18fe
39 changed files with 846 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "stacjownik",
"version": "1.27.0",
"version": "1.28.0",
"private": true,
"type": "module",
"scripts": {
public/site.webmanifest
+1 -1
View File
@@ -13,7 +13,7 @@
"type": "image/png"
}
],
"theme_color": "#ffc014",
"theme_color": "#4d4d4d",
"background_color": "#4d4d4d",
"display": "standalone",
"start_url": "."
src/components/Global/StockList.vue
+2 -12
View File
@@ -8,7 +8,7 @@
:key="i"
>
<div class="stock-text">
<p>{{ vehicleName.replace(/_/g, ' ') }}</p>
<div>{{ vehicleName.replace(/_/g, ' ') }}</div>
<small v-if="vehicleCargo">({{ vehicleCargo }})</small>
</div>
@@ -180,7 +180,6 @@ export default defineComponent({
align-items: flex-end;
overflow: auto;
margin: 0 auto;
padding: 1em 0;
}
ul > li > span {
@@ -189,20 +188,11 @@ ul > li > span {
cursor: crosshair;
}
img {
max-height: 60px;
width: auto;
height: auto;
}
img.traction-only {
max-width: 100%;
}
.stock-text {
text-align: center;
color: #aaa;
font-size: 0.9em;
margin-bottom: 0.25em;
padding: 0.25em 0;
}
</style>
src/components/Global/VehicleThumbnail.vue
+8 -11
View File
@@ -1,5 +1,5 @@
<template>
<div class="vehicle-thumbnail">
<div class="vehicle-thumbnail" :data-load-status="imgStatus">
<img
ref="imgRef"
:src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
@@ -7,7 +7,6 @@
loading="lazy"
data-tooltip-type="VehiclePreviewTooltip"
:data-tooltip-content="vehicleName"
:data-load-status="imgStatus"
@error="onImageError"
@load="onImageLoad"
/>
@@ -15,7 +14,7 @@
</template>
<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue';
import { Ref, ref } from 'vue';
const props = defineProps({
vehicleName: { type: String, required: true },
@@ -29,8 +28,6 @@ const imgRef = ref(null) as Ref<HTMLElement | null>;
const imgStatus = ref('loading');
function onImageError(event: Event) {
console.log('error');
(event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
imgStatus.value = 'error';
}
@@ -40,22 +37,22 @@ function onImageLoad() {
imgStatus.value = 'loaded';
}
imgRef.value!.style.opacity = '1';
if (imgRef.value) imgRef.value.style.opacity = '1';
}
</script>
<style lang="scss" scoped>
.vehicle-thumbnail {
position: relative;
&[data-load-status='loading'] {
min-height: 60px;
min-width: 200px;
}
}
img {
opacity: 0;
transition: opacity 100ms ease-in-out;
&[data-load-status='loading'] {
min-height: 60px;
min-width: 150px;
}
}
</style>
src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+33 -37
View File
@@ -1,48 +1,44 @@
<template>
<transition name="status-anim" mode="out-in">
<div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
{{ $t('app.no-result') }}
</div>
<div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
{{ $t('app.no-result') }}
</div>
<ul v-else class="journal-list">
<transition-group name="list-anim">
<JournalDispatcherEntry
v-for="entry in dispatcherHistory"
:key="entry.id"
:entry="entry"
:onToggleShowExtraInfo="toggleExtraInfo"
:showExtraInfo="extraInfoIndexes.includes(entry.id)"
/>
</transition-group>
<div v-else>
<transition-group name="list-anim" class="journal-list" tag="ul">
<JournalDispatcherEntry
v-for="entry in dispatcherHistory"
:key="entry.id"
:entry="entry"
:onToggleShowExtraInfo="toggleExtraInfo"
:showExtraInfo="extraInfoIndexes.includes(entry.id)"
/>
</transition-group>
<AddDataButton
:list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</ul>
<AddDataButton
:list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
<div class="journal_warning" v-if="scrollNoMoreData">
{{ $t('journal.no-further-data') }}
</div>
<div class="journal_warning" v-if="scrollNoMoreData">
{{ $t('journal.no-further-data') }}
</div>
<div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.loading-further-data') }}
</div>
</div>
</transition>
<div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.loading-further-data') }}
</div>
</template>
<script lang="ts">
src/components/JournalView/JournalStats.vue
+10 -3
View File
@@ -30,7 +30,11 @@
</div>
<transition name="dropdown-anim">
<div class="dropdown_wrapper" v-if="currentStatsTab !== null">
<div
class="dropdown_wrapper"
:class="{ 'dropdown-align-right': true }"
v-if="currentStatsTab !== null"
>
<keep-alive>
<component :is="currentStatsTab" :key="currentStatsTab"></component>
</keep-alive>
@@ -79,7 +83,10 @@ export default defineComponent({
@import '../../styles/dropdown_filters.scss';
@import '../../styles/variables.scss';
.dropdown_wrapper {
max-width: 100%;
.dropdown_wrapper.dropdown-align-right {
left: auto;
right: 0;
max-width: 700px;
// max-width: 100%;
}
</style>
src/components/JournalView/JournalTimetables/TimetableDetails.vue → src/components/JournalView/JournalTimetables/EntryDetails.vue
+71 -45
View File
@@ -2,7 +2,7 @@
<div>
<div class="details-actions">
<button class="btn--action" @click="toggleExtraInfo">
<b>{{ $t('journal.stock-info') }}</b>
<b>{{ $t('journal.entry-details') }}</b>
<img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
</button>
@@ -16,23 +16,25 @@
</router-link>
</div>
<div class="details-body" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
<hr />
<div class="details-body" v-if="showExtraInfo">
<div class="g-separator"></div>
<EntryStops :timetable="timetable" />
<div class="g-separator"></div>
<div class="stock-specs">
<span class="badge">
<span class="badge" v-if="timetable.authorName">
<span>{{ $t('journal.dispatcher-name') }}</span>
<span>{{ timetable.authorName }}</span>
</span>
</div>
<div class="stock-specs">
<span class="badge">
<span class="badge" v-if="timetable.maxSpeed">
<span>{{ $t('journal.stock-max-speed') }}</span>
<span>{{ timetable.maxSpeed }}km/h</span>
</span>
<span class="badge">
<span class="badge" v-if="timetable.stockLength">
<span>{{ $t('journal.stock-length') }}</span>
<span>
{{
@@ -43,13 +45,13 @@
</span>
</span>
<span class="badge">
<span class="badge" v-if="timetable.stockMass">
<span>{{ $t('journal.stock-mass') }}</span>
<span>
{{
Math.floor(
(currentHistoryIndex == 0
? timetable.stockMass!
? timetable.stockMass
: stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
)
}}t
@@ -57,27 +59,56 @@
</span>
</div>
<!-- Historia zmian w składzie -->
<div class="stock-history" v-if="stockHistory.length > 1">
<button
v-for="(sh, i) in stockHistory"
:key="i"
class="btn--action"
:data-checked="i == currentHistoryIndex"
@click.stop="currentHistoryIndex = i"
>
{{ sh.updatedAt }}
</button>
<div class="stock-dangers" v-if="timetable.twr || timetable.skr">
<div class="g-separator"></div>
<b>{{ $t('journal.stock-dangers') }}:</b>
<ul>
<li v-if="timetable.twr">
<b class="text--primary">{{ $t('general.TWR') }} (TWR)</b>
<span v-if="timetable.warningNotes">
| <i>{{ timetable.warningNotes }}</i>
</span>
</li>
<li v-if="timetable.skr">
<b class="text--primary">{{ $t('general.SKR') }}</b>
<span v-if="timetable.warningNotes">
| Komentarze: <i>{{ timetable.warningNotes }}</i>
</span>
</li>
</ul>
</div>
<StockList
:trainStockList="
(currentHistoryIndex == 0
? timetable.stockString
: stockHistory[currentHistoryIndex].stockString
).split(';')
"
/>
<!-- Historia zmian w składzie -->
<div v-if="timetable.stockString || stockHistory.length != 0">
<div class="g-separator"></div>
<b>{{ $t('journal.stock-preview') }}:</b>
<div class="stock-history" v-if="stockHistory.length > 1">
<button
v-for="(sh, i) in stockHistory"
:key="i"
class="btn--action"
:data-checked="i == currentHistoryIndex"
@click.stop="currentHistoryIndex = i"
>
{{ sh.updatedAt }}
</button>
</div>
<div v-if="timetable.stockString" style="margin-top: 1em">
<StockList
:trainStockList="
(currentHistoryIndex == 0
? timetable.stockString
: stockHistory[currentHistoryIndex].stockString
).split(';')
"
/>
</div>
</div>
</div>
</div>
</template>
@@ -87,9 +118,10 @@ import { PropType, defineComponent } from 'vue';
import StockList from '../../Global/StockList.vue';
import { API } from '../../../typings/api';
import { RouteLocationRaw } from 'vue-router';
import EntryStops from './EntryStops.vue';
export default defineComponent({
components: { StockList },
components: { StockList, EntryStops },
emits: ['toggleExtraInfo'],
@@ -133,7 +165,7 @@ export default defineComponent({
query: {
trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
}
}
};
}
},
methods: {
@@ -161,6 +193,7 @@ export default defineComponent({
.details-actions {
display: flex;
gap: 0.5em;
margin-top: 1em;
button img {
height: 1.25em;
@@ -182,7 +215,6 @@ export default defineComponent({
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-top: 0.5em;
.badge {
margin: 0;
@@ -194,20 +226,14 @@ export default defineComponent({
}
}
ul.stock-list {
display: flex;
align-items: flex-end;
overflow: auto;
hr {
margin: 0.5em 0;
}
padding-bottom: 0.5em;
li > div {
margin: 1em 0;
text-align: center;
color: #aaa;
font-size: 0.9em;
}
.stock-dangers ul {
list-style: disc;
padding-left: 1em;
padding-top: 0.5em;
}
@include smallScreen() {
src/components/JournalView/JournalTimetables/TimetableGeneral.vue → src/components/JournalView/JournalTimetables/EntryGeneral.vue
+18 -2
View File
@@ -3,8 +3,24 @@
<span class="general-train">
<span class="text--grayed">#{{ timetable.id }}</span>
<span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
<span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
<span
class="train-badge twr"
v-if="timetable.twr"
data-tooltip-type="BaseTooltip"
:data-tooltip-content="
$t('general.TWR') + `${timetable.warningNotes ? ':\n' + timetable.warningNotes : ''}`
"
>
TWR
</span>
<span
class="train-badge skr"
v-if="timetable.skr"
data-tooltip-type="BaseTooltip"
:data-tooltip-content="$t('general.SKR')"
>
SKR
</span>
<span>
<strong
src/components/JournalView/JournalTimetables/TimetableStatus.vue → src/components/JournalView/JournalTimetables/EntryStatus.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<div class="item-status" style="margin: 0.5em 0">
<div class="entry-status" style="margin: 0.5em 0">
<ProgressBar
:progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
:progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
@@ -61,7 +61,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../../styles/responsive.scss';
.item-status {
.entry-status {
display: flex;
align-items: center;
flex-wrap: wrap;
src/components/JournalView/JournalTimetables/EntryStops.vue
+296
View File
@@ -0,0 +1,296 @@
<template>
<div class="entry-stops">
<ul class="stop-list">
<li v-for="(stop, i) in timetableStops" :key="stop.stopName">
<span class="stop-label" :data-confirmed="stop.isConfirmed">
<span v-if="i > 0">&gt;</span>
<span class="stop-name">{{ stop.stopName }}</span>
<span
class="stop-date"
v-if="stop.scheduledArrivalTimestamp != 0"
:data-delayed="
stop.isConfirmed && stop.arrivalTimestamp - stop.scheduledArrivalTimestamp > 0
"
:data-preponed="
stop.isConfirmed &&
stop.arrivalTimestamp != 0 &&
stop.arrivalTimestamp - stop.scheduledArrivalTimestamp < 0
"
>
<span
v-if="stop.isConfirmed && stop.arrivalTimestamp - stop.scheduledArrivalTimestamp != 0"
>
p. <s>{{ timestampToString(stop.scheduledArrivalTimestamp) }}</s>
{{ timestampToString(stop.arrivalTimestamp) }}
</span>
<span v-else>p. {{ timestampToString(stop.scheduledArrivalTimestamp) }}</span>
</span>
<span
class="stop-time"
v-if="stop.stopTime > 0"
:data-stop-ph="stop.stopType.includes('ph')"
:data-stop-pt="stop.stopType.includes('pt')"
:data-stop-pm="stop.stopType.includes('pm')"
>
/<span>{{ stop.stopTime }} {{ stop.stopType }}</span
>/
</span>
<span
class="stop-date"
v-if="
stop.scheduledDepartureTimestamp != 0 &&
stop.scheduledArrivalTimestamp != stop.scheduledDepartureTimestamp
"
:data-delayed="
stop.isConfirmed && stop.departureTimestamp - stop.scheduledDepartureTimestamp > 0
"
:data-preponed="
stop.isConfirmed &&
stop.departureTimestamp != 0 &&
stop.departureTimestamp - stop.scheduledDepartureTimestamp < 0
"
>
<span
v-if="
stop.isConfirmed && stop.departureTimestamp - stop.scheduledDepartureTimestamp != 0
"
>
o. <s>{{ timestampToString(stop.scheduledDepartureTimestamp) }}</s>
{{ timestampToString(stop.departureTimestamp) }}
</span>
<span v-else>o. {{ timestampToString(stop.scheduledDepartureTimestamp) }}</span>
</span>
</span>
</li>
</ul>
<ul class="timetable-path-list" v-if="timetablePathDetails">
<li
v-for="(pathData, i) in timetablePathDetails"
:data-visited="pathData.isVisited"
:data-next-visited="
i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
"
>
<span v-if="i > 0" class="path-arrow">&gt;</span>
<span class="path-arrival" v-if="pathData.arrival">{{ pathData.arrival }}</span>
<b class="path-scenery">{{ pathData.sceneryName }}</b>
<span class="path-departure" v-if="pathData.departure">{{ pathData.departure }}</span>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
import dateMixin from '../../../mixins/dateMixin';
import { API } from '../../../typings/api';
interface ITimetableStopDetails {
stopName: string;
arrivalTimestamp: number;
scheduledArrivalTimestamp: number;
departureTimestamp: number;
scheduledDepartureTimestamp: number;
stopTime: number;
stopType: string;
isConfirmed: boolean;
}
export default defineComponent({
mixins: [dateMixin],
props: {
timetable: {
type: Object as PropType<API.TimetableHistory.Data>,
required: true
}
},
computed: {
timetablePathDetails() {
if (!this.timetable.path || this.timetable.path == '') return null;
return this.timetable.path.split(';').map((pathEl, i) => {
const [arrival, name, departure] = pathEl.split(',');
const sceneryName = name.split(' ').slice(0, -1).join(' ');
const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
const isVisited = this.timetable.visitedSceneries.includes(sceneryHash);
return {
arrival,
sceneryName,
sceneryHash,
departure,
isVisited,
isVisitedOffline:
!isVisited &&
this.timetable.visitedSceneries.includes(`${sceneryName} ${sceneryHash}.sc`)
};
});
},
timetableStops(): ITimetableStopDetails[] {
const timetable = this.timetable;
const stopNames = timetable.sceneriesString.split('%');
return stopNames.reduce<ITimetableStopDetails[]>((acc, stopName, i, arr) => {
const arrivalDate =
i == arr.length - 1
? (timetable.checkpointArrivals.at(i) ?? timetable.endDate)
: timetable.checkpointArrivals.at(i);
const scheduledArrivalDate =
i == arr.length - 1
? (timetable.checkpointArrivalsScheduled.at(i) ?? timetable.scheduledEndDate)
: timetable.checkpointArrivalsScheduled.at(i);
const departureDate =
i == 0
? (timetable.checkpointDepartures.at(i) ?? timetable.beginDate)
: timetable.checkpointDepartures.at(i);
const scheduledDepartureDate =
i == 0
? (timetable.checkpointDeparturesScheduled.at(i) ?? timetable.scheduledBeginDate)
: timetable.checkpointDeparturesScheduled.at(i);
const stopTime = Number(timetable.checkpointStopTypes.at(i)?.split(',')[0]) || 0;
const stopType = timetable.checkpointStopTypes.at(i)?.split(',').slice(1).join(',') || 'pt';
acc.push({
stopName,
arrivalTimestamp: this.dateStringToTimestamp(arrivalDate),
scheduledArrivalTimestamp: this.dateStringToTimestamp(scheduledArrivalDate),
departureTimestamp: this.dateStringToTimestamp(departureDate),
scheduledDepartureTimestamp: this.dateStringToTimestamp(scheduledDepartureDate),
stopTime,
stopType,
isConfirmed: i < timetable.confirmedStopsCount
});
return acc;
}, []);
}
}
});
</script>
<style lang="scss" scoped>
@import '../../../styles/badge.scss';
.entry-stops {
word-wrap: break-word;
gap: 0.25em;
font-size: 0.95em;
}
.stop-list {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
padding: 0.5em 0;
}
.stop-label {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
align-items: center;
color: white;
&[data-confirmed='true'] > .stop-name {
color: lightgreen;
}
&[data-confirmed='true'] > .stop-date:not([data-preponed='true']):not([data-delayed='true']) {
color: lightgreen;
}
}
.stop-name {
font-weight: bold;
color: #ccc;
}
.stop-date {
color: #ccc;
s {
color: #aaa;
}
&[data-delayed='true'] {
color: salmon;
}
&[data-preponed='true'] {
color: mediumspringgreen;
}
}
.stop-time {
&[data-stop-pt='true'] span {
color: #999;
}
&[data-stop-ph='true'] span,
&[data-stop-pm='true'] span {
color: gold;
}
}
.timetable-path-list {
display: flex;
flex-wrap: wrap;
gap: 0.5em 0;
padding: 0.5em 0;
color: #ccc;
li > .path-scenery:first-child,
li > .path-arrival:nth-child(2) {
border-radius: 0.5em 0 0 0.5em;
}
li > :last-child {
border-radius: 0 0.5em 0.5em 0;
}
}
.path-scenery {
padding: 0.25em 0.5em;
background-color: #303030;
}
.path-arrival,
.path-departure {
padding: 0.25em;
display: inline-block;
background-color: #4e4e4e;
min-width: 25px;
text-align: center;
}
.path-arrow {
padding: 0 0.5em;
}
.timetable-path-list > li[data-visited='true'] {
.path-arrival,
.path-scenery,
.path-arrow {
color: lightgreen;
}
&[data-next-visited='true'] .path-departure {
color: lightgreen;
}
}
</style>
src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue
+149
View File
@@ -0,0 +1,149 @@
<template>
<li class="timetable-history-entry">
<!-- General -->
<EntryGeneral :timetable="timetableEntry" />
<div @click="toggleExtraInfo" style="cursor: pointer">
<!-- Route -->
<div class="entry-route">
<b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
</div>
<hr />
<!-- Status -->
<EntryStatus :timetable="timetableEntry" />
</div>
<!-- Extra -->
<EntryDetails
:timetable="timetableEntry"
:show-extra-info="showExtraInfo"
@toggle-extra-info="toggleExtraInfo"
/>
</li>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { API } from '../../../typings/api';
import { useApiStore } from '../../../store/apiStore';
import { Journal } from '../typings';
import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
import dateMixin from '../../../mixins/dateMixin';
import styleMixin from '../../../mixins/styleMixin';
import EntryGeneral from './EntryGeneral.vue';
import EntryStatus from './EntryStatus.vue';
import EntryDetails from './EntryDetails.vue';
export default defineComponent({
props: {
timetableEntry: {
type: Object as PropType<API.TimetableHistory.Data>,
required: true
},
showExtraInfo: {
type: Boolean,
required: true
}
},
components: { EntryDetails, EntryGeneral, EntryStatus },
mixins: [trainCategoryMixin, dateMixin, styleMixin],
emits: ['toggleShowExtraInfo'],
data() {
return {
apiStore: useApiStore()
};
},
computed: {
timetablePathDetails() {
if (!this.timetableEntry.path || this.timetableEntry.path == '') return null;
return this.timetableEntry.path.split(';').map((pathEl, i) => {
const [arrival, name, departure] = pathEl.split(',');
const sceneryName = name.split(' ').slice(0, -1).join(' ');
const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
return {
arrival,
sceneryName,
sceneryHash,
departure,
isVisited: this.timetableEntry.visitedSceneries?.includes(sceneryHash) ?? false
};
});
},
timetableStops(): Journal.TimetableStopDetails[] {
const timetableEntry = this.timetableEntry;
const stopNames = timetableEntry.sceneriesString.split('%');
return stopNames.reduce<Journal.TimetableStopDetails[]>((acc, stopName, i, arr) => {
const arrivalDate =
i == arr.length - 1
? (timetableEntry.checkpointArrivals.at(i) ?? timetableEntry.endDate)
: timetableEntry.checkpointArrivals.at(i);
const scheduledArrivalDate =
i == arr.length - 1
? (timetableEntry.checkpointArrivalsScheduled.at(i) ?? timetableEntry.scheduledEndDate)
: timetableEntry.checkpointArrivalsScheduled.at(i);
const departureDate =
i == 0
? (timetableEntry.checkpointDepartures.at(i) ?? timetableEntry.beginDate)
: timetableEntry.checkpointDepartures.at(i);
const scheduledDepartureDate =
i == 0
? (timetableEntry.checkpointDeparturesScheduled.at(i) ??
timetableEntry.scheduledBeginDate)
: timetableEntry.checkpointDeparturesScheduled.at(i);
const stopTime = Number(timetableEntry.checkpointStopTypes.at(i)?.split(',')[0]) || 0;
const stopType = timetableEntry.checkpointStopTypes.at(i)?.split(',')[1] || '';
acc.push({
stopName,
arrivalTimestamp: this.dateStringToTimestamp(arrivalDate),
scheduledArrivalTimestamp: this.dateStringToTimestamp(scheduledArrivalDate),
departureTimestamp: this.dateStringToTimestamp(departureDate),
scheduledDepartureTimestamp: this.dateStringToTimestamp(scheduledDepartureDate),
stopTime,
stopType,
isConfirmed: i < timetableEntry.confirmedStopsCount
});
return acc;
}, []);
}
},
methods: {
toggleExtraInfo() {
this.$emit('toggleShowExtraInfo');
}
}
});
</script>
<style lang="scss" scoped>
@import '../../../styles/responsive.scss';
.timetable-history-entry {
background-color: #1a1a1a;
padding: 1em;
}
@include smallScreen {
.entry-route {
text-align: center;
}
}
</style>
src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+42 -63
View File
@@ -1,63 +1,37 @@
<template>
<div>
<transition name="status-anim" mode="out-in">
<div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div v-else-if="timetableHistory.length == 0" class="journal_warning">
{{ $t('app.no-result') }}
</div>
<div v-else-if="timetableHistory.length == 0" class="journal_warning">
{{ $t('app.no-result') }}
</div>
<div v-else>
<transition-group name="list-anim" tag="ul" class="journal-list">
<li v-for="timetable in timetableHistory" class="journal_item" :key="timetable.id">
<div class="journal_item-info">
<!-- General -->
<TimetableGeneral :timetable="timetable" />
<div v-else>
<transition-group name="list-anim" class="journal-list" tag="ul">
<JournalTimetableEntry
v-for="(timetableEntry, i) in timetableHistory"
:key="timetableEntry.id"
:timetableEntry="timetableEntry"
:onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
:showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
/>
</transition-group>
<div @click="toggleExtraInfo(timetable.id)" style="cursor: pointer">
<!-- Route -->
<span class="item-route">
<b>{{ timetable.route.replace('|', ' - ') }}</b>
</span>
<hr />
<!-- Stops -->
<TimetableStops
:timetable="timetable"
:showExtraInfo="extraInfoIndexes.includes(timetable.id)"
/>
<!-- Status -->
<TimetableStatus :timetable="timetable" />
</div>
<!-- Extra -->
<TimetableDetails
:timetable="timetable"
:showExtraInfo="extraInfoIndexes.includes(timetable.id)"
@toggle-extra-info="toggleExtraInfo"
/>
</div>
</li>
</transition-group>
<AddDataButton
:list="timetableHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
</div>
</transition>
<AddDataButton
:list="timetableHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
@@ -68,28 +42,21 @@
</template>
<script lang="ts">
import { defineComponent, Prop, PropType, ref } from 'vue';
import { defineComponent, PropType } from 'vue';
import Loading from '../../Global/Loading.vue';
import AddDataButton from '../../Global/AddDataButton.vue';
import JournalTimetableEntry from './JournalTimetableEntry.vue';
import { useMainStore } from '../../../store/mainStore';
import { Status } from '../../../typings/common';
import { API } from '../../../typings/api';
import TimetableGeneral from './TimetableGeneral.vue';
import TimetableStops from './TimetableStops.vue';
import TimetableStatus from './TimetableStatus.vue';
import TimetableDetails from './TimetableDetails.vue';
export default defineComponent({
components: {
Loading,
AddDataButton,
TimetableDetails,
TimetableGeneral,
TimetableStatus,
TimetableStops
JournalTimetableEntry
},
props: {
@@ -119,6 +86,18 @@ export default defineComponent({
};
},
watch: {
'$route.query': {
deep: true,
handler() {
this.extraInfoIndexes.length = 0;
this.$nextTick(() => {
console.log(this.$el.querySelector('ul'));
});
}
}
},
methods: {
toggleExtraInfo(id: number) {
const existingIdx = this.extraInfoIndexes.indexOf(id);
src/components/JournalView/JournalTimetables/TimetableStops.vue
-164
View File
@@ -1,164 +0,0 @@
<template>
<div class="timetable-stops">
<div class="stop-list">
<span
v-for="(stop, i) in timetableStops.filter((_, i) =>
!showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
)"
class="stop-list-item"
:key="stop.stopName"
:data-confirmed="stop.confirmed"
>
<span v-if="i > 0">
&gt;
<span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
... (+{{ timetableStops.length - 2 }}) &gt;
</span>
</span>
<span class="stop-name">{{ stop.stopName }}</span>
<span v-html="stop.html"></span>
</span>
</div>
<div class="path-details" v-if="showExtraInfo && timetablePathDetails">
<span
v-for="(pathData, i) in timetablePathDetails"
:data-visited="pathData.isVisited"
:data-next-visited="
i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
"
>
<span class="path-arrival" v-if="pathData.arrival">/ {{ pathData.arrival }} &RightArrow; </span>
<b class="path-scenery">{{ pathData.sceneryName }}</b>
<span class="path-departure" v-if="pathData.departure">
&RightArrow; {{ pathData.departure }}&nbsp;
</span>
</span>
</div>
</div>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
import dateMixin from '../../../mixins/dateMixin';
import { API } from '../../../typings/api';
export default defineComponent({
mixins: [dateMixin],
props: {
showExtraInfo: {
type: Boolean,
required: true
},
timetable: {
type: Object as PropType<API.TimetableHistory.Data>,
required: true
}
},
computed: {
timetablePathDetails() {
if (!this.timetable.path || this.timetable.path == '') return null;
return this.timetable.path.split(';').map((pathEl, i) => {
const [arrival, name, departure] = pathEl.split(',');
const sceneryName = name.split(' ').slice(0, -1).join(' ');
const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
return {
arrival,
sceneryName,
sceneryHash,
departure,
isVisited: this.timetable.visitedSceneries?.includes(sceneryHash) ?? false
};
});
},
timetableStops() {
const timetable = this.timetable;
const stopNames = timetable.sceneriesString.split('%');
const beginDateHTML = ` (o. ${
timetable.beginDate != timetable.scheduledBeginDate
? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
: ''
} <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
const endDateHTML = ` (p. ${
timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
: ''
} <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
return stopNames.map((stopName, i) => {
const confirmed = i < timetable.confirmedStopsCount;
if (i == 0) return { stopName, html: beginDateHTML, confirmed };
if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
const departureDateScheduled = this.stringToDate(
timetable.checkpointDeparturesScheduled?.at(i)
);
const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
const arrivalDateScheduled = this.stringToDate(
timetable.checkpointArrivalsScheduled?.at(i)
);
const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
const arrivalHTML =
(arrivalDateReal &&
arrivalDateScheduled &&
arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
: '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
const departureHTML =
(departureDateReal &&
departureDateScheduled &&
departureDateReal?.getTime() != departureDateScheduled?.getTime()
? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
: '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
if (html) html = ` (${html})`;
return { stopName, html, confirmed };
});
}
}
});
</script>
<style lang="scss" scoped>
.timetable-stops {
word-wrap: break-word;
gap: 0.25em;
font-size: 0.95em;
color: #adadad;
}
.stop-list {
&-item[data-confirmed='true'] {
color: lightgreen;
.stop-name {
font-weight: bold;
}
}
}
.path-details {
margin-top: 0.5em;
}
.path-details > span[data-visited='true'] {
.path-arrival,
.path-scenery {
color: lightgreen;
}
&[data-next-visited='true'] .path-departure {
color: lightgreen;
}
}
</style>
src/components/JournalView/typings.ts
+12
View File
@@ -66,4 +66,16 @@ export namespace Journal {
iconName: string;
disabled: boolean;
}
export interface TimetableStopDetails {
stopName: string;
arrivalTimestamp: number;
scheduledArrivalTimestamp: number;
departureTimestamp: number;
scheduledDepartureTimestamp: number;
stopTime: number;
stopType: string;
isConfirmed: boolean;
}
}
src/components/StationsView/StationTable.vue
+2 -2
View File
@@ -407,9 +407,9 @@ export default defineComponent({
$rowCol: #424242;
.station_table {
height: 90vh;
height: calc(100vh - 11em);
max-height: 2000px;
min-height: 700px;
min-height: 500px;
overflow: auto;
font-weight: 500;
}
src/components/Tooltip/BaseTooltip.vue
+1 -1
View File
@@ -29,7 +29,7 @@ export default defineComponent({
border-radius: 0.25em;
width: 100%;
background-color: #333;
background-color: #1f1f1f;
box-shadow: 0 0 5px 2px #aaa;
}
src/components/Tooltip/Tooltip.vue
+10 -8
View File
@@ -13,6 +13,8 @@ import BaseTooltip from './BaseTooltip.vue';
import SpawnsTooltip from './SpawnsTooltip.vue';
import UsersTooltip from './UsersTooltip.vue';
const BOX_PADDING_PX = 20;
export default defineComponent({
components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
@@ -33,14 +35,14 @@ export default defineComponent({
const boxWidth = previewEl.getBoundingClientRect().width;
let translateX = '0',
translateY = '30px';
translateY = `calc(-100% - ${BOX_PADDING_PX}px)`;
if (val[0] <= boxWidth / 2) {
if (val[0] <= boxWidth / 2 + BOX_PADDING_PX) {
previewEl.style.left = '0';
translateX = '0px';
} else if (val[0] >= clientWidth - boxWidth / 2) {
translateX = BOX_PADDING_PX + 'px';
} else if (val[0] >= clientWidth - boxWidth / 2 - BOX_PADDING_PX) {
previewEl.style.left = '100%';
translateX = '-100%';
translateX = `calc(-100% - ${BOX_PADDING_PX}px)`;
} else {
previewEl.style.left = `${val[0]}px`;
translateX = '-50%';
@@ -49,10 +51,10 @@ export default defineComponent({
previewEl.style.top = `${val[1]}px`;
const isOutside =
val[1] + previewEl.getBoundingClientRect().height + 30 >=
window.innerHeight + window.scrollY;
val[1] - previewEl.getBoundingClientRect().height <=
window.scrollY + BOX_PADDING_PX * 2;
if (isOutside) translateY = 'calc(-100% - 30px)';
if (isOutside) translateY = BOX_PADDING_PX + 'px';
previewEl.style.transform = `translate(${translateX}, ${translateY})`;
});
}
src/components/Tooltip/VehiclePreviewTooltip.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default defineComponent({
.tooltip-content {
width: 300px;
min-height: 200px;
background-color: #333;
background-color: #1f1f1f;
box-shadow: 0 0 10px 2px #aaa;
padding: 0.5em;
src/components/TrainsView/StopLabel.vue
+4 -4
View File
@@ -4,10 +4,10 @@
:data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po') && !stop.duration)"
>
<router-link v-if="/(, podg$|<strong>)/.test(stop.nameHtml)" :to="sceneryHref">
<span class="name" v-html="stop.nameHtml"></span>
<span class="stop-name" v-html="stop.nameHtml"></span>
</router-link>
<span v-else class="name" v-html="stop.nameHtml"></span>
<span v-else class="stop-name" v-html="stop.nameHtml"></span>
<span
v-if="stop.position != 'begin'"
@@ -107,7 +107,7 @@ s {
flex-wrap: wrap;
align-items: center;
.name {
.stop-name {
background: $stopNameClr;
border-radius: 0.5em 0 0 0.5em;
padding: 0.3em 0.5em;
@@ -134,7 +134,7 @@ s {
display: none;
}
.name {
.stop-name {
background: none;
color: #aaa;
padding: 0;
src/components/TrainsView/TrainInfo.vue
+31 -3
View File
@@ -8,11 +8,21 @@
#{{ train.timetableData.timetableId }}
</span>
<span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
<span
class="train-badge twr"
v-if="train.timetableData?.TWR"
data-tooltip-type="BaseTooltip"
:data-tooltip-content="$t('general.TWR') + `:\n${train.timetableData.warningNotes}`"
>
TWR
</span>
<span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
<span
class="train-badge skr"
v-if="train.timetableData?.SKR"
data-tooltip-type="BaseTooltip"
:data-tooltip-content="$t('general.SKR')"
>
SKR
</span>
@@ -129,6 +139,20 @@
<div class="text--grayed" style="margin-top: 0.25em">
{{ displayTrainPosition(train) }}
</div>
<div
class="train-dangers"
v-if="extended && (train.timetableData?.TWR || train.timetableData?.SKR)"
>
<div v-if="train.timetableData.TWR">
<b style="color: var(--clr-twr)">TWR</b> - {{ $t('general.TWR') }}
<i>({{ train.timetableData?.warningNotes }})</i>
</div>
<div v-if="train.timetableData.SKR">
<b style="color: var(--clr-skr)">SKR</b> - {{ $t('general.SKR') }}
</div>
</div>
</section>
<section class="train-stats" v-if="!extended">
@@ -199,7 +223,7 @@ export default defineComponent({
query: {
'search-driver': this.train.driverName
}
}
};
}
}
});
@@ -226,6 +250,10 @@ export default defineComponent({
line-height: 1.5em;
}
.train-dangers {
margin-top: 0.5em;
}
.train-info {
display: grid;
grid-template-columns: 2fr 1fr;
src/components/TrainsView/TrainTable.vue
+3 -3
View File
@@ -82,10 +82,10 @@ export default defineComponent({
@import '../../styles/animations.scss';
.train-table {
position: relative;
height: calc(100vh - 11em);
min-height: 500px;
height: 90vh;
min-height: 550px;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
src/locales/en.json
+12 -3
View File
@@ -83,7 +83,9 @@
"ZN": "inspection / diagnostic type",
"ZU": "other maintenance type",
"ZG": "emergency (deprecated category)",
"ZG": "emergency (deprecated)",
"AP": "voivodeship regio (deprecated)",
"E": "electric loco",
"J": "EMU",
@@ -407,9 +409,10 @@
"driver-return-link": "GO BACK",
"driver-not-found-header": "Train not found! :/",
"driver-not-found-desc-1": "This train has already been terminated or it's offline.",
"driver-not-found-desc-1": "This train has already been terminated, changed its number or is offline.",
"driver-not-found-desc-2": "You can browse timetable history in the",
"driver-not-found-journal": "TIMETABLES JOURNAL",
"driver-not-found-others": "Player {driver} is online as:",
"driver-not-found-return": "GO BACK TO THE MAIN SITE"
},
"train-stats": {
@@ -438,6 +441,7 @@
"no-further-data": "No further data for current parameters",
"loading-further-data": "Loading...",
"route-length": "Route length:",
"station-count": "Stations:",
@@ -455,11 +459,16 @@
"minutes": "{value} min | {value} mins",
"seconds": "{value} s",
"stock-info": "DETAILS",
"entry-details": "DETAILS",
"no-entry-details": "NO DETAILS AVAILABLE",
"stock-length": "Length",
"stock-mass": "Mass",
"stock-max-speed": "Max. speed",
"stock-dangers": "ADDITIONAL NOTES",
"stock-preview": "STOCK PREVIEW",
"load-data": "Load further data...",
"last-seen-at": "Last seen at",
src/locales/pl.json
+10 -2
View File
@@ -82,6 +82,8 @@
"ZU": "inny utrzymaniowy",
"ZG": "ratunkowy (kat. wycofana)",
"AP": "wojewódzki osobowy (kat. wycofana)",
"E": "elektrowóz",
"J": "EZT",
"S": "spalinowóz",
@@ -393,9 +395,10 @@
"driver-return-link": "POWRÓT",
"driver-not-found-header": "Nie znaleziono pociągu! :/",
"driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg lub jest offline.",
"driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg, zmienił numer lub jest offline.",
"driver-not-found-desc-2": "Historię rozkładów jazdy możesz przejrzeć w",
"driver-not-found-journal": "DZIENNIKU RJ",
"driver-not-found-others": "Gracz {driver} jest online jako:",
"driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
},
"train-stats": {
@@ -440,11 +443,16 @@
"timetable-abandoned": "PORZUCONY",
"timetable-online-button": "RJ ONLINE",
"stock-info": "SZCZEGÓŁY",
"entry-details": "SZCZEGÓŁY",
"no-entry-details": "BRAK DOSTĘPNYCH SZCZEGÓŁÓW",
"stock-length": "Długość",
"stock-mass": "Masa",
"stock-max-speed": "Prędkość maks.",
"stock-dangers": "DODATKOWE UWAGI",
"stock-preview": "PODGLĄD SKŁADU",
"load-data": "Pobierz dalszą historię...",
"last-seen-at": "Ostatnio widziany na: ",
src/mixins/dateMixin.ts
+6 -2
View File
@@ -57,6 +57,10 @@ export default defineComponent({
: '';
},
dateStringToTimestamp(dateString?: string) {
return dateString ? new Date(dateString).getTime() : 0;
},
calculateDuration(timestampMs: number, showSeconds = false) {
const secondsTotal = Math.floor(timestampMs / 1000);
const minsTotal = Math.round(timestampMs / 60000);
@@ -70,8 +74,8 @@ export default defineComponent({
minsInHour
)}`
: showSeconds && secondsTotal <= 60
? this.$t('journal.seconds', { value: secondsTotal }, secondsTotal)
: this.$t('journal.minutes', { value: minsTotal }, minsTotal);
? this.$t('journal.seconds', { value: secondsTotal }, secondsTotal)
: this.$t('journal.minutes', { value: minsTotal }, minsTotal);
}
}
});
src/router/index.ts
+2 -7
View File
@@ -69,7 +69,8 @@ const router = createRouter({
if (
(to.name == 'SceneryView' || to.name == 'DriverView') &&
from.name !== to.name &&
from.query['view'] === undefined
from.query['view'] === undefined &&
!savedPosition
)
return { el: `.app_main`, top: -15 };
@@ -79,10 +80,4 @@ const router = createRouter({
routes
});
router.beforeEach((to, from, next) => {
next((vm) => {
(vm as any)['xd'] = 'xd';
});
});
export default router;
src/store/apiStore.ts
+16 -27
View File
@@ -19,6 +19,7 @@ export const useApiStore = defineStore('apiStore', {
sceneryData: [] as StationJSONData[],
nextUpdateTime: 0,
nextDataCheckTime: 0,
client: undefined as AxiosInstance | undefined,
@@ -48,17 +49,26 @@ export const useApiStore = defineStore('apiStore', {
},
async connectToAPI() {
// Static data
this.fetchDonatorsData();
this.fetchStationsGeneralInfo();
this.fetchVehiclesInfo();
window.requestAnimationFrame(this.updateTick);
},
updateTick(t: number) {
if (this.dataStatuses.connection == Status.Data.Offline) return;
// Static data refresh
if (t >= this.nextDataCheckTime) {
this.fetchDonatorsData();
this.fetchVehiclesInfo();
// Revalidation after staling
this.fetchStationsGeneralInfo().then(() => {
this.fetchStationsGeneralInfo();
});
this.nextDataCheckTime = t + 3600000;
}
// Active data fefresh
if (t >= this.nextUpdateTime) {
this.fetchActiveData();
this.nextUpdateTime = t + 20000;
@@ -68,17 +78,6 @@ export const useApiStore = defineStore('apiStore', {
},
async fetchActiveData() {
// if (import.meta.env.VITE_API_ACTIVE_DATA_MODE == 'mocking') {
// import('../../tests/data/getActiveData.json').then((data) => {
// console.warn('activeData: mocking mode');
// this.activeData = data.default as API.ActiveData.Response;
// this.dataStatuses.connection = Status.Data.Loaded;
// });
// return;
// }
if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
try {
@@ -105,7 +104,7 @@ export const useApiStore = defineStore('apiStore', {
async fetchStationsGeneralInfo() {
try {
const sceneryData: StationJSONData[] = (
await this.client!.get<StationJSONData[]>('api/getSceneries')
await this.client!.get<StationJSONData[]>(`api/getSceneries`)
).data;
this.dataStatuses.sceneries = Status.Data.Loaded;
@@ -117,16 +116,6 @@ export const useApiStore = defineStore('apiStore', {
},
async fetchVehiclesInfo() {
// if (import.meta.env.VITE_API_VEHICLES_MODE == 'mocking') {
// import('../../tests/data/vehicles.json').then((data) => {
// console.warn('vehicles.json: mocking mode');
// this.vehiclesData = data.default;
// this.dataStatuses.vehicles = Status.Data.Loaded;
// });
// return;
// }
try {
const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');
src/store/mainStore.ts
+2 -1
View File
@@ -94,7 +94,8 @@ export const useMainStore = defineStore('mainStore', {
followingStops: timetable.stopList,
routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
sceneries: timetable.sceneries,
// sceneryNames: sceneryNames.reverse(),
warningNotes: timetable.warningNotes,
timetablePath: timetable.path.split(';').map((pathElementString) => {
const [arrival, station, departure] = pathElementString.split(',');
src/styles/JournalSection.scss
+3 -3
View File
@@ -11,8 +11,8 @@
.list_wrapper {
overflow-y: auto;
height: 90vh;
min-height: 650px;
height: calc(100vh - 12.5em);
min-height: 500px;
margin-top: 0.5em;
position: relative;
@@ -20,7 +20,7 @@
}
.journal_wrapper {
max-width: 1500px;
max-width: var(--max-container-width);
width: 100%;
margin: 0 auto;
src/styles/JournalStats.scss
+1 -2
View File
@@ -8,7 +8,6 @@
z-index: 99;
transform: translateY(1em);
width: 100%;
background-color: #1a1a1a;
@@ -30,7 +29,7 @@ hr.section-separator {
.info-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em;
}
src/styles/animations.scss
+2 -2
View File
@@ -41,11 +41,11 @@ $animType: ease-in-out;
}
&-enter-active {
transition: all $animDuration ease-out;
transition: all $animDuration ease-in-out;
}
&-leave-active {
transition: all $animDuration ease-out;
transition: all $animDuration ease-in-out;
}
}
src/styles/badge.scss
+1
View File
@@ -1,4 +1,5 @@
@import 'variables.scss';
@import 'responsive.scss';
.badge {
font-weight: 600;
src/styles/global.scss
+12
View File
@@ -227,6 +227,10 @@ a.a-button {
&:hover {
background-color: #424242;
}
&:disabled {
opacity: 0.75;
}
}
&.btn--option {
@@ -345,3 +349,11 @@ a.a-button {
width: 100%;
}
}
.g-separator {
display: block;
width: 100%;
height: 2px;
background-color: #aaa;
margin: 0.5em 0;
}
src/typings/api.ts
+11 -11
View File
@@ -17,13 +17,13 @@ export namespace API {
trainsAPI: APIDataStatus;
dispatchersAPI: APIDataStatus;
sceneryRequirementsAPI: APIDataStatus;
caches: APICache[];
}
export interface Response {
activeSceneries?: API.ActiveSceneries.Response;
trains?: API.ActiveTrains.Response;
apiStatuses?: APIStatuses;
caches: APICache[];
}
}
@@ -204,6 +204,7 @@ export namespace API {
sceneries: string[];
path: string;
warningNotes: string | null;
}
}
@@ -246,8 +247,6 @@ export namespace API {
authorName?: string;
authorId?: number;
stopsString?: string;
stockString?: string;
stockHistory: string[];
@@ -255,17 +254,18 @@ export namespace API {
stockLength?: number;
maxSpeed?: number;
hashesString?: string;
currentSceneryName?: string;
currentSceneryHash?: string;
routeSceneries?: string;
checkpointArrivals?: string[];
checkpointDepartures?: string[];
checkpointArrivalsScheduled?: string[];
checkpointDeparturesScheduled?: string[];
checkpointStopTypes?: string[];
visitedSceneries?: string[];
routeSceneries: string;
checkpointArrivals: string[];
checkpointDepartures: string[];
checkpointArrivalsScheduled: string[];
checkpointDeparturesScheduled: string[];
checkpointStopTypes: string[];
visitedSceneries: string[];
sceneryNames: string[];
path: string;
warningNotes: string | null;
}
export type Response = Data[];
src/typings/common.ts
+15 -12
View File
@@ -72,19 +72,22 @@ export interface Train {
isTimeout: boolean;
isSupporter: boolean;
driverRouteLocation: RouteLocationRaw,
driverRouteLocation: RouteLocationRaw;
timetableData?: {
timetableId: number;
category: string;
route: string;
followingStops: TrainStop[];
TWR: boolean;
SKR: boolean;
routeDistance: number;
sceneries: string[];
timetablePath: TimetablePathElement[];
};
timetableData?: TrainTimetableData;
}
export interface TrainTimetableData {
timetableId: number;
category: string;
route: string;
followingStops: TrainStop[];
TWR: boolean;
SKR: boolean;
routeDistance: number;
sceneries: string[];
timetablePath: TimetablePathElement[];
warningNotes: string | null;
}
export interface Station {
src/views/DriverView.vue
+50 -12
View File
@@ -3,6 +3,13 @@
<div class="view-wrapper">
<div v-if="chosenTrain">
<div class="actions">
<a class="a-button btn--image" @click="$router.back()">
<img src="/images/icon-back.svg" alt="train icon" />
<span>
{{ $t('trains.driver-return-link') }}
</span>
</a>
<router-link
:to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
class="a-button btn--image"
@@ -24,7 +31,8 @@
<div v-else class="driver-not-found">
<h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
<p>
<p class="text--grayed">
{{ $t('trains.driver-not-found-desc-1') }} <br />
{{ $t('trains.driver-not-found-desc-2') }}
<router-link to="/journal/timetables"
@@ -32,25 +40,44 @@
>!
</p>
<router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
<p v-if="props.trainId && otherDriverTrains.length > 0">
<i18n-t keypath="trains.driver-not-found-others">
<template v-slot:driver>
<b>{{ otherDriverTrains[0].driverName }}</b>
</template>
</i18n-t>
</p>
<div class="other-driver-trains">
<template v-for="(train, i) in otherDriverTrains">
<router-link :to="`/driver?trainId=${train.id}`">
{{ train.trainNo }}
| {{ regionsJSON.find((r) => r.id == train.region)?.name ?? 'PL1' }}
</router-link>
</template>
</div>
<div style="margin-top: 1em">
<router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { computed, onActivated, onMounted, useAttrs } from 'vue';
import { computed } from 'vue';
import TrainInfo from '../components/TrainsView/TrainInfo.vue';
import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
import Loading from '../components/Global/Loading.vue';
import { useMainStore } from '../store/mainStore';
import { useApiStore } from '../store/apiStore';
import { Status } from '../typings/common';
import { regions as regionsJSON } from '../data/options.json';
const props = defineProps({
trainId: {
type: String,
required: true
type: String
},
modalId: {
@@ -65,8 +92,12 @@ const chosenTrain = computed(() =>
mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
);
onActivated(() => {
console.log();
const otherDriverTrains = computed(() => {
return mainStore.trainList.filter(
(train) =>
train.driverId == Number(props.trainId?.split('|')[0]) &&
(train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
);
});
</script>
@@ -78,14 +109,14 @@ $viewBgCol: #1a1a1a;
.driver-view {
margin: 0 auto;
padding: 1em 0;
max-width: 2000px;
min-height: 95vh;
max-width: var(--max-container-width);
min-height: calc(100vh - 7em);
}
.actions {
display: flex;
align-items: flex-end;
justify-content: flex-end;
justify-content: space-between;
gap: 0.5em;
}
@@ -108,10 +139,10 @@ $viewBgCol: #1a1a1a;
background-color: $viewBgCol;
text-align: center;
padding: 1em;
border-radius: 0.5em 0.5em;
p {
padding: 1em 0;
color: #aaa;
padding: 0.5em 0;
}
a {
@@ -120,6 +151,13 @@ $viewBgCol: #1a1a1a;
}
}
.other-driver-trains {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5em;
}
@include smallScreen {
.actions > a > span.hidable {
display: none;
src/views/JournalTimetables.vue
-8
View File
@@ -306,14 +306,6 @@ export default defineComponent({
this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
});
// this.searchersValues['search-date'] = options['search-date'] ?? '';
// this.searchersValues['search-driver'] = options['search-driver'] ?? '';
// this.searchersValues['search-train'] = options['search-train'] ?? '';
// this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
// this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
// this.searchersValues['search-via'] = options['search-via'] ?? '';
// this.searchersValues['search-terminatingAt'] = options['search-terminatingAt'] ?? '';
this.sorterActive.id =
(options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
src/views/SceneryView.vue
+1 -1
View File
@@ -234,7 +234,7 @@ button.back-btn {
padding: 1em 0.5em;
height: calc(100vh - 0.5em);
min-height: 800px;
min-height: 500px;
max-height: 2000px;
}
src/views/StationsView.vue
+4 -1
View File
@@ -101,7 +101,6 @@ export default defineComponent({
gap: 0.5em;
position: relative;
margin-bottom: 0.5em;
}
@@ -122,4 +121,8 @@ button.btn-donation {
}
}
}
.count {
padding: 0.5em;
}
</style>
src/views/TrainsView.vue
+1 -2
View File
@@ -117,13 +117,12 @@ export default defineComponent({
@import '../styles/responsive.scss';
.trains-view {
min-height: 600px;
position: relative;
}
.trains_wrapper {
margin: 1rem auto;
max-width: 1500px;
max-width: var(--max-container-width);
}
.trains_topbar {