mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Restrukturyzacja kodu
This commit is contained in:
@@ -34,8 +34,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
import OptionCard from "@/components/ui/OptionCard.vue";
|
||||
import LegendCard from "@/components/ui/LegendCard.vue";
|
||||
import OptionCard from "@/components/StationsView/OptionCard.vue";
|
||||
import LegendCard from "@/components/StationsView/LegendCard.vue";
|
||||
|
||||
@Component({
|
||||
components: { OptionCard, LegendCard },
|
||||
@@ -71,6 +71,11 @@ export default class Options extends Vue {
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<section class="station-table">
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<thead class="table-head">
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<span>
|
||||
<div>
|
||||
<div>{{head[0]}}</div>
|
||||
<div v-if="head.length > 1">{{head[1]}}</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.index == i"
|
||||
:src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
|
||||
alt
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tr
|
||||
class="table-item"
|
||||
v-for="(station, i) in computedStations"
|
||||
:key="i + station.stationHash"
|
||||
@click="() => { setFocusedStation(station.stationName) }"
|
||||
>
|
||||
<td
|
||||
class="item-station-name"
|
||||
:class="{'default-station': station.default, 'online': station.online}"
|
||||
>{{station.stationName}}</td>
|
||||
|
||||
<td class="item-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="item-station-status">
|
||||
<span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
|
||||
</td>
|
||||
|
||||
<td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
|
||||
<td class="item-dispatcher-exp">
|
||||
<span
|
||||
v-if="station.online"
|
||||
:style="calculateExpStyle(station.dispatcherExp)"
|
||||
>{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
|
||||
</td>
|
||||
<td
|
||||
class="item-users"
|
||||
>{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
|
||||
<td class="item-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="item-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>
|
||||
</td>
|
||||
|
||||
<td class="item-tracks oneway">
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
</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";
|
||||
|
||||
const ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
@Component({
|
||||
components: { Options },
|
||||
})
|
||||
export default class StationTable extends styleMixin {
|
||||
@Prop() readonly stations!: Station[];
|
||||
@Prop() readonly setFocusedStation!: () => void;
|
||||
|
||||
icons: { ascSVG; descSVG } = { ascSVG, descSVG };
|
||||
sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
|
||||
|
||||
headTitles: string[][] = [
|
||||
["Stacja"],
|
||||
["Wymagany poz.", "dyżurnego"],
|
||||
["Status"],
|
||||
["Dyżurny"],
|
||||
["Poziom", "dyżurnego"],
|
||||
["Maszyniści"],
|
||||
["Informacje", "ogólne"],
|
||||
["Szlaki", "dwutorowe"],
|
||||
["Szlaki", "jednotorowe"],
|
||||
];
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 5) return;
|
||||
|
||||
if (index == this.sorterActive.index)
|
||||
this.sorterActive.dir = -1 * this.sorterActive.dir;
|
||||
else this.sorterActive.dir = 1;
|
||||
|
||||
this.sorterActive.index = index;
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
const dir: number = this.sorterActive.dir;
|
||||
|
||||
return this.stations.sort((a, b) => {
|
||||
switch (this.sorterActive.index) {
|
||||
case 1:
|
||||
if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
|
||||
if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (a.statusTimestamp > b.statusTimestamp) return dir;
|
||||
if (a.statusTimestamp < b.statusTimestamp) return -dir;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
if (a.dispatcherName > b.dispatcherName) return dir;
|
||||
if (a.dispatcherName < b.dispatcherName) return -dir;
|
||||
break;
|
||||
|
||||
case 4:
|
||||
if (a.dispatcherExp > b.dispatcherExp) return dir;
|
||||
if (a.dispatcherExp < b.dispatcherExp) return -dir;
|
||||
break;
|
||||
|
||||
case 5:
|
||||
if (a.currentUsers > b.currentUsers) return dir;
|
||||
if (a.currentUsers < b.currentUsers) return -dir;
|
||||
if (a.maxUsers > b.maxUsers) return dir;
|
||||
if (a.maxUsers < b.maxUsers) return -dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (a.stationName >= b.stationName) return dir;
|
||||
return -dir;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/global.scss";
|
||||
|
||||
.table {
|
||||
&-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
|
||||
font-size: calc(0.6rem + 0.3vw);
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
&-head th {
|
||||
padding: 0.3rem;
|
||||
background-color: #444;
|
||||
min-width: 120px;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
background-color: #5c5b5b;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: rgb(102, 101, 101);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #818181;
|
||||
}
|
||||
|
||||
& > td {
|
||||
padding: 0.3rem 1rem;
|
||||
margin: 0 3rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include smallScreen() {
|
||||
margin: 0;
|
||||
padding: 0.1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&-station-level,
|
||||
&-dispatcher-exp {
|
||||
span {
|
||||
display: block;
|
||||
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-station-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,370 +0,0 @@
|
||||
<template>
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<thead class="table-head">
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<span>
|
||||
<div>
|
||||
<div>{{head[0]}}</div>
|
||||
<div v-if="head.length > 1">{{head[1]}}</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="icon"
|
||||
v-if="sorterActive.index == i"
|
||||
:src="sorterActive.type == 1 ? icons.ascSVG : icons.descSVG"
|
||||
alt
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tr
|
||||
class="table-item"
|
||||
v-for="(station, i) in computedStations"
|
||||
:key="i + station.stationHash"
|
||||
@click="() => { setFocusedStation(station.stationName) }"
|
||||
>
|
||||
<td
|
||||
class="item-station-name"
|
||||
:class="{'default-station': station.default, 'online': station.online}"
|
||||
>{{station.stationName}}</td>
|
||||
|
||||
<td class="item-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="item-station-status">
|
||||
<span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
|
||||
</td>
|
||||
|
||||
<td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
|
||||
<td class="item-dispatcher-exp">
|
||||
<span
|
||||
v-if="station.online"
|
||||
:style="calculateExpStyle(station.dispatcherExp)"
|
||||
>{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
|
||||
</td>
|
||||
<td
|
||||
class="item-users"
|
||||
>{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
|
||||
<td class="item-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="item-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>
|
||||
</td>
|
||||
|
||||
<td class="item-tracks oneway">
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</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";
|
||||
|
||||
const ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
const descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
@Component({})
|
||||
export default class Table extends styleMixin {
|
||||
@Prop() readonly stations!: Station[];
|
||||
@Prop() readonly setFocusedStation!: () => void;
|
||||
|
||||
icons: { ascSVG; descSVG } = { ascSVG, descSVG };
|
||||
sorterActive: { index: number; type: number } = { index: 0, type: 1 };
|
||||
|
||||
headTitles: string[][] = [
|
||||
["Stacja"],
|
||||
["Wymagany poz.", "dyżurnego"],
|
||||
["Status"],
|
||||
["Dyżurny"],
|
||||
["Poziom", "dyżurnego"],
|
||||
["Maszyniści"],
|
||||
["Informacje", "ogólne"],
|
||||
["Szlaki", "dwutorowe"],
|
||||
["Szlaki", "jednotorowe"],
|
||||
];
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 5) return;
|
||||
|
||||
if (index == this.sorterActive.index)
|
||||
this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1;
|
||||
else this.sorterActive.type = 1;
|
||||
|
||||
this.sorterActive.index = index;
|
||||
}
|
||||
|
||||
get computedStations() {
|
||||
const type: number = this.sorterActive.type;
|
||||
|
||||
const sortByName = (a: Station, b: Station) => {
|
||||
if (a.stationName >= b.stationName) return type;
|
||||
return -type;
|
||||
};
|
||||
|
||||
if (this.sorterActive.index == 0)
|
||||
return this.stations.sort((a, b) => {
|
||||
if (a.stationName >= b.stationName) return type;
|
||||
return -type;
|
||||
});
|
||||
|
||||
let currentSort;
|
||||
|
||||
switch (this.sorterActive.index) {
|
||||
case 0:
|
||||
default:
|
||||
return (currentSort = sortByName);
|
||||
break;
|
||||
|
||||
case 1:
|
||||
currentSort = (a, b) => {
|
||||
if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return type;
|
||||
if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -type;
|
||||
|
||||
return sortByName(a, b);
|
||||
};
|
||||
break;
|
||||
|
||||
case 2:
|
||||
currentSort = (a, b) => {
|
||||
if (a.statusTimestamp > b.statusTimestamp) return type;
|
||||
if (a.statusTimestamp < b.statusTimestamp) return -type;
|
||||
|
||||
if (a.occupiedTo > b.occupiedTo) return type;
|
||||
if (a.occupiedTo < b.occupiedTo) return -type;
|
||||
|
||||
return sortByName(a, b);
|
||||
};
|
||||
break;
|
||||
|
||||
case 3:
|
||||
currentSort = (a, b) => {
|
||||
if (a.dispatcherName > b.dispatcherName) return type;
|
||||
if (a.dispatcherName < b.dispatcherName) return -type;
|
||||
|
||||
return sortByName(a, b);
|
||||
};
|
||||
break;
|
||||
|
||||
case 4:
|
||||
currentSort = (a, b) => {
|
||||
if (a.dispatcherExp > b.dispatcherExp) return type;
|
||||
if (a.dispatcherExp < b.dispatcherExp) return -type;
|
||||
|
||||
return sortByName(a, b);
|
||||
};
|
||||
break;
|
||||
|
||||
case 5:
|
||||
currentSort = (a, b) => {
|
||||
if (a.currentUsers > b.currentUsers) return type;
|
||||
if (a.currentUsers < b.currentUsers) return -type;
|
||||
|
||||
return sortByName(a, b);
|
||||
};
|
||||
break;
|
||||
|
||||
case 6:
|
||||
currentSort = (a, b) => {
|
||||
if (a.currentUsers > b.currentUsers) return type;
|
||||
if (a.currentUsers < b.currentUsers) return -type;
|
||||
|
||||
if (a.maxUsers > b.maxUsers) return type;
|
||||
if (a.maxUsers < b.maxUsers) return -type;
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
return this.stations.sort(currentSort);
|
||||
}
|
||||
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/global.scss";
|
||||
|
||||
.table {
|
||||
&-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
|
||||
font-size: calc(0.6rem + 0.3vw);
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
&-head th {
|
||||
padding: 0.3rem;
|
||||
background-color: #444;
|
||||
min-width: 120px;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
background-color: #5c5b5b;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: rgb(102, 101, 101);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #818181;
|
||||
}
|
||||
|
||||
& > td {
|
||||
padding: 0.3rem 1rem;
|
||||
margin: 0 3rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include smallScreen() {
|
||||
margin: 0;
|
||||
padding: 0.1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&-station-level,
|
||||
&-dispatcher-exp {
|
||||
span {
|
||||
display: block;
|
||||
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-station-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="app-bar">
|
||||
<Options />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import Options from "@/components/ui/Options.vue";
|
||||
|
||||
@Component({
|
||||
components: { Options },
|
||||
})
|
||||
export default class AppBar extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.app-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
font-size: 0.35em;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.app-bar {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,325 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-exit" @click="closeCard">
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
|
||||
</div>
|
||||
|
||||
<div class="card-upper">
|
||||
<div class="station-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="station-hash">{{stationInfo.stationHash}}</div>
|
||||
|
||||
<div class="station-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"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-if="stationInfo.reqLevel"
|
||||
:title="'Wymagany poziom dyżurnego: ' + stationInfo.reqLevel"
|
||||
>{{(parseInt(stationInfo.reqLevel) < 2) ? "L" : stationInfo.reqLevel}}</span>
|
||||
</div>
|
||||
|
||||
<div class="station-info"></div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="dispatcher">
|
||||
<div class="dispatcher-exp">{{stationInfo.dispatcherExp}}</div>
|
||||
<div class="dispatcher-name">
|
||||
<a
|
||||
:href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{stationInfo.dispatcherName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rating">
|
||||
<div class="rating-content">
|
||||
<img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
|
||||
{{stationInfo.dispatcherRate}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="occupation">
|
||||
<div class="occupation-title text--title">SCENERIA ZAJĘTA DO</div>
|
||||
<div class="occupation-content text--content">{{stationInfo.occupiedTo}}</div>
|
||||
</div>
|
||||
|
||||
<div class="spawns">
|
||||
<div class="spawns-title text--title">OTWARTE SPAWNY</div>
|
||||
<div class="spawns-content text--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">
|
||||
<div class="users-title text--title">GRACZE NA STACJI</div>
|
||||
<div class="users-content text--content">
|
||||
<div
|
||||
class="user"
|
||||
v-for="train in stationInfo.trains"
|
||||
:key="train.trainNo + train.driverName"
|
||||
>
|
||||
<a
|
||||
:href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>{{train.trainNo}}</span>
|
||||
|
|
||||
<span>{{train.driverName}}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="user borderless"
|
||||
v-if="!stationInfo.trains || stationInfo.trains.length == 0"
|
||||
>BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
export default Vue.extend({
|
||||
name: "Card",
|
||||
props: ["stationInfo", "closeCard"],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.text {
|
||||
&--title {
|
||||
color: #fdc62f;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&--content {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.station {
|
||||
&-name {
|
||||
color: #2f2f2f;
|
||||
font-size: 2.2em;
|
||||
font-weight: 600;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #ffbb00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-hash {
|
||||
color: #e7e7e7;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
&-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
img,
|
||||
span {
|
||||
margin: 0 0.5em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: #898989;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dispatcher {
|
||||
grid-area: dispatcher;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include smallScreen() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-exp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
|
||||
font-size: 1.3em;
|
||||
border: 2px solid #ffbb00;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
|
||||
margin-left: 0.6rem;
|
||||
|
||||
@include smallScreen() {
|
||||
margin-left: 0;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
grid-area: rating;
|
||||
color: #00e000;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
font-size: 1.2em;
|
||||
|
||||
img {
|
||||
margin-right: 0.5rem;
|
||||
width: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.occupation {
|
||||
grid-area: hours;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
&-content {
|
||||
color: white;
|
||||
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
grid-area: users;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
& > .user {
|
||||
padding: 0.3rem;
|
||||
margin: 0.3rem;
|
||||
border: 1px solid white;
|
||||
|
||||
&.borderless {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spawns {
|
||||
grid-area: spawns;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
& > .spawn {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.region {
|
||||
grid-area: reg;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user