mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
492 lines
10 KiB
Vue
492 lines
10 KiB
Vue
<template>
|
|
<div class="scenery-timetable">
|
|
<h3 class="timetable-header">
|
|
<span>AKTYWNE ROZKŁADY JAZDY</span>
|
|
|
|
<a
|
|
v-if="!timetableOnly"
|
|
:href="currentURL + '&timetable_only=1'"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
:src="viewIcon"
|
|
alt="icon-view"
|
|
title="Wyodrębnij rozkłady jazdy"
|
|
/>
|
|
</a>
|
|
</h3>
|
|
|
|
<div class="select-box" v-if="stationInfo.checkpoints">
|
|
<div class="option-container">
|
|
<div class="option-selected" @click="toggleOptionList">
|
|
<span>{{ selectedOption }}</span>
|
|
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
|
</div>
|
|
|
|
<ul class="option-list" :class="{ open: listOpen }">
|
|
<li
|
|
class="option-item"
|
|
v-for="(cp, i) in stationInfo.checkpoints"
|
|
:key="i"
|
|
@click="() => chooseOption(cp.checkpointName)"
|
|
>
|
|
<input type="option-radio" name="sort" />
|
|
<label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="timetable-item loading" v-if="dataStatus == 0"
|
|
>Ładowanie...</span
|
|
>
|
|
|
|
<span
|
|
class="timetable-item empty"
|
|
v-else-if="computedScheduledTrains.length == 0"
|
|
>Brak aktywnych rozkładów!</span
|
|
>
|
|
|
|
<transition-group name="list-anim">
|
|
<div
|
|
class="timetable-item"
|
|
v-for="(scheduledTrain, i) in computedScheduledTrains"
|
|
:key="i + 1"
|
|
>
|
|
<span class="timetable-general">
|
|
<span class="general-info">
|
|
<router-link
|
|
:to="{
|
|
name: 'TrainsView',
|
|
params: {
|
|
queryTrain: scheduledTrain.trainNo.toString(),
|
|
},
|
|
}"
|
|
>
|
|
<span>
|
|
<strong>{{ scheduledTrain.category }}</strong>
|
|
{{ scheduledTrain.trainNo }}
|
|
</span> </router-link
|
|
>|
|
|
<span>
|
|
<a
|
|
:href="
|
|
'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
|
|
"
|
|
target="_blank"
|
|
>{{ scheduledTrain.driverName }}</a
|
|
>
|
|
</span>
|
|
|
|
<div class="info-route">
|
|
<strong
|
|
>{{ scheduledTrain.beginsAt }} -
|
|
{{ scheduledTrain.terminatesAt }}</strong
|
|
>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="general-status">
|
|
<span :class="scheduledTrain.stopStatus">{{
|
|
scheduledTrain.stopLabel
|
|
}}</span>
|
|
</span>
|
|
</span>
|
|
|
|
<span class="timetable-schedule">
|
|
<span class="schedule-arrival">
|
|
<span
|
|
class="arrival-time begins"
|
|
v-if="scheduledTrain.stopInfo.beginsHere"
|
|
>
|
|
ROZPOCZYNA
|
|
<div>BIEG</div>
|
|
</span>
|
|
<span class="arrival-time" v-else>
|
|
{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
|
|
scheduledTrain.stopInfo.arrivalDelay
|
|
}})
|
|
</span>
|
|
</span>
|
|
|
|
<span class="schedule-stop">
|
|
<span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
|
|
{{ scheduledTrain.stopInfo.stopTime }}
|
|
{{ scheduledTrain.stopInfo.stopType }}
|
|
</span>
|
|
<span class="stop-arrow arrow"></span>
|
|
</span>
|
|
<span class="schedule-departure">
|
|
<span
|
|
class="departure-time terminates"
|
|
v-if="scheduledTrain.stopInfo.terminatesHere"
|
|
>KOŃCZY BIEG</span
|
|
>
|
|
<span class="departure-time" v-else>
|
|
{{ scheduledTrain.stopInfo.departureTimeString }} ({{
|
|
scheduledTrain.stopInfo.departureDelay
|
|
}})
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
|
|
import Station from "@/scripts/interfaces/Station";
|
|
import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
|
|
|
|
@Component
|
|
export default class SceneryTimetable extends Vue {
|
|
@Prop() readonly stationInfo!: Station;
|
|
@Prop() readonly timetableOnly!: boolean;
|
|
@Prop() readonly dataStatus!: number;
|
|
|
|
viewIcon: string = require("@/assets/icon-view.svg");
|
|
|
|
listOpen: boolean = false;
|
|
selectedOption: string = "";
|
|
|
|
mounted() {
|
|
if (!this.stationInfo.checkpoints) return;
|
|
|
|
if (this.selectedOption == "")
|
|
this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
|
|
}
|
|
|
|
activated() {
|
|
if (!this.stationInfo) return;
|
|
if (!this.stationInfo.checkpoints) return;
|
|
|
|
if (this.selectedOption == "")
|
|
this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
|
|
}
|
|
|
|
toggleOptionList() {
|
|
this.listOpen = !this.listOpen;
|
|
}
|
|
|
|
closeOptionList() {
|
|
this.listOpen = false;
|
|
}
|
|
|
|
chooseOption(name: string) {
|
|
this.selectedOption = name;
|
|
this.closeOptionList();
|
|
}
|
|
|
|
get currentURL() {
|
|
return `${location.origin}/scenery?hash=${this.stationInfo?.stationHash}`;
|
|
}
|
|
|
|
get computedScheduledTrains() {
|
|
if (!this.stationInfo) return [];
|
|
|
|
let scheduledTrains: ScheduledTrain[] | undefined;
|
|
|
|
if (this.stationInfo.checkpoints)
|
|
scheduledTrains = this.stationInfo.checkpoints.find(
|
|
(cp) => cp.checkpointName === this.selectedOption
|
|
)?.scheduledTrains;
|
|
else scheduledTrains = this.stationInfo.scheduledTrains;
|
|
|
|
return (
|
|
scheduledTrains?.sort((a, b) => {
|
|
if (a.stopStatusID > b.stopStatusID) return 1;
|
|
else if (a.stopStatusID < b.stopStatusID) return -1;
|
|
|
|
if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
|
|
else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
|
|
return -1;
|
|
|
|
return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
|
|
? 1
|
|
: -1;
|
|
}) || []
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../styles/responsive.scss";
|
|
@import "../../styles/variables.scss";
|
|
|
|
h3 {
|
|
margin: 0.5em 0;
|
|
padding: 0.3em;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 1.2em;
|
|
|
|
img {
|
|
width: 1.1em;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
.list-anim {
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition: all 250ms ease-out;
|
|
}
|
|
|
|
&-enter,
|
|
&-leave-to {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
&-move {
|
|
transition: transform 100ms;
|
|
}
|
|
}
|
|
|
|
.select-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.option {
|
|
&-container {
|
|
position: relative;
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
|
|
label {
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
background-color: rgba(#868686, 0.85);
|
|
}
|
|
|
|
transition: background 150ms ease-in;
|
|
}
|
|
|
|
&-selected,
|
|
&-list {
|
|
background: #444;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
&-selected {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
padding: 0.5rem 1rem;
|
|
min-width: 10em;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
img {
|
|
max-width: 0.75em;
|
|
}
|
|
}
|
|
|
|
&-list {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
z-index: 10;
|
|
|
|
background-color: rgba(#222, 0.95);
|
|
overflow: hidden;
|
|
|
|
max-height: 0;
|
|
|
|
&.open {
|
|
max-height: 250px;
|
|
opacity: 1;
|
|
}
|
|
|
|
transition: all 150ms ease-in;
|
|
}
|
|
}
|
|
|
|
.timetable {
|
|
&-header {
|
|
a {
|
|
display: flex;
|
|
}
|
|
|
|
img {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
margin: 1em auto;
|
|
font-size: 0.8em;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
|
|
padding: 0 0.5rem;
|
|
|
|
background: #555;
|
|
|
|
@include smallScreen() {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
&.loading,
|
|
&.empty {
|
|
padding: 1rem;
|
|
font-size: 1em;
|
|
}
|
|
|
|
&.empty {
|
|
color: $accentCol;
|
|
}
|
|
}
|
|
|
|
&-general {
|
|
padding: 0.5rem 0.3rem;
|
|
border-radius: 10px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
text-align: left;
|
|
|
|
overflow: hidden;
|
|
|
|
@include smallScreen() {
|
|
width: 95%;
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
|
|
&-schedule {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
|
|
font-size: 1.2em;
|
|
|
|
@include smallScreen() {
|
|
width: 100%;
|
|
margin: 0.7em 0;
|
|
font-size: 1.8em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.arrow {
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
display: inline-block;
|
|
padding: 2px;
|
|
margin-left: 50px;
|
|
|
|
position: relative;
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 55px;
|
|
height: 3px;
|
|
top: 4px;
|
|
left: 4px;
|
|
|
|
transform: translate(-100%, -1px) rotate(45deg);
|
|
transform-origin: right bottom;
|
|
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.general-info {
|
|
span {
|
|
color: $accentCol;
|
|
}
|
|
|
|
.info-route {
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.general-status {
|
|
span.arriving {
|
|
color: #aaa;
|
|
}
|
|
|
|
span.departed {
|
|
color: lime;
|
|
font-weight: bold;
|
|
|
|
&-away {
|
|
font-weight: bold;
|
|
color: rgb(0, 155, 0);
|
|
}
|
|
}
|
|
|
|
span.stopped {
|
|
color: #ffa600;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.online {
|
|
color: gold;
|
|
}
|
|
|
|
span.terminated {
|
|
color: #e00000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.schedule {
|
|
&-arrival,
|
|
&-stop,
|
|
&-departure {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin: 0 0.3rem;
|
|
}
|
|
|
|
&-stop {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.stop-time {
|
|
font-size: 0.7em;
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.arrival-time.begins,
|
|
.departure-time.terminates {
|
|
font-size: 0.75em;
|
|
}
|
|
</style> |