Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lekkie zmiany w wyglądzie strony

Browse Source
This commit is contained in:
Spythere
2020-11-03 22:34:22 +01:00
parent 853dc8e7cf
commit fe3a15c452
11 changed files with 606 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+13 -20
View File
@@ -13,16 +13,20 @@
<Clock />
<div class="counter">
<img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
<span>{{data.stationCount}}</span>
<span>{{ data.stationCount }}</span>
<span>{{data.trainCount}}</span>
<span>{{ data.trainCount }}</span>
<img src="@/assets/icon-train.svg" alt="icon train" />
</div>
</span>
<span class="header-links">
<router-link class="route" active-class="route-active" to="/" exact>SCENERIE</router-link>/
<router-link class="route" active-class="route-active" to="/trains">POCIĄGI</router-link>
<router-link class="route" active-class="route-active" to="/" exact
>SCENERIE</router-link
>/
<router-link class="route" active-class="route-active" to="/trains"
>POCIĄGI</router-link
>
</span>
</div>
</header>
@@ -41,7 +45,9 @@
<transition name="message-anim" mode="out-in">
<span :key="data.dataConnectionStatus">
<div class="message loading" v-if="data.dataConnectionStatus == 0">Pobieranie danych...</div>
<div class="message loading" v-if="data.dataConnectionStatus == 0">
Pobieranie danych...
</div>
<div class="message error" v-if="data.dataConnectionStatus == 1">
<img :src="ErrorIcon" alt="Error" />
@@ -68,24 +74,10 @@ export default class App extends Vue {
ErrorIcon = require("@/assets/icon-error.svg");
@Action("synchronizeData") synchronizeData;
@Getter("getAllData") data;
// @Getter("getOnlineInfo") onlineInfo;
// @Getter("getConnectionState") connState;
// @Action("initStations") initStations;
// @Action("fetchOnlineStations") fetchStations;
// @Action("fetchTrainsData") fetchTrainsData;
mounted() {
this.synchronizeData();
// this.initStations();
// this.fetchTrainsData();
// setInterval(this.fetchStations, 15000);
// setInterval(this.fetchTrainsData, 45000);
}
}
</script>
@@ -94,6 +86,7 @@ export default class App extends Vue {
@import "./styles/responsive.scss";
@import "./styles/variables.scss";
@import "./styles/global.scss";
@import "./styles/scenery_status.scss";
.view-anim {
&-enter {
@@ -183,7 +176,7 @@ export default class App extends Vue {
}
.header {
background: #333;
background: $primaryCol;
padding: 0.15em;
border-radius: 0 0 0.7em 0.7em;
src/components/StationsView/StationCard.vue
+49 -27
View File
@@ -5,18 +5,21 @@
class="schedule-icon"
:src="require('@/assets/icon-clock.svg')"
alt="schedule-icon"
@click="() => cardMode = cardMode == 0 ? 1 : 0"
@click="() => (cardMode = cardMode == 0 ? 1 : 0)"
/>
<img
:src="require('@/assets/icon-exit.svg')"
alt="exit-icon"
@click="exit"
/>
<img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
</div>
<div class="card-content" :class="{'offline': !stationInfo.online}">
<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-level flex" v-if="stationInfo.reqLevel > -1">{{
2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
}}</span>
<span class="main-general">
<div class="main-name">
<a
@@ -24,11 +27,12 @@
:href="stationInfo.stationURL"
target="_blank"
rel="noopener noreferrer"
>{{stationInfo.stationName}}</a>
>{{ stationInfo.stationName }}</a
>
<span v-else>{{stationInfo.stationName}}</span>
<span v-else>{{ stationInfo.stationName }}</span>
</div>
<div class="main-hash">{{stationInfo.stationHash}}</div>
<div class="main-hash">{{ stationInfo.stationHash }}</div>
</span>
</div>
</div>
@@ -80,30 +84,39 @@
<div class="dispatcher">
<div
class="dispatcher-level flex"
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
>{{stationInfo.online ? computedDispatcherExp : ""}}</div>
: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"
:href="
'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
"
target="_blank"
rel="noopener noreferrer"
>{{stationInfo.dispatcherName || "---"}}</a>
>{{ stationInfo.dispatcherName || "---" }}</a
>
</div>
<div class="dispatcher-rate">
<img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
<span>{{stationInfo.dispatcherRate}}</span>
<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>
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">{{
stationInfo.occupiedTo
}}</span>
</div>
<div class="spawns flex flex-column">
@@ -113,7 +126,8 @@
class="spawn"
v-for="(spawn, i) in stationInfo.spawnString"
:key="spawn + stationInfo.dispatcherName + i"
>{{spawn}}</span>
>{{ spawn }}</span
>
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
</div>
@@ -129,24 +143,31 @@
:key="train.trainNo + train.driverName"
>
<router-link
:to="{ name: 'TrainsView', params: { passedSearchedTrain: train.trainNo.toString()}}"
:to="{
name: 'TrainsView',
params: { passedSearchedTrain: train.trainNo.toString() },
}"
>
<span>{{train.trainNo}}</span>
<span>{{ train.trainNo }}</span>
|
<span>{{train.driverName}}</span>
<span>{{ train.driverName }}</span>
</router-link>
</div>
<span
class="user borderless"
v-if="!stationInfo.stationTrains || stationInfo.stationTrains.length == 0"
>BRAK</span>
v-if="
!stationInfo.stationTrains ||
stationInfo.stationTrains.length == 0
"
>BRAK</span
>
</div>
</div>
</div>
<StationTimetable
:class="{show: cardMode == 1}"
:class="{ show: cardMode == 1 }"
:scheduledTrains="computedScheduledTrains"
:stationName="stationInfo.stationName"
/>
@@ -213,9 +234,10 @@ export default class StationCard extends styleMixin {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "../../styles/variables.scss";
@import "../../styles/responsive.scss";
.title {
color: $accentCol;
font-weight: 600;
src/components/StationsView/StationTable.vue
+88 -32
View File
@@ -4,11 +4,15 @@
<table class="table">
<thead class="table-head">
<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>
<div>
<div>{{head[0]}}</div>
<div v-if="head.length > 1">{{head[1]}}</div>
<div>{{ head[0] }}</div>
<div v-if="head.length > 1">{{ head[1] }}</div>
</div>
<img
@@ -26,36 +30,64 @@
class="table-item"
v-for="(station, i) in stations"
:key="i + station.stationHash"
@click="() => { setFocusedStation(station.stationName) }"
@click="
() => {
setFocusedStation(station.stationName);
}
"
>
<td
class="item-station-name"
:class="{'default-station': station.default, 'online': station.online, 'station-unavailable': station.unavailable}"
>{{station.stationName}}</td>
:class="{
'default-station': station.default,
online: station.online,
'station-unavailable': station.unavailable,
}"
>
{{ 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>
>{{
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>
<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-name">
{{ station.online ? station.dispatcherName : "" }}
</td>
<td class="item-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="item-users">
{{
station.online
? station.currentUsers + "/" + station.maxUsers
: ""
}}
</td>
<td
class="item-users"
>{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
<td class="item-info">
<img
class="icon-info"
@@ -94,39 +126,59 @@
<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>
: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>
: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>
: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>
:title="
'Liczba niezelektryfikowanych szlaków jednotorowych: ' +
station.routes.oneWay.noCatenary
"
>{{ station.routes.oneWay.noCatenary }}</span
>
</td>
<td class="active-timetables">
<transition name="change-anim" mode="out-in">
<span :key="station.scheduledTrains.length">
<span v-if="station.scheduledTrains">
<span style="color:#eee">{{ station.scheduledTrains.length}}</span>
<span style="color: #eee">{{
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>
</span>
<span v-else>...</span>
@@ -136,7 +188,9 @@
</tr>
</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>
@@ -182,7 +236,8 @@ export default class StationTable extends styleMixin {
<style lang="scss" scoped>
@import "../../styles/responsive.scss";
@import "../../styles/variables.scss";
@import "../../styles/global.scss";
$rowCol: #4b4b4b;
.change-anim {
&-enter-active,
@@ -197,7 +252,7 @@ export default class StationTable extends styleMixin {
}
.station-table {
font-size: calc(0.5rem + 0.3vw);
font-size: calc(0.5rem + 0.35vw);
overflow: auto;
overflow-y: hidden;
}
@@ -220,6 +275,7 @@ export default class StationTable extends styleMixin {
&-wrapper {
overflow: auto;
}
white-space: nowrap;
border-collapse: collapse;
@@ -234,7 +290,7 @@ export default class StationTable extends styleMixin {
&-head th {
padding: 0.3rem;
background-color: #444;
background-color: $primaryCol;
min-width: 120px;
cursor: pointer;
@@ -254,16 +310,16 @@ export default class StationTable extends styleMixin {
}
&-item {
background-color: #5c5b5b;
background-color: $rowCol;
&:nth-child(even) {
background-color: rgb(102, 101, 101);
background-color: lighten($rowCol, 5);
color: white;
}
&:hover,
&:focus {
background-color: #818181;
background-color: lighten($rowCol, 20);
}
& > td {
src/components/StationsView/StationTimetable.vue
+43 -25
View File
@@ -2,32 +2,46 @@
<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 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">
<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()}}"
:to="{
name: 'TrainsView',
params: {
passedSearchedTrain: scheduledTrain.trainNo.toString(),
},
}"
>
<span>
<strong>{{scheduledTrain.category}}</strong>
{{scheduledTrain.trainNo}}
</span>
</router-link>|
<strong>{{ scheduledTrain.category }}</strong>
{{ scheduledTrain.trainNo }}
</span> </router-link
>|
<span>
<a
:href="'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId"
:href="
'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
"
target="_blank"
>{{ scheduledTrain.driverName }}</a>
>{{ scheduledTrain.driverName }}</a
>
</span>
</span>
<span class="general-status">
<span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
<span :class="scheduledTrain.stopStatus">{{
scheduledTrain.stopLabel
}}</span>
</span>
</span>
@@ -36,29 +50,33 @@
<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>
>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-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>
>KOŃCZY BIEG</span
>
<span class="departure-time" v-else
>{{ scheduledTrain.stopInfo.departureTimeString }} ({{
scheduledTrain.stopInfo.departureDelay
}})</span
>
</span>
</span>
</div>
src/components/TrainsView/TrainStats.vue
+31 -15
View File
@@ -5,7 +5,9 @@
class="stats-btn button"
@click="toggleStats"
v-if="trains.length > 0"
>STATYSTYKI RUCHU</button>
>
STATYSTYKI RUCHU
</button>
</div>
<transition name="stats-anim">
@@ -13,36 +15,47 @@
<h2 class="stats-header">STATYSTYKI RUCHU</h2>
<div class="stats-speed">
<div class="title stats-title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
<div class="stats-content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
<div class="title stats-title">
PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
</div>
<div class="stats-content">
{{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
</div>
</div>
<div class="stats-length">
<div class="title stats-title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
<div
class="stats-content"
>{{timetableStats.min}} | {{timetableStats.avg}} | {{timetableStats.max}}</div>
<div class="title stats-title">
DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
</div>
<div class="stats-content">
{{ timetableStats.min }} | {{ timetableStats.avg }} |
{{ timetableStats.max }}
</div>
</div>
<div class="stats-categories">
<div class="title stats-title">KATEGORIE RJ</div>
<div class="category-list">
<span class="category" v-for="[key, value] of categoryList" :key="key">
<span class="category-type">{{key}}</span>
<span class="category-count">{{value}}</span>
<span
class="category"
v-for="[key, value] of categoryList"
:key="key"
>
<span class="category-type">{{ key }}</span>
<span class="category-count">{{ value }}</span>
</span>
</div>
<div class="special-list">
<span class="special twr">
<span class="special-type">WYSOKIEGO RYZYKA</span>
<span class="special-count">{{specialTrainCount[0]}}</span>
<span class="special-count">{{ specialTrainCount[0] }}</span>
</span>
<span class="special skr">
<span class="special-type">PRZEKROCZONA SKRAJNIA</span>
<span class="special-count">{{specialTrainCount[1]}}</span>
<span class="special-count">{{ specialTrainCount[1] }}</span>
</span>
</div>
</div>
@@ -51,7 +64,9 @@
<div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
<div class="loco-list stats-content">
<div class="loco-item" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
<div class="loco-item" v-for="(loco, i) in locoList" :key="i">
{{ loco[0] }} | {{ loco[1] }}
</div>
</div>
</div>
</div>
@@ -222,7 +237,7 @@ export default class TrainStats extends Vue {
&-list {
display: flex;
flex-wrap: wrap;
font-size: 0.85em;
font-size: 0.95em;
}
margin-right: 0.4em;
@@ -235,7 +250,8 @@ export default class TrainStats extends Vue {
}
&-type {
background: #888;
background: rgb(88, 88, 88);
font-weight: 600;
}
&-count {
src/components/TrainsView/TrainTable.vue
+37 -23
View File
@@ -1,6 +1,8 @@
<template>
<div class="train-table">
<div class="no-trains" v-if="computedTrains.length == 0">Ups! Brak pociągów do wyświetlenia :/</div>
<div class="no-trains" v-if="computedTrains.length == 0">
Ups! Brak pociągów do wyświetlenia :/
</div>
<ul class="train-list">
<li
@@ -8,7 +10,11 @@
v-for="(train, i) in computedTrains"
:key="i"
:id="train.timetableData.timetableId"
@click="() => {changeFocusedTrain(train.trainNo);}"
@click="
() => {
changeFocusedTrain(train.trainNo);
}
"
>
<span class="train-info">
<span class="info">
@@ -17,43 +23,52 @@
<span>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
<span
style=" color: gold;"
>{{ train.timetableData.routeDistance }} km</span>
<span style="color: gold"
>{{ train.timetableData.routeDistance }} km</span
>
</span>
<span>
<span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
<span class="warning twr" v-if="train.timetableData.TWR"
>TWR</span
>
<span class="warning skr" v-if="train.timetableData.SKR"
>SKR</span
>
</span>
</div>
<div class="info-route">
<strong>
{{
train.timetableData.route.replace("|", " - ")
}}
{{ train.timetableData.route.replace("|", " - ") }}
</strong>
</div>
<div class="info-stations">
<span v-if="train.timetableData.followingStops.length > 2">
Przez:
<span v-html="generateStopList(train.timetableData.followingStops)"></span>
<span
v-html="
generateStopList(train.timetableData.followingStops)
"
></span>
</span>
</div>
</div>
<div class="info-bottom">
<span
class="info-online"
:class="{'online': train.online}"
>{{train.online ? "ONLINE" : "OFFLINE"}}</span>
<span class="info-online" :class="{ online: train.online }">{{
train.online ? "ONLINE" : "OFFLINE"
}}</span>
<button
class="button"
@click="changeScheduleShowState(train.timetableData.timetableId)"
>ROZKŁAD JAZDY</button>
@click="
changeScheduleShowState(train.timetableData.timetableId)
"
>
ROZKŁAD JAZDY
</button>
</div>
</span>
@@ -62,11 +77,10 @@
<a
:href="'https://td2.info.pl/profile/?u=' + train.driverId"
target="_blank"
>{{ train.driverName }}</a>
<span style="color: #bbb; margin-left: 1em;">
{{
train.locoType
}}
>{{ train.driverName }}</a
>
<span style="color: #bbb; margin-left: 1em">
{{ train.locoType }}
</span>
</span>
<span class="driver-loco">
@@ -211,7 +225,7 @@ export default class TrainTable extends Vue {
padding: 1rem;
margin-bottom: 1rem;
background-color: #383838;
background-color: $primaryCol;
cursor: pointer;
}
src/styles/global.scss
+8 -45
View File
@@ -61,50 +61,6 @@ input {
margin: 0;
}
.status {
border-radius: 1.3rem;
font-weight: 500;
font-size: 0.95em;
padding: 0.25em 0.4em;
background-color: #00be19;
&.free {
background-color: #8a8a8a;
font-size: 0.95em;
}
&.ending {
background-color: $accentCol;
color: black;
font-size: 0.9em;
}
&.no-limit {
background-color: #0077ae;
font-size: 0.85em;
}
&.not-signed,
&.unavailable {
background-color: $accent2Col;
font-size: 0.8em;
}
&.brb {
background-color: $accentCol;
color: black;
font-size: 0.95em;
}
&.no-space {
background-color: #222;
color: white;
font-size: 0.85em;
}
}
.default-station {
font-weight: bold;
color: $accentCol;
@@ -121,7 +77,6 @@ input {
z-index: 4;
overflow: auto;
// background: #474747;
background: #262a2e;
box-shadow: 0 0 15px 5px #474747;
@@ -155,6 +110,14 @@ input {
}
}
.title {
color: $accentCol;
font-weight: 600;
padding: .35em 0;
}
.button {
display: flex;
align-items: center;
src/styles/scenery_status.scss
+51
View File
@@ -0,0 +1,51 @@
$free: #8a8a8a;
$ending: #e6c300;
$no-limit: #0077ae;
$unav: #ff3d5d;
$brb: #e6a100;
$no-space: #222;
$taken: #09a116;
.status {
border-radius: 1rem;
font-weight: 500;
font-size: 0.9em;
padding: 0.2em 0.45em;
background-color: $taken;
&.free {
background-color: $free;
font-size: 0.95em;
}
&.ending {
background-color: $ending;
color: black;
font-size: 0.9em;
}
&.no-limit {
background-color: $no-limit;
font-size: 0.85em;
}
&.not-signed,
&.unavailable {
background-color: $unav;
font-size: 0.8em;
}
&.brb {
background-color: $brb;
color: black;
font-size: 0.95em;
}
&.no-space {
background-color: $no-space;
color: white;
font-size: 0.85em;
}
}
src/styles/variables.scss
+2 -2
View File
@@ -1,7 +1,7 @@
$primaryCol: #333;
$primaryCol: #2f2f2f;
$secondaryCol: #01e733;
$bgCol: #525252;
$bgCol: #505050;
$errorCol: #ff1919;
$warningCol: #ff975b;
src/views/StationsView.vue
+282 -271
View File
@@ -4,8 +4,15 @@
<div class="stations-body">
<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" />
<button
class="action-btn"
:class="{ open: filterCardOpen }"
@click="() => toggleCardsState('filter')"
>
<img
:src="require('@/assets/icon-filter2.svg')"
alt="icon-filter"
/>
<p>FILTRY</p>
</button>
</div>
@@ -21,7 +28,11 @@
</div>
<transition name="card-anim">
<StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
<StationCard
v-if="focusedStationInfo"
:stationInfo="focusedStationInfo"
:exit="closeCard"
/>
</transition>
<transition name="card-anim">
@@ -36,310 +47,310 @@
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Getter } from "vuex-class";
import { Vue, Component } from "vue-property-decorator";
import { Getter } from "vuex-class";
import Station from "@/scripts/interfaces/Station";
import Train from "@/scripts/interfaces/Train";
import Station from "@/scripts/interfaces/Station";
import Train from "@/scripts/interfaces/Train";
import inputData from "@/data/options.json";
import inputData from "@/data/options.json";
import StationTable from "@/components/StationsView/StationTable.vue";
import StationCard from "@/components/StationsView/StationCard.vue";
import FilterCard from "@/components/StationsView/FilterCard.vue";
import StationTable from "@/components/StationsView/StationTable.vue";
import StationCard from "@/components/StationsView/StationCard.vue";
import FilterCard from "@/components/StationsView/FilterCard.vue";
const filterInitStates = {
default: false,
notDefault: false,
nonPublic: false,
SPK: false,
SCS: false,
ręczne: false,
mechaniczne: false,
współczesna: false,
kształtowa: false,
historyczna: false,
mieszana: false,
minLevel: 0,
minOneWayCatenary: 0,
minOneWay: 0,
minTwoWayCatenary: 0,
minTwoWay: 0,
"no-1track": false,
"no-2track": false,
free: true,
occupied: false,
ending: false,
};
const filterInitStates = {
default: false,
notDefault: false,
nonPublic: false,
SPK: false,
SCS: false,
ręczne: false,
mechaniczne: false,
współczesna: false,
kształtowa: false,
historyczna: false,
mieszana: false,
minLevel: 0,
minOneWayCatenary: 0,
minOneWay: 0,
minTwoWayCatenary: 0,
minTwoWay: 0,
"no-1track": false,
"no-2track": false,
free: true,
occupied: false,
ending: false,
};
@Component({
components: {
StationCard,
StationTable,
FilterCard,
},
})
export default class StationsView extends Vue {
STORAGE_KEY: string = "options_saved";
@Component({
components: {
StationCard,
StationTable,
FilterCard,
},
})
export default class StationsView extends Vue {
STORAGE_KEY: string = "options_saved";
sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
focusedStationName: string = "";
filterCardOpen: boolean = false;
filters = { ...filterInitStates };
sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
focusedStationName: string = "";
filterCardOpen: boolean = false;
filters = { ...filterInitStates };
inputs = inputData;
inputs = inputData;
@Getter("getStationList") stationList!: Station[];
@Getter("getStationList") stationList!: Station[];
toggleCardsState(name: string): void {
if (name == "filter") {
this.filterCardOpen = !this.filterCardOpen;
}
}
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;
}
changeFilterValue(filter: { name: string; value: number }) {
this.filters[filter.name] = filter.value;
}
resetFilters() {
this.filters = { ...filterInitStates };
}
get computedStations() {
const dir: number = this.sorterActive.dir;
// const scheduledTrainList = this.scheduledTrains;
return this.stationList
.filter((station) => {
if (!station.reqLevel || station.reqLevel == "-1") return true;
if ((station.nonPublic || !station.reqLevel) && this.filters["nonPublic"]) return false;
if (station.online && station.occupiedTo == "KOŃCZY" && this.filters["ending"]) return false;
if (station.online && this.filters["occupied"]) return false;
if (!station.online && this.filters["free"]) return false;
if (station.default && this.filters["default"]) return false;
if (!station.default && this.filters["notDefault"]) return false;
if (parseInt(station.reqLevel) < this.filters["minLevel"]) return false;
if (
this.filters["no-1track"] &&
(station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)
)
return false;
if (
this.filters["no-2track"] &&
(station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)
)
return false;
if (station.routes.oneWay.catenary < this.filters["minOneWayCatenary"]) return false;
if (station.routes.oneWay.noCatenary < this.filters["minOneWay"]) return false;
if (station.routes.twoWay.catenary < this.filters["minTwoWayCatenary"]) return false;
if (station.routes.twoWay.noCatenary < this.filters["minTwoWay"]) return false;
if (this.filters[station.controlType]) return false;
if (this.filters[station.signalType]) return false;
if (this.filters["SPK"] && (station.controlType === "SPK" || station.controlType.includes("+SPK")))
return false;
if (this.filters["SCS"] && (station.controlType === "SCS" || station.controlType.includes("+SCS")))
return false;
if (
this.filters["SCS"] &&
this.filters["SPK"] &&
(station.controlType.includes("SPK") || station.controlType.includes("SCS"))
)
return false;
if (this.filters["mechaniczne"] && station.controlType.includes("mechaniczne")) return false;
if (this.filters["ręczne"] && station.controlType.includes("ręczne")) return false;
return true;
})
.sort((a, b) => {
switch (this.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.toLowerCase() > b.dispatcherName.toLowerCase()) return dir;
if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) 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.toLowerCase() >= b.stationName.toLowerCase()) return dir;
return -dir;
});
}
mounted() {
const storage = window.localStorage;
if (storage.getItem(this.STORAGE_KEY) !== "true") return;
this.inputs.options.forEach((option) => {
const value = storage.getItem(option.name) === "true" ? true : false;
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
option.value = value;
});
this.inputs.sliders.forEach((slider) => {
const value = parseInt(storage.getItem(slider.name) || "0");
this.changeFilterValue({ name: slider.name, value });
slider.value = value;
});
window.addEventListener("keydown", (e: KeyboardEvent) => {
if (e.keyCode == 27 && this.focusedStationName != "") {
this.focusedStationName = "";
}
});
}
closeCard() {
this.focusedStationName = "";
}
setFocusedStation(name: string) {
if (this.focusedStationName == name) this.focusedStationName = "";
else this.focusedStationName = name;
}
get focusedStationInfo() {
return this.computedStations.find((station) => station.stationName === this.focusedStationName);
toggleCardsState(name: string): void {
if (name == "filter") {
this.filterCardOpen = !this.filterCardOpen;
}
}
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;
}
changeFilterValue(filter: { name: string; value: number }) {
this.filters[filter.name] = filter.value;
}
resetFilters() {
this.filters = { ...filterInitStates };
}
get computedStations() {
const dir: number = this.sorterActive.dir;
// const scheduledTrainList = this.scheduledTrains;
return this.stationList
.filter((station) => {
if (!station.reqLevel || station.reqLevel == "-1") return true;
if ((station.nonPublic || !station.reqLevel) && this.filters["nonPublic"]) return false;
if (station.online && station.occupiedTo == "KOŃCZY" && this.filters["ending"]) return false;
if (station.online && this.filters["occupied"]) return false;
if (!station.online && this.filters["free"]) return false;
if (station.default && this.filters["default"]) return false;
if (!station.default && this.filters["notDefault"]) return false;
if (parseInt(station.reqLevel) < this.filters["minLevel"]) return false;
if (
this.filters["no-1track"] &&
(station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)
)
return false;
if (
this.filters["no-2track"] &&
(station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)
)
return false;
if (station.routes.oneWay.catenary < this.filters["minOneWayCatenary"]) return false;
if (station.routes.oneWay.noCatenary < this.filters["minOneWay"]) return false;
if (station.routes.twoWay.catenary < this.filters["minTwoWayCatenary"]) return false;
if (station.routes.twoWay.noCatenary < this.filters["minTwoWay"]) return false;
if (this.filters[station.controlType]) return false;
if (this.filters[station.signalType]) return false;
if (this.filters["SPK"] && (station.controlType === "SPK" || station.controlType.includes("+SPK")))
return false;
if (this.filters["SCS"] && (station.controlType === "SCS" || station.controlType.includes("+SCS")))
return false;
if (
this.filters["SCS"] &&
this.filters["SPK"] &&
(station.controlType.includes("SPK") || station.controlType.includes("SCS"))
)
return false;
if (this.filters["mechaniczne"] && station.controlType.includes("mechaniczne")) return false;
if (this.filters["ręczne"] && station.controlType.includes("ręczne")) return false;
return true;
})
.sort((a, b) => {
switch (this.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.toLowerCase() > b.dispatcherName.toLowerCase()) return dir;
if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) 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.toLowerCase() >= b.stationName.toLowerCase()) return dir;
return -dir;
});
}
mounted() {
const storage = window.localStorage;
if (storage.getItem(this.STORAGE_KEY) !== "true") return;
this.inputs.options.forEach((option) => {
const value = storage.getItem(option.name) === "true" ? true : false;
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
option.value = value;
});
this.inputs.sliders.forEach((slider) => {
const value = parseInt(storage.getItem(slider.name) || "0");
this.changeFilterValue({ name: slider.name, value });
slider.value = value;
});
window.addEventListener("keydown", (e: KeyboardEvent) => {
if (e.keyCode == 27 && this.focusedStationName != "") {
this.focusedStationName = "";
}
});
}
closeCard() {
this.focusedStationName = "";
}
setFocusedStation(name: string) {
if (this.focusedStationName == name) this.focusedStationName = "";
else this.focusedStationName = name;
}
get focusedStationInfo() {
return this.computedStations.find((station) => station.stationName === this.focusedStationName);
}
}
</script>
<style lang="scss" scoped>
.stations-view {
padding: 1rem 0;
min-height: 100%;
@import "../styles/variables.scss";
@import "../styles/responsive.scss";
font-size: calc(0.6rem + 0.9vw);
.stations-view {
position: relative;
position: relative;
padding: 1rem 0;
min-height: 100%;
font-size: calc(0.6rem + 0.9vw);
}
.card-anim {
&-enter-active,
&-leave-active {
transition: all 0.25s ease-in-out;
}
@import "../styles/variables.scss";
@import "../styles/responsive.scss";
.card-anim {
&-enter-active,
&-leave-active {
transition: all 0.25s ease-in-out;
}
&-enter,
&-leave-to {
transform: translate(-45%, -50%);
opacity: 0;
}
&-enter,
&-leave-to {
transform: translate(-45%, -50%);
opacity: 0;
}
}
.options {
&-actions {
display: flex;
}
}
.action-btn {
.options {
&-actions {
display: flex;
align-items: center;
}
}
background: #333;
border: none;
.action-btn {
display: flex;
align-items: center;
color: #e0e0e0;
font-size: 0.65em;
background: #333;
border: none;
padding: 0.3em;
color: #e0e0e0;
font-size: 0.65em;
outline: none;
cursor: pointer;
padding: 0.3em;
transition: all 0.3s;
outline: none;
cursor: pointer;
img {
width: 1.3em;
margin-right: 0.2em;
}
transition: all 0.3s;
p {
font-size: 1em;
overflow: hidden;
transition: max-width 0.35s ease-in-out;
}
&:hover {
color: $accentCol;
background: rgba(#e0e0e0, 0.4);
}
&.open {
color: $accentCol;
}
img {
width: 1.3em;
margin-right: 0.2em;
}
@include smallScreen {
.options {
display: flex;
justify-content: center;
}
p {
font-size: 1em;
overflow: hidden;
.action-btn {
font-size: 0.75rem;
}
transition: max-width 0.35s ease-in-out;
}
.stations-wrapper {
&:hover {
color: $accentCol;
background: rgba(#e0e0e0, 0.4);
}
&.open {
color: $accentCol;
}
}
@include smallScreen {
.options {
display: flex;
justify-content: center;
}
.stations-body {
margin: 0 auto;
overflow: auto;
.action-btn {
font-size: 0.75rem;
}
}
.stations-wrapper {
display: flex;
justify-content: center;
}
.stations-body {
margin: 0 auto;
overflow: auto;
}
</style>