Fix routingu widoków i filtrowania scenerii

src/components/JournalView/JournalDispatchers.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref } from 'vue';
+import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref, watch } from 'vue';
 import axios from 'axios';
 
 import SearchBox from '@/components/Global/SearchBox.vue';
@@ -111,6 +111,7 @@ import { URLs } from '@/scripts/utils/apiURLs';
 import { useStore } from '@/store/store';
 import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
 import Loading from '../Global/Loading.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -165,7 +166,11 @@ export default defineComponent({
     statsCardOpen: false,
   }),
 
-  setup() {
+  setup(props) {
+    watch(props, (val) => {
+      console.log(val.dispatcherName);
+    });
+
     const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
       status: DataStatus.Loading,
       error: null,
@@ -216,23 +221,20 @@ export default defineComponent({
     },
   },
 
-  mounted() {
+activated() {
-    const query = this.$route.query;
+    if (this.sceneryName || this.dispatcherName) {
-
+      this.searchersValues[1].value = this.sceneryName?.toString() || '';
-    if (query.sceneryName || query.dispatcherName) {
+      this.searchersValues[0].value = this.dispatcherName?.toString() || '';
-      this.searchersValues[1].value = query.sceneryName?.toString() || '';
-      this.searchersValues[0].value = query.dispatcherName?.toString() || '';
-
       this.search();
-
-      return;
     }
 
-    this.fetchHistoryData();
+    window.addEventListener('scroll', this.handleScroll);
   },
 
-  activated() {
+  mounted() {
-    window.addEventListener('scroll', this.handleScroll);
+    if (!this.sceneryName && !this.dispatcherName) {
+      this.search();
+    }
   },
 
   deactivated() {

src/components/JournalView/JournalTimetables.vue

@@ -124,7 +124,7 @@
                         <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
                         <router-link
                           class="dispatcher-link"
-                          :to="`/journal?view=dispatchers&dispatcherName=${item.authorName}`"
+                          :to="`/journal/dispatchers?dispatcherName=${item.authorName}`"
                           >{{ item.authorName }}</router-link
                         >
                       </div>
@@ -247,14 +247,14 @@ export default defineComponent({
     };
   },
 
-  mounted() {
-    this.fetchHistoryData();
-  },
-
   activated() {
     window.addEventListener('scroll', this.handleScroll);
   },
 
+  mounted() {
+    this.search();
+  },
+
   deactivated() {
     window.removeEventListener('scroll', this.handleScroll);
   },
@@ -263,7 +263,10 @@ export default defineComponent({
     navigateToTimetable(historyItem: TimetableHistory) {
       if (historyItem.terminated) return;
 
-      this.navigateToTrain(historyItem.trainNo, historyItem.driverName);
+      this.navigateTo('/trains', {
+        trainNo: historyItem.trainNo,
+        driverName: historyItem.driverName,
+      });
     },
 
     closeCard() {

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -5,7 +5,12 @@
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>
 
-      <span class="dispatcher_name">{{ station.onlineInfo.dispatcherName }}</span>
+      <router-link
+        class="dispatcher_name"
+        :to="`/journal/dispatchers?dispatcherName=${station.onlineInfo.dispatcherName}`"
+      >
+        {{ station.onlineInfo.dispatcherName }}
+      </router-link>
 
       <span class="dispatcher_likes text--primary">
         <img :src="icons.like" alt="icon-like" />
@@ -34,9 +39,10 @@ import { defineComponent } from 'vue';
 import styleMixin from '@/mixins/styleMixin';
 import Station from '@/scripts/interfaces/Station';
 import dateMixin from '@/mixins/dateMixin';
+import routerMixin from '@/mixins/routerMixin';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin],
+  mixins: [styleMixin, dateMixin, routerMixin],
   props: {
     station: {
       type: Object as () => Station,
@@ -84,6 +90,7 @@ export default defineComponent({
 
     &_name {
       margin-right: 0.4em;
+      cursor: pointer;
     }
 
     &_likes {

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -13,8 +13,8 @@
       :class="train.stopStatus"
       :key="train.trainNo + i"
       tabindex="0"
-      @click="() => navigateToTrain(train.trainNo, train.driverName)"
+      @click="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
-      @keydown.enter="navigateToTrain(train.trainNo, train.driverName)"
+      @keydown.enter="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
     >
       <span class="user_train">{{ train.trainNo }}</span>
       <span class="user_name">{{ train.driverName }}</span>

src/components/SceneryView/SceneryTimetable.vue

@@ -44,8 +44,13 @@
           v-for="(scheduledTrain, i) in computedScheduledTrains"
           :key="i + 1"
           tabindex="0"
-          @click="navigateToTrain(scheduledTrain.trainNo, scheduledTrain.driverName)"
+          @click="navigateTo('/trains', { trainNo: scheduledTrain.trainNo, driverName: scheduledTrain.driverName })"
-          @keydown.enter="navigateToTrain(scheduledTrain.trainNo, scheduledTrain.driverName)"
+          @keydown.enter="
+            navigateTo('/trains', {
+              trainNo: scheduledTrain.trainNo,
+              driverName: scheduledTrain.driverName,
+            })
+          "
         >
           <span class="timetable-general">
             <span class="general-info">

src/components/TrainsView/TrainInfo.vue

@@ -4,13 +4,23 @@
       <span>
         <div>
           <span>
+            <!-- <router-link
+              v-if="train.timetableData"
+              :to="`/journal/timetables?timetableId=${train.timetableData.timetableId}`"
+              style="color: #ddd; margin-right: 0.3em"
+            >
+              #{{ train.timetableData.timetableId }}
+            </router-link> -->
+
+            <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
+
             <span class="timetable_warnings">
               <span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
               <span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
             </span>
             <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
             <strong>{{ train.trainNo }}</strong>
-            <span>&nbsp;| {{ train.driverName }}</span>
+            <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
           </span>
 
           <img
@@ -23,8 +33,8 @@
           />
         </div>
 
-        <div class="timetable_route">
+        <div class="timetable_route" v-if="train.timetableData">
-          <strong v-if="train.timetableData">{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+          <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
           <img
             v-if="getSceneriesWithComments(train.timetableData).length > 0"
             class="image-warning"
@@ -61,9 +71,7 @@
           </span>
         </div>
 
-        <div v-if="!train.online" style="color: salmon">
+        <div v-if="!train.online" style="color: salmon">Offline - {{ lastSeenMessage(train.lastSeen) }}</div>
-          Offline - {{ lastSeenMessage(train.lastSeen) }}
-        </div>
 
         <div class="driver_position text--grayed" style="margin-top: 0.25em">
           <span v-if="train.currentStationHash">
@@ -169,6 +177,11 @@ export default defineComponent({
   text-transform: capitalize;
 }
 
+.timetable-id {
+  margin-right: 0.3em;
+  color: #d2d2d2;
+}
+
 .timetable_stops {
   font-size: 0.75em;
 }
@@ -184,8 +197,9 @@ export default defineComponent({
   color: black;
 
   .warning {
-    padding: 0.1em 0.5em;
+    padding: 0.1em 0.3em;
-    margin-right: 0.2em;
+    margin-right: 0.3em;
+    border-radius: 1em;
 
     font-weight: bold;
 

src/components/TrainsView/TrainTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="train-table" @keydown.esc="closeTimetable" v-click-outside="closeTimetable">
+  <div class="train-table" @keydown.esc="closeTimetable">
     <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
       <img :src="icons.arrowAsc" alt="return arrow" />
     </button>

src/mixins/routerMixin.ts

@@ -1,12 +1,13 @@
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   methods: {
-        navigateToTrain(trainNo: number, driverName: string) {
+
+    navigateTo(path: string, query?: {}) {
       this.$router.push({
-                name: 'TrainsView',
+        path,
-                query: { trainNo, driverName },
+        query,
+      });
+    },
+  },
 });
-        }
-    }
-})

src/router/index.ts

@@ -1,46 +1,65 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import JournalDispatchersVue from '@/components/JournalView/JournalDispatchers.vue';
+import JournalTimetablesVue from '@/components/JournalView/JournalTimetables.vue';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'StationsView',
-    component: () => import("@/views/StationsView.vue")
+    component: () => import('@/views/StationsView.vue'),
   },
   {
-    path: "/trains",
+    path: '/trains',
-    name: "TrainsView",
+    name: 'TrainsView',
-    component: () => import("@/views/TrainsView.vue"),
+    component: () => import('@/views/TrainsView.vue'),
-    props: route => ({ train: route.query.train, driver: route.query.driver })
+    props: (route) => ({ train: route.query.train, driver: route.query.driver }),
   },
   {
-    path: "/scenery",
+    path: '/scenery',
-    name: "SceneryView",
+    name: 'SceneryView',
-    component: () => import("@/views/SceneryView.vue"),
+    component: () => import('@/views/SceneryView.vue'),
-    props: true
+    props: true,
   },
   {
-    path: "/journal",
+    path: '/journal',
-    name: "JournalView",
+    name: 'JournalView',
-    component: () => import("@/views/JournalView.vue")
+    component: () => import('@/views/JournalView.vue'),
+    children: [
+      {
+        path: '',
+        redirect: '/journal/timetables',
+        component: JournalTimetablesVue,
+      },
+      {
+        path: 'dispatchers',
+        component: JournalDispatchersVue,
+        props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
+      },
+      {
+        path: 'timetables',
+        component: JournalTimetablesVue,
+        props: (route) => ({
+          trainNo: route.query.trainNo,
+          driverName: route.query.driverName,
+          timetableId: route.query.timetableId,
+        }),
+      },
+    ],
   },
   {
     path: '/:catchAll(.*)',
-    redirect: "/"
+    redirect: '/',
-  }
+  },
-]
+];
 
 const router = createRouter({
   scrollBehavior(to, from) {
+    if (to.name == 'SceneryView' && from.name) return { el: `.app_main` };
 
-    if (to.name == "SceneryView" && from.name)
+    if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
-      return { el: `.app_main` };
-    
-    if (from.name == "SceneryView" && to.name == "StationsView")
-      return { el: `.last-selected`, top: 20 }
-
   },
   history: createWebHistory(),
   routes,
-})
+});
 
-export default router
+export default router;

src/scripts/managers/stationFilterManager.ts

@@ -246,8 +246,15 @@ export default class StationFilterManager {
     });
   }
 
-  getFilteredStationList(stationList: Station[]): Station[] {
+  getFilteredStationList(stationList: Station[], region: string): Station[] {
     return stationList
+      .map((station) => {
+        if (station.onlineInfo && station.onlineInfo.region != region) {
+          delete station.onlineInfo;
+        }
+
+        return station;
+      })
       .filter((station) => filterStations(station, this.filters))
       .sort((a, b) => sortStations(a, b, this.sorter));
   }

src/views/JournalView.vue

@@ -1,33 +1,22 @@
 <template>
   <section class="journal-view">
     <div class="journal-type-options">
-      <router-link
+      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
-        class="router-link"
-        to="/journal?view=timetables"
-        :class="{ active: activeJournalComponent == 'journalTimetables' }"
-      >
         {{ $t('journal.section-timetables') }}
       </router-link>
       &nbsp;&bull;&nbsp;
-      <router-link
+      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
-        class="router-link"
-        to="/journal?view=dispatchers"
-        :class="{ active: activeJournalComponent == 'journalDispatchers' }"
-      >
         {{ $t('journal.section-dispatchers') }}
       </router-link>
     </div>
 
     <div class="journal-section">
+      <router-view v-slot="{ Component }">
         <keep-alive>
-        <component :is="activeJournalComponent"></component>
+          <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', {
+          navigateTo('/journal/dispatchers', {
-            view: '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(() =>
+    const computedStations: ComputedRef<Station[]> = computed(
-      filterManager
+      () => filterManager.getFilteredStationList(store.stationList, store.region.id)
-        .getFilteredStationList(store.stationList)
+      // .filter((station) => !station.onlineInfo || station.onlineInfo.region == 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>