From 6e07897ac04c96369e50adc360f28c647f6c7914 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 18 Dec 2022 03:01:13 +0100
Subject: [PATCH] =?UTF-8?q?Fix:=20bug=20routingu=20dziennik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/components/JournalView/DriverStats.vue    |   2 +-
 src/components/JournalView/JournalHeader.vue  |  46 ++
 .../JournalView/TimetablesStats.vue           |  71 ++-
 src/router/index.ts                           |  46 +-
 src/styles/JournalSection.scss                |   2 +
 .../JournalDispatchers.vue                    | 531 ++++++++--------
 .../JournalTimetables.vue                     | 577 +++++++++---------
 src/views/JournalView.vue                     |  77 ---
 9 files changed, 669 insertions(+), 685 deletions(-)
 create mode 100644 src/components/JournalView/JournalHeader.vue
 rename src/{components/JournalView => views}/JournalDispatchers.vue (86%)
 rename src/{components/JournalView => views}/JournalTimetables.vue (85%)
 delete mode 100644 src/views/JournalView.vue

diff --git a/src/App.vue b/src/App.vue
index 72426d8..0575a20 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/JournalView/DriverStats.vue b/src/components/JournalView/DriverStats.vue
index 5b06849..e547b85 100644
--- a/src/components/JournalView/DriverStats.vue
+++ b/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>
diff --git a/src/components/JournalView/JournalHeader.vue b/src/components/JournalView/JournalHeader.vue
new file mode 100644
index 0000000..bfa4ced
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/TimetablesStats.vue b/src/components/JournalView/TimetablesStats.vue
index 1cf7897..3c4c74b 100644
--- a/src/components/JournalView/TimetablesStats.vue
+++ b/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;
+    }
   }
 }
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 6dcdf69..6914b75 100644
--- a/src/router/index.ts
+++ b/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,34 +19,22 @@ 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',
-        name: 'JournalTimetables',
-        component: JournalTimetablesVue,
-        props: (route) => ({
-          trainNo: route.query.trainNo,
-          driverName: route.query.driverName,
-          timetableId: route.query.timetableId,
-        }),
-      },
-    ],
+    path: '/journal/timetables',
+    name: 'JournalTimetables',
+    component: JournalTimetablesVue,
+    props: (route) => ({
+      trainNo: route.query.trainNo,
+      driverName: route.query.driverName,
+      timetableId: route.query.timetableId,
+    }),
+  },
+  {
+    path: '/journal/dispatchers',
+    name: 'JournalDispatchers',
+    component: JournalDispatchersVue,
+    props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
   },
   {
     path: '/:catchAll(.*)',
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 8f4de7c..fbe5128 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -30,6 +30,8 @@
   max-width: 1350px;
   width: 100%;
 
+  margin: 0 auto;
+
   padding: 1em 0;
 }
 
diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
similarity index 86%
rename from src/components/JournalView/JournalDispatchers.vue
rename to src/views/JournalDispatchers.vue
index 21762f8..f0a85fb 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -1,264 +1,267 @@
-<template>
-  <section class="journal-timetables">
-    <div class="journal_wrapper">
-      <JournalOptions
-        @on-search-confirm="searchHistory"
-        @on-options-reset="resetOptions"
-        :sorter-option-ids="['timestampFrom', 'duration']"
-        :data-status="dataStatus"
-      />
-
-      <div class="list_wrapper" @scroll="handleScroll">
-        <!-- <transition name="warning" mode="out-in"> -->
-        <!-- <div :key="dataStatus"> -->
-        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
-
-        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
-
-        <div class="journal_warning" v-else-if="historyList.length == 0">
-          {{ $t('app.no-result') }}
-        </div>
-
-        <div v-else>
-          <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
-
-          <button
-            class="btn btn--option btn--load-data"
-            v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
-            @click="addHistoryData"
-          >
-            {{ $t('journal.load-data') }}
-          </button>
-        </div>
-        <!-- </div>
-        </transition> -->
-
-        <div class="journal_warning" v-if="scrollNoMoreData">
-          {{ $t('journal.no-further-data') }}
-        </div>
-
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">
-          {{ $t('journal.loading-further-data') }}
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-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 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';
-
-const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
-
-export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList },
-  name: 'JournalDispatchers',
-
-  props: {
-    sceneryName: {
-      type: String,
-      required: false,
-    },
-
-    dispatcherName: {
-      type: String,
-      required: false,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-
-    dataStatus: DataStatus.Initialized,
-    DataStatus,
-
-    historyList: [] as DispatcherHistory[],
-  }),
-
-  setup() {
-    const sorterActive: JournalDispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
-    const journalFilterActive = ref({});
-
-    const searchersValues = reactive({
-      'search-dispatcher': '',
-      'search-station': '',
-      'search-date': '',
-    } as JournalDispatcherSearcher);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-    provide('searchersValues', searchersValues);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      store: useStore(),
-
-      sorterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-    };
-  },
-
-  computed: {
-    computedHistoryList() {
-      return this.historyList.filter(
-        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
-      );
-    },
-  },
-
-  activated() {
-    if (this.sceneryName || this.dispatcherName) {
-      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
-      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
-      this.searchHistory();
-    }
-  },
-
-  mounted() {
-    if (!this.sceneryName && !this.dispatcherName) {
-      this.searchHistory();
-    }
-  },
-
-  methods: {
-    handleScroll(e: Event) {
-      const listElement = e.target as HTMLElement;
-      const scrollTop = listElement.scrollTop;
-      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
-
-      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
-
-      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
-    },
-
-    resetOptions() {
-      this.searchersValues['search-station'] = '';
-      this.searchersValues['search-dispatcher'] = '';
-      this.sorterActive.id = 'timestampFrom';
-
-      this.searchHistory();
-    },
-
-    searchHistory() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: DispatcherHistory[] = await (
-        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalDispatcherSearcher;
-        filter?: JournalTimetableFilter;
-      } = {}
-    ) {
-      this.dataStatus = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      const dispatcher = props.searchers?.['search-dispatcher'].trim();
-      const station = props.searchers?.['search-station'].trim();
-      const dateString = props.searchers?.['search-date'].trim();
-      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
-      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
-
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
-      if (station) queries.push(`stationName=${station}`);
-      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
-
-      queries.push('countLimit=30');
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: DispatcherHistory[] = await (
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.dataStatus = DataStatus.Error;
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.dispatcherStatsName =
-          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
-            ? this.historyList[0].dispatcherName
-            : '';
-
-        this.dataStatus = DataStatus.Loaded;
-      } catch (error) {
-        this.dataStatus = DataStatus.Error;
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-</style>
+<template>
+  <section class="journal-timetables">
+    <JournalHeader />
+
+    <div class="journal_wrapper">
+      <JournalOptions
+        @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
+        :sorter-option-ids="['timestampFrom', 'duration']"
+        :data-status="dataStatus"
+      />
+
+      <div class="list_wrapper" @scroll="handleScroll">
+        <!-- <transition name="warning" mode="out-in"> -->
+        <!-- <div :key="dataStatus"> -->
+        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div class="journal_warning" v-else-if="historyList.length == 0">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
+        </div>
+        <!-- </div>
+        </transition> -->
+
+        <div class="journal_warning" v-if="scrollNoMoreData">
+          {{ $t('journal.no-further-data') }}
+        </div>
+
+        <div class="journal_warning" v-else-if="!scrollDataLoaded">
+          {{ $t('journal.loading-further-data') }}
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+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 '../components/Global/SearchBox.vue';
+
+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, JournalHeader },
+  name: 'JournalDispatchers',
+
+  props: {
+    sceneryName: {
+      type: String,
+      required: false,
+    },
+
+    dispatcherName: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data: () => ({
+    currentQuery: '',
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+
+    dataStatus: DataStatus.Initialized,
+    DataStatus,
+
+    historyList: [] as DispatcherHistory[],
+  }),
+
+  setup() {
+    const sorterActive: JournalDispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
+    const journalFilterActive = ref({});
+
+    const searchersValues = reactive({
+      'search-dispatcher': '',
+      'search-station': '',
+      'search-date': '',
+    } as JournalDispatcherSearcher);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+    provide('searchersValues', searchersValues);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      store: useStore(),
+
+      sorterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+      maxCount: ref(15),
+    };
+  },
+
+  computed: {
+    computedHistoryList() {
+      return this.historyList.filter(
+        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
+      );
+    },
+  },
+
+  activated() {
+    if (this.sceneryName || this.dispatcherName) {
+      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
+      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
+      this.searchHistory();
+    }
+  },
+
+  mounted() {
+    if (!this.sceneryName && !this.dispatcherName) {
+      this.searchHistory();
+    }
+  },
+
+  methods: {
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
+
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
+
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
+    },
+
+    resetOptions() {
+      this.searchersValues['search-station'] = '';
+      this.searchersValues['search-dispatcher'] = '';
+      this.sorterActive.id = 'timestampFrom';
+
+      this.searchHistory();
+    },
+
+    searchHistory() {
+      this.fetchHistoryData({
+        searchers: this.searchersValues,
+      });
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      const countFrom = this.historyList.length;
+
+      const responseData: DispatcherHistory[] = await (
+        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.historyList.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData(
+      props: {
+        searchers?: JournalDispatcherSearcher;
+        filter?: JournalTimetableFilter;
+      } = {}
+    ) {
+      this.dataStatus = DataStatus.Loading;
+
+      const queries: string[] = [];
+
+      const dispatcher = props.searchers?.['search-dispatcher'].trim();
+      const station = props.searchers?.['search-station'].trim();
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+
+      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
+      if (station) queries.push(`stationName=${station}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
+      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
+      else queries.push('sortBy=timestampFrom');
+
+      queries.push('countLimit=30');
+
+      this.currentQuery = queries.join('&');
+
+      try {
+        const responseData: DispatcherHistory[] = await (
+          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
+        ).data;
+
+        if (!responseData) {
+          this.dataStatus = DataStatus.Error;
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.historyList = responseData;
+
+        // Stats display
+        this.store.dispatcherStatsName =
+          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
+            ? this.historyList[0].dispatcherName
+            : '';
+
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.dataStatus = DataStatus.Error;
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/JournalSection.scss';
+</style>
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/views/JournalTimetables.vue
similarity index 85%
rename from src/components/JournalView/JournalTimetables.vue
rename to src/views/JournalTimetables.vue
index 791a02b..a0e5fb6 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -1,286 +1,291 @@
-<template>
-  <section class="journal-timetables">
-    <div class="journal_wrapper">
-      <TimetablesStats />
-
-      <JournalOptions
-        @on-search-confirm="searchHistory"
-        @on-options-reset="resetOptions"
-        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-        :filters="journalTimetableFilters"
-        :data-status="dataStatus"
-      />
-
-      <!-- <DriverStats /> -->
-      <!-- <button @click="statsCardOpen = true">Stats</button> -->
-
-      <div class="list_wrapper" @scroll="handleScroll">
-        <!-- <transition name="warning" mode="out-in"> -->
-        <!-- <div :key="dataStatus"> -->
-        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
-
-        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
-
-        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-          {{ $t('app.no-result') }}
-        </div>
-
-        <div v-else>
-          <JournalTimetablesList :timetableHistory="timetableHistory" />
-
-          <button
-            class="btn btn--option btn--load-data"
-            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
-            @click="addHistoryData"
-          >
-            {{ $t('journal.load-data') }}
-          </button>
-        </div>
-        <!-- </div> -->
-        <!-- </transition> -->
-
-        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-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';
-
-const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
-
-export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, TimetablesStats },
-  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
-
-  name: 'JournalTimetables',
-
-  props: {
-    timetableId: {
-      type: String,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-
-    timetableHistory: [] as TimetableHistory[],
-    journalTimetableFilters,
-
-    dataStatus: DataStatus.Initialized,
-    dataErrorMessage: '',
-
-    DataStatus,
-  }),
-
-  setup() {
-    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
-
-    const searchersValues = reactive({
-      'search-train': '',
-      'search-driver': '',
-      'search-dispatcher': '',
-      'search-date': '',
-    } as JorunalTimetableSearchType);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('searchersValues', searchersValues);
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      sorterActive,
-      journalFilterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      store: useStore(),
-    };
-  },
-
-  activated() {
-    if (this.timetableId) {
-      this.searchersValues['search-train'] = `#${this.timetableId}`;
-      this.searchHistory();
-    }
-  },
-
-  mounted() {
-    if (!this.timetableId) this.searchHistory();
-  },
-
-  methods: {
-    handleScroll(e: Event) {
-      const listElement = e.target as HTMLElement;
-      const scrollTop = listElement.scrollTop;
-      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
-
-      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
-
-      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
-    },
-
-    resetOptions() {
-      this.searchersValues['search-date'] = '';
-      this.searchersValues['search-driver'] = '';
-      this.searchersValues['search-train'] = '';
-      this.searchersValues['search-dispatcher'] = '';
-
-      this.journalFilterActive = this.journalTimetableFilters[0];
-      this.sorterActive.id = 'timetableId';
-
-      this.searchHistory();
-    },
-
-    searchHistory() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-        filter: this.journalFilterActive,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.timetableHistory.length;
-
-      const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.timetableHistory.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JorunalTimetableSearchType;
-        filter?: JournalTimetableFilter;
-      } = {}
-    ) {
-      this.dataStatus = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      const driverName = props.searchers?.['search-driver'].trim();
-      const trainNo = props.searchers?.['search-train'].trim();
-      const authorName = props.searchers?.['search-dispatcher'].trim();
-
-      const dateString = props.searchers?.['search-date'].trim();
-      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
-      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
-
-      if (driverName) queries.push(`driverName=${driverName}`);
-      if (trainNo)
-        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
-      if (authorName) queries.push(`authorName=${authorName}`);
-      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
-      else queries.push('sortBy=timetableId');
-
-      queries.push('countLimit=15');
-
-      switch (props.filter?.id) {
-        case JournalFilterType.abandoned:
-          queries.push('fulfilled=0', 'terminated=1');
-          break;
-
-        case JournalFilterType.active:
-          queries.push('terminated=0');
-          break;
-
-        case JournalFilterType.fulfilled:
-          queries.push('fulfilled=1');
-          break;
-
-        default:
-          break;
-      }
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.dataStatus = DataStatus.Error;
-          this.dataErrorMessage = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.timetableHistory = responseData;
-
-        // Stats display
-        this.store.driverStatsName =
-          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
-            ? this.timetableHistory[0].driverName
-            : '';
-
-        this.dataStatus = DataStatus.Loaded;
-      } catch (error) {
-        this.dataStatus = DataStatus.Error;
-        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-</style>
+<template>
+  <section class="journal-timetables">
+    <JournalHeader />
+    
+    <div class="journal_wrapper">
+      <TimetablesStats />
+
+      <JournalOptions
+        @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
+        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+        :filters="journalTimetableFilters"
+        :data-status="dataStatus"
+      />
+
+      <!-- <DriverStats /> -->
+      <!-- <button @click="statsCardOpen = true">Stats</button> -->
+
+      <div class="list_wrapper" @scroll="handleScroll">
+        <!-- <transition name="warning" mode="out-in"> -->
+        <!-- <div :key="dataStatus"> -->
+        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <JournalTimetablesList :timetableHistory="timetableHistory" />
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
+        </div>
+        <!-- </div> -->
+        <!-- </transition> -->
+
+        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
+import axios from 'axios';
+
+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, JournalHeader },
+  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
+
+  name: 'JournalTimetables',
+
+  props: {
+    timetableId: {
+      type: String,
+    },
+  },
+
+  data: () => ({
+    currentQuery: '',
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+
+    timetableHistory: [] as TimetableHistory[],
+    journalTimetableFilters,
+
+    dataStatus: DataStatus.Initialized,
+    dataErrorMessage: '',
+
+    DataStatus,
+  }),
+
+  setup() {
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
+    const journalFilterActive = ref(journalTimetableFilters[0]);
+
+    const searchersValues = reactive({
+      'search-train': '',
+      'search-driver': '',
+      'search-dispatcher': '',
+      'search-date': '',
+    } as JorunalTimetableSearchType);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('searchersValues', searchersValues);
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      sorterActive,
+      journalFilterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+      store: useStore(),
+    };
+  },
+
+  activated() {
+    if (this.timetableId) {
+      this.searchersValues['search-train'] = `#${this.timetableId}`;
+      this.searchHistory();
+    }
+  },
+
+  mounted() {
+    console.log('mounted');
+    
+    if (!this.timetableId) this.searchHistory();
+  },
+
+  methods: {
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
+
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
+
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
+    },
+
+    resetOptions() {
+      this.searchersValues['search-date'] = '';
+      this.searchersValues['search-driver'] = '';
+      this.searchersValues['search-train'] = '';
+      this.searchersValues['search-dispatcher'] = '';
+
+      this.journalFilterActive = this.journalTimetableFilters[0];
+      this.sorterActive.id = 'timetableId';
+
+      this.searchHistory();
+    },
+
+    searchHistory() {
+      this.fetchHistoryData({
+        searchers: this.searchersValues,
+        filter: this.journalFilterActive,
+      });
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      const countFrom = this.timetableHistory.length;
+
+      const responseData: TimetableHistory[] = await (
+        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.timetableHistory.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData(
+      props: {
+        searchers?: JorunalTimetableSearchType;
+        filter?: JournalTimetableFilter;
+      } = {}
+    ) {
+      this.dataStatus = DataStatus.Loading;
+
+      const queries: string[] = [];
+
+      const driverName = props.searchers?.['search-driver'].trim();
+      const trainNo = props.searchers?.['search-train'].trim();
+      const authorName = props.searchers?.['search-dispatcher'].trim();
+
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+
+      if (driverName) queries.push(`driverName=${driverName}`);
+      if (trainNo)
+        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
+      if (authorName) queries.push(`authorName=${authorName}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
+      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
+      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
+      else queries.push('sortBy=timetableId');
+
+      queries.push('countLimit=15');
+
+      switch (props.filter?.id) {
+        case JournalFilterType.abandoned:
+          queries.push('fulfilled=0', 'terminated=1');
+          break;
+
+        case JournalFilterType.active:
+          queries.push('terminated=0');
+          break;
+
+        case JournalFilterType.fulfilled:
+          queries.push('fulfilled=1');
+          break;
+
+        default:
+          break;
+      }
+
+      this.currentQuery = queries.join('&');
+
+      try {
+        const responseData: TimetableHistory[] = await (
+          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
+        ).data;
+
+        if (!responseData) {
+          this.dataStatus = DataStatus.Error;
+          this.dataErrorMessage = 'Brak danych!';
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.timetableHistory = responseData;
+
+        // Stats display
+        this.store.driverStatsName =
+          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
+            ? this.timetableHistory[0].driverName
+            : '';
+
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.dataStatus = DataStatus.Error;
+        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/JournalSection.scss';
+</style>
diff --git a/src/views/JournalView.vue b/src/views/JournalView.vue
deleted file mode 100644
index a4daa14..0000000
--- a/src/views/JournalView.vue
+++ /dev/null
@@ -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>