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,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>
|
||||
Reference in New Issue
Block a user