Merge pull request #4 from Spythere/development

v1.1.0
2026-05-02 21:18:12 +00:00 · 2025-05-03 14:13:51 +02:00
parent ca393057e4 4c9a560a4a
commit ceb0a49932
40 changed files with 4748 additions and 941 deletions
@@ -13,6 +13,7 @@ dist-ssr
 *.local
 .env
 .env.*
+/dev-dist

 # Editor directories and files
 .vscode/*
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
@@ -0,0 +1,113 @@
+#!/bin/bash
+
+# Logger Function
+log() {
+  local message="$1"
+  local type="$2"
+  local timestamp=$(date '+%Y-%m-%d %H:%M:%S')
+  local color
+  local endcolor="\033[0m"
+
+  case "$type" in
+    "info") color="\033[38;5;79m" ;;
+    "success") color="\033[1;32m" ;;
+    "error") color="\033[1;31m" ;;
+    *) color="\033[1;34m" ;;
+  esac
+
+  echo -e "${color}${timestamp} - ${message}${endcolor}"
+}
+
+# Error handler function  
+handle_error() {
+  local exit_code=$1
+  local error_message="$2"
+  log "Error: $error_message (Exit Code: $exit_code)" "error"
+  exit $exit_code
+}
+
+# Function to check for command availability
+command_exists() {
+  command -v "$1" &> /dev/null
+}
+
+check_os() {
+    if ! [ -f "/etc/debian_version" ]; then
+        echo "Error: This script is only supported on Debian-based systems."
+        exit 1
+    fi
+}
+
+# Function to Install the script pre-requisites
+install_pre_reqs() {
+    log "Installing pre-requisites" "info"
+
+    # Run 'apt-get update'
+    if ! apt-get update -y; then
+        handle_error "$?" "Failed to run 'apt-get update'"
+    fi
+
+    # Run 'apt-get install'
+    if ! apt-get install -y apt-transport-https ca-certificates curl gnupg; then
+        handle_error "$?" "Failed to install packages"
+    fi
+
+    if ! mkdir -p /usr/share/keyrings; then
+      handle_error "$?" "Makes sure the path /usr/share/keyrings exist or run ' mkdir -p /usr/share/keyrings' with sudo"
+    fi
+
+    rm -f /usr/share/keyrings/nodesource.gpg || true
+    rm -f /etc/apt/sources.list.d/nodesource.list || true
+
+    # Run 'curl' and 'gpg' to download and import the NodeSource signing key
+    if ! curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /usr/share/keyrings/nodesource.gpg; then
+      handle_error "$?" "Failed to download and import the NodeSource signing key"
+    fi
+
+    # Explicitly set the permissions to ensure the file is readable by all
+    if ! chmod 644 /usr/share/keyrings/nodesource.gpg; then
+        handle_error "$?" "Failed to set correct permissions on /usr/share/keyrings/nodesource.gpg"
+    fi
+}
+
+# Function to configure the Repo
+configure_repo() {
+    local node_version=$1
+
+    arch=$(dpkg --print-architecture)
+    if [ "$arch" != "amd64" ] && [ "$arch" != "arm64" ] && [ "$arch" != "armhf" ]; then
+      handle_error "1" "Unsupported architecture: $arch. Only amd64, arm64, and armhf are supported."
+    fi
+
+    echo "deb [arch=$arch signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$node_version nodistro main" | tee /etc/apt/sources.list.d/nodesource.list > /dev/null
+
+    # N|solid Config
+    echo "Package: nsolid" | tee /etc/apt/preferences.d/nsolid > /dev/null
+    echo "Pin: origin deb.nodesource.com" | tee -a /etc/apt/preferences.d/nsolid > /dev/null
+    echo "Pin-Priority: 600" | tee -a /etc/apt/preferences.d/nsolid > /dev/null
+
+    # Nodejs Config
+    echo "Package: nodejs" | tee /etc/apt/preferences.d/nodejs > /dev/null
+    echo "Pin: origin deb.nodesource.com" | tee -a /etc/apt/preferences.d/nodejs > /dev/null
+    echo "Pin-Priority: 600" | tee -a /etc/apt/preferences.d/nodejs > /dev/null
+
+    # Run 'apt-get update'
+    if ! apt-get update -y; then
+        handle_error "$?" "Failed to run 'apt-get update'"
+    else
+        log "Repository configured successfully."
+        log "To install Node.js, run: apt-get install nodejs -y" "info"
+        log "You can use N|solid Runtime as a node.js alternative" "info"
+        log "To install N|solid Runtime, run: apt-get install nsolid -y \n" "success"
+    fi
+}
+
+# Define Node.js version
+NODE_VERSION="23.x"
+
+# Check OS
+check_os
+
+# Main execution
+install_pre_reqs || handle_error $? "Failed installing pre-requisites"
+configure_repo "$NODE_VERSION" || handle_error $? "Failed configuring repository"
@@ -1,7 +1,7 @@
 {
  "name": "srjp-td2",
  "private": true,
-  "version": "1.0.5",
+  "version": "1.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode staging",
@@ -11,8 +11,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@heroicons/vue": "^2.2.0",
    "axios": "^1.7.9",
+    "lucide-vue-next": "^0.503.0",
    "pinia": "^2.3.1",
    "vue": "^3.5.13",
    "vue-i18n": "10"
@@ -25,6 +25,7 @@
    "tailwindcss": "^3.4.17",
    "typescript": "~5.6.2",
    "vite": "^6.0.5",
+    "vite-plugin-pwa": "^1.0.0",
    "vue-tsc": "^2.2.0"
  }
 }
@@ -1,6 +1,12 @@
 <template>
-  <div class="text-white min-h-screen bg-zinc-950">
-    <Navbar />
+  <div class="text-white min-h-screen bg-zinc-950 print:bg-white">
+    <!-- PWA update prompt -->
+    <transition name="slide-anim">
+      <UpdatePrompt v-if="needRefresh" @onUpdateClick="updateApp()" />
+    </transition>
+
+    <!-- Content -->
+    <Navbar v-if="!globalStore.fullscreenMode" />
    <MainContainer />
  </div>
 </template>
@@ -8,10 +14,14 @@
 <script lang="ts" setup>
 import Navbar from './components/App/Navbar.vue';
 import MainContainer from './components/App/MainContainer.vue';
+import UpdatePrompt from './components/App/UpdatePrompt.vue';
+
 import { onMounted } from 'vue';
 import { useApiStore } from './stores/api.store';
 import { useGlobalStore } from './stores/global.store';
 import { useI18n } from 'vue-i18n';
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+import { DataStatus } from './types/api.types';

 const originalDocumentTitle = document.title;

@@ -19,28 +29,24 @@ const apiStore = useApiStore();
 const globalStore = useGlobalStore();
 const i18n = useI18n();

+const { needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
+
 onMounted(async () => {
  setupLocale();
  setupDarkMode();
+  setupOfflineMode();
  loadStorageTimetables();
  setupAfterPrintClose();

  await apiStore.setupAPIData();
-
-  const query = new URLSearchParams(window.location.search);
-
-  if (query.has('id')) {
-    const id = query.get('id')!;
-
-    const queryTrain = apiStore.activeData?.trains.find((train) => train.id == id);
-
-    if (queryTrain) {
-      globalStore.selectedTrainId = id;
-      globalStore.selectedActiveTrain = queryTrain;
-    }
-  }
+  handleQueries();
 });

+function updateApp() {
+  updateServiceWorker(true);
+  needRefresh.value = false;
+}
+
 function loadStorageTimetables() {
  if (!window.localStorage.getItem('savedTimetables')) return;

@@ -53,7 +59,9 @@ function loadStorageTimetables() {

 function setupDarkMode() {
  globalStore.darkMode =
-    localStorage.currentTheme === 'dark' || (!('currentTheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    localStorage.currentTheme === 'dark' ||
+    (!('currentTheme' in localStorage) &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
 }

 function setupAfterPrintClose() {
@@ -71,4 +79,37 @@ function setupLocale() {
    i18n.locale.value = window.localStorage.getItem('locale')!;
  }
 }
+
+function setupOfflineMode() {
+  apiStore.connectionMode = !navigator.onLine ? 'offline' : 'online';
+
+  window.addEventListener('offline', () => {
+    apiStore.connectionMode = 'offline';
+
+    apiStore.journalTimetablesData = null;
+    apiStore.activeData = null;
+  });
+
+  window.addEventListener('online', () => {
+    apiStore.connectionMode = 'online';
+    apiStore.journalDataStatus = DataStatus.SUCCESS;
+
+    apiStore.setupAPIData();
+  });
+}
+
+function handleQueries() {
+  const query = new URLSearchParams(window.location.search);
+
+  if (query.has('id')) {
+    const id = query.get('id')!;
+
+    const queryTrain = apiStore.activeData?.trains.find((train) => train.id == id);
+
+    if (queryTrain) {
+      globalStore.selectedTrainId = id;
+      globalStore.selectedActiveTrain = queryTrain;
+    }
+  }
+}
 </script>
@@ -1,13 +1,22 @@
 <template>
-  <main class="grid print:block p-3 mx-auto max-w-[800px] h-[calc(100vh-40px)] min-h-[300px] grid-rows-[auto_auto_1fr] gap-1">
-    <TimetableSelect />
-    <TimetableWarnings />
-    <TrainTimetable />
+  <main
+    class="grid print:block print:bg-white p-3 mx-auto max-w-[800px] min-h-[300px] gap-1 relative"
+    :class="{
+      'grid-rows-[auto_auto_1fr] h-[calc(100vh-40px)]': !globalStore.fullscreenMode,
+      'grid-rows-[1fr] h-screen': globalStore.fullscreenMode
+    }"
+  >
+    <SearchContainer v-if="!globalStore.fullscreenMode" />
+    <TimetableWarnings v-if="!globalStore.fullscreenMode" />
+    <TimetableContainer />
  </main>
 </template>

 <script setup lang="ts">
-import TimetableSelect from '../Timetable/TimetableSelect.vue';
-import TimetableWarnings from "../Timetable/TimetableWarnings.vue";
-import TrainTimetable from '../Timetable/TrainTimetable.vue';
+import { useGlobalStore } from '../../stores/global.store';
+import TimetableContainer from '../Timetable/TimetableContainer.vue';
+import TimetableWarnings from '../Timetable/TimetableWarnings.vue';
+import SearchContainer from '../TimetableSearch/SearchContainer.vue';
+
+const globalStore = useGlobalStore();
 </script>
@@ -1,15 +1,18 @@
 <template>
  <nav class="bg-zinc-900 w-full p-1 print:hidden flex justify-between items-center relative">
    <div class="flex items-center">
-      <img src="/favicon.svg" class="size-8 inline" />
+      <img src="/favicon.svg" class="size-8 inline" alt="SRJP logo" />
      <b class="ml-2 text-lg"
        >Rozkładownik TD2 <sup class="font-semibold text-zinc-300">{{ version }}</sup></b
      >
    </div>

    <div>
-      <button class="bg-slate-600 p-1 px-2 rounded-md hover:bg-slate-500 flex items-center" @click="changeLang()">
-        <LanguageIcon class="size-5 inline-block align-middle mr-2" /> {{ i18n.locale.value == 'pl' ? 'POL' : 'ENG' }}
+      <button
+        class="bg-slate-600 p-1 px-2 rounded-md hover:bg-slate-500 flex items-center"
+        @click="changeLang()"
+      >
+        <GlobeIcon :size="18" class="mr-2" /> {{ i18n.locale.value == 'pl' ? 'POL' : 'ENG' }}
      </button>
    </div>
    <!-- <div v-if="apiMode == 'mocking'"><ExclamationTriangleIcon class="size-6 inline mr-1 text-yellow-400" /> API mocking</div> -->
@@ -17,7 +20,7 @@
 </template>

 <script setup lang="ts">
-import { LanguageIcon } from '@heroicons/vue/16/solid';
+import { GlobeIcon } from 'lucide-vue-next';
 import { version } from '../../../package.json';
 import { useI18n } from 'vue-i18n';

@@ -0,0 +1,28 @@
+<template>
+  <div class="fixed z-50 bottom-0 right-0">
+    <button
+      @click="onUpdateClick"
+      class="p-3 m-3 bg-cyan-600 rounded-md text-xl hover:scale-105 transition-transform"
+      ref="updateBtnEl"
+    >
+      <div>{{ $t('update-prompt.line1') }}</div>
+      <u>{{ $t('update-prompt.line2') }}</u>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+
+const emit = defineEmits(['onUpdateClick']);
+const updateBtnEl = ref<HTMLElement | null>(null);
+
+function onUpdateClick() {
+  emit('onUpdateClick');
+}
+
+onMounted(() => {
+  updateBtnEl.value?.focus();
+});
+</script>
@@ -1,227 +0,0 @@
-<template>
-  <tbody>
-    <tr v-for="(row, i) in computedTimetable">
-      <!-- Line no. -->
-      <td
-        class="text-center align-top border-l border-l-black dark:border-l-white"
-        :class="{
-          'border-t border-t-black dark:border-t-white': i != 0 && computedTimetable[i - 1].realLine != row.realLine,
-          'border-b border-b-black dark:border-b-white': i == computedTimetable.length - 1,
-        }"
-      >
-        {{ i == 0 || computedTimetable[i - 1].realLine != row.realLine ? row.realLine : '&nbsp;' }}
-      </td>
-
-      <!-- Km -->
-      <td
-        class="border border-black dark:border-white border-t-1 border-b-1 relative p-0"
-        :class="{
-          'border-t-0':
-            i == 0 ||
-            (computedTimetable[i - 1].departureSpeed == row.arrivalSpeed &&
-              computedTimetable[i - 1].departureTracks == row.arrivalTracks &&
-              computedTimetable[i - 1].realLine == row.realLine),
-          'border-b-0': i != computedTimetable.length - 1,
-        }"
-      >
-        <div class="absolute top-0 left-0 w-full h-full">
-          <table class="h-full w-full border-collapse">
-            <tbody>
-
-              <!-- Arrival Km -->
-              <tr
-                :class="`align-top ${
-                  i == 0 ||
-                  (computedTimetable[i - 1].departureSpeed == row.arrivalSpeed &&
-                    computedTimetable[i - 1].departureTracks == row.arrivalTracks &&
-                    computedTimetable[i - 1].realLine == row.realLine)
-                    ? 'text-transparent'
-                    : 'text-inherit'
-                }`"
-              >
-                <td>{{ row.arrivalKm }}</td>
-              </tr>
-
-              <!-- Departure Km -->
-              <tr
-                :class="{
-                  'border-black dark:border-white border-t align-top':
-                    row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
-                  hidden: row.arrivalTracks == row.departureTracks && row.departureSpeed == row.arrivalSpeed,
-                }"
-              >
-                <td>{{ row.departureKm == '0.000' ? '' : row.departureKm }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </td>
-    
-      <!--  Vp, Vl -->
-      <td
-        class="text-center align-top p-0 border-l-black dark:border-l-white relative"
-        :class="{
-          'border-t border-t-black dark:border-t-white': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
-          'border-b border-b-black dark:border-b-white': i == computedTimetable.length - 1,
-        }"
-        colspan="2"
-      >
-        <div class="absolute top-0 left-0 w-full h-full">
-          <table class="h-full w-full border-collapse">
-            <tbody>
-              <tr class="align-top">
-                <td :colspan="row.arrivalTracks == 2 ? '1' : '2'" class="font-bold" width="35">
-                  {{
-                    i == 0 ||
-                    computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
-                    computedTimetable[i - 1].departureTracks != row.arrivalTracks
-                      ? row.arrivalSpeed
-                      : '&nbsp; '
-                  }}
-                </td>
-                
-                <td v-if="row.arrivalTracks == 2" class="border-l border-l-black dark:border-l-white" width="35">
-                  {{
-                    i == 0 ||
-                    computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
-                    computedTimetable[i - 1].departureTracks != row.arrivalTracks
-                      ? row.arrivalSpeed
-                      : '&nbsp; '
-                  }}
-                </td>
-              </tr>
-
-              <tr
-                :class="{
-                  'border-t border-t-black dark:border-t-white align-top':
-                    row.arrivalTracks != row.departureTracks || row.departureSpeed != row.arrivalSpeed,
-                }"
-              >
-                <td :colspan="row.departureTracks == 2 ? '1' : '2'" class="font-bold" width="35">
-                  {{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
-                </td>
-
-                <td v-if="row.departureTracks == 2" class="border-l border-l-black dark:border-l-white" width="35">
-                  {{ row.departureSpeed != row.arrivalSpeed || row.departureTracks != row.arrivalTracks ? row.departureSpeed : '&nbsp; ' }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </td>
-
-      <!-- Station -->
-      <td class="border border-black dark:border-white relative">
-        <div class="absolute top-0 left-0 w-full h-full">
-          <div class="flex flex-col h-full justify-between p-1">
-            <div :class="{ 'font-bold': row.isMain }">
-              {{ row.pointName }}
-              <span v-if="row.stopTime"> ; {{ row.stopType || 'pt' }}</span>
-            </div>
-
-            <div class="flex justify-between">
-              <span>{{ row.pointKm }}</span>
-              <span>{{ row.abbrevs.join(', ') }}</span>
-            </div>
-          </div>
-        </div>
-      </td>
-
-      <!-- Time -->
-      <td class="p-0 border border-black dark:border-white relative">
-        <div class="absolute top-0 left-0 w-full h-full">
-          <table class="h-full w-full border-collapse">
-            <tbody>
-              <tr class="text-center align-top h-full">
-                <td class="border-r-[1px] border-r-black dark:border-r-white" :class="{ 'font-bold': row.stopTime > 0 }">
-                  {{
-                    (row.scheduledArrivalDate?.getTime() || 0) != (row.scheduledDepartureDate?.getTime() || 0)
-                      ? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })
-                      : '|'
-                  }}
-                </td>
-                <td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td>
-              </tr>
-              <tr class="text-center align-bottom h-full">
-                <td class="border-r-[1px] border-r-black dark:border-r-white" :class="{ 'font-bold': row.stopTime > 0 }">
-                  {{ row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
-                </td>
-                <td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </td>
-
-      <!-- Locos -->
-      <td class="p-0 text-center border border-black dark:border-white relative h-24 text-sm" :class="{ 'text-stone-400 ': i > 0 }">
-        <table class="h-full w-full border-collapse">
-          <tbody>
-            <tr class="border-b-[1px] border-b-black dark:border-b-white">
-              <td>{{ row.headUnits[0] }}</td>
-            </tr>
-            <tr class="border-b-[1px] border-b-black dark:border-b-white">
-              <td>{{ row.headUnits[1] ?? '&nbsp;' }}</td>
-            </tr>
-            <tr>
-              <td>{{ row.headUnits[2] ?? '&nbsp;' }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-
-      <!-- Load / Length -->
-      <td class="p-0 text-center border border-black dark:border-white relative" :class="{ 'text-stone-400 ': i > 0 }">
-        <div class="absolute top-0 left-0 w-full h-full">
-          <table class="h-full w-full border-collapse">
-            <tbody>
-              <tr class="border-b-[1px] border-b-black dark:border-b-white">
-                <td>{{ row.stockMass }}</td>
-              </tr>
-              <tr>
-                <td>{{ row.stockLength }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </td>
-
-      <!-- Vmax-->
-      <td class="text-center border border-black dark:border-white" :class="{ 'text-stone-400 ': i > 0 }">{{ row.stockVmax }}</td>
-    </tr>
-  </tbody>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue';
-import type { StopRow } from '../../types/common.types';
-
-defineProps({
-  computedTimetable: {
-    type: Object as PropType<StopRow[]>,
-    required: true,
-  },
-});
-</script>
-
-<style scoped>
-@media print {
-  table {
-    page-break-after: auto;
-  }
-
-  tr {
-    page-break-inside: avoid;
-    page-break-after: auto;
-  }
-
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  td {
-    border-color: theme('colors.black');
-  }
-}
-</style>
@@ -0,0 +1,35 @@
+<template>
+  <!-- Button closing fullscreen mode, relative to MainContainer -->
+  <button
+    v-if="globalStore.fullscreenMode"
+    class="absolute right-6 top-3 p-1 rounded-md bg-green-600 hover:bg-green-500 print:hidden z-50"
+    @click="() => (globalStore.fullscreenMode = false)"
+  >
+    <Minimize2Icon :size="22" />
+  </button>
+
+  <!-- Timetable render based on current view mode -->
+  <CurrentTimetableView v-if="globalStore.currentTimetableData != null" />
+
+  <!-- If there is no timetable chosen -->
+  <div class="overflow-auto text-center font-bold text-zinc-400 p-1 min-h-full" v-else>
+    <component :is="viewModes[globalStore.viewMode]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from '../../stores/global.store';
+import LocalStorageView from '../TimetableViews/LocalStorageView.vue';
+import JournalStorageView from '../TimetableViews/JournalStorageView.vue';
+import ActiveDataView from '../TimetableViews/ActiveDataView.vue';
+import CurrentTimetableView from '../TimetableViews/CurrentTimetableView.vue';
+import { Minimize2Icon } from 'lucide-vue-next';
+
+const globalStore = useGlobalStore();
+
+const viewModes: Record<typeof globalStore.viewMode, any> = {
+  active: ActiveDataView,
+  storage: LocalStorageView,
+  journal: JournalStorageView
+};
+</script>
@@ -0,0 +1,614 @@
+<template>
+  <div>
+    <h2 class="p-1 font-bold w-max">
+      {{ globalStore.currentTimetableData!.category }}
+      {{ globalStore.currentTimetableData!.trainNo }} {{ $t('headers.relation') }}
+      {{ globalStore.currentTimetableData!.route.replace('|', ' - ') }}
+    </h2>
+
+    <table class="table-fixed mt-2 w-full border-collapse" v-if="computedTimetableRows.length > 0">
+      <thead>
+        <tr>
+          <th width="40" class="border border-black dark:border-white">
+            {{ $t('headers.line_no') }}
+          </th>
+          <th width="100" class="border border-black dark:border-white">
+            {{ $t('headers.line_km') }}
+          </th>
+          <th width="35" class="border border-black dark:border-white">V<sub>P</sub></th>
+          <th width="35" class="border border-black dark:border-white">V<sub>L</sub></th>
+          <th width="200" class="border border-black dark:border-white">
+            {{ $t('headers.station') }}
+          </th>
+          <th width="100" class="border border-black dark:border-white">
+            {{ $t('headers.time') }}
+          </th>
+          <th width="50" class="border border-black dark:border-white text-xs p-0">
+            <table class="h-full w-full border-collapse">
+              <tbody>
+                <tr class="border-b border-b-black dark:border-b-white">
+                  <td class="">{{ $t('headers.loco_1') }}</td>
+                </tr>
+                <tr class="border-b border-b-black dark:border-b-white">
+                  <td>{{ $t('headers.loco_2') }}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('headers.loco_3') }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </th>
+          <th width="55" class="border border-black dark:border-white text-xs relative">
+            <div class="absolute top-0 left-0 w-full h-full">
+              <table class="h-full w-full border-collapse">
+                <tbody>
+                  <tr class="border-b border-b-black dark:border-b-white">
+                    <td>{{ $t('headers.mass') }}</td>
+                  </tr>
+                  <tr>
+                    <td>{{ $t('headers.length') }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </th>
+          <th width="50" class="border border-black dark:border-white">{{ $t('headers.vmax') }}</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="(row, i) in computedTimetableRows">
+          <!-- Line no. -->
+          <td
+            class="text-center align-top border-l border-l-black dark:border-l-white"
+            :class="{
+              'border-t border-t-black dark:border-t-white':
+                row.lastRowRef != null && row.lastRowRef.realLine != row.realLine,
+              'border-b border-b-black dark:border-b-white': i == computedTimetableRows.length - 1
+            }"
+          >
+            {{
+              row.lastRowRef == null || row.lastRowRef.realLine != row.realLine
+                ? row.realLine
+                : '&nbsp;'
+            }}
+          </td>
+
+          <!-- Km -->
+          <td
+            class="border border-black dark:border-white border-t-1 border-b-1 relative p-0"
+            :class="{
+              'border-t-0':
+                row.lastRowRef == null ||
+                (row.lastRowRef.departureSpeed == row.arrivalSpeed &&
+                  row.lastRowRef.departureTracks == row.arrivalTracks &&
+                  row.lastRowRef.realLine == row.realLine),
+              'border-b-0': i != computedTimetableRows.length - 1
+            }"
+          >
+            <div class="absolute top-0 left-0 w-full h-full">
+              <table class="h-full w-full border-collapse">
+                <tbody>
+                  <!-- Arrival Km -->
+                  <tr
+                    :class="`align-top ${
+                      row.lastRowRef == null ||
+                      (row.lastRowRef.departureSpeed == row.arrivalSpeed &&
+                        row.lastRowRef.departureTracks == row.arrivalTracks &&
+                        row.lastRowRef.realLine == row.realLine)
+                        ? 'text-transparent'
+                        : 'text-inherit'
+                    }`"
+                  >
+                    <td>{{ row.arrivalKm }}</td>
+                  </tr>
+
+                  <!-- Departure Km -->
+                  <tr
+                    :class="{
+                      'border-black dark:border-white border-t align-top':
+                        row.arrivalTracks != row.departureTracks ||
+                        row.departureSpeed != row.arrivalSpeed,
+                      hidden:
+                        row.arrivalTracks == row.departureTracks &&
+                        row.departureSpeed == row.arrivalSpeed
+                    }"
+                  >
+                    <td>{{ row.departureKm == '0.000' ? '' : row.departureKm }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </td>
+
+          <!--  Vp, Vl -->
+          <td
+            class="text-center align-top p-0 border-l-black dark:border-l-white relative"
+            :class="{
+              'border-t border-t-black dark:border-t-white':
+                row.lastRowRef != null && row.lastRowRef.departureSpeed != row.arrivalSpeed,
+              'border-b border-b-black dark:border-b-white': i == computedTimetableRows.length - 1
+            }"
+            colspan="2"
+          >
+            <div class="absolute top-0 left-0 w-full h-full">
+              <table class="h-full w-full border-collapse">
+                <tbody>
+                  <tr class="align-top">
+                    <td :colspan="row.arrivalTracks == 2 ? '1' : '2'" class="font-bold" width="35">
+                      {{
+                        row.lastRowRef == null ||
+                        row.lastRowRef.departureSpeed != row.arrivalSpeed ||
+                        row.lastRowRef.departureTracks != row.arrivalTracks
+                          ? row.arrivalSpeed
+                          : '&nbsp; '
+                      }}
+                    </td>
+
+                    <td
+                      v-if="row.arrivalTracks == 2"
+                      class="border-l border-l-black dark:border-l-white"
+                      width="35"
+                    >
+                      {{
+                        row.lastRowRef == null ||
+                        row.lastRowRef.departureSpeed != row.arrivalSpeed ||
+                        row.lastRowRef.departureTracks != row.arrivalTracks
+                          ? row.arrivalSpeed
+                          : '&nbsp; '
+                      }}
+                    </td>
+                  </tr>
+
+                  <tr
+                    :class="{
+                      'border-t border-t-black dark:border-t-white align-top':
+                        row.arrivalTracks != row.departureTracks ||
+                        row.departureSpeed != row.arrivalSpeed
+                    }"
+                  >
+                    <td
+                      :colspan="row.departureTracks == 2 ? '1' : '2'"
+                      class="font-bold"
+                      width="35"
+                    >
+                      {{
+                        row.departureSpeed != row.arrivalSpeed ||
+                        row.departureTracks != row.arrivalTracks
+                          ? row.departureSpeed
+                          : '&nbsp; '
+                      }}
+                    </td>
+
+                    <td
+                      v-if="row.departureTracks == 2"
+                      class="border-l border-l-black dark:border-l-white"
+                      width="35"
+                    >
+                      {{
+                        row.departureSpeed != row.arrivalSpeed ||
+                        row.departureTracks != row.arrivalTracks
+                          ? row.departureSpeed
+                          : '&nbsp; '
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </td>
+
+          <!-- Station -->
+          <td class="border border-black dark:border-white relative">
+            <div class="absolute top-0 left-0 w-full h-full">
+              <div class="flex flex-col h-full justify-between p-1">
+                <div :class="{ 'font-bold': row.isMain }">
+                  {{ row.pointName }}
+                  <span v-if="row.stopTime"> ; {{ row.stopType || 'pt' }}</span>
+                </div>
+
+                <div class="flex justify-between">
+                  <span>{{ row.pointKm }}</span>
+                  <span>{{ row.abbrevs.join(', ') }}</span>
+                </div>
+              </div>
+            </div>
+          </td>
+
+          <!-- Time -->
+          <td class="p-0 border border-black dark:border-white relative">
+            <div class="absolute top-0 left-0 w-full h-full">
+              <table class="h-full w-full border-collapse">
+                <tbody>
+                  <tr class="text-center align-top h-full">
+                    <td
+                      class="border-r-[1px] border-r-black dark:border-r-white"
+                      :class="{ 'font-bold': row.stopTime > 0 }"
+                    >
+                      {{
+                        (row.scheduledArrivalDate?.getTime() || 0) !=
+                        (row.scheduledDepartureDate?.getTime() || 0)
+                          ? row.scheduledArrivalDate?.toLocaleTimeString('pl-PL', {
+                              hour: '2-digit',
+                              minute: '2-digit'
+                            })
+                          : '|'
+                      }}
+                    </td>
+                    <td width="30">{{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}</td>
+                  </tr>
+                  <tr class="text-center align-bottom h-full">
+                    <td
+                      class="border-r-[1px] border-r-black dark:border-r-white"
+                      :class="{ 'font-bold': row.stopTime > 0 }"
+                    >
+                      {{
+                        row.scheduledDepartureDate?.toLocaleTimeString('pl-PL', {
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })
+                      }}
+                    </td>
+                    <td width="30" class="font-bold">{{ row.stopTime || '' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </td>
+
+          <!-- Locos -->
+          <td
+            class="p-0 text-center border border-black dark:border-white relative h-24 text-sm"
+            :class="{ 'text-stone-400 ': i > 0 }"
+          >
+            <table class="h-full w-full border-collapse">
+              <tbody>
+                <tr class="border-b-[1px] border-b-black dark:border-b-white">
+                  <td>{{ row.headUnits[0] }}</td>
+                </tr>
+                <tr class="border-b-[1px] border-b-black dark:border-b-white">
+                  <td>{{ row.headUnits[1] ?? '&nbsp;' }}</td>
+                </tr>
+                <tr>
+                  <td>{{ row.headUnits[2] ?? '&nbsp;' }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+
+          <!-- Load / Length -->
+          <td
+            class="p-0 text-center border border-black dark:border-white relative"
+            :class="{ 'text-stone-400 ': i > 0 }"
+          >
+            <div class="absolute top-0 left-0 w-full h-full">
+              <table class="h-full w-full border-collapse">
+                <tbody>
+                  <tr class="border-b-[1px] border-b-black dark:border-b-white">
+                    <td>{{ row.stockMass }}</td>
+                  </tr>
+                  <tr>
+                    <td>{{ row.stockLength }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </td>
+
+          <!-- Vmax-->
+          <td
+            class="text-center border border-black dark:border-white"
+            :class="{ 'text-stone-400 ': i > 0 }"
+          >
+            {{ row.stockVmax }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useApiStore } from '../../stores/api.store';
+import { useGlobalStore } from '../../stores/global.store';
+import type { SceneryRoute, StopRow, TimetablePathData } from '../../types/common.types';
+
+const globalStore = useGlobalStore();
+const apiStore = useApiStore();
+
+// Tymczasowa tabelka z posterunkami APO
+const apoNames = ['Stary Kisielin, pe', 'Czerwony Dwór, pe', 'Szczejkowice, pe'];
+
+const computedTimetableRows = computed(() => {
+  const timetableData = globalStore.currentTimetableData;
+
+  if (!timetableData) return [];
+
+  let timeFrom = Date.now();
+
+  const stockVmax = timetableData.trainMaxSpeed,
+    stockMass = Math.floor(timetableData.mass / 1000),
+    stockLength = timetableData.length;
+
+  const timetablePath = parseTimetablePath(timetableData.path);
+
+  const stopRows: StopRow[] = [];
+
+  let lastRowRef: StopRow | null = null;
+
+  let currentPathIndex = 0;
+  let currentPath = timetablePath[0];
+
+  let lastDepartureTimestamp = 0;
+
+  let arrivalKm = 0,
+    arrivalSpeed = 0,
+    arrivalTracks = 0,
+    departureSpeed = 0,
+    departureTracks = 2,
+    realLineNo = 0,
+    abbrevs = [] as string[];
+
+  if (currentPath.departureLineData) {
+    departureSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
+    departureTracks = currentPath.departureLineData.routeTracks;
+
+    arrivalSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
+    arrivalTracks = currentPath.departureLineData.routeTracks;
+
+    realLineNo = currentPath.departureLineData?.realLineNo ?? 0;
+    abbrevs = getAbbrevs(currentPath.departureLineData);
+  }
+
+  // console.debug('=========== ' + timetableData.trainNo + ' ===========');
+
+  const stopList = parseStopListString(timetableData.stopListString);
+
+  for (const stop of stopList) {
+    if (stop.arrivalLine && stop.arrivalLine == currentPath.arrivalLine) {
+      if (arrivalKm >= stop.stopDistance)
+        arrivalKm =
+          (Number(stopRows[stopRows.length - 1].departureKm ?? '0') + stop.stopDistance) / 2;
+
+      if (currentPath.arrivalLineData) {
+        arrivalSpeed = Math.min(currentPath.arrivalLineData.routeSpeed, stockVmax);
+        arrivalTracks = currentPath.arrivalLineData.routeTracks;
+        realLineNo = currentPath.arrivalLineData.realLineNo ?? 0;
+        abbrevs = getAbbrevs(currentPath.arrivalLineData);
+      }
+
+      departureSpeed = arrivalSpeed;
+      departureTracks = arrivalTracks;
+    }
+
+    if (
+      stop.mainStop ||
+      (/^podg|po|pe$/.test(stop.stopNameRAW) && !/^sbl/i.test(stop.stopNameRAW))
+    ) {
+      let correctedDepartureSpeed = 0,
+        correctedDepartureTracks = 0;
+
+      const internalRouteInfo = stop.departureLine
+        ? currentPath.sceneryData?.routesInfo.find(
+            (route) => route.isInternal && route.routeName == stop.departureLine
+          )
+        : undefined;
+
+      if (internalRouteInfo) {
+        correctedDepartureSpeed = Math.min(internalRouteInfo.routeSpeed, stockVmax);
+        departureSpeed = Math.min(internalRouteInfo.routeSpeed, stockVmax);
+        realLineNo = internalRouteInfo.realLineNo ?? realLineNo;
+        abbrevs = getAbbrevs(internalRouteInfo);
+
+        correctedDepartureTracks = internalRouteInfo.routeTracks;
+        departureTracks = internalRouteInfo.routeTracks;
+
+        if (stopRows.length == 0) {
+          arrivalSpeed = departureSpeed;
+          arrivalTracks = departureTracks;
+        }
+      }
+
+      let pointAbbrevs = [];
+      if (apoNames.includes(stop.stopNameRAW))
+        pointAbbrevs.unshift(`APO ${currentPath.sceneryData?.abbr}`);
+
+      let rowData: StopRow = {
+        isMain: stop.mainStop,
+        pointKm: stop.stopDistance.toFixed(3),
+        pointName: stop.stopNameRAW,
+        scheduledArrivalDate: stop.arrivalTimestamp ? new Date(stop.arrivalTimestamp) : null,
+        scheduledDepartureDate: stop.departureTimestamp ? new Date(stop.departureTimestamp) : null,
+        stopTime: stop.stopTime ? (stop.departureTimestamp - stop.arrivalTimestamp) / 60000 : 0,
+        stopType: stop.stopType,
+        sceneryName: currentPath.sceneryName,
+        realLine: realLineNo == 0 ? '' : realLineNo.toString(),
+        driveTime: lastDepartureTimestamp ? stop.arrivalTimestamp - lastDepartureTimestamp : 0,
+
+        abbrevs: [...pointAbbrevs, ...abbrevs],
+
+        arrivalKm: arrivalKm.toFixed(3),
+        departureKm: stop.stopDistance.toFixed(3),
+
+        arrivalSpeed: arrivalSpeed,
+        arrivalTracks: arrivalTracks,
+
+        departureSpeed: departureSpeed,
+        departureTracks: departureTracks,
+
+        headUnits: timetableData.headUnits,
+        stockVmax,
+        stockLength,
+        stockMass,
+
+        lastRowRef
+      };
+
+      // console.debug(stop.stopNameRAW, stop.departureLine);
+
+      arrivalKm = stop.stopDistance;
+      arrivalSpeed = correctedDepartureSpeed || arrivalSpeed;
+      arrivalTracks = correctedDepartureTracks || arrivalTracks;
+
+      if (stop.departureTimestamp) lastDepartureTimestamp = stop.departureTimestamp;
+      lastRowRef = rowData;
+
+      stopRows.push(rowData);
+    }
+
+    if (stop.departureLine && stop.departureLine == currentPath.departureLine) {
+      arrivalKm = stop.stopDistance;
+
+      // Reverse search for last scenery checkpoint
+      if (currentPath.departureLineData) {
+        if (
+          currentPath.departureLineData.routeLength != 0 &&
+          !currentPath.departureLineData.isRouteSBL
+        )
+          arrivalKm = stop.stopDistance + currentPath.departureLineData.routeLength / 1000;
+
+        if (
+          stopRows[stopRows.length - 1].isMain &&
+          currentPath.departureLineData.isRouteSBL &&
+          stop.departureLine == currentPath.departureLine
+        )
+          arrivalKm = stop.stopDistance + currentPath.departureLineData.routeLength / 1000;
+
+        for (let i = stopRows.length - 1; i >= 0; i--) {
+          stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
+          stopRows[i].departureSpeed = Math.min(
+            currentPath.departureLineData.routeSpeed,
+            stockVmax
+          );
+          stopRows[i].realLine = currentPath.departureLineData.realLineNo?.toString() ?? '';
+
+          if (stopRows[i].isMain || stopRows[i].pointName.endsWith(', podg')) {
+            stopRows[i].departureSpeed = Math.min(
+              currentPath.departureLineData.routeSpeed,
+              stockVmax
+            );
+            stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
+
+            // console.log(
+            //   stop.departureLine,
+            //   currentPath.sceneryName,
+            //   stop.stopDistance,
+            //   currentPath.departureLineData.routeLength,
+            //   currentPath.departureLineData.isRouteSBL
+            // );
+
+            /* 
+            if (currentPath.departureLineData.isRouteSBL)
+              arrivalKm = stop.stopDistance + (currentPath.departureLineData.routeSpeed <= 130 ? 1.0 : 2.0);
+            else */
+
+            abbrevs = getAbbrevs(currentPath.departureLineData);
+            stopRows[i].abbrevs = abbrevs;
+            break;
+          }
+
+          stopRows[i].arrivalSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
+          stopRows[i].arrivalTracks = currentPath.departureLineData.routeTracks;
+        }
+      }
+
+      currentPath = timetablePath[++currentPathIndex];
+    }
+  }
+
+  let timeTo = Date.now();
+
+  globalStore.generatedMs = timeTo - timeFrom;
+
+  return stopRows;
+});
+
+function parseTimetablePath(path: string): TimetablePathData[] {
+  return path.split(';').map((pathEl) => {
+    const [arrivalLine, scenery, departureLine] = pathEl.split(',');
+    const sceneryName = scenery.split(' ').slice(0, -1).join(' ');
+
+    const sceneryData = apiStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
+    const arrivalLineData = arrivalLine
+      ? sceneryData?.routesInfo.find((rt) => rt.routeName == arrivalLine) ?? null
+      : null;
+    const departureLineData = departureLine
+      ? sceneryData?.routesInfo.find((rt) => rt.routeName == departureLine) ?? null
+      : null;
+
+    return {
+      sceneryName,
+      sceneryData: sceneryData ?? null,
+      arrivalLine: arrivalLine ?? '',
+      departureLine: departureLine ?? '',
+      arrivalLineData,
+      departureLineData
+    };
+  });
+}
+
+function parseStopListString(stopsString: string) {
+  //${stop.arrivalLine ?? ''};${stop.arrivalTimestamp};${stop.stopNameRAW};${stop.stopTime ? stop.stopTime + '_' + stop.stopType : ''};${stop.mainStop};${stop.stopDistance};${stop.departureTimestamp};${stop.departureLine ?? ''}
+  return stopsString.split('~~').map((stop) => {
+    const [
+      arrivalLine,
+      arrivalTimestamp,
+      stopNameRAW,
+      stopDetails,
+      isMainStop,
+      stopDistance,
+      departureTimestamp,
+      departureLine
+    ] = stop.split(';');
+    const [stopTime, stopType] = stopDetails.split('_');
+
+    return {
+      arrivalLine,
+      arrivalTimestamp: parseInt(arrivalTimestamp),
+      stopNameRAW,
+      stopTime: stopTime ?? 0,
+      stopType: stopType ?? null,
+      mainStop: isMainStop == 'true',
+      stopDistance: parseFloat(stopDistance),
+      departureTimestamp: parseInt(departureTimestamp),
+      departureLine
+    };
+  });
+}
+
+function getAbbrevs(routeData: SceneryRoute) {
+  const abbrevs = [];
+
+  if (routeData.isRouteSBL == true)
+    abbrevs.push(
+      `${routeData.routeSpeed > 130 ? '4' : ''}S${routeData.routeTracks == 2 ? 'S' : ''}`
+    );
+  else if (routeData.routeTracks == 2) abbrevs.push('PP');
+
+  return abbrevs;
+}
+</script>
+
+<style scoped>
+@media print {
+  th,
+  tr,
+  td {
+    border-color: theme('colors.black');
+  }
+
+  table {
+    page-break-after: auto;
+  }
+
+  tr {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+}
+</style>
@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <h2 class="font-semibold text-center text-3xl">
+      {{ globalStore.currentTimetableData!.category }}
+      {{ globalStore.currentTimetableData!.trainNo }}
+    </h2>
+
+    <h3 class="font-medium text-center">
+      {{ globalStore.currentTimetableData!.route.replace('|', ' - ') }}
+    </h3>
+
+    <p class="mt-2 text-center">
+      Kursuje: {{ timetableDate.toLocaleDateString('pl-PL', { day: '2-digit' }) }}.{{
+        romanMonthDigits[timetableDate.getMonth()]
+      }}.{{ timetableDate.toLocaleDateString('pl-PL', { year: 'numeric' }) }}
+    </p>
+
+    <p class="mt-2">
+      Lokomotywa elektryczna {{ globalStore.currentTimetableData!.headUnits[0] }}, waga:
+      {{ (globalStore.currentTimetableData!.mass / 1000).toFixed(1) }} t, długość:
+      {{ globalStore.currentTimetableData!.length }} m
+    </p>
+
+    <p></p>
+
+    <table class="table-fixed w-full border-collapse h-full">
+      <thead>
+        <tr>
+          <!-- Name  -->
+          <th
+            width="250"
+            class="font-normal border border-black dark:border-white border-l-transparent"
+          >
+            <MapPinIcon :size="20" class="mx-auto" />
+          </th>
+
+          <!-- Info -->
+          <th width="50" class="font-normal border border-black dark:border-white">
+            <CircleAlertIcon :size="20" class="mx-auto" />
+          </th>
+
+          <!-- Drive time -->
+          <th width="30" class="font-normal border border-black dark:border-white">
+            <TimerIcon :size="20" class="mx-auto" />
+          </th>
+
+          <!-- Arrival -->
+          <th width="70" class="font-normal border border-black dark:border-white">
+            <CalendarArrowUpIcon :size="20" class="mx-auto" />
+          </th>
+
+          <!-- Stop time -->
+          <th width="40" class="font-normal border border-black dark:border-white">
+            <HandIcon :size="20" class="mx-auto" />
+          </th>
+
+          <!-- Departure -->
+          <th width="70" class="font-normal border border-black dark:border-white">
+            <CalendarArrowDownIcon :size="20" class="mx-auto" />
+          </th>
+
+          <!-- vMax -->
+          <th
+            width="80"
+            class="font-normal border border-black dark:border-white border-r-transparent"
+          >
+            <CircleGaugeIcon :size="20" class="mx-auto" />
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="(row, i) in computedTimetableRows"
+          :class="{ 'bg-slate-100 dark:bg-zinc-900 print:bg-gray-300': i % 2 == 0 }"
+          class="leading-none"
+        >
+          <td class="px-2 font-thin text-nowrap overflow-hidden overflow-ellipsis">
+            <span :class="{ 'font-semibold': row.isMain, 'font-normal': !row.isMain }">
+              {{ row.pointName }}</span
+            ><span
+              >.............................................................................................
+            </span>
+          </td>
+
+          <td
+            class="border border-black dark:border-white border-t-transparent border-b-transparent"
+          ></td>
+
+          <td
+            class="border border-black dark:border-white border-t-transparent border-b-transparent text-center font-bold"
+          >
+            {{ row.driveTime ? Math.floor(row.driveTime / 60000) : '' }}
+          </td>
+
+          <td
+            class="border border-black dark:border-white border-t-transparent border-b-transparent text-right font-bold px-2"
+          >
+            <span v-if="row.stopType == 'pt'">+ </span>
+            <span> {{ row.arrivalDateStr }} </span>
+          </td>
+
+          <td
+            class="border border-black dark:border-white border-t-transparent border-b-transparent text-center font-semibold"
+          >
+            {{ row.stopTime || '' }}
+          </td>
+
+          <td
+            class="border border-black dark:border-white border-t-transparent border-b-transparent text-right font-bold px-2 relative"
+          >
+            <span
+              class="absolute right-[-3px] border-r-[5px] border-black"
+              :class="{
+                'top-0 h-[calc(100%+1px)]':
+                  row.arrivalTracks == row.departureTracks && row.arrivalTracks == 2,
+                'top-0 h-[calc(50%+1px)]': row.arrivalTracks > row.departureTracks,
+                'top-1/2 h-[calc(50%+1px)]': row.arrivalTracks < row.departureTracks
+              }"
+            ></span>
+            {{ row.departureDateStr }}
+          </td>
+
+          <!--  v-if="
+                i == 0 || (i > 0 && computedTimetableRows[i - 1].departureSpeed != row.arrivalSpeed)
+              " -->
+          <td class="text-center font-bold">
+            <span v-if="i == 0 || computedTimetableRows[i - 1].departureSpeed != row.arrivalSpeed">
+              {{ i == 0 ? row.departureSpeed : row.arrivalSpeed }}
+              <span v-if="row.arrivalSpeed != row.departureSpeed">
+                /
+                {{ row.departureSpeed }}
+              </span>
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useGlobalStore } from '../../stores/global.store';
+import type { StopRowCZ, TimetablePathData } from '../../types/common.types';
+import { useApiStore } from '../../stores/api.store';
+import {
+  CalendarArrowDownIcon,
+  CalendarArrowUpIcon,
+  CircleAlertIcon,
+  CircleGaugeIcon,
+  HandIcon,
+  MapPinIcon,
+  TimerIcon
+} from 'lucide-vue-next';
+
+const globalStore = useGlobalStore();
+const apiStore = useApiStore();
+
+const timetableDate = ref(new Date());
+
+const romanMonthDigits = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'];
+
+const computedTimetableRows = computed(() => {
+  const timetableData = globalStore.currentTimetableData;
+
+  if (!timetableData) return [];
+
+  let timeFrom = Date.now();
+
+  const stockVmax = timetableData.trainMaxSpeed,
+    stockMass = Math.floor(timetableData.mass / 1000),
+    stockLength = timetableData.length;
+
+  const timetablePath = parseTimetablePath(timetableData.path);
+
+  const stopRows: StopRowCZ[] = [];
+
+  let currentPathIndex = 0;
+  let currentPath = timetablePath[0];
+
+  let lastDepartureTimestamp = 0;
+
+  let arrivalSpeed = 0,
+    departureSpeed = 0,
+    arrivalTracks = 0,
+    departureTracks = 2;
+
+  if (currentPath.departureLineData) {
+    departureSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
+    arrivalSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
+
+    departureTracks = currentPath.departureLineData.routeTracks;
+    arrivalTracks = currentPath.departureLineData.routeTracks;
+  }
+
+  const stopList = parseStopListString(timetableData.stopListString);
+
+  timetableDate.value = new Date(stopList[0].departureTimestamp);
+
+  stopList.forEach((stop) => {
+    if (stop.arrivalLine && stop.arrivalLine == currentPath.arrivalLine) {
+      if (currentPath.arrivalLineData) {
+        arrivalSpeed = Math.min(currentPath.arrivalLineData.routeSpeed, stockVmax);
+        arrivalTracks = currentPath.arrivalLineData.routeTracks;
+      }
+
+      departureSpeed = arrivalSpeed;
+      departureTracks = arrivalTracks;
+    }
+
+    if (
+      stop.mainStop ||
+      (/^podg|po|pe$/.test(stop.stopNameRAW) && !/^sbl/i.test(stop.stopNameRAW))
+    ) {
+      let correctedDepartureSpeed = 0,
+        correctedDepartureTracks = 0;
+
+      const internalRouteInfo = stop.departureLine
+        ? currentPath.sceneryData?.routesInfo.find(
+            (route) => route.isInternal && route.routeName == stop.departureLine
+          )
+        : undefined;
+
+      if (internalRouteInfo) {
+        correctedDepartureSpeed = Math.min(internalRouteInfo.routeSpeed, stockVmax);
+        departureSpeed = Math.min(internalRouteInfo.routeSpeed, stockVmax);
+        correctedDepartureTracks = internalRouteInfo.routeTracks;
+        departureTracks = internalRouteInfo.routeTracks;
+
+        if (stopRows.length == 0) {
+          arrivalSpeed = departureSpeed;
+          arrivalTracks = departureTracks;
+        }
+      }
+
+      const scheduledArrivalDate = stop.arrivalTimestamp ? new Date(stop.arrivalTimestamp) : null;
+
+      const scheduledDepartureDate = stop.departureTimestamp
+        ? new Date(stop.departureTimestamp)
+        : null;
+
+      let arrivalDateStr =
+        scheduledArrivalDate?.toLocaleTimeString('pl-PL', {
+          hour: 'numeric',
+          minute: '2-digit'
+        }) ?? '';
+
+      let departureDateStr =
+        scheduledDepartureDate?.toLocaleTimeString('pl-PL', {
+          hour: 'numeric',
+          minute: '2-digit'
+        }) ?? '';
+
+      if (
+        stopRows.length > 0 &&
+        stopRows[stopRows.length - 1]?.scheduledArrivalDate?.getHours() ==
+          scheduledArrivalDate?.getHours()
+      ) {
+        arrivalDateStr = arrivalDateStr.split(':').slice(1).join(' ');
+      }
+
+      if (
+        stopRows[stopRows.length - 1]?.scheduledDepartureDate?.getHours() ==
+        scheduledDepartureDate?.getHours()
+      ) {
+        departureDateStr = departureDateStr.split(':').slice(1).join(' ');
+      }
+
+      let rowData: StopRowCZ = {
+        isMain: stop.mainStop,
+        pointKm: stop.stopDistance.toFixed(3),
+        pointName: stop.stopNameRAW,
+        scheduledArrivalDate,
+        scheduledDepartureDate,
+        stopTime: stop.stopTime ? (stop.departureTimestamp - stop.arrivalTimestamp) / 60000 : 0,
+        stopType: stop.stopType,
+        sceneryName: currentPath.sceneryName,
+        driveTime: lastDepartureTimestamp ? stop.arrivalTimestamp - lastDepartureTimestamp : 0,
+
+        arrivalSpeed: arrivalSpeed,
+        departureSpeed: departureSpeed,
+
+        arrivalTracks,
+        departureTracks,
+
+        headUnits: timetableData.headUnits,
+        stockVmax,
+        stockLength,
+        stockMass,
+
+        arrivalDateStr,
+        departureDateStr
+      };
+
+      arrivalSpeed = correctedDepartureSpeed || arrivalSpeed;
+      arrivalTracks = correctedDepartureTracks || arrivalTracks;
+
+      if (stop.departureTimestamp) lastDepartureTimestamp = stop.departureTimestamp;
+
+      stopRows.push(rowData);
+    }
+
+    if (stop.departureLine && stop.departureLine == currentPath.departureLine) {
+      // Reverse search for last scenery checkpoint
+      if (currentPath.departureLineData) {
+        for (let i = stopRows.length - 1; i >= 0; i--) {
+          stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
+
+          stopRows[i].departureSpeed = Math.min(
+            currentPath.departureLineData.routeSpeed,
+            stockVmax
+          );
+
+          if (stopRows[i].isMain || stopRows[i].pointName.endsWith(', podg')) {
+            stopRows[i].departureSpeed = Math.min(
+              currentPath.departureLineData.routeSpeed,
+              stockVmax
+            );
+
+            stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
+
+            break;
+          }
+
+          stopRows[i].arrivalSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
+          stopRows[i].arrivalTracks = currentPath.departureLineData.routeTracks;
+        }
+      }
+
+      currentPath = timetablePath[++currentPathIndex];
+    }
+  });
+
+  let timeTo = Date.now();
+
+  globalStore.generatedMs = timeTo - timeFrom;
+
+  return stopRows;
+});
+
+function parseTimetablePath(path: string): TimetablePathData[] {
+  return path.split(';').map((pathEl) => {
+    const [arrivalLine, scenery, departureLine] = pathEl.split(',');
+    const sceneryName = scenery.split(' ').slice(0, -1).join(' ');
+
+    const sceneryData = apiStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
+    const arrivalLineData = arrivalLine
+      ? sceneryData?.routesInfo.find((rt) => rt.routeName == arrivalLine) ?? null
+      : null;
+    const departureLineData = departureLine
+      ? sceneryData?.routesInfo.find((rt) => rt.routeName == departureLine) ?? null
+      : null;
+
+    return {
+      sceneryName,
+      sceneryData: sceneryData ?? null,
+      arrivalLine: arrivalLine ?? '',
+      departureLine: departureLine ?? '',
+      arrivalLineData,
+      departureLineData
+    };
+  });
+}
+
+function parseStopListString(stopsString: string) {
+  //${stop.arrivalLine ?? ''};${stop.arrivalTimestamp};${stop.stopNameRAW};${stop.stopTime ? stop.stopTime + '_' + stop.stopType : ''};${stop.mainStop};${stop.stopDistance};${stop.departureTimestamp};${stop.departureLine ?? ''}
+  return stopsString.split('~~').map((stop) => {
+    const [
+      arrivalLine,
+      arrivalTimestamp,
+      stopNameRAW,
+      stopDetails,
+      isMainStop,
+      stopDistance,
+      departureTimestamp,
+      departureLine
+    ] = stop.split(';');
+    const [stopTime, stopType] = stopDetails.split('_');
+
+    return {
+      arrivalLine,
+      arrivalTimestamp: parseInt(arrivalTimestamp),
+      stopNameRAW,
+      stopTime: Number(stopTime ?? 0),
+      stopType: stopType ?? null,
+      mainStop: isMainStop == 'true',
+      stopDistance: parseFloat(stopDistance),
+      departureTimestamp: parseInt(departureTimestamp),
+      departureLine
+    };
+  });
+}
+</script>
@@ -1,50 +0,0 @@
-<template>
-  <thead>
-    <tr>
-      <th width="40" class="border border-black dark:border-white">{{ $t('headers.line_no') }}</th>
-      <th width="100" class="border border-black dark:border-white">{{ $t('headers.line_km') }}</th>
-      <th width="35" class="border border-black dark:border-white">V<sub>P</sub></th>
-      <th width="35" class="border border-black dark:border-white">V<sub>L</sub></th>
-      <th width="200" class="border border-black dark:border-white">{{ $t('headers.station') }}</th>
-      <th width="100" class="border border-black dark:border-white">{{ $t('headers.time') }}</th>
-      <th width="50" class="border border-black dark:border-white text-xs p-0">
-        <table class="h-full w-full border-collapse">
-          <tbody>
-            <tr class="border-b border-b-black dark:border-b-white">
-              <td class="">{{ $t('headers.loco_1') }}</td>
-            </tr>
-            <tr class="border-b border-b-black dark:border-b-white">
-              <td>{{ $t('headers.loco_2') }}</td>
-            </tr>
-            <tr>
-              <td>{{ $t('headers.loco_3') }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </th>
-      <th width="55" class="border border-black dark:border-white text-xs relative">
-        <div class="absolute top-0 left-0 w-full h-full">
-          <table class="h-full w-full border-collapse">
-            <tbody>
-              <tr class="border-b border-b-black dark:border-b-white">
-                <td>{{ $t('headers.mass') }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('headers.length') }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </th>
-      <th width="50" class="border border-black dark:border-white">{{ $t('headers.vmax') }}</th>
-    </tr>
-  </thead>
-</template>
-
-<style scoped>
-@media print {
-  th, tr {
-    border-color: theme('colors.black');
-  }
-}
-</style>
@@ -1,147 +0,0 @@
-<template>
-  <div class="flex gap-2 mb-2 print:hidden">
-    <button
-      class="p-1 rounded-md"
-      :class="{
-        'bg-zinc-800 hover:bg-zinc-700': globalStore.viewMode == 'active',
-        'bg-green-600 hover:bg-green-500': globalStore.viewMode == 'storage',
-      }"
-      @click="toggleViewMode"
-    >
-      <ArchiveBoxArrowDownIcon class="size-6" />
-    </button>
-
-    <select
-      name="trains"
-      id="trains-select"
-      class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
-      :disabled="apiStore.activeDataStatus != DataStatus.SUCCESS"
-      v-model="globalStore.selectedTrainId"
-      v-if="globalStore.viewMode == 'active'"
-      @change="selectTrain"
-    >
-      <option :value="null" disabled>
-        {{ apiStore.activeDataStatus == DataStatus.LOADING ? $t('data-loading-text') : $t('train-select-placeholder') }}
-      </option>
-      <option :value="train.id" v-for="train in globalStore.activeTimetableTrains">
-        {{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }} [{{ getRegionNameById(train.region) }}]
-      </option>
-    </select>
-
-    <input
-      type="text"
-      v-if="globalStore.viewMode == 'storage'"
-      v-model="globalStore.timetableSearch"
-      class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
-      :placeholder="$t('train-search-placeholder')"
-    />
-
-    <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="toggleDarkMode">
-      <MoonIcon v-if="globalStore.darkMode" class="text-white size-6" />
-      <SunIcon v-else class="text-white size-6" />
-    </button>
-
-    <button
-      class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
-      :disabled="globalStore.currentTimetableData == null"
-      @click="openPrintingWindow"
-    >
-      <PrinterIcon class="text-white size-6" />
-    </button>
-
-    <button
-      class="p-1 rounded-md disabled:opacity-60 disabled:hover:bg-zinc-800"
-      :disabled="globalStore.currentTimetableData == null"
-      :class="{
-        'bg-green-600 hover:bg-green-700': isTimetableSaved,
-        'bg-zinc-800 hover:bg-zinc-700': !isTimetableSaved,
-      }"
-      @click="saveToStorage"
-    >
-      <ArrowDownTrayIcon class="text-white size-6" />
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useApiStore } from '../../stores/api.store';
-import { DataStatus } from '../../types/api.types';
-import { useGlobalStore } from '../../stores/global.store';
-import { PrinterIcon, MoonIcon, SunIcon, ArchiveBoxArrowDownIcon, ArrowDownTrayIcon } from '@heroicons/vue/16/solid';
-import { getRegionNameById } from '../../utils/trainUtils';
-import type { TimetableData } from '../../types/common.types';
-
-// Stores
-const apiStore = useApiStore();
-const globalStore = useGlobalStore();
-
-// Computed
-const isTimetableSaved = computed(() => {
-  if (!globalStore.currentTimetableData) return false;
-
-  return Object.keys(globalStore.storageTimetables).includes(`${globalStore.currentTimetableData.timetableId}`);
-});
-
-// Methods
-function selectTrain() {
-  if (!apiStore.activeData) return;
-
-  globalStore.selectedActiveTrain = globalStore.activeTimetableTrains.find((train) => train.id == globalStore.selectedTrainId) ?? null;
-
-  if (globalStore.selectedActiveTrain != null) {
-    globalStore.generatedDate = new Date();
-  }
-}
-
-function toggleViewMode() {
-  globalStore.viewMode = globalStore.viewMode == 'active' ? 'storage' : 'active';
-}
-
-function toggleDarkMode() {
-  globalStore.darkMode = !globalStore.darkMode;
-
-  window.localStorage.setItem('currentTheme', globalStore.darkMode ? 'dark' : 'light');
-}
-
-function saveToStorage() {
-  if (globalStore.currentTimetableData == null) return;
-
-  try {
-    const savedTimetablesStorage = localStorage.getItem('savedTimetables');
-    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage ? JSON.parse(savedTimetablesStorage) : {};
-
-    if (savedTimetablesJSON[globalStore.currentTimetableData.timetableId] !== undefined) {
-      globalStore.selectedStorageTimetable = savedTimetablesJSON[globalStore.currentTimetableData.timetableId];
-      globalStore.viewMode = 'storage';
-
-      return;
-    }
-
-    savedTimetablesJSON[globalStore.currentTimetableData.timetableId] = { ...globalStore.currentTimetableData, savedTimestamp: Date.now() };
-
-    localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));
-    globalStore.storageTimetables = savedTimetablesJSON;
-  } catch (error) {}
-}
-
-function openPrintingWindow() {
-  if (globalStore.selectedActiveTrain != null) {
-    const date = `${globalStore.generatedDate!.toLocaleDateString('pl-PL').replace(/\./g, '-')}--${globalStore
-      .generatedDate!.toLocaleTimeString('pl-PL')
-      .replace(/:/g, '-')}`;
-
-    document.title = `${globalStore.selectedActiveTrain.driverName} ; ${globalStore.selectedActiveTrain.timetable!.category} ${
-      globalStore.selectedActiveTrain.trainNo
-    }
-      ${globalStore.selectedActiveTrain.timetable?.route.replace('|', ' - ')} ; ${date}`;
-  }
-
-  window.print();
-}
-
-// function refreshData() {
-//   apiStore.fetchActiveData();
-//   selectTrain();
-// }
-</script>
@@ -1,73 +0,0 @@
-<template>
-  <div class="text-white">
-    <div v-if="globalStore.selectedStorageTimetable == null && Object.keys(globalStore.storageTimetables).length == 0">
-      <div class="font-bold text-xl">{{ $t('storage-empty-header') }}</div>
-      <div>{{ $t('storage-empty-info') }}</div>
-    </div>
-
-    <div v-else>
-      <div class="font-bold text-xl p-2 bg-zinc-700 mb-3">{{ $t('storage-preview-title') }}</div>
-      <div class="font-bold p-2 bg-zinc-800 mb-3" v-if="filteredTimetables.length == 0">{{ $t('storage-preview-empty') }}</div>
-
-      <li v-for="timetable in filteredTimetables" class="flex gap-1 w-full my-2">
-        <button class="bg-zinc-900 p-2 w-full cursor-pointer hover:bg-zinc-800 text-left" @click="selectTimetable(timetable)">
-          <div class="text-zinc-300">#{{ timetable.timetableId }} &bull; {{ new Date(timetable.savedTimestamp!).toLocaleString() }}</div>
-          <b>{{ timetable.driverName }} | {{ timetable.category }} {{ timetable.trainNo }}</b> {{ timetable.route.replace('|', ' > ') }}
-        </button>
-
-        <button class="bg-zinc-900 p-2 hover:bg-zinc-800" @click="removeTimetable(timetable.timetableId)">
-          <TrashIcon class="size-5 text-white" />
-        </button>
-      </li>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { TrashIcon } from '@heroicons/vue/16/solid';
-import { useGlobalStore } from '../../stores/global.store';
-import type { TimetableData } from '../../types/common.types';
-import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
-
-const globalStore = useGlobalStore();
-const i18n = useI18n();
-
-const filteredTimetables = computed(() => {
-  let timetables = Object.values(globalStore.storageTimetables);
-
-  if (globalStore.timetableSearch.length != 0)
-    timetables = timetables.filter((st) =>
-      `${st.timetableId} ${st.driverName} ${st.route} ${st.category} ${st.trainNo}`
-        .toLocaleLowerCase()
-        .includes(globalStore.timetableSearch.toLocaleLowerCase())
-    );
-
-  timetables.sort((a, b) => {
-    return (b.savedTimestamp ?? 0) - (a.savedTimestamp ?? 0);
-  });
-
-  return timetables;
-});
-
-function selectTimetable(timetable: TimetableData) {
-  globalStore.selectedStorageTimetable = timetable;
-}
-
-function removeTimetable(timetableId: number) {
-  const isConfirmed = confirm(i18n.t('delete-timetable-confirm'));
-
-  if (!isConfirmed) return;
-
-  try {
-    const savedTimetablesStorage = localStorage.getItem('savedTimetables');
-    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage ? JSON.parse(savedTimetablesStorage) : {};
-    delete savedTimetablesJSON[timetableId];
-
-    localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));
-    globalStore.storageTimetables = savedTimetablesJSON;
-  } catch (error) {}
-}
-</script>
-
-<style scoped></style>
@@ -1,9 +1,10 @@
 <template>
