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

design: badge poziomów

Browse Source
This commit is contained in:
Spythere
2023-02-12 12:58:23 +01:00
parent e14d328ed9
commit 59bd3fa2ef
7 changed files with 145 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchersList.vue
+14 -25
View File
@@ -17,10 +17,10 @@
@keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
tabindex="0"
>
<span>
<span class="item-general">
<b
v-if="item.dispatcherLevel !== null"
class="dispatcher-level"
class="level-badge dispatcher"
:style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
>
{{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
@@ -31,7 +31,7 @@
<span class="region-badge" :class="item.region">PL1</span>
</span>
<span>
<span class="item-time">
<span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
<span>
{{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
@@ -99,18 +99,9 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
.region-badge {
padding: 0.1em 0.5em;
border-radius: 0.5em;
font-weight: bold;
&.eu {
background-color: forestgreen;
}
}
li.sticky {
position: sticky;
top: 0;
@@ -141,6 +132,16 @@ li.sticky {
}
}
.item-general {
display: flex;
align-items: center;
gap: 0.25em;
.level-badge {
margin-right: 0.25em;
}
}
.journal_day {
margin-bottom: 1em;
padding: 0.5em;
@@ -157,16 +158,4 @@ li.sticky {
font-weight: bold;
}
}
.dispatcher-level {
display: inline-block;
text-align: center;
line-height: 1.45em;
width: 1.45em;
height: 1.45em;
margin-right: 0.45em;
border-radius: 0.25em;
}
</style>
src/components/JournalView/JournalTimetablesList.vue
+34 -19
View File
@@ -6,25 +6,35 @@
:key="timetable.id"
>
<div class="journal_item-info">
<div class="info-top">
<div class="info-general">
<span
class="general-train"
tabindex="0"
@click="showTimetable(timetable)"
@keydown.enter="showTimetable(timetable)"
style="cursor: pointer"
>
<b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
<b>{{ timetable.trainNo }}</b>
| <span>{{ timetable.driverName }}</span> |
<span class="text--grayed">#{{ timetable.id }}</span>
<span v-if="timetable.driverLevel !== null">
|
<b :style="calculateTextExpStyle(timetable.driverLevel, timetable.driverIsSupporter)">
{{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel} lvl` }}
</b>
&bull;
<span>
<strong class="text--primary">
{{ timetable.trainCategoryCode }}
</strong>
<strong>&nbsp;{{ timetable.trainNo }}</strong>
</span>
&bull;
<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>
<span class="general-time">
<b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
<b
class="info-status"
@@ -189,6 +199,7 @@ export default defineComponent({
},
showTimetable(timetable: TimetableHistory) {
if (!timetable) return;
if (timetable.terminated) return;
this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
@@ -209,7 +220,6 @@ export default defineComponent({
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
hr {
margin: 0.25em 0;
}
@@ -236,10 +246,14 @@ hr {
}
}
&-top {
&-general {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.25em;
margin-bottom: 0.5em;
}
&-route {
@@ -251,6 +265,12 @@ hr {
}
}
.general-train {
display: flex;
align-items: center;
gap: 0.25em;
}
ul.stock-list {
display: flex;
align-items: flex-end;
@@ -291,14 +311,9 @@ ul.stock-list {
}
@include smallScreen {
.info-top {
.info-general {
flex-direction: column;
span {
margin: 0.1em auto;
}
}
.info-extended {
text-align: center;
}
src/components/SceneryView/SceneryDispatchersHistory.vue
+27 -14
View File
@@ -5,25 +5,31 @@
<div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
<ul class="history-list" v-else>
<li class="list-item" v-for="historyItem in dispatcherHistoryList">
<div>
<router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
<span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
<b>{{ historyItem.dispatcherName }}</b>
</router-link>
</div>
<li class="list-item" v-for="item in dispatcherHistoryList">
<router-link class="item-general" :to="`/journal/dispatchers?dispatcherName=${item.dispatcherName}`">
<span class="text--grayed">#{{ item.stationHash }}&nbsp;</span>
<b
v-if="item.dispatcherLevel !== null"
class="level-badge dispatcher"
:style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
>
{{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
</b>
<div v-if="historyItem.timestampTo">
<b>{{ $d(historyItem.timestampFrom) }}</b>
<b>{{ item.dispatcherName }}</b>
</router-link>
{{ timestampToString(historyItem.timestampFrom) }}
- {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
<div v-if="item.timestampTo">
<b>{{ $d(item.timestampFrom) }}</b>
{{ timestampToString(item.timestampFrom) }}
- {{ timestampToString(item.timestampTo) }} ({{ calculateDuration(item.currentDuration) }})
</div>
<div class="dispatcher-online" v-else>
{{ $t('journal.online-since') }}
<b>{{ timestampToString(historyItem.timestampFrom) }}</b>
({{ calculateDuration(historyItem.currentDuration) }})
<b>{{ timestampToString(item.timestampFrom) }}</b>
({{ calculateDuration(item.currentDuration) }})
</div>
</li>
</ul>
@@ -39,10 +45,11 @@ import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIDa
import Station from '../../scripts/interfaces/Station';
import { URLs } from '../../scripts/utils/apiURLs';
import Loading from '../Global/Loading.vue';
import styleMixin from '../../mixins/styleMixin';
export default defineComponent({
name: 'SceneryDispatchersHistory',
mixins: [dateMixin],
mixins: [dateMixin, styleMixin],
props: {
station: {
type: Object as PropType<Station>,
@@ -96,6 +103,12 @@ export default defineComponent({
line-height: 1.5em;
}
.item-general {
display: flex;
align-items: center;
gap: 0.25em;
}
.dispatcher-online {
color: springgreen;
}
src/components/SceneryView/SceneryInfo.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<template>
<div class="scenery-info">
<section v-if="!timetableOnly">
<div class="info-general" v-if="station.generalInfo">
<div class="scenery-info-general" v-if="station.generalInfo">
<scenery-info-icons :station="station" />
<div class="general-list">
<div class="scenery-general-list">
<span>
<b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
@@ -130,11 +130,11 @@ h3.section-header {
margin-top: 1em;
}
.info-general {
.scenery-info-general {
margin-top: 1em;
}
.general-list {
.scenery-general-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
src/components/TrainsView/TrainInfo.vue
+7 -5
View File
@@ -14,12 +14,11 @@
<span v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</span>
<span class="train-number">{{ train.trainNo }}</span>
</strong>
<span>|</span>
<span>{{ train.driverName }}</span>
<span>|</span>
<b :style="calculateTextExpStyle(train.driverLevel, train.isSupporter)">
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
<span>&bull;</span>
<b class="level-badge driver" :style="calculateExpStyle(train.driverLevel, train.isSupporter)">
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
</b>
<span>{{ train.driverName }}</span>
</div>
<div class="timetable_route" v-if="train.timetableData">
@@ -117,6 +116,8 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
.image-warning {
height: 1em;
@@ -172,6 +173,7 @@ export default defineComponent({
flex-wrap: wrap;
gap: 0.25em;
margin-right: 1.5em;
}
.train-status-badges {
display: flex;