Wywoływanie filtrów za pomocą klawisza F

src/components/JournalView/JournalOptions.vue

@@ -4,7 +4,7 @@
 
     <button class="btn--image" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-      {{ $t('options.filters') }}
+      {{ $t('options.filters') }} [F]
     </button>
 
     <transition name="options-anim">
@@ -53,6 +53,8 @@
                   v-else
                   class="search-input"
                   @keydown.enter="onSearchConfirm"
+                  @focus="preventKeyDown = true"
+                  @blur="preventKeyDown = false"
                   :placeholder="$t(`options.${propName}`)"
                   v-model="searchersValues[propName]"
                 />
@@ -68,7 +70,7 @@
                 {{ $t('options.reset-button') }}
               </action-button>
 
-              <action-button class="search-button" @click="onSearchConfirm">
+              <action-button class="search-button" @click="onSearchButtonConfirm">
                 {{ $t('options.search-button') }}
               </action-button>
             </div>
@@ -87,6 +89,7 @@
 <script lang="ts">
 import { defineComponent, inject, Prop, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
@@ -95,7 +98,7 @@ import SelectBox from '../Global/SelectBox.vue';
 export default defineComponent({
   components: { SelectBox, ActionButton },
   emits: ['onSearchConfirm', 'onOptionsReset'],
-  mixins: [imageMixin],
+  mixins: [imageMixin, keyMixin],
 
   props: {
     sorterOptionIds: {
@@ -139,6 +142,11 @@ export default defineComponent({
   },
 
   methods: {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.showOptions = !this.showOptions;
+    },
+
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
@@ -159,6 +167,11 @@ export default defineComponent({
       this.$emit('onSearchConfirm');
     },
 
+    onSearchButtonConfirm() {
+      this.showOptions = false;
+      this.$emit('onSearchConfirm');
+    },
+
     onResetButtonClick() {
       this.$emit('onOptionsReset');
     },
@@ -168,4 +181,4 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/filters_options.scss';
-</style>
+</style>

src/components/StationsView/StationFilterCard.vue

@@ -3,7 +3,7 @@
     <div class="card_btn">
       <button class="btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
-        {{ $t('options.filters') }}
+        {{ $t('options.filters') }} [F]
       </button>
     </div>
 
@@ -42,6 +42,8 @@
               name="authors"
               v-model="authorsInputValue"
               @input="handleAuthorsInput"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
             />
           </section>
 
@@ -94,6 +96,7 @@
 import { defineComponent, inject } from 'vue';
 import inputData from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
 import StorageManager from '../../scripts/managers/storageManager';
 import { useStore } from '../../store/store';
 
@@ -103,7 +106,7 @@ import FilterOption from './FilterOption.vue';
 export default defineComponent({
   components: { ActionButton, FilterOption },
   emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
-  mixins: [imageMixin],
+  mixins: [imageMixin, keyMixin],
 
   data: () => ({
     inputs: { ...inputData },
@@ -141,6 +144,11 @@ export default defineComponent({
   },
 
   methods: {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.isVisible = !this.isVisible;
+    },
+
     handleChange(change: { name: string; value: boolean }) {
       this.$emit('changeFilterValue', {
         name: change.name,

src/components/TrainsView/TrainOptions.vue

@@ -4,7 +4,7 @@
 
     <button class="btn--image" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-      {{ $t('options.filters') }}
+      {{ $t('options.filters') }} [F]
     </button>
 
     <transition name="options-anim">
@@ -39,13 +39,26 @@
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search-box">
-              <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
+              <input
+                class="search-input"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+                :placeholder="$t(`options.search-train`)"
+                v-model="searchedTrain"
+              />
               <button class="search-exit">
                 <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
               </button>
             </div>
+
             <div class="search-box">
-              <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
+              <input
+                class="search-input"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+              />
               <button class="search-exit">
                 <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
               </button>
@@ -60,13 +73,14 @@
 <script lang="ts">
 import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  mixins: [imageMixin],
+  mixins: [imageMixin, keyMixin],
 
   props: {
     sorterOptionIds: {
@@ -101,6 +115,11 @@ export default defineComponent({
   },
 
   methods: {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.showOptions = !this.showOptions;
+    },
+
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
@@ -126,10 +145,6 @@ export default defineComponent({
       if (id == 'driver') this.searchedDriver = '';
       if (id == 'train') this.searchedTrain = '';
     },
-
-    test(e: Event) {
-      console.log(e.target);
-    },
   },
 });
 </script>

src/mixins/keyMixin.ts

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    return {
+      preventKeyDown: false,
+    };
+  },
+
+  activated() {
+    window.addEventListener('keydown', this.handleKeyDown);
+  },
+
+  deactivated() {
+    window.removeEventListener('keydown', this.handleKeyDown);
+  },
+
+  methods: {
+    onKeyDownFunction() {},
+
+    handleKeyDown(e: KeyboardEvent) {
+      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown) this.onKeyDownFunction();
+    },
+  },
+});

src/views/TrainsView.vue

@@ -79,7 +79,11 @@ export default defineComponent({
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';
     }
+
   },
+
+
+
 });
 </script>