-  <div class="my-2 print:hidden" v-if="globalStore.currentTimetableData?.savedTimestamp">
-    <div class="flex gap-2">
+  <!-- Local  -->
+  <div class="print:hidden" v-if="globalStore.currentTimetableData?.savedTimestamp">
+    <div class="flex gap-2 mt-1">
      <div class="flex items-center gap-2 bg-zinc-900 p-1 w-full">
        <div>
-          <InformationCircleIcon class="size-5" />
+          <InfoIcon :size="20" />
        </div>
        <i18n-t keypath="storage-preview-info" tag="span">
          <template v-slot:id>
@@ -13,27 +14,70 @@
            <b>{{ globalStore.currentTimetableData.driverName }}</b>
          </template>
          <template v-slot:date>
-            <b>{{ new Date(globalStore.currentTimetableData.savedTimestamp).toLocaleString() }}</b>
+            <b>{{
+              new Date(
+                globalStore.currentTimetableData?.journalCreatedAt ??
+                  globalStore.currentTimetableData.savedTimestamp
+              ).toLocaleString()
+            }}</b>
          </template>
        </i18n-t>
      </div>

-      <button class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800" @click="removeTimetable(globalStore.currentTimetableData.timetableId)">
-        <TrashIcon class="text-white size-6" />
+      <button
+        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800 rounded-md"
+        @click="removeTimetable(globalStore.currentTimetableData.timetableId)"
+      >
+        <Trash2Icon />
      </button>

