From bcf750d45162688440a9cc18bfd0817745a6ee25 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 22 Sep 2022 14:57:03 +0200
Subject: [PATCH] =?UTF-8?q?Wywo=C5=82ywanie=20filtr=C3=B3w=20za=20pomoc?=
 =?UTF-8?q?=C4=85=20klawisza=20F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 21 ++++++++++---
 .../StationsView/StationFilterCard.vue        | 12 +++++--
 src/components/TrainsView/TrainOptions.vue    | 31 ++++++++++++++-----
 src/mixins/keyMixin.ts                        | 25 +++++++++++++++
 src/views/TrainsView.vue                      |  4 +++
 5 files changed, 79 insertions(+), 14 deletions(-)
 create mode 100644 src/mixins/keyMixin.ts

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 85522e9..ba106b4 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 9bbab00..a3fe9d3 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/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,
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 68cc901..5b4d3eb 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/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>
diff --git a/src/mixins/keyMixin.ts b/src/mixins/keyMixin.ts
new file mode 100644
index 0000000..dd1979f
--- /dev/null
+++ b/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();
+    },
+  },
+});
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 41c1048..0797a4d 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -79,7 +79,11 @@ export default defineComponent({
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';
     }
+
   },
+
+
+
 });
 </script>