Fix routingu widoków i filtrowania scenerii

src/views/JournalView.vue

@@ -1,33 +1,22 @@
 <template>
   <section class="journal-view">
     <div class="journal-type-options">
-      <router-link
-        class="router-link"
-        to="/journal?view=timetables"
-        :class="{ active: activeJournalComponent == 'journalTimetables' }"
-      >
+      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
         {{ $t('journal.section-timetables') }}
       </router-link>
       &nbsp;&bull;&nbsp;
-      <router-link
-        class="router-link"
-        to="/journal?view=dispatchers"
-        :class="{ active: activeJournalComponent == 'journalDispatchers' }"
-      >
+      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
         {{ $t('journal.section-dispatchers') }}
       </router-link>
     </div>
 
     <div class="journal-section">
-      <keep-alive>
-        <component :is="activeJournalComponent"></component>
-      </keep-alive>
+      <router-view v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component" :key="$route.path" />
+        </keep-alive>
+      </router-view>
     </div>
-    <!-- <JournalTimetables v-if="journalTypeChosen == 'timetables'" />
-        <JournalDispatchers
-          v-else-if="journalTypeChosen == 'dispatchers'"
-          :sceneryName="$route.query.sceneryName?.toString()"
-        /> -->
   </section>
 </template>
 

src/views/SceneryView.vue

@@ -22,8 +22,7 @@
         v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
         class="history-btn btn btn--image"
         @click="
-          navigateTo('/journal', {
-            view: 'dispatchers',
+          navigateTo('/journal/dispatchers', {
             sceneryName: stationInfo?.name,
           })
         "
@@ -46,14 +45,17 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
 
-import { computed, defineComponent, reactive } from '@vue/runtime-core';
+import { computed, defineComponent } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
 
 import { useStore } from '@/store/store';
+import routerMixin from '@/mixins/routerMixin';
 
 export default defineComponent({
   components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader },
 
+  mixins: [routerMixin],
+
   data: () => ({
     icons: {
       history: require('@/assets/icon-history.svg'),
@@ -92,13 +94,6 @@ export default defineComponent({
     setCardViewMode(mode: string) {
       this.viewMode = mode;
     },
-
-    navigateTo(path: string, query?: {}) {
-      this.$router.push({
-        path,
-        query,
-      });
-    },
   },
 });
 </script>

src/views/StationsView.vue

@@ -53,17 +53,6 @@ export default defineComponent({
     modalHidden: true,
     STORAGE_KEY: 'options_saved',
     inputs: inputData,
-
-    regions: [
-      {
-        id: 'eu',
-        value: 'PL1',
-      },
-      {
-        id: 'ru',
-        value: 'ENG',
-      },
-    ],
   }),
 
   setup() {
@@ -71,10 +60,9 @@ export default defineComponent({
     const filterManager = reactive(new StationFilterManager());
     const focusedStationName = '';
 
-    const computedStations: ComputedRef<Station[]> = computed(() =>
-      filterManager
-        .getFilteredStationList(store.stationList)
-        .filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
+    const computedStations: ComputedRef<Station[]> = computed(
+      () => filterManager.getFilteredStationList(store.stationList, store.region.id)
+      // .filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
     );
 
     return {
@@ -178,5 +166,4 @@ export default defineComponent({
 
   margin-bottom: 0.5em;
 }
-
 </style>