mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Poprawki błędów (1.3.5)
This commit is contained in:
@@ -1,235 +1,235 @@
|
||||
<template>
|
||||
<div class="train-schedule" @click="click">
|
||||
<div class="schedule-wrapper">
|
||||
<div class="schedule-bar"></div>
|
||||
|
||||
<ul class="schedule-list">
|
||||
<li
|
||||
class="schedule-item"
|
||||
v-for="(stop, i) in followingStops"
|
||||
:key="i"
|
||||
:class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
|
||||
>
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<div
|
||||
class="stop-line arrival"
|
||||
v-if="
|
||||
i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
|
||||
"
|
||||
>{{ stop.arrivalLine }}</div>
|
||||
|
||||
<span class="stop-info">
|
||||
<div class="info-indicator"></div>
|
||||
|
||||
<span class="info-name" v-html="stop.stopName"></span>
|
||||
<span class="info-date">
|
||||
<span
|
||||
class="date-arrival"
|
||||
v-if="!stop.beginsHere"
|
||||
:class="{
|
||||
delayed: stop.arrivalDelay > 0,
|
||||
preponed: stop.arrivalDelay < 0,
|
||||
}"
|
||||
>
|
||||
p.
|
||||
{{
|
||||
stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay)
|
||||
}}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date-stop"
|
||||
v-if="stop.stopTime"
|
||||
:class="stop.stopType.replace(', ', '-')"
|
||||
>{{ stop.stopTime }} {{ stop.stopType }}</span>
|
||||
|
||||
<span
|
||||
class="date-departure"
|
||||
v-if="!stop.terminatesHere && stop.stopTime != 0"
|
||||
:class="{
|
||||
delayed: stop.departureDelay > 0,
|
||||
preponed: stop.departureDelay < 0,
|
||||
}"
|
||||
>
|
||||
o.
|
||||
{{
|
||||
stylizeTime(stop.departureRealTimeString, stop.departureDelay)
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="stop-line departure">{{ stop.departureLine }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import TrainStop from "@/scripts/interfaces/TrainStop";
|
||||
|
||||
@Component
|
||||
export default class TrainSchedule extends Vue {
|
||||
@Prop() readonly followingStops!: TrainStop[];
|
||||
@Prop() readonly currentStationName!: string;
|
||||
|
||||
stylizeTime(timeString: string, delay: number) {
|
||||
return (
|
||||
timeString +
|
||||
(delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "")
|
||||
);
|
||||
}
|
||||
|
||||
click() {
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.train-schedule {
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
margin-top: 1rem;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-bar,
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: calc(-0.5rem - 2px);
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.schedule-wrapper {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
ul.schedule-list {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
ul.schedule-list > li.schedule-item {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&.confirmed {
|
||||
& > .progress-bar,
|
||||
& > .stop-info > .info-indicator {
|
||||
background: lime;
|
||||
}
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
& > .progress-bar {
|
||||
background: lime;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
& > .stop-info > .info-indicator {
|
||||
background: orangered;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.schedule-item > .stop-info {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
& > .info-indicator {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: 50%;
|
||||
left: -1.5rem;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 15px;
|
||||
height: 2px;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
& > .info-name {
|
||||
background: rgb(0, 81, 187);
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
& > .info-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span {
|
||||
background: #5c5c5c;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
& > .date-stop {
|
||||
&.ph,
|
||||
&.ph-pm {
|
||||
background: #ce8d00;
|
||||
}
|
||||
|
||||
&.pt,
|
||||
&.pm,
|
||||
&.pt-pm {
|
||||
background: #252525;
|
||||
}
|
||||
}
|
||||
|
||||
& > .date-arrival,
|
||||
& > .date-departure {
|
||||
&.delayed {
|
||||
background: rgb(250, 0, 0);
|
||||
}
|
||||
|
||||
&.preponed {
|
||||
background: rgb(0, 139, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.schedule-item > .stop-line {
|
||||
font-size: 0.8em;
|
||||
color: #bbb;
|
||||
padding: 0.3em 0;
|
||||
margin: 0.2em 0;
|
||||
|
||||
transform: translateX(-0.8rem);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="train-schedule" @click="click">
|
||||
<div class="schedule-wrapper">
|
||||
<div class="schedule-bar"></div>
|
||||
|
||||
<ul class="schedule-list">
|
||||
<li
|
||||
class="schedule-item"
|
||||
v-for="(stop, i) in followingStops"
|
||||
:key="i"
|
||||
:class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
|
||||
>
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<div
|
||||
class="stop-line arrival"
|
||||
v-if="
|
||||
i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
|
||||
"
|
||||
>{{ stop.arrivalLine }}</div>
|
||||
|
||||
<span class="stop-info">
|
||||
<div class="info-indicator"></div>
|
||||
|
||||
<span class="info-name" v-html="stop.stopName"></span>
|
||||
<span class="info-date">
|
||||
<span
|
||||
class="date-arrival"
|
||||
v-if="!stop.beginsHere"
|
||||
:class="{
|
||||
delayed: stop.arrivalDelay > 0,
|
||||
preponed: stop.arrivalDelay < 0,
|
||||
}"
|
||||
>
|
||||
p.
|
||||
{{
|
||||
stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay)
|
||||
}}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date-stop"
|
||||
v-if="stop.stopTime"
|
||||
:class="stop.stopType.replace(', ', '-')"
|
||||
>{{ stop.stopTime }} {{ stop.stopType }}</span>
|
||||
|
||||
<span
|
||||
class="date-departure"
|
||||
v-if="!stop.terminatesHere && stop.stopTime != 0"
|
||||
:class="{
|
||||
delayed: stop.departureDelay > 0,
|
||||
preponed: stop.departureDelay < 0,
|
||||
}"
|
||||
>
|
||||
o.
|
||||
{{
|
||||
stylizeTime(stop.departureRealTimeString, stop.departureDelay)
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="stop-line departure">{{ stop.departureLine }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import TrainStop from "@/scripts/interfaces/TrainStop";
|
||||
|
||||
@Component
|
||||
export default class TrainSchedule extends Vue {
|
||||
@Prop() readonly followingStops!: TrainStop[];
|
||||
@Prop() readonly currentStationName!: string;
|
||||
|
||||
stylizeTime(timeString: string, delay: number) {
|
||||
return (
|
||||
timeString +
|
||||
(delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "")
|
||||
);
|
||||
}
|
||||
|
||||
click() {
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.train-schedule {
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
margin-top: 1rem;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-bar,
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: calc(-0.5rem - 2px);
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.schedule-wrapper {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
ul.schedule-list {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
ul.schedule-list > li.schedule-item {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&.confirmed {
|
||||
& > .progress-bar,
|
||||
& > .stop-info > .info-indicator {
|
||||
background: lime;
|
||||
}
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
& > .progress-bar {
|
||||
background: lime;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
& > .stop-info > .info-indicator {
|
||||
background: orangered;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.schedule-item > .stop-info {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
& > .info-indicator {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
top: 50%;
|
||||
left: -1.5rem;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 15px;
|
||||
height: 2px;
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
& > .info-name {
|
||||
background: rgb(0, 81, 187);
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
& > .info-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span {
|
||||
background: #5c5c5c;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
& > .date-stop {
|
||||
&.ph,
|
||||
&.ph-pm {
|
||||
background: #ce8d00;
|
||||
}
|
||||
|
||||
&.pt,
|
||||
&.pm,
|
||||
&.pt-pm {
|
||||
background: #252525;
|
||||
}
|
||||
}
|
||||
|
||||
& > .date-arrival,
|
||||
& > .date-departure {
|
||||
&.delayed {
|
||||
background: rgb(250, 0, 0);
|
||||
}
|
||||
|
||||
&.preponed {
|
||||
background: rgb(0, 139, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.schedule-item > .stop-line {
|
||||
font-size: 0.8em;
|
||||
color: #bbb;
|
||||
padding: 0.3em 0;
|
||||
margin: 0.2em 0;
|
||||
|
||||
transform: translateX(-0.8rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user