poprawki filtrów scenerii

src/components/StationsView/FilterOption.vue

@@ -1,14 +1,10 @@
 <template>
-  <button
+  <label @dblclick="handleDbClick">
-    class="btn--action"
+    <input v-model="option.value" type="checkbox" :class="option.section" :name="option.id" />
-    :class="option.section"
+    <span>
-    :data-selected="option.value"
-    @click="handleLeftClick"
-    @dblclick="handleDbClick"
-    :aria-disabled="option.value"
-  >
       {{ $t(`filters.${option.id}`) }}
-  </button>
+    </span>
+  </label>
 </template>
 
 <script lang="ts">
@@ -37,38 +33,24 @@ export default defineComponent({
     };
   },
 
-  methods: {
+  watch: {
-    handleLeftClick() {
+    'option.value'() {
-      this.option.value = !this.option.value;
+      this.filterStore.changeFilterValue(this.option.name, !this.option.value);
-      this.filterStore.lastClickedFilterId = '';
+    },
-
-      this.filterStore.changeFilterValue({
-        name: this.option.name,
-        value: !this.option.value,
-      });
   },
 
+  methods: {
     handleDbClick(e: Event) {
       e.preventDefault();
 
       this.filterStore.lastClickedFilterId = this.option.id;
       this.option.value = true;
 
-      this.filterStore.changeFilterValue({
-        name: this.option.name,
-        value: !this.option.value,
-      });
-
       this.filterStore.inputs.options
         .filter((option) => {
           return option.section == this.option.section && option.id != this.option.id;
         })
         .forEach((option) => {
-          this.filterStore.changeFilterValue({
-            name: option.name,
-            value: this.option.value,
-          });
-
           option.value = !this.option.value;
         });
     },
@@ -77,26 +59,41 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$realityCol: #e03b07;
+@import '../../styles/variables.scss';
-$accessCol: #e03b07;
-$controlCol: #0085ff;
-$signalCol: #bf7c00;
-$statusCol: #349b32;
-$saveCol: #28a826;
-$routesCol: #9049c0;
 
-button {
+label {
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  span {
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
     padding: 0.25em;
-  border-radius: 0;
+    background-color: #444;
-
-  &:focus-visible {
-    outline: 1px solid white;
   }
 
-  &[data-selected='true'] {
+  span:hover {
+    background-color: #555;
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+
+    &:checked + span {
       background-color: forestgreen;
       font-weight: bold;
     }
+
+    &:focus-visible + span {
+      outline: 1px solid $accentCol;
+    }
+  }
 }
 </style>
 

src/components/StationsView/StationFilterCard.vue

@@ -55,7 +55,7 @@
               <hr />
 
               <div class="section-inputs">
-                <filter-option
+                <FilterOption
                   v-for="(option, i) in filterStore.inputs.options.filter((o) => o.section == section)"
                   :option="option"
                   :key="i"
@@ -224,10 +224,7 @@ export default defineComponent({
     handleInput(e: Event) {
       const target = e.target as HTMLInputElement;
 
-      this.filterStore.changeFilterValue({
+      this.filterStore.changeFilterValue(target.name, target.value);
-        name: target.name,
-        value: target.value,
-      });
 
       if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
     },
@@ -241,11 +238,7 @@ export default defineComponent({
     },
 
     changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.filterStore.changeFilterValue({
+      this.filterStore.changeFilterValue(name, value);
-        name,
-        value,
-      });
-
       if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
     },
 

src/components/StationsView/StationTable.vue

@@ -1,9 +1,5 @@
 <template>
   <section class="station_table">
-    <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
-      <img :src="icons.arrow" alt="return arrow" />
-    </button>
-
     <div class="table_wrapper">
       <table>
         <thead>

src/store/stationFiltersStore.ts

@@ -63,7 +63,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
         case 'all-available':
           this.resetFilters();
 
-          this.changeFilterValue({ name: 'non-public', value: false });
+          // this.changeFilterValue('non-public', false);
           break;
 
         default:
@@ -71,10 +71,9 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       }
     },
 
-    changeFilterValue(filter: { name: string; value: any }) {
+    changeFilterValue(name: string, value: any) {
-      this.filters[filter.name] = filter.value;
+      this.filters[name] = value;
-
+      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(name, value);
-      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(filter.name, filter.value);
     },
 
     resetFilters() {
@@ -92,12 +91,10 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
     },
 
     resetSectionOptions(section: string) {
-      this.inputs.options.forEach((option) => {
+      this.inputs.options
-        if (option.section != section) return;
+        .filter((option) => option.section == section)
-
+        .forEach((option) => {
           option.value = option.defaultValue;
-        this.filters[option.id] = !option.defaultValue;
-
           StorageManager.setBooleanValue(option.name, !option.defaultValue);
         });
     },

src/views/StationsView.vue

@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-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';
@@ -44,9 +43,7 @@ export default defineComponent({
 
   computed: {
     computedStationList() {
-      const list = this.filterStore.getFilteredStationList(this.store.stationList, this.store.region.id);
+      return this.filterStore.getFilteredStationList(this.store.stationList, this.store.region.id);
-
-      return list;
     },
   },