Restrukturyzacja filtrów scenerii i local storage

src/components/StationsView/FilterCard.vue

@@ -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
+          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
-            class="option-input"
+          <span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
-            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;
+    this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
-
-    if (storage.getItem(this.STORAGE_KEY) === "true") this.saveOptions = true;
-    else this.saveOptions = false;
   }
 
   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) {
+      console.log(this.saveOptions);
-      this.inputs.options.forEach((option) =>
-        storage.setItem(option.name, option.value + "")
-      );
 
-      this.inputs.sliders.forEach((slider) =>
+      return;
-        storage.setItem(slider.name, slider.value + "")
+    }
-      );
 
-      storage.setItem(this.STORAGE_KEY, "true");
+    StorageManager.registerStorage(this.STORAGE_KEY);
-    } else storage.setItem(this.STORAGE_KEY, "false");
+
+    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

@@ -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

@@ -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

@@ -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() {
+  initializeStorage() {
-    const storage = window.localStorage;
+    if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
-
-    if (storage.getItem(this.STORAGE_KEY) !== "true") 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;
+    this.filterManager.changeSorter(index);
-
-    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;
+    this.filterManager.changeFilterValue(filter);
   }
 
   resetFilters() {
-    this.filters = { ...filterInitStates };
+    this.filterManager.resetFilters();
   }
 
   get computedStations() {
-    const dir: number = this.sorterActive.dir;
+    return this.filterManager.filteredStationList(this.stationList);
-    // 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;
-      });
   }
 
   closeCard() {