mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Zmiany wyglądu i działania filtra stacji, poprawki
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="60" height="60" fill="#898989"/>
|
||||
<rect x="8" y="19" width="44" height="22" fill="#FF0F0F"/>
|
||||
<rect x="8" y="19" width="44" height="11" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -7,7 +7,8 @@
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
>{{ stationInfo.stationName }}</a
|
||||
>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
@@ -33,11 +34,15 @@
|
||||
<span class="schedules">
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
<span v-if="stationInfo.scheduledTrains">
|
||||
<span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
|
||||
<span style="color: #eee">{{
|
||||
stationInfo.scheduledTrains.length
|
||||
}}</span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
<span style="color: #bbb">{{
|
||||
stationInfo.scheduledTrains.filter(
|
||||
(train) => train.stopInfo.confirmed
|
||||
).length
|
||||
}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -84,22 +89,39 @@
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.stationLines && stationInfo.stationLines != ''"
|
||||
:src="require('@/assets/icon-real.svg')"
|
||||
alt="real"
|
||||
title="Sceneria realna / półrealna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info-dispatcher">
|
||||
<div>
|
||||
<span
|
||||
class="level"
|
||||
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
|
||||
>{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
|
||||
:style="
|
||||
calculateExpStyle(
|
||||
stationInfo.dispatcherExp,
|
||||
stationInfo.dispatcherIsSupporter
|
||||
)
|
||||
"
|
||||
>
|
||||
{{
|
||||
stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"
|
||||
}}
|
||||
</span>
|
||||
|
||||
<span class="name">{{ stationInfo.dispatcherName }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="status"
|
||||
class="status-badge"
|
||||
:class="statusClasses(stationInfo.occupiedTo)"
|
||||
>{{ stationInfo.occupiedTo }}</span>
|
||||
>{{ stationInfo.occupiedTo }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-lists">
|
||||
@@ -123,7 +145,9 @@
|
||||
<div
|
||||
class="user offline"
|
||||
v-if="!computedStationTrains || computedStationTrains.length == 0"
|
||||
>BRAK AKTYWNYCH GRACZY</div>
|
||||
>
|
||||
BRAK AKTYWNYCH GRACZY
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spawn-list">
|
||||
@@ -144,7 +168,8 @@
|
||||
<span
|
||||
class="spawn none"
|
||||
v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
|
||||
>BRAK OTWARTYCH SPAWNÓW</span>
|
||||
>BRAK OTWARTYCH SPAWNÓW</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -264,6 +289,9 @@ h3 {
|
||||
img {
|
||||
width: 2.5em;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
border: 2px solid #4e4e4e;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="filter-card">
|
||||
<section class="card">
|
||||
<div class="card-exit" @click="exit">
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
|
||||
<!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
|
||||
</div>
|
||||
|
||||
<div class="card-title flex">FILTRUJ STACJE</div>
|
||||
@@ -21,7 +21,8 @@
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ option.content }}</span>
|
||||
>{{ option.content }}</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,10 +47,12 @@
|
||||
</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>
|
||||
<div class="option">
|
||||
<label>
|
||||
<input type="checkbox" v-model="saveOptions" @change="saveFilters" />
|
||||
<span class="save" :class="{ checked: saveOptions }">
|
||||
ZAPISZ FILTRY
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,9 +109,6 @@ export default class FilterCard extends Vue {
|
||||
saveFilters(): void {
|
||||
if (!this.saveOptions) {
|
||||
StorageManager.unregisterStorage(this.STORAGE_KEY);
|
||||
|
||||
console.log(this.saveOptions);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -145,52 +145,31 @@ export default class FilterCard extends Vue {
|
||||
|
||||
<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: 1.5em;
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
@import "../../styles/card";
|
||||
|
||||
.card {
|
||||
font-size: 1.5em;
|
||||
|
||||
&-title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
color: $accentCol;
|
||||
|
||||
margin: 0.5em 0;
|
||||
margin-top: 1em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
|
||||
padding: 0 1.5em;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 0.5em;
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-sliders {
|
||||
@@ -202,6 +181,7 @@ export default class FilterCard extends Vue {
|
||||
|
||||
button {
|
||||
margin: 0 0.3em;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -210,8 +190,8 @@ export default class FilterCard extends Vue {
|
||||
justify-content: center;
|
||||
|
||||
.option {
|
||||
width: 30%;
|
||||
font-size: 0.9em;
|
||||
width: 7em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -223,13 +203,11 @@ export default class FilterCard extends Vue {
|
||||
}
|
||||
|
||||
.option {
|
||||
margin: 0.3em;
|
||||
|
||||
&-input {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-content {
|
||||
span {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
@@ -239,21 +217,16 @@ export default class FilterCard extends Vue {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.6em 0.5em;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.45em 0.4em;
|
||||
|
||||
font-size: 0.65em;
|
||||
|
||||
background-color: #333;
|
||||
font-size: 0.8em;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&.save {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:not(.checked) {
|
||||
background-color: #585858;
|
||||
@@ -313,7 +286,7 @@ export default class FilterCard extends Vue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: inherit;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -321,8 +294,7 @@ export default class FilterCard extends Vue {
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
|
||||
padding: 0.5em;
|
||||
margin: 1em 0;
|
||||
|
||||
&-value {
|
||||
display: flex;
|
||||
@@ -333,7 +305,6 @@ export default class FilterCard extends Vue {
|
||||
margin-right: 0.3em;
|
||||
padding: 0.1em 0.2em;
|
||||
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
|
||||
border-radius: 0.2em;
|
||||
@@ -343,7 +314,7 @@ export default class FilterCard extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 0.75em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&-input {
|
||||
|
||||
@@ -4,7 +4,11 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
|
||||
<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')">
|
||||
@@ -38,35 +42,51 @@
|
||||
<td
|
||||
class="station_name"
|
||||
:class="{
|
||||
'default-station': station.default,
|
||||
online: station.online,
|
||||
'station-unavailable': station.unavailable,
|
||||
}"
|
||||
>{{ station.stationName }}</td>
|
||||
'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>
|
||||
>
|
||||
{{
|
||||
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="status-badge"
|
||||
:class="statusClasses(station.occupiedTo)"
|
||||
>{{ station.occupiedTo}}</span>
|
||||
>{{ station.occupiedTo }}</span
|
||||
>
|
||||
</td>
|
||||
|
||||
<td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</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>
|
||||
>{{
|
||||
2 > station.dispatcherExp ? "L" : station.dispatcherExp
|
||||
}}</span
|
||||
>
|
||||
</td>
|
||||
|
||||
<td class="station_tracks twoway">
|
||||
@@ -74,13 +94,17 @@
|
||||
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>
|
||||
>
|
||||
{{ 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>
|
||||
>
|
||||
{{ station.routes.twoWay.noCatenary }}
|
||||
</span>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
@@ -88,13 +112,17 @@
|
||||
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>
|
||||
>
|
||||
{{ 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>
|
||||
>
|
||||
{{ station.routes.oneWay.noCatenary }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="station_info">
|
||||
@@ -131,7 +159,7 @@
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="station_users" :class="{inactive: !station.online }">
|
||||
<td class="station_users" :class="{ inactive: !station.online }">
|
||||
<span>
|
||||
<span class="highlight">{{ station.currentUsers }}</span>
|
||||
/
|
||||
@@ -139,16 +167,23 @@
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="station_spawns" :class="{inactive: !station.online }">
|
||||
<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>
|
||||
<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>
|
||||
<span style="color: #bbb">{{
|
||||
station.scheduledTrains.filter(
|
||||
(train) => train.stopInfo.confirmed
|
||||
).length
|
||||
}}</span>
|
||||
</td>
|
||||
<!--
|
||||
<td class="station_stats">
|
||||
@@ -159,7 +194,9 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
|
||||
<div class="no-stations" v-if="stations.length == 0">
|
||||
Ups! Brak stacji do wyświetlenia!
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
+36
-15
@@ -1,7 +1,9 @@
|
||||
{
|
||||
"options": [{
|
||||
"id": "is-default",
|
||||
"options": [
|
||||
{
|
||||
"id": "default",
|
||||
"name": "default",
|
||||
"iconName": "td2",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -10,22 +12,35 @@
|
||||
{
|
||||
"id": "not-default",
|
||||
"name": "notDefault",
|
||||
"iconName": "",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "POZA PACZKĄ"
|
||||
},
|
||||
{
|
||||
"id": "non-public",
|
||||
"name": "nonPublic",
|
||||
"id": "real",
|
||||
"name": "real",
|
||||
"iconName": "lock",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "NIEPUBLICZNA"
|
||||
"content": "REALNA"
|
||||
},
|
||||
{
|
||||
"id": "fictional",
|
||||
"name": "fictional",
|
||||
"iconName": "user",
|
||||
"section": "access",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "FIKCYJNA"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "SPK",
|
||||
"name": "SPK",
|
||||
"iconName": "SPK",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -34,6 +49,7 @@
|
||||
{
|
||||
"id": "SCS",
|
||||
"name": "SCS",
|
||||
"iconName": "SCS",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -42,6 +58,7 @@
|
||||
{
|
||||
"id": "by-hand",
|
||||
"name": "ręczne",
|
||||
"iconName": "ręczne",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -50,14 +67,17 @@
|
||||
{
|
||||
"id": "levers",
|
||||
"name": "mechaniczne",
|
||||
"iconName": "mechaniczne",
|
||||
"section": "control",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "MECHANICZNE"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "modern",
|
||||
"name": "współczesna",
|
||||
"iconName": "współczesna",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -66,6 +86,7 @@
|
||||
{
|
||||
"id": "semaphore",
|
||||
"name": "kształtowa",
|
||||
"iconName": "kształtowa",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -74,6 +95,7 @@
|
||||
{
|
||||
"id": "mixed",
|
||||
"name": "mieszana",
|
||||
"iconName": "mieszana",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
@@ -82,14 +104,18 @@
|
||||
{
|
||||
"id": "historic",
|
||||
"name": "historyczna",
|
||||
"iconName": "historyczna",
|
||||
"section": "signals",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "HISTORYCZNA"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "free",
|
||||
"name": "free",
|
||||
"iconName": "",
|
||||
|
||||
"section": "status",
|
||||
"value": false,
|
||||
"defaultValue": false,
|
||||
@@ -98,21 +124,16 @@
|
||||
{
|
||||
"id": "occupied",
|
||||
"name": "occupied",
|
||||
"iconName": "",
|
||||
|
||||
"section": "status",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "ZAJĘTA"
|
||||
},
|
||||
{
|
||||
"id": "ending",
|
||||
"name": "ending",
|
||||
"section": "status",
|
||||
"value": true,
|
||||
"defaultValue": true,
|
||||
"content": "KOŃCZY"
|
||||
}
|
||||
],
|
||||
"sliders": [{
|
||||
"sliders": [
|
||||
{
|
||||
"id": "min-level",
|
||||
"name": "minLevel",
|
||||
"minRange": 0,
|
||||
@@ -158,4 +179,4 @@
|
||||
"content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,12 @@ import Component from 'vue-class-component';
|
||||
@Component
|
||||
export default class styleMixin extends Vue {
|
||||
calculateExpStyle(exp: string | number, isSupporter: boolean = false): string {
|
||||
const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100}, 65%, 50%)`) : '#888';
|
||||
const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100}, 85%, 50%)`) : '#666';
|
||||
|
||||
const fontColor = exp > 15 ? 'white' : 'black';
|
||||
const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor}` : '';
|
||||
const fontColor = exp > 15 || exp == -1 ? 'white' : 'black';
|
||||
const boxShadow = isSupporter ? `0 0 10px 2px ${bgColor}` : '';
|
||||
|
||||
return `backgroundColor: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
|
||||
return `backgroundColor: ${bgColor}; color: ${fontColor}; box-shadow: ${boxShadow};`;
|
||||
}
|
||||
|
||||
statusClasses(occupiedTo: string) {
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
export default interface Filter {
|
||||
"default": false,
|
||||
"notDefault": false,
|
||||
"nonPublic": false,
|
||||
"SPK": false,
|
||||
"SCS": false,
|
||||
"ręczne": false,
|
||||
"mechaniczne": false,
|
||||
"współczesna": false,
|
||||
"kształtowa": false,
|
||||
"historyczna": false,
|
||||
"mieszana": false,
|
||||
"minLevel": 0,
|
||||
"minOneWayCatenary": 0,
|
||||
"minOneWay": 0,
|
||||
"minTwoWayCatenary": 0,
|
||||
"minTwoWay": 0,
|
||||
"no-1track": false,
|
||||
"no-2track": false,
|
||||
"free": true,
|
||||
"occupied": false,
|
||||
"ending": false
|
||||
}
|
||||
default: boolean;
|
||||
notDefault: boolean;
|
||||
real: boolean;
|
||||
fictional: boolean;
|
||||
SPK: boolean;
|
||||
SCS: boolean;
|
||||
ręczne: boolean;
|
||||
mechaniczne: boolean;
|
||||
współczesna: boolean;
|
||||
kształtowa: boolean;
|
||||
historyczna: boolean;
|
||||
mieszana: boolean;
|
||||
minLevel: number;
|
||||
minOneWayCatenary: number;
|
||||
minOneWay: number;
|
||||
minTwoWayCatenary: number;
|
||||
minTwoWay: number;
|
||||
'no-1track': boolean;
|
||||
'no-2track': boolean;
|
||||
free: boolean;
|
||||
occupied: boolean;
|
||||
ending: boolean;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default interface Station {
|
||||
stationProject: string;
|
||||
|
||||
reqLevel: string;
|
||||
supportersOnly: string;
|
||||
supportersOnly: boolean;
|
||||
|
||||
SBL: string;
|
||||
TWB: string;
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import Station from '@/scripts/interfaces/Station';
|
||||
import Filter from '@/scripts/interfaces/Filter';
|
||||
|
||||
export default class StationFilterManager {
|
||||
private filterInitStates = {
|
||||
private filterInitStates: Filter = {
|
||||
default: false,
|
||||
notDefault: false,
|
||||
nonPublic: false,
|
||||
real: false,
|
||||
fictional: false,
|
||||
SPK: false,
|
||||
SCS: false,
|
||||
ręczne: false,
|
||||
@@ -25,11 +27,11 @@ export default class StationFilterManager {
|
||||
ending: false,
|
||||
};
|
||||
|
||||
private filters = { ...this.filterInitStates };
|
||||
private filters: Filter = { ...this.filterInitStates };
|
||||
|
||||
private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
|
||||
|
||||
filteredStationList(stationList: Station[]): Station[] {
|
||||
private filteredStationList(stationList: Station[]): Station[] {
|
||||
return stationList
|
||||
.filter(station => {
|
||||
if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
|
||||
@@ -42,6 +44,9 @@ export default class StationFilterManager {
|
||||
if (station.default && this.filters['default']) return false;
|
||||
if (!station.default && this.filters['notDefault']) return false;
|
||||
|
||||
if (this.filters['real'] && station.stationLines != '') return false;
|
||||
if (this.filters['fictional'] && station.stationLines == '') return false;
|
||||
|
||||
if (station.reqLevel == '-1') return true;
|
||||
if (parseInt(station.reqLevel) < this.filters['minLevel']) return false;
|
||||
|
||||
|
||||
+76
-69
@@ -266,7 +266,9 @@ export default class Store extends VuexModule {
|
||||
const statusLabel = getStatusLabel(stationStatus);
|
||||
const statusTimestamp = getStatusTimestamp(stationStatus);
|
||||
|
||||
const stationTrains = onlineTrainsData.filter(train => train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName);
|
||||
const stationTrains = onlineTrainsData.filter(
|
||||
train => train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName
|
||||
);
|
||||
|
||||
acc.push({
|
||||
stationName: station.stationName,
|
||||
@@ -363,7 +365,7 @@ export default class Store extends VuexModule {
|
||||
stationLines: station[2] as string,
|
||||
stationProject: station[3] as string,
|
||||
reqLevel: station[4] as string,
|
||||
supportersOnly: station[5] as string,
|
||||
supportersOnly: station[5] == 'TAK',
|
||||
signalType: station[6] as string,
|
||||
controlType: station[7] as string,
|
||||
SBL: station[8] as string,
|
||||
@@ -522,86 +524,89 @@ export default class Store extends VuexModule {
|
||||
private updateTimetableData(timetableList: ITimetableData[]) {
|
||||
this.stationList = this.stationList.map(station => {
|
||||
const stationName = station.stationName.toLowerCase();
|
||||
const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: ITimetableData, index) => {
|
||||
if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
|
||||
const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce(
|
||||
(acc: Station['scheduledTrains'], timetableData: ITimetableData, index) => {
|
||||
if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
|
||||
|
||||
const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
|
||||
const stopName = stop.stopNameRAW.toLowerCase();
|
||||
const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
|
||||
const stopName = stop.stopNameRAW.toLowerCase();
|
||||
|
||||
if (stationName === stopName) return true;
|
||||
if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
|
||||
if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
|
||||
if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName.includes(stopName.split(', podg.')[0])) return true;
|
||||
if (stationName === stopName) return true;
|
||||
if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
|
||||
if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
|
||||
if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName.includes(stopName.split(', podg.')[0])) return true;
|
||||
|
||||
if (station.stops && station.stops.includes(stop.stopNameRAW)) return true;
|
||||
if (station.stops && station.stops.includes(stop.stopNameRAW)) return true;
|
||||
|
||||
return false;
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
if (stopInfoIndex == -1) return acc;
|
||||
if (stopInfoIndex == -1) return acc;
|
||||
|
||||
const stopInfo = timetableData.followingStops[stopInfoIndex];
|
||||
const stopInfo = timetableData.followingStops[stopInfoIndex];
|
||||
|
||||
let stopStatus = '';
|
||||
let stopLabel = '';
|
||||
let stopStatusID = 0;
|
||||
let nearestStop = '';
|
||||
let stopStatus = '';
|
||||
let stopLabel = '';
|
||||
let stopStatusID = 0;
|
||||
let nearestStop = '';
|
||||
|
||||
if (stopInfo.terminatesHere && stopInfo.confirmed) {
|
||||
stopStatus = 'terminated';
|
||||
stopLabel = 'Skończył bieg';
|
||||
stopStatusID = 5;
|
||||
} else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName == station.stationName) {
|
||||
stopStatus = 'departed';
|
||||
stopLabel = 'Odprawiony';
|
||||
stopStatusID = 2;
|
||||
} else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName != station.stationName) {
|
||||
stopStatus = 'departed-away';
|
||||
stopLabel = 'Odjechał';
|
||||
stopStatusID = 4;
|
||||
} else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) {
|
||||
stopStatus = 'online';
|
||||
stopLabel = 'Na stacji';
|
||||
stopStatusID = 0;
|
||||
} else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) {
|
||||
stopStatus = 'stopped';
|
||||
stopLabel = 'Postój';
|
||||
stopStatusID = 1;
|
||||
} else if (timetableData.currentStationName != station.stationName) {
|
||||
stopStatus = 'arriving';
|
||||
stopLabel = 'W drodze';
|
||||
stopStatusID = 3;
|
||||
}
|
||||
if (stopInfo.terminatesHere && stopInfo.confirmed) {
|
||||
stopStatus = 'terminated';
|
||||
stopLabel = 'Skończył bieg';
|
||||
stopStatusID = 5;
|
||||
} else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName == station.stationName) {
|
||||
stopStatus = 'departed';
|
||||
stopLabel = 'Odprawiony';
|
||||
stopStatusID = 2;
|
||||
} else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName != station.stationName) {
|
||||
stopStatus = 'departed-away';
|
||||
stopLabel = 'Odjechał';
|
||||
stopStatusID = 4;
|
||||
} else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) {
|
||||
stopStatus = 'online';
|
||||
stopLabel = 'Na stacji';
|
||||
stopStatusID = 0;
|
||||
} else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) {
|
||||
stopStatus = 'stopped';
|
||||
stopLabel = 'Postój';
|
||||
stopStatusID = 1;
|
||||
} else if (timetableData.currentStationName != station.stationName) {
|
||||
stopStatus = 'arriving';
|
||||
stopLabel = 'W drodze';
|
||||
stopStatusID = 3;
|
||||
}
|
||||
|
||||
if (stopInfoIndex < timetableData.followingStops.length - 2) {
|
||||
for (let i = stopInfoIndex + 1; i < timetableData.followingStops.length - 1; i++) {
|
||||
const stop = timetableData.followingStops[i];
|
||||
if (stopInfoIndex < timetableData.followingStops.length - 2) {
|
||||
for (let i = stopInfoIndex + 1; i < timetableData.followingStops.length - 1; i++) {
|
||||
const stop = timetableData.followingStops[i];
|
||||
|
||||
if (stop.mainStop && stop.stopType.includes('ph')) {
|
||||
nearestStop = stop.stopNameRAW;
|
||||
break;
|
||||
if (stop.mainStop && stop.stopType.includes('ph')) {
|
||||
nearestStop = stop.stopNameRAW;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
acc.push({
|
||||
trainNo: timetableData.trainNo,
|
||||
driverName: timetableData.driverName,
|
||||
driverId: timetableData.driverId,
|
||||
currentStationName: timetableData.currentStationName,
|
||||
currentStationHash: timetableData.currentStationHash,
|
||||
category: timetableData.category,
|
||||
beginsAt: timetableData.followingStops[0].stopNameRAW,
|
||||
terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
|
||||
nearestStop,
|
||||
stopInfo,
|
||||
stopLabel,
|
||||
stopStatus,
|
||||
stopStatusID,
|
||||
});
|
||||
acc.push({
|
||||
trainNo: timetableData.trainNo,
|
||||
driverName: timetableData.driverName,
|
||||
driverId: timetableData.driverId,
|
||||
currentStationName: timetableData.currentStationName,
|
||||
currentStationHash: timetableData.currentStationHash,
|
||||
category: timetableData.category,
|
||||
beginsAt: timetableData.followingStops[0].stopNameRAW,
|
||||
terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
|
||||
nearestStop,
|
||||
stopInfo,
|
||||
stopLabel,
|
||||
stopStatus,
|
||||
stopStatusID,
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
return acc;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
if (station.checkpoints) {
|
||||
station.checkpoints.forEach(cp => (cp.scheduledTrains.length = 0));
|
||||
@@ -673,7 +678,9 @@ export default class Store extends VuexModule {
|
||||
const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
|
||||
|
||||
if (timetableData) {
|
||||
const trainData = this.stationList.find(station => station.stationName === train.currentStationName)?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
|
||||
const trainData = this.stationList
|
||||
.find(station => station.stationName === train.currentStationName)
|
||||
?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
|
||||
|
||||
acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || '', stopLabel: trainData?.stopLabel || '' });
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
@import './variables.scss';
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 4;
|
||||
|
||||
overflow: auto;
|
||||
background: $primaryCol;
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
width: 75%;
|
||||
max-width: 650px;
|
||||
max-height: 95%;
|
||||
|
||||
padding: 0.5em 1em;
|
||||
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0.3em 0em;
|
||||
|
||||
img {
|
||||
width: 1.6em;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
+13
-55
@@ -1,3 +1,16 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
// font-family: "Open Sans", sans-serif;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -67,18 +80,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
// font-family: "Open Sans", sans-serif;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
@@ -119,49 +120,6 @@ input {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 4;
|
||||
|
||||
overflow: auto;
|
||||
background: #262a2e;
|
||||
|
||||
box-shadow: 0 0 15px 5px #474747;
|
||||
|
||||
width: 75%;
|
||||
max-width: 750px;
|
||||
max-height: 95%;
|
||||
|
||||
// font-size: calc(0.6rem + 0.5vw);
|
||||
font-size: calc(0.45rem + 0.35vw);
|
||||
|
||||
@include smallScreen {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0.3em 0em;
|
||||
|
||||
img {
|
||||
width: 1.6em;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $accentCol;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
$free: #8a8a8a;
|
||||
$ending: #e6c300;
|
||||
$no-limit: #0077ae;
|
||||
$no-limit: #117fc9;
|
||||
$unav: #ff3d5d;
|
||||
$brb: #e6a100;
|
||||
$no-space: #222;
|
||||
$taken: #09a116;
|
||||
|
||||
.status {
|
||||
.status-badge {
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 0.9em;
|
||||
padding: 0.2em 0.45em;
|
||||
padding: 0.2em 0.6em;
|
||||
|
||||
background-color: $taken;
|
||||
|
||||
@@ -34,7 +34,7 @@ $taken: #09a116;
|
||||
&.not-signed,
|
||||
&.unavailable {
|
||||
background-color: $unav;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.brb {
|
||||
|
||||
Reference in New Issue
Block a user