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

Restrukturyzacja filtrów scenerii i local storage

Browse Source
This commit is contained in:
Spythere
2020-12-06 22:05:25 +01:00
parent 8d604826ff
commit 60c7e7394e
4 changed files with 227 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/FilterCard.vue
+27 -32
View File
@@ -21,8 +21,7 @@
<span
class="option-content"
:class="option.section + (option.value ? ' checked' : '')"
>{{ option.content }}</span
>
>{{ option.content }}</span>
</label>
</div>
</div>
@@ -49,21 +48,14 @@
<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
>
<input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
<span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
</label>
</div>
</div>
<div class="card-actions flex">
<button class="button" @click="reset">RESET FILTRÓW</button>
<button class="button" @click="resetFilters">RESET FILTRÓW</button>
<button class="button" @click="exit">ZAMKNIJ FILTRY</button>
</div>
</section>
@@ -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 {
src/scripts/stationFilterManager.ts
+140
View File
@@ -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;
}
}
src/scripts/storageManager.ts
+42
View File
@@ -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;
}
}
src/views/StationsView.vue
+18 -167
View File
@@ -40,7 +40,7 @@
<div class="body_table">
<StationTable
:stations="computedStations"
:sorterActive="sorterActive"
:sorterActive="filterManager.getSorter()"
:setFocusedStation="setFocusedStation"
:changeSorter="changeSorter"
/>
@@ -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() {