mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Restrukturyzacja pobierania danych, zmiany w wyglądzie
This commit is contained in:
@@ -34,7 +34,7 @@ export default Vue.extend({
|
||||
align-items: center;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.65rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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 {
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user