Filtry scenerii

src/components/StationsView/FilterOption.vue

@@ -1,23 +1,12 @@
 <template>
-  <div class="filter-option option">
-    <label>
-      <input
-        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>
+  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
+    {{ $t(`filters.${option.id}`) }}
+  </button>
 </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') {
-        location.href = 'https://www.youtube.com/watch?v=HIcSWuKMwOw';
-        return;
-      }
+      this.option.value = !this.option.value;
 
-      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 {
-  font-size: 0.9em;
-  &.checked {
+button {
+  width: 100%;
+  padding: 0.4em;
+  border-radius: 0.4em;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &[data-selected='true'] {
     &.access {
       background-color: $accessCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $accessCol;
-      }
+      box-shadow: 0 0 6px 1px $accessCol;
     }
 
     &.control {
       background-color: $controlCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $controlCol;
-      }
+      box-shadow: 0 0 6px 1px $controlCol;
     }
 
     &.signals {
       background-color: $signalCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $signalCol;
-      }
+      box-shadow: 0 0 6px 1px $signalCol;
     }
 
     &.routes {
       background-color: $routesCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $routesCol;
-      }
+      box-shadow: 0 0 6px 1px $routesCol;
     }
 
     &.status {
       background-color: $statusCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $statusCol;
-      }
+      box-shadow: 0 0 6px 1px $statusCol;
     }
 
     &.save {
       background-color: $saveCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $saveCol;
-      }
+      box-shadow: 0 0 6px 1px $saveCol;
     }
 
     &.troll {
       background-color: firebrick;
-
-      &::before {
-        box-shadow: 0 0 6px 1px firebrick;
-      }
+      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() {
-      this.inputs.options.forEach((option) => {
-        option.value = !option.value;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.$emit('invertFilters');
-    },
-
-    saveFilters(change: { value: any }) {
-      this.saveOptions = change.value;
+    saveFilters() {
+      this.saveOptions = !this.saveOptions;
 
       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.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.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));
     },
 
     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.$emit('resetFilters');
+      this.filterStore.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;
-      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 {
+      span {
+        min-width: 120px;
+        font-weight: bold;
         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>