mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
488 lines
14 KiB
Vue
488 lines
14 KiB
Vue
<template>
|
|
<transition-group class="journal-list" tag="ul" name="list-anim">
|
|
<li
|
|
v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
|
|
class="journal_item"
|
|
:key="timetable.id"
|
|
@click="showExtraInfo.value = !showExtraInfo.value"
|
|
>
|
|
<div class="journal_item-info">
|
|
<div class="info-general">
|
|
<span
|
|
class="general-train"
|
|
tabindex="0"
|
|
@click.stop="showTimetable(timetable)"
|
|
@keydown.enter="showTimetable(timetable)"
|
|
style="cursor: pointer"
|
|
>
|
|
<span class="text--grayed">#{{ timetable.id }}</span>
|
|
|
|
<span class="badges" v-if="timetable.skr || timetable.twr">
|
|
<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>
|
|
|
|
<span>
|
|
<strong class="text--primary">
|
|
{{ timetable.trainCategoryCode }}
|
|
</strong>
|
|
<strong> {{ timetable.trainNo }}</strong>
|
|
</span>
|
|
•
|
|
<strong
|
|
v-if="timetable.driverLevel !== null"
|
|
class="level-badge driver"
|
|
:style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
|
|
>
|
|
{{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
|
|
</strong>
|
|
|
|
<strong>{{ timetable.driverName }}</strong>
|
|
</span>
|
|
|
|
<span class="general-time">
|
|
<b class="info-date"
|
|
>{{
|
|
new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
|
|
? localeDateTime(timetable.createdAt, $i18n.locale)
|
|
: localeDateTime(timetable.beginDate, $i18n.locale)
|
|
}}
|
|
</b>
|
|
|
|
<b
|
|
class="info-badge"
|
|
:class="{
|
|
fulfilled: timetable.fulfilled,
|
|
terminated: timetable.terminated && !timetable.fulfilled,
|
|
active: !timetable.terminated,
|
|
}"
|
|
>
|
|
{{
|
|
!timetable.terminated
|
|
? $t('journal.timetable-active')
|
|
: timetable.fulfilled
|
|
? $t('journal.timetable-fulfilled')
|
|
: `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
|
|
}}
|
|
</b>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="info-route">
|
|
<b>{{ timetable.route.replace('|', ' - ') }}</b>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<!-- Spis postojów -->
|
|
<div class="stop-list" v-if="showExtraInfo.value == true">
|
|
<span
|
|
v-for="(stop, i) in stops.filter((_, i) => (!showExtraInfo.value ? i == 0 || i == stops.length - 1 : true))"
|
|
class="stop-list-item"
|
|
:key="stop.stopName"
|
|
:data-confirmed="stop.confirmed"
|
|
>
|
|
<span v-if="i > 0">
|
|
>
|
|
<span v-if="!showExtraInfo.value && i == 1 && stops.length > 2">
|
|
... (+{{ stops.length - 2 }}) >
|
|
</span>
|
|
</span>
|
|
|
|
<span class="stop-name">{{ stop.stopName }}</span>
|
|
<span v-html="stop.html"></span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Status RJ -->
|
|
<div class="info-status" style="margin: 0.5em 0">
|
|
<ProgressBar
|
|
:progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 100"
|
|
:progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
|
|
/>
|
|
|
|
<span :style="{ color: timetable.terminated && timetable.fulfilled ? 'lightgreen' : '' }">
|
|
<span>
|
|
{{ timetable.currentDistance + ' km' }}
|
|
</span>
|
|
<span> / </span>
|
|
<span>{{ timetable.routeDistance }} km</span>
|
|
</span>
|
|
|
|
<span class="text--grayed" v-if="timetable.currentSceneryName">
|
|
<b>
|
|
{{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
|
|
{{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
|
|
|
|
<span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">(</span>
|
|
|
|
<span v-if="timetable.currentLocation[1]">
|
|
{{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
|
|
</span>
|
|
|
|
<span v-else-if="timetable.currentLocation[0]">
|
|
{{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
|
|
</span>
|
|
|
|
<span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">)</span>
|
|
</b>
|
|
</span>
|
|
</div>
|
|
|
|
<button class="btn--option btn--show">
|
|
{{ $t('journal.stock-info') }}
|
|
<img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
|
|
</button>
|
|
|
|
<!-- Dodatkowe informacje -->
|
|
<div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
|
|
<hr />
|
|
|
|
<div class="stock-specs">
|
|
<span class="badge specs-badge">
|
|
<span>{{ $t('journal.dispatcher-name') }}</span>
|
|
<span>{{ timetable.authorName }}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="stock-specs">
|
|
<span class="badge specs-badge">
|
|
<span>{{ $t('journal.stock-max-speed') }}</span>
|
|
<span>{{ timetable.maxSpeed }}km/h</span>
|
|
</span>
|
|
|
|
<span class="badge specs-badge">
|
|
<span>{{ $t('journal.stock-length') }}</span>
|
|
<span>
|
|
{{
|
|
item.currentHistoryIndex.value == 0
|
|
? timetable.stockLength
|
|
: stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
|
|
}}m
|
|
</span>
|
|
</span>
|
|
|
|
<span class="badge specs-badge">
|
|
<span>{{ $t('journal.stock-mass') }}</span>
|
|
<span>
|
|
{{
|
|
Math.floor(
|
|
(item.currentHistoryIndex.value == 0
|
|
? timetable.stockMass!
|
|
: stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
|
|
)
|
|
}}t
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Historia zmian w składzie -->
|
|
<div class="stock-history" v-if="stockHistoryComp.length > 1">
|
|
<button
|
|
class="btn--action"
|
|
v-for="(sh, i) in stockHistoryComp"
|
|
:data-checked="i == item.currentHistoryIndex.value"
|
|
@click.stop="item.currentHistoryIndex.value = i"
|
|
>
|
|
{{ sh.updatedAt }}
|
|
</button>
|
|
</div>
|
|
|
|
<ul class="stock-list">
|
|
<li
|
|
v-for="(car, i) in (item.currentHistoryIndex.value == 0
|
|
? timetable.stockString
|
|
: stockHistoryComp[item.currentHistoryIndex.value].stockString
|
|
).split(';')"
|
|
:key="i"
|
|
>
|
|
<img
|
|
@error="onImageError"
|
|
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
|
|
:alt="car"
|
|
/>
|
|
<div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</transition-group>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType, ref } from 'vue';
|
|
import dateMixin from '../../mixins/dateMixin';
|
|
import imageMixin from '../../mixins/imageMixin';
|
|
import modalTrainMixin from '../../mixins/modalTrainMixin';
|
|
import styleMixin from '../../mixins/styleMixin';
|
|
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
|
|
import ProgressBar from '../Global/ProgressBar.vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
timetableHistory: {
|
|
type: Array as PropType<TimetableHistory[]>,
|
|
required: true,
|
|
},
|
|
},
|
|
mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
|
|
computed: {
|
|
computedTimetableHistory() {
|
|
return this.timetableHistory.map((timetable) => ({
|
|
timetable,
|
|
stockHistoryComp: timetable.stockHistory
|
|
.slice()
|
|
.reverse()
|
|
.map((h) => {
|
|
const historyData = h.split('@');
|
|
return {
|
|
updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
}),
|
|
stockString: historyData[1],
|
|
stockMass: Number(historyData[2]) || undefined,
|
|
stockLength: Number(historyData[3]) || undefined,
|
|
};
|
|
}),
|
|
showExtraInfo: ref(false),
|
|
stops: this.getTimetableStops(timetable),
|
|
currentHistoryIndex: ref(0),
|
|
}));
|
|
},
|
|
},
|
|
methods: {
|
|
getTimetableStops(timetable: TimetableHistory) {
|
|
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 };
|
|
});
|
|
},
|
|
showTimetable(timetable: TimetableHistory) {
|
|
if (!timetable) return;
|
|
if (timetable.terminated) return;
|
|
this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
|
|
},
|
|
onImageError(e: Event) {
|
|
const imageEl = e.target as HTMLImageElement;
|
|
imageEl.src = this.getImage('unknown.png');
|
|
},
|
|
},
|
|
components: { ProgressBar },
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../styles/animations.scss';
|
|
@import '../../styles/variables.scss';
|
|
@import '../../styles/responsive.scss';
|
|
@import '../../styles/badge.scss';
|
|
@import '../../styles/JournalSection.scss';
|
|
|
|
.journal_item {
|
|
cursor: pointer;
|
|
}
|
|
|
|
hr {
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
.info {
|
|
&-date {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
&-badge {
|
|
padding: 0.05em 0.35em;
|
|
color: black;
|
|
|
|
&.terminated {
|
|
background-color: salmon;
|
|
}
|
|
|
|
&.fulfilled {
|
|
background-color: lightgreen;
|
|
}
|
|
|
|
&.active {
|
|
background-color: lightblue;
|
|
}
|
|
}
|
|
|
|
&-general {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
gap: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
&-route {
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
&-extended {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
&-status {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
}
|
|
}
|
|
|
|
.general-train {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
ul.stock-list {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
overflow: auto;
|
|
padding-bottom: 0.5em;
|
|
margin-top: 1em;
|
|
|
|
li > div {
|
|
text-align: center;
|
|
color: #aaa;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
li > img {
|
|
vertical-align: text-bottom;
|
|
max-height: 60px;
|
|
}
|
|
}
|
|
|
|
.stock-specs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
margin-top: 0.5em;
|
|
|
|
.specs-badge {
|
|
margin: 0;
|
|
|
|
span:last-child {
|
|
color: black;
|
|
background-color: $accentCol;
|
|
}
|
|
}
|
|
}
|
|
|
|
// badge.scss
|
|
.badges {
|
|
display: flex;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.stock-history {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
margin-top: 1em;
|
|
|
|
button[data-checked='true'] {
|
|
color: $accentCol;
|
|
}
|
|
}
|
|
|
|
.stop-list {
|
|
word-wrap: break-word;
|
|
gap: 0.25em;
|
|
font-size: 0.9em;
|
|
|
|
color: #adadad;
|
|
|
|
&-item[data-confirmed='true'] {
|
|
color: lightgreen;
|
|
|
|
.stop-name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn--show {
|
|
display: flex;
|
|
font-weight: bold;
|
|
padding: 0.2em 0.45em;
|
|
|
|
img {
|
|
height: 1.3em;
|
|
}
|
|
}
|
|
|
|
@include smallScreen {
|
|
.journal_item-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.info-route {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.info-status {
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn--show {
|
|
margin: 1em auto 0 auto;
|
|
}
|
|
|
|
.info-general,
|
|
.general-train,
|
|
.stock-specs,
|
|
.stock-history {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|