Fix: bug routingu dzienników

src/App.vue

@@ -10,7 +10,7 @@
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
-        <keep-alive>
+        <keep-alive exclude="JournalView">
           <component :is="Component" :key="$route.name" />
         </keep-alive>
       </router-view>

src/components/JournalView/DriverStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="journal-stats" v-if="store.driverStatsData?._sum.routeDistance != null">
+  <div class="journal-stats" v-if="store.driverStatsData">
     <h1>
       {{ $t('journal.stats-title') }} <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
     </h1>

src/components/JournalView/JournalHeader.vue

@@ -0,0 +1,46 @@
+<template>
+  <section class="journal-header">
+    <div class="journal-type-options">
+      <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" active-class="route-active" to="/journal/dispatchers">
+        {{ $t('journal.section-dispatchers') }}
+      </router-link>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style lang="scss" scoped>
+.journal-type-options {
+  display: flex;
+  justify-content: center;
+
+  background-color: #2c2c2c;
+  max-width: 18em;
+
+  font-size: 1.2em;
+  margin: 0 auto;
+
+  border-radius: 0 0 0.5em 0.5em;
+  padding: 0.1em 0;
+}
+
+.journal-section > section {
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+}
+
+.router-link.active {
+  color: gold;
+}
+</style>

src/components/JournalView/TimetablesStats.vue

@@ -4,8 +4,9 @@
       <button
         v-for="tab in data.tabs"
         class="btn--filled"
-        :data-disabled="tab.disabled"
         :disabled="tab.disabled"
+        :data-disabled="tab.disabled"
+        :data-selected="tab.name == store.currentStatsTab"
         @click="onTabButtonClick(tab.name, tab.disabled)"
       >
         {{ tab.title }}
@@ -19,7 +20,7 @@
 
 <script setup lang="ts">
 import axios from 'axios';
