mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
chore: changes in scenery view layout
This commit is contained in:
@@ -1,71 +1,73 @@
|
||||
<template>
|
||||
<section class="scenery-table-section">
|
||||
<Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
|
||||
<div class="scenery-dispatchers-history">
|
||||
<div class="history-wrapper">
|
||||
<Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
|
||||
|
||||
<div class="no-history" v-else-if="historyList.length == 0">
|
||||
{{ $t('scenery.history-list-empty') }}
|
||||
<div class="no-history" v-else-if="historyList.length == 0">
|
||||
{{ $t('scenery.history-list-empty') }}
|
||||
</div>
|
||||
|
||||
<table class="scenery-history-table" v-else>
|
||||
<thead>
|
||||
<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 historyList" :key="historyItem.id">
|
||||
<td>#{{ historyItem.stationHash }}</td>
|
||||
<td>
|
||||
<router-link
|
||||
:to="`/journal/dispatchers?search-dispatcher=${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>
|
||||
|
||||
<b v-else>?</b>
|
||||
</td>
|
||||
<td class="text--primary">
|
||||
<b>{{ historyItem.dispatcherRate }}</b>
|
||||
</td>
|
||||
<td style="min-width: 300px">
|
||||
<div v-if="historyItem.timestampTo">
|
||||
<b>{{ $d(historyItem.timestampFrom) }}</b>
|
||||
|
||||
{{ timestampToString(historyItem.timestampFrom) }}
|
||||
- {{ timestampToString(historyItem.timestampTo) }} ({{
|
||||
calculateDuration(historyItem.currentDuration)
|
||||
}})
|
||||
</div>
|
||||
|
||||
<div class="dispatcher-online" v-else>
|
||||
{{ $t('journal.online-since') }}
|
||||
<b>{{ timestampToString(historyItem.timestampFrom) }}</b>
|
||||
({{ calculateDuration(historyItem.currentDuration) }})
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table class="scenery-history-table" v-else>
|
||||
<thead>
|
||||
<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 historyList" :key="historyItem.id">
|
||||
<td>#{{ historyItem.stationHash }}</td>
|
||||
<td>
|
||||
<router-link
|
||||
:to="`/journal/dispatchers?search-dispatcher=${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>
|
||||
|
||||
<b v-else>?</b>
|
||||
</td>
|
||||
<td class="text--primary">
|
||||
<b>{{ historyItem.dispatcherRate }}</b>
|
||||
</td>
|
||||
<td style="min-width: 300px">
|
||||
<div v-if="historyItem.timestampTo">
|
||||
<b>{{ $d(historyItem.timestampFrom) }}</b>
|
||||
|
||||
{{ timestampToString(historyItem.timestampFrom) }}
|
||||
- {{ timestampToString(historyItem.timestampTo) }} ({{
|
||||
calculateDuration(historyItem.currentDuration)
|
||||
}})
|
||||
</div>
|
||||
|
||||
<div class="dispatcher-online" v-else>
|
||||
{{ $t('journal.online-since') }}
|
||||
<b>{{ timestampToString(historyItem.timestampFrom) }}</b>
|
||||
({{ calculateDuration(historyItem.currentDuration) }})
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<div class="bottom-info">
|
||||
<button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
|
||||
{{ $t('scenery.bottom-info') }}
|
||||
</button>
|
||||
<div class="bottom-info">
|
||||
<button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
|
||||
{{ $t('scenery.bottom-info') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -149,6 +151,20 @@ export default defineComponent({
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/sceneryViewTables.scss';
|
||||
|
||||
.scenery-dispatchers-history {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
grid-template-rows: auto 40px;
|
||||
}
|
||||
|
||||
.history-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -1,69 +1,70 @@
|
||||
<template>
|
||||
<!-- WIP -->
|
||||
<!-- <div class="top-filters">
|
||||
<button class="btn btn--option">ROZPOCZYNA BIEG</button>
|
||||
<div class="scenery-timetables-history">
|
||||
<div class="top-filters">
|
||||
<button class="btn btn--option checked">ROZPOCZYNA BIEG</button>
|
||||
|
||||
<button class="btn btn--option">PRZEZ</button>
|
||||
<button class="btn btn--option checked">PRZEZ</button>
|
||||
|
||||
<button class="btn btn--option">KOŃCZY BIEG</button>
|
||||
</div> -->
|
||||
|
||||
<section class="scenery-table-section">
|
||||
<Loading v-if="dataStatus != DataStatus.Loaded" />
|
||||
|
||||
<div class="no-history" v-else-if="historyList.length == 0">
|
||||
{{ $t('scenery.history-list-empty') }}
|
||||
<button class="btn btn--option checked">KOŃCZY BIEG</button>
|
||||
</div>
|
||||
|
||||
<table class="scenery-history-table" v-else>
|
||||
<thead>
|
||||
<th>{{ $t('scenery.timetables-history-id') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-number') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-route') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-driver') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-author') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-date') }}</th>
|
||||
</thead>
|
||||
<div class="history-wrapper">
|
||||
<Loading v-if="dataStatus != DataStatus.Loaded" />
|
||||
|
||||
<tbody>
|
||||
<tr v-for="historyItem in historyList" :key="historyItem.id">
|
||||
<td>
|
||||
<router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
|
||||
#{{ historyItem.id }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
|
||||
{{ historyItem.trainNo }}
|
||||
</td>
|
||||
<td>{{ historyItem.route.replace('|', ' -> ') }}</td>
|
||||
<td>
|
||||
<router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
|
||||
{{ historyItem.driverName }}
|
||||
</router-link>
|
||||
</td>
|
||||
<div class="no-history" v-else-if="historyList.length == 0">
|
||||
{{ $t('scenery.history-list-empty') }}
|
||||
</div>
|
||||
|
||||
<td>
|
||||
<router-link
|
||||
v-if="historyItem.authorName"
|
||||
:to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
|
||||
>{{ historyItem.authorName }}
|
||||
</router-link>
|
||||
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
|
||||
</td>
|
||||
<td>
|
||||
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
|
||||
{{ localeTime(historyItem.beginDate, $i18n.locale) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<table class="scenery-history-table" v-else>
|
||||
<thead>
|
||||
<th>{{ $t('scenery.timetables-history-id') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-number') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-route') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-driver') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-author') }}</th>
|
||||
<th>{{ $t('scenery.timetables-history-date') }}</th>
|
||||
</thead>
|
||||
|
||||
<div class="bottom-info">
|
||||
<button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
|
||||
{{ $t('scenery.bottom-info') }}
|
||||
</button>
|
||||
<tbody>
|
||||
<tr v-for="historyItem in historyList" :key="historyItem.id">
|
||||
<td>
|
||||
<router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
|
||||
#{{ historyItem.id }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
|
||||
{{ historyItem.trainNo }}
|
||||
</td>
|
||||
<td>{{ historyItem.route.replace('|', ' -> ') }}</td>
|
||||
<td>
|
||||
<router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
|
||||
{{ historyItem.driverName }}
|
||||
</router-link>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<router-link
|
||||
v-if="historyItem.authorName"
|
||||
:to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
|
||||
>{{ historyItem.authorName }}
|
||||
</router-link>
|
||||
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
|
||||
</td>
|
||||
<td>
|
||||
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
|
||||
{{ localeTime(historyItem.beginDate, $i18n.locale) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bottom-info">
|
||||
<button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
|
||||
{{ $t('scenery.bottom-info') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -142,13 +143,24 @@ export default defineComponent({
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/sceneryViewTables.scss';
|
||||
|
||||
.scenery-timetables-history {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-rows: 40px auto 40px;
|
||||
}
|
||||
|
||||
.history-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.top-filters {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
|
||||
button {
|
||||
padding: 0.5em;
|
||||
}
|
||||
padding: 0.25em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user