diff --git a/src/App.vue b/src/App.vue index 8bfc186..7122bce 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,7 +41,9 @@
- {{ currentRegion.value }} + + {{ currentRegion.value }} + icon dispatcher {{ data.activeStationCount }} @@ -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; + }, }; }, diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index 510065f..82ac7ba 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/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); diff --git a/src/data/options.json b/src/data/options.json index fd35506..5a22961 100644 --- a/src/data/options.json +++ b/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" }, { diff --git a/src/main.ts b/src/main.ts index 5ae440b..db98ae9 100644 --- a/src/main.ts +++ b/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') diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index 9716b66..b5a6b69 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -9,6 +9,7 @@ @changeFilterValue="changeFilterValue" @invertFilters="invertFilters" @resetFilters="resetFilters" + ref="filterCardRef" />