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,4 +1,4 @@
|
||||
<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 14L13 2L25 14" stroke="white" stroke-width="2"/>
|
||||
<path d="M1 20L13 32L25 20" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 14L13 2L25 14" stroke="white" stroke-width="2"/>
|
||||
<path d="M1 20L13 32L25 20" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 226 B After Width: | Height: | Size: 230 B |
@@ -1,166 +1,166 @@
|
||||
<template>
|
||||
<div class="modal" v-if="!modalHidden">
|
||||
<div class="modal_content">
|
||||
<span class="modal_title">Grosza daj Stacjownikowi...</span>
|
||||
<div class="modal_body">
|
||||
<div class="modal_body-header">
|
||||
Stacjownik to projekt całkowicie darmowy dla wszystkich.
|
||||
Jednak jeśli chcesz go wesprzeć i pomóc w rozwoju strony oraz nowych funkcjonalności, które wykraczają poza darmowe możliwości
|
||||
hostingu, na którym jest postawiony, zostaw złotówkę, nowigradzką koronę czy nawet rubla!
|
||||
</div>
|
||||
|
||||
<div class="modal_payments">
|
||||
<div>Płatności dokonasz korzystając z poniższych metod:</div>
|
||||
<div class="payment">
|
||||
<div>
|
||||
<a target="_blank" href="https://paypal.me/spythere">
|
||||
<img :src="paypalIcon" alt="icon-paypal" />
|
||||
<span>PAYPAL</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment">
|
||||
<div>
|
||||
<div class="payment_open" v-if="showNumber">94 1140 2004 0000 3502 7784 9203</div>
|
||||
<div class="payment_closed" v-else @click="showNumber = true">
|
||||
<b>PRZELEW NA KONTO</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>Wielkie dzięki i do zobaczenia na szlaku!</div>
|
||||
|
||||
<div class="modal_buttons">
|
||||
<button class="button" @click="toggleModal">PRZYJĄŁEM!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
|
||||
@Component
|
||||
export default class Modal extends Vue {
|
||||
@Prop() modalHidden!: boolean;
|
||||
|
||||
showNumber = false;
|
||||
STORAGE_ID = "modal_donation";
|
||||
|
||||
paypalIcon: string = require("@/assets/icon-paypal.svg");
|
||||
|
||||
toggleModal(type: string) {
|
||||
this.$emit("toggleModal");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
|
||||
.modal {
|
||||
z-index: 100;
|
||||
|
||||
font-size: calc(1rem + 0.8vw);
|
||||
padding: 0.3rem;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 65%;
|
||||
max-width: 950px;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background: rgba(black, 0.85);
|
||||
color: white;
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1.2rem;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
&_content {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&_title {
|
||||
color: gold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&_body {
|
||||
font-size: 0.75em;
|
||||
|
||||
&-header {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&_payments {
|
||||
> span {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.payment {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: 0.3em;
|
||||
|
||||
&_closed {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: gold;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 0.2em;
|
||||
padding: 0.15em 0.3em;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.2em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> button {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="modal" v-if="!modalHidden">
|
||||
<div class="modal_content">
|
||||
<span class="modal_title">Grosza daj Stacjownikowi...</span>
|
||||
<div class="modal_body">
|
||||
<div class="modal_body-header">
|
||||
Stacjownik to projekt całkowicie darmowy dla wszystkich.
|
||||
Jednak jeśli chcesz go wesprzeć i pomóc w rozwoju strony oraz nowych funkcjonalności, które wykraczają poza darmowe możliwości
|
||||
hostingu, na którym jest postawiony, zostaw złotówkę, nowigradzką koronę czy nawet rubla!
|
||||
</div>
|
||||
|
||||
<div class="modal_payments">
|
||||
<div>Płatności dokonasz korzystając z poniższych metod:</div>
|
||||
<div class="payment">
|
||||
<div>
|
||||
<a target="_blank" href="https://paypal.me/spythere">
|
||||
<img :src="paypalIcon" alt="icon-paypal" />
|
||||
<span>PAYPAL</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment">
|
||||
<div>
|
||||
<div class="payment_open" v-if="showNumber">94 1140 2004 0000 3502 7784 9203</div>
|
||||
<div class="payment_closed" v-else @click="showNumber = true">
|
||||
<b>PRZELEW NA KONTO</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>Wielkie dzięki i do zobaczenia na szlaku!</div>
|
||||
|
||||
<div class="modal_buttons">
|
||||
<button class="button" @click="toggleModal">PRZYJĄŁEM!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
|
||||
@Component
|
||||
export default class Modal extends Vue {
|
||||
@Prop() modalHidden!: boolean;
|
||||
|
||||
showNumber = false;
|
||||
STORAGE_ID = "modal_donation";
|
||||
|
||||
paypalIcon: string = require("@/assets/icon-paypal.svg");
|
||||
|
||||
toggleModal(type: string) {
|
||||
this.$emit("toggleModal");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
|
||||
.modal {
|
||||
z-index: 100;
|
||||
|
||||
font-size: calc(1rem + 0.8vw);
|
||||
padding: 0.3rem;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 65%;
|
||||
max-width: 950px;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background: rgba(black, 0.85);
|
||||
color: white;
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1.2rem;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
&_content {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&_title {
|
||||
color: gold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&_body {
|
||||
font-size: 0.75em;
|
||||
|
||||
&-header {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&_payments {
|
||||
> span {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.payment {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: 0.3em;
|
||||
|
||||
&_closed {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: gold;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 0.2em;
|
||||
padding: 0.15em 0.3em;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.2em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> button {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+108
-108
@@ -1,109 +1,109 @@
|
||||
<template>
|
||||
<div class="select-box">
|
||||
<div class="title">Sortuj według</div>
|
||||
|
||||
<div class="option-selected" @click="toggleOptionList">
|
||||
<span>{{ selectedOption }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<div class="option-container">
|
||||
<ul class="option-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option-item"
|
||||
v-for="(option, i) in sortOptionList"
|
||||
:key="i"
|
||||
@click="() => chooseOption(option)"
|
||||
>
|
||||
<input type="option-radio" name="sort" :id="option.id" />
|
||||
<label :for="option.id">{{ option.content }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class SelectBox extends Vue {
|
||||
@Prop() title!: string;
|
||||
@Prop() optionList!: string[];
|
||||
|
||||
selectedOption: string = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-list {
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="select-box">
|
||||
<div class="title">Sortuj według</div>
|
||||
|
||||
<div class="option-selected" @click="toggleOptionList">
|
||||
<span>{{ selectedOption }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<div class="option-container">
|
||||
<ul class="option-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option-item"
|
||||
v-for="(option, i) in sortOptionList"
|
||||
:key="i"
|
||||
@click="() => chooseOption(option)"
|
||||
>
|
||||
<input type="option-radio" name="sort" :id="option.id" />
|
||||
<label :for="option.id">{{ option.content }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class SelectBox extends Vue {
|
||||
@Prop() title!: string;
|
||||
@Prop() optionList!: string[];
|
||||
|
||||
selectedOption: string = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-list {
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,404 +1,404 @@
|
||||
<template>
|
||||
<div class="scenery-info">
|
||||
<div class="info-header">
|
||||
<div class="scenery-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="scenery-hash">#{{ stationInfo.stationHash }}</div>
|
||||
</div>
|
||||
|
||||
<section v-if="!timetableOnly">
|
||||
<div class="info-stats">
|
||||
<span class="likes">
|
||||
<img :src="likeIcon" alt="icon-like" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</span>
|
||||
<span class="users">
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
<span>{{ stationInfo.currentUsers }}</span>
|
||||
/
|
||||
<span>{{ stationInfo.maxUsers }}</span>
|
||||
</span>
|
||||
<span class="spawns">
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
<span>{{ stationInfo.spawns.length }}</span>
|
||||
</span>
|
||||
<span class="schedules">
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
<span v-if="stationInfo.scheduledTrains">
|
||||
<span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-brief">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info-dispatcher">
|
||||
<div>
|
||||
<span
|
||||
class="level"
|
||||
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
|
||||
>{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
|
||||
|
||||
<span class="name">{{ stationInfo.dispatcherName }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="status"
|
||||
:class="statusClasses(stationInfo.occupiedTo)"
|
||||
>{{ stationInfo.occupiedTo }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-lists">
|
||||
<div class="user-list">
|
||||
<h3 class="user-header">
|
||||
GRACZE ONLINE
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
</h3>
|
||||
|
||||
<div
|
||||
v-for="(train, i) in computedStationTrains"
|
||||
class="user"
|
||||
:class="train.stopStatus"
|
||||
:key="train.trainNo + i"
|
||||
@click="() => navigateToTrain(train.trainNo)"
|
||||
>
|
||||
<span class="user_train">{{ train.trainNo }}</span>
|
||||
<span class="user_name">{{ train.driverName }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="user offline"
|
||||
v-if="!computedStationTrains || computedStationTrains.length == 0"
|
||||
>BRAK AKTYWNYCH GRACZY</div>
|
||||
</div>
|
||||
|
||||
<div class="spawn-list">
|
||||
<h3 class="spawn-header">
|
||||
OTWARTE SPAWNY
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
</h3>
|
||||
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawns"
|
||||
:key="spawn.spawnName + stationInfo.dispatcherName + i"
|
||||
>
|
||||
<span class="spawn_name">{{ spawn.spawnName }}</span>
|
||||
<span class="spawn_length">{{ spawn.spawnLength }}m</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="spawn none"
|
||||
v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
|
||||
>BRAK OTWARTYCH SPAWNÓW</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
@Component
|
||||
export default class SceneryInfo extends styleMixin {
|
||||
@Prop() readonly stationInfo!: Station;
|
||||
@Prop() readonly timetableOnly!: boolean;
|
||||
|
||||
likeIcon: string = require("@/assets/icon-like.svg");
|
||||
spawnIcon: string = require("@/assets/icon-spawn.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
userIcon: string = require("@/assets/icon-user.svg");
|
||||
|
||||
get computedStationTrains() {
|
||||
if (!this.stationInfo) return null;
|
||||
|
||||
return this.stationInfo.stationTrains.map((stationTrain) => {
|
||||
const scheduledData = this.stationInfo?.scheduledTrains.find(
|
||||
(scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
|
||||
);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
navigateToTrain(trainNo: number) {
|
||||
this.$router.push({
|
||||
name: "TrainsView",
|
||||
params: { passedSearchedTrain: trainNo.toString() },
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/user_badge.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;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
&-header {
|
||||
padding: 1rem;
|
||||
|
||||
& > .scenery-name {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: $accentCol;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& > .scenery-hash {
|
||||
font-size: 1em;
|
||||
line-height: 0.8em;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
&-stats {
|
||||
font-size: 1.3em;
|
||||
padding: 1rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 0.6em;
|
||||
}
|
||||
|
||||
.likes,
|
||||
.spawns {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
span > img {
|
||||
width: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-brief {
|
||||
padding: 1rem 0;
|
||||
|
||||
img {
|
||||
width: 2.5em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-dispatcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.level {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
background: firebrick;
|
||||
|
||||
border-radius: 0.1em;
|
||||
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.6em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&-lists {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
& > .user-list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user,
|
||||
.spawn {
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
background: #585858;
|
||||
|
||||
margin: 0.25em;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
cursor: pointer;
|
||||
|
||||
&_train {
|
||||
color: black;
|
||||
background-color: $no-timetable;
|
||||
|
||||
transition: background-color 200ms;
|
||||
-ms-transition: background-color 200ms;
|
||||
-webkit-transition: background-color 200ms;
|
||||
}
|
||||
|
||||
&.no-timetable {
|
||||
pointer-events: none;
|
||||
|
||||
& > .user_train {
|
||||
background-color: $no-timetable;
|
||||
}
|
||||
}
|
||||
|
||||
&.departed > &_train {
|
||||
background-color: $departed;
|
||||
}
|
||||
|
||||
&.stopped > &_train {
|
||||
background-color: $stopped;
|
||||
}
|
||||
|
||||
&.online > &_train {
|
||||
background-color: $online;
|
||||
}
|
||||
|
||||
&.terminated > &_train {
|
||||
background-color: $terminated;
|
||||
}
|
||||
|
||||
&.disconnected > &_train {
|
||||
background-color: $disconnected;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background: firebrick;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn {
|
||||
&_length {
|
||||
background: $accentCol;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn.none,
|
||||
.user.offline {
|
||||
font-weight: 600;
|
||||
|
||||
padding: 0.2em 0.4em;
|
||||
background: firebrick;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="scenery-info">
|
||||
<div class="info-header">
|
||||
<div class="scenery-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="scenery-hash">#{{ stationInfo.stationHash }}</div>
|
||||
</div>
|
||||
|
||||
<section v-if="!timetableOnly">
|
||||
<div class="info-stats">
|
||||
<span class="likes">
|
||||
<img :src="likeIcon" alt="icon-like" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</span>
|
||||
<span class="users">
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
<span>{{ stationInfo.currentUsers }}</span>
|
||||
/
|
||||
<span>{{ stationInfo.maxUsers }}</span>
|
||||
</span>
|
||||
<span class="spawns">
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
<span>{{ stationInfo.spawns.length }}</span>
|
||||
</span>
|
||||
<span class="schedules">
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
<span v-if="stationInfo.scheduledTrains">
|
||||
<span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-brief">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info-dispatcher">
|
||||
<div>
|
||||
<span
|
||||
class="level"
|
||||
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
|
||||
>{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
|
||||
|
||||
<span class="name">{{ stationInfo.dispatcherName }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="status"
|
||||
:class="statusClasses(stationInfo.occupiedTo)"
|
||||
>{{ stationInfo.occupiedTo }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-lists">
|
||||
<div class="user-list">
|
||||
<h3 class="user-header">
|
||||
GRACZE ONLINE
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
</h3>
|
||||
|
||||
<div
|
||||
v-for="(train, i) in computedStationTrains"
|
||||
class="user"
|
||||
:class="train.stopStatus"
|
||||
:key="train.trainNo + i"
|
||||
@click="() => navigateToTrain(train.trainNo)"
|
||||
>
|
||||
<span class="user_train">{{ train.trainNo }}</span>
|
||||
<span class="user_name">{{ train.driverName }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="user offline"
|
||||
v-if="!computedStationTrains || computedStationTrains.length == 0"
|
||||
>BRAK AKTYWNYCH GRACZY</div>
|
||||
</div>
|
||||
|
||||
<div class="spawn-list">
|
||||
<h3 class="spawn-header">
|
||||
OTWARTE SPAWNY
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
</h3>
|
||||
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawns"
|
||||
:key="spawn.spawnName + stationInfo.dispatcherName + i"
|
||||
>
|
||||
<span class="spawn_name">{{ spawn.spawnName }}</span>
|
||||
<span class="spawn_length">{{ spawn.spawnLength }}m</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="spawn none"
|
||||
v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
|
||||
>BRAK OTWARTYCH SPAWNÓW</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
@Component
|
||||
export default class SceneryInfo extends styleMixin {
|
||||
@Prop() readonly stationInfo!: Station;
|
||||
@Prop() readonly timetableOnly!: boolean;
|
||||
|
||||
likeIcon: string = require("@/assets/icon-like.svg");
|
||||
spawnIcon: string = require("@/assets/icon-spawn.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
userIcon: string = require("@/assets/icon-user.svg");
|
||||
|
||||
get computedStationTrains() {
|
||||
if (!this.stationInfo) return null;
|
||||
|
||||
return this.stationInfo.stationTrains.map((stationTrain) => {
|
||||
const scheduledData = this.stationInfo?.scheduledTrains.find(
|
||||
(scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
|
||||
);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
navigateToTrain(trainNo: number) {
|
||||
this.$router.push({
|
||||
name: "TrainsView",
|
||||
params: { passedSearchedTrain: trainNo.toString() },
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/user_badge.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;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
&-header {
|
||||
padding: 1rem;
|
||||
|
||||
& > .scenery-name {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: $accentCol;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& > .scenery-hash {
|
||||
font-size: 1em;
|
||||
line-height: 0.8em;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
&-stats {
|
||||
font-size: 1.3em;
|
||||
padding: 1rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 0.6em;
|
||||
}
|
||||
|
||||
.likes,
|
||||
.spawns {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
span > img {
|
||||
width: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-brief {
|
||||
padding: 1rem 0;
|
||||
|
||||
img {
|
||||
width: 2.5em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-dispatcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.level {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
background: firebrick;
|
||||
|
||||
border-radius: 0.1em;
|
||||
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.6em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&-lists {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
& > .user-list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user,
|
||||
.spawn {
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
background: #585858;
|
||||
|
||||
margin: 0.25em;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
cursor: pointer;
|
||||
|
||||
&_train {
|
||||
color: black;
|
||||
background-color: $no-timetable;
|
||||
|
||||
transition: background-color 200ms;
|
||||
-ms-transition: background-color 200ms;
|
||||
-webkit-transition: background-color 200ms;
|
||||
}
|
||||
|
||||
&.no-timetable {
|
||||
pointer-events: none;
|
||||
|
||||
& > .user_train {
|
||||
background-color: $no-timetable;
|
||||
}
|
||||
}
|
||||
|
||||
&.departed > &_train {
|
||||
background-color: $departed;
|
||||
}
|
||||
|
||||
&.stopped > &_train {
|
||||
background-color: $stopped;
|
||||
}
|
||||
|
||||
&.online > &_train {
|
||||
background-color: $online;
|
||||
}
|
||||
|
||||
&.terminated > &_train {
|
||||
background-color: $terminated;
|
||||
}
|
||||
|
||||
&.disconnected > &_train {
|
||||
background-color: $disconnected;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background: firebrick;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn {
|
||||
&_length {
|
||||
background: $accentCol;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn.none,
|
||||
.user.offline {
|
||||
font-weight: 600;
|
||||
|
||||
padding: 0.2em 0.4em;
|
||||
background: firebrick;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,467 +1,467 @@
|
||||
<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: {
|
||||
passedSearchedTrain: 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;
|
||||
}
|
||||
<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: {
|
||||
passedSearchedTrain: 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>
|
||||
@@ -1,422 +1,422 @@
|
||||
<template>
|
||||
<section class="filter-card">
|
||||
<div class="card-exit" @click="exit">
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
|
||||
</div>
|
||||
|
||||
<div class="card-title flex">FILTRUJ STACJE</div>
|
||||
|
||||
<div class="card-options">
|
||||
<div class="option" v-for="(option, i) in inputs.options" :key="i">
|
||||
<label class="option-label">
|
||||
<input
|
||||
class="option-input"
|
||||
type="checkbox"
|
||||
:name="option.name"
|
||||
:defaultValue="option.defaultValue"
|
||||
:id="option.id"
|
||||
v-model="option.value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ option.content }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-sliders">
|
||||
<div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
|
||||
<input
|
||||
class="slider-input"
|
||||
type="range"
|
||||
:name="slider.name"
|
||||
:id="slider.id"
|
||||
:min="slider.minRange"
|
||||
:max="slider.maxRange"
|
||||
v-model="slider.value"
|
||||
@change="handleInput"
|
||||
/>
|
||||
|
||||
<span class="slider-value">{{ slider.value }}</span>
|
||||
|
||||
<div class="slider-content">{{ slider.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-save">
|
||||
<div class="option save">
|
||||
<label class="option-label">
|
||||
<input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
|
||||
<span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions flex">
|
||||
<button class="button" @click="resetFilters">RESET FILTRÓW</button>
|
||||
<button class="button" @click="exit">ZAMKNIJ FILTRY</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
|
||||
@Component
|
||||
export default class FilterCard extends Vue {
|
||||
inputs = { ...inputData };
|
||||
saveOptions: boolean = false;
|
||||
STORAGE_KEY: string = "options_saved";
|
||||
|
||||
@Prop() exit!: () => void;
|
||||
|
||||
mounted() {
|
||||
this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
|
||||
}
|
||||
|
||||
handleChange(e: Event): void {
|
||||
const target = <HTMLInputElement>e.target;
|
||||
|
||||
this.$emit("changeFilterValue", {
|
||||
name: target.name,
|
||||
value: !target.checked,
|
||||
});
|
||||
|
||||
if (this.saveOptions)
|
||||
StorageManager.setBooleanValue(target.name, target.checked);
|
||||
}
|
||||
|
||||
handleInput(e: Event): void {
|
||||
const target = <HTMLInputElement>e.target;
|
||||
this.$emit("changeFilterValue", {
|
||||
name: target.name,
|
||||
value: target.value,
|
||||
});
|
||||
|
||||
if (this.saveOptions)
|
||||
StorageManager.setStringValue(target.name, target.value);
|
||||
}
|
||||
|
||||
saveFilters(): void {
|
||||
if (!this.saveOptions) {
|
||||
StorageManager.unregisterStorage(this.STORAGE_KEY);
|
||||
|
||||
console.log(this.saveOptions);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
StorageManager.registerStorage(this.STORAGE_KEY);
|
||||
|
||||
this.inputs.options.forEach((option) =>
|
||||
StorageManager.setBooleanValue(option.name, option.value)
|
||||
);
|
||||
|
||||
this.inputs.sliders.forEach((slider) =>
|
||||
StorageManager.setNumericValue(slider.name, slider.value)
|
||||
);
|
||||
}
|
||||
|
||||
resetFilters(): void {
|
||||
this.inputs.options.forEach((option) => {
|
||||
option.value = option.defaultValue;
|
||||
StorageManager.setBooleanValue(option.name, option.value);
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
slider.value = slider.defaultValue;
|
||||
StorageManager.setNumericValue(slider.name, slider.value);
|
||||
});
|
||||
|
||||
this.$emit("resetFilters");
|
||||
}
|
||||
|
||||
closeCard(): void {
|
||||
this.exit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
@import "../../styles/variables";
|
||||
|
||||
.filter-card {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
z-index: 3;
|
||||
|
||||
overflow: auto;
|
||||
max-height: 95vh;
|
||||
|
||||
padding: 0.5em;
|
||||
max-width: 600px;
|
||||
width: 65%;
|
||||
|
||||
background: #262a2e;
|
||||
|
||||
font-size: calc(0.75rem + 0.45vw);
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
font-size: calc(0.7em + 1.1vw);
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&-title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
color: $accentCol;
|
||||
|
||||
margin: 0.5em 0;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
|
||||
&-sliders {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
margin-top: 0.7em;
|
||||
|
||||
button {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-save {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.option {
|
||||
width: 30%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&-exit {
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
margin: 0.3em;
|
||||
|
||||
&-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-content {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.6em 0.5em;
|
||||
border-radius: 0.4em;
|
||||
|
||||
font-size: 0.65em;
|
||||
|
||||
background-color: #333;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&.save {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&:not(.checked) {
|
||||
background-color: #585858;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
&.access {
|
||||
background-color: #e03b07;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #e03b07;
|
||||
}
|
||||
}
|
||||
|
||||
&.control {
|
||||
background-color: #0085ff;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #0085ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.signals {
|
||||
background-color: #b000bf;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #b000bf;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: #05b702;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #05b702;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: #05b702;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #05b702;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
|
||||
padding: 0.5em;
|
||||
|
||||
&-value {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: $accentCol;
|
||||
margin-right: 0.3em;
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&-input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
min-width: 25%;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-top: -7px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: white;
|
||||
border: 4px solid $accentCol;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-top: -5px;
|
||||
border: 3px solid $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: white;
|
||||
border: 4px solid $accentCol;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 3px solid $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<section class="filter-card">
|
||||
<div class="card-exit" @click="exit">
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
|
||||
</div>
|
||||
|
||||
<div class="card-title flex">FILTRUJ STACJE</div>
|
||||
|
||||
<div class="card-options">
|
||||
<div class="option" v-for="(option, i) in inputs.options" :key="i">
|
||||
<label class="option-label">
|
||||
<input
|
||||
class="option-input"
|
||||
type="checkbox"
|
||||
:name="option.name"
|
||||
:defaultValue="option.defaultValue"
|
||||
:id="option.id"
|
||||
v-model="option.value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ option.content }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-sliders">
|
||||
<div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
|
||||
<input
|
||||
class="slider-input"
|
||||
type="range"
|
||||
:name="slider.name"
|
||||
:id="slider.id"
|
||||
:min="slider.minRange"
|
||||
:max="slider.maxRange"
|
||||
v-model="slider.value"
|
||||
@change="handleInput"
|
||||
/>
|
||||
|
||||
<span class="slider-value">{{ slider.value }}</span>
|
||||
|
||||
<div class="slider-content">{{ slider.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-save">
|
||||
<div class="option save">
|
||||
<label class="option-label">
|
||||
<input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
|
||||
<span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions flex">
|
||||
<button class="button" @click="resetFilters">RESET FILTRÓW</button>
|
||||
<button class="button" @click="exit">ZAMKNIJ FILTRY</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
|
||||
@Component
|
||||
export default class FilterCard extends Vue {
|
||||
inputs = { ...inputData };
|
||||
saveOptions: boolean = false;
|
||||
STORAGE_KEY: string = "options_saved";
|
||||
|
||||
@Prop() exit!: () => void;
|
||||
|
||||
mounted() {
|
||||
this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
|
||||
}
|
||||
|
||||
handleChange(e: Event): void {
|
||||
const target = <HTMLInputElement>e.target;
|
||||
|
||||
this.$emit("changeFilterValue", {
|
||||
name: target.name,
|
||||
value: !target.checked,
|
||||
});
|
||||
|
||||
if (this.saveOptions)
|
||||
StorageManager.setBooleanValue(target.name, target.checked);
|
||||
}
|
||||
|
||||
handleInput(e: Event): void {
|
||||
const target = <HTMLInputElement>e.target;
|
||||
this.$emit("changeFilterValue", {
|
||||
name: target.name,
|
||||
value: target.value,
|
||||
});
|
||||
|
||||
if (this.saveOptions)
|
||||
StorageManager.setStringValue(target.name, target.value);
|
||||
}
|
||||
|
||||
saveFilters(): void {
|
||||
if (!this.saveOptions) {
|
||||
StorageManager.unregisterStorage(this.STORAGE_KEY);
|
||||
|
||||
console.log(this.saveOptions);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
StorageManager.registerStorage(this.STORAGE_KEY);
|
||||
|
||||
this.inputs.options.forEach((option) =>
|
||||
StorageManager.setBooleanValue(option.name, option.value)
|
||||
);
|
||||
|
||||
this.inputs.sliders.forEach((slider) =>
|
||||
StorageManager.setNumericValue(slider.name, slider.value)
|
||||
);
|
||||
}
|
||||
|
||||
resetFilters(): void {
|
||||
this.inputs.options.forEach((option) => {
|
||||
option.value = option.defaultValue;
|
||||
StorageManager.setBooleanValue(option.name, option.value);
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
slider.value = slider.defaultValue;
|
||||
StorageManager.setNumericValue(slider.name, slider.value);
|
||||
});
|
||||
|
||||
this.$emit("resetFilters");
|
||||
}
|
||||
|
||||
closeCard(): void {
|
||||
this.exit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
@import "../../styles/variables";
|
||||
|
||||
.filter-card {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
z-index: 3;
|
||||
|
||||
overflow: auto;
|
||||
max-height: 95vh;
|
||||
|
||||
padding: 0.5em;
|
||||
max-width: 600px;
|
||||
width: 65%;
|
||||
|
||||
background: #262a2e;
|
||||
|
||||
font-size: calc(0.75rem + 0.45vw);
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
font-size: calc(0.7em + 1.1vw);
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&-title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
color: $accentCol;
|
||||
|
||||
margin: 0.5em 0;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
|
||||
&-sliders {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
margin-top: 0.7em;
|
||||
|
||||
button {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-save {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.option {
|
||||
width: 30%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&-exit {
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
margin: 0.3em;
|
||||
|
||||
&-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-content {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.6em 0.5em;
|
||||
border-radius: 0.4em;
|
||||
|
||||
font-size: 0.65em;
|
||||
|
||||
background-color: #333;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&.save {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&:not(.checked) {
|
||||
background-color: #585858;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
&.access {
|
||||
background-color: #e03b07;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #e03b07;
|
||||
}
|
||||
}
|
||||
|
||||
&.control {
|
||||
background-color: #0085ff;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #0085ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.signals {
|
||||
background-color: #b000bf;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #b000bf;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: #05b702;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #05b702;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: #05b702;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px #05b702;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
|
||||
padding: 0.5em;
|
||||
|
||||
&-value {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: $accentCol;
|
||||
margin-right: 0.3em;
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&-input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
min-width: 25%;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-top: -7px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: white;
|
||||
border: 4px solid $accentCol;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-top: -5px;
|
||||
border: 3px solid $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: white;
|
||||
border: 4px solid $accentCol;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 3px solid $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,141 +1,141 @@
|
||||
<template>
|
||||
<div class="options">
|
||||
<div class="options-actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{'open': filterCardOpen}"
|
||||
@click="() => toggleCardsState('filter')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
|
||||
<p>FILTRY</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{'open': legendCardOpen}"
|
||||
@click="() => toggleCardsState('legend')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
|
||||
<p>LEGENDA</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="options-content">
|
||||
<transition name="card-anim"></transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class Options extends Vue {
|
||||
filterCardOpen: boolean = false;
|
||||
legendCardOpen: boolean = false;
|
||||
|
||||
toggleCardsState(name: string): void {
|
||||
if (name == "filter") {
|
||||
this.legendCardOpen = false;
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
|
||||
if (name == "legend") {
|
||||
this.filterCardOpen = false;
|
||||
this.legendCardOpen = !this.legendCardOpen;
|
||||
}
|
||||
}
|
||||
|
||||
toggleCardState(): void {
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
|
||||
toggleLegendCardState(): void {
|
||||
this.legendCardOpen = !this.legendCardOpen;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.75em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 0;
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover > p,
|
||||
&.open > p {
|
||||
max-width: 500px;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="options">
|
||||
<div class="options-actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{'open': filterCardOpen}"
|
||||
@click="() => toggleCardsState('filter')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
|
||||
<p>FILTRY</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{'open': legendCardOpen}"
|
||||
@click="() => toggleCardsState('legend')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
|
||||
<p>LEGENDA</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="options-content">
|
||||
<transition name="card-anim"></transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class Options extends Vue {
|
||||
filterCardOpen: boolean = false;
|
||||
legendCardOpen: boolean = false;
|
||||
|
||||
toggleCardsState(name: string): void {
|
||||
if (name == "filter") {
|
||||
this.legendCardOpen = false;
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
|
||||
if (name == "legend") {
|
||||
this.filterCardOpen = false;
|
||||
this.legendCardOpen = !this.legendCardOpen;
|
||||
}
|
||||
}
|
||||
|
||||
toggleCardState(): void {
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
|
||||
toggleLegendCardState(): void {
|
||||
this.legendCardOpen = !this.legendCardOpen;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.75em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 0;
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover > p,
|
||||
&.open > p {
|
||||
max-width: 500px;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,426 +1,426 @@
|
||||
<template>
|
||||
<section class="card station-card">
|
||||
<div class="card-exit">
|
||||
<img
|
||||
class="schedule-icon"
|
||||
:src="require('@/assets/icon-clock.svg')"
|
||||
alt="schedule-icon"
|
||||
@click="() => (cardMode = cardMode == 0 ? 1 : 0)"
|
||||
/>
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
|
||||
</div>
|
||||
|
||||
<div class="card-content" :class="{ offline: !stationInfo.online }">
|
||||
<div class="main">
|
||||
<div class="main-content">
|
||||
<span class="main-level flex" v-if="stationInfo.reqLevel > -1">
|
||||
{{
|
||||
2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
|
||||
}}
|
||||
</span>
|
||||
<span class="main-general">
|
||||
<div class="main-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="main-hash">{{ stationInfo.stationHash }}</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icons">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="dispatcher">
|
||||
<div
|
||||
class="dispatcher-level flex"
|
||||
:style="
|
||||
calculateExpStyle(
|
||||
stationInfo.dispatcherExp,
|
||||
stationInfo.dispatcherIsSupporter
|
||||
)
|
||||
"
|
||||
>{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
|
||||
<div class="dispatcher-info">
|
||||
<div class="dispatcher-name">
|
||||
<a
|
||||
:href="
|
||||
'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
|
||||
"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.dispatcherName || "---" }}</a>
|
||||
</div>
|
||||
|
||||
<div class="dispatcher-rate">
|
||||
<img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hours">
|
||||
<div class="hours-title title">STATUS</div>
|
||||
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">
|
||||
{{
|
||||
stationInfo.occupiedTo
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spawns flex flex-column">
|
||||
<h3 class="spawns-title title">OTWARTE SPAWNY</h3>
|
||||
<div class="spawns-content">
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawnString"
|
||||
:key="spawn + stationInfo.dispatcherName + i"
|
||||
>{{ spawn }}</span>
|
||||
|
||||
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="users flex flex-column">
|
||||
<h3 class="users-title title">GRACZE NA STACJI</h3>
|
||||
<div class="users-content">
|
||||
<div
|
||||
class="user-badge"
|
||||
:class="train.stopStatus"
|
||||
v-for="train in computedStationTrains"
|
||||
:key="train.trainNo + train.driverName"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: { passedSearchedTrain: train.trainNo.toString() },
|
||||
}"
|
||||
>
|
||||
<span>{{ train.trainNo }}</span>
|
||||
|
|
||||
<span>{{ train.driverName }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="user borderless"
|
||||
v-if="
|
||||
!stationInfo.stationTrains ||
|
||||
stationInfo.stationTrains.length == 0
|
||||
"
|
||||
>BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StationTimetable
|
||||
:class="{ show: cardMode == 1 }"
|
||||
:scheduledTrains="this.stationInfo.scheduledTrains"
|
||||
:stationName="stationInfo.stationName"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StationTimetable from "@/components/StationsView/StationTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationTimetable
|
||||
}
|
||||
})
|
||||
export default class StationCard extends styleMixin {
|
||||
@Prop() stationInfo!: Station;
|
||||
@Prop() exit!: void;
|
||||
|
||||
cardMode: number = 0;
|
||||
|
||||
get computedDispatcherExp(): string {
|
||||
return this.stationInfo.dispatcherExp < 2
|
||||
? "L"
|
||||
: `${this.stationInfo.dispatcherExp}`;
|
||||
}
|
||||
|
||||
get computedStationTrains() {
|
||||
return this.stationInfo.stationTrains.map(stationTrain => {
|
||||
const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
|
||||
.title {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.4vw);
|
||||
max-width: 800px;
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&-exit {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
font-size: 1.6em;
|
||||
margin: 0.1em 0.1em;
|
||||
}
|
||||
|
||||
.schedule-icon {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
min-width: 200px;
|
||||
max-height: 600px;
|
||||
|
||||
transform: translateY(0%);
|
||||
|
||||
gap: 1.5em;
|
||||
|
||||
&.offline {
|
||||
.users,
|
||||
.spawns,
|
||||
.dispatcher {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
grid-area: main;
|
||||
text-align: center;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include smallScreen() {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-level {
|
||||
background: $accentCol;
|
||||
color: black;
|
||||
|
||||
font-size: 3em;
|
||||
font-weight: 600;
|
||||
|
||||
border-radius: 50%;
|
||||
width: 1.7em;
|
||||
height: 1.7em;
|
||||
margin: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
&-hash {
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
font-size: 2.3em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
grid-area: icons;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 3em;
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.dispatcher {
|
||||
grid-area: dispatcher;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&-level {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
margin-right: 0.3em;
|
||||
|
||||
max-width: 2em;
|
||||
|
||||
background: forestgreen;
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 1.35em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&-rate {
|
||||
display: flex;
|
||||
font-size: 1.3em;
|
||||
|
||||
span {
|
||||
margin: 0 0.3em;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hours {
|
||||
grid-area: hours;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.status {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
grid-area: users;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.spawns {
|
||||
grid-area: spawns;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
& > .spawn {
|
||||
padding: 0.3em 0.4em;
|
||||
margin: 0.3em;
|
||||
background: #585858;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<section class="card station-card">
|
||||
<div class="card-exit">
|
||||
<img
|
||||
class="schedule-icon"
|
||||
:src="require('@/assets/icon-clock.svg')"
|
||||
alt="schedule-icon"
|
||||
@click="() => (cardMode = cardMode == 0 ? 1 : 0)"
|
||||
/>
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
|
||||
</div>
|
||||
|
||||
<div class="card-content" :class="{ offline: !stationInfo.online }">
|
||||
<div class="main">
|
||||
<div class="main-content">
|
||||
<span class="main-level flex" v-if="stationInfo.reqLevel > -1">
|
||||
{{
|
||||
2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
|
||||
}}
|
||||
</span>
|
||||
<span class="main-general">
|
||||
<div class="main-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="main-hash">{{ stationInfo.stationHash }}</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icons">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="dispatcher">
|
||||
<div
|
||||
class="dispatcher-level flex"
|
||||
:style="
|
||||
calculateExpStyle(
|
||||
stationInfo.dispatcherExp,
|
||||
stationInfo.dispatcherIsSupporter
|
||||
)
|
||||
"
|
||||
>{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
|
||||
<div class="dispatcher-info">
|
||||
<div class="dispatcher-name">
|
||||
<a
|
||||
:href="
|
||||
'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
|
||||
"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.dispatcherName || "---" }}</a>
|
||||
</div>
|
||||
|
||||
<div class="dispatcher-rate">
|
||||
<img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hours">
|
||||
<div class="hours-title title">STATUS</div>
|
||||
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">
|
||||
{{
|
||||
stationInfo.occupiedTo
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spawns flex flex-column">
|
||||
<h3 class="spawns-title title">OTWARTE SPAWNY</h3>
|
||||
<div class="spawns-content">
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawnString"
|
||||
:key="spawn + stationInfo.dispatcherName + i"
|
||||
>{{ spawn }}</span>
|
||||
|
||||
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="users flex flex-column">
|
||||
<h3 class="users-title title">GRACZE NA STACJI</h3>
|
||||
<div class="users-content">
|
||||
<div
|
||||
class="user-badge"
|
||||
:class="train.stopStatus"
|
||||
v-for="train in computedStationTrains"
|
||||
:key="train.trainNo + train.driverName"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: { passedSearchedTrain: train.trainNo.toString() },
|
||||
}"
|
||||
>
|
||||
<span>{{ train.trainNo }}</span>
|
||||
|
|
||||
<span>{{ train.driverName }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="user borderless"
|
||||
v-if="
|
||||
!stationInfo.stationTrains ||
|
||||
stationInfo.stationTrains.length == 0
|
||||
"
|
||||
>BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StationTimetable
|
||||
:class="{ show: cardMode == 1 }"
|
||||
:scheduledTrains="this.stationInfo.scheduledTrains"
|
||||
:stationName="stationInfo.stationName"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StationTimetable from "@/components/StationsView/StationTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationTimetable
|
||||
}
|
||||
})
|
||||
export default class StationCard extends styleMixin {
|
||||
@Prop() stationInfo!: Station;
|
||||
@Prop() exit!: void;
|
||||
|
||||
cardMode: number = 0;
|
||||
|
||||
get computedDispatcherExp(): string {
|
||||
return this.stationInfo.dispatcherExp < 2
|
||||
? "L"
|
||||
: `${this.stationInfo.dispatcherExp}`;
|
||||
}
|
||||
|
||||
get computedStationTrains() {
|
||||
return this.stationInfo.stationTrains.map(stationTrain => {
|
||||
const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
|
||||
.title {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.4vw);
|
||||
max-width: 800px;
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&-exit {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
font-size: 1.6em;
|
||||
margin: 0.1em 0.1em;
|
||||
}
|
||||
|
||||
.schedule-icon {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
min-width: 200px;
|
||||
max-height: 600px;
|
||||
|
||||
transform: translateY(0%);
|
||||
|
||||
gap: 1.5em;
|
||||
|
||||
&.offline {
|
||||
.users,
|
||||
.spawns,
|
||||
.dispatcher {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
grid-area: main;
|
||||
text-align: center;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include smallScreen() {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-level {
|
||||
background: $accentCol;
|
||||
color: black;
|
||||
|
||||
font-size: 3em;
|
||||
font-weight: 600;
|
||||
|
||||
border-radius: 50%;
|
||||
width: 1.7em;
|
||||
height: 1.7em;
|
||||
margin: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
&-hash {
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
font-size: 2.3em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
grid-area: icons;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 3em;
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.dispatcher {
|
||||
grid-area: dispatcher;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&-level {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
margin-right: 0.3em;
|
||||
|
||||
max-width: 2em;
|
||||
|
||||
background: forestgreen;
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 1.35em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&-rate {
|
||||
display: flex;
|
||||
font-size: 1.3em;
|
||||
|
||||
span {
|
||||
margin: 0 0.3em;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hours {
|
||||
grid-area: hours;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.status {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
grid-area: users;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.spawns {
|
||||
grid-area: spawns;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
& > .spawn {
|
||||
padding: 0.3em 0.4em;
|
||||
margin: 0.3em;
|
||||
background: #585858;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,395 +1,395 @@
|
||||
<template>
|
||||
<section class="station_table">
|
||||
<div class="table_wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<span class="header_wrapper">
|
||||
<div class="header_item">
|
||||
<div v-if="head[0].includes('.svg')">
|
||||
<img :src="head[0]" alt="test" :title="head[1]" />
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div>{{ head[0] }}</div>
|
||||
<div v-if="head.length > 1">{{ head[1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.index == i"
|
||||
:src="sorterActive.dir == 1 ? ascIcon : descIcon"
|
||||
alt
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
class="station"
|
||||
v-for="(station, i) in stations"
|
||||
:key="i + station.stationHash"
|
||||
@click="() => setScenery(station.stationName)"
|
||||
>
|
||||
<td
|
||||
class="station_name"
|
||||
:class="{
|
||||
'default-station': station.default,
|
||||
online: station.online,
|
||||
'station-unavailable': station.unavailable,
|
||||
}"
|
||||
>{{ station.stationName }}</td>
|
||||
|
||||
<td class="station_level">
|
||||
<span
|
||||
v-if="station.reqLevel"
|
||||
:style="calculateExpStyle(station.reqLevel)"
|
||||
>{{ station.reqLevel && station.reqLevel > -1 ? parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L" : "?" }}</span>
|
||||
|
||||
<span v-else>?</span>
|
||||
</td>
|
||||
|
||||
<td class="station_status">
|
||||
<span
|
||||
class="status"
|
||||
:class="statusClasses(station.occupiedTo)"
|
||||
>{{ station.occupiedTo}}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</td>
|
||||
|
||||
<td class="station_dispatcher-exp">
|
||||
<span
|
||||
v-if="station.online"
|
||||
:style="calculateExpStyle(station.dispatcherExp)"
|
||||
>{{ 2 > station.dispatcherExp ? "L" : station.dispatcherExp }}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_tracks twoway">
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.catenary}`"
|
||||
>{{ station.routes.twoWay.catenary }}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.noCatenary}`"
|
||||
>{{ station.routes.twoWay.noCatenary }}</span>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.catenary}`"
|
||||
>{{ station.routes.oneWay.catenary }}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.noCatenary}`"
|
||||
>{{ station.routes.oneWay.noCatenary }}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_info">
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.controlType"
|
||||
:src="require(`@/assets/icon-${station.controlType}.svg`)"
|
||||
:alt="station.controlType"
|
||||
:title="'Sterowanie ' + station.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.signalType"
|
||||
:src="require(`@/assets/icon-${station.signalType}.svg`)"
|
||||
:alt="station.signalType"
|
||||
:title="'Sygnalizacja ' + station.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.SBL && station.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="!station.reqLevel || station.nonPublic"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="station_users" :class="{inactive: !station.online }">
|
||||
<span>
|
||||
<span class="highlight">{{ station.currentUsers }}</span>
|
||||
/
|
||||
<span>{{ station.maxUsers }}</span>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="station_spawns" :class="{inactive: !station.online }">
|
||||
<span class="highlight">{{ station.spawns.length }}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_schedules" :class="{inactive: !station.online }">
|
||||
<span class="highlight">{{station.scheduledTrains.length}} </span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
</td>
|
||||
<!--
|
||||
<td class="station_stats">
|
||||
<div class="stats_wrapper"></div>
|
||||
</td>-->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
import Options from "@/components/StationsView/Options.vue";
|
||||
|
||||
@Component({
|
||||
components: { Options },
|
||||
})
|
||||
export default class StationTable extends styleMixin {
|
||||
@Prop() readonly stations!: Station[];
|
||||
@Prop() readonly sorterActive!: number;
|
||||
|
||||
@Prop() readonly setFocusedStation!: () => void;
|
||||
@Prop() readonly changeSorter!: () => void;
|
||||
|
||||
likeIcon: string = require("@/assets/icon-like.svg");
|
||||
spawnIcon: string = require("@/assets/icon-spawn.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
userIcon: string = require("@/assets/icon-user.svg");
|
||||
trainIcon: string = require("@/assets/icon-train.svg");
|
||||
|
||||
ascIcon: string = require("@/assets/icon-arrow-asc.svg");
|
||||
descIcon: string = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
headTitles: string[][] = [
|
||||
["Stacja"],
|
||||
["Min. poziom", "dyżurnego"],
|
||||
["Status"],
|
||||
["Dyżurny"],
|
||||
["Poziom", "dyżurnego"],
|
||||
["Szlaki", "2tor | 1tor"],
|
||||
["Informacje", "ogólne"],
|
||||
[this.userIcon, "Mechanicy online"],
|
||||
[this.spawnIcon, "Otwarte spawny"],
|
||||
[this.timetableIcon, "Aktywne RJ"],
|
||||
];
|
||||
|
||||
setScenery(name: string) {
|
||||
const station = this.stations.find(
|
||||
(station) => station.stationName === name
|
||||
);
|
||||
|
||||
if (!station) return;
|
||||
|
||||
if (!station.online) {
|
||||
window.location.href = station.stationURL;
|
||||
return;
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
name: "SceneryView",
|
||||
query: { hash: station.stationHash },
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
|
||||
$rowCol: #4b4b4b;
|
||||
|
||||
.change-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
section.station_table {
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
font-size: calc(0.55rem + 0.35vw);
|
||||
font-weight: 500;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table_wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
|
||||
min-width: 1000px;
|
||||
|
||||
thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
min-width: 85px;
|
||||
|
||||
padding: 0.5em;
|
||||
background-color: $primaryCol;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.station {
|
||||
background-color: $rowCol;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: lighten($rowCol, 5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($rowCol, 20);
|
||||
}
|
||||
|
||||
& > td {
|
||||
padding: 0.3rem 1rem;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include smallScreen() {
|
||||
margin: 0;
|
||||
padding: 0.1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.station {
|
||||
&_level,
|
||||
&_dispatcher-exp {
|
||||
span {
|
||||
display: block;
|
||||
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&_level {
|
||||
span {
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&_info,
|
||||
&_tracks {
|
||||
img {
|
||||
width: 2.2em;
|
||||
margin: 0 0.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&_tracks {
|
||||
.no-catenary {
|
||||
background-color: #939393;
|
||||
}
|
||||
|
||||
.catenary {
|
||||
background-color: #009dce;
|
||||
}
|
||||
|
||||
.track {
|
||||
margin: 0 0.3rem;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&_users,
|
||||
&_spawns,
|
||||
&_schedules {
|
||||
&.inactive {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-left: 3px solid #b3b3b3;
|
||||
}
|
||||
|
||||
.no-stations {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.station-unavailable {
|
||||
color: #ff1e1e;
|
||||
font-weight: bold;
|
||||
}
|
||||
<template>
|
||||
<section class="station_table">
|
||||
<div class="table_wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<span class="header_wrapper">
|
||||
<div class="header_item">
|
||||
<div v-if="head[0].includes('.svg')">
|
||||
<img :src="head[0]" alt="test" :title="head[1]" />
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div>{{ head[0] }}</div>
|
||||
<div v-if="head.length > 1">{{ head[1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.index == i"
|
||||
:src="sorterActive.dir == 1 ? ascIcon : descIcon"
|
||||
alt
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
class="station"
|
||||
v-for="(station, i) in stations"
|
||||
:key="i + station.stationHash"
|
||||
@click="() => setScenery(station.stationName)"
|
||||
>
|
||||
<td
|
||||
class="station_name"
|
||||
:class="{
|
||||
'default-station': station.default,
|
||||
online: station.online,
|
||||
'station-unavailable': station.unavailable,
|
||||
}"
|
||||
>{{ station.stationName }}</td>
|
||||
|
||||
<td class="station_level">
|
||||
<span
|
||||
v-if="station.reqLevel"
|
||||
:style="calculateExpStyle(station.reqLevel)"
|
||||
>{{ station.reqLevel && station.reqLevel > -1 ? parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L" : "?" }}</span>
|
||||
|
||||
<span v-else>?</span>
|
||||
</td>
|
||||
|
||||
<td class="station_status">
|
||||
<span
|
||||
class="status"
|
||||
:class="statusClasses(station.occupiedTo)"
|
||||
>{{ station.occupiedTo}}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</td>
|
||||
|
||||
<td class="station_dispatcher-exp">
|
||||
<span
|
||||
v-if="station.online"
|
||||
:style="calculateExpStyle(station.dispatcherExp)"
|
||||
>{{ 2 > station.dispatcherExp ? "L" : station.dispatcherExp }}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_tracks twoway">
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.catenary}`"
|
||||
>{{ station.routes.twoWay.catenary }}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.twoWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.noCatenary}`"
|
||||
>{{ station.routes.twoWay.noCatenary }}</span>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.catenary > 0"
|
||||
class="track catenary"
|
||||
:title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.catenary}`"
|
||||
>{{ station.routes.oneWay.catenary }}</span>
|
||||
|
||||
<span
|
||||
v-if="station.routes && station.routes.oneWay.noCatenary > 0"
|
||||
class="track no-catenary"
|
||||
:title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.noCatenary}`"
|
||||
>{{ station.routes.oneWay.noCatenary }}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_info">
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.controlType"
|
||||
:src="require(`@/assets/icon-${station.controlType}.svg`)"
|
||||
:alt="station.controlType"
|
||||
:title="'Sterowanie ' + station.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.signalType"
|
||||
:src="require(`@/assets/icon-${station.signalType}.svg`)"
|
||||
:alt="station.signalType"
|
||||
:title="'Sygnalizacja ' + station.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="station.SBL && station.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="icon-info"
|
||||
v-if="!station.reqLevel || station.nonPublic"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="station_users" :class="{inactive: !station.online }">
|
||||
<span>
|
||||
<span class="highlight">{{ station.currentUsers }}</span>
|
||||
/
|
||||
<span>{{ station.maxUsers }}</span>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="station_spawns" :class="{inactive: !station.online }">
|
||||
<span class="highlight">{{ station.spawns.length }}</span>
|
||||
</td>
|
||||
|
||||
<td class="station_schedules" :class="{inactive: !station.online }">
|
||||
<span class="highlight">{{station.scheduledTrains.length}} </span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
</td>
|
||||
<!--
|
||||
<td class="station_stats">
|
||||
<div class="stats_wrapper"></div>
|
||||
</td>-->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
import Options from "@/components/StationsView/Options.vue";
|
||||
|
||||
@Component({
|
||||
components: { Options },
|
||||
})
|
||||
export default class StationTable extends styleMixin {
|
||||
@Prop() readonly stations!: Station[];
|
||||
@Prop() readonly sorterActive!: number;
|
||||
|
||||
@Prop() readonly setFocusedStation!: () => void;
|
||||
@Prop() readonly changeSorter!: () => void;
|
||||
|
||||
likeIcon: string = require("@/assets/icon-like.svg");
|
||||
spawnIcon: string = require("@/assets/icon-spawn.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
userIcon: string = require("@/assets/icon-user.svg");
|
||||
trainIcon: string = require("@/assets/icon-train.svg");
|
||||
|
||||
ascIcon: string = require("@/assets/icon-arrow-asc.svg");
|
||||
descIcon: string = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
headTitles: string[][] = [
|
||||
["Stacja"],
|
||||
["Min. poziom", "dyżurnego"],
|
||||
["Status"],
|
||||
["Dyżurny"],
|
||||
["Poziom", "dyżurnego"],
|
||||
["Szlaki", "2tor | 1tor"],
|
||||
["Informacje", "ogólne"],
|
||||
[this.userIcon, "Mechanicy online"],
|
||||
[this.spawnIcon, "Otwarte spawny"],
|
||||
[this.timetableIcon, "Aktywne RJ"],
|
||||
];
|
||||
|
||||
setScenery(name: string) {
|
||||
const station = this.stations.find(
|
||||
(station) => station.stationName === name
|
||||
);
|
||||
|
||||
if (!station) return;
|
||||
|
||||
if (!station.online) {
|
||||
window.location.href = station.stationURL;
|
||||
return;
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
name: "SceneryView",
|
||||
query: { hash: station.stationHash },
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
|
||||
$rowCol: #4b4b4b;
|
||||
|
||||
.change-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
section.station_table {
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
font-size: calc(0.55rem + 0.35vw);
|
||||
font-weight: 500;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table_wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
|
||||
min-width: 1000px;
|
||||
|
||||
thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
min-width: 85px;
|
||||
|
||||
padding: 0.5em;
|
||||
background-color: $primaryCol;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.station {
|
||||
background-color: $rowCol;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: lighten($rowCol, 5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($rowCol, 20);
|
||||
}
|
||||
|
||||
& > td {
|
||||
padding: 0.3rem 1rem;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include smallScreen() {
|
||||
margin: 0;
|
||||
padding: 0.1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.station {
|
||||
&_level,
|
||||
&_dispatcher-exp {
|
||||
span {
|
||||
display: block;
|
||||
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&_level {
|
||||
span {
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&_info,
|
||||
&_tracks {
|
||||
img {
|
||||
width: 2.2em;
|
||||
margin: 0 0.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&_tracks {
|
||||
.no-catenary {
|
||||
background-color: #939393;
|
||||
}
|
||||
|
||||
.catenary {
|
||||
background-color: #009dce;
|
||||
}
|
||||
|
||||
.track {
|
||||
margin: 0 0.3rem;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&_users,
|
||||
&_spawns,
|
||||
&_schedules {
|
||||
&.inactive {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-left: 3px solid #b3b3b3;
|
||||
}
|
||||
|
||||
.no-stations {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.station-unavailable {
|
||||
color: #ff1e1e;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -1,285 +1,285 @@
|
||||
<template>
|
||||
<div class="station-timetable">
|
||||
<div class="timetable-wrapper">
|
||||
<div class="timetable-title title">
|
||||
<div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
|
||||
<div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
|
||||
</div>
|
||||
|
||||
<div class="timetable-content">
|
||||
<div
|
||||
class="timetable-item"
|
||||
v-for="(scheduledTrain, i) in computedScheduledTrains"
|
||||
:key="i"
|
||||
>
|
||||
<span class="timetable-general">
|
||||
<span class="general-info">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: {
|
||||
passedSearchedTrain: 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>
|
||||
</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 BIEG</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator';
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
|
||||
@Component
|
||||
export default class StationTimetable extends Vue {
|
||||
@Prop() readonly scheduledTrains;
|
||||
@Prop() readonly stationName;
|
||||
|
||||
get computedScheduledTrains() {
|
||||
return this.scheduledTrains.sort((a, b) => {
|
||||
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/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.station-timetable {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transform: translateY(-100%);
|
||||
-webikit-transform: translateY(-100%);
|
||||
|
||||
&.show {
|
||||
transform: translateY(0);
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
|
||||
transition: transform 150ms ease-out;
|
||||
|
||||
background: #333;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable {
|
||||
&-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 0.3rem;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 1em auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
|
||||
padding: 0 1rem;
|
||||
|
||||
@include smallScreen() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timetable {
|
||||
&-general {
|
||||
padding: 0.3rem 0.7rem;
|
||||
border: 2px solid white;
|
||||
border-radius: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 95%;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-schedule {
|
||||
@include smallScreen() {
|
||||
width: 80%;
|
||||
margin: 0.7em 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
|
||||
font-size: 1.35em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.general-status {
|
||||
span.arriving {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span.departed {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
span.stopped {
|
||||
color: #ffa600;
|
||||
}
|
||||
|
||||
span.online {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
span.terminated {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrival-time.begins,
|
||||
.departure-time.terminates {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
<template>
|
||||
<div class="station-timetable">
|
||||
<div class="timetable-wrapper">
|
||||
<div class="timetable-title title">
|
||||
<div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
|
||||
<div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
|
||||
</div>
|
||||
|
||||
<div class="timetable-content">
|
||||
<div
|
||||
class="timetable-item"
|
||||
v-for="(scheduledTrain, i) in computedScheduledTrains"
|
||||
:key="i"
|
||||
>
|
||||
<span class="timetable-general">
|
||||
<span class="general-info">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: {
|
||||
passedSearchedTrain: 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>
|
||||
</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 BIEG</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator';
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
|
||||
@Component
|
||||
export default class StationTimetable extends Vue {
|
||||
@Prop() readonly scheduledTrains;
|
||||
@Prop() readonly stationName;
|
||||
|
||||
get computedScheduledTrains() {
|
||||
return this.scheduledTrains.sort((a, b) => {
|
||||
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/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.station-timetable {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transform: translateY(-100%);
|
||||
-webikit-transform: translateY(-100%);
|
||||
|
||||
&.show {
|
||||
transform: translateY(0);
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
|
||||
transition: transform 150ms ease-out;
|
||||
|
||||
background: #333;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable {
|
||||
&-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 0.3rem;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 1em auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
|
||||
padding: 0 1rem;
|
||||
|
||||
@include smallScreen() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timetable {
|
||||
&-general {
|
||||
padding: 0.3rem 0.7rem;
|
||||
border: 2px solid white;
|
||||
border-radius: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 95%;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-schedule {
|
||||
@include smallScreen() {
|
||||
width: 80%;
|
||||
margin: 0.7em 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
|
||||
font-size: 1.35em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.general-status {
|
||||
span.arriving {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span.departed {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
span.stopped {
|
||||
color: #ffa600;
|
||||
}
|
||||
|
||||
span.online {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
span.terminated {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrival-time.begins,
|
||||
.departure-time.terminates {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
@@ -1,123 +1,123 @@
|
||||
<template>
|
||||
<div class="train-search">
|
||||
<span class="search train">
|
||||
<div class="search-title title">Szukaj składu</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedTrain" />
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="exitIcon"
|
||||
alt="exit-icon"
|
||||
@click="() => (searchedTrain = '')"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="search driver">
|
||||
<div class="search-title title">Szukaj maszynisty</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedDriver" />
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="exitIcon"
|
||||
alt="exit-icon"
|
||||
@click="() => (searchedDriver = '')"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class extends Vue {
|
||||
exitIcon = require("@/assets/icon-exit.svg");
|
||||
searchedTrain = "";
|
||||
searchedDriver = "";
|
||||
|
||||
@Prop() readonly passedSearchedTrain!: string;
|
||||
@Prop() readonly focusedTrain!: string;
|
||||
// @Prop() readonly passedSearchedDriver!: string;
|
||||
|
||||
@Watch("searchedTrain")
|
||||
onSearchedTrainChanged(val: string, oldVal: string) {
|
||||
this.$emit("changeSearchedTrain", val);
|
||||
}
|
||||
|
||||
@Watch("searchedDriver")
|
||||
onSearchedDriverChanged(val: string, oldVal: string) {
|
||||
this.$emit("changeSearchedDriver", val);
|
||||
}
|
||||
|
||||
@Watch("passedSearchedTrain")
|
||||
onPassedSearchedTrainChanged(val: string, oldVal: string) {
|
||||
if (val && val != "") {
|
||||
this.searchedTrain = val;
|
||||
this.searchedDriver = "";
|
||||
}
|
||||
}
|
||||
|
||||
@Watch("focusedTrain")
|
||||
onFocusedTrainChanged(val: string, oldVal: string) {
|
||||
console.log(val);
|
||||
|
||||
this.searchedTrain = val;
|
||||
this.searchedDriver = "";
|
||||
}
|
||||
|
||||
mounted() {
|
||||
if (this.passedSearchedTrain && this.passedSearchedTrain != "") {
|
||||
this.searchedTrain = this.passedSearchedTrain;
|
||||
this.searchedDriver = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.train-search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding-right: 1rem;
|
||||
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
min-width: 85%;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="train-search">
|
||||
<span class="search train">
|
||||
<div class="search-title title">Szukaj składu</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedTrain" />
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="exitIcon"
|
||||
alt="exit-icon"
|
||||
@click="() => (searchedTrain = '')"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="search driver">
|
||||
<div class="search-title title">Szukaj maszynisty</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedDriver" />
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="exitIcon"
|
||||
alt="exit-icon"
|
||||
@click="() => (searchedDriver = '')"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class extends Vue {
|
||||
exitIcon = require("@/assets/icon-exit.svg");
|
||||
searchedTrain = "";
|
||||
searchedDriver = "";
|
||||
|
||||
@Prop() readonly passedSearchedTrain!: string;
|
||||
@Prop() readonly focusedTrain!: string;
|
||||
// @Prop() readonly passedSearchedDriver!: string;
|
||||
|
||||
@Watch("searchedTrain")
|
||||
onSearchedTrainChanged(val: string, oldVal: string) {
|
||||
this.$emit("changeSearchedTrain", val);
|
||||
}
|
||||
|
||||
@Watch("searchedDriver")
|
||||
onSearchedDriverChanged(val: string, oldVal: string) {
|
||||
this.$emit("changeSearchedDriver", val);
|
||||
}
|
||||
|
||||
@Watch("passedSearchedTrain")
|
||||
onPassedSearchedTrainChanged(val: string, oldVal: string) {
|
||||
if (val && val != "") {
|
||||
this.searchedTrain = val;
|
||||
this.searchedDriver = "";
|
||||
}
|
||||
}
|
||||
|
||||
@Watch("focusedTrain")
|
||||
onFocusedTrainChanged(val: string, oldVal: string) {
|
||||
console.log(val);
|
||||
|
||||
this.searchedTrain = val;
|
||||
this.searchedDriver = "";
|
||||
}
|
||||
|
||||
mounted() {
|
||||
if (this.passedSearchedTrain && this.passedSearchedTrain != "") {
|
||||
this.searchedTrain = this.passedSearchedTrain;
|
||||
this.searchedDriver = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.train-search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding-right: 1rem;
|
||||
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
min-width: 85%;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,173 +1,173 @@
|
||||
<template>
|
||||
<div class="train-sorter">
|
||||
<div class="sorter-wrapper">
|
||||
<div class="sorter-box">
|
||||
<div class="title">Sortuj według</div>
|
||||
|
||||
<div class="selected" @click="toggleOptionList">
|
||||
<span>{{ sorterName }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<div class="options-container">
|
||||
<ul class="options-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option"
|
||||
v-for="(option, i) in sortOptionList"
|
||||
:key="i"
|
||||
@click="() => chooseOption(option)"
|
||||
>
|
||||
<input type="radio" name="sort" :id="option.id" />
|
||||
<label :for="option.id">{{ option.content }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
|
||||
const ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
@Component
|
||||
export default class TrainSorter extends Vue {
|
||||
ascSVG = ascSVG;
|
||||
descSVG = descSVG;
|
||||
|
||||
@Prop() trainList!: [];
|
||||
|
||||
listOpen: boolean = false;
|
||||
sorterName: string = "numer pociągu";
|
||||
|
||||
sortOptionList: { id: string; content: string }[] = [
|
||||
{
|
||||
id: "mass",
|
||||
content: "masa",
|
||||
},
|
||||
{
|
||||
id: "speed",
|
||||
content: "prędkość",
|
||||
},
|
||||
{
|
||||
id: "length",
|
||||
content: "długość",
|
||||
},
|
||||
{
|
||||
id: "distance",
|
||||
content: "kilometraż",
|
||||
},
|
||||
{
|
||||
id: "timetable",
|
||||
content: "numer pociągu",
|
||||
},
|
||||
];
|
||||
|
||||
toggleOptionList() {
|
||||
this.listOpen = !this.listOpen;
|
||||
}
|
||||
|
||||
closeOptionList() {
|
||||
this.listOpen = false;
|
||||
}
|
||||
|
||||
chooseOption(option: { id: string; content: string }) {
|
||||
this.$emit("changeSorter", { id: option.id, dir: -1 });
|
||||
this.sorterName = option.content;
|
||||
|
||||
this.closeOptionList();
|
||||
}
|
||||
|
||||
get compTrainList() {
|
||||
return this.trainList;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.sorter-wrapper {
|
||||
display: flex;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.selected,
|
||||
.options-list {
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.selected {
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="train-sorter">
|
||||
<div class="sorter-wrapper">
|
||||
<div class="sorter-box">
|
||||
<div class="title">Sortuj według</div>
|
||||
|
||||
<div class="selected" @click="toggleOptionList">
|
||||
<span>{{ sorterName }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<div class="options-container">
|
||||
<ul class="options-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option"
|
||||
v-for="(option, i) in sortOptionList"
|
||||
:key="i"
|
||||
@click="() => chooseOption(option)"
|
||||
>
|
||||
<input type="radio" name="sort" :id="option.id" />
|
||||
<label :for="option.id">{{ option.content }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
|
||||
const ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
@Component
|
||||
export default class TrainSorter extends Vue {
|
||||
ascSVG = ascSVG;
|
||||
descSVG = descSVG;
|
||||
|
||||
@Prop() trainList!: [];
|
||||
|
||||
listOpen: boolean = false;
|
||||
sorterName: string = "numer pociągu";
|
||||
|
||||
sortOptionList: { id: string; content: string }[] = [
|
||||
{
|
||||
id: "mass",
|
||||
content: "masa",
|
||||
},
|
||||
{
|
||||
id: "speed",
|
||||
content: "prędkość",
|
||||
},
|
||||
{
|
||||
id: "length",
|
||||
content: "długość",
|
||||
},
|
||||
{
|
||||
id: "distance",
|
||||
content: "kilometraż",
|
||||
},
|
||||
{
|
||||
id: "timetable",
|
||||
content: "numer pociągu",
|
||||
},
|
||||
];
|
||||
|
||||
toggleOptionList() {
|
||||
this.listOpen = !this.listOpen;
|
||||
}
|
||||
|
||||
closeOptionList() {
|
||||
this.listOpen = false;
|
||||
}
|
||||
|
||||
chooseOption(option: { id: string; content: string }) {
|
||||
this.$emit("changeSorter", { id: option.id, dir: -1 });
|
||||
this.sorterName = option.content;
|
||||
|
||||
this.closeOptionList();
|
||||
}
|
||||
|
||||
get compTrainList() {
|
||||
return this.trainList;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.sorter-wrapper {
|
||||
display: flex;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.selected,
|
||||
.options-list {
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.selected {
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,322 +1,322 @@
|
||||
<template>
|
||||
<div class="train-stats">
|
||||
<div class="btn-wrapper">
|
||||
<button
|
||||
class="stats-btn button"
|
||||
@click="toggleStats"
|
||||
v-if="trains.length > 0"
|
||||
>
|
||||
STATYSTYKI RUCHU
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<transition name="stats-anim">
|
||||
<div class="stats-body" v-if="statsOpen">
|
||||
<h2 class="stats-header">STATYSTYKI RUCHU</h2>
|
||||
|
||||
<div class="stats-speed">
|
||||
<div class="title stats-title">
|
||||
PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
{{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-length">
|
||||
<div class="title stats-title">
|
||||
DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
{{ timetableStats.min }} | {{ timetableStats.avg }} |
|
||||
{{ timetableStats.max }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-categories">
|
||||
<div class="title stats-title">KATEGORIE RJ</div>
|
||||
|
||||
<div class="category-list">
|
||||
<span
|
||||
class="category"
|
||||
v-for="[key, value] of categoryList"
|
||||
:key="key"
|
||||
>
|
||||
<span class="category-type">{{ key }}</span>
|
||||
<span class="category-count">{{ value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="special-list">
|
||||
<span class="special twr">
|
||||
<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 class="stats-locos">
|
||||
<div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</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>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
@Component
|
||||
export default class TrainStats extends Vue {
|
||||
@Prop() readonly trains!: Train[];
|
||||
|
||||
statsOpen: boolean = false;
|
||||
|
||||
toggleStats() {
|
||||
this.statsOpen = !this.statsOpen;
|
||||
}
|
||||
|
||||
get speedStats(): { avg: string; min: string; max: string } {
|
||||
if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
|
||||
|
||||
const avg = (
|
||||
this.trains.reduce((acc, train) => acc + train.speed, 0) /
|
||||
this.trains.length
|
||||
).toFixed(2);
|
||||
|
||||
const minMax = this.trains.reduce((acc, train) => {
|
||||
if (!train.timetableData) return acc;
|
||||
|
||||
acc[0] =
|
||||
acc[0] === undefined || train.speed < acc[0] ? train.speed : acc[0];
|
||||
|
||||
acc[1] =
|
||||
acc[1] === undefined || train.speed > acc[1] ? train.speed : acc[1];
|
||||
return acc;
|
||||
}, [] as any);
|
||||
|
||||
return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
|
||||
}
|
||||
|
||||
get timetableStats(): { avg: string; min: string; max: string } {
|
||||
if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
|
||||
|
||||
const avg = (
|
||||
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.timetableData) return acc;
|
||||
|
||||
acc[0] =
|
||||
acc[0] === undefined || train.timetableData.routeDistance < acc[0]
|
||||
? train.timetableData.routeDistance
|
||||
: acc[0];
|
||||
|
||||
acc[1] =
|
||||
acc[1] === undefined || train.timetableData.routeDistance > acc[1]
|
||||
? train.timetableData.routeDistance
|
||||
: acc[1];
|
||||
return acc;
|
||||
}, [] as any);
|
||||
|
||||
return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
|
||||
}
|
||||
|
||||
get categoryList(): Map<string, number> {
|
||||
const map = this.trains.reduce((acc, train) => {
|
||||
if (!train.timetableData || !train.timetableData.category) return acc;
|
||||
|
||||
acc.set(
|
||||
train.timetableData.category,
|
||||
acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
|
||||
);
|
||||
|
||||
return acc;
|
||||
}, new Map());
|
||||
|
||||
return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
|
||||
}
|
||||
|
||||
get locoList(): any[] {
|
||||
const map = this.trains.reduce((acc, train) => {
|
||||
if (!train.timetableData || !train.locoType) return acc;
|
||||
|
||||
acc.set(
|
||||
train.locoType,
|
||||
acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1
|
||||
);
|
||||
|
||||
return acc;
|
||||
}, new Map());
|
||||
|
||||
const sorted = [...map.entries()]
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.filter((v, i) => i < 3);
|
||||
|
||||
return sorted;
|
||||
}
|
||||
|
||||
get specialTrainCount(): [number, number] {
|
||||
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];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
@import "../../styles/variables";
|
||||
|
||||
.stats-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 150ms ease-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.train-stats {
|
||||
padding: 0.3em 0;
|
||||
font-size: 1.1em;
|
||||
z-index: 5;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stats {
|
||||
&-btn {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.category,
|
||||
.special {
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
margin-right: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
|
||||
&-type,
|
||||
&-count {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
&-type {
|
||||
background: rgb(88, 88, 88);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&-count {
|
||||
background: #ffc014;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em;
|
||||
padding: 0.2em 0.3em;
|
||||
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
|
||||
&.twr {
|
||||
background-color: #ffc700;
|
||||
}
|
||||
|
||||
&.skr {
|
||||
background-color: #f00000;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.button {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.stats-body {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border-radius: 0 0 1em 1em;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="train-stats">
|
||||
<div class="btn-wrapper">
|
||||
<button
|
||||
class="stats-btn button"
|
||||
@click="toggleStats"
|
||||
v-if="trains.length > 0"
|
||||
>
|
||||
STATYSTYKI RUCHU
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<transition name="stats-anim">
|
||||
<div class="stats-body" v-if="statsOpen">
|
||||
<h2 class="stats-header">STATYSTYKI RUCHU</h2>
|
||||
|
||||
<div class="stats-speed">
|
||||
<div class="title stats-title">
|
||||
PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
{{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-length">
|
||||
<div class="title stats-title">
|
||||
DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
{{ timetableStats.min }} | {{ timetableStats.avg }} |
|
||||
{{ timetableStats.max }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-categories">
|
||||
<div class="title stats-title">KATEGORIE RJ</div>
|
||||
|
||||
<div class="category-list">
|
||||
<span
|
||||
class="category"
|
||||
v-for="[key, value] of categoryList"
|
||||
:key="key"
|
||||
>
|
||||
<span class="category-type">{{ key }}</span>
|
||||
<span class="category-count">{{ value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="special-list">
|
||||
<span class="special twr">
|
||||
<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 class="stats-locos">
|
||||
<div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</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>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
@Component
|
||||
export default class TrainStats extends Vue {
|
||||
@Prop() readonly trains!: Train[];
|
||||
|
||||
statsOpen: boolean = false;
|
||||
|
||||
toggleStats() {
|
||||
this.statsOpen = !this.statsOpen;
|
||||
}
|
||||
|
||||
get speedStats(): { avg: string; min: string; max: string } {
|
||||
if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
|
||||
|
||||
const avg = (
|
||||
this.trains.reduce((acc, train) => acc + train.speed, 0) /
|
||||
this.trains.length
|
||||
).toFixed(2);
|
||||
|
||||
const minMax = this.trains.reduce((acc, train) => {
|
||||
if (!train.timetableData) return acc;
|
||||
|
||||
acc[0] =
|
||||
acc[0] === undefined || train.speed < acc[0] ? train.speed : acc[0];
|
||||
|
||||
acc[1] =
|
||||
acc[1] === undefined || train.speed > acc[1] ? train.speed : acc[1];
|
||||
return acc;
|
||||
}, [] as any);
|
||||
|
||||
return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
|
||||
}
|
||||
|
||||
get timetableStats(): { avg: string; min: string; max: string } {
|
||||
if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
|
||||
|
||||
const avg = (
|
||||
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.timetableData) return acc;
|
||||
|
||||
acc[0] =
|
||||
acc[0] === undefined || train.timetableData.routeDistance < acc[0]
|
||||
? train.timetableData.routeDistance
|
||||
: acc[0];
|
||||
|
||||
acc[1] =
|
||||
acc[1] === undefined || train.timetableData.routeDistance > acc[1]
|
||||
? train.timetableData.routeDistance
|
||||
: acc[1];
|
||||
return acc;
|
||||
}, [] as any);
|
||||
|
||||
return { avg, min: minMax[0].toString(), max: minMax[1].toString() };
|
||||
}
|
||||
|
||||
get categoryList(): Map<string, number> {
|
||||
const map = this.trains.reduce((acc, train) => {
|
||||
if (!train.timetableData || !train.timetableData.category) return acc;
|
||||
|
||||
acc.set(
|
||||
train.timetableData.category,
|
||||
acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
|
||||
);
|
||||
|
||||
return acc;
|
||||
}, new Map());
|
||||
|
||||
return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
|
||||
}
|
||||
|
||||
get locoList(): any[] {
|
||||
const map = this.trains.reduce((acc, train) => {
|
||||
if (!train.timetableData || !train.locoType) return acc;
|
||||
|
||||
acc.set(
|
||||
train.locoType,
|
||||
acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1
|
||||
);
|
||||
|
||||
return acc;
|
||||
}, new Map());
|
||||
|
||||
const sorted = [...map.entries()]
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.filter((v, i) => i < 3);
|
||||
|
||||
return sorted;
|
||||
}
|
||||
|
||||
get specialTrainCount(): [number, number] {
|
||||
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];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
@import "../../styles/variables";
|
||||
|
||||
.stats-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 150ms ease-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.train-stats {
|
||||
padding: 0.3em 0;
|
||||
font-size: 1.1em;
|
||||
z-index: 5;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stats {
|
||||
&-btn {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.category,
|
||||
.special {
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
margin-right: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
|
||||
&-type,
|
||||
&-count {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
&-type {
|
||||
background: rgb(88, 88, 88);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&-count {
|
||||
background: #ffc014;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em;
|
||||
padding: 0.2em 0.3em;
|
||||
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
|
||||
&.twr {
|
||||
background-color: #ffc700;
|
||||
}
|
||||
|
||||
&.skr {
|
||||
background-color: #f00000;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.button {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.stats-body {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border-radius: 0 0 1em 1em;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,485 +1,485 @@
|
||||
<template>
|
||||
<div class="train-table">
|
||||
<div class="no-trains" v-if="computedTrains.length == 0">
|
||||
Ups! Brak pociągów do wyświetlenia :/
|
||||
</div>
|
||||
|
||||
<ul class="train-list">
|
||||
<li
|
||||
class="train-row"
|
||||
v-for="(train, i) in computedTrains"
|
||||
:key="i"
|
||||
:id="train.timetableData.timetableId"
|
||||
>
|
||||
<span class="wrapper">
|
||||
<span
|
||||
class="info"
|
||||
@click="changeScheduleShowState(train.timetableData.timetableId)"
|
||||
>
|
||||
<div class="info-main">
|
||||
<div class="info-category">
|
||||
<div class="category-left">
|
||||
<span class="warning twr" v-if="train.timetableData.TWR">
|
||||
TWR
|
||||
</span>
|
||||
|
||||
<span class="warning skr" v-if="train.timetableData.SKR">
|
||||
SKR
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<strong>{{ train.timetableData.category }}</strong>
|
||||
{{ train.trainNo }} |
|
||||
|
||||
<span style="color: gold">
|
||||
{{ train.timetableData.routeDistance }} km
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="category-right tooltip">
|
||||
<img
|
||||
:src="
|
||||
showedSchedule === train.timetableData.timetableId
|
||||
? ascSVG
|
||||
: descSVG
|
||||
"
|
||||
alt="asc-arrow"
|
||||
/>
|
||||
|
||||
<span>SRJP</span>
|
||||
|
||||
<span class="tooltip-text">
|
||||
Szczegółowy rozkład jazdy pociągu {{ train.trainNo }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-route">
|
||||
<span class="info-route-text">
|
||||
<strong>
|
||||
{{ train.timetableData.route.replace("|", " - ") }}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-stops">
|
||||
<span v-if="train.timetableData.followingStops.length > 2">
|
||||
Przez:
|
||||
|
||||
<span
|
||||
v-html="
|
||||
generateStopList(train.timetableData.followingStops)
|
||||
"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-bottom">
|
||||
<span
|
||||
class="info-label user-badge"
|
||||
:class="train.stopStatus || 'disconnected'"
|
||||
>
|
||||
<span
|
||||
class="tooltip"
|
||||
:style="!train.online ? 'color: gray' : ''"
|
||||
>
|
||||
<span v-if="train.stopStatus">{{ train.stopLabel }}</span>
|
||||
<span v-else-if="train.currentStationName">
|
||||
Pociąg na złej stacji!
|
||||
</span>
|
||||
<span v-else>Sceneria offline!</span>
|
||||
|
||||
<span class="tooltip-text" v-if="!train.online">
|
||||
Pociąg offline
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="driver">
|
||||
<span class="driver-name">
|
||||
<a
|
||||
:href="'https://td2.info.pl/profile/?u=' + train.driverId"
|
||||
target="_blank"
|
||||
>
|
||||
{{ train.driverName }}
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span class="driver-type">
|
||||
{{ train.locoType }}
|
||||
</span>
|
||||
|
||||
<span class="driver-loco">
|
||||
<img :src="train.locoURL" @error="onImageError" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="stats">
|
||||
<div class="stats-main">
|
||||
<span class="mass">
|
||||
<img :src="massIcon" alt="icon-mass" />
|
||||
{{ train.mass / 1000 }}t
|
||||
</span>
|
||||
|
||||
<span class="speed">
|
||||
<img :src="speedIcon" alt="icon-speed" />
|
||||
{{ train.speed }} km/h
|
||||
</span>
|
||||
|
||||
<span class="length">
|
||||
<img :src="lengthIcon" alt="icon-length" />
|
||||
{{ train.length }}m
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-position">
|
||||
<span class="station">
|
||||
<div class="stat-icon">
|
||||
<img :src="sceneryIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.currentStationName || "---" }}
|
||||
</span>
|
||||
<span class="track">
|
||||
<div class="stat-icon">
|
||||
<img :src="routeIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.connectedTrack || "---" }}
|
||||
</span>
|
||||
<span class="signal">
|
||||
<div class="stat-icon">
|
||||
<img :src="signalIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.signal || "---" }}
|
||||
</span>
|
||||
<span class="distance">
|
||||
<div class="stat-icon">
|
||||
<img :src="distanceIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.distance || "0" }}m
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<TrainSchedule
|
||||
:followingStops="train.timetableData.followingStops"
|
||||
:currentStationName="train.currentStationName"
|
||||
@click="changeScheduleShowState(train.timetableData.timetableId)"
|
||||
v-if="showedSchedule == train.timetableData.timetableId"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
const unknownTrainImage = require("@/assets/unknown.png");
|
||||
|
||||
const ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
|
||||
import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
|
||||
import TrainStop from '@/scripts/interfaces/TrainStop';
|
||||
|
||||
@Component({
|
||||
components: { TrainSchedule }
|
||||
})
|
||||
export default class TrainTable extends Vue {
|
||||
@Prop() computedTrains!: Train[];
|
||||
|
||||
showedSchedule = 0;
|
||||
|
||||
ascSVG = ascSVG;
|
||||
descSVG = descSVG;
|
||||
|
||||
speedIcon: string = require("@/assets/icon-speed.svg");
|
||||
massIcon: string = require("@/assets/icon-mass.svg");
|
||||
lengthIcon: string = require("@/assets/icon-length.svg");
|
||||
|
||||
distanceIcon: string = require("@/assets/icon-distance.svg");
|
||||
sceneryIcon: string = require("@/assets/icon-scenery.svg");
|
||||
signalIcon: string = require("@/assets/icon-signal.svg");
|
||||
routeIcon: string = require("@/assets/icon-route.svg");
|
||||
|
||||
changeScheduleShowState(timetableId: number) {
|
||||
this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId;
|
||||
}
|
||||
|
||||
onImageError(e: Event) {
|
||||
(e.target as HTMLImageElement).src = unknownTrainImage;
|
||||
}
|
||||
|
||||
generateStopList(stops: any): string | undefined {
|
||||
if (!stops) return "";
|
||||
return stops.reduce((acc, stop: TrainStop, i) => {
|
||||
if (stop.stopType.includes("ph")) acc.push(`<strong style='color:${stop.confirmed ? "springgreen" : "white"}'>${stop.stopName}</strong>`);
|
||||
else if (i > 0 && i < stops.length - 1 && !stop.stopNameRAW.includes("po."))
|
||||
acc.push(`<span style='color:${stop.confirmed ? "springgreen" : "lightgray"}'>${stop.stopName}</span>`);
|
||||
return acc;
|
||||
}, []).join(" * ");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
|
||||
.no-trains {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.train {
|
||||
&-list {
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-row {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background-color: $primaryCol;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
& > .wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
font-size: calc(0.4rem + 0.5vw);
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, minmax(100px, 1fr));
|
||||
|
||||
font-size: 0.8rem;
|
||||
gap: 0.4em 0;
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&-category {
|
||||
font-size: 1.05em;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category-right {
|
||||
padding: 0.15em 0.5em;
|
||||
|
||||
background: #1085b3;
|
||||
border-radius: 1em;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
width: 1.2em;
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
font-size: 0.9em;
|
||||
background-color: #1085b3;
|
||||
|
||||
&::after {
|
||||
border-color: #1085b3 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.25em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
&-stops {
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&-online {
|
||||
background-color: #ce0000;
|
||||
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
&.online {
|
||||
background-color: #009700;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
border-radius: 0.7em;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.driver {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-exp {
|
||||
font-size: 1.4em;
|
||||
padding: 0.3em 0.6em;
|
||||
|
||||
border-radius: 0.4em;
|
||||
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin: 0 0.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-type {
|
||||
color: #bbb;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
&-loco {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-loco img {
|
||||
width: 13em;
|
||||
max-width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
&-main {
|
||||
display: flex;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0.3em;
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&-position {
|
||||
display: flex;
|
||||
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
p {
|
||||
color: #00cff3;
|
||||
}
|
||||
|
||||
& > span {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-radius: 15px;
|
||||
padding: 0.1em 1.2em;
|
||||
margin-right: 0.5em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: white;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 0.7em;
|
||||
|
||||
&.twr {
|
||||
border: 2px solid $twr;
|
||||
}
|
||||
|
||||
&.skr {
|
||||
border: 2px solid $skr;
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.info-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="train-table">
|
||||
<div class="no-trains" v-if="computedTrains.length == 0">
|
||||
Ups! Brak pociągów do wyświetlenia :/
|
||||
</div>
|
||||
|
||||
<ul class="train-list">
|
||||
<li
|
||||
class="train-row"
|
||||
v-for="(train, i) in computedTrains"
|
||||
:key="i"
|
||||
:id="train.timetableData.timetableId"
|
||||
>
|
||||
<span class="wrapper">
|
||||
<span
|
||||
class="info"
|
||||
@click="changeScheduleShowState(train.timetableData.timetableId)"
|
||||
>
|
||||
<div class="info-main">
|
||||
<div class="info-category">
|
||||
<div class="category-left">
|
||||
<span class="warning twr" v-if="train.timetableData.TWR">
|
||||
TWR
|
||||
</span>
|
||||
|
||||
<span class="warning skr" v-if="train.timetableData.SKR">
|
||||
SKR
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<strong>{{ train.timetableData.category }}</strong>
|
||||
{{ train.trainNo }} |
|
||||
|
||||
<span style="color: gold">
|
||||
{{ train.timetableData.routeDistance }} km
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="category-right tooltip">
|
||||
<img
|
||||
:src="
|
||||
showedSchedule === train.timetableData.timetableId
|
||||
? ascSVG
|
||||
: descSVG
|
||||
"
|
||||
alt="asc-arrow"
|
||||
/>
|
||||
|
||||
<span>SRJP</span>
|
||||
|
||||
<span class="tooltip-text">
|
||||
Szczegółowy rozkład jazdy pociągu {{ train.trainNo }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-route">
|
||||
<span class="info-route-text">
|
||||
<strong>
|
||||
{{ train.timetableData.route.replace("|", " - ") }}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-stops">
|
||||
<span v-if="train.timetableData.followingStops.length > 2">
|
||||
Przez:
|
||||
|
||||
<span
|
||||
v-html="
|
||||
generateStopList(train.timetableData.followingStops)
|
||||
"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-bottom">
|
||||
<span
|
||||
class="info-label user-badge"
|
||||
:class="train.stopStatus || 'disconnected'"
|
||||
>
|
||||
<span
|
||||
class="tooltip"
|
||||
:style="!train.online ? 'color: gray' : ''"
|
||||
>
|
||||
<span v-if="train.stopStatus">{{ train.stopLabel }}</span>
|
||||
<span v-else-if="train.currentStationName">
|
||||
Pociąg na złej stacji!
|
||||
</span>
|
||||
<span v-else>Sceneria offline!</span>
|
||||
|
||||
<span class="tooltip-text" v-if="!train.online">
|
||||
Pociąg offline
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="driver">
|
||||
<span class="driver-name">
|
||||
<a
|
||||
:href="'https://td2.info.pl/profile/?u=' + train.driverId"
|
||||
target="_blank"
|
||||
>
|
||||
{{ train.driverName }}
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span class="driver-type">
|
||||
{{ train.locoType }}
|
||||
</span>
|
||||
|
||||
<span class="driver-loco">
|
||||
<img :src="train.locoURL" @error="onImageError" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="stats">
|
||||
<div class="stats-main">
|
||||
<span class="mass">
|
||||
<img :src="massIcon" alt="icon-mass" />
|
||||
{{ train.mass / 1000 }}t
|
||||
</span>
|
||||
|
||||
<span class="speed">
|
||||
<img :src="speedIcon" alt="icon-speed" />
|
||||
{{ train.speed }} km/h
|
||||
</span>
|
||||
|
||||
<span class="length">
|
||||
<img :src="lengthIcon" alt="icon-length" />
|
||||
{{ train.length }}m
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-position">
|
||||
<span class="station">
|
||||
<div class="stat-icon">
|
||||
<img :src="sceneryIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.currentStationName || "---" }}
|
||||
</span>
|
||||
<span class="track">
|
||||
<div class="stat-icon">
|
||||
<img :src="routeIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.connectedTrack || "---" }}
|
||||
</span>
|
||||
<span class="signal">
|
||||
<div class="stat-icon">
|
||||
<img :src="signalIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.signal || "---" }}
|
||||
</span>
|
||||
<span class="distance">
|
||||
<div class="stat-icon">
|
||||
<img :src="distanceIcon" alt="icon-scenery" />
|
||||
</div>
|
||||
{{ train.distance || "0" }}m
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<TrainSchedule
|
||||
:followingStops="train.timetableData.followingStops"
|
||||
:currentStationName="train.currentStationName"
|
||||
@click="changeScheduleShowState(train.timetableData.timetableId)"
|
||||
v-if="showedSchedule == train.timetableData.timetableId"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
const unknownTrainImage = require("@/assets/unknown.png");
|
||||
|
||||
const ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
|
||||
import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
|
||||
import TrainStop from '@/scripts/interfaces/TrainStop';
|
||||
|
||||
@Component({
|
||||
components: { TrainSchedule }
|
||||
})
|
||||
export default class TrainTable extends Vue {
|
||||
@Prop() computedTrains!: Train[];
|
||||
|
||||
showedSchedule = 0;
|
||||
|
||||
ascSVG = ascSVG;
|
||||
descSVG = descSVG;
|
||||
|
||||
speedIcon: string = require("@/assets/icon-speed.svg");
|
||||
massIcon: string = require("@/assets/icon-mass.svg");
|
||||
lengthIcon: string = require("@/assets/icon-length.svg");
|
||||
|
||||
distanceIcon: string = require("@/assets/icon-distance.svg");
|
||||
sceneryIcon: string = require("@/assets/icon-scenery.svg");
|
||||
signalIcon: string = require("@/assets/icon-signal.svg");
|
||||
routeIcon: string = require("@/assets/icon-route.svg");
|
||||
|
||||
changeScheduleShowState(timetableId: number) {
|
||||
this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId;
|
||||
}
|
||||
|
||||
onImageError(e: Event) {
|
||||
(e.target as HTMLImageElement).src = unknownTrainImage;
|
||||
}
|
||||
|
||||
generateStopList(stops: any): string | undefined {
|
||||
if (!stops) return "";
|
||||
return stops.reduce((acc, stop: TrainStop, i) => {
|
||||
if (stop.stopType.includes("ph")) acc.push(`<strong style='color:${stop.confirmed ? "springgreen" : "white"}'>${stop.stopName}</strong>`);
|
||||
else if (i > 0 && i < stops.length - 1 && !stop.stopNameRAW.includes("po."))
|
||||
acc.push(`<span style='color:${stop.confirmed ? "springgreen" : "lightgray"}'>${stop.stopName}</span>`);
|
||||
return acc;
|
||||
}, []).join(" * ");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
|
||||
.no-trains {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.train {
|
||||
&-list {
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-row {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background-color: $primaryCol;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
& > .wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
font-size: calc(0.4rem + 0.5vw);
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, minmax(100px, 1fr));
|
||||
|
||||
font-size: 0.8rem;
|
||||
gap: 0.4em 0;
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&-category {
|
||||
font-size: 1.05em;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category-right {
|
||||
padding: 0.15em 0.5em;
|
||||
|
||||
background: #1085b3;
|
||||
border-radius: 1em;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
width: 1.2em;
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
font-size: 0.9em;
|
||||
background-color: #1085b3;
|
||||
|
||||
&::after {
|
||||
border-color: #1085b3 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.25em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
&-stops {
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&-online {
|
||||
background-color: #ce0000;
|
||||
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
&.online {
|
||||
background-color: #009700;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
border-radius: 0.7em;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.driver {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-exp {
|
||||
font-size: 1.4em;
|
||||
padding: 0.3em 0.6em;
|
||||
|
||||
border-radius: 0.4em;
|
||||
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin: 0 0.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-type {
|
||||
color: #bbb;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
&-loco {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-loco img {
|
||||
width: 13em;
|
||||
max-width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
&-main {
|
||||
display: flex;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 0.3em;
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&-position {
|
||||
display: flex;
|
||||
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
p {
|
||||
color: #00cff3;
|
||||
}
|
||||
|
||||
& > span {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-radius: 15px;
|
||||
padding: 0.1em 1.2em;
|
||||
margin-right: 0.5em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: white;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 0.7em;
|
||||
|
||||
&.twr {
|
||||
border: 2px solid $twr;
|
||||
}
|
||||
|
||||
&.skr {
|
||||
border: 2px solid $skr;
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.info-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+160
-160
@@ -1,161 +1,161 @@
|
||||
{
|
||||
"options": [{
|
||||
"id": "is-default",
|
||||
"name": "default",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "W PACZCE"
|
||||
},
|
||||
{
|
||||
"id": "not-default",
|
||||
"name": "notDefault",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "POZA PACZKĄ"
|
||||
},
|
||||
{
|
||||
"id": "non-public",
|
||||
"name": "nonPublic",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "NIEPUBLICZNA"
|
||||
},
|
||||
{
|
||||
"id": "SPK",
|
||||
"name": "SPK",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "SPK"
|
||||
},
|
||||
{
|
||||
"id": "SCS",
|
||||
"name": "SCS",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "SCS"
|
||||
},
|
||||
{
|
||||
"id": "by-hand",
|
||||
"name": "ręczne",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "RĘCZNE"
|
||||
},
|
||||
{
|
||||
"id": "levers",
|
||||
"name": "mechaniczne",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "MECHANICZNE"
|
||||
},
|
||||
{
|
||||
"id": "modern",
|
||||
"name": "współczesna",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "WSPÓŁCZESNA"
|
||||
},
|
||||
{
|
||||
"id": "semaphore",
|
||||
"name": "kształtowa",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "KSZTAŁTOWA"
|
||||
},
|
||||
{
|
||||
"id": "mixed",
|
||||
"name": "mieszana",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "MIESZANA"
|
||||
},
|
||||
{
|
||||
"id": "historic",
|
||||
"name": "historyczna",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "HISTORYCZNA"
|
||||
},
|
||||
{
|
||||
"id": "free",
|
||||
"name": "free",
|
||||
"section": "status",
|
||||
"value": false,
|
||||
"defaultValue": false,
|
||||
"content": "WOLNA"
|
||||
},
|
||||
{
|
||||
"id": "occupied",
|
||||
"name": "occupied",
|
||||
"section": "status",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "ZAJĘTA"
|
||||
},
|
||||
{
|
||||
"id": "ending",
|
||||
"name": "ending",
|
||||
"section": "status",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "KOŃCZY"
|
||||
}
|
||||
],
|
||||
"sliders": [{
|
||||
"id": "min-level",
|
||||
"name": "minLevel",
|
||||
"minRange": 0,
|
||||
"maxRange": 20,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO"
|
||||
},
|
||||
{
|
||||
"id": "min-oneway-e",
|
||||
"name": "minOneWayCatenary",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
|
||||
},
|
||||
{
|
||||
"id": "min-oneway-ne",
|
||||
"name": "minOneWay",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
},
|
||||
{
|
||||
"id": "min-twoway-e",
|
||||
"name": "minTwoWayCatenary",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
|
||||
},
|
||||
{
|
||||
"id": "min-twoway-ne",
|
||||
"name": "minTwoWay",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
}
|
||||
]
|
||||
{
|
||||
"options": [{
|
||||
"id": "is-default",
|
||||
"name": "default",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "W PACZCE"
|
||||
},
|
||||
{
|
||||
"id": "not-default",
|
||||
"name": "notDefault",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "POZA PACZKĄ"
|
||||
},
|
||||
{
|
||||
"id": "non-public",
|
||||
"name": "nonPublic",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "NIEPUBLICZNA"
|
||||
},
|
||||
{
|
||||
"id": "SPK",
|
||||
"name": "SPK",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "SPK"
|
||||
},
|
||||
{
|
||||
"id": "SCS",
|
||||
"name": "SCS",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "SCS"
|
||||
},
|
||||
{
|
||||
"id": "by-hand",
|
||||
"name": "ręczne",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "RĘCZNE"
|
||||
},
|
||||
{
|
||||
"id": "levers",
|
||||
"name": "mechaniczne",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "MECHANICZNE"
|
||||
},
|
||||
{
|
||||
"id": "modern",
|
||||
"name": "współczesna",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "WSPÓŁCZESNA"
|
||||
},
|
||||
{
|
||||
"id": "semaphore",
|
||||
"name": "kształtowa",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "KSZTAŁTOWA"
|
||||
},
|
||||
{
|
||||
"id": "mixed",
|
||||
"name": "mieszana",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "MIESZANA"
|
||||
},
|
||||
{
|
||||
"id": "historic",
|
||||
"name": "historyczna",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "HISTORYCZNA"
|
||||
},
|
||||
{
|
||||
"id": "free",
|
||||
"name": "free",
|
||||
"section": "status",
|
||||
"value": false,
|
||||
"defaultValue": false,
|
||||
"content": "WOLNA"
|
||||
},
|
||||
{
|
||||
"id": "occupied",
|
||||
"name": "occupied",
|
||||
"section": "status",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "ZAJĘTA"
|
||||
},
|
||||
{
|
||||
"id": "ending",
|
||||
"name": "ending",
|
||||
"section": "status",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "KOŃCZY"
|
||||
}
|
||||
],
|
||||
"sliders": [{
|
||||
"id": "min-level",
|
||||
"name": "minLevel",
|
||||
"minRange": 0,
|
||||
"maxRange": 20,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO"
|
||||
},
|
||||
{
|
||||
"id": "min-oneway-e",
|
||||
"name": "minOneWayCatenary",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
|
||||
},
|
||||
{
|
||||
"id": "min-oneway-ne",
|
||||
"name": "minOneWay",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
},
|
||||
{
|
||||
"id": "min-twoway-e",
|
||||
"name": "minTwoWayCatenary",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
|
||||
},
|
||||
{
|
||||
"id": "min-twoway-ne",
|
||||
"name": "minTwoWay",
|
||||
"minRange": 0,
|
||||
"maxRange": 5,
|
||||
"value": 0,
|
||||
"defaultValue": 0,
|
||||
"content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,19 +1,19 @@
|
||||
import TrainStop from "./TrainStop";
|
||||
|
||||
export default interface ScheduledTrain {
|
||||
trainNo: number;
|
||||
driverName: string;
|
||||
driverId: number;
|
||||
currentStationName: string;
|
||||
currentStationHash: string;
|
||||
category: string;
|
||||
stopInfo: TrainStop;
|
||||
|
||||
terminatesAt: string;
|
||||
beginsAt: string;
|
||||
nearestStop: string;
|
||||
|
||||
stopLabel: string;
|
||||
stopStatus: string;
|
||||
stopStatusID: number;
|
||||
import TrainStop from "./TrainStop";
|
||||
|
||||
export default interface ScheduledTrain {
|
||||
trainNo: number;
|
||||
driverName: string;
|
||||
driverId: number;
|
||||
currentStationName: string;
|
||||
currentStationHash: string;
|
||||
category: string;
|
||||
stopInfo: TrainStop;
|
||||
|
||||
terminatesAt: string;
|
||||
beginsAt: string;
|
||||
nearestStop: string;
|
||||
|
||||
stopLabel: string;
|
||||
stopStatus: string;
|
||||
stopStatusID: number;
|
||||
}
|
||||
@@ -1,16 +1,16 @@
|
||||
export default interface Timetable {
|
||||
trainNo: number;
|
||||
driverName: string;
|
||||
category: string;
|
||||
stopName: string;
|
||||
stopType: string;
|
||||
arrivalTime: number;
|
||||
arrivalDelay: number;
|
||||
departureTime: number;
|
||||
departureDelay: number;
|
||||
confirmed: boolean;
|
||||
stopped: boolean;
|
||||
stopTime: number;
|
||||
beginsHere: boolean;
|
||||
terminatesHere: boolean;
|
||||
}
|
||||
export default interface Timetable {
|
||||
trainNo: number;
|
||||
driverName: string;
|
||||
category: string;
|
||||
stopName: string;
|
||||
stopType: string;
|
||||
arrivalTime: number;
|
||||
arrivalDelay: number;
|
||||
departureTime: number;
|
||||
departureDelay: number;
|
||||
confirmed: boolean;
|
||||
stopped: boolean;
|
||||
stopTime: number;
|
||||
beginsHere: boolean;
|
||||
terminatesHere: boolean;
|
||||
}
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
import TrainStop from '@/scripts/interfaces/TrainStop';
|
||||
|
||||
export default interface Train {
|
||||
mass: number;
|
||||
length: number;
|
||||
speed: number;
|
||||
signal: string;
|
||||
distance: number;
|
||||
connectedTrack: string;
|
||||
driverId: number;
|
||||
trainNo: number;
|
||||
driverName: string;
|
||||
currentStationName: string;
|
||||
currentStationHash: string;
|
||||
locoURL: string;
|
||||
locoType: string;
|
||||
online: boolean;
|
||||
|
||||
timetableData?: {
|
||||
timetableId: number;
|
||||
category: string;
|
||||
route: string;
|
||||
followingStops: TrainStop[];
|
||||
TWR: boolean;
|
||||
SKR: boolean;
|
||||
routeDistance: number;
|
||||
};
|
||||
|
||||
stopStatus: string;
|
||||
stopLabel: string;
|
||||
}
|
||||
import TrainStop from '@/scripts/interfaces/TrainStop';
|
||||
|
||||
export default interface Train {
|
||||
mass: number;
|
||||
length: number;
|
||||
speed: number;
|
||||
signal: string;
|
||||
distance: number;
|
||||
connectedTrack: string;
|
||||
driverId: number;
|
||||
trainNo: number;
|
||||
driverName: string;
|
||||
currentStationName: string;
|
||||
currentStationHash: string;
|
||||
locoURL: string;
|
||||
locoType: string;
|
||||
online: boolean;
|
||||
|
||||
timetableData?: {
|
||||
timetableId: number;
|
||||
category: string;
|
||||
route: string;
|
||||
followingStops: TrainStop[];
|
||||
TWR: boolean;
|
||||
SKR: boolean;
|
||||
routeDistance: number;
|
||||
};
|
||||
|
||||
stopStatus: string;
|
||||
stopLabel: string;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
export default interface TrainStop {
|
||||
stopName: string;
|
||||
stopNameRAW: string;
|
||||
stopType: string;
|
||||
mainStop: boolean;
|
||||
|
||||
arrivalLine: string;
|
||||
arrivalTimeString: string;
|
||||
arrivalTimestamp: number;
|
||||
arrivalRealTimeString: string;
|
||||
arrivalRealTimestamp: number;
|
||||
arrivalDelay: number;
|
||||
|
||||
departureLine: string;
|
||||
departureTimeString: string;
|
||||
departureTimestamp: number;
|
||||
departureRealTimeString: string;
|
||||
departureRealTimestamp: number;
|
||||
departureDelay: number;
|
||||
|
||||
comments?: any;
|
||||
|
||||
beginsHere: boolean;
|
||||
terminatesHere: boolean;
|
||||
confirmed: boolean;
|
||||
stopped: boolean;
|
||||
stopTime: number;
|
||||
}
|
||||
export default interface TrainStop {
|
||||
stopName: string;
|
||||
stopNameRAW: string;
|
||||
stopType: string;
|
||||
mainStop: boolean;
|
||||
|
||||
arrivalLine: string;
|
||||
arrivalTimeString: string;
|
||||
arrivalTimestamp: number;
|
||||
arrivalRealTimeString: string;
|
||||
arrivalRealTimestamp: number;
|
||||
arrivalDelay: number;
|
||||
|
||||
departureLine: string;
|
||||
departureTimeString: string;
|
||||
departureTimestamp: number;
|
||||
departureRealTimeString: string;
|
||||
departureRealTimestamp: number;
|
||||
departureDelay: number;
|
||||
|
||||
comments?: any;
|
||||
|
||||
beginsHere: boolean;
|
||||
terminatesHere: boolean;
|
||||
confirmed: boolean;
|
||||
stopped: boolean;
|
||||
stopTime: number;
|
||||
}
|
||||
|
||||
+138
-140
@@ -1,140 +1,138 @@
|
||||
import Station from '@/scripts/interfaces/Station';
|
||||
|
||||
export default class StationFilterManager {
|
||||
private filterInitStates = {
|
||||
default: false,
|
||||
notDefault: false,
|
||||
nonPublic: false,
|
||||
SPK: false,
|
||||
SCS: false,
|
||||
ręczne: false,
|
||||
mechaniczne: false,
|
||||
współczesna: false,
|
||||
kształtowa: false,
|
||||
historyczna: false,
|
||||
mieszana: false,
|
||||
minLevel: 0,
|
||||
minOneWayCatenary: 0,
|
||||
minOneWay: 0,
|
||||
minTwoWayCatenary: 0,
|
||||
minTwoWay: 0,
|
||||
'no-1track': false,
|
||||
'no-2track': false,
|
||||
free: true,
|
||||
occupied: false,
|
||||
ending: false,
|
||||
};
|
||||
|
||||
private filters = { ...this.filterInitStates };
|
||||
|
||||
private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
|
||||
|
||||
filteredStationList(stationList: Station[]): Station[] {
|
||||
return stationList
|
||||
.filter(station => {
|
||||
if (!station.reqLevel || station.reqLevel == '-1') return true;
|
||||
|
||||
if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
|
||||
|
||||
if (station.online && station.occupiedTo == 'KOŃCZY' && this.filters['ending']) return false;
|
||||
|
||||
if (station.online && this.filters['occupied']) return false;
|
||||
if (!station.online && this.filters['free']) return false;
|
||||
|
||||
if (station.default && this.filters['default']) return false;
|
||||
if (!station.default && this.filters['notDefault']) return false;
|
||||
|
||||
if (parseInt(station.reqLevel) < this.filters['minLevel']) return false;
|
||||
|
||||
if (this.filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
|
||||
if (this.filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
|
||||
|
||||
if (station.routes.oneWay.catenary < this.filters['minOneWayCatenary']) return false;
|
||||
if (station.routes.oneWay.noCatenary < this.filters['minOneWay']) return false;
|
||||
|
||||
if (station.routes.twoWay.catenary < this.filters['minTwoWayCatenary']) return false;
|
||||
if (station.routes.twoWay.noCatenary < this.filters['minTwoWay']) return false;
|
||||
|
||||
if (this.filters[station.controlType]) return false;
|
||||
if (this.filters[station.signalType]) return false;
|
||||
|
||||
if (this.filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return false;
|
||||
if (this.filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return false;
|
||||
|
||||
if (this.filters['SCS'] && this.filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return false;
|
||||
|
||||
if (this.filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return false;
|
||||
|
||||
if (this.filters['ręczne'] && station.controlType.includes('ręczne')) return false;
|
||||
|
||||
return true;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
switch (this.sorter.index) {
|
||||
case 1:
|
||||
if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return this.sorter.dir;
|
||||
if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (a.statusTimestamp > b.statusTimestamp) return this.sorter.dir;
|
||||
if (a.statusTimestamp < b.statusTimestamp) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (a.dispatcherName.toLowerCase() > b.dispatcherName.toLowerCase()) return this.sorter.dir;
|
||||
if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
if (a.dispatcherExp > b.dispatcherExp) return this.sorter.dir;
|
||||
if (a.dispatcherExp < b.dispatcherExp) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 7:
|
||||
if (a.currentUsers > b.currentUsers) return this.sorter.dir;
|
||||
if (a.currentUsers < b.currentUsers) return -this.sorter.dir;
|
||||
if (a.maxUsers > b.maxUsers) return this.sorter.dir;
|
||||
if (a.maxUsers < b.maxUsers) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 8:
|
||||
if (a.spawns > b.spawns) return this.sorter.dir;
|
||||
if (a.spawns < b.spawns) return -this.sorter.dir;
|
||||
|
||||
break;
|
||||
|
||||
case 9:
|
||||
if (a.scheduledTrains.length > b.scheduledTrains.length) return this.sorter.dir;
|
||||
if (a.scheduledTrains.length < b.scheduledTrains.length) return -this.sorter.dir;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.stationName.toLowerCase() >= b.stationName.toLowerCase()) return this.sorter.dir;
|
||||
return -this.sorter.dir;
|
||||
});
|
||||
}
|
||||
|
||||
changeFilterValue(filter: { name: string; value: number }) {
|
||||
this.filters[filter.name] = filter.value;
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filters = { ...this.filterInitStates };
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 4 && index < 7) return;
|
||||
|
||||
if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir;
|
||||
else this.sorter.dir = 1;
|
||||
|
||||
this.sorter.index = index;
|
||||
}
|
||||
|
||||
getSorter() {
|
||||
return this.sorter;
|
||||
}
|
||||
}
|
||||
import Station from '@/scripts/interfaces/Station';
|
||||
|
||||
export default class StationFilterManager {
|
||||
private filterInitStates = {
|
||||
default: false,
|
||||
notDefault: false,
|
||||
nonPublic: false,
|
||||
SPK: false,
|
||||
SCS: false,
|
||||
ręczne: false,
|
||||
mechaniczne: false,
|
||||
współczesna: false,
|
||||
kształtowa: false,
|
||||
historyczna: false,
|
||||
mieszana: false,
|
||||
minLevel: 0,
|
||||
minOneWayCatenary: 0,
|
||||
minOneWay: 0,
|
||||
minTwoWayCatenary: 0,
|
||||
minTwoWay: 0,
|
||||
'no-1track': false,
|
||||
'no-2track': false,
|
||||
free: true,
|
||||
occupied: false,
|
||||
ending: false,
|
||||
};
|
||||
|
||||
private filters = { ...this.filterInitStates };
|
||||
|
||||
private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
|
||||
|
||||
filteredStationList(stationList: Station[]): Station[] {
|
||||
return stationList
|
||||
.filter(station => {
|
||||
if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
|
||||
|
||||
if (station.online && station.occupiedTo == 'KOŃCZY' && this.filters['ending']) return false;
|
||||
|
||||
if (station.online && this.filters['occupied']) return false;
|
||||
if (!station.online && this.filters['free']) return false;
|
||||
|
||||
if (station.default && this.filters['default']) return false;
|
||||
if (!station.default && this.filters['notDefault']) return false;
|
||||
|
||||
if (parseInt(station.reqLevel) < this.filters['minLevel']) return false;
|
||||
|
||||
if (this.filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
|
||||
if (this.filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
|
||||
|
||||
if (station.routes.oneWay.catenary < this.filters['minOneWayCatenary']) return false;
|
||||
if (station.routes.oneWay.noCatenary < this.filters['minOneWay']) return false;
|
||||
|
||||
if (station.routes.twoWay.catenary < this.filters['minTwoWayCatenary']) return false;
|
||||
if (station.routes.twoWay.noCatenary < this.filters['minTwoWay']) return false;
|
||||
|
||||
if (this.filters[station.controlType]) return false;
|
||||
if (this.filters[station.signalType]) return false;
|
||||
|
||||
if (this.filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return false;
|
||||
if (this.filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return false;
|
||||
|
||||
if (this.filters['SCS'] && this.filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return false;
|
||||
|
||||
if (this.filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return false;
|
||||
|
||||
if (this.filters['ręczne'] && station.controlType.includes('ręczne')) return false;
|
||||
|
||||
return true;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
switch (this.sorter.index) {
|
||||
case 1:
|
||||
if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return this.sorter.dir;
|
||||
if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (a.statusTimestamp > b.statusTimestamp) return this.sorter.dir;
|
||||
if (a.statusTimestamp < b.statusTimestamp) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (a.dispatcherName.toLowerCase() > b.dispatcherName.toLowerCase()) return this.sorter.dir;
|
||||
if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
if (a.dispatcherExp > b.dispatcherExp) return this.sorter.dir;
|
||||
if (a.dispatcherExp < b.dispatcherExp) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 7:
|
||||
if (a.currentUsers > b.currentUsers) return this.sorter.dir;
|
||||
if (a.currentUsers < b.currentUsers) return -this.sorter.dir;
|
||||
if (a.maxUsers > b.maxUsers) return this.sorter.dir;
|
||||
if (a.maxUsers < b.maxUsers) return -this.sorter.dir;
|
||||
break;
|
||||
|
||||
case 8:
|
||||
if (a.spawns > b.spawns) return this.sorter.dir;
|
||||
if (a.spawns < b.spawns) return -this.sorter.dir;
|
||||
|
||||
break;
|
||||
|
||||
case 9:
|
||||
if (a.scheduledTrains.length > b.scheduledTrains.length) return this.sorter.dir;
|
||||
if (a.scheduledTrains.length < b.scheduledTrains.length) return -this.sorter.dir;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.stationName.toLowerCase() >= b.stationName.toLowerCase()) return this.sorter.dir;
|
||||
return -this.sorter.dir;
|
||||
});
|
||||
}
|
||||
|
||||
changeFilterValue(filter: { name: string; value: number }) {
|
||||
this.filters[filter.name] = filter.value;
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filters = { ...this.filterInitStates };
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 4 && index < 7) return;
|
||||
|
||||
if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir;
|
||||
else this.sorter.dir = 1;
|
||||
|
||||
this.sorter.index = index;
|
||||
}
|
||||
|
||||
getSorter() {
|
||||
return this.sorter;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
export default class StorageManager {
|
||||
static registerStorage(name: string) {
|
||||
window.localStorage.setItem(name, '1');
|
||||
}
|
||||
|
||||
static unregisterStorage(name: string) {
|
||||
window.localStorage.removeItem(name);
|
||||
}
|
||||
|
||||
static isRegistered(name: string) {
|
||||
return window.localStorage.getItem(name) ? true : false;
|
||||
}
|
||||
|
||||
static setBooleanValue(key: string, val: boolean) {
|
||||
window.localStorage.setItem(key, val.toString());
|
||||
}
|
||||
|
||||
static setNumericValue(key: string, val: number) {
|
||||
window.localStorage.setItem(key, val.toString());
|
||||
}
|
||||
|
||||
static setStringValue(key: string, val: string) {
|
||||
window.localStorage.setItem(key, val);
|
||||
}
|
||||
|
||||
static removeValue(key: string) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
static getBooleanValue(key: string): boolean {
|
||||
return window.localStorage.getItem(key) === 'true' ? true : false;
|
||||
}
|
||||
|
||||
static getStringValue(key: string): string {
|
||||
return window.localStorage.getItem(key) || '';
|
||||
}
|
||||
|
||||
static getNumericValue(key: string): number {
|
||||
const itemValue = window.localStorage.getItem(key);
|
||||
return itemValue ? parseInt(itemValue) : 0;
|
||||
}
|
||||
}
|
||||
export default class StorageManager {
|
||||
static registerStorage(name: string) {
|
||||
window.localStorage.setItem(name, '1');
|
||||
}
|
||||
|
||||
static unregisterStorage(name: string) {
|
||||
window.localStorage.removeItem(name);
|
||||
}
|
||||
|
||||
static isRegistered(name: string) {
|
||||
return window.localStorage.getItem(name) ? true : false;
|
||||
}
|
||||
|
||||
static setBooleanValue(key: string, val: boolean) {
|
||||
window.localStorage.setItem(key, val.toString());
|
||||
}
|
||||
|
||||
static setNumericValue(key: string, val: number) {
|
||||
window.localStorage.setItem(key, val.toString());
|
||||
}
|
||||
|
||||
static setStringValue(key: string, val: string) {
|
||||
window.localStorage.setItem(key, val);
|
||||
}
|
||||
|
||||
static removeValue(key: string) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
static getBooleanValue(key: string): boolean {
|
||||
return window.localStorage.getItem(key) === 'true' ? true : false;
|
||||
}
|
||||
|
||||
static getStringValue(key: string): string {
|
||||
return window.localStorage.getItem(key) || '';
|
||||
}
|
||||
|
||||
static getNumericValue(key: string): number {
|
||||
const itemValue = window.localStorage.getItem(key);
|
||||
return itemValue ? parseInt(itemValue) : 0;
|
||||
}
|
||||
}
|
||||
|
||||
+625
-625
File diff suppressed because it is too large
Load Diff
+232
-232
@@ -1,233 +1,233 @@
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
|
||||
&-track {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
border-radius: 1rem;
|
||||
background: #777;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
|
||||
& > &-text {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
|
||||
padding: .5rem .35rem;
|
||||
background-color: #830000;
|
||||
border-radius: .5rem;
|
||||
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-100% - 1rem));
|
||||
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #830000 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > &-text {
|
||||
@include smallScreen() {
|
||||
display: none;
|
||||
}
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
// font-family: "Open Sans", sans-serif;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
// font-family: "Open Sans", sans-serif;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid white;
|
||||
background: none;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
|
||||
padding: 0.15em;
|
||||
margin: 0.2em;
|
||||
|
||||
max-width: 55px;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #bebebe;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.default-station {
|
||||
font-weight: bold;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 4;
|
||||
|
||||
overflow: auto;
|
||||
background: #262a2e;
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
width: 75%;
|
||||
max-width: 750px;
|
||||
max-height: 95%;
|
||||
|
||||
// font-size: calc(0.6rem + 0.5vw);
|
||||
font-size: calc(0.45rem + 0.35vw);
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0.3em 0em;
|
||||
|
||||
img {
|
||||
width: 1.6em;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
|
||||
padding: .35em 0;
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.9em;
|
||||
|
||||
outline: none;
|
||||
padding: 0.35em;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $accentCol;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
&-spaced {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
|
||||
&-track {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
border-radius: 1rem;
|
||||
background: #777;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
|
||||
& > &-text {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
|
||||
padding: .5rem .35rem;
|
||||
background-color: #830000;
|
||||
border-radius: .5rem;
|
||||
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-100% - 1rem));
|
||||
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #830000 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > &-text {
|
||||
@include smallScreen() {
|
||||
display: none;
|
||||
}
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
// font-family: "Open Sans", sans-serif;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
// font-family: "Open Sans", sans-serif;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid white;
|
||||
background: none;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
|
||||
padding: 0.15em;
|
||||
margin: 0.2em;
|
||||
|
||||
max-width: 55px;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #bebebe;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.default-station {
|
||||
font-weight: bold;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 4;
|
||||
|
||||
overflow: auto;
|
||||
background: #262a2e;
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
width: 75%;
|
||||
max-width: 750px;
|
||||
max-height: 95%;
|
||||
|
||||
// font-size: calc(0.6rem + 0.5vw);
|
||||
font-size: calc(0.45rem + 0.35vw);
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0.3em 0em;
|
||||
|
||||
img {
|
||||
width: 1.6em;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
|
||||
padding: .35em 0;
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.9em;
|
||||
|
||||
outline: none;
|
||||
padding: 0.35em;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $accentCol;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
&-spaced {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,51 @@
|
||||
$free: #8a8a8a;
|
||||
$ending: #e6c300;
|
||||
$no-limit: #0077ae;
|
||||
$unav: #ff3d5d;
|
||||
$brb: #e6a100;
|
||||
$no-space: #222;
|
||||
$taken: #09a116;
|
||||
|
||||
.status {
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 0.9em;
|
||||
padding: 0.2em 0.45em;
|
||||
|
||||
background-color: $taken;
|
||||
|
||||
&.free {
|
||||
background-color: $free;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.ending {
|
||||
background-color: $ending;
|
||||
color: black;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.no-limit {
|
||||
background-color: $no-limit;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.not-signed,
|
||||
&.unavailable {
|
||||
background-color: $unav;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&.brb {
|
||||
background-color: $brb;
|
||||
color: black;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.no-space {
|
||||
background-color: $no-space;
|
||||
color: white;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
$free: #8a8a8a;
|
||||
$ending: #e6c300;
|
||||
$no-limit: #0077ae;
|
||||
$unav: #ff3d5d;
|
||||
$brb: #e6a100;
|
||||
$no-space: #222;
|
||||
$taken: #09a116;
|
||||
|
||||
.status {
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 0.9em;
|
||||
padding: 0.2em 0.45em;
|
||||
|
||||
background-color: $taken;
|
||||
|
||||
&.free {
|
||||
background-color: $free;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.ending {
|
||||
background-color: $ending;
|
||||
color: black;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.no-limit {
|
||||
background-color: $no-limit;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.not-signed,
|
||||
&.unavailable {
|
||||
background-color: $unav;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&.brb {
|
||||
background-color: $brb;
|
||||
color: black;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.no-space {
|
||||
background-color: $no-space;
|
||||
color: white;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
+53
-53
@@ -1,54 +1,54 @@
|
||||
$no-timetable: #aaa;
|
||||
$departed: springgreen;
|
||||
$stopped: #ffa600;
|
||||
$online: gold;
|
||||
$terminated: red;
|
||||
$disconnected: slategray;
|
||||
|
||||
|
||||
.user-badge {
|
||||
border: 2px solid white;
|
||||
z-index: 4;
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
border-radius: 0.7em;
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 0.95em;
|
||||
|
||||
&.borderless {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.no-timetable {
|
||||
border: 2px solid $no-timetable;
|
||||
|
||||
a {
|
||||
color: $no-timetable;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.departed {
|
||||
border: 2px solid $departed;
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
border: 2px solid $stopped;
|
||||
}
|
||||
|
||||
&.online {
|
||||
border: 2px solid $online;
|
||||
}
|
||||
|
||||
&.terminated {
|
||||
border: 2px solid $terminated;
|
||||
}
|
||||
|
||||
&.disconnected {
|
||||
border: 1px solid $disconnected;
|
||||
}
|
||||
$no-timetable: #aaa;
|
||||
$departed: springgreen;
|
||||
$stopped: #ffa600;
|
||||
$online: gold;
|
||||
$terminated: red;
|
||||
$disconnected: slategray;
|
||||
|
||||
|
||||
.user-badge {
|
||||
border: 2px solid white;
|
||||
z-index: 4;
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
border-radius: 0.7em;
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 0.95em;
|
||||
|
||||
&.borderless {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.no-timetable {
|
||||
border: 2px solid $no-timetable;
|
||||
|
||||
a {
|
||||
color: $no-timetable;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.departed {
|
||||
border: 2px solid $departed;
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
border: 2px solid $stopped;
|
||||
}
|
||||
|
||||
&.online {
|
||||
border: 2px solid $online;
|
||||
}
|
||||
|
||||
&.terminated {
|
||||
border: 2px solid $terminated;
|
||||
}
|
||||
|
||||
&.disconnected {
|
||||
border: 1px solid $disconnected;
|
||||
}
|
||||
}
|
||||
+147
-147
@@ -1,148 +1,148 @@
|
||||
<template>
|
||||
<div class="scenery-view">
|
||||
<div
|
||||
class="scenery-offline"
|
||||
v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
|
||||
>
|
||||
Ups! Nie znaleziono danej stacji bądź jest ona offline!
|
||||
<button class="button">
|
||||
<router-link to="/">Wróć na stronę główną</router-link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scenery-wrapper" v-if="stationInfo">
|
||||
<SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
|
||||
|
||||
<SceneryTimetable
|
||||
:stationInfo="stationInfo"
|
||||
:timetableOnly="timetableOnly"
|
||||
:dataStatus="timetableDataStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
|
||||
import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: { SceneryInfo, SceneryTimetable },
|
||||
})
|
||||
export default class SceneryView extends Vue {
|
||||
@Getter("getStationList") storeStationList!: Station[];
|
||||
@Getter("getTimetableDataStatus") timetableDataStatus!: number;
|
||||
@Getter("getDataStatus") dataStatus!: number;
|
||||
|
||||
timetableOnly: boolean = false;
|
||||
|
||||
activated() {
|
||||
this.timetableOnly =
|
||||
this.$route.query["timetable_only"] == "1" ? true : false;
|
||||
}
|
||||
|
||||
get currentPath() {
|
||||
return this.$route.path;
|
||||
}
|
||||
|
||||
// get dataLoaded() {
|
||||
// return this.storeStationList ? true : false;
|
||||
// }
|
||||
|
||||
get stationInfo(): Station | null {
|
||||
if (!this.$route.query.hash || !this.storeStationList) return null;
|
||||
|
||||
const info =
|
||||
this.storeStationList.find(
|
||||
(station) => station.stationHash === this.$route.query.hash.toString()
|
||||
) || null;
|
||||
|
||||
return info;
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.scenery {
|
||||
&-view {
|
||||
min-height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.65vw);
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 1.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: calc(0.5rem + 1vw);
|
||||
}
|
||||
}
|
||||
|
||||
&-offline {
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
|
||||
color: $warningCol;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
margin: 1rem auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
// background: #555;
|
||||
max-width: 950px;
|
||||
width: 75%;
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
// max-height: 100vh;
|
||||
// overflow: auto;
|
||||
|
||||
background: #333;
|
||||
padding: 1em;
|
||||
margin: 1rem 0;
|
||||
|
||||
border-radius: 1.5em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="scenery-view">
|
||||
<div
|
||||
class="scenery-offline"
|
||||
v-if="!stationInfo && dataStatus == 2 && currentPath === '/scenery'"
|
||||
>
|
||||
Ups! Nie znaleziono danej stacji bądź jest ona offline!
|
||||
<button class="button">
|
||||
<router-link to="/">Wróć na stronę główną</router-link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scenery-wrapper" v-if="stationInfo">
|
||||
<SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
|
||||
|
||||
<SceneryTimetable
|
||||
:stationInfo="stationInfo"
|
||||
:timetableOnly="timetableOnly"
|
||||
:dataStatus="timetableDataStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
|
||||
import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: { SceneryInfo, SceneryTimetable },
|
||||
})
|
||||
export default class SceneryView extends Vue {
|
||||
@Getter("getStationList") storeStationList!: Station[];
|
||||
@Getter("getTimetableDataStatus") timetableDataStatus!: number;
|
||||
@Getter("getDataStatus") dataStatus!: number;
|
||||
|
||||
timetableOnly: boolean = false;
|
||||
|
||||
activated() {
|
||||
this.timetableOnly =
|
||||
this.$route.query["timetable_only"] == "1" ? true : false;
|
||||
}
|
||||
|
||||
get currentPath() {
|
||||
return this.$route.path;
|
||||
}
|
||||
|
||||
// get dataLoaded() {
|
||||
// return this.storeStationList ? true : false;
|
||||
// }
|
||||
|
||||
get stationInfo(): Station | null {
|
||||
if (!this.$route.query.hash || !this.storeStationList) return null;
|
||||
|
||||
const info =
|
||||
this.storeStationList.find(
|
||||
(station) => station.stationHash === this.$route.query.hash.toString()
|
||||
) || null;
|
||||
|
||||
return info;
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.scenery {
|
||||
&-view {
|
||||
min-height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.65vw);
|
||||
|
||||
@include bigScreen() {
|
||||
font-size: 1.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: calc(0.5rem + 1vw);
|
||||
}
|
||||
}
|
||||
|
||||
&-offline {
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
|
||||
color: $warningCol;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
margin: 1rem auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
// background: #555;
|
||||
max-width: 950px;
|
||||
width: 75%;
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
// max-height: 100vh;
|
||||
// overflow: auto;
|
||||
|
||||
background: #333;
|
||||
padding: 1em;
|
||||
margin: 1rem 0;
|
||||
|
||||
border-radius: 1.5em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+373
-373
@@ -1,373 +1,373 @@
|
||||
<template>
|
||||
<div class="stations_view">
|
||||
<DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
|
||||
|
||||
<div class="stations_wrapper">
|
||||
<div class="stations_body">
|
||||
<div class="body_bar">
|
||||
<div class="bar_actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{ open: filterCardOpen }"
|
||||
@click="() => toggleCardsState('filter')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
|
||||
<p>FILTRY</p>
|
||||
</button>
|
||||
|
||||
<button class="action-btn" @click="toggleModal">
|
||||
<img :src="dolarIcon" alt="icon-dolar" />
|
||||
|
||||
<p>WESPRZYJ</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bar_indicators">
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_scenery-data"
|
||||
v-if="data.dataConnectionStatus < 2"
|
||||
:class="dataStatusClass"
|
||||
>
|
||||
<img :src="trainIcon" alt="icon-train" />
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_timetable-data"
|
||||
v-if="data.timetableDataStatus < 2"
|
||||
:class="timetableDataStatusClass"
|
||||
>
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body_table">
|
||||
<StationTable
|
||||
:stations="computedStations"
|
||||
:sorterActive="filterManager.getSorter()"
|
||||
:setFocusedStation="setFocusedStation"
|
||||
:changeSorter="changeSorter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="card-anim">
|
||||
<StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
|
||||
</transition>
|
||||
|
||||
<transition name="card-anim">
|
||||
<FilterCard
|
||||
v-if="filterCardOpen"
|
||||
:exit="() => toggleCardsState('filter')"
|
||||
@changeFilterValue="changeFilterValue"
|
||||
@resetFilters="resetFilters"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
import StationFilterManager from "@/scripts/stationFilterManager";
|
||||
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StationTable from "@/components/StationsView/StationTable.vue";
|
||||
import StationCard from "@/components/StationsView/StationCard.vue";
|
||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||
|
||||
import DonationModal from "@/components/Global/DonationModal.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationCard,
|
||||
StationTable,
|
||||
FilterCard,
|
||||
DonationModal,
|
||||
},
|
||||
})
|
||||
export default class StationsView extends Vue {
|
||||
STORAGE_KEY: string = "options_saved";
|
||||
STORAGE_MODAL: string = "modal";
|
||||
|
||||
trainIcon: string = require("@/assets/icon-train.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
dolarIcon: string = require("@/assets/icon-dolar.svg");
|
||||
|
||||
filterManager: StationFilterManager = new StationFilterManager();
|
||||
|
||||
focusedStationName: string = "";
|
||||
filterCardOpen: boolean = false;
|
||||
modalHidden: boolean = true;
|
||||
|
||||
inputs = inputData;
|
||||
|
||||
@Getter("getStationList") stationList!: Station[];
|
||||
@Getter("getAllData") data;
|
||||
|
||||
get dataStatusClass() {
|
||||
if (this.data.dataConnectionStatus == 0) return "loading";
|
||||
if (this.data.dataConnectionStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
get timetableDataStatusClass() {
|
||||
if (this.data.timetableDataStatus == 0) return "loading";
|
||||
if (this.data.timetableDataStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.initializeOptionsStorage();
|
||||
// this.initializeModalStorage();
|
||||
|
||||
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
if (e.keyCode == 27 && this.focusedStationName != "") {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initializeOptionsStorage() {
|
||||
if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
|
||||
|
||||
this.inputs.options.forEach((option) => {
|
||||
const value = StorageManager.getBooleanValue(option.name);
|
||||
|
||||
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
|
||||
option.value = value;
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
const value = StorageManager.getNumericValue(slider.name);
|
||||
|
||||
this.changeFilterValue({ name: slider.name, value });
|
||||
slider.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
initializeModalStorage() {
|
||||
if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
|
||||
this.modalHidden = StorageManager.getBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`
|
||||
);
|
||||
}
|
||||
|
||||
toggleModal() {
|
||||
this.modalHidden = !this.modalHidden;
|
||||
|
||||
StorageManager.setBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`,
|
||||
this.modalHidden
|
||||
);
|
||||
}
|
||||
|
||||
toggleCardsState(name: string): void {
|
||||
if (name == "filter") {
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
this.filterManager.changeSorter(index);
|
||||
}
|
||||
|
||||
changeFilterValue(filter: { name: string; value: number }) {
|
||||
this.filterManager.changeFilterValue(filter);
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filterManager.resetFilters();
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
return this.filterManager.filteredStationList(this.stationList);
|
||||
}
|
||||
|
||||
closeCard() {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
|
||||
setFocusedStation(name: string) {
|
||||
if (this.focusedStationName == name) this.focusedStationName = "";
|
||||
else this.focusedStationName = name;
|
||||
}
|
||||
|
||||
get focusedStationInfo() {
|
||||
return this.computedStations.find(
|
||||
(station) => station.stationName === this.focusedStationName
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stations_view {
|
||||
position: relative;
|
||||
|
||||
padding: 1rem 0;
|
||||
min-height: 100%;
|
||||
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
}
|
||||
|
||||
.stations_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stations_body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
|
||||
& > .body_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_actions {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_indicators {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
margin-left: 0.5em;
|
||||
|
||||
// background-color: #e68e00;
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
|
||||
&.loading {
|
||||
background-color: $accentCol;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorCol;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $secondaryCol;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 0.9em;
|
||||
animation: blinkAnim 2s ease-in-out infinite forwards;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.65em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinkAnim {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="stations_view">
|
||||
<DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
|
||||
|
||||
<div class="stations_wrapper">
|
||||
<div class="stations_body">
|
||||
<div class="body_bar">
|
||||
<div class="bar_actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{ open: filterCardOpen }"
|
||||
@click="() => toggleCardsState('filter')"
|
||||
>
|
||||
<img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
|
||||
<p>FILTRY</p>
|
||||
</button>
|
||||
|
||||
<button class="action-btn" @click="toggleModal">
|
||||
<img :src="dolarIcon" alt="icon-dolar" />
|
||||
|
||||
<p>WESPRZYJ</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bar_indicators">
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_scenery-data"
|
||||
v-if="data.dataConnectionStatus < 2"
|
||||
:class="dataStatusClass"
|
||||
>
|
||||
<img :src="trainIcon" alt="icon-train" />
|
||||
</span>
|
||||
</transition>
|
||||
|
||||
<transition name="indicator-anim">
|
||||
<span
|
||||
class="indicator_timetable-data"
|
||||
v-if="data.timetableDataStatus < 2"
|
||||
:class="timetableDataStatusClass"
|
||||
>
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body_table">
|
||||
<StationTable
|
||||
:stations="computedStations"
|
||||
:sorterActive="filterManager.getSorter()"
|
||||
:setFocusedStation="setFocusedStation"
|
||||
:changeSorter="changeSorter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="card-anim">
|
||||
<StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
|
||||
</transition>
|
||||
|
||||
<transition name="card-anim">
|
||||
<FilterCard
|
||||
v-if="filterCardOpen"
|
||||
:exit="() => toggleCardsState('filter')"
|
||||
@changeFilterValue="changeFilterValue"
|
||||
@resetFilters="resetFilters"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
import StationFilterManager from "@/scripts/stationFilterManager";
|
||||
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StationTable from "@/components/StationsView/StationTable.vue";
|
||||
import StationCard from "@/components/StationsView/StationCard.vue";
|
||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||
|
||||
import DonationModal from "@/components/Global/DonationModal.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationCard,
|
||||
StationTable,
|
||||
FilterCard,
|
||||
DonationModal,
|
||||
},
|
||||
})
|
||||
export default class StationsView extends Vue {
|
||||
STORAGE_KEY: string = "options_saved";
|
||||
STORAGE_MODAL: string = "modal";
|
||||
|
||||
trainIcon: string = require("@/assets/icon-train.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
dolarIcon: string = require("@/assets/icon-dolar.svg");
|
||||
|
||||
filterManager: StationFilterManager = new StationFilterManager();
|
||||
|
||||
focusedStationName: string = "";
|
||||
filterCardOpen: boolean = false;
|
||||
modalHidden: boolean = true;
|
||||
|
||||
inputs = inputData;
|
||||
|
||||
@Getter("getStationList") stationList!: Station[];
|
||||
@Getter("getAllData") data;
|
||||
|
||||
get dataStatusClass() {
|
||||
if (this.data.dataConnectionStatus == 0) return "loading";
|
||||
if (this.data.dataConnectionStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
get timetableDataStatusClass() {
|
||||
if (this.data.timetableDataStatus == 0) return "loading";
|
||||
if (this.data.timetableDataStatus == 1) return "error";
|
||||
|
||||
return "success";
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.initializeOptionsStorage();
|
||||
// this.initializeModalStorage();
|
||||
|
||||
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||
if (e.keyCode == 27 && this.focusedStationName != "") {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initializeOptionsStorage() {
|
||||
if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
|
||||
|
||||
this.inputs.options.forEach((option) => {
|
||||
const value = StorageManager.getBooleanValue(option.name);
|
||||
|
||||
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
|
||||
option.value = value;
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
const value = StorageManager.getNumericValue(slider.name);
|
||||
|
||||
this.changeFilterValue({ name: slider.name, value });
|
||||
slider.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
initializeModalStorage() {
|
||||
if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
|
||||
this.modalHidden = StorageManager.getBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`
|
||||
);
|
||||
}
|
||||
|
||||
toggleModal() {
|
||||
this.modalHidden = !this.modalHidden;
|
||||
|
||||
StorageManager.setBooleanValue(
|
||||
`${this.STORAGE_MODAL}_hidden`,
|
||||
this.modalHidden
|
||||
);
|
||||
}
|
||||
|
||||
toggleCardsState(name: string): void {
|
||||
if (name == "filter") {
|
||||
this.filterCardOpen = !this.filterCardOpen;
|
||||
}
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
this.filterManager.changeSorter(index);
|
||||
}
|
||||
|
||||
changeFilterValue(filter: { name: string; value: number }) {
|
||||
this.filterManager.changeFilterValue(filter);
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filterManager.resetFilters();
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
return this.filterManager.filteredStationList(this.stationList);
|
||||
}
|
||||
|
||||
closeCard() {
|
||||
this.focusedStationName = "";
|
||||
}
|
||||
|
||||
setFocusedStation(name: string) {
|
||||
if (this.focusedStationName == name) this.focusedStationName = "";
|
||||
else this.focusedStationName = name;
|
||||
}
|
||||
|
||||
get focusedStationInfo() {
|
||||
return this.computedStations.find(
|
||||
(station) => station.stationName === this.focusedStationName
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stations_view {
|
||||
position: relative;
|
||||
|
||||
padding: 1rem 0;
|
||||
min-height: 100%;
|
||||
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
}
|
||||
|
||||
.stations_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stations_body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
|
||||
& > .body_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_actions {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar_indicators {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
margin-left: 0.5em;
|
||||
|
||||
// background-color: #e68e00;
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
|
||||
&.loading {
|
||||
background-color: $accentCol;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorCol;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $secondaryCol;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 0.9em;
|
||||
animation: blinkAnim 2s ease-in-out infinite forwards;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.65em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinkAnim {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+769
-769
File diff suppressed because it is too large
Load Diff
+166
-166
@@ -1,166 +1,166 @@
|
||||
<template>
|
||||
<section class="trains-view">
|
||||
<div class="body-wrapper">
|
||||
<div class="options-wrapper">
|
||||
<TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
|
||||
<TrainSearch
|
||||
@changeSearchedTrain="changeSearchedTrain"
|
||||
@changeSearchedDriver="changeSearchedDriver"
|
||||
:passedSearchedTrain="passedSearchedTrain"
|
||||
:focusedTrain="focusedTrain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TrainStats :trains="trains" />
|
||||
<TrainTable
|
||||
:computedTrains="computedTrains"
|
||||
@changeFocusedTrain="changeFocusedTrain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
import { Getter, Action } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
|
||||
import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
|
||||
import TrainTable from "@/components/TrainsView/TrainTable.vue";
|
||||
import TrainStats from "@/components/TrainsView/TrainStats.vue";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
TrainSorter,
|
||||
TrainTable,
|
||||
TrainStats,
|
||||
TrainSearch,
|
||||
},
|
||||
})
|
||||
export default class TrainsView extends Vue {
|
||||
@Getter("getTrainList") trains!: Train[];
|
||||
@Prop() readonly passedSearchedTrain!: string;
|
||||
|
||||
sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
|
||||
|
||||
searchedTrain: string = "";
|
||||
searchedDriver: string = "";
|
||||
focusedTrain: string = "";
|
||||
|
||||
changeSearchedTrain(trainNo: string) {
|
||||
this.searchedTrain = trainNo;
|
||||
}
|
||||
|
||||
changeSearchedDriver(name: string) {
|
||||
this.searchedDriver = name;
|
||||
}
|
||||
|
||||
changeFocusedTrain(trainNo: string) {
|
||||
this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
|
||||
}
|
||||
|
||||
changeSorter(sorter: { id: string; dir: number }) {
|
||||
this.sorterActive = sorter;
|
||||
}
|
||||
|
||||
get computedTrains() {
|
||||
return this.trains
|
||||
.filter(
|
||||
(train) =>
|
||||
train.timetableData &&
|
||||
(this.searchedTrain.length > 0
|
||||
? train.trainNo.toString().includes(this.searchedTrain)
|
||||
: true) &&
|
||||
(this.searchedDriver.length > 0
|
||||
? train.driverName
|
||||
.toLowerCase()
|
||||
.includes(this.searchedDriver.toLowerCase())
|
||||
: true)
|
||||
)
|
||||
.sort((a, b) => {
|
||||
switch (this.sorterActive.id) {
|
||||
case "mass":
|
||||
if (a.mass > b.mass) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "distance":
|
||||
if (!a.timetableData || !b.timetableData) return 0;
|
||||
|
||||
if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "speed":
|
||||
if (a.speed > b.speed) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "timetable":
|
||||
if (a.trainNo > b.trainNo) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "length":
|
||||
if (a.length > b.length) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.trains-view {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
margin: 1rem auto;
|
||||
max-width: 1300px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
font-size: calc(0.4rem + 0.4vw);
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.body-wrapper {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.body-wrapper {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<section class="trains-view">
|
||||
<div class="body-wrapper">
|
||||
<div class="options-wrapper">
|
||||
<TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
|
||||
<TrainSearch
|
||||
@changeSearchedTrain="changeSearchedTrain"
|
||||
@changeSearchedDriver="changeSearchedDriver"
|
||||
:passedSearchedTrain="passedSearchedTrain"
|
||||
:focusedTrain="focusedTrain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TrainStats :trains="trains" />
|
||||
<TrainTable
|
||||
:computedTrains="computedTrains"
|
||||
@changeFocusedTrain="changeFocusedTrain"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
import { Getter, Action } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
|
||||
import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
|
||||
import TrainTable from "@/components/TrainsView/TrainTable.vue";
|
||||
import TrainStats from "@/components/TrainsView/TrainStats.vue";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
TrainSorter,
|
||||
TrainTable,
|
||||
TrainStats,
|
||||
TrainSearch,
|
||||
},
|
||||
})
|
||||
export default class TrainsView extends Vue {
|
||||
@Getter("getTrainList") trains!: Train[];
|
||||
@Prop() readonly passedSearchedTrain!: string;
|
||||
|
||||
sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
|
||||
|
||||
searchedTrain: string = "";
|
||||
searchedDriver: string = "";
|
||||
focusedTrain: string = "";
|
||||
|
||||
changeSearchedTrain(trainNo: string) {
|
||||
this.searchedTrain = trainNo;
|
||||
}
|
||||
|
||||
changeSearchedDriver(name: string) {
|
||||
this.searchedDriver = name;
|
||||
}
|
||||
|
||||
changeFocusedTrain(trainNo: string) {
|
||||
this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
|
||||
}
|
||||
|
||||
changeSorter(sorter: { id: string; dir: number }) {
|
||||
this.sorterActive = sorter;
|
||||
}
|
||||
|
||||
get computedTrains() {
|
||||
return this.trains
|
||||
.filter(
|
||||
(train) =>
|
||||
train.timetableData &&
|
||||
(this.searchedTrain.length > 0
|
||||
? train.trainNo.toString().includes(this.searchedTrain)
|
||||
: true) &&
|
||||
(this.searchedDriver.length > 0
|
||||
? train.driverName
|
||||
.toLowerCase()
|
||||
.includes(this.searchedDriver.toLowerCase())
|
||||
: true)
|
||||
)
|
||||
.sort((a, b) => {
|
||||
switch (this.sorterActive.id) {
|
||||
case "mass":
|
||||
if (a.mass > b.mass) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "distance":
|
||||
if (!a.timetableData || !b.timetableData) return 0;
|
||||
|
||||
if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "speed":
|
||||
if (a.speed > b.speed) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "timetable":
|
||||
if (a.trainNo > b.trainNo) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "length":
|
||||
if (a.length > b.length) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.trains-view {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
margin: 1rem auto;
|
||||
max-width: 1300px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
font-size: calc(0.4rem + 0.4vw);
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.body-wrapper {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.body-wrapper {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user