Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 21:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: redesigned scenery history tables

Browse Source
This commit is contained in:
Spythere
2024-06-07 16:44:09 +02:00
parent e9635eae06
commit fb56378f18
4 changed files with 170 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryDispatchersHistory.vue
+72 -55
View File
@@ -3,64 +3,63 @@
<div class="history-wrapper"> <div class="history-wrapper">
<Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" /> <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
<div class="no-history" v-else-if="historyList.length == 0"> <div v-else-if="historyList.length == 0" class="no-history">
{{ $t('scenery.history-list-empty') }} {{ $t('scenery.history-list-empty') }}
</div> </div>
<table class="scenery-history-table" v-else> <div v-else class="history-list">
<thead> <div v-for="historyItem in historyList" :key="historyItem.id">
<th>{{ $t('scenery.dispatchers-history-hash') }}</th> <span>
<th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th> <span class="text--grayed" style="margin-right: 10px">
<th>{{ $t('scenery.dispatchers-history-level') }}</th> #{{ historyItem.stationHash }}
<th>{{ $t('scenery.dispatchers-history-rate') }}</th> </span>
<th>{{ $t('scenery.dispatchers-history-date') }}</th> <b
</thead> v-if="historyItem.dispatcherLevel !== null"
class="level-badge dispatcher"
<tbody> :style="
<tr v-for="historyItem in historyList" :key="historyItem.id"> calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
<td>#{{ historyItem.stationHash }}</td> "
<td> >
{{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
</b>
<b style="margin-left: 5px">
<router-link <router-link
:to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`" :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
> >
<b>{{ historyItem.dispatcherName }}</b> {{ historyItem.dispatcherName }}
</router-link> </router-link>
</td> </b>
<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> <div>
</td> <span>
<td class="text--primary"> Ocena:
<b>{{ historyItem.dispatcherRate }}</b> <b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
</td> </span>
<td style="min-width: 300px"> |
<div v-if="historyItem.timestampTo"> <span>
<b>{{ $d(historyItem.timestampFrom) }}</b> Zmiany statusów: <b>{{ historyItem.statusHistory.length }}</b>
</span>
</div>
</span>
{{ timestampToString(historyItem.timestampFrom) }} <span>
- {{ timestampToString(historyItem.timestampTo) }} ({{ <span v-if="historyItem.timestampTo">
calculateDuration(historyItem.currentDuration) <b>{{ $d(historyItem.timestampFrom) }}</b>
}})
</div>
<div class="dispatcher-online" v-else> {{ timestampToString(historyItem.timestampFrom) }}
{{ $t('journal.online-since') }} - {{ timestampToString(historyItem.timestampTo) }} ({{
<b>{{ timestampToString(historyItem.timestampFrom) }}</b> calculateDuration(historyItem.currentDuration)
({{ calculateDuration(historyItem.currentDuration) }}) }})
</div> </span>
</td>
</tr> <span class="dispatcher-online" v-else>
</tbody> {{ $t('journal.online-since') }}
</table> <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
({{ calculateDuration(historyItem.currentDuration) }})
</span>
</span>
</div>
</div>
</div> </div>
<div class="bottom-info"> <div class="bottom-info">
@@ -165,8 +164,29 @@ export default defineComponent({
overflow: auto; overflow: auto;
} }
.history-list {
display: flex;
flex-direction: column;
gap: 0.5em;
text-align: left;
}
.history-list > div {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
padding: 0.5em;
background-color: #2b2b2b;
line-height: 1.75em;
}
.level-badge { .level-badge {
margin: 0 auto; text-align: center;
display: inline-block;
line-height: 1.6em;
} }
.dispatcher-online { .dispatcher-online {
@@ -174,13 +194,10 @@ export default defineComponent({
} }
@include smallScreen { @include smallScreen {
.history-list { .history-list > div {
font-size: 1.1em;
}
.list-item {
align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center;
text-align: center;
} }
} }
</style> </style>
../../store/storeTypes
src/components/SceneryView/SceneryTimetablesHistory.vue
+96 -54
View File
@@ -10,68 +10,80 @@
> >
{{ $t(`scenery.timetable-${mode}`) }} {{ $t(`scenery.timetable-${mode}`) }}
</button> </button>
<!-- <button class="btn btn--option checked">PRZEZ</button> -->
<!-- <button class="btn btn--option checked">KOŃCZY BIEG</button> -->
</div> </div>
<div class="history-wrapper"> <div class="history-wrapper">
<Loading v-if="dataStatus != DataStatus.Loaded" /> <Loading v-if="dataStatus != DataStatus.Loaded" />
<div class="no-history" v-else-if="historyList.length == 0"> <div v-else-if="historyList.length == 0" class="no-history">
{{ $t('scenery.history-list-empty') }} {{ $t('scenery.history-list-empty') }}
</div> </div>
<table class="scenery-history-table" v-else> <div v-else class="history-list">
<thead> <div v-for="timetableHistory in historyList" :key="timetableHistory.id">
<th>{{ $t('scenery.timetables-history-id') }}</th> <span>
<th style="width: 15%">{{ $t('scenery.timetables-history-number') }}</th> <div>
<th style="width: 25%">{{ $t('scenery.timetables-history-route') }}</th> <span
<th>{{ $t('scenery.timetables-history-driver') }}</th> class="timetable-status-indicator"
<th>{{ $t('scenery.timetables-history-author') }}</th> :data-terminated="timetableHistory.terminated"
<th style="width: 20%">{{ $t('scenery.timetables-history-date') }}</th> :data-fulfilled="timetableHistory.fulfilled"
</thead> >
{{
timetableHistory.terminated
? timetableHistory.fulfilled
? '&ofcir;'
: '&olcross;'
: '&bigcirc;'
}}
</span>
#{{ timetableHistory.id }} |
<b class="text--primary">{{ timetableHistory.trainCategoryCode }}</b>
{{ timetableHistory.trainNo }}
{{ timetableHistory.route.replace('|', ' &Rightarrow; ') }}
</div>
<tbody> <div class="text--grayed">
<tr v-for="historyItem in historyList" :key="historyItem.id"> Wystawiony
<td>
<router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
#{{ historyItem.id }}
</router-link>
</td>
<td>
<b class="text--primary">{{ historyItem.trainCategoryCode }}</b>
{{ 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>{{ <b>{{
localeDateTime( localeDateTime(
historyItem.createdAt > historyItem.beginDate timetableHistory.createdAt > timetableHistory.beginDate
? historyItem.beginDate ? timetableHistory.beginDate
: historyItem.createdAt, : timetableHistory.createdAt,
$i18n.locale $i18n.locale
) )
}}</b> }}</b>
</td> <span v-if="timetableHistory.authorName">
</tr> przez:
</tbody> <b>
</table> <router-link
:to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
>
{{ timetableHistory.authorName }}
</router-link>
</b>
</span>
dla maszynisty:
<b>
<router-link
:to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
>
{{ timetableHistory.driverName }}
</router-link>
</b>
</div>
</span>
<button
@click="
navigateTo(`/journal/timetables`, {
'search-train': `#${timetableHistory.id}`
})
"
>
<img src="/public/images/icon-back.svg" alt="icon navigate to timetable" />
</button>
</div>
</div>
</div> </div>
<div class="bottom-info"> <div class="bottom-info">
@@ -90,13 +102,15 @@ import Loading from '../Global/Loading.vue';
import { API } from '../../typings/api'; import { API } from '../../typings/api';
import { ActiveScenery, Station, Status } from '../../typings/common'; import { ActiveScenery, Station, Status } from '../../typings/common';
import { useApiStore } from '../../store/apiStore'; import { useApiStore } from '../../store/apiStore';
import routerMixin from '../../mixins/routerMixin';
import { useMainStore } from '../../store/mainStore';
const historyModeList = ['issuedFrom', 'terminatingAt', 'via'] as const; const historyModeList = ['issuedFrom', 'terminatingAt', 'via'] as const;
type HistoryMode = (typeof historyModeList)[number]; type HistoryMode = (typeof historyModeList)[number];
export default defineComponent({ export default defineComponent({
name: 'SceneryTimetablesHistory', name: 'SceneryTimetablesHistory',
mixins: [dateMixin], mixins: [dateMixin, routerMixin],
props: { props: {
station: { station: {
type: Object as PropType<Station> type: Object as PropType<Station>
@@ -112,6 +126,7 @@ export default defineComponent({
historyModeList, historyModeList,
apiStore: useApiStore(), apiStore: useApiStore(),
mainStore: useMainStore(),
dataStatus: Status.Data.Loading, dataStatus: Status.Data.Loading,
DataStatus: Status.Data, DataStatus: Status.Data,
@@ -203,10 +218,37 @@ export default defineComponent({
} }
} }
table td a { .history-list {
max-width: 200px; display: flex;
overflow: hidden; flex-direction: column;
text-overflow: ellipsis; gap: 0.5em;
white-space: nowrap; text-align: left;
} }
.history-list > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5em;
background-color: #2b2b2b;
line-height: 1.5em;
}
.history-list > div > button > img {
width: 2em;
transform: rotate(180deg);
}
.timetable-status-indicator {
&[data-fulfilled='true'] {
color: limegreen;
}
}
// table td a {
// max-width: 100%;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
</style> </style>
src/styles/sceneryViewTables.scss
+1
View File
@@ -1,5 +1,6 @@
table.scenery-history-table { table.scenery-history-table {
width: 100%; width: 100%;
table-layout: fixed;
min-width: 900px; min-width: 900px;
border-collapse: collapse; border-collapse: collapse;
src/typings/api.ts
+1
View File
@@ -39,6 +39,7 @@ export namespace API {
stationName: string; stationName: string;
timestampFrom: number; timestampFrom: number;
timestampTo?: number; timestampTo?: number;
statusHistory: string[];
} }
} }