Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-04 22:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wygląd karty SRJP (cz.2); wygląd uproszczonego widoku pociągów (cz.1)

Browse Source
This commit is contained in:
Spythere
2022-02-02 01:04:41 +01:00
parent b4e39f14ab
commit 3268ae4b4a
3 changed files with 125 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainInfo.vue
+124 -168
View File
@@ -4,18 +4,21 @@
<div v-if="simpleView"> <div v-if="simpleView">
<div class="simple-view wrapper"> <div class="simple-view wrapper">
<span> <span>
<span v-if="train.timetableData"> <span>
<div> <div>
<strong>{{ train.timetableData.category }} {{ train.trainNo }}</strong> <span v-if="train.timetableData">
<strong>{{ train.timetableData.category }}</strong>
</span>
<strong> {{ train.trainNo }}</strong>
| |
{{ train.driverName }} {{ train.driverName }}
</div> </div>
<div> <div>
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong> <strong v-if="train.timetableData">{{ train.timetableData.route.replace('|', ' - ') }}</strong>
</div> </div>
<div style="margin-top: 0.5em"> <div style="margin-top: 0.5em" v-if="train.timetableData">
<span style="color: #ccc"> <span style="color: #ccc">
{{ train.locoType }} {{ train.locoType }}
</span> </span>
@@ -40,15 +43,10 @@
<b>{{ $t('trains.timetable-comments').toUpperCase() }}</b> <b>{{ $t('trains.timetable-comments').toUpperCase() }}</b>
</div> </div>
</div> </div>
</span>
<span v-else> <div style="margin-top: 2em" v-else>
<span> {{ train.locoType }}
{{ train.trainNo }} | </div>
<span style="color: gold">
{{ $t('trains.no-timetable') }}
</span>
</span>
</span> </span>
</span> </span>
@@ -68,8 +66,8 @@
<!-- EXTENDED VIEW --> <!-- EXTENDED VIEW -->
<div class="extended-view wrapper" v-else> <div class="extended-view wrapper" v-else>
<span class="info"> <span class="info-timetable">
<div class="info_timetable" v-if="!train.timetableData"> <div v-if="!train.timetableData">
<div class="timetable_general"> <div class="timetable_general">
<span> <span>
{{ train.trainNo }} | {{ train.trainNo }} |
@@ -80,7 +78,7 @@
</div> </div>
</div> </div>
<div class="info_timetable" v-else> <div v-else>
<div class="timetable_general"> <div class="timetable_general">
<span class="timetable_hero"> <span class="timetable_hero">
<span class="timetable_warnings"> <span class="timetable_warnings">
@@ -93,10 +91,13 @@
</span> </span>
</span> </span>
<span> <span class="timetable_driver-stats">
<strong>{{ train.timetableData.category }}</strong> <div>
{{ train.trainNo }} | <b>{{ train.timetableData.category }}</b>
<span style="color: gold"> {{ train.timetableData.routeDistance }} km</span> <b>{{ ' ' + train.trainNo }}</b> |
<span>{{ train.driverName }}</span>
</div>
</span> </span>
</span> </span>
</div> </div>
@@ -122,54 +123,56 @@
</div> </div>
</span> </span>
<span class="stats"> <span class="info-driver">
<div class="stats-main"> <div class="driver_cars">
<!-- <span v-else>{{ displayLocoInfo(train.locoType) }}</span> -->
</div>
<div style="display: flex; justify-content: center;">
<span class="text--primary"> {{ train.timetableData?.routeDistance }}</span>
<span>km</span>
<span v-for="stat in STATS.main" :key="stat.name"> <span v-for="stat in STATS.main" :key="stat.name">
<img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" /> <span>&nbsp;&bull;&nbsp;</span>
{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} <span class="text--primary">{{ `${~~(train[stat.name] * (stat.multiplier || 1))}` }}</span>
<span>{{ stat.unit }}</span>
</span> </span>
</div> </div>
<div class="stats-position"> <div class="driver_position" style="display: flex; justify-content: center;">
<span v-for="stat in STATS.position" :key="stat.name"> <span v-if="train.currentStationName">
<div><img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" /></div> Na scenerii <b class="text--primary">{{ train['currentStationName'] }}</b>
{{ (train[stat.prop] || '---') + (stat.unit || '') }}
</span> </span>
</div>
</span>
<span class="driver"> <span v-if="train.signal">
<div class="driver-info"> &nbsp;przy semaforze <b class="text--primary">{{ train['signal'] }}</b>
<span class="driver-name">
{{ train.driverName }}
</span> </span>
&bull;
<span class="driver-type"> <span v-if="train.connectedTrack">
{{ train.locoType }} &nbsp;na szlaku <b class="text--primary">{{ train['connectedTrack'] }}</b>
</span> </span>
</div> </div>
<span class="driver-loco"> <div style="display: flex; justify-content: center; margin-top: 0.5em;">
<div class="driver-cars"> <span> {{ train.locoType }} </span>
<span v-if="train.cars.length > 0">
{{ $t('trains.cars') }}:
<span class="count">{{ train.cars.length }}</span>
</span>
<span v-else>{{ displayLocoInfo(train.locoType) }}</span>
</div>
<div class="driver-stock"> <span v-if="train.cars.length > 0">
<img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" /> &nbsp;&bull; {{ $t('trains.cars') }}:
<img <span class="count">{{ train.cars.length }}</span>
v-for="(car, i) in train.cars" </span>
:key="i" </div>
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
@error="onImageError" <div class="driver_stock">
alt="car" <img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" />
srcset=""
/> <img
</div> v-for="(car, i) in train.cars"
</span> :key="i"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
@error="onImageError"
alt="car"
srcset=""
/>
</div>
</span> </span>
</div> </div>
</div> </div>
@@ -200,11 +203,6 @@ export default defineComponent({
STATS: { STATS: {
main: [ main: [
{
name: 'mass',
unit: 't',
multiplier: 0.001,
},
{ {
name: 'speed', name: 'speed',
unit: 'km/h', unit: 'km/h',
@@ -213,6 +211,11 @@ export default defineComponent({
name: 'length', name: 'length',
unit: 'm', unit: 'm',
}, },
{
name: 'mass',
unit: 't',
multiplier: 0.001,
},
], ],
position: [ position: [
@@ -308,17 +311,17 @@ export default defineComponent({
} }
.wrapper { .wrapper {
display: grid;
padding: 1em; padding: 1em;
&.extended-view { &.extended-view {
grid-template-columns: repeat(auto-fit, minmax(30em, 1fr)); /* grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
grid-template-rows: 1fr; grid-template-rows: 1fr; */
margin-top: 0.5em; margin-top: 0.5em;
} }
&.simple-view { &.simple-view {
display: grid;
grid-template-columns: 2fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
@@ -373,64 +376,62 @@ export default defineComponent({
} }
} }
.info { .info-timetable {
display: flex; display: flex;
flex-direction: column; }
justify-content: space-between;
& .timetable { .timetable {
&_hero { &_general {
display: flex; display: flex;
} justify-content: space-between;
align-items: center;
}
&_general { &_hero {
display: flex; display: flex;
justify-content: space-between; }
align-items: center;
}
&_srjp .activator { &_srjp .activator {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #22a8d1; background-color: #22a8d1;
border-radius: 0.5em; border-radius: 0.5em;
padding: 0.1em 0.35em; padding: 0.1em 0.35em;
} }
&_route { &_route {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: bold;
margin: 5px 0;
font-size: 1.1em;
}
&_stops {
margin-bottom: 10px;
font-size: 0.8em;
}
&_warnings {
display: flex;
color: black;
.warning {
padding: 0.1em 0.65em;
margin-right: 0.35em;
font-weight: bold; font-weight: bold;
margin: 5px 0; &.twr {
background: var(--clr-twr);
}
font-size: 1.1em; &.skr {
} background: var(--clr-skr);
&_stops {
margin-bottom: 10px;
font-size: 0.7em;
}
&_warnings {
display: flex;
color: black;
.warning {
padding: 0.1em 0.65em;
margin-right: 0.35em;
font-weight: bold;
&.twr {
background: var(--clr-twr);
}
&.skr {
background: var(--clr-skr);
}
} }
} }
} }
@@ -444,21 +445,13 @@ export default defineComponent({
padding-top: 1em; padding-top: 1em;
&-info { &_header {
text-align: center; text-align: center;
word-wrap: break-word; word-wrap: break-word;
margin-top: 1em;
} }
&-name { &_cars {
font-weight: bold;
}
&-loco {
width: 100%;
text-align: center;
}
&-cars {
margin: 0.65em 0; margin: 0.65em 0;
white-space: pre-wrap; white-space: pre-wrap;
text-align: center; text-align: center;
@@ -470,60 +463,23 @@ export default defineComponent({
} }
} }
&-stock { &_stock {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
overflow-x: auto; overflow-x: auto;
width: 100%;
padding: 0.5em 0;
img { img {
margin: 0 auto; margin: 0 auto;
} }
} }
}
.stats { &_position {
font-size: 0.9em; span {
display: flex; text-align: center;
flex-direction: column;
justify-content: space-between;
padding-top: 1em;
&-main {
display: flex;
justify-content: space-between;
align-items: center;
& > span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
img {
margin: 0 0.3em;
width: 2em;
}
}
&-position {
display: flex;
margin-top: 1em;
text-align: center;
p {
color: var(--clr-accent);
}
& > span {
width: 100%;
img {
width: 2em;
}
} }
} }
} }
src/components/TrainsView/TrainSchedule.vue
-2
View File
@@ -177,8 +177,6 @@ $stopNameClr: #22a8d1;
} }
.train-schedule { .train-schedule {
max-height: 600px;
padding-top: 1em; padding-top: 1em;
margin-top: 1em; margin-top: 1em;
src/components/TrainsView/TrainTimetableCard.vue
+1
View File
@@ -75,6 +75,7 @@ export default defineComponent({
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
@include smallScreen { @include smallScreen {
width: 95%; width: 95%;
} }