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

Poprawki w działaniu, zmiany estetyczne

Browse Source
This commit is contained in:
Spythere
2020-09-12 22:05:49 +02:00
parent aaccf162d9
commit 1c329d9ea9
5 changed files with 106 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/StationTimetable.vue
+2 -1
View File
@@ -14,7 +14,7 @@
:to="{ name: 'TrainsView', params: { passedSearchedTrain: scheduledTrain.trainNo.toString()}}" :to="{ name: 'TrainsView', params: { passedSearchedTrain: scheduledTrain.trainNo.toString()}}"
> >
<span> <span>
{{scheduledTrain.category}} <strong>{{scheduledTrain.category}}</strong>
{{scheduledTrain.trainNo}} {{scheduledTrain.trainNo}}
</span> </span>
</router-link>| </router-link>|
@@ -185,6 +185,7 @@ export default class StationTimetable extends Vue {
border: 1px solid white; border: 1px solid white;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
@include smallScreen() { @include smallScreen() {
src/components/TrainsView/TrainStats.vue
+78 -54
View File
@@ -11,41 +11,47 @@
<transition name="stats-anim"> <transition name="stats-anim">
<div class="stats-body" v-if="statsOpen"> <div class="stats-body" v-if="statsOpen">
<h2 class="stats-header">STATYSTYKI RUCHU</h2> <h2 class="stats-header">STATYSTYKI RUCHU</h2>
<div class="stats-speed"> <div class="stats-speed">
<div class="title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div> <div class="title stats-title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
<div class="content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div> <div class="stats-content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
</div> </div>
<div class="stats-length"> <div class="stats-length">
<div class="title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div> <div class="title stats-title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
<div <div
class="content" class="stats-content"
>{{timetableStats.min}} | {{timetableStats.avg}} | {{timetableStats.max}}</div> >{{timetableStats.min}} | {{timetableStats.avg}} | {{timetableStats.max}}</div>
</div> </div>
<div class="stats-categories"> <div class="stats-categories">
<div class="title">KATEGORIE RJ</div> <div class="title stats-title">KATEGORIE RJ</div>
<div class="category-list"> <div class="category-list">
<span class="category" v-for="[key, value] of categoryList" :key="key"> <span class="category" v-for="[key, value] of categoryList" :key="key">
<span class="category-type">{{key}}</span> <span class="category-type">{{key}}</span>
<span class="category-count">{{value}}</span> <span class="category-count">{{value}}</span>
</span> </span>
</div> </div>
<div class="warning twr">
Wysokiego ryzyka
[{{specialTrainCount[0]}}]
</div>
<div class="warning skr"> <div class="special-list">
Przekroczona skrajnia <span class="special twr">
[{{specialTrainCount[1]}}] <span class="special-type">WYSOKIEGO RYZYKA</span>
<span class="special-count">{{specialTrainCount[0]}}</span>
</span>
<span class="special skr">
<span class="special-type">PRZEKROCZONA SKRAJNIA</span>
<span class="special-count">{{specialTrainCount[1]}}</span>
</span>
</div> </div>
</div> </div>
<div class="stats-locos"> <div class="stats-locos">
<div class="title">NAJCZĘSTSZE JEDNOSTKI</div> <div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
<div class="loco-list content">
<div class="loco" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div> <div class="loco-list stats-content">
<div class="loco-item" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -161,6 +167,7 @@ export default class TrainStats extends Vue {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/responsive"; @import "../../styles/responsive";
@import "../../styles/variables";
.stats-anim { .stats-anim {
&-enter-active, &-enter-active,
@@ -182,38 +189,40 @@ export default class TrainStats extends Vue {
position: relative; position: relative;
} }
.button { .stats {
font-size: 1em; &-btn {
padding: 0.5em; font-size: 1em;
padding: 0.5em;
}
&-header {
margin-bottom: 1rem;
}
&-body {
position: absolute;
display: inline-block;
max-width: 700px;
background: rgba(black, 0.85);
border-radius: 0 1em 1em 1em;
padding: 1rem;
}
&-content {
font-size: 1.1em;
color: #ddd;
}
} }
.content { .category,
font-size: 1.1em; .special {
color: #ddd; &-list {
} display: flex;
flex-wrap: wrap;
.stats-header { font-size: 0.85em;
margin-bottom: 1rem; }
}
.stats-body {
position: absolute;
display: inline-block;
max-width: 700px;
background: rgba(black, 0.85);
border-radius: 0 1em 1em 1em;
padding: 1rem;
}
.category-list {
display: flex;
flex-wrap: wrap;
}
.category {
font-size: 0.9em;
margin-right: 0.4em; margin-right: 0.4em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
@@ -234,6 +243,27 @@ export default class TrainStats extends Vue {
} }
} }
.special {
&-list {
font-size: 0.85em;
}
&-count {
background: gray;
color: white;
}
&.twr > &-type {
background-color: $twr;
color: black;
}
&.skr > &-type {
background-color: $skr;
color: white;
}
}
.warning { .warning {
display: inline-block; display: inline-block;
margin-right: 0.4em; margin-right: 0.4em;
@@ -248,30 +278,24 @@ export default class TrainStats extends Vue {
} }
&.skr { &.skr {
background-color: #ff4646; background-color: #f00000;
} }
} }
.loco {
padding-bottom: 0.4em;
}
@include smallScreen { @include smallScreen {
.button { .button {
font-size: 0.85rem; font-size: 0.85rem;
} }
.stats-body { .stats-body {
display: block; display: block;
font-size: 0.9em; font-size: 0.9em;
// position: fixed;
// top: 0;
// left: 0;
width: 100%; width: 100%;
// height: 100%;
border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em;
} }
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
src/components/TrainsView/TrainTable.vue
+14 -7
View File
@@ -10,13 +10,15 @@
<span> <span>
<strong>{{ train.timetableData.category }}</strong> <strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} | {{ train.trainNo }} |
<span
style=" color: gold;"
>{{ train.timetableData.routeDistance }} km</span>
</span> </span>
<span style=" color: gold;">{{ train.timetableData.routeDistance }} km</span>
</div>
<div class="info-warnings"> <span>
<span class="warning twr" v-if="train.timetableData.TWR">TWR</span> <span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData.SKR">SKR</span> <span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
</span>
</div> </div>
<div class="info-route"> <div class="info-route">
@@ -152,6 +154,7 @@ export default class TrainTable extends Vue {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/responsive.scss"; @import "../../styles/responsive.scss";
@import "../../styles/variables.scss";
.train-table { .train-table {
font-size: calc(0.4rem + 0.5vw); font-size: calc(0.4rem + 0.5vw);
@@ -206,6 +209,9 @@ export default class TrainTable extends Vue {
&-category { &-category {
flex-grow: 2; flex-grow: 2;
font-size: 1.05em; font-size: 1.05em;
display: flex;
justify-content: space-between;
} }
&-route { &-route {
@@ -315,11 +321,12 @@ export default class TrainTable extends Vue {
font-size: 0.85em; font-size: 0.85em;
&.twr { &.twr {
background-color: #ffc700; background-color: $twr;
} }
&.skr { &.skr {
background-color: #ff4646; background-color: $skr;
color: white;
} }
} }
src/store/store.ts
+8 -7
View File
@@ -295,8 +295,15 @@ export default class Store extends VuexModule {
private updateOnlineStations(updatedStationList: any[]) { private updateOnlineStations(updatedStationList: any[]) {
this.stationList = this.stationList.reduce((acc, station) => { this.stationList = this.stationList.reduce((acc, station) => {
const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName); const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);
const isRegistered = JSONStationData.some(data => data.stationName === station.stationName);
if (!onlineStationData) { if (onlineStationData)
acc.push({
...station,
...onlineStationData,
online: true,
});
else if (isRegistered)
acc.push({ acc.push({
...station, ...station,
stationProject: '', stationProject: '',
@@ -312,12 +319,6 @@ export default class Store extends VuexModule {
statusTimestamp: -3, statusTimestamp: -3,
online: false, online: false,
}); });
} else
acc.push({
...station,
...onlineStationData,
online: true,
});
return acc; return acc;
}, [] as Station[]); }, [] as Station[]);
src/styles/variables.scss
+4 -1
View File
@@ -9,5 +9,8 @@ $warningCol: #ff975b;
$accentCol: #ffc014; $accentCol: #ffc014;
$accent2Col: #ff3d5d; $accent2Col: #ff3d5d;
$skr: #ff5100;
$twr: #ffbb00;
$animDuration: 100ms; $animDuration: 100ms;
$animType: ease-out; $animType: ease-out;