-      <button class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800" @click="globalStore.selectedStorageTimetable = null">
-        <ArrowUturnLeftIcon class="text-white size-6" />
+      <button
+        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800 rounded-md"
+        @click="globalStore.selectedStorageTimetable = null"
+      >
+        <Undo2Icon />
+      </button>
+    </div>
+  </div>
+
+  <!-- Journal -->
+  <div class="print:hidden" v-else-if="globalStore.currentTimetableData?.journalCreatedAt">
+    <div class="flex gap-2 mt-1">
+      <div class="flex items-center gap-2 bg-zinc-900 p-1 w-full">
+        <div>
+          <InfoIcon :size="20" />
+        </div>
+
+        <i18n-t keypath="journal-preview-info" tag="span">
+          <template v-slot:id>
+            <b>#{{ globalStore.currentTimetableData.timetableId }}</b>
+          </template>
+          <template v-slot:driverName>
+            <b>{{ globalStore.currentTimetableData.driverName }}</b>
+          </template>
+          <template v-slot:date>
+            <b>{{
+              new Date(globalStore.currentTimetableData.journalCreatedAt).toLocaleString()
+            }}</b>
+          </template>
+        </i18n-t>
+      </div>
+
+      <button
+        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800 rounded-md"
+        @click="globalStore.selectedJournalTimetable = null"
+      >
+        <Undo2Icon />
      </button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { ArrowUturnLeftIcon, InformationCircleIcon, TrashIcon } from '@heroicons/vue/16/solid';
 import { useGlobalStore } from '../../stores/global.store';
 import { useI18n } from 'vue-i18n';
 import type { TimetableData } from '../../types/common.types';
