Poprawki

src/App.vue

@@ -41,7 +41,9 @@
             <Clock />
 
             <div class="info_counter">
-              <span class="region">{{ currentRegion.value }}</span>
+              <span class="region" @click="openFilterCard">
+                {{ currentRegion.value }}
+              </span>
 
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
               <span>{{ data.activeStationCount }}</span>
@@ -87,7 +89,14 @@
 import Clock from "@/components/App/Clock.vue";
 
 import StorageManager from "@/scripts/managers/storageManager";
-import { computed, ComputedRef, defineComponent } from "vue";
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  inject,
+  provide,
+  ref,
+} from "vue";
 import { GETTERS } from "./constants/storeConstants";
 import { StoreData } from "./scripts/interfaces/StoreData";
 import { useStore } from "./store";
@@ -111,9 +120,18 @@ export default defineComponent({
       () => store.getters[GETTERS.currentRegion]
     );
 
+    const isFilterCardVisible = ref(false);
+
+    provide("isFilterCardVisible", isFilterCardVisible);
+
     return {
       data,
       currentRegion,
+      isFilterCardVisible,
+
+      openFilterCard() {
+        isFilterCardVisible.value = true;
+      },
     };
   },
 

src/components/StationsView/StationFilterCard.vue

@@ -97,8 +97,7 @@ import { ACTIONS, GETTERS, MUTATIONS } from "@/constants/storeConstants";
 import inputData from "@/data/options.json";
 
 import StorageManager from "@/scripts/managers/storageManager";
-import { useStore } from "@/store";
-import { computed, ComputedRef, defineComponent } from "@vue/runtime-core";
+import { defineComponent, inject, provide, ref } from "@vue/runtime-core";
 import ActionButton from "../Global/ActionButton.vue";
 import FilterOption from "./FilterOption.vue";
 
@@ -112,11 +111,18 @@ export default defineComponent({
     inputs: { ...inputData },
     saveOptions: false,
     STORAGE_KEY: "options_saved",
-    isVisible: false,
 
     currentRegion: { id: "", value: "" },
   }),
 
+  setup() {
+    const isVisible = inject("isFilterCardVisible");
+
+    return {
+      isVisible,
+    };
+  },
+
   mounted() {
     this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
 

src/data/options.json

@@ -201,15 +201,15 @@
     "value": "PL1"
   },
   {
-    "id": "eu2",
+    "id": "cae",
     "value": "PL2"
   },
   {
-    "id": "de",
+    "id": "usw",
     "value": "DE"
   },
   {
-    "id": "cze",
+    "id": "us",
     "value": "CZE"
   },
   {

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp, Directive } from 'vue'
+import { createApp, Directive, ref } from 'vue'
 import App from './App.vue'
 import router from './router'
 import { store, key } from './store'
@@ -35,5 +35,6 @@ createApp(App)
   .use(store, key)
   .use(router)
   .use(i18n)
+  .provide('isFilterCardVisible', ref(false))
   .directive('click-outside', clickOutsideDirective)
   .mount('#app')

src/views/StationsView.vue

@@ -9,6 +9,7 @@
             @changeFilterValue="changeFilterValue"
             @invertFilters="invertFilters"
             @resetFilters="resetFilters"
+            ref="filterCardRef"
           />
 
           <div class="paypal-link">