mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
chore: changes in scenery view layout
This commit is contained in:
@@ -1,71 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="scenery-table-section">
|
<div class="scenery-dispatchers-history">
|
||||||
<Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
|
<div class="history-wrapper">
|
||||||
|
<Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
|
||||||
|
|
||||||
<div class="no-history" v-else-if="historyList.length == 0">
|
<div class="no-history" v-else-if="historyList.length == 0">
|
||||||
{{ $t('scenery.history-list-empty') }}
|
{{ $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>
|
</div>
|
||||||
|
|
||||||
<table class="scenery-history-table" v-else>
|
<div class="bottom-info">
|
||||||
<thead>
|
<button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
|
||||||
<th>{{ $t('scenery.dispatchers-history-hash') }}</th>
|
{{ $t('scenery.bottom-info') }}
|
||||||
<th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
|
</button>
|
||||||
<th>{{ $t('scenery.dispatchers-history-level') }}</th>
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -149,6 +151,20 @@ export default defineComponent({
|
|||||||
@import '../../styles/responsive.scss';
|
@import '../../styles/responsive.scss';
|
||||||
@import '../../styles/sceneryViewTables.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 {
|
.level-badge {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,69 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- WIP -->
|
<div class="scenery-timetables-history">
|
||||||
<!-- <div class="top-filters">
|
<div class="top-filters">
|
||||||
<button class="btn btn--option">ROZPOCZYNA BIEG</button>
|
<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>
|
<button class="btn btn--option checked">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') }}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="scenery-history-table" v-else>
|
<div class="history-wrapper">
|
||||||
<thead>
|
<Loading v-if="dataStatus != DataStatus.Loaded" />
|
||||||
<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>
|
|
||||||
|
|
||||||
<tbody>
|
<div class="no-history" v-else-if="historyList.length == 0">
|
||||||
<tr v-for="historyItem in historyList" :key="historyItem.id">
|
{{ $t('scenery.history-list-empty') }}
|
||||||
<td>
|
</div>
|
||||||
<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>
|
<table class="scenery-history-table" v-else>
|
||||||
<router-link
|
<thead>
|
||||||
v-if="historyItem.authorName"
|
<th>{{ $t('scenery.timetables-history-id') }}</th>
|
||||||
:to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
|
<th>{{ $t('scenery.timetables-history-number') }}</th>
|
||||||
>{{ historyItem.authorName }}
|
<th>{{ $t('scenery.timetables-history-route') }}</th>
|
||||||
</router-link>
|
<th>{{ $t('scenery.timetables-history-driver') }}</th>
|
||||||
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
|
<th>{{ $t('scenery.timetables-history-author') }}</th>
|
||||||
</td>
|
<th>{{ $t('scenery.timetables-history-date') }}</th>
|
||||||
<td>
|
</thead>
|
||||||
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
|
|
||||||
{{ localeTime(historyItem.beginDate, $i18n.locale) }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="bottom-info">
|
<tbody>
|
||||||
<button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
|
<tr v-for="historyItem in historyList" :key="historyItem.id">
|
||||||
{{ $t('scenery.bottom-info') }}
|
<td>
|
||||||
</button>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -142,13 +143,24 @@ export default defineComponent({
|
|||||||
@import '../../styles/responsive.scss';
|
@import '../../styles/responsive.scss';
|
||||||
@import '../../styles/sceneryViewTables.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 {
|
.top-filters {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
padding: 0.25em;
|
||||||
button {
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+20
-18
@@ -228,6 +228,10 @@ a.a-button {
|
|||||||
|
|
||||||
background-color: #3c3c3c;
|
background-color: #3c3c3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--image {
|
&.btn--image {
|
||||||
@@ -283,22 +287,11 @@ a.a-button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include smallScreen {
|
// Basic tooltip
|
||||||
::-webkit-scrollbar {
|
[data-tooltip] {
|
||||||
width: 0.5em;
|
cursor: help;
|
||||||
height: 0.5em;
|
|
||||||
|
|
||||||
&-track {
|
|
||||||
background-color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-thumb {
|
|
||||||
background-color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Basic tooltip
|
|
||||||
[data-tooltip]:hover::after,
|
[data-tooltip]:hover::after,
|
||||||
[data-tooltip]:focus::after {
|
[data-tooltip]:focus::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -315,11 +308,20 @@ a.a-button {
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-tooltip] {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include smallScreen {
|
@include smallScreen {
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0.5em;
|
||||||
|
height: 0.5em;
|
||||||
|
|
||||||
|
&-track {
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-thumb {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-tooltip]:hover::after,
|
[data-tooltip]:hover::after,
|
||||||
[data-tooltip]:focus::after {
|
[data-tooltip]:focus::after {
|
||||||
transform: translate(-50%, 2em);
|
transform: translate(-50%, 2em);
|
||||||
|
|||||||
@@ -1,9 +1,3 @@
|
|||||||
.scenery-table-section {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.scenery-history-table {
|
table.scenery-history-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
@@ -25,7 +19,7 @@ table.scenery-history-table {
|
|||||||
|
|
||||||
td {
|
td {
|
||||||
padding: 0.75em;
|
padding: 0.75em;
|
||||||
border-bottom: solid 5px #111;
|
border-bottom: solid 5px #181818;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -229,6 +229,7 @@ button.back-btn {
|
|||||||
padding: 1em 0.5em;
|
padding: 1em 0.5em;
|
||||||
|
|
||||||
height: calc(100vh - 0.5em);
|
height: calc(100vh - 0.5em);
|
||||||
|
min-height: 800px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -240,9 +241,10 @@ button.back-btn {
|
|||||||
padding: 1em 0.5em;
|
padding: 1em 0.5em;
|
||||||
|
|
||||||
height: calc(100vh - 0.5em);
|
height: calc(100vh - 0.5em);
|
||||||
|
min-height: 800px;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto 1fr auto;
|
grid-template-rows: auto 1fr;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user