+import { InfoIcon, Trash2Icon, Undo2Icon } from 'lucide-vue-next';

 const globalStore = useGlobalStore();
 const i18n = useI18n();
@@ -45,12 +89,14 @@ function removeTimetable(timetableId: number) {

  try {
    const savedTimetablesStorage = localStorage.getItem('savedTimetables');
-    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage ? JSON.parse(savedTimetablesStorage) : {};
+    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage
+      ? JSON.parse(savedTimetablesStorage)
+      : {};
    delete savedTimetablesJSON[timetableId];

    localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));
    globalStore.storageTimetables = savedTimetablesJSON;
-    
+
    globalStore.selectedStorageTimetable = null;
  } catch (error) {}
 }
@@ -1,276 +0,0 @@
-<template>
-  <div
-    :class="{ dark: globalStore.darkMode }"
-    v-if="globalStore.currentTimetableData != null"
-    class="overflow-auto p-1 bg-white print:bg-white dark:bg-zinc-950 print:text-black text-black dark:text-white min-h-full"
-  >
-    <div>
-      <div class="p-1 font-bold w-max">
-        {{ globalStore.currentTimetableData.category }} {{ globalStore.currentTimetableData.trainNo }} {{ $t('headers.relation') }}
-        {{ globalStore.currentTimetableData.route.replace('|', ' - ') }}
-      </div>
-
-      <table class="table-fixed mt-2 w-full border-collapse" v-if="computedTimetableRows.length > 0">
-        <TimetableHeader />
-        <TimetableBody :computed-timetable="computedTimetableRows" />
-      </table>
-    </div>
-  </div>
-
-  <div class="overflow-auto text-center font-bold text-zinc-400 p-1 min-h-full" v-else>
-    <div v-if="globalStore.viewMode == 'active'">
-      <div>{{ $t('train-select-info') }}</div>
-    </div>
-
-    <div v-else>
-      <TimetableStorage />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-``;
-import { useApiStore } from '../../stores/api.store';
-import { useGlobalStore } from '../../stores/global.store';
-import TimetableBody from './TimetableBody.vue';
-import TimetableHeader from './TimetableHeader.vue';
-import type { SceneryRoute, StopRow, TimetablePathData } from '../../types/common.types';
-import TimetableStorage from './TimetableStorage.vue';
-
-const globalStore = useGlobalStore();
-const apiStore = useApiStore();
-
-// Tymczasowa tabelka z posterunkami APO
-const apoNames = ['Stary Kisielin, pe', 'Czerwony Dwór, pe', 'Szczejkowice, pe'];
-
-const computedTimetableRows = computed(() => {
-  const timetableData = globalStore.currentTimetableData;
-
-  if (!timetableData) return [];
-
-  let timeFrom = Date.now();
-
-  const stockVmax = timetableData.trainMaxSpeed,
-    stockMass = Math.floor(timetableData.mass / 1000),
-    stockLength = timetableData.length;
-
-  const timetablePath = parseTimetablePath(timetableData.path);
-
-  const stopRows: StopRow[] = [];
-
-  let currentPathIndex = 0;
-  let currentPath = timetablePath[0];
-
-  let lastDepartureTimestamp = 0;
-
-  let arrivalKm = 0,
-    arrivalSpeed = 0,
-    arrivalTracks = 0,
-    departureSpeed = 0,
-    departureTracks = 2,
-    realLineNo = 0,
-    abbrevs = [] as string[];
-
-  if (currentPath.departureLineData) {
-    departureSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
-    departureTracks = currentPath.departureLineData.routeTracks;
-
-    arrivalSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
-    arrivalTracks = currentPath.departureLineData.routeTracks;
-
-    realLineNo = currentPath.departureLineData?.realLineNo ?? 0;
-    abbrevs = getAbbrevs(currentPath.departureLineData);
-  }
-
-  // console.debug('=========== ' + timetableData.trainNo + ' ===========');
-
-  const stopList = parseStopListString(timetableData.stopListString);
-
-  for (const stop of stopList) {
-    if (stop.arrivalLine && stop.arrivalLine == currentPath.arrivalLine) {
-      // console.log('arrivalKm', arrivalKm);
-      // console.log('stopDistance', stop.stopDistance);
-
-      if (arrivalKm >= stop.stopDistance) arrivalKm = (Number(stopRows[stopRows.length - 1].departureKm ?? '0') + stop.stopDistance) / 2;
-
-      if (currentPath.arrivalLineData) {
-        arrivalSpeed = Math.min(currentPath.arrivalLineData.routeSpeed, stockVmax);
-        arrivalTracks = currentPath.arrivalLineData.routeTracks;
-        realLineNo = currentPath.arrivalLineData.realLineNo ?? 0;
-        abbrevs = getAbbrevs(currentPath.arrivalLineData);
-      }
-
-      departureSpeed = arrivalSpeed;
-      departureTracks = arrivalTracks;
-    }
-
-    if (stop.mainStop || (/^podg|po|pe$/.test(stop.stopNameRAW) && !/^sbl/i.test(stop.stopNameRAW))) {
-      let correctedDepartureSpeed = 0,
-        correctedDepartureTracks = 0;
-
-      const internalRouteInfo = stop.departureLine
-        ? currentPath.sceneryData?.routesInfo.find((route) => route.isInternal && route.routeName == stop.departureLine)
-        : undefined;
-
-      if (internalRouteInfo) {
-        correctedDepartureSpeed = Math.min(internalRouteInfo.routeSpeed, stockVmax);
-        departureSpeed = Math.min(internalRouteInfo.routeSpeed, stockVmax);
-        realLineNo = internalRouteInfo.realLineNo ?? realLineNo;
-        abbrevs = getAbbrevs(internalRouteInfo);
-
-        correctedDepartureTracks = internalRouteInfo.routeTracks;
-        departureTracks = internalRouteInfo.routeTracks;
-
-        if (stopRows.length == 0) {
-          arrivalSpeed = departureSpeed;
-          arrivalTracks = departureTracks;
-        }
-      }
-
-      let pointAbbrevs = [];
-      if (apoNames.includes(stop.stopNameRAW)) pointAbbrevs.unshift(`APO ${currentPath.sceneryData?.abbr}`);
-
-      let rowData: StopRow = {
-        isMain: stop.mainStop,
-        pointKm: stop.stopDistance.toFixed(3),
-        pointName: stop.stopNameRAW,
-        scheduledArrivalDate: stop.arrivalTimestamp ? new Date(stop.arrivalTimestamp) : null,
-        scheduledDepartureDate: stop.departureTimestamp ? new Date(stop.departureTimestamp) : null,
-        stopTime: stop.stopTime ? (stop.departureTimestamp - stop.arrivalTimestamp) / 60000 : 0,
-        stopType: stop.stopType,
-        sceneryName: currentPath.sceneryName,
-        realLine: realLineNo == 0 ? '' : realLineNo.toString(),
-        driveTime: lastDepartureTimestamp ? stop.arrivalTimestamp - lastDepartureTimestamp : 0,
-
-        abbrevs: [...pointAbbrevs, ...abbrevs],
-
-        arrivalKm: arrivalKm.toFixed(3),
-        departureKm: stop.stopDistance.toFixed(3),
-
-        arrivalSpeed: arrivalSpeed,
-        arrivalTracks: arrivalTracks,
-
-        departureSpeed: departureSpeed,
-        departureTracks: departureTracks,
-
-        headUnits: timetableData.headUnits,
-        stockVmax,
-        stockLength,
-        stockMass,
-      };
-
-      // console.debug(stop.stopNameRAW, stop.departureLine);
-
-      arrivalKm = stop.stopDistance;
-      arrivalSpeed = correctedDepartureSpeed || arrivalSpeed;
-      arrivalTracks = correctedDepartureTracks || arrivalTracks;
-
-      if (stop.departureTimestamp) lastDepartureTimestamp = stop.departureTimestamp;
-
-      stopRows.push(rowData);
-    }
-
-    if (stop.departureLine && stop.departureLine == currentPath.departureLine) {
-      arrivalKm = stop.stopDistance;
-
-      // Reverse search for last scenery checkpoint
-      if (currentPath.departureLineData) {
-        if (currentPath.departureLineData.routeLength != 0 && !currentPath.departureLineData.isRouteSBL)
-          arrivalKm = stop.stopDistance + currentPath.departureLineData.routeLength / 1000;
-
-        if (stopRows[stopRows.length - 1].isMain && currentPath.departureLineData.isRouteSBL && stop.departureLine == currentPath.departureLine)
-          arrivalKm = stop.stopDistance + currentPath.departureLineData.routeLength / 1000;
-
-        for (let i = stopRows.length - 1; i >= 0; i--) {
-          stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
-          stopRows[i].departureSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
-          stopRows[i].realLine = currentPath.departureLineData.realLineNo?.toString() ?? '';
-
-          if (stopRows[i].isMain || stopRows[i].pointName.endsWith(', podg')) {
-            stopRows[i].departureSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
-            stopRows[i].departureTracks = currentPath.departureLineData.routeTracks;
-
-            // console.log(
-            //   stop.departureLine,
-            //   currentPath.sceneryName,
-            //   stop.stopDistance,
-            //   currentPath.departureLineData.routeLength,
-            //   currentPath.departureLineData.isRouteSBL
-            // );
-
-            /* 
-            if (currentPath.departureLineData.isRouteSBL)
-              arrivalKm = stop.stopDistance + (currentPath.departureLineData.routeSpeed <= 130 ? 1.0 : 2.0);
-            else */
-
-            abbrevs = getAbbrevs(currentPath.departureLineData);
-            stopRows[i].abbrevs = abbrevs;
-            break;
-          }
-
-          stopRows[i].arrivalSpeed = Math.min(currentPath.departureLineData.routeSpeed, stockVmax);
-          stopRows[i].arrivalTracks = currentPath.departureLineData.routeTracks;
-        }
-      }
-
-      currentPath = timetablePath[++currentPathIndex];
-    }
-  }
-
-  let timeTo = Date.now();
-
-  globalStore.generatedMs = timeTo - timeFrom;
-
-  return stopRows;
-});
-
-function parseTimetablePath(path: string): TimetablePathData[] {
-  return path.split(';').map((pathEl) => {
-    const [arrivalLine, scenery, departureLine] = pathEl.split(',');
-    const sceneryName = scenery.split(' ').slice(0, -1).join(' ');
-
-    const sceneryData = apiStore.sceneryData?.find((sc) => sc.name == sceneryName) ?? null;
-    const arrivalLineData = arrivalLine ? sceneryData?.routesInfo.find((rt) => rt.routeName == arrivalLine) ?? null : null;
-    const departureLineData = departureLine ? sceneryData?.routesInfo.find((rt) => rt.routeName == departureLine) ?? null : null;
-
-    return {
-      sceneryName,
-      sceneryData: sceneryData ?? null,
-      arrivalLine: arrivalLine ?? '',
-      departureLine: departureLine ?? '',
-      arrivalLineData,
-      departureLineData,
-    };
-  });
-}
-
-function parseStopListString(stopsString: string) {
-  //${stop.arrivalLine ?? ''};${stop.arrivalTimestamp};${stop.stopNameRAW};${stop.stopTime ? stop.stopTime + '_' + stop.stopType : ''};${stop.mainStop};${stop.stopDistance};${stop.departureTimestamp};${stop.departureLine ?? ''}
-  return stopsString.split('~~').map((stop) => {
-    const [arrivalLine, arrivalTimestamp, stopNameRAW, stopDetails, isMainStop, stopDistance, departureTimestamp, departureLine] = stop.split(';');
-    const [stopTime, stopType] = stopDetails.split('_');
-
-    return {
-      arrivalLine,
-      arrivalTimestamp: parseInt(arrivalTimestamp),
-      stopNameRAW,
-      stopTime: stopTime ?? 0,
-      stopType: stopType ?? null,
-      mainStop: isMainStop == 'true',
-      stopDistance: parseFloat(stopDistance),
-      departureTimestamp: parseInt(departureTimestamp),
-      departureLine,
-    };
-  });
-}
-
-function getAbbrevs(routeData: SceneryRoute) {
-  const abbrevs = [];
-
-  if (routeData.isRouteSBL == true) abbrevs.push(`${routeData.routeSpeed > 130 ? '4' : ''}S${routeData.routeTracks == 2 ? 'S' : ''}`);
-  else if (routeData.routeTracks == 2) abbrevs.push('PP');
-
-  return abbrevs;
-}
-</script>
@@ -0,0 +1,42 @@
+<template>
+  <select
+    v-model="globalStore.selectedTrainId"
+    @change="selectTrain"
+    name="trains"
+    id="trains-select"
+    class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
+    :disabled="apiStore.activeDataStatus != DataStatus.SUCCESS"
+    aria-label="Active train select"
+  >
+    <option :value="null" disabled>
+      {{
+        apiStore.activeDataStatus == DataStatus.LOADING
+          ? $t('data-loading-text')
+          : $t('train-select-placeholder')
+      }}
+    </option>
+    <option :value="train.id" v-for="train in globalStore.activeTimetableTrains">
+      {{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }} [{{
+        getRegionNameById(train.region)
+      }}]
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { useApiStore } from '../../stores/api.store';
+import { useGlobalStore } from '../../stores/global.store';
+import { DataStatus } from '../../types/api.types';
+import { getRegionNameById } from '../../utils/trainUtils';
+
+const apiStore = useApiStore();
+const globalStore = useGlobalStore();
+
+function selectTrain() {
+  if (!apiStore.activeData) return;
+
+  globalStore.selectedActiveTrain =
+    globalStore.activeTimetableTrains.find((train) => train.id == globalStore.selectedTrainId) ??
+    null;
+}
+</script>
@@ -0,0 +1,130 @@
+<template>
+  <div class="flex gap-2 items-center" v-if="globalStore.currentTimetableData == null">
+    <div class="flex gap-2 w-full">
+      <input
+        v-model="globalStore.journalTimetableSearch.driverName"
+        type="text"
+        @keydown.enter="fetchJournalTimetables"
+        :class="`bg-zinc-800 p-1 rounded-md print:hidden w-full ${
+          apiStore.connectionMode == 'offline' ? 'opacity-35' : ''
+        }`"
+        :disabled="
+          apiStore.journalDataStatus == DataStatus.LOADING || apiStore.connectionMode == 'offline'
+        "
+        :placeholder="$t('journal-driver-search-placeholder')"
+      />
+
+      <input
+        v-model="globalStore.journalTimetableSearch.route"
+        type="text"
+        @keydown.enter="fetchJournalTimetables"
+        :class="`bg-zinc-800 p-1 rounded-md print:hidden w-full ${
+          apiStore.connectionMode == 'offline' ? 'opacity-35' : ''
+        }`"
+        :disabled="
+          apiStore.journalDataStatus == DataStatus.LOADING || apiStore.connectionMode == 'offline'
+        "
+        :placeholder="$t('journal-route-search-placeholder')"
+      />
+
+      <input
+        v-model="globalStore.journalTimetableSearch.date"
+        type="date"
+        @keydown.enter="fetchJournalTimetables"
+        :class="`bg-zinc-800 p-1 rounded-md print:hidden w-full ${
+          apiStore.connectionMode == 'offline' ? 'opacity-35' : ''
+        }`"
+        :disabled="
+          apiStore.journalDataStatus == DataStatus.LOADING || apiStore.connectionMode == 'offline'
+        "
+        :placeholder="$t('journal-date-search-placeholder')"
+      />
+    </div>
+
+    <button
+      class="bg-zinc-800 hover:bg-zinc-700 p-1 rounded-md"
+      v-if="globalStore.viewMode == 'journal'"
+      @click="clearSearch"
+    >
+      <Trash2Icon />
+    </button>
+
+    <button
+      class="bg-zinc-800 hover:bg-zinc-700 p-1 rounded-md"
+      v-if="globalStore.viewMode == 'journal'"
+      @click="fetchJournalTimetables"
+    >
+      <SearchIcon />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useApiStore } from '../../stores/api.store';
+import { useGlobalStore } from '../../stores/global.store';
+import { DataStatus, type JournalTimetablesShortResponse } from '../../types/api.types';
+import { SearchIcon, Trash2Icon } from 'lucide-vue-next';
+
+const globalStore = useGlobalStore();
+const apiStore = useApiStore();
+
+async function fetchJournalTimetables() {
+  const searchValues = globalStore.journalTimetableSearch;
+
+  let fetchParams: Record<string, any> = {};
+
+  if (searchValues['driverName']) {
+    fetchParams['driverName'] = searchValues['driverName'].trim();
+  }
+
+  if (searchValues['date']) {
+    let dateFromStr = new Date(searchValues['date']).toISOString();
+
+    let dateTo = new Date(dateFromStr);
+    dateTo.setDate(dateTo.getDate() + 1);
+
+    fetchParams['dateFrom'] = dateFromStr;
+    fetchParams['dateTo'] = dateTo.toISOString();
+  }
+
+  if (searchValues['route']) {
+    const [routeFrom, routeTo] = searchValues['route'].split('-');
+
+    if (routeFrom) {
+      fetchParams['issuedFrom'] = routeFrom.trim();
+    }
+
+    if (routeTo) {
+      fetchParams['terminatingAt'] = routeTo.trim();
+    }
+  }
+
+  fetchParams['hasStopsDetails'] = 1;
+  fetchParams['returnType'] = 'short';
+
+  try {
+    apiStore.journalDataStatus = DataStatus.LOADING;
+
+    const response = (
+      await apiStore.client!.get<JournalTimetablesShortResponse>('/api/getTimetables', {
+        params: fetchParams
+      })
+    ).data;
+
+    apiStore.journalDataStatus = DataStatus.SUCCESS;
+    apiStore.journalTimetablesData = response;
+  } catch (error) {
+    apiStore.journalDataStatus = DataStatus.ERROR;
+    apiStore.journalTimetablesData = null;
+    console.error(error);
+  }
+}
+
+function clearSearch() {
+  Object.keys(globalStore.journalTimetableSearch).forEach(
+    (k) => ((globalStore.journalTimetableSearch as any)[k] = '')
+  );
+
+  apiStore.journalTimetablesData = null;
+}
+</script>
@@ -0,0 +1,33 @@
+<template>
+  <div class="flex gap-2" v-if="globalStore.currentTimetableData == null">
+    <div class="w-full">
+      <input
+        v-model="globalStore.localTimetableSearch"
+        type="text"
+        class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
+        :placeholder="$t('train-search-placeholder')"
+      />
+    </div>
+
+    <div>
+      <button
+        class="bg-zinc-800 hover:bg-zinc-700 p-1 rounded-md"
+        v-if="globalStore.viewMode == 'storage'"
+        @click="clearSearch"
+      >
+        <Trash2Icon />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Trash2Icon } from 'lucide-vue-next';
+import { useGlobalStore } from '../../stores/global.store';
+
+const globalStore = useGlobalStore();
+
+function clearSearch() {
+  globalStore.localTimetableSearch = '';
+}
+</script>
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex gap-2 flex-col print:hidden">
+    <!-- Top Actions & Modes -->
+    <SearchModeActions />
+
+    <!-- Active Data Search -->
+    <ActiveSearchInput v-if="globalStore.viewMode == 'active'" />
+
+    <!-- Local Storage Search -->
+    <LocalSearchInput v-else-if="globalStore.viewMode == 'storage'" />
+
+    <!-- Journal Serach -->
+    <JournalSearchInput v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from '../../stores/global.store';
+
+import ActiveSearchInput from './ActiveSearchInput.vue';
+import JournalSearchInput from './JournalSearchInput.vue';
+import LocalSearchInput from './LocalSearchInput.vue';
+import SearchModeActions from './SearchModeActions.vue';
+
+const globalStore = useGlobalStore();
+</script>
@@ -0,0 +1,179 @@
+<template>
+  <div class="flex justify-between gap-2">
+    <div class="flex gap-2">
+      <button
+        :class="`p-1 rounded-md ${
+          globalStore.viewMode == 'active'
+            ? 'bg-green-600 hover:bg-green-500'
+            : 'bg-zinc-800 hover:bg-zinc-700'
+        }`"
+        @click="toggleViewMode('active')"
+        aria-label="Active data view mode"
+      >
+        <WifiIcon />
+      </button>
+
+      <button
+        :class="`p-1 rounded-md ${
+          globalStore.viewMode == 'storage'
+            ? 'bg-green-600 hover:bg-green-500'
+            : 'bg-zinc-800 hover:bg-zinc-700'
+        }`"
+        @click="toggleViewMode('storage')"
+        aria-label="Storage view mode"
+      >
+        <ArchiveIcon />
+      </button>
+
+      <button
+        :class="`p-1 rounded-md ${
+          globalStore.viewMode == 'journal'
+            ? 'bg-green-600 hover:bg-green-500'
+            : 'bg-zinc-800 hover:bg-zinc-700'
+        }`"
+        @click="toggleViewMode('journal')"
+        aria-label="Journal view mode"
+      >
+        <HistoryIcon />
+      </button>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700"
+        @click="toggleDarkMode"
+        aria-label="Dark mode toggle"
+      >
+        <MoonIcon v-if="globalStore.darkMode" />
+        <SunIcon v-else />
+      </button>
+
+      <button
+        class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
+        @click="toggleFullscreenMode()"
+        :disabled="globalStore.currentTimetableData == null"
+        aria-label="Full screen toggle"
+      >
+        <FullscreenIcon :size="24" />
+      </button>
+
+      <button
+        class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
+        :disabled="globalStore.currentTimetableData == null"
+        @click="openPrintingWindow"
+        aria-label="Print mode"
+      >
+        <PrinterIcon />
+      </button>
+
+      <button
+        class="p-1 rounded-md disabled:opacity-60 disabled:hover:bg-zinc-800"
+        :disabled="globalStore.currentTimetableData == null"
+        :class="{
+          'bg-green-600 hover:bg-green-700': isTimetableSaved,
+          'bg-zinc-800 hover:bg-zinc-700': !isTimetableSaved
+        }"
+        @click="saveToStorage"
+        aria-label="Save timetable to storage"
+      >
+        <FolderDownIcon />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { useGlobalStore } from '../../stores/global.store';
+import type { ViewMode, TimetableData } from '../../types/common.types';
+import {
+  ArchiveIcon,
+  FolderDownIcon,
+  FullscreenIcon,
+  HistoryIcon,
+  MoonIcon,
+  PrinterIcon,
+  SunIcon,
+  WifiIcon
+} from 'lucide-vue-next';
+
+const globalStore = useGlobalStore();
+
+// Computed
+const isTimetableSaved = computed(() => {
+  if (!globalStore.currentTimetableData) return false;
+
+  return Object.keys(globalStore.storageTimetables).includes(
+    `${globalStore.currentTimetableData.timetableId}`
+  );
+});
+
+// Watchers
+watch(
+  () => globalStore.selectedActiveTrain,
+  (curr) => {
+    if (curr != null) {
+      globalStore.generatedDate = new Date();
+    }
+  }
+);
+
+// Methods
+function toggleViewMode(viewMode: ViewMode) {
+  globalStore.viewMode = viewMode;
+}
+
+function toggleDarkMode() {
+  globalStore.darkMode = !globalStore.darkMode;
+
+  window.localStorage.setItem('currentTheme', globalStore.darkMode ? 'dark' : 'light');
+}
+
+function saveToStorage() {
+  if (globalStore.currentTimetableData == null) return;
+
+  try {
+    const savedTimetablesStorage = localStorage.getItem('savedTimetables');
+    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage
+      ? JSON.parse(savedTimetablesStorage)
+      : {};
+
+    if (savedTimetablesJSON[globalStore.currentTimetableData.timetableId] !== undefined) {
+      globalStore.selectedStorageTimetable =
+        savedTimetablesJSON[globalStore.currentTimetableData.timetableId];
+      globalStore.viewMode = 'storage';
+
+      return;
+    }
+
+    savedTimetablesJSON[globalStore.currentTimetableData.timetableId] = {
+      ...globalStore.currentTimetableData,
+      savedTimestamp: Date.now()
+    };
+
+    localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));
+    globalStore.storageTimetables = savedTimetablesJSON;
+  } catch (error) {}
+}
+
+function openPrintingWindow() {
+  if (globalStore.selectedActiveTrain != null) {
+    const date = `${globalStore
+      .generatedDate!.toLocaleDateString('pl-PL')
+      .replace(/\./g, '-')}--${globalStore
+      .generatedDate!.toLocaleTimeString('pl-PL')
+      .replace(/:/g, '-')}`;
+
+    document.title = `${globalStore.selectedActiveTrain.driverName} ; ${
+      globalStore.selectedActiveTrain.timetable!.category
+    } ${globalStore.selectedActiveTrain.trainNo}
+        ${globalStore.selectedActiveTrain.timetable?.route.replace('|', ' - ')} ; ${date}`;
+  }
+
+  window.print();
+}
+
+function toggleFullscreenMode() {
+  globalStore.fullscreenMode = !globalStore.fullscreenMode;
+}
+</script>
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <div v-if="apiStore.connectionMode == 'online'">{{ $t('train-select-info') }}</div>
+    <div v-else class="bg-red-500 text-white p-2">{{ $t('data-offline-mode') }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useApiStore } from '../../stores/api.store';
+
+const apiStore = useApiStore();
+</script>
@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="overflow-auto p-1 bg-white print:bg-white dark:bg-zinc-950 print:text-black text-black dark:text-white min-h-full relative"
+    :class="{ dark: globalStore.darkMode }"
+  >
+    <!-- <button
+      v-if="globalStore.fullscreenMode"
+      class="fixed right-0 top-0 bg-green-600 p-1 m-1 rounded-md hover:bg-green-500 print:hidden"
+      @click="() => (globalStore.fullscreenMode = false)"
+    >
+      <Minimize2Icon :size="22" />
+    </button> -->
+
+    <TimetableContent />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from '../../stores/global.store';
+import TimetableContent from '../Timetable/TimetableContent.vue';
+
+const globalStore = useGlobalStore();
+</script>
@@ -0,0 +1,96 @@
+<template>
+  <div class="text-white">
+    <h2 class="font-bold p-2 bg-zinc-700 mb-3 text-2xl flex items-center gap-2 justify-center flex-wrap">
+      <HistoryIcon :size="25" />
+      {{ $t('journal-preview-title') }}
+    </h2>
+
+    <div v-if="apiStore.connectionMode == 'offline'" class="bg-red-500 p-2">
+      {{ $t('data-offline-mode') }}
+    </div>
+
+    <div v-else-if="apiStore.journalDataStatus == DataStatus.LOADING" class="bg-zinc-900 p-2">
+      {{ $t('data-loading-text') }}
+    </div>
+
+    <div v-else-if="apiStore.journalDataStatus == DataStatus.ERROR" class="bg-red-500 p-2">
+      {{ $t('data-loading-error-text') }}
+    </div>
+
+    <div
+      v-else-if="!apiStore.journalTimetablesData"
+      class="text-zinc-400 mt-2"
+      v-html="$t('journal-empty-info')"
+    ></div>
+
+    <div v-else-if="apiStore.journalTimetablesData.length == 0">
+      <p class="text-zinc-300 mb-2">
+        {{ $t('journal-no-data') }}
+      </p>
+
+      <b class="text-red-300">
+        {{ $t('journal-reminder-text') }}
+      </b>
+    </div>
+
+    <div v-else>
+      <ul>
+        <li
+          v-for="timetable in apiStore.journalTimetablesData"
+          class="flex gap-1 w-full my-2"
+          @click="fetchTimetableDetails(timetable.id)"
+        >
+          <button class="bg-zinc-900 p-2 w-full cursor-pointer hover:bg-zinc-800 text-left">
+            <div class="text-zinc-300">
+              #{{ timetable.id }} &bull;
+              {{ new Date(timetable.createdAt!).toLocaleString() }}
+            </div>
+            <b>
+              {{ timetable.driverName }} | {{ timetable.trainCategoryCode }}
+              {{ timetable.trainNo }}
+            </b>
+            {{ timetable.route.replace('|', ' > ') }}
+          </button>
+        </li>
+      </ul>
+
+      <div v-if="apiStore.journalTimetablesData.length > 0">
+        <hr class="border-t-2 border-t-gray-500" />
+
+        <p class="text-zinc-400 text-sm">
+          {{ $t('journal-footer-text') }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HistoryIcon } from 'lucide-vue-next';
+import { useApiStore } from '../../stores/api.store';
+import { useGlobalStore } from '../../stores/global.store';
+import { DataStatus } from '../../types/api.types';
+import type { JournalTimetableDetailed } from '../../types/common.types';
+
+const apiStore = useApiStore();
+const globalStore = useGlobalStore();
+
+async function fetchTimetableDetails(id: number) {
+  try {
+    const response = (
+      await apiStore.client!.get<JournalTimetableDetailed[]>('/api/getTimetables', {
+        params: {
+          timetableId: id,
+          hasStopsDetails: 1,
+          returnType: 'detailed'
+        }
+      })
+    ).data;
+
+    if (response.length > 0) globalStore.selectedJournalTimetable = response[0];
+  } catch (error) {
+    globalStore.selectedJournalTimetable = null;
+    console.error(error);
+  }
+}
+</script>
@@ -0,0 +1,113 @@
+<template>
+  <div class="text-white">
+    <div class="font-bold p-2 bg-zinc-700 mb-3">
+      <div class="text-2xl flex items-center gap-2 justify-center flex-wrap">
+        <ArchiveIcon :size="25" />
+        <span>{{ $t('storage-preview-title') }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="
+        globalStore.selectedStorageTimetable == null &&
+        Object.keys(globalStore.storageTimetables).length == 0
+      "
+      class="text-zinc-400"
+    >
+      {{ $t('storage-empty-info') }}
+    </div>
+
+    <div class="font-bold p-2 bg-zinc-800 mb-3" v-else-if="filteredTimetables.length == 0">
+      {{ $t('storage-preview-empty') }}
+    </div>
+
+    <ul v-else>
+      <li v-for="timetable in filteredTimetables" class="flex gap-1 w-full my-2">
+        <button
+          class="bg-zinc-900 p-2 w-full cursor-pointer hover:bg-zinc-800 text-left"
+          @click="selectTimetable(timetable)"
+        >
+          <div class="text-zinc-300 flex gap-x-2 items-center flex-wrap">
+            <span>#{{ timetable.timetableId }}</span>
+            
+            <i class="flex items-center gap-1"><ArchiveIcon :size="18" :stroke-width="3" /> {{ new Date(timetable.savedTimestamp!).toLocaleString() }}</i>
+
+            <i
+              v-if="timetable.journalCreatedAt"
+              class="flex items-center gap-0.5"
+              :title="
+                $t('storage-journal-timetable-placeholder', {
+                  date: new Date(timetable.journalCreatedAt).toLocaleDateString('pl-PL')
+                })
+              "
+            >
+              <HistoryIcon :size="18" :stroke-width="3" />
+              {{ new Date(timetable.journalCreatedAt).toLocaleDateString('pl-PL') }}
+            </i>
+          </div>
+          <b>{{ timetable.driverName }} | {{ timetable.category }} {{ timetable.trainNo }}</b>
+          {{ timetable.route.replace('|', ' > ') }}
+        </button>
+
+        <button
+          class="bg-zinc-900 p-2 hover:bg-zinc-800"
+          @click="removeTimetable(timetable.timetableId)"
+        >
+          <Trash2Icon />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useGlobalStore } from '../../stores/global.store';
+import type { TimetableData } from '../../types/common.types';
+import { ArchiveIcon, HistoryIcon, Trash2Icon } from 'lucide-vue-next';
+
+const globalStore = useGlobalStore();
+const i18n = useI18n();
+
+const filteredTimetables = computed(() => {
+  let timetables = Object.values(globalStore.storageTimetables);
+
+  if (globalStore.localTimetableSearch.length != 0)
+    timetables = timetables.filter((st) =>
+      `${st.timetableId} ${st.driverName} ${st.route} ${st.category} ${st.trainNo}`
+        .toLocaleLowerCase()
+        .includes(globalStore.localTimetableSearch.toLocaleLowerCase())
+    );
+
+  timetables.sort((a, b) => {
+    return (b.savedTimestamp ?? 0) - (a.savedTimestamp ?? 0);
+  });
+
+  return timetables;
+});
+
+function selectTimetable(timetable: TimetableData) {
+  globalStore.selectedStorageTimetable = timetable;
+}
+
+function removeTimetable(timetableId: number) {
+  const isConfirmed = confirm(i18n.t('delete-timetable-confirm'));
+
+  if (!isConfirmed) return;
+
+  try {
+    const savedTimetablesStorage = localStorage.getItem('savedTimetables');
+    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage
+      ? JSON.parse(savedTimetablesStorage)
+      : {};
+    delete savedTimetablesJSON[timetableId];
+
+    localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));
+
+    globalStore.storageTimetables = savedTimetablesJSON;
+  } catch (error) {
+    console.error(error);
+  }
+}
+</script>
@@ -1,26 +1,48 @@
 {
-   "data-loading-text": "Loading data...",
-   "train-select-placeholder": "Choose active train from the list",
-   "train-select-info": "Choose active train to generate SRJP timetable",
-   "train-search-placeholder": "Enter TT details (number, route, user)",
-   "headers": {
-      "line_no": "Line\nno.",
-      "line_km": "Km",
-      "station": "Station",
-      "time": "Time",
-      "loco_1": "Loco I",
-      "loco_2": "Loco II",
-      "loco_3": "Loco III",
-      "mass": "Loco load",
-      "length": "Train len.",
-      "vmax": "Vmax",
-      "relation": "Route"
-   },
-   "storage-empty-header": "ARCHIVED TIMETABLES SEARCH MODE",
-   "storage-empty-info": "Timetables will be shown here after their archiving.",
-   "storage-preview-title": "ARCHIVED TIMETABLES",
-   "storage-preview-empty": "No entries found for given parameters",
-   "storage-preview-info": "Archived timetable {id} for user {driverName} from: {date}",
-   "storage-preview-button-text": "Return",
-   "delete-timetable-confirm": "Are you sure that you want to delete this timetable?"
-}
+  "data-loading-text": "Loading data...",
+  "data-loading-error-text": "Oops! An error occurent while loading data from the server!",
+  "train-select-placeholder": "Choose active train from the list",
+  "train-select-info": "Choose active train to generate SRJP timetable",
+  "train-search-placeholder": "Enter TT details (number, route, user)",
+
+  "update-prompt": {
+    "line1": "New version of SRJP is available!",
+    "line2": "Click here to update the app!"
+  },
+
+  "data-offline-mode": "You're currently using the offline mode of the SRJP app - server data is unavailable!",
+  
+  "headers": {
+    "line_no": "Line\nno.",
+    "line_km": "Km",
+    "station": "Station",
+    "time": "Time",
+    "loco_1": "Loco I",
+    "loco_2": "Loco II",
+    "loco_3": "Loco III",
+    "mass": "Loco load",
+    "length": "Train len.",
+    "vmax": "Vmax",
+    "relation": "Route"
+  },
+
+  "storage-empty-header": "ARCHIVED TIMETABLES SEARCH MODE",
+  "storage-empty-info": "Timetables will be shown here after their archiving.",
+  "storage-preview-title": "ARCHIVED TIMETABLES",
+  "storage-preview-empty": "No entries found for given parameters",
+  "storage-preview-info": "Archived timetable {id} for user {driverName} from: {date}",
+  "storage-preview-button-text": "Return",
+  "storage-journal-timetable-placeholder": "Saved historical timetable from day {date}",
+  "delete-timetable-confirm": "Are you sure that you want to delete this timetable?",
+
+  "journal-preview-title": "TIMETABLES JOURNAL",
+  "journal-empty-info": "Enter timetable details in the text fields above (use at least one field).<br>Up to 15 newest timetables will be shown.",
+  "journal-driver-search-placeholder": "Driver",
+  "journal-date-search-placeholder": "Date",
+  "journal-route-search-placeholder": "Route",
+  "journal-preview-info": "Historical timetable {id} for user {driverName} from: {date}",
+
+  "journal-no-data": "No data for the current search! Check if the data you entered is correct.",
+  "journal-reminder-text": "Warning: detailed timetables data for SRJP purpose are collected since 1st February 2025 and only for users who support Stacjownik project!",
+  "journal-footer-text": "Detailed timetables data for SRJP purpose are collected since 1st February 2025 and only for users who support Stacjownik project!"
+}
@@ -1,26 +1,48 @@
 {
-   "data-loading-text": "Ładowanie danych...",
-   "train-select-placeholder": "Wybierz pociąg z listy",
-   "train-select-info": "Wybierz aktywny pociąg, aby wygenerować SRJP",
-   "train-search-placeholder": "Wpisz szczegóły RJ (nr, relacja, gracz)",
-   "headers": {
-      "line_no": "Nr\nlinii",
-      "line_km": "Km",
-      "station": "Stacja",
-      "time": "Godzina",
-      "loco_1": "Lok I",
-      "loco_2": "Lok II",
-      "loco_3": "Lok III",
-      "mass": "Obc. lok.",
-      "length": "Dł. poc.",
-      "vmax": "Vmax",
-      "relation": "Relacja"
-   },
-   "storage-empty-header": "TRYB WYSZUKIWANA ZAPISANYCH ROZKŁADÓW JAZDY",
-   "storage-empty-info": "Użyj funkcji zapisu rozkładu jazdy, aby go tutaj wyświetlić.",
-   "storage-preview-title": "ZAPISANE ROZKŁADY JAZDY",
-   "storage-preview-empty": "Nie znaleziono żadnych wpisów dla podanych parametrów",
-   "storage-preview-info": "Rozkład archiwalny {id} maszynisty {driverName} z dnia {date}",
-   "storage-preview-button-text": "Powróć",
-   "delete-timetable-confirm": "Czy na pewno chcesz usunąć ten rozkład jazdy z archiwum?"
-}
+  "data-loading-text": "Ładowanie danych...",
+  "data-loading-error-text": "Ups! Wystąpił błąd podczas pobierania danych z serwera!",
+  "train-select-placeholder": "Wybierz pociąg z listy",
+  "train-select-info": "Wybierz aktywny pociąg, aby wygenerować SRJP",
+  "train-search-placeholder": "Wpisz szczegóły RJ (nr, relacja, gracz)",
+
+  "update-prompt": {
+    "line1": "Nowa wersja SRJP jest dostępna!",
+    "line2": "Kliknij, aby zaktualizować aplikację!"
+  },
+
+  "data-offline-mode": "Korzystasz z trybu offline aplikacji SRJP - dane serwerowe są niedostępne!",
+
+  "headers": {
+    "line_no": "Nr\nlinii",
+    "line_km": "Km",
+    "station": "Stacja",
+    "time": "Godzina",
+    "loco_1": "Lok I",
+    "loco_2": "Lok II",
+    "loco_3": "Lok III",
+    "mass": "Obc. lok.",
+    "length": "Dł. poc.",
+    "vmax": "Vmax",
+    "relation": "Relacja"
+  },
+
+  "storage-empty-header": "TRYB WYSZUKIWANA ZAPISANYCH ROZKŁADÓW JAZDY",
+  "storage-empty-info": "Użyj funkcji zapisu rozkładu jazdy, aby go tutaj wyświetlić.",
+  "storage-preview-title": "ZAPISANE ROZKŁADY JAZDY",
+  "storage-preview-empty": "Nie znaleziono żadnych wpisów dla podanych parametrów",
+  "storage-preview-info": "Rozkład archiwalny {id} maszynisty {driverName} z dnia {date}",
+  "storage-preview-button-text": "Powróć",
+  "storage-journal-timetable-placeholder": "Zapisany historyczny rozkład jazdy z dnia {date}",
+  "delete-timetable-confirm": "Czy na pewno chcesz usunąć ten rozkład jazdy z archiwum?",
+
+  "journal-preview-title": "DZIENNIK ROZKŁADÓW JAZDY",
+  "journal-empty-info": "Wpisz dane rozkładu korzystając z pól tekstowych powyżej (co najmniej jednego).<br>W przypadku wielu rozkładów jazdy wyświetli się maks. 15 najnowszych.",
+  "journal-driver-search-placeholder": "Maszynista",
+  "journal-date-search-placeholder": "Data",
+  "journal-route-search-placeholder": "Relacja",
+  "journal-preview-info": "Rozkład historyczny {id} maszynisty {driverName} z dnia {date}",
+
+  "journal-no-data": "Brak wyników dla obecnego wyszukiwania! Sprawdź czy wpisałeś poprawnie dane.",
+  "journal-reminder-text": "Uwaga: szczegółowe rozkłady jazdy są zapisywane od 1 lutego 2025r. wyłącznie dla osób wspierających projekt Stacjownika!",
+  "journal-footer-text": "Szczegółowe dane o rozkładach jazdy do wygenerowania SRJP są zbierane od 1 lutego 2025r. wyłącznie dla maszynistów wspierających projekt Stacjownika!"
+}
@@ -1,8 +1,14 @@
 import type { AxiosInstance } from 'axios';
 import axios from 'axios';
 import { defineStore } from 'pinia';
-import { DataStatus, type ActiveDataResponse, type SceneriesDataResponse } from '../types/api.types';
-import type { ActiveData, SceneryData } from '../types/common.types';
+import {
+  DataStatus,
+  type ActiveDataResponse,
+  type SceneriesDataResponse
+} from '../types/api.types';
+import type { ActiveData, JournalTimetableShort, SceneryData } from '../types/common.types';
+
+let activeDataInterval = -1;

 export const useApiStore = defineStore('api', {
  state() {
@@ -11,42 +17,47 @@ export const useApiStore = defineStore('api', {

      activeData: null as ActiveData | null,
      sceneryData: null as SceneryData[] | null,
+      journalTimetablesData: null as JournalTimetableShort[] | null,

      outdatedTimerId: -1,
      isActiveDataOutdated: false,

      activeDataStatus: DataStatus.LOADING,
+      journalDataStatus: DataStatus.SUCCESS,
+
+      connectionMode: 'online' as 'online' | 'offline'
    };
  },

  actions: {
    async setupAPIData() {
-      if (this.client != null) return;
+      if (this.client == null) {
+        let baseURL = 'https://stacjownik.spythere.eu';

-      let baseURL = 'https://stacjownik.spythere.eu';
+        switch (import.meta.env.VITE_API_MODE) {
+          case 'development':
+            baseURL = 'http://localhost:3001';
+            break;
+          case 'mocking':
+            baseURL = 'http://localhost:3123';
+            break;
+          default:
+            break;
+        }

-      switch (import.meta.env.VITE_API_MODE) {
-        case 'development':
-          baseURL = 'http://localhost:3001';
-          break;
-        case 'mocking':
-          baseURL = 'http://localhost:3123';
-          break;
-        default:
-          break;
+        this.client = axios.create({
+          baseURL
+        });
      }

-      this.client = axios.create({
-        baseURL,
-      });
+      clearInterval(activeDataInterval);
+
+      activeDataInterval = setInterval(() => {
+        this.fetchActiveData();
+      }, 25000);

      this.fetchSceneriesData();
      await this.fetchActiveData();
-
-
-      setInterval(() => {
-        this.fetchActiveData();
-      }, 25000);
    },

    async fetchActiveData() {
@@ -75,6 +86,6 @@ export const useApiStore = defineStore('api', {
      } catch (error) {
        console.error(error);
      }
-    },
-  },
+    }
+  }
 });
@@ -1,16 +1,24 @@
 import { defineStore } from 'pinia';
 import { useApiStore } from './api.store';
-import type { ActiveTrain, TimetableData, ViewMode } from '../types/common.types';
-import { unitNameCorrections } from '../utils/trainUtils';
+import type {
+  ActiveTrain,
+  JournalTimetableDetailed,
+  TimetableData,
+  ViewMode
+} from '../types/common.types';
+import { getHeadUnits } from '../utils/trainUtils';

 export const useGlobalStore = defineStore('global', {
  state: () => ({
    darkMode: false,
+    fullscreenMode: false,
    viewMode: 'active' as ViewMode,

    selectedTrainId: null as string | null,
    selectedActiveTrain: null as ActiveTrain | null,
    selectedStorageTimetable: null as TimetableData | null,
+    selectedJournalTimetable: null as JournalTimetableDetailed | null,
+
    storageTimetables: {} as Record<number, TimetableData>,

    timetableWarnings: [] as string[],
@@ -18,9 +26,15 @@ export const useGlobalStore = defineStore('global', {
    generatedDate: null as Date | null,
    generatedMs: 0,

-    timetableSearch: '',
+    localTimetableSearch: '',

-    showSettings: false,
+    journalTimetableSearch: {
+      driverName: '',
+      date: '',
+      route: ''
+    },
+
+    showSettings: false
  }),
  getters: {
    activeTimetableTrains() {
@@ -28,7 +42,9 @@ export const useGlobalStore = defineStore('global', {

      if (!apiStore.activeData) return [];

-      return apiStore.activeData.trains.filter((train) => train.timetable).sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'));
+      return apiStore.activeData.trains
+        .filter((train) => train.timetable)
+        .sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'));
    },

    currentTimetableData(): TimetableData | null {
@@ -52,29 +68,45 @@ export const useGlobalStore = defineStore('global', {
          trainMaxSpeed: selectedTrain.timetable.trainMaxSpeed,
          timetableId: selectedTrain.timetable.timetableId,
          stopListString: selectedTrain.timetable.stopList
-            .filter((stop) => stop.mainStop || (/^podg|po|pe$/.test(stop.stopNameRAW)))
+            .filter((stop) => stop.mainStop || /^podg|po|pe$/.test(stop.stopNameRAW))
            .map(
              (stop) =>
-                `${stop.arrivalLine ?? ''};${stop.arrivalTimestamp};${stop.stopNameRAW};${stop.stopTime ? stop.stopTime + '_' + stop.stopType : ''};${
-                  stop.mainStop
-                };${stop.stopDistance};${stop.departureTimestamp};${stop.departureLine ?? ''}`
+                `${stop.arrivalLine ?? ''};${stop.arrivalTimestamp};${stop.stopNameRAW};${
+                  stop.stopTime ? stop.stopTime + '_' + stop.stopType : ''
+                };${stop.mainStop};${stop.stopDistance};${stop.departureTimestamp};${
+                  stop.departureLine ?? ''
+                }`
            )
            .join('~~'),
-          headUnits: selectedTrain.stockString
-            .split(';')
-            .slice(0, 3)
-            .filter((s, i) => i == 0 || /-\d+$/.test(s))
-            .map((s) => {
-              const unitName = s.slice(0, s.indexOf('-'));
+          headUnits: getHeadUnits(selectedTrain.stockString)
+        };
+      } else if (this.viewMode == 'journal') {
+        const selectedTimetable = this.selectedJournalTimetable;

-              return unitNameCorrections[unitName] ?? unitName;
-            }),
+        if (!selectedTimetable || !selectedTimetable.stopListString) return null;
+
+        return {
+          journalCreatedAt: new Date(selectedTimetable.createdAt).getTime(),
+          trainNo: selectedTimetable.trainNo,
+          mass: selectedTimetable.stockMass,
+          length: selectedTimetable.stockLength,
+          driverId: selectedTimetable.driverId,
+          driverName: selectedTimetable.driverName,
+          category: selectedTimetable.trainCategoryCode,
+          hasDangerousCargo: selectedTimetable.hasDangerousCargo,
+          hasExtraDeliveries: selectedTimetable.hasExtraDeliveries,
+          warningNotes: selectedTimetable.warningNotes,
+          path: selectedTimetable.path,
+          route: selectedTimetable.route,
+          trainMaxSpeed: selectedTimetable.trainMaxSpeed,
+          timetableId: selectedTimetable.id,
+          stopListString: selectedTimetable.stopListString,
+          headUnits: getHeadUnits(selectedTimetable.stockString)
        };
      } else {
-        const selectedStorageTimetable = this.selectedStorageTimetable;
-        return selectedStorageTimetable;
+        return this.selectedStorageTimetable;
      }
-    },
+    }
  },
-  actions: {},
+  actions: {}
 });
@@ -32,7 +32,6 @@ body {
 ::-webkit-scrollbar-corner {
  background: theme('colors.stone.900');
  border-radius: 0 0 theme('borderRadius.md') 0;
-
 }

 /* Tooltips */
@@ -86,3 +85,15 @@ body {
    color-scheme: light;
  }
 }
+
+/* Animations */
+.slide-anim-enter-active,
+.slide-anim-leave-active {
+  transition: all 250ms ease-in-out;
+  transform: translateY(0);
+}
+
+.slide-anim-enter-from,
+.slide-anim-leave-to {
+  transform: translateY(100%);
+}
@@ -1,10 +1,13 @@
-import type { ActiveData, SceneryData } from './common.types';
+import type { ActiveData, JournalTimetableShort, SceneryData } from './common.types';

 export type ActiveDataResponse = ActiveData;

 export type SceneriesDataResponse = SceneryData[];

+export type JournalTimetablesShortResponse = JournalTimetableShort[]; 
+
 export enum DataStatus {
+  'INIT' = -1,
  'LOADING' = 0,
  'SUCCESS' = 1,
  'ERROR' = 2,
@@ -1,4 +1,4 @@
-export type ViewMode = 'active' | 'storage';
+export type ViewMode = 'active' | 'storage' | 'journal';

 export interface ActiveData {
  trains: ActiveTrain[];
@@ -147,6 +147,31 @@ export interface StopRow {
  stockVmax: number;
  stockLength: number;
  stockMass: number;
+
+  lastRowRef: StopRow | null;
+}
+
+export interface StopRowCZ {
+  pointName: string;
+  pointKm: string;
+  isMain: boolean;
+  stopTime: number;
+  stopType: string;
+  scheduledArrivalDate: Date | null;
+  scheduledDepartureDate: Date | null;
+  driveTime: number;
+  sceneryName: string;
+  arrivalSpeed: number;
+  departureSpeed: number;
+  arrivalTracks: number;
+  departureTracks: number;
+  headUnits: string[];
+  stockVmax: number;
+  stockLength: number;
+  stockMass: number;
+
+  arrivalDateStr: string;
+  departureDateStr: string;
 }

 export interface TimetablePathData {
@@ -223,7 +248,6 @@ export interface JournalTimetableDetailed extends JournalTimetableShort {
  createdAt: string;
  updatedAt: string;
  stockHistory: string[];
-  hidden: boolean;
  routeSceneries: string;
  checkpointArrivals: any[];
  checkpointDepartures: any[];
@@ -240,7 +264,7 @@ export interface JournalTimetableDetailed extends JournalTimetableShort {
  warningNotes: string;
  hasDangerousCargo: boolean;
  hasExtraDeliveries: boolean;
-  stopListString: any;
+  stopListString?: string;
 }

 export interface TimetableData {
@@ -260,4 +284,5 @@ export interface TimetableData {
  stopListString: string;
  headUnits: string[];
  savedTimestamp?: number;
+  journalCreatedAt?: number;
 }
@@ -1,3 +1,11 @@
+const unitNameCorrections: Record<string, string[]> = {
+  '2EN57': ['EN57', 'EN57'],
+  '201E': ['ET22'],
+  '4E': ['EU07'],
+  M62: ['ST44'],
+  CTLR4C: ['ST44']
+};
+
 export const getRegionNameById = (id: string) => {
  switch (id) {
    case 'eu':
@@ -20,10 +28,18 @@ export const getRegionNameById = (id: string) => {
  }
 };

-export const unitNameCorrections: Record<string, string> = {
-  '2EN57': 'EN57',
-  '201E': 'ET22',
-  '4E': 'EU07',
-  M62: 'ST44',
-  CTLR4C: 'ST44',
-};
+export function getHeadUnits(stockString: string) {
+  const stockList = stockString.split(';').slice(0, 3);
+
+  return stockList.reduce((acc, unitType, i) => {
+    if (i != 0 && !/-\d{3,}$/.test(unitType)) return acc;
+
+    const unitName = unitType.slice(0, unitType.indexOf('-'));
+
+    const correctedNames = unitNameCorrections[unitName] ?? [unitName];
+
+    acc.push(...correctedNames);
+
+    return acc;
+  }, [] as string[]);
+}
@@ -1,14 +1,13 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+
+    "types": ["vite/client", "vite-plugin-pwa/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
@@ -0,0 +1 @@
+{"root":["./src/i18n.ts","./src/main.ts","./src/vite-env.d.ts","./src/stores/api.store.ts","./src/stores/global.store.ts","./src/types/api.types.ts","./src/types/common.types.ts","./src/utils/trainUtils.ts","./src/App.vue","./src/components/App/MainBottom.vue","./src/components/App/MainContainer.vue","./src/components/App/Navbar.vue","./src/components/App/SettingsCard.vue","./src/components/App/UpdatePrompt.vue","./src/components/Timetable/TimetableContainer.vue","./src/components/Timetable/TimetableContent.vue","./src/components/Timetable/TimetableContentCZ.vue","./src/components/Timetable/TimetableWarnings.vue","./src/components/TimetableSearch/ActiveSearchInput.vue","./src/components/TimetableSearch/JournalSearchInput.vue","./src/components/TimetableSearch/LocalSearchInput.vue","./src/components/TimetableSearch/SearchContainer.vue","./src/components/TimetableSearch/SearchModeActions.vue","./src/components/TimetableViews/ActiveDataView.vue","./src/components/TimetableViews/CurrentTimetableView.vue","./src/components/TimetableViews/JournalStorageView.vue","./src/components/TimetableViews/LocalStorageView.vue"],"version":"5.6.3"}
@@ -1,6 +1,5 @@
 {
  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
@@ -17,8 +16,7 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
 }
@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}
@@ -1,10 +1,32 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { VitePWA } from 'vite-plugin-pwa';

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'prompt',
+      workbox: {
+        disableDevLogs: true,
+        globPatterns: ['**/*.{js,css,html,png,svg,jpg,ico}'],
+        cleanupOutdatedCaches: true,
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/getSceneries/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'stacjownik-api-cache',
+              cacheableResponse: { statuses: [0, 200] }
+            }
+          }
+        ]
+      },
+      devOptions: { enabled: false, suppressWarnings: true }
+    })
+  ],
  server: {
    port: 5345
  }
-})
+});
				`@@ -0,0 +1 @@`
				{"root":["./src/i18n.ts","./src/main.ts","./src/vite-env.d.ts","./src/stores/api.store.ts","./src/stores/global.store.ts","./src/types/api.types.ts","./src/types/common.types.ts","./src/utils/trainUtils.ts","./src/App.vue","./src/components/App/MainBottom.vue","./src/components/App/MainContainer.vue","./src/components/App/Navbar.vue","./src/components/App/SettingsCard.vue","./src/components/App/UpdatePrompt.vue","./src/components/Timetable/TimetableContainer.vue","./src/components/Timetable/TimetableContent.vue","./src/components/Timetable/TimetableContentCZ.vue","./src/components/Timetable/TimetableWarnings.vue","./src/components/TimetableSearch/ActiveSearchInput.vue","./src/components/TimetableSearch/JournalSearchInput.vue","./src/components/TimetableSearch/LocalSearchInput.vue","./src/components/TimetableSearch/SearchContainer.vue","./src/components/TimetableSearch/SearchModeActions.vue","./src/components/TimetableViews/ActiveDataView.vue","./src/components/TimetableViews/CurrentTimetableView.vue","./src/components/TimetableViews/JournalStorageView.vue","./src/components/TimetableViews/LocalStorageView.vue"],"version":"5.6.3"}
				`@@ -0,0 +1 @@`
				`{"root":["./vite.config.ts"],"version":"5.6.3"}`