Cleanup kodu; poprawki funkcjonalności

2026-05-03 05:18:11 +00:00 · 2022-09-05 23:32:27 +02:00
parent 2a64b8f10d
commit b0a9939446
10 changed files with 582 additions and 573 deletions
@@ -1,75 +1,39 @@
 <template>
  <section class="journal-timetables">
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-filter-change="search"
-          @on-input-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timestampFrom', 'duration']"
-        />
+    <div class="journal_wrapper">
+      <JournalOptions
+        @on-filter-change="search"
+        @on-input-change="search"
+        @on-sorter-change="search"
+        :sorter-option-ids="['timestampFrom', 'duration']"
+      />

-        <!-- <DispatcherStats /> -->
-      </div>
+      <div class="timetables_wrapper" ref="scrollElement">
+        <transition name="warning" mode="out-in">
+          <div :key="dataStatus">
+            <Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />

-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
-                    <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
-                      <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
-                    </div>
-
-                    <div
-                      class="journal_item"
-                      :class="{ online: doc.isOnline }"
-                      @click="navigateToScenery(doc.stationName, doc.isOnline)"
-                      @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
-                      tabindex="0"
-                    >
-                      <span>
-                        <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
-                        <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
-                        <span class="region-badge" :class="doc.region">PL1</span>
-                      </span>
-                      <span>
-                        <span :data-status="doc.isOnline">
-                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
-                        </span>
-                        <span>
-                          {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                        </span>
-
-                        <span v-if="doc.currentDuration && doc.isOnline">
-                          ({{ calculateDuration(doc.currentDuration) }})
-                        </span>
-
-                        <span v-if="doc.timestampTo">
-                          &gt;
-                          {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                          ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
-                        </span>
-                      </span>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
+            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+              {{ $t('app.error') }}
            </div>
-          </transition>
-        </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"
+                @click="addHistoryData"
+              >
+                {{ $t('journal.load-data') }}
+              </button>
+            </div>
+          </div>
+        </transition>
      </div>

      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
@@ -79,7 +43,7 @@
 </template>

 <script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';

 import ActionButton from '../../components/Global/ActionButton.vue';
@@ -89,38 +53,16 @@ import SearchBox from '../Global/SearchBox.vue';

 import Loading from '../Global/Loading.vue';
 import { URLs } from '../../scripts/utils/apiURLs';
-import dateMixin from '../../mixins/dateMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
+import JournalDispatchersList from './JournalDispatchersList.vue';
+import { JournalDispatcherSearcher } from '../../types/JournalDispatcherTypes';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';

 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;

-interface DispatcherHistoryItem {
-  id: string;
-
-  stationName: string;
-  stationHash: string;
-  region: string;
-
-  dispatcherName: string;
-  dispatcherId: number;
-
-  timestampFrom: number;
-  timestampTo?: number;
-  currentDuration?: number;
-
-  lastOnlineTimestamp: number;
-
-  isOnline: boolean;
-}
-
-type JournalDispatcherSearcher = {
-  [key in 'search-dispatcher' | 'search-station']: string;
-};
-
 export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
-  mixins: [dateMixin],
+  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList },
  name: 'JournalDispatchers',

  props: {
@@ -142,16 +84,17 @@ export default defineComponent({

    showReturnButton: false,
    statsCardOpen: false,
+
+    dataStatus: DataStatus.Initialized,
+    DataStatus,
+
+    historyList: [] as DispatcherHistory[],
  }),

  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
    const journalFilterActive = ref({});
+
    const searchersValues = reactive({
      'search-dispatcher': '',
      'search-station': '',
@@ -169,13 +112,6 @@ export default defineComponent({
    return {
      store: useStore(),

-      historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
      sorterActive,
      searchersValues,

@@ -220,21 +156,6 @@ export default defineComponent({
      this.statsCardOpen = false;
    },

-    navigateToScenery(name: string, isOnline: boolean) {
-      if (!isOnline) return;
-
-      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
-    },
-
-    isAnotherDay(prevIndex: number, currIndex: number) {
-      if (currIndex == 0) return true;
-
-      return (
-        new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() !=
-        new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
-      );
-    },
-
    handleScroll() {
      this.showReturnButton = window.scrollY > window.innerHeight;

@@ -244,15 +165,11 @@ export default defineComponent({
        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
        this.scrollDataLoaded &&
        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
+        this.dataStatus == DataStatus.Loaded
      )
        this.addHistoryData();
    },

-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
    search() {
      this.fetchHistoryData({
        searchers: this.searchersValues,
@@ -267,7 +184,7 @@ export default defineComponent({

      const countFrom = this.historyList.length;

-      const responseData: DispatcherHistoryItem[] = await (
+      const responseData: DispatcherHistory[] = await (
        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
      ).data;

@@ -288,7 +205,7 @@ export default defineComponent({
        filter?: JournalFilter;
      } = {}
    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
+      this.dataStatus = DataStatus.Loading;

      const queries: string[] = [];

@@ -311,13 +228,12 @@ export default defineComponent({
      this.currentQuery = queries.join('&');

      try {
-        const responseData: DispatcherHistoryItem[] = await (
+        const responseData: DispatcherHistory[] = await (
          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
        ).data;

        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
+          this.dataStatus = DataStatus.Error;
          return;
        }

@@ -332,10 +248,9 @@ export default defineComponent({
            ? this.historyList[0].dispatcherName
            : '';

-        this.historyDataStatus.status = DataStatus.Loaded;
+        this.dataStatus = DataStatus.Loaded;
      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
+        this.dataStatus = DataStatus.Error;
      }
    },
  },
@@ -344,82 +259,4 @@ export default defineComponent({

 <style lang="scss" scoped>
@import '../../styles/JournalSection.scss';
-@import '../../styles/responsive.scss';
-
-.region-badge {
-  padding: 0.1em 0.5em;
-  border-radius: 0.5em;
-  font-weight: bold;
-
-  &.eu {
-    background-color: forestgreen;
-  }
-}
-
-.list-wrapper {
-  margin-top: 1em;
-}
-
-.journal_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  flex-wrap: wrap;
-
-  &.online {
-    cursor: pointer;
-  }
-
-  span[data-status='true'] {
-    color: springgreen;
-  }
-
-  span[data-status='false'] {
-    color: salmon;
-  }
-}
-.journal_day {
-  position: relative;
-  text-align: center;
-  background-color: #4d4d4d;
-
-  span {
-    position: relative;
-    background-color: #4d4d4d;
-    z-index: 10;
-
-    padding: 0 0.5em;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    z-index: 0;
-
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-
-    height: 3px;
-    width: 60%;
-    min-width: 200px;
-
-    background-color: white;
-  }
-}
-
-@include smallScreen() {
-  .journal_item {
-    flex-direction: column;
-
-    span {
-      margin-top: 0.25em;
-      text-align: center;
-    }
-  }
-}
 </style>
-
@@ -0,0 +1,154 @@
+<template>
+  <ul class="journal-list">
+    <transition-group name="journal-list-anim">
+      <li v-for="(doc, i) in dispatcherHistory" :key="doc.id">
+        <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
+          <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
+        </div>
+
+        <div
+          class="journal_item"
+          :class="{ online: doc.isOnline }"
+          @click="navigateToScenery(doc.stationName, doc.isOnline)"
+          @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
+          tabindex="0"
+        >
+          <span>
+            <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
+            <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
+            <span class="region-badge" :class="doc.region">PL1</span>
+          </span>
+
+          <span>
+            <span :data-status="doc.isOnline"> {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
+            <span>
+              {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+            </span>
+
+            <span v-if="doc.currentDuration && doc.isOnline"> ({{ calculateDuration(doc.currentDuration) }}) </span>
+
+            <span v-if="doc.timestampTo">
+              &gt;
+              {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+              ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
+            </span>
+          </span>
+        </div>
+      </li>
+    </transition-group>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+
+export default defineComponent({
+  props: {
+    dispatcherHistory: {
+      type: Array as PropType<DispatcherHistory[]>,
+      required: true,
+    },
+  },
+
+  mixins: [dateMixin],
+
+  methods: {
+    navigateToScenery(name: string, isOnline: boolean) {
+      if (!isOnline) return;
+
+      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
+    },
+
+    isAnotherDay(prevIndex: number, currIndex: number) {
+      if (currIndex == 0) return true;
+
+      return (
+        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
+        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
+      );
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/JournalSection.scss';
+
+.region-badge {
+  padding: 0.1em 0.5em;
+  border-radius: 0.5em;
+  font-weight: bold;
+
+  &.eu {
+    background-color: forestgreen;
+  }
+}
+
+.journal_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+
+  &.online {
+    cursor: pointer;
+  }
+
+  span[data-status='true'] {
+    color: springgreen;
+  }
+
+  span[data-status='false'] {
+    color: salmon;
+  }
+}
+
+.journal_day {
+  position: relative;
+  text-align: center;
+  background-color: #4d4d4d;
+
+  margin-top: 1em;
+
+  span {
+    position: relative;
+    background-color: #4d4d4d;
+    z-index: 10;
+
+    padding: 0 0.5em;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+
+    z-index: 0;
+
+    left: 50%;
+    top: 50%;
+
+    transform: translate(-50%, -50%);
+
+    height: 3px;
+    width: 60%;
+    min-width: 200px;
+
+    background-color: white;
+  }
+}
+
+@include smallScreen() {
+  .journal_item {
+    flex-direction: column;
+
+    span {
+      margin-top: 0.25em;
+      text-align: center;
+    }
+  }
+}
+</style>
@@ -1,163 +1,44 @@
 <template>
  <section class="journal-timetables">
    <keep-alive>
-      <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
+      <DriverStats v-if="statsCardOpen" @close-card="statsCardOpen = false" />
    </keep-alive>

-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-input-change="search"
-          @on-filter-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-          :filters="journalTimetableFilters"
-        />
-      </div>
+    <div class="journal_wrapper">
+      <JournalOptions
+        @on-input-change="searchHistory"
+        @on-filter-change="searchHistory"
+        @on-sorter-change="searchHistory"
+        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+        :filters="journalTimetableFilters"
+      />

-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
+      <div class="timetables_wrapper" ref="scrollElement">
+        <transition name="warning" mode="out-in">
+          <div :key="dataStatus">
+            <Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />

-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="computedTimetableHistory.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li
-                    v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
-                    class="journal_item"
-                    :key="timetable.timetableId"
-                  >
-                    <div class="journal_item-info">
-                      <div class="info-top">
-                        <span
-                          tabindex="0"
-                          @click="showTimetable(timetable)"
-                          @keydown.enter="showTimetable(timetable)"
-                          style="cursor: pointer"
-                        >
-                          <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
-                          <b>{{ timetable.trainNo }}</b>
-                          | <span>{{ timetable.driverName }}</span> |
-                          <span class="text--grayed">#{{ timetable.timetableId }}</span>
-                        </span>
-
-                        <span>
-                          <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
-                          <b
-                            class="info-status"
-                            :class="{
-                              fulfilled:
-                                timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9,
-                              terminated: timetable.terminated && !timetable.fulfilled,
-                              active: !timetable.terminated,
-                            }"
-                          >
-                            {{
-                              !timetable.terminated
-                                ? $t('journal.timetable-active')
-                                : timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9
-                                ? $t('journal.timetable-fulfilled')
-                                : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
-                            }}
-                          </b>
-                        </span>
-                      </div>
-
-                      <div class="info-route">
-                        <b>{{ timetable.route.replace('|', ' - ') }}</b>
-                      </div>
-
-                      <hr />
-
-                      <div class="scenery-list">
-                        <span
-                          v-for="(scenery, i) in sceneryList"
-                          :key="scenery.name"
-                          :class="{ confirmed: scenery.confirmed }"
-                        >
-                          <span v-if="i > 0"> &gt;</span>
-                          {{ scenery.name }}
-
-                          <!-- Data odjazdu ze stacji początkowej -->
-                          <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
-
-                          <!-- Data przyjazdu do stacji końcowej -->
-                          <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
-                        </span>
-                      </div>
-
-                      <!-- Status RJ -->
-                      <div style="margin: 0.5em 0">
-                        <span>
-                          <b>{{ $t('journal.route-length') }}</b>
-                          {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
-                          {{ timetable.routeDistance }} km
-                        </span>
-                        &bull;
-                        <span>
-                          <b>{{ $t('journal.station-count') }}</b>
-                          {{ timetable.confirmedStopsCount }} /
-                          {{ timetable.allStopsCount }}
-                        </span>
-                      </div>
-
-                      <!-- Nick dyżurnego -->
-                      <div v-if="timetable.authorName">
-                        <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
-                        <router-link
-                          class="dispatcher-link"
-                          :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`"
-                        >
-                          <b>{{ timetable.authorName }}</b>
-                        </router-link>
-                      </div>
-
-                      <button
-                        v-if="timetable.stockString"
-                        class="btn--option btn--show"
-                        @click="item.showStock.value = !item.showStock.value"
-                      >
-                        {{ $t('journal.stock-info') }}
-                        <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-                      </button>
-
-                      <div class="info-extended" v-if="timetable.stockString" v-show="item.showStock.value">
-                        <hr />
-
-                        <div>
-                          {{ `${$t('journal.stock-max-speed')}: ${timetable.maxSpeed}km/h` }} &bull;
-                          {{ `${$t('journal.stock-length')}: ${timetable.stockLength}m` }} &bull;
-                          {{ `${$t('journal.stock-mass')}: ${Math.floor(timetable.stockMass! / 1000)}t` }}
-                        </div>
-
-                        <ul class="stock-list">
-                          <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
-                            <img
-                              @error="onImageError"
-                              :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-                              :alt="car"
-                            />
-
-                            <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
+            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+              {{ $t('app.error') }}
            </div>
-          </transition>
-        </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"
+                @click="addHistoryData"
+              >
+                {{ $t('journal.load-data') }}
+              </button>
+            </div>
+          </div>
+        </transition>
      </div>

      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
@@ -167,7 +48,7 @@
 </template>

 <script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';

 import DriverStats from './DriverStats.vue';
@@ -184,11 +65,12 @@ import JournalOptions from './JournalOptions.vue';
 import { JournalTimetableSearcher } from '../../types/JournalTimetablesTypes';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import imageMixin from '../../mixins/imageMixin';
+import JournalTimetablesList from './JournalTimetablesList.vue';

 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;

 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions },
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList },
  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],

  name: 'JournalTimetables',
@@ -208,16 +90,15 @@ export default defineComponent({
    statsCardOpen: false,

    timetableHistory: [] as TimetableHistory[],
-
    journalTimetableFilters,
+
+    dataStatus: DataStatus.Initialized,
+    dataErrorMessage: '',
+
+    DataStatus,
  }),

  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
    const sorterActive = ref({ id: 'timetableId', dir: -1 });
    const journalFilterActive = ref(journalTimetableFilters[0]);

@@ -236,12 +117,6 @@ export default defineComponent({
    const scrollElement: Ref<HTMLElement | null> = ref(null);

    return {
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
      sorterActive,
      journalFilterActive,
      searchersValues,
@@ -250,7 +125,6 @@ export default defineComponent({
      countLimit,

      scrollElement,
-      maxCount: ref(15),
      store: useStore(),
    };
  },
@@ -260,81 +134,19 @@ export default defineComponent({

    if (this.timetableId) {
      this.searchersValues['search-train'] = `#${this.timetableId}`;
-      this.search();
+      this.searchHistory();
    }
  },

-  mounted() {
-    if (!this.timetableId) this.search();
-  },
-
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll);
  },

-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        sceneryList: this.getSceneryList(timetable),
-        showStock: ref(false),
-      }));
-    },
+  mounted() {
+    if (!this.timetableId) this.searchHistory();
  },

  methods: {
-    showTimetable(timetable: TimetableHistory) {
-      if (timetable.terminated) return;
-
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
-      // this.navigateTo('/trains', {
-      //   trainNo: timetable.trainNo,
-      //   driverName: timetable.driverName,
-      // });
-    },
-
-    closeCard() {
-      this.statsCardOpen = false;
-    },
-
-    getSceneryList(timetable: TimetableHistory) {
-      return timetable.sceneriesString.split('%').map((name, i) => {
-        const beginDateHTML =
-          ' (o. ' +
-          (timetable.beginDate != timetable.scheduledBeginDate
-            ? `<s class='text--grayed'>${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s> `
-            : '') +
-          `<span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
-
-        const endDateHTML =
-          ' (p. ' +
-          (timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
-            ? `<s class='text--grayed'>${this.localeTime(
-                timetable.fulfilled ? timetable.endDate : timetable.scheduledEndDate,
-                this.$i18n.locale
-              )}</s> `
-            : '') +
-          `<span>${this.localeTime(
-            timetable.fulfilled || (timetable.terminated && !timetable.fulfilled)
-              ? timetable.scheduledEndDate
-              : timetable.endDate,
-            this.$i18n.locale
-          )}</span>)`;
-
-        const abandonedDateHTML = ` (porz. ${this.localeTime(
-          timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
-          this.$i18n.locale
-        )})`;
-
-        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
-      });
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = this.getImage('unknown.png');
-    },
-
    handleScroll() {
      this.showReturnButton = window.scrollY > window.innerHeight;

@@ -344,16 +156,12 @@ export default defineComponent({
        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
        this.scrollDataLoaded &&
        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
+        this.dataStatus == DataStatus.Loaded
      )
        this.addHistoryData();
    },

-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
+    searchHistory() {
      this.fetchHistoryData({
        searchers: this.searchersValues,
        filter: this.journalFilterActive,
@@ -389,7 +197,7 @@ export default defineComponent({
        filter?: JournalFilter;
      } = {}
    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
+      this.dataStatus = DataStatus.Loading;

      const queries: string[] = [];

@@ -432,8 +240,8 @@ export default defineComponent({
        ).data;

        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
+          this.dataStatus = DataStatus.Error;
+          this.dataErrorMessage = 'Brak danych!';
          return;
        }

@@ -448,12 +256,12 @@ export default defineComponent({
            ? this.timetableHistory[0].driverName
            : '';

-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
+        this.dataStatus = DataStatus.Loaded;

-        console.error(error);
+        console.log(this.dataStatus);
+      } catch (error) {
+        this.dataStatus = DataStatus.Error;
+        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
      }
    },
  },
@@ -462,101 +270,4 @@ export default defineComponent({

 <style lang="scss" scoped>
@import '../../styles/JournalSection.scss';
-@import '../../styles/responsive.scss';
-
-hr {
-  margin: 0.25em 0;
-}
-
-.info {
-  &-date {
-    margin-right: 0.5em;
-  }
-
-  &-status {
-    padding: 0.05em 0.35em;
-    color: black;
-
-    &.terminated {
-      background-color: salmon;
-    }
-
-    &.fulfilled {
-      background-color: lightgreen;
-    }
-
-    &.active {
-      background-color: lightblue;
-    }
-  }
-
-  &-top {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  &-route {
-    margin: 0.25em 0;
-  }
-
-  &-extended {
-    margin-top: 0.5em;
-  }
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-  padding-bottom: 0.5em;
-  margin-top: 1em;
-
-  li > div {
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-
-.scenery-list {
-  color: #adadad;
-  span.confirmed {
-    color: #a3eba3;
-  }
-}
-
-.btn--show {
-  display: flex;
-  margin-top: 1em;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-@include smallScreen {
-  .info-top {
-    flex-direction: column;
-
-    span {
-      margin: 0.1em auto;
-    }
-  }
-
-  .info-extended {
-    text-align: center;
-  }
-
-  .info-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-}
 </style>
@@ -0,0 +1,294 @@
+<template>
+  <ul class="journal-list">
+    <li
+      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
+      class="journal_item"
+      :key="timetable.timetableId"
+    >
+      <div class="journal_item-info">
+        <div class="info-top">
+          <span
+            tabindex="0"
+            @click="showTimetable(timetable)"
+            @keydown.enter="showTimetable(timetable)"
+            style="cursor: pointer"
+          >
+            <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
+            <b>{{ timetable.trainNo }}</b>
+            | <span>{{ timetable.driverName }}</span> |
+            <span class="text--grayed">#{{ timetable.timetableId }}</span>
+          </span>
+
+          <span>
+            <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
+            <b
+              class="info-status"
+              :class="{
+                fulfilled: timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9,
+                terminated: timetable.terminated && !timetable.fulfilled,
+                active: !timetable.terminated,
+              }"
+            >
+              {{
+                !timetable.terminated
+                  ? $t('journal.timetable-active')
+                  : timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9
+                  ? $t('journal.timetable-fulfilled')
+                  : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+              }}
+            </b>
+          </span>
+        </div>
+
+        <div class="info-route">
+          <b>{{ timetable.route.replace('|', ' - ') }}</b>
+        </div>
+
+        <hr />
+
+        <div class="scenery-list">
+          <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
+            <span v-if="i > 0"> &gt;</span>
+            {{ scenery.name }}
+
+            <!-- Data odjazdu ze stacji początkowej -->
+            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
+
+            <!-- Data przyjazdu do stacji końcowej -->
+            <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
+          </span>
+        </div>
+
+        <!-- Status RJ -->
+        <div style="margin: 0.5em 0">
+          <span>
+            <b>{{ $t('journal.route-length') }}</b>
+            {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
+            {{ timetable.routeDistance }} km
+          </span>
+          &bull;
+          <span>
+            <b>{{ $t('journal.station-count') }}</b>
+            {{ timetable.confirmedStopsCount }} /
+            {{ timetable.allStopsCount }}
+          </span>
+        </div>
+
+        <!-- Nick dyżurnego -->
+        <div v-if="timetable.authorName">
+          <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
+          <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
+            <b>{{ timetable.authorName }}</b>
+          </router-link>
+        </div>
+
+        <button
+          v-if="timetable.stockString"
+          class="btn--option btn--show"
+          @click="item.showStock.value = !item.showStock.value"
+        >
+          {{ $t('journal.stock-info') }}
+          <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+        </button>
+
+        <div class="info-extended" v-if="timetable.stockString" v-show="item.showStock.value">
+          <hr />
+
+          <div>
+            {{ `${$t('journal.stock-max-speed')}: ${timetable.maxSpeed}km/h` }} &bull;
+            {{ `${$t('journal.stock-length')}: ${timetable.stockLength}m` }} &bull;
+            {{ `${$t('journal.stock-mass')}: ${Math.floor(timetable.stockMass! / 1000)}t` }}
+          </div>
+
+          <ul class="stock-list">
+            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
+              <img
+                @error="onImageError"
+                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+                :alt="car"
+              />
+
+              <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+
+export default defineComponent({
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+  },
+
+  mixins: [dateMixin, imageMixin, modalTrainMixin],
+
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        sceneryList: this.getSceneryList(timetable),
+        showStock: ref(false),
+      }));
+    },
+  },
+
+  methods: {
+    getSceneryList(timetable: TimetableHistory) {
+      return timetable.sceneriesString.split('%').map((name, i) => {
+        const beginDateHTML =
+          ' (o. ' +
+          (timetable.beginDate != timetable.scheduledBeginDate
+            ? `<s class='text--grayed'>${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s> `
+            : '') +
+          `<span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+        const endDateHTML =
+          ' (p. ' +
+          (timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
+            ? `<s class='text--grayed'>${this.localeTime(
+                timetable.fulfilled ? timetable.endDate : timetable.scheduledEndDate,
+                this.$i18n.locale
+              )}</s> `
+            : '') +
+          `<span>${this.localeTime(
+            timetable.fulfilled || (timetable.terminated && !timetable.fulfilled)
+              ? timetable.scheduledEndDate
+              : timetable.endDate,
+            this.$i18n.locale
+          )}</span>)`;
+
+        const abandonedDateHTML = ` (porz. ${this.localeTime(
+          timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
+          this.$i18n.locale
+        )})`;
+
+        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
+      });
+    },
+
+    showTimetable(timetable: TimetableHistory) {
+      if (timetable.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
+    },
+
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage('unknown.png');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/JournalSection.scss';
+
+hr {
+  margin: 0.25em 0;
+}
+
+.info {
+  &-date {
+    margin-right: 0.5em;
+  }
+
+  &-status {
+    padding: 0.05em 0.35em;
+    color: black;
+
+    &.terminated {
+      background-color: salmon;
+    }
+
+    &.fulfilled {
+      background-color: lightgreen;
+    }
+
+    &.active {
+      background-color: lightblue;
+    }
+  }
+
+  &-top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &-route {
+    margin: 0.25em 0;
+  }
+
+  &-extended {
+    margin-top: 0.5em;
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+  padding-bottom: 0.5em;
+  margin-top: 1em;
+
+  li > div {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+
+.scenery-list {
+  color: #adadad;
+  span.confirmed {
+    color: #a3eba3;
+  }
+}
+
+.btn--show {
+  display: flex;
+  margin-top: 1em;
+  font-weight: bold;
+  padding: 0.2em 0.45em;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+@include smallScreen {
+  .info-top {
+    flex-direction: column;
+
+    span {
+      margin: 0.1em auto;
+    }
+  }
+
+  .info-extended {
+    text-align: center;
+  }
+
+  .info-route {
+    display: flex;
+    justify-content: center;
+  }
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
+}
+</style>
@@ -244,7 +244,9 @@
    "stock-info": "STOCK INFO",
    "stock-length": "Length",
    "stock-mass": "Mass",
-    "stock-max-speed": "Maximum registered speed"
+    "stock-max-speed": "Maximum registered speed",
+
+    "load-data": "Load further data..."
  },
  "scenery": {
    "users": "PLAYERS ONLINE",
@@ -246,7 +246,9 @@
    "stock-info": "INFORMACJE O SKŁADZIE",
    "stock-length": "Długość",
    "stock-mass": "Masa",
-    "stock-max-speed": "Maks. zarejestrowana prędkość"
+    "stock-max-speed": "Maks. zarejestrowana prędkość",
+
+    "load-data": "Pobierz dalszą historię..."
  },
  "scenery": {
    "users": "GRACZE ONLINE",
@@ -1,4 +1,4 @@
-export const enum DataStatus {
+export enum DataStatus {
  Initialized = -1,
  Loading = 0,
  Error = 1,
@@ -1,12 +1,14 @@
-export interface DispatcherHistory {
-  currentDuration: number;
-  dispatcherId: number;
-  dispatcherName: string;
-  isOnline: boolean;
-  lastOnlineTimestamp: number;
-  region: string;
-  stationHash: string;
-  stationName: string;
-  timestampFrom: number;
-  timestampTo?: number;
+export interface DispatcherHistory {
+  id: string;
+  
+  currentDuration: number;
+  dispatcherId: number;
+  dispatcherName: string;
+  isOnline: boolean;
+  lastOnlineTimestamp: number;
+  region: string;
+  stationHash: string;
+  stationName: string;
+  timestampFrom: number;
+  timestampTo?: number;
 }
@@ -18,10 +18,10 @@

 //Styles

-.journal-wrapper {
+.journal_wrapper {
  max-width: 1350px;
  width: 100%;
-  
+
  padding: 1em 0;
 }

@@ -51,8 +51,12 @@
  align-items: center;
 }

-button.btn {
-  padding: 0.5em 0.7em;
+.btn--load-data {
+  padding: 0.5em 1em;
+  display: flex;
+  margin: 0 auto;
+
+  font-size: 1.2em;
 }

@include smallScreen() {
@@ -0,0 +1,3 @@
+export type JournalDispatcherSearcher = {
+  [key in 'search-dispatcher' | 'search-station']: string;
+};