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

Widok pociągów: nowe odznaki statusów

Browse Source
This commit is contained in:
Spythere
2022-07-12 12:06:27 +02:00
parent 4b0d9b887e
commit 8137c1ff95
4 changed files with 142 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Global/TrainModal.vue
+18 -8
View File
@@ -1,7 +1,7 @@
<template>
<div class="card-dimmer"></div>
<div class="train-modal" v-click-outside="closeModal" @keydown.esc="closeModal" >
<button class="btn exit" @click="closeModal" >
<div class="train-modal" v-click-outside="closeModal" @keydown.esc="closeModal">
<button class="btn exit" @click="closeModal">
<img :src="icons.exit" alt="close card" />
</button>
@@ -40,7 +40,6 @@ export default defineComponent({
activated() {
this.$nextTick(() => {
(this.$refs['content'] as HTMLElement).focus();
});
},
@@ -60,11 +59,12 @@ export default defineComponent({
.exit {
position: absolute;
top: 0;
right: 0;
margin: 1em 2em;
background-color: white;
background-color: #00000077;
outline: 2px solid white;
padding: 0.25em;
border-radius: 50%;
@@ -73,9 +73,6 @@ export default defineComponent({
img {
width: 1.5rem;
vertical-align: middle;
filter: invert(100%);
-moz-filter: invert(100%);
}
}
@@ -101,4 +98,17 @@ export default defineComponent({
overflow: auto;
max-height: 95vh;
}
@include smallScreen {
.exit {
top: auto;
bottom: 0;
margin: 1em;
img {
width: 1.75rem;
}
}
}
</style>
src/components/TrainsView/TrainInfo.vue
+114 -95
View File
@@ -1,91 +1,83 @@
<template>
<div class="train-info" tabindex="0">
<section class="train-route">
<span>
<div>
<span>
<span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
<div class="train_general">
<span>
<span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
<span class="timetable_warnings">
<span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
</span>
<strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
<strong>{{ train.trainNo }}</strong>
<span>&nbsp;| {{ train.driverName }}&nbsp;</span>
<span class="timetable_warnings">
<span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
<span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
</span>
<strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
<strong>{{ train.trainNo }}</strong>
<span>&nbsp;| {{ train.driverName }}&nbsp;</span>
</span>
</div>
<img
class="image-offline"
style="height: 1em"
v-if="!train.currentStationHash"
:src="icons.offline"
alt="offline"
:title="$t('trains.offline')"
/>
<div class="timetable_route" v-if="train.timetableData">
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
<img
v-if="getSceneriesWithComments(train.timetableData).length > 0"
class="image-warning"
:src="icons.warning"
:title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
/>
</div>
<hr style="margin: 0.25em 0" />
<div class="timetable_stops" v-if="train.timetableData">
<span v-if="train.timetableData.followingStops.length > 2">
{{ $t('trains.via-title') }}
<span v-html="displayStopList(train.timetableData.followingStops)"></span>
</span>
</div>
<div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
<!-- <span> </span> -->
<span class="timetable_progress-bar">
<!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
<span class="bar-bg"></span>
<span
class="bar-fg"
:style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
></span>
</span>
<span class="timetable_progress-distance">
&nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
<span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
|
<span v-html="currentDelay(train.timetableData.followingStops)"></span>
</span>
<div class="train-status-badges">
<div v-if="!train.currentStationHash" class="train-badge offline">{{ $t('trains.scenery-offline') }}</div>
<div v-if="!train.online" class="train-badge offline">Offline {{ lastSeenMessage(train.lastSeen) }}</div>
</div>
</div>
<div class="timetable_route" v-if="train.timetableData">
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
<img
v-if="getSceneriesWithComments(train.timetableData).length > 0"
class="image-warning"
:src="icons.warning"
:title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
/>
</div>
<div class="driver_position text--grayed" style="margin-top: 0.25em">
<span v-if="train.currentStationHash">
{{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
</span>
<hr style="margin: 0.25em 0" />
<span v-else>
{{ $t('trains.current-scenery') }}
<span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
</span>
<div class="timetable_stops" v-if="train.timetableData">
<span v-if="train.timetableData.followingStops.length > 2">
{{ $t('trains.via-title') }}
<span v-html="displayStopList(train.timetableData.followingStops)"></span>
</span>
</div>
<span v-if="train.signal">
{{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
</span>
<div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
<!-- <span> </span> -->
<span class="timetable_progress-bar">
<!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
<span class="bar-bg"></span>
<span
class="bar-fg"
:style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
></span>
</span>
<span v-if="train.connectedTrack">
{{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
</span>
<span>
&nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
<span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
|
<span v-html="currentDelay(train.timetableData.followingStops)"></span>
</span>
</div>
<div v-if="!train.online" style="color: salmon">Offline - {{ lastSeenMessage(train.lastSeen) }}</div>
<div class="driver_position text--grayed" style="margin-top: 0.25em">
<span v-if="train.currentStationHash">
{{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
</span>
<span v-else>
{{ $t('trains.current-scenery') }}
<span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
</span>
<span v-if="train.signal">
{{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
</span>
<span v-if="train.connectedTrack">
{{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
</span>
<span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
</div>
</span>
<span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
</div>
</section>
<section class="train-stats">
@@ -134,7 +126,6 @@ export default defineComponent({
data: () => ({
icons: {
warning: require('@/assets/icon-warning.svg'),
offline: require('@/assets/icon-offline.svg'),
},
}),
});
@@ -143,8 +134,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.image-warning,
.image-offline {
.image-warning {
height: 1em;
margin-left: 0.5em;
@@ -187,6 +177,38 @@ export default defineComponent({
font-size: 0.75em;
}
.train_general {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.train-status-badges {
display: flex;
flex-wrap: wrap;
}
.train-badge {
padding: 0.15em 0.35em;
margin-right: 0.3em;
font-weight: bold;
font-size: 0.9em;
&.twr {
background-color: var(--clr-twr);
}
&.skr {
background-color: var(--clr-skr);
}
&.offline {
background-color: #b83b2d;
}
}
.timetable_route {
display: flex;
align-items: center;
@@ -196,28 +218,13 @@ export default defineComponent({
.timetable_warnings {
color: black;
.warning {
padding: 0.1em 0.3em;
margin-right: 0.3em;
border-radius: 1em;
font-weight: bold;
&.twr {
background: var(--clr-twr);
}
&.skr {
background: var(--clr-skr);
}
}
}
.timetable_progress {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.timetable_progress-bar {
@@ -245,6 +252,10 @@ export default defineComponent({
}
}
.timetable_progress-distance {
margin-right: 0.25em;
}
.comments {
display: flex;
align-items: center;
@@ -275,6 +286,14 @@ export default defineComponent({
}
}
.train_general {
justify-content: center;
}
.train-status-badges {
justify-content: center;
}
.timetable_route {
justify-content: center;
}