mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
zmiana wyglądu listy dzienników
This commit is contained in:
@@ -1,57 +1,156 @@
|
||||
<template>
|
||||
<transition-group class="journal-list" tag="ul" name="list-anim">
|
||||
<li
|
||||
v-for="item in computedDispatcherHistory"
|
||||
:key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
|
||||
:class="{ sticky: typeof item == 'string' }"
|
||||
>
|
||||
<div v-if="typeof item == 'string'" class="journal_day">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div>
|
||||
<transition name="status-anim" mode="out-in">
|
||||
<div :key="dataStatus">
|
||||
<div class="journal_warning" v-if="store.isOffline">
|
||||
{{ $t('app.offline') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="journal_item"
|
||||
:class="{ online: item.isOnline }"
|
||||
@click="navigateToScenery(item.stationName, item.isOnline)"
|
||||
@keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
|
||||
tabindex="0"
|
||||
>
|
||||
<span class="item-general">
|
||||
<b
|
||||
v-if="item.dispatcherLevel !== null"
|
||||
class="level-badge dispatcher"
|
||||
:style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
|
||||
<Loading v-else-if="dataStatus == DataStatus.Loading" />
|
||||
|
||||
<div v-else-if="dataStatus == DataStatus.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 v-else>
|
||||
<table class="scenery-history-table">
|
||||
<thead>
|
||||
<th>Sceneria</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-hash') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-level') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-rate') }}</th>
|
||||
<th>{{ $t('scenery.dispatchers-history-date') }}</th>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="historyItem in dispatcherHistory">
|
||||
<td>
|
||||
<router-link :to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`">
|
||||
<b>{{ historyItem.stationName }}</b>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>#{{ historyItem.stationHash }}</td>
|
||||
<td>
|
||||
<router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
|
||||
<b>{{ historyItem.dispatcherName }}</b>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<b
|
||||
v-if="historyItem.dispatcherLevel !== null"
|
||||
class="level-badge dispatcher"
|
||||
:style="calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)"
|
||||
>
|
||||
{{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
|
||||
</b>
|
||||
</td>
|
||||
|
||||
<td class="text--primary">
|
||||
<b>{{ historyItem.dispatcherRate }}</b>
|
||||
</td>
|
||||
|
||||
<td style="min-width: 250px" class="time">
|
||||
<span v-if="historyItem.timestampTo">
|
||||
<b>{{ $d(historyItem.timestampFrom) }}</b>
|
||||
|
||||
{{ timestampToString(historyItem.timestampFrom) }}
|
||||
- {{ timestampToString(historyItem.timestampTo) }} ({{
|
||||
calculateDuration(historyItem.currentDuration)
|
||||
}})
|
||||
</span>
|
||||
|
||||
<span class="dispatcher-online" v-else>
|
||||
<b class="text--online">
|
||||
{{ $t('journal.online-since') }} {{ timestampToString(historyItem.timestampFrom) }}
|
||||
</b>
|
||||
({{ calculateDuration(historyItem.currentDuration) }})
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <transition-group class="journal-list" tag="ul" name="list-anim">
|
||||
<li
|
||||
v-for="item in computedDispatcherHistory"
|
||||
:key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
|
||||
:class="{ sticky: typeof item == 'string' }"
|
||||
>
|
||||
<div v-if="typeof item == 'string'" class="journal_day">
|
||||
{{ item }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="journal_item"
|
||||
:class="{ online: item.isOnline }"
|
||||
@click="navigateToScenery(item.stationName, item.isOnline)"
|
||||
@keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
|
||||
tabindex="0"
|
||||
>
|
||||
<span class="item-general">
|
||||
<b
|
||||
v-if="item.dispatcherLevel !== null"
|
||||
class="level-badge dispatcher"
|
||||
:style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
|
||||
>
|
||||
{{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
|
||||
</b>
|
||||
|
||||
<b class="text--primary">{{ item.dispatcherName }}</b> • <b>{{ item.stationName }}</b>
|
||||
<span class="text--grayed"> #{{ item.stationHash }} </span>
|
||||
<span class="region-badge" :class="item.region">PL1</span>
|
||||
<span class="like-count" v-if="item.dispatcherRate">
|
||||
<img :src="getIcon('like')" alt="like icon" />
|
||||
{{ item.dispatcherRate }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="item-time">
|
||||
<span :data-status="item.isOnline">
|
||||
{{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}
|
||||
</span>
|
||||
<span>
|
||||
{{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
</span>
|
||||
|
||||
<span v-if="item.currentDuration && item.isOnline">
|
||||
({{ calculateDuration(item.currentDuration) }})
|
||||
</span>
|
||||
|
||||
<span v-if="item.timestampTo">
|
||||
>
|
||||
{{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group> -->
|
||||
|
||||
<button
|
||||
class="btn btn--option btn--load-data"
|
||||
v-if="!scrollNoMoreData && scrollDataLoaded && dispatcherHistory.length > 15"
|
||||
@click="addHistoryData"
|
||||
>
|
||||
{{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
|
||||
</b>
|
||||
|
||||
<b class="text--primary">{{ item.dispatcherName }}</b> • <b>{{ item.stationName }}</b>
|
||||
<span class="text--grayed"> #{{ item.stationHash }} </span>
|
||||
<span class="region-badge" :class="item.region">PL1</span>
|
||||
<span class="like-count" v-if="item.dispatcherRate">
|
||||
<img :src="getIcon('like')" alt="like icon" />
|
||||
{{ item.dispatcherRate }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="item-time">
|
||||
<span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }} </span>
|
||||
<span>
|
||||
{{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
</span>
|
||||
|
||||
<span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
|
||||
|
||||
<span v-if="item.timestampTo">
|
||||
>
|
||||
{{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
|
||||
({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
|
||||
</span>
|
||||
</span>
|
||||
{{ $t('journal.load-data') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
</transition>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -60,16 +159,37 @@ import dateMixin from '../../mixins/dateMixin';
|
||||
import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
|
||||
import styleMixin from '../../mixins/styleMixin';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import { DataStatus } from '../../scripts/enums/DataStatus';
|
||||
import { useStore } from '../../store/store';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [dateMixin, styleMixin, imageMixin],
|
||||
|
||||
props: {
|
||||
dispatcherHistory: {
|
||||
type: Array as PropType<DispatcherHistory[]>,
|
||||
required: true,
|
||||
},
|
||||
scrollNoMoreData: {
|
||||
type: Boolean,
|
||||
},
|
||||
scrollDataLoaded: {
|
||||
type: Boolean,
|
||||
},
|
||||
addHistoryData: {
|
||||
type: Function as PropType<() => void>,
|
||||
},
|
||||
dataStatus: {
|
||||
type: Object as PropType<DataStatus>,
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [dateMixin, styleMixin, imageMixin],
|
||||
data() {
|
||||
return {
|
||||
DataStatus,
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedDispatcherHistory() {
|
||||
@@ -105,79 +225,48 @@ export default defineComponent({
|
||||
@import '../../styles/animations.scss';
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/badge.scss';
|
||||
@import '../../styles/JournalSection.scss';
|
||||
@import '../../styles/variables.scss';
|
||||
@import '../../styles/JournalSection.scss';
|
||||
|
||||
li.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
table.scenery-history-table {
|
||||
width: 100%;
|
||||
background-color: #111;
|
||||
border-collapse: collapse;
|
||||
/* border-spacing: 0 0.5em; */
|
||||
text-align: center;
|
||||
|
||||
.journal_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
|
||||
gap: 0.5em 1em;
|
||||
|
||||
line-height: 1.7em;
|
||||
padding: 0.75em;
|
||||
|
||||
&.online {
|
||||
cursor: pointer;
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
span[data-status='true'] {
|
||||
th {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #353535;
|
||||
border: none;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.75em;
|
||||
border-bottom: solid 5px #1a1a1a;
|
||||
|
||||
.level-badge {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
&--online {
|
||||
color: springgreen;
|
||||
}
|
||||
|
||||
span[data-status='false'] {
|
||||
&--offline {
|
||||
color: salmon;
|
||||
}
|
||||
}
|
||||
|
||||
.item-general {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.level-badge {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.journal_day {
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
|
||||
background-color: #333;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
padding-right: 1em;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.like-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
font-size: 1.2em;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.journal_item {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,213 +1,249 @@
|
||||
<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 class="journal-list">
|
||||
<transition name="status-anim" mode="out-in">
|
||||
<div :key="dataStatus">
|
||||
<div class="journal_warning" v-if="store.isOffline">
|
||||
{{ $t('app.offline') }}
|
||||
</div>
|
||||
|
||||
<div class="info-route">
|
||||
<b>{{ timetable.route.replace('|', ' - ') }}</b>
|
||||
<Loading v-else-if="dataStatus == DataStatus.Loading" />
|
||||
|
||||
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
|
||||
{{ $t('app.error') }}
|
||||
</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 v-else-if="timetableHistory.length == 0" class="journal_warning">
|
||||
{{ $t('app.no-result') }}
|
||||
</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">
|
||||
<div v-else>
|
||||
<transition-group tag="ul" name="list-anim">
|
||||
<li
|
||||
v-for="(car, i) in (item.currentHistoryIndex.value == 0
|
||||
? timetable.stockString
|
||||
: stockHistoryComp[item.currentHistoryIndex.value].stockString
|
||||
).split(';')"
|
||||
:key="i"
|
||||
v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
|
||||
class="journal_item"
|
||||
:key="timetable.id"
|
||||
@click="showExtraInfo.value = !showExtraInfo.value"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
|
||||
{{ timetable.currentDistance + ' km' }}
|
||||
</span>
|
||||
<span> / </span>
|
||||
<span class="text--primary">{{ 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>
|
||||
</ul>
|
||||
</transition-group>
|
||||
|
||||
<button
|
||||
class="btn btn--option btn--load-data"
|
||||
v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
|
||||
@click="addHistoryData"
|
||||
>
|
||||
{{ $t('journal.load-data') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
</transition>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -216,17 +252,39 @@ import dateMixin from '../../mixins/dateMixin';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import modalTrainMixin from '../../mixins/modalTrainMixin';
|
||||
import styleMixin from '../../mixins/styleMixin';
|
||||
import { DataStatus } from '../../scripts/enums/DataStatus';
|
||||
import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
|
||||
import { useStore } from '../../store/store';
|
||||
import ProgressBar from '../Global/ProgressBar.vue';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
|
||||
props: {
|
||||
timetableHistory: {
|
||||
type: Array as PropType<TimetableHistory[]>,
|
||||
required: true,
|
||||
},
|
||||
scrollNoMoreData: {
|
||||
type: Boolean,
|
||||
},
|
||||
scrollDataLoaded: {
|
||||
type: Boolean,
|
||||
},
|
||||
addHistoryData: {
|
||||
type: Function as PropType<() => void>,
|
||||
},
|
||||
dataStatus: {
|
||||
type: Object as PropType<DataStatus>,
|
||||
},
|
||||
},
|
||||
mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
|
||||
|
||||
data() {
|
||||
return {
|
||||
DataStatus,
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedTimetableHistory() {
|
||||
return this.timetableHistory.map((timetable) => ({
|
||||
@@ -436,7 +494,7 @@ ul.stock-list {
|
||||
.stop-list {
|
||||
word-wrap: break-word;
|
||||
gap: 0.25em;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.95em;
|
||||
|
||||
color: #adadad;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user