diff --git a/src/components/StationsView/FilterCard.vue b/src/components/StationsView/FilterCard.vue index 9dc2e64..95f1523 100644 --- a/src/components/StationsView/FilterCard.vue +++ b/src/components/StationsView/FilterCard.vue @@ -21,8 +21,7 @@ {{ option.content }} + >{{ option.content }} @@ -49,21 +48,14 @@
- +
@@ -74,6 +66,8 @@ import { Vue, Component, Prop } from "vue-property-decorator"; import inputData from "@/data/options.json"; +import StorageManager from "@/scripts/storageManager"; + @Component export default class FilterCard extends Vue { inputs = { ...inputData }; @@ -83,10 +77,7 @@ export default class FilterCard extends Vue { @Prop() exit!: () => void; mounted() { - const storage = window.localStorage; - - if (storage.getItem(this.STORAGE_KEY) === "true") this.saveOptions = true; - else this.saveOptions = false; + this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY); } handleChange(e: Event): void { @@ -98,7 +89,7 @@ export default class FilterCard extends Vue { }); if (this.saveOptions) - window.localStorage.setItem(target.name, target.checked + ""); + StorageManager.setBooleanValue(target.name, target.checked); } handleInput(e: Event): void { @@ -109,37 +100,41 @@ export default class FilterCard extends Vue { }); if (this.saveOptions) - window.localStorage.setItem(target.name, target.value + ""); + StorageManager.setStringValue(target.name, target.value); } saveFilters(): void { - const storage = window.localStorage; + if (!this.saveOptions) { + StorageManager.unregisterStorage(this.STORAGE_KEY); - if (this.saveOptions) { - this.inputs.options.forEach((option) => - storage.setItem(option.name, option.value + "") - ); + console.log(this.saveOptions); - this.inputs.sliders.forEach((slider) => - storage.setItem(slider.name, slider.value + "") - ); + return; + } - storage.setItem(this.STORAGE_KEY, "true"); - } else storage.setItem(this.STORAGE_KEY, "false"); + StorageManager.registerStorage(this.STORAGE_KEY); + + this.inputs.options.forEach((option) => + StorageManager.setBooleanValue(option.name, option.value) + ); + + this.inputs.sliders.forEach((slider) => + StorageManager.setNumericValue(slider.name, slider.value) + ); } - reset(): void { + resetFilters(): void { this.inputs.options.forEach((option) => { option.value = option.defaultValue; - window.localStorage.setItem(option.name, option.value + ""); + StorageManager.setBooleanValue(option.name, option.value); }); this.inputs.sliders.forEach((slider) => { slider.value = slider.defaultValue; - window.localStorage.setItem(slider.name, slider.value + ""); + StorageManager.setNumericValue(slider.name, slider.value); }); - this.$emit('resetFilters'); + this.$emit("resetFilters"); } closeCard(): void { diff --git a/src/scripts/stationFilterManager.ts b/src/scripts/stationFilterManager.ts new file mode 100644 index 0000000..a5457e8 --- /dev/null +++ b/src/scripts/stationFilterManager.ts @@ -0,0 +1,140 @@ +import Station from '@/scripts/interfaces/Station'; + +export default class StationFilterManager { + private 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, + }; + + private filters = { ...this.filterInitStates }; + + private sorter: { index: number; dir: number } = { index: 0, dir: 1 }; + + filteredStationList(stationList: Station[]): Station[] { + return 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.sorter.index) { + case 1: + if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return this.sorter.dir; + if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -this.sorter.dir; + break; + + case 2: + if (a.statusTimestamp > b.statusTimestamp) return this.sorter.dir; + if (a.statusTimestamp < b.statusTimestamp) return -this.sorter.dir; + break; + + case 3: + if (a.dispatcherName.toLowerCase() > b.dispatcherName.toLowerCase()) return this.sorter.dir; + if (a.dispatcherName.toLowerCase() < b.dispatcherName.toLowerCase()) return -this.sorter.dir; + break; + + case 4: + if (a.dispatcherExp > b.dispatcherExp) return this.sorter.dir; + if (a.dispatcherExp < b.dispatcherExp) return -this.sorter.dir; + break; + + case 7: + if (a.currentUsers > b.currentUsers) return this.sorter.dir; + if (a.currentUsers < b.currentUsers) return -this.sorter.dir; + if (a.maxUsers > b.maxUsers) return this.sorter.dir; + if (a.maxUsers < b.maxUsers) return -this.sorter.dir; + break; + + case 8: + if (a.spawns > b.spawns) return this.sorter.dir; + if (a.spawns < b.spawns) return -this.sorter.dir; + + break; + + case 9: + if (a.scheduledTrains.length > b.scheduledTrains.length) return this.sorter.dir; + if (a.scheduledTrains.length < b.scheduledTrains.length) return -this.sorter.dir; + + default: + break; + } + + if (a.stationName.toLowerCase() >= b.stationName.toLowerCase()) return this.sorter.dir; + return -this.sorter.dir; + }); + } + + changeFilterValue(filter: { name: string; value: number }) { + this.filters[filter.name] = filter.value; + } + + resetFilters() { + this.filters = { ...this.filterInitStates }; + } + + changeSorter(index: number) { + if (index > 4 && index < 7) return; + + if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir; + else this.sorter.dir = 1; + + this.sorter.index = index; + } + + getSorter() { + return this.sorter; + } +} diff --git a/src/scripts/storageManager.ts b/src/scripts/storageManager.ts new file mode 100644 index 0000000..82883c1 --- /dev/null +++ b/src/scripts/storageManager.ts @@ -0,0 +1,42 @@ +export default class StorageManager { + static registerStorage(name: string) { + window.localStorage.setItem(name, '1'); + } + + static unregisterStorage(name: string) { + window.localStorage.removeItem(name); + } + + static isRegistered(name: string) { + return window.localStorage.getItem(name) ? true : false; + } + + static setBooleanValue(key: string, val: boolean) { + window.localStorage.setItem(key, val.toString()); + } + + static setNumericValue(key: string, val: number) { + window.localStorage.setItem(key, val.toString()); + } + + static setStringValue(key: string, val: string) { + window.localStorage.setItem(key, val); + } + + static removeValue(key: string) { + window.localStorage.removeItem(key); + } + + static getBooleanValue(key: string): boolean { + return window.localStorage.getItem(key) === 'true' ? true : false; + } + + static getStringValue(key: string): string { + return window.localStorage.getItem(key) || ''; + } + + static getNumericValue(key: string): number { + const itemValue = window.localStorage.getItem(key); + return itemValue ? parseInt(itemValue) : 0; + } +} diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index 3e6f529..fa9e2f3 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -40,7 +40,7 @@
@@ -70,36 +70,15 @@ import { Getter } from "vuex-class"; import Station from "@/scripts/interfaces/Station"; import Train from "@/scripts/interfaces/Train"; +import StorageManager from "@/scripts/storageManager"; +import StationFilterManager from "@/scripts/stationFilterManager"; + 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"; -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, @@ -113,10 +92,10 @@ export default class StationsView extends Vue { trainIcon: string = require("@/assets/icon-train.svg"); timetableIcon: string = require("@/assets/icon-timetable.svg"); - sorterActive: { index: number; dir: number } = { index: 0, dir: 1 }; + filterManager: StationFilterManager = new StationFilterManager(); + focusedStationName: string = ""; filterCardOpen: boolean = false; - filters = { ...filterInitStates }; inputs = inputData; @@ -137,24 +116,26 @@ export default class StationsView extends Vue { return "success"; } - mounted() { - const storage = window.localStorage; - - if (storage.getItem(this.STORAGE_KEY) !== "true") return; + initializeStorage() { + if (!StorageManager.isRegistered(this.STORAGE_KEY)) return; this.inputs.options.forEach((option) => { - const value = storage.getItem(option.name) === "true" ? true : false; + const value = StorageManager.getBooleanValue(option.name); 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"); + const value = StorageManager.getNumericValue(slider.name); this.changeFilterValue({ name: slider.name, value }); slider.value = value; }); + } + + mounted() { + this.initializeStorage(); window.addEventListener("keydown", (e: KeyboardEvent) => { if (e.keyCode == 27 && this.focusedStationName != "") { @@ -170,149 +151,19 @@ export default class StationsView extends Vue { } changeSorter(index: number) { - if (index > 4) return; - - if (index == this.sorterActive.index) - this.sorterActive.dir = -1 * this.sorterActive.dir; - else this.sorterActive.dir = 1; - - this.sorterActive.index = index; + this.filterManager.changeSorter(index); } changeFilterValue(filter: { name: string; value: number }) { - this.filters[filter.name] = filter.value; + this.filterManager.changeFilterValue(filter); } resetFilters() { - this.filters = { ...filterInitStates }; + this.filterManager.resetFilters(); } 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; - }); + return this.filterManager.filteredStationList(this.stationList); } closeCard() {