mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
feat(scenery): added optional displaying active timetables' rolling stock thumbnails
This commit is contained in:
@@ -54,150 +54,154 @@
|
|||||||
{{ $t('scenery.no-timetables') }}
|
{{ $t('scenery.no-timetables') }}
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li
|
<li v-else class="timetable-item" v-for="(row, i) in sceneryTimetables" :key="row.train.id">
|
||||||
v-else
|
|
||||||
v-for="(row, i) in sceneryTimetables"
|
|
||||||
:key="row.train.id"
|
|
||||||
>
|
|
||||||
<!-- {{ row.train.id + row.checkpointStop.arrivalTimestamp.toString() }} -->
|
<!-- {{ row.train.id + row.checkpointStop.arrivalTimestamp.toString() }} -->
|
||||||
<router-link class="timetable-item-link" tabindex="0" :to="row.train.driverRouteLocation">
|
<router-link class="item-link" tabindex="0" :to="row.train.driverRouteLocation">
|
||||||
<span class="item-general">
|
<div class="item-top">
|
||||||
<span class="general-info">
|
<div class="top-general">
|
||||||
<div class="info-train">
|
<span class="general-info">
|
||||||
<!-- Cargo warnings & details badges -->
|
<div class="info-train">
|
||||||
<span
|
<!-- Cargo warnings & details badges -->
|
||||||
class="train-badge twr"
|
<span
|
||||||
v-if="row.train.timetableData!.twr"
|
class="train-badge twr"
|
||||||
data-tooltip-type="BaseTooltip"
|
v-if="row.train.timetableData!.twr"
|
||||||
:data-tooltip-content="$t('warnings.TWR')"
|
data-tooltip-type="BaseTooltip"
|
||||||
>
|
:data-tooltip-content="$t('warnings.TWR')"
|
||||||
TWR
|
>
|
||||||
</span>
|
TWR
|
||||||
|
</span>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
class="train-badge tn"
|
class="train-badge tn"
|
||||||
v-if="row.train.timetableData!.hasDangerousCargo"
|
v-if="row.train.timetableData!.hasDangerousCargo"
|
||||||
data-tooltip-type="BaseTooltip"
|
data-tooltip-type="BaseTooltip"
|
||||||
:data-tooltip-content="$t('warnings.TN')"
|
:data-tooltip-content="$t('warnings.TN')"
|
||||||
>
|
>
|
||||||
TN
|
TN
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
class="train-badge pn"
|
class="train-badge pn"
|
||||||
v-if="row.train.timetableData!.hasExtraDeliveries"
|
v-if="row.train.timetableData!.hasExtraDeliveries"
|
||||||
data-tooltip-type="BaseTooltip"
|
data-tooltip-type="BaseTooltip"
|
||||||
:data-tooltip-content="$t('warnings.PN')"
|
:data-tooltip-content="$t('warnings.PN')"
|
||||||
>
|
>
|
||||||
PN
|
PN
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!-- Train info -->
|
<!-- Train info -->
|
||||||
<span
|
<span
|
||||||
data-tooltip-type="TrainInfoTooltip"
|
data-tooltip-type="TrainInfoTooltip"
|
||||||
:data-tooltip-content="row.train.id"
|
:data-tooltip-content="row.train.id"
|
||||||
class="tooltip-help"
|
class="tooltip-help"
|
||||||
>
|
>
|
||||||
<b class="text--primary">
|
<b class="text--primary">
|
||||||
{{ row.train.timetableData!.category }}
|
{{ row.train.timetableData!.category }}
|
||||||
</b>
|
</b>
|
||||||
|
|
||||||
<b> {{ row.train.trainNo }}</b>
|
<b> {{ row.train.trainNo }}</b>
|
||||||
•
|
•
|
||||||
{{ row.train.driverName }}
|
{{ row.train.driverName }}
|
||||||
|
|
||||||
<i
|
<i
|
||||||
class="fa-solid fa-user-slash"
|
class="fa-solid fa-user-slash"
|
||||||
style="color: salmon"
|
style="color: salmon"
|
||||||
v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
|
v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
|
||||||
></i>
|
></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!-- Train stop comments -->
|
<!-- Train stop comments -->
|
||||||
<span
|
<span
|
||||||
v-if="row.checkpointStop.comments"
|
v-if="row.checkpointStop.comments"
|
||||||
class="stop-comments-icon"
|
class="stop-comments-icon"
|
||||||
data-tooltip-type="BaseTooltip"
|
data-tooltip-type="BaseTooltip"
|
||||||
:data-tooltip-content="row.checkpointStop.comments"
|
:data-tooltip-content="row.checkpointStop.comments"
|
||||||
>
|
>
|
||||||
<img src="/images/icon-warning.svg" />
|
<img src="/images/icon-warning.svg" />
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-route">
|
|
||||||
<strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ScheduledTrainStatus :sceneryTimetableRow="row" />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="item-schedule">
|
|
||||||
<span class="schedule-arrival">
|
|
||||||
<span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
|
|
||||||
{{ $t('timetables.begins') }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="arrival-time" v-else>
|
|
||||||
<div v-if="row.checkpointStop.arrivalDelay == 0">
|
|
||||||
<span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div>
|
|
||||||
<s style="margin-right: 0.2em" class="text--grayed">{{
|
|
||||||
timestampToTimeString(row.checkpointStop.arrivalTimestamp)
|
|
||||||
}}</s>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
{{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
|
|
||||||
({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
|
|
||||||
}}{{ row.checkpointStop.arrivalDelay }})
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="schedule-stop">
|
<div class="info-route">
|
||||||
<span class="stop-connection">
|
<strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
|
||||||
{{ row.currentElement.arrivalRouteExt }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="stop-time">
|
|
||||||
{{ row.checkpointStop.stopTime || '' }}
|
|
||||||
{{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="stop-connection">
|
|
||||||
{{ row.currentElement.departureRouteExt }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="schedule-departure">
|
|
||||||
<span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
|
|
||||||
{{ $t('timetables.terminates') }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="departure-time" v-else>
|
|
||||||
<div v-if="row.checkpointStop.departureDelay == 0">
|
|
||||||
<span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
|
||||||
<div>
|
<ScheduledTrainStatus :sceneryTimetableRow="row" />
|
||||||
<s style="margin-right: 0.2em" class="text--grayed">{{
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="top-schedule">
|
||||||
|
<span class="schedule-arrival">
|
||||||
|
<span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
|
||||||
|
{{ $t('timetables.begins') }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="arrival-time" v-else>
|
||||||
|
<div v-if="row.checkpointStop.arrivalDelay == 0">
|
||||||
|
<span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<s style="margin-right: 0.2em" class="text--grayed">{{
|
||||||
|
timestampToTimeString(row.checkpointStop.arrivalTimestamp)
|
||||||
|
}}</s>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
{{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
|
||||||
|
({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
|
||||||
|
}}{{ row.checkpointStop.arrivalDelay }})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="schedule-stop">
|
||||||
|
<span class="stop-connection">
|
||||||
|
{{ row.currentElement.arrivalRouteExt }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="stop-time">
|
||||||
|
{{ row.checkpointStop.stopTime || '' }}
|
||||||
|
{{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="stop-connection">
|
||||||
|
{{ row.currentElement.departureRouteExt }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="schedule-departure">
|
||||||
|
<span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
|
||||||
|
{{ $t('timetables.terminates') }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="departure-time" v-else>
|
||||||
|
<div v-if="row.checkpointStop.departureDelay == 0">
|
||||||
|
<span>{{
|
||||||
timestampToTimeString(row.checkpointStop.departureTimestamp)
|
timestampToTimeString(row.checkpointStop.departureTimestamp)
|
||||||
}}</s>
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<s style="margin-right: 0.2em" class="text--grayed">{{
|
||||||
|
timestampToTimeString(row.checkpointStop.departureTimestamp)
|
||||||
|
}}</s>
|
||||||
|
</div>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
{{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
|
{{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
|
||||||
({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
|
({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
|
||||||
}}{{ row.checkpointStop.departureDelay }})
|
}}{{ row.checkpointStop.departureDelay }})
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
|
<div class="item-stock-list" v-if="showStockThumbnails">
|
||||||
|
<StockList :trainStockList="row.train.stockList" />
|
||||||
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
@@ -206,7 +210,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, ComputedRef, PropType } from 'vue';
|
import { computed, ComputedRef, PropType, ref } from 'vue';
|
||||||
import { Station, ActiveScenery } from '../../../typings/common';
|
import { Station, ActiveScenery } from '../../../typings/common';
|
||||||
import { SceneryTimetableRow } from '../typings';
|
import { SceneryTimetableRow } from '../typings';
|
||||||
import { getTrainStopStatus, stopStatusPriorities } from '../utils';
|
import { getTrainStopStatus, stopStatusPriorities } from '../utils';
|
||||||
@@ -216,6 +220,7 @@ import { useApiStore } from '../../../store/apiStore';
|
|||||||
import { timestampToTimeString } from '../../../composables/time';
|
import { timestampToTimeString } from '../../../composables/time';
|
||||||
import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
|
import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
|
||||||
import Loading from '../../Global/Loading.vue';
|
import Loading from '../../Global/Loading.vue';
|
||||||
|
import StockList from '../../Global/StockList.vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
station: {
|
station: {
|
||||||
@@ -236,6 +241,8 @@ const route = useRoute();
|
|||||||
const mainStore = useMainStore();
|
const mainStore = useMainStore();
|
||||||
const apiStore = useApiStore();
|
const apiStore = useApiStore();
|
||||||
|
|
||||||
|
const showStockThumbnails = ref(false);
|
||||||
|
|
||||||
const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
|
const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
|
||||||
if (!props.onlineScenery) return [];
|
if (!props.onlineScenery) return [];
|
||||||
|
|
||||||
@@ -292,7 +299,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
|
|||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-general {
|
.top-general {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -300,7 +307,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-schedule {
|
.top-schedule {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 0.2em;
|
gap: 0.2em;
|
||||||
@@ -341,18 +348,12 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timetable-item,
|
.timetable-item {
|
||||||
.timetable-item-link {
|
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
padding: 0.5em;
|
padding: 0.35em;
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 1.2em 0.5em;
|
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
background: #353535;
|
background: #353535;
|
||||||
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
@@ -364,6 +365,16 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timetable-item > .item-link > .item-top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 1.2em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timetable-item > .item-link > .item-stock-list {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.general-info {
|
.general-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user