Restrukturyzacja pobierania danych, zmiany w wyglądzie

This commit is contained in:
2020-09-10 21:25:10 +02:00
parent 5adb990361
commit 4ef90e655d
17 changed files with 553 additions and 225 deletions
+1 -1
View File
@@ -34,7 +34,7 @@ export default Vue.extend({
align-items: center;
@include smallScreen() {
font-size: 0.65rem;
font-size: 0.95rem;
}
}
</style>
+2 -2
View File
@@ -165,8 +165,8 @@ export default class FilterCard extends Vue {
box-shadow: 0 0 15px 5px #474747;
@include smallScreen() {
width: 85vw;
font-size: calc(0.3em + 1vw);
width: 100%;
font-size: calc(0.7em + 1.1vw);
}
@include bigScreen {
+34 -8
View File
@@ -124,11 +124,12 @@
<div class="users-content">
<div
class="user"
v-for="train in stationInfo.trains"
v-for="train in stationInfo.stationTrains"
:key="train.trainNo + train.driverName"
:class="{'no-timetable': !hasTimetable(train.trainNo)}"
>
<a
:href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'"
:href="`https://rj.td2.info.pl/train#${train.trainNo};eu`"
target="_blank"
rel="noopener noreferrer"
>
@@ -140,7 +141,7 @@
<span
class="user borderless"
v-if="!stationInfo.trains || stationInfo.trains.length == 0"
v-if="!stationInfo.stationTrains || stationInfo.stationTrains.length == 0"
>BRAK</span>
</div>
</div>
@@ -174,16 +175,19 @@
</span>
<span class="general-confirmed">
<span style="color: lime" v-if="timetable.confirmed">Odprawiony</span>
<span
style="color: gold"
v-if="timetable.stopped || (timetable.beginsHere && !timetable.confirmed)"
v-else-if="timetable.currentStationName == stationInfo.stationName"
>Na stacji</span>
<span style="color: #FF4646" v-else-if="timetable.stopped">Postój</span>
<span style="color: #aaa" v-else-if="!timetable.confirmed">W drodze</span>
<span
style="color: red"
v-else-if="(timetable.terminatesHere && timetable.confirmed)"
v-else-if="(timetable.terminatesHere && timetable.confimed)"
>Skończył bieg</span>
<span style="color: lime" v-else>Odprawiony</span>
</span>
</span>
@@ -220,6 +224,8 @@
<script lang="ts">
import { Component, Prop, Watch } from "vue-property-decorator";
import { Getter } from "vuex-class";
import styleMixin from "@/mixins/styleMixin";
import Station from "@/scripts/interfaces/Station";
@@ -228,8 +234,8 @@ import Station from "@/scripts/interfaces/Station";
export default class StationCard extends styleMixin {
@Prop() stationInfo!: Station;
@Prop() exit!: void;
@Getter('getTrainList') trains;
history: any[] = [];
cardMode: number = 0;
get computedExp(): string {
@@ -239,6 +245,7 @@ export default class StationCard extends styleMixin {
: `${this.stationInfo.dispatcherExp}`;
}
get computedScheduledTrains() {
return this.stationInfo.scheduledTrains.sort((a, b) => {
if (a.arrivalTime > b.arrivalTime) return 1;
@@ -248,6 +255,10 @@ export default class StationCard extends styleMixin {
})
}
hasTimetable(trainNo: number) {
return this.trains.find(train => train.timetableData && train.trainNo === trainNo);
}
timestampToTime(timestamp: number) {
return new Date(timestamp).toLocaleTimeString('pl-PL', {
hour: '2-digit',
@@ -286,10 +297,16 @@ export default class StationCard extends styleMixin {
&-exit {
z-index: 3;
display: flex;
align-items: center;
img {
margin: 0.1em 0.3em;
font-size: 1.6em;
margin: 0.1em 0.1em;
}
.schedule-icon {
font-size: 1.4em;
}
}
@@ -451,6 +468,15 @@ export default class StationCard extends styleMixin {
margin: 0;
padding: 0;
}
&.no-timetable {
border: 1px solid #aaa;
a {
color: #aaa;
pointer-events: none;
}
}
}
}
}
@@ -144,8 +144,6 @@
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { Getter } from "vuex-class";
import Station from "@/scripts/interfaces/Station";
import Train from "@/scripts/interfaces/Train";
+26 -18
View File
@@ -77,7 +77,7 @@ export default class TrainStats extends Vue {
).toFixed(2);
const minMax = this.trains.reduce((acc, train) => {
if (train.noTimetable) return acc;
if (!train.timetableData) return acc;
acc[0] =
acc[0] === undefined || train.speed < acc[0] ? train.speed : acc[0];
@@ -94,21 +94,21 @@ export default class TrainStats extends Vue {
if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
const avg = (
this.trains.reduce((acc, train) => acc + train.routeDistance, 0) /
this.trains.reduce((acc, train) => train.timetableData ? acc + train.timetableData.routeDistance : acc, 0) /
this.trains.length
).toFixed(2);
const minMax = this.trains.reduce((acc, train) => {
if (train.noTimetable) return acc;
if (!train.timetableData) return acc;
acc[0] =
acc[0] === undefined || train.routeDistance < acc[0]
? train.routeDistance
acc[0] === undefined || train.timetableData.routeDistance < acc[0]
? train.timetableData.routeDistance
: acc[0];
acc[1] =
acc[1] === undefined || train.routeDistance > acc[1]
? train.routeDistance
acc[1] === undefined || train.timetableData.routeDistance > acc[1]
? train.timetableData.routeDistance
: acc[1];
return acc;
}, [] as any);
@@ -118,11 +118,11 @@ export default class TrainStats extends Vue {
get categoryList(): Map<string, number> {
const map = this.trains.reduce((acc, train) => {
if (train.noTimetable || !train.category) return acc;
if (!train.timetableData || !train.timetableData.category) return acc;
acc.set(
train.category,
acc.get(train.category) ? acc.get(train.category) + 1 : 1
train.timetableData.category,
acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
);
return acc;
@@ -133,7 +133,7 @@ export default class TrainStats extends Vue {
get locoList(): any[] {
const map = this.trains.reduce((acc, train) => {
if (train.noTimetable || !train.locoType) return acc;
if (!train.timetableData || !train.locoType) return acc;
acc.set(
train.locoType,
@@ -151,8 +151,8 @@ export default class TrainStats extends Vue {
}
get specialTrainCount(): [number, number] {
const twrList = this.trains.filter((train) => train.TWR);
const skrList = this.trains.filter((train) => train.SKR);
const twrList = this.trains.filter((train) => train.timetableData && train.timetableData.TWR);
const skrList = this.trains.filter((train) => train.timetableData && train.timetableData.SKR);
return [twrList.length, skrList.length];
}
@@ -177,18 +177,18 @@ export default class TrainStats extends Vue {
.train-stats {
padding: 0.3em 0;
font-size: 0.9em;
font-size: 1.1em;
position: relative;
}
.button {
font-size: 1.1em;
font-size: 1em;
padding: 0.5em;
}
.content {
font-size: 1.2em;
font-size: 1.1em;
color: #ddd;
}
@@ -199,7 +199,7 @@ export default class TrainStats extends Vue {
.stats-body {
position: absolute;
display: inline-block;
max-width: 800px;
max-width: 700px;
background: rgba(black, 0.85);
border-radius: 0 1em 1em 1em;
@@ -213,6 +213,8 @@ export default class TrainStats extends Vue {
}
.category {
font-size: 0.9em;
margin-right: 0.4em;
margin-bottom: 0.4em;
@@ -256,11 +258,17 @@ export default class TrainStats extends Vue {
@include smallScreen {
.button {
font-size: 0.9rem;
font-size: 0.85rem;
}
.stats-body {
display: block;
font-size: 0.9em;
// position: fixed;
// top: 0;
// left: 0;
width: 100%;
// height: 100%;
border-radius: 0 0 1em 1em;
}
+7 -10
View File
@@ -8,31 +8,31 @@
<div class="info-top">
<div class="info-category">
<span>
<strong>{{ train.category }}</strong>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
</span>
<span style=" color: gold;">{{ train.routeDistance }} km</span>
<span style=" color: gold;">{{ train.timetableData.routeDistance }} km</span>
</div>
<div class="info-warnings">
<span class="warning twr" v-if="train.TWR">TWR</span>
<span class="warning skr" v-if="train.SKR">SKR</span>
<span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
</div>
<div class="info-route">
<a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
<strong>
{{
train.route && train.route.replace("|", " - ")
train.timetableData.route.replace("|", " - ")
}}
</strong>
</a>
</div>
<div class="info-stations">
<span v-if="train.followingStops.length > 2">
<span v-if="train.timetableData.followingStops.length > 2">
Przez:
<span v-html="generateStopList(train.followingStops)"></span>
<span v-html="generateStopList(train.timetableData.followingStops)"></span>
</span>
</div>
</div>
@@ -114,7 +114,6 @@
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Getter } from "vuex-class";
const unknownTrainImage = require("@/assets/unknown.png");
@@ -125,8 +124,6 @@ import Station from "@/scripts/interfaces/Station";
export default class TrainTable extends Vue {
@Prop() readonly computedTrains!: Train[];
@Getter("getAllStations") stations!: Station[];
speedIcon: string = require("@/assets/icon-speed.svg");
massIcon: string = require("@/assets/icon-mass.svg");
lengthIcon: string = require("@/assets/icon-length.svg");