Filtry scenerii

src/App.vue

@@ -83,7 +83,6 @@ export default defineComponent({
   },
 
   async mounted() {
-    this.updateStorage();
     this.setReleaseURL();
 
     watch(
@@ -113,15 +112,6 @@ export default defineComponent({
       this.releaseURL = releaseURL || '';
     },
 
-    updateStorage() {
-      if (!StorageManager.isRegistered('unavailable-status')) {
-        StorageManager.setBooleanValue('unavailable-status', true);
-        StorageManager.setBooleanValue('ending-status', true);
-        StorageManager.setBooleanValue('no-space-status', true);
-        StorageManager.setBooleanValue('afk-status', true);
-      }
-    },
-
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 

src/components/StationsView/FilterOption.vue

@@ -1,23 +1,12 @@
 <template>
-  <div class="filter-option option">
+  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
-    <label>
+    {{ $t(`filters.${option.id}`) }}
-      <input
+  </button>
-        type="checkbox"
-        :name="option.name"
-        :defaultValue="option.defaultValue"
-        :id="option.id"
-        v-model="option.value"
-        @change="handleChange"
-      />
-      <span v-if="option.id != 'troll'" :class="option.section + (option.value ? ' checked' : '')"
-        >{{ option.id != 'troll' ? $t(`filters.${option.id}`) : 'ARKADIA ZDRÓJ' }}
-      </span>
-    </label>
-  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
 
 interface FilterOption {
   id: string;
@@ -34,29 +23,26 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['optionChange'],
+
+  setup() {
+    return {
+      filterStore: useStationFiltersStore(),
+    };
+  },
   methods: {
     handleChange() {
-      if (this.option.name == 'troll') {
+      this.option.value = !this.option.value;
-        location.href = 'https://www.youtube.com/watch?v=HIcSWuKMwOw';
-        return;
-      }
 
-      this.$emit('optionChange', {
+      this.filterStore.changeFilterValue({
         name: this.option.name,
-        value: this.option.value,
+        value: !this.option.value,
       });
     },
   },
-  setup() {
-    return {};
-  },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/option.scss';
-
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -64,63 +50,49 @@ $statusCol: #349b32;
 $saveCol: #28a826;
 $routesCol: #9049c0;
 
-.option span {
+button {
-  font-size: 0.9em;
+  width: 100%;
-  &.checked {
+  padding: 0.4em;
+  border-radius: 0.4em;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &[data-selected='true'] {
     &.access {
       background-color: $accessCol;
-
+      box-shadow: 0 0 6px 1px $accessCol;
-      &::before {
-        box-shadow: 0 0 6px 1px $accessCol;
-      }
     }
 
     &.control {
       background-color: $controlCol;
-
+      box-shadow: 0 0 6px 1px $controlCol;
-      &::before {
-        box-shadow: 0 0 6px 1px $controlCol;
-      }
     }
 
     &.signals {
       background-color: $signalCol;
-
+      box-shadow: 0 0 6px 1px $signalCol;
-      &::before {
-        box-shadow: 0 0 6px 1px $signalCol;
-      }
     }
 
     &.routes {
       background-color: $routesCol;
-
+      box-shadow: 0 0 6px 1px $routesCol;
-      &::before {
-        box-shadow: 0 0 6px 1px $routesCol;
-      }
     }
 
     &.status {
       background-color: $statusCol;
-
+      box-shadow: 0 0 6px 1px $statusCol;
-      &::before {
-        box-shadow: 0 0 6px 1px $statusCol;
-      }
     }
 
     &.save {
       background-color: $saveCol;
-
+      box-shadow: 0 0 6px 1px $saveCol;
-      &::before {
-        box-shadow: 0 0 6px 1px $saveCol;
-      }
     }
 
     &.troll {
       background-color: firebrick;
-
+      box-shadow: 0 0 6px 1px firebrick;
-      &::before {
-        box-shadow: 0 0 6px 1px firebrick;
-      }
     }
 
     &.mode {
@@ -129,18 +101,6 @@ $routesCol: #9049c0;
 
       font-weight: 500;
     }
-
-    &::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100%;
-
-      border-radius: 0.5em;
-    }
   }
 }
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -23,13 +23,13 @@
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible">
+      <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
 
           <section class="card_options">
             <filter-option
-              v-for="(option, i) in inputs.options"
+              v-for="(option, i) in filterStore.inputs.options"
               :option="option"
               :key="i"
               @optionChange="handleChange"
@@ -38,7 +38,7 @@
           <section class="card_timestamp" style="text-align: center">
             <div>{{ $t('filters.minimum-hours-title') }}</div>
             <span class="clock">
-              <button @click="subHour">-</button>
+              <button class="btn--action" @click="subHour">-</button>
               <span>{{
                 minimumHours == 0
                   ? $t('filters.now')
@@ -46,7 +46,7 @@
                   ? minimumHours + $t('filters.hour')
                   : $t('filters.no-limit')
               }}</span>
-              <button @click="addHour">+</button>
+              <button class="btn--action" @click="addHour">+</button>
             </span>
           </section>
 
@@ -63,7 +63,7 @@
           </section>
 
           <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
+            <div class="slider" v-for="(slider, i) in filterStore.inputs.sliders" :key="i">
               <input
                 class="slider-input"
                 type="range"
@@ -82,18 +82,11 @@
           </section>
 
           <section class="card_actions">
-            <filter-option
-              @optionChange="saveFilters"
-              :option="{
-                id: 'save',
-                name: 'save',
-                section: 'mode',
-                value: saveOptions,
-                defaultValue: true,
-              }"
-            />
-
             <div class="action-buttons">
+              <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
+                {{ $t('filters.save') }}
+              </button>
+
               <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
               <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
             </div>
@@ -106,11 +99,11 @@
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
-import inputData from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import routerMixin from '../../mixins/routerMixin';
 import StorageManager from '../../scripts/managers/storageManager';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 
 import ActionButton from '../Global/ActionButton.vue';
@@ -118,11 +111,9 @@ import FilterOption from './FilterOption.vue';
 
 export default defineComponent({
   components: { ActionButton, FilterOption },
-  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
   mixins: [imageMixin, keyMixin, routerMixin],
 
   data: () => ({
-    inputs: { ...inputData },
     saveOptions: false,
     STORAGE_KEY: 'options_saved',
 
@@ -138,10 +129,12 @@ export default defineComponent({
   setup() {
     const isVisible = inject('isFilterCardVisible');
     const store = useStore();
+    const filterStore = useStationFiltersStore();
 
     return {
       isVisible,
       store,
+      filterStore,
     };
   },
 
@@ -166,6 +159,12 @@ export default defineComponent({
         this.chosenSearchScenery = '';
       }
     },
+
+    isVisible(value: boolean) {
+      this.$nextTick(() => {
+        if (value) (this.$refs['cardEl'] as HTMLDivElement).focus();
+      });
+    },
   },
 
   methods: {
@@ -175,7 +174,7 @@ export default defineComponent({
     },
 
     handleChange(change: { name: string; value: boolean }) {
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
         name: change.name,
         value: !change.value,
       });
@@ -186,7 +185,7 @@ export default defineComponent({
     handleInput(e: Event) {
       const target = e.target as HTMLInputElement;
 
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
         name: target.name,
         value: target.value,
       });
@@ -203,7 +202,7 @@ export default defineComponent({
     },
 
     changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
         name,
         value,
       });
@@ -223,17 +222,8 @@ export default defineComponent({
       this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
     },
 
-    invertFilters() {
+    saveFilters() {
-      this.inputs.options.forEach((option) => {
+      this.saveOptions = !this.saveOptions;
-        option.value = !option.value;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.$emit('invertFilters');
-    },
-
-    saveFilters(change: { value: any }) {
-      this.saveOptions = change.value;
 
       if (!this.saveOptions) {
         StorageManager.unregisterStorage(this.STORAGE_KEY);
@@ -242,28 +232,16 @@ export default defineComponent({
 
       StorageManager.registerStorage(this.STORAGE_KEY);
 
-      this.inputs.options.forEach((option) => StorageManager.setBooleanValue(option.name, option.value));
+      this.filterStore.inputs.options.forEach((option) => StorageManager.setBooleanValue(option.name, !option.value));
-
+      this.filterStore.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.value));
-      this.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.value));
     },
 
     resetFilters() {
-      this.inputs.options.forEach((option) => {
-        option.value = option.defaultValue;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.inputs.sliders.forEach((slider) => {
-        slider.value = slider.defaultValue;
-        StorageManager.setNumericValue(slider.name, slider.value);
-      });
-
       this.authorsInputValue = '';
 
       this.minimumHours = 0;
       this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
-
+      this.filterStore.resetFilters();
-      this.$emit('resetFilters');
     },
 
     closeCard() {
@@ -367,32 +345,18 @@ export default defineComponent({
       align-items: center;
       justify-content: center;
 
-      font-size: 1.15em;
+      font-size: 1.2em;
+      margin-top: 0.5em;
 
-      color: $accentCol;
+      span {
-      font-weight: bold;
+        min-width: 120px;
-    }
+        font-weight: bold;
-
-    span {
-      min-width: 100px;
-    }
-
-    button {
-      border: none;
-      outline: none;
-      background: none;
-      padding: 0 0.45em;
-
-      cursor: pointer;
-
-      color: white;
-
-      font-size: 1.35em;
-
-      &:focus,
-      &:hover {
         color: $accentCol;
       }
+
+      button {
+        padding: 0.2em 0.6em;
+      }
     }
   }
 
@@ -435,6 +399,11 @@ export default defineComponent({
         width: 50%;
         margin: 0 auto;
         padding: 0.5em;
+
+        &[data-selected='true'] {
+          background-color: lightgreen;
+          color: black;
+        }
       }
     }
   }
@@ -466,6 +435,10 @@ export default defineComponent({
     min-width: 25%;
     max-width: 120px;
 
+    &:focus-visible ~ * {
+      color: gold;
+    }
+
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;

src/components/StationsView/StationTable.vue

@@ -230,6 +230,7 @@ import stationInfoMixin from '../../mixins/stationInfoMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import Station from '../../scripts/interfaces/Station';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
 
@@ -239,17 +240,9 @@ export default defineComponent({
       type: Array as () => Station[],
       required: true,
     },
-    sorterActive: {
-      type: Object as () => {
-        index: number;
-        dir: number;
-      },
-      required: true,
-    },
-    setFocusedStation: { type: Function, required: true },
-    changeSorter: { type: Function, required: true },
   },
 
+  components: { Loading },
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
 
   data: () => ({
@@ -258,13 +251,22 @@ export default defineComponent({
     lastSelectedStationName: '',
   }),
 
+  computed: {
+    sorterActive() {
+      return this.stationFiltersStore.sorterActive;
+    },
+  },
+
   setup() {
     const store = useStore();
+    const stationFiltersStore = useStationFiltersStore();
+
     const isDataLoaded = computed(() => {
       return store.dataStatuses.sceneries != DataStatus.Loading;
     });
     return {
       isDataLoaded,
+      stationFiltersStore,
     };
   },
 
@@ -272,19 +274,24 @@ export default defineComponent({
     setScenery(name: string) {
       const station = this.stations.find((station) => station.name === name);
       if (!station) return;
+
       this.lastSelectedStationName = station.name;
       this.$router.push({
         name: 'SceneryView',
         query: { station: station.name.replaceAll(' ', '_') },
       });
     },
+
     openForumSite(e: Event, url: string | undefined) {
       if (!url) return;
       e.preventDefault();
       window.open(url, '_blank');
     },
+
+    changeSorter(i: number) {
+      this.stationFiltersStore.changeSorter(i);
+    },
   },
-  components: { Loading },
 });
 </script>
 

src/components/TrainsView/TrainInfo.vue

@@ -12,6 +12,8 @@
           <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
           <strong>{{ train.trainNo }}</strong>
           <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
+
+          <span>{{ train.isTimeout }}</span>
         </span>
       </div>
 

src/data/options.json

@@ -198,15 +198,6 @@
       "section": "status",
       "value": true,
       "defaultValue": true
-    },
-    {
-      "id": "troll",
-      "name": "troll",
-      "iconName": "",
-
-      "section": "troll",
-      "value": true,
-      "defaultValue": true
     }
   ],
   "sliders": [

src/locales/pl.json

@@ -164,7 +164,7 @@
     "hour": " godz.",
     "no-limit": "BEZ LIMITU",
     "include-selected": "POKAŻ ZAZNACZONE",
-    "save": "↵ ZAPISZ FILTRY",
+    "save": "ZAPISZ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
   },

src/scripts/interfaces/Train.ts

@@ -19,9 +19,10 @@ export default interface Train {
   online: boolean;
   lastSeen: number;
   region: string;
-
   cars: string[];
 
+  isTimeout: boolean;
+
   timetableData?: {
     timetableId: number;
     category: string;

src/scripts/interfaces/api/TrainAPIData.ts

@@ -21,6 +21,7 @@ export default interface TrainAPIData {
   lastSeen: number;
 
   region: string;
+  isTimeout: boolean;
 
   timetable?: {
     timetableId: number;

src/scripts/managers/storageManager.ts

@@ -23,6 +23,13 @@ export default class StorageManager {
     window.localStorage.setItem(key, val);
   }
 
+  static setValue(key: string, val: any) {
+    if (typeof val == 'boolean') this.setBooleanValue(key, val);
+    else if (typeof val == 'number') this.setNumericValue(key, val);
+    else if (typeof val == 'string') this.setStringValue(key, val);
+    else this.setStringValue(key, val);
+  }
+
   static removeValue(key: string) {
     window.localStorage.removeItem(key);
   }

src/store/stationFiltersStore.ts

@@ -1,6 +1,8 @@
-import Filter from '../interfaces/Filter';
+import { defineStore } from 'pinia';
-import Station from '../interfaces/Station';
+import inputData from '../data/options.json';
-import StorageManager from './storageManager';
+import Filter from '../scripts/interfaces/Filter';
+import Station from '../scripts/interfaces/Station';
+import StorageManager from '../scripts/managers/storageManager';
 
 const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
   switch (sorter.index) {
@@ -186,110 +188,118 @@ const filterStations = (station: Station, filters: Filter) => {
   return true;
 };
 
-export default class StationFilterManager {
+const filterInitStates: Filter = {
-  private filterInitStates: Filter = {
+  default: false,
-    default: false,
+  notDefault: false,
-    notDefault: false,
+  real: false,
-    real: false,
+  fictional: false,
-    fictional: false,
+  SPK: false,
-    SPK: false,
+  SCS: false,
-    SCS: false,
+  SPE: false,
-    SPE: false,
+  SUP: false,
-    SUP: false,
+  ręczne: false,
-    ręczne: false,
+  mechaniczne: false,
-    mechaniczne: false,
+  współczesna: false,
-    współczesna: false,
+  kształtowa: false,
-    kształtowa: false,
+  historyczna: false,
-    historyczna: false,
+  mieszana: false,
-    mieszana: false,
+  SBL: false,
-    SBL: false,
+  minLevel: 0,
-    minLevel: 0,
+  maxLevel: 20,
-    maxLevel: 20,
+  minOneWayCatenary: 0,
-    minOneWayCatenary: 0,
+  minOneWay: 0,
-    minOneWay: 0,
+  minTwoWayCatenary: 0,
-    minTwoWayCatenary: 0,
+  minTwoWay: 0,
-    minTwoWay: 0,
+  'include-selected': false,
-    'include-selected': false,
+  'no-1track': false,
-    'no-1track': false,
+  'no-2track': false,
-    'no-2track': false,
+  free: true,
-    free: true,
+  occupied: false,
-    occupied: false,
+  ending: false,
-    ending: false,
+  nonPublic: false,
-    nonPublic: false,
+  unavailable: true,
-    unavailable: true,
+  abandoned: true,
-    abandoned: true,
+  afkStatus: false,
-    afkStatus: false,
+  endingStatus: false,
-    endingStatus: false,
+  noSpaceStatus: false,
-    noSpaceStatus: false,
+  unavailableStatus: false,
-    unavailableStatus: false,
+  unsignedStatus: false,
-    unsignedStatus: false,
 
-    authors: '',
+  authors: '',
 
-    onlineFromHours: 0,
+  onlineFromHours: 0,
-  };
+};
 
-  private filters: Filter = { ...this.filterInitStates };
+export const useStationFiltersStore = defineStore('stationFiltersStore', {
+  state() {
+    return {
+      inputs: inputData,
+      filters: { ...filterInitStates },
+      sorterActive: { index: 0, dir: 1 },
+    };
+  },
 
-  private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
+  actions: {
+    getFilteredStationList(stationList: Station[], region: string): Station[] {
+      return stationList
+        .map((station) => {
+          if (station.onlineInfo && station.onlineInfo.region != region) {
+            delete station.onlineInfo;
+          }
 
-  checkFilters() {
+          return station;
-    if (!StorageManager.isRegistered('options_saved')) return;
+        })
+        .filter((station) => filterStations(station, this.filters))
+        .sort((a, b) => sortStations(a, b, this.sorterActive));
+    },
 
-    Object.keys(this.filterInitStates).forEach((filterKey) => {
+    setupFilters() {
-      if (StorageManager.isRegistered(filterKey)) return;
+      if (!StorageManager.isRegistered('options_saved')) return;
 
-      const filterType = typeof this.filterInitStates[filterKey];
+      this.inputs.options.forEach((option) => {
+        if (!StorageManager.isRegistered(option.id)) return;
+        const savedValue = StorageManager.getBooleanValue(option.id);
 
-      if (filterType === 'boolean')
+        this.filters[option.id] = savedValue;
-        StorageManager.setBooleanValue(filterKey, !this.filterInitStates[filterKey] as boolean);
+        option.value = !savedValue;
+      });
 
-      if (filterType === 'number')
+      this.inputs.sliders.forEach((slider) => {
-        StorageManager.setNumericValue(filterKey, this.filterInitStates[filterKey] as number);
+        if (!StorageManager.isRegistered(slider.name)) return;
-    });
+        const savedValue = StorageManager.getNumericValue(slider.name);
-  }
 
-  getFilteredStationList(stationList: Station[], region: string): Station[] {
+        this.filters[slider.name] = savedValue;
-    return stationList
+        slider.value = savedValue;
-      .map((station) => {
+      });
-        if (station.onlineInfo && station.onlineInfo.region != region) {
+    },
-          delete station.onlineInfo;
-        }
 
-        return station;
+    changeFilterValue(filter: { name: string; value: any }) {
-      })
+      this.filters[filter.name] = filter.value;
-      .filter((station) => filterStations(station, this.filters))
-      .sort((a, b) => sortStations(a, b, this.sorter));
-  }
 
-  changeFilterValue(filter: { name: string; value: number }) {
+      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(filter.name, filter.value);
-    this.filters[filter.name] = filter.value;
+    },
 
-    // if(filter.name == 'authors')
+    resetFilters() {
-  }
+      this.filters = { ...filterInitStates };
 
-  resetFilters() {
+      this.inputs.options.forEach((option) => {
-    this.filters = { ...this.filterInitStates };
+        option.value = option.defaultValue;
-  }
+        StorageManager.setBooleanValue(option.name, !option.defaultValue);
+      });
 
-  invertFilters() {
+      this.inputs.sliders.forEach((slider) => {
-    Object.keys(this.filters).forEach((prop) => {
+        slider.value = slider.defaultValue;
-      if (typeof this.filters[prop] !== 'boolean') return;
+        StorageManager.setNumericValue(slider.name, slider.defaultValue);
+      });
+    },
 
-      this.filters[prop] = !this.filters[prop];
+    changeSorter(index: number) {
-    });
+      if (index > 4 && index < 7) return;
-  }
 
-  changeSorter(index: number) {
+      if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir;
-    if (index > 4 && index < 7) return;
+      else this.sorterActive.dir = 1;
 
-    if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir;
+      this.sorterActive.index = index;
-    else this.sorter.dir = 1;
+    },
-
+  },
-    this.sorter.index = index;
+});
-  }
-
-  getSorter() {
-    return this.sorter;
-  }
-}

src/store/store.ts

@@ -17,6 +17,7 @@ import {
 } from '../scripts/utils/storeUtils';
 import { APIData, StationJSONData, StoreState } from './storeTypes';
 
+
 export const useStore = defineStore('store', {
   state: () =>
     ({
@@ -53,6 +54,7 @@ export const useStore = defineStore('store', {
 
       blockScroll: false,
       listenerLaunched: false,
+
     } as StoreState),
 
   actions: {
@@ -94,6 +96,7 @@ export const useStore = defineStore('store', {
             cars: stock.slice(1),
 
             lastSeen: train.lastSeen,
+            isTimeout: train.isTimeout,
 
             timetableData: timetable
               ? {

src/store/storeTypes.ts

@@ -1,12 +1,11 @@
-
 import { Socket } from 'socket.io-client';
 import { DataStatus } from '../scripts/enums/DataStatus';
-import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
-import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
 import StationAPIData from '../scripts/interfaces/api/StationAPIData';
 import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
 import Station from '../scripts/interfaces/Station';
 import Train from '../scripts/interfaces/Train';
+import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
+import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 

src/views/StationsView.vue

@@ -3,37 +3,23 @@
     <div class="wrapper">
       <div class="body">
         <div class="options-bar">
-          <StationFilterCard
+          <StationFilterCard :showCard="filterCardOpen" :exit="(filterCardOpen = false)" ref="filterCardRef" />
-            :showCard="filterCardOpen"
-            :exit="closeCard"
-            @changeFilterValue="changeFilterValue"
-            @invertFilters="invertFilters"
-            @resetFilters="resetFilters"
-            ref="filterCardRef"
-          />
         </div>
 
-        <StationTable
+        <StationTable :stations="computedStationList" />
-          :stations="computedStationList"
-          :sorterActive="filterManager.getSorter()"
-          :setFocusedStation="setFocusedStation"
-          :changeSorter="changeSorter"
-        />
       </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import inputData from '../data/options.json';
+import { defineComponent } from 'vue';
-
-import { defineComponent, reactive } from 'vue';
-import { useStore } from '../store/store';
-import StationFilterManager from '../scripts/managers/stationFilterManager';
 import StorageManager from '../scripts/managers/storageManager';
 import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
 import SelectBox from '../components/Global/SelectBox.vue';
+import { useStationFiltersStore } from '../store/stationFiltersStore';
+import { useStore } from '../store/store';
 
 export default defineComponent({
   components: {
@@ -46,76 +32,37 @@ export default defineComponent({
     filterCardOpen: false,
     modalHidden: true,
     STORAGE_KEY: 'options_saved',
-    inputs: inputData,
     focusedStationName: '',
   }),
 
   setup() {
-    const store = useStore();
-    const filterManager = reactive(new StationFilterManager());
-
     return {
-      filterManager,
+      filterStore: useStationFiltersStore(),
-      store,
+      store: useStore(),
     };
   },
 
   computed: {
     computedStationList() {
-      const list = this.filterManager.getFilteredStationList(this.store.stationList, this.store.region.id);
+      const list = this.filterStore.getFilteredStationList(this.store.stationList, this.store.region.id);
 
       return list;
     },
   },
 
   mounted() {
-    if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
+    this.filterStore.setupFilters();
+    // this.filterStore.inputs.options.forEach((option) => {
+    //   const value = StorageManager.getBooleanValue(option.name);
+    //   option.value = value;
+    //   this.filterStore.changeFilterValue({ name: option.name, value: value });
+    // });
 
-    this.filterManager.checkFilters();
+    // this.filterStore.inputs.sliders.forEach((slider) => {
-
+    //   const value = StorageManager.getNumericValue(slider.name);
-    this.inputs.options.forEach((option) => {
+    //   slider.value = value;
-      const value = StorageManager.getBooleanValue(option.name);
+    //   this.filterStore.changeFilterValue({ name: slider.name, value: value });
-      this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
+    // });
-      option.value = value;
-    });
-
-    this.inputs.sliders.forEach((slider) => {
-      const value = StorageManager.getNumericValue(slider.name);
-      this.changeFilterValue({ name: slider.name, value });
-      slider.value = value;
-    });
-  },
-
-  methods: {
-    toggleCardsState(name: string): void {
-      if (name == 'filter') {
-        this.filterCardOpen = !this.filterCardOpen;
-      }
-    },
-
-    changeSorter(index: number) {
-      this.filterManager.changeSorter(index);
-    },
-
-    changeFilterValue(filter: { name: string; value: number }) {
-      this.filterManager.changeFilterValue(filter);
-    },
-
-    resetFilters() {
-      this.filterManager.resetFilters();
-    },
-
-    invertFilters() {
-      this.filterManager.invertFilters();
-    },
-
-    closeCard() {
-      this.filterCardOpen = false;
-    },
-
-    setFocusedStation(name: string) {
-      this.focusedStationName = this.focusedStationName == name ? '' : name;
-    },
   },
 });
 </script>