-import { computed, onActivated, reactive, Ref, ref, watch } from 'vue';
+import { computed, onActivated, onDeactivated, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
@@ -32,6 +33,7 @@ type TStatTab = 'daily' | 'driver';
 // Variables
 
 const store = useStore();
+const intervalId = ref(-1);
 
 let data = reactive({
   tabs: [
@@ -64,6 +66,35 @@ function onTabButtonClick(tab: TStatTab, disabled: boolean) {
   if (!disabled) store.currentStatsTab = tab;
 }
 
+async function fetchDailyTimetableStats() {
+  console.log('test');
+
+  try {
+    const {
+      distanceAvg,
+      distanceSum,
+      maxTimetable,
+      totalTimetables,
+      mostActiveDispatcher,
+    }: ITimetablesDailyStatsResponse = await (
+      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
+    ).data;
+
+    data.stats = {
+      totalTimetables,
+      distanceSum,
+      distanceAvg,
+      timetableAuthor: maxTimetable?.authorName || '',
+      timetableDriver: maxTimetable?.driverName || '',
+      timetableId: maxTimetable?.timetableId || 0,
+      timetableRouteDistance: maxTimetable?.routeDistance || 0,
+      dispatcherName: mostActiveDispatcher?.name || '',
+      dispatcherTimetablesCount: mostActiveDispatcher?.count || 0,
+    };
+  } catch (error) {
+    console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+  }
+}
 // Translation
 
 const { t } = useI18n();
@@ -101,37 +132,19 @@ watch(
   }
 );
 
-onActivated(async () => {
-  try {
-    const {
-      distanceAvg,
-      distanceSum,
-      maxTimetable,
-      totalTimetables,
-      mostActiveDispatcher,
-    }: ITimetablesDailyStatsResponse = await (
-      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
-    ).data;
+onActivated(() => {
+  fetchDailyTimetableStats();
+  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
+});
 
-    data.stats = {
-      totalTimetables,
-      distanceSum,
-      distanceAvg,
-      timetableAuthor: maxTimetable?.authorName || '',
-      timetableDriver: maxTimetable?.driverName || '',
-      timetableId: maxTimetable?.timetableId || 0,
-      timetableRouteDistance: maxTimetable?.routeDistance || 0,
-      dispatcherName: mostActiveDispatcher?.name || '',
-      dispatcherTimetablesCount: mostActiveDispatcher?.count || 0,
-    };
-  } catch (error) {
-    console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
-  }
+onDeactivated(() => {
+  clearInterval(intervalId.value);
 });
 </script>
 
 <style lang="scss" scoped>
 @import '../../styles/JournalStats.scss';
+@import '../../styles/variables.scss';
 
 .tabs {
   display: flex;
@@ -141,6 +154,10 @@ onActivated(async () => {
     font-weight: bold;
     border-radius: 0.4em 0.4em 0 0;
     padding: 0.5em 0.75em;
+
+    &[data-selected='true'] {
+      color: $accentCol;
+    }
   }
 }
 

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import JournalDispatchersVue from '../components/JournalView/JournalDispatchers.vue';
-import JournalTimetablesVue from '../components/JournalView/JournalTimetables.vue';
+import JournalDispatchersVue from '../views/JournalDispatchers.vue';
+import JournalTimetablesVue from '../views/JournalTimetables.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -19,25 +19,9 @@ const routes: Array<RouteRecordRaw> = [
     name: 'SceneryView',
     component: () => import('../views/SceneryView.vue'),
   },
+
   {
-    path: '/journal',
-    name: 'JournalView',
-    component: () => import('../views/JournalView.vue'),
-    children: [
-      {
-        path: '',
-        name: 'JournalTimetables',
-        component: JournalTimetablesVue,
-        alias: '/timetables',
-      },
-      {
-        path: 'dispatchers',
-        name: 'JournalDispatchers',
-        component: JournalDispatchersVue,
-        props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
-      },
-      {
-        path: 'timetables',
+    path: '/journal/timetables',
     name: 'JournalTimetables',
     component: JournalTimetablesVue,
     props: (route) => ({
@@ -46,7 +30,11 @@ const routes: Array<RouteRecordRaw> = [
       timetableId: route.query.timetableId,
     }),
   },
-    ],
+  {
+    path: '/journal/dispatchers',
+    name: 'JournalDispatchers',
+    component: JournalDispatchersVue,
+    props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
   },
   {
     path: '/:catchAll(.*)',

src/styles/JournalSection.scss

@@ -30,6 +30,8 @@
   max-width: 1350px;
   width: 100%;
 
+  margin: 0 auto;
+
   padding: 1em 0;
 }
 

src/views/JournalDispatchers.vue

@@ -1,5 +1,7 @@
 <template>
   <section class="journal-timetables">
+    <JournalHeader />
+
     <div class="journal_wrapper">
       <JournalOptions
         @on-search-confirm="searchHistory"
@@ -51,24 +53,25 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
-import ActionButton from '../../components/Global/ActionButton.vue';
-import JournalOptions from '../../components/JournalView/JournalOptions.vue';
-import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
-import SearchBox from '../Global/SearchBox.vue';
+import ActionButton from '../components/Global/ActionButton.vue';
+import JournalOptions from '../components/JournalView/JournalOptions.vue';
+import DispatcherStats from '../components/JournalView/DispatcherStats.vue';
+import SearchBox from '../components/Global/SearchBox.vue';
 
-import Loading from '../Global/Loading.vue';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { useStore } from '../../store/store';
-import JournalDispatchersList from './JournalDispatchersList.vue';
-import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../../types/Journal/JournalDispatcherTypes';
-import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
-import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
+import Loading from '../components/Global/Loading.vue';
+import { URLs } from '../scripts/utils/apiURLs';
+import { DataStatus } from '../scripts/enums/DataStatus';
+import { useStore } from '../store/store';
+import JournalDispatchersList from '../components/JournalView/JournalDispatchersList.vue';
+import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../types/Journal/JournalDispatcherTypes';
+import { DispatcherHistory } from '../scripts/interfaces/api/DispatchersAPIData';
+import { JournalTimetableFilter } from '../types/Journal/JournalTimetablesTypes';
+import JournalHeader from '../components/JournalView/JournalHeader.vue';
 
 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
 
 export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList },
+  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList, JournalHeader },
   name: 'JournalDispatchers',
 
   props: {
@@ -260,5 +263,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
+@import '../styles/JournalSection.scss';
 </style>

src/views/JournalTimetables.vue

@@ -1,5 +1,7 @@
 <template>
   <section class="journal-timetables">
+    <JournalHeader />
+    
     <div class="journal_wrapper">
       <TimetablesStats />
 
@@ -52,28 +54,29 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
-import DriverStats from './DriverStats.vue';
-import Loading from '../Global/Loading.vue';
-import { JournalTimetableFilter, JournalTimetableSorter } from '../../types/Journal/JournalTimetablesTypes';
-import dateMixin from '../../mixins/dateMixin';
-import routerMixin from '../../mixins/routerMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
-import JournalOptions from './JournalOptions.vue';
-import { JorunalTimetableSearchType } from '../../types/Journal/JournalTimetablesTypes';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import imageMixin from '../../mixins/imageMixin';
-import JournalTimetablesList from './JournalTimetablesList.vue';
-import { journalTimetableFilters } from '../../constants/Journal/JournalTimetablesConsts';
-import TimetablesStats from './TimetablesStats.vue';
+import DriverStats from '../components/JournalView/DriverStats.vue';
+import Loading from '../components/Global/Loading.vue';
+import { JournalTimetableFilter, JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
+import dateMixin from '../mixins/dateMixin';
+import routerMixin from '../mixins/routerMixin';
+import { DataStatus } from '../scripts/enums/DataStatus';
+import { JournalFilterType } from '../scripts/enums/JournalFilterType';
+import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '../scripts/utils/apiURLs';
+import { useStore } from '../store/store';
+import JournalOptions from '../components/JournalView/JournalOptions.vue';
+import { JorunalTimetableSearchType } from '../types/Journal/JournalTimetablesTypes';
+import modalTrainMixin from '../mixins/modalTrainMixin';
+import imageMixin from '../mixins/imageMixin';
+import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
+import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
+import TimetablesStats from '../components/JournalView/TimetablesStats.vue';
+import JournalHeader from '../components/JournalView/JournalHeader.vue';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, TimetablesStats },
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, TimetablesStats, JournalHeader },
   mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
 
   name: 'JournalTimetables',
@@ -142,6 +145,8 @@ export default defineComponent({
   },
 
   mounted() {
+    console.log('mounted');
+    
     if (!this.timetableId) this.searchHistory();
   },
 
@@ -282,5 +287,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
+@import '../styles/JournalSection.scss';
 </style>

src/views/JournalView.vue

@@ -1,77 +0,0 @@
-<template>
-  <section class="journal-view">
-    <div class="journal-type-options">
-      <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" active-class="route-active" to="/journal/dispatchers">
-        {{ $t('journal.section-dispatchers') }}
-      </router-link>
-    </div>
-
-    <div class="journal-section">
-      <router-view v-slot="{ Component }">
-        <keep-alive>
-          <component :is="Component" :key="$route.path" />
-        </keep-alive>
-      </router-view>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import JournalDispatchers from '../components/JournalView/JournalDispatchers.vue';
-import JournalTimetables from '../components/JournalView/JournalTimetables.vue';
-
-export default defineComponent({
-  components: { JournalDispatchers, JournalTimetables },
-  setup() {
-    const journalTypeChosen = ref('journalTimetables');
-
-    return {
-      activeJournalComponent: journalTypeChosen,
-    };
-  },
-
-  methods: {
-    changeJournalType(type: string) {
-      this.activeJournalComponent = type;
-    },
-  },
-
-  activated() {
-    const query = this.$route.query;
-
-    if (query.view == 'dispatchers') this.activeJournalComponent = 'journalDispatchers';
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.journal-type-options {
-  display: flex;
-  justify-content: center;
-
-  background-color: #2c2c2c;
-  max-width: 18em;
-
-  font-size: 1.2em;
-  margin: 0 auto;
-
-  border-radius: 0 0 0.5em 0.5em;
-  padding: 0.1em 0;
-}
-
-.journal-section > section {
-  height: 100%;
-
-  display: flex;
-  justify-content: center;
-}
-
-.router-link.active {
-  color: gold;
-}
-</style>