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">
<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') }}
</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>
<div v-else class="history-list">
<div v-for="historyItem in historyList" :key="historyItem.id">
<span>
<span class="text--grayed" style="margin-right: 10px">
#{{ historyItem.stationHash }}
</span>
<b
v-if="historyItem.dispatcherLevel !== null"
class="level-badge dispatcher"
:style="
calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
"
>
{{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
</b>
<b style="margin-left: 5px">
<router-link
:to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
>
<b>{{ historyItem.dispatcherName }}</b>
{{ historyItem.dispatcherName }}
</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>
<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>
<div>
<span>
Ocena:
<b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
</span>
|
<span>
Zmiany statusów: <b>{{ historyItem.statusHistory.length }}</b>
</span>
</div>
</span>
{{ timestampToString(historyItem.timestampFrom) }}
- {{ timestampToString(historyItem.timestampTo) }} ({{
calculateDuration(historyItem.currentDuration)
}})
</div>
<span>
<span v-if="historyItem.timestampTo">
<b>{{ $d(historyItem.timestampFrom) }}</b>
<div class="dispatcher-online" v-else>
{{ $t('journal.online-since') }}
<b>{{ timestampToString(historyItem.timestampFrom) }}</b>
({{ calculateDuration(historyItem.currentDuration) }})
</div>
</td>
</tr>
</tbody>
</table>
{{ timestampToString(historyItem.timestampFrom) }}
- {{ timestampToString(historyItem.timestampTo) }} ({{
calculateDuration(historyItem.currentDuration)
}})
</span>
<span class="dispatcher-online" v-else>
{{ $t('journal.online-since') }}
<b>{{ timestampToString(historyItem.timestampFrom) }}</b>
({{ calculateDuration(historyItem.currentDuration) }})
</span>
</span>
</div>
</div>
</div>
<div class="bottom-info">
@@ -165,8 +164,29 @@ export default defineComponent({
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 {
margin: 0 auto;
text-align: center;
display: inline-block;
line-height: 1.6em;
}
.dispatcher-online {
@@ -174,13 +194,10 @@ export default defineComponent({
}
@include smallScreen {
.history-list {
font-size: 1.1em;
}
.list-item {
align-items: center;
.history-list > div {
flex-direction: column;
justify-content: center;
text-align: center;
}
}
</style>
../../store/storeTypes