mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Dodano szczegółowy rozkład pociągów
This commit is contained in:
+279
-306
@@ -4,11 +4,7 @@
|
||||
<div class="stations-body">
|
||||
<div class="options">
|
||||
<div class="options-actions">
|
||||
<button
|
||||
class="action-btn"
|
||||
:class="{'open': filterCardOpen}"
|
||||
@click="() => toggleCardsState('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>
|
||||
@@ -40,333 +36,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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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%;
|
||||
.stations-view {
|
||||
padding: 1rem 0;
|
||||
min-height: 100%;
|
||||
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
font-size: calc(0.6rem + 0.9vw);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/responsive.scss";
|
||||
|
||||
.options {
|
||||
&-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.card-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.65em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
transform: translate(-45%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.options {
|
||||
&-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: #333;
|
||||
border: none;
|
||||
|
||||
color: #e0e0e0;
|
||||
font-size: 0.65em;
|
||||
|
||||
padding: 0.3em;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 1.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-width 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
background: rgba(#e0e0e0, 0.4);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stations-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 0.75rem;
|
||||
.stations-body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.stations-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stations-body {
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -122,7 +122,7 @@ export default class TrainsView extends Vue {
|
||||
|
||||
.body-wrapper {
|
||||
margin: 1rem auto;
|
||||
max-width: 1200px;
|
||||
max-width: 1300px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user