Merge pull request #152 from Spythere/development-old

Migration info for the old version of the app

.github/workflows/github-discord-releases.yml

@@ -1,17 +0,0 @@
-on:
-  release:
-    types: [published]
-
-jobs:
-  github-releases-to-discord:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Github Releases To Discord
-        uses: SethCohen/github-releases-to-discord@v1.13.1
-        with:
-          webhook_url: ${{ secrets.WEBHOOK_URL }}
-          color: "15844367"
-          footer_title: "Changelog - Stacjownik"
-          footer_timestamp: true

index.html

@@ -22,10 +22,64 @@
 
     <link rel="icon" href="favicon.ico" />
 
-    <link rel="stylesheet" href="fa/css/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
+    <link rel="stylesheet" href="/fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="/fa/css/brands.css" />
+    <link rel="stylesheet" href="/fa/css/regular.css" />
+    <link rel="stylesheet" href="/fa/css/solid.css" />
+
+    <!-- Preloads -->
+    <link rel="preload" href="fonts/Quicksand-Bold.woff2" as="font" type="font/woff2" crossorigin />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Light.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link rel="preload" as="image" href="/images/icon-pl.svg" />
+    <link rel="preload" as="image" href="/images/stacjownik-header-logo.svg" />
+    <link rel="preload" as="image" href="/images/icon-dispatcher.svg" />
+    <link rel="preload" as="image" href="/images/icon-train.svg" />
+    <link rel="preload" as="image" href="/images/icon-arrow-asc.svg" />
+    <link rel="preload" as="image" href="/images/icon-arrow-desc.svg" />
+    <link rel="preload" as="image" href="/images/icon-filter2.svg" />
+    <link rel="preload" as="image" href="/images/icon-stats.svg" />
+    <link rel="preload" as="image" href="/images/icon-gnr.svg" />
+    <link rel="preload" as="image" href="/images/icon-pojazdownik.svg" />
+    <link rel="preload" as="image" href="/images/icon-diamond.svg" />
+    <link rel="preload" as="image" href="/images/icon-user.svg" />
+    <link rel="preload" as="image" href="/images/icon-like.svg" />
+    <link rel="preload" as="image" href="/images/icon-spawn.svg" />
+    <link rel="preload" as="image" href="/images/icon-timetableAll.svg" />
+    <link rel="preload" as="image" href="/images/icon-timetableUnconfirmed.svg" />
+    <link rel="preload" as="image" href="/images/icon-timetableConfirmed.svg" />
+    <link rel="preload" as="image" href="/images/icon-discord.png" />
 
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
@@ -36,10 +90,12 @@
       property="og:description"
       content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
     />
+
     <meta
       property="og:image"
       content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
     />
+
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:site_name" content="Stacjownik" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.30.3",
+  "version": "1.30.7",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "core-js": "^3.42.0",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.2.2",
     "pinia": "^3.0.2",
     "sass": "^1.87.0",
     "showdown": "^2.1.0",
@@ -26,17 +26,17 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@types/node": "^22.15.15",
+    "@types/node": "^24.3.1",
     "@types/showdown": "^2.0.6",
     "@vite-pwa/assets-generator": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.1.0",
-    "@vue/tsconfig": "^0.7.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
     "axios": "^1.9.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.4",
-    "vite": "^6.3.5",
+    "vite": "^7.1.4",
     "vite-plugin-pwa": "^1.0.0",
-    "vue-tsc": "^2.0.28"
+    "vue-tsc": "^3.0.6"
   },
   "browserslist": [
     "> 1%",

public/images/icon-alert-triangle.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+</svg>

public/images/icon-en.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
+  <path fill="#012169" d="M0 0h640v480H0z"/>
+  <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+  <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+  <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+  <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+</svg>

public/images/icon-loading.svg

@@ -0,0 +1,60 @@
+<svg width="79" height="127" viewBox="0 0 79 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-loading">
+<g id="Rectangle 37">
+<rect id="Rectangle 38" x="36.9999" y="79" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 40" x="36.9999" y="111" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 39" x="36.9999" y="95" width="6" height="16" fill="white"/>
+</g>
+<g id="Group 8">
+<path id="Vector 15" d="M59.5018 41.0003H23.0018C-1.49817 41.0003 -0.498171 79.5003 23.0018 79.5003H59.5018C83.0018 79.5003 84.0018 41.0003 59.5018 41.0003Z" fill="#3F3E3E"/>
+<g id="Group 51">
+<circle id="light-left" cx="22.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="0.25;1;1;0.25;0.25"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+<g id="Group 51">
+<circle id="light-right" cx="57.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="1;0.25;0.25;1;1"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+
+</g>
+<g id="Group 52">
+<rect id="Rectangle 36" x="37.9999" y="10" width="4" height="31" fill="#525252"/>
+<g id="Vector 23">
+<path id="Rectangle 28" d="M4.09756 32.3241L10.9579 29.2933L14.1908 36.611L7.33047 39.6418L3.42724 36.9932L4.09756 32.3241Z" fill="#FF0000"/>
+<path id="Rectangle 30" d="M10.9579 29.2933L20.105 25.2522L23.3379 32.5698L14.1908 36.611L12.5743 32.9521L10.9579 29.2933Z" fill="white"/>
+<path id="Rectangle 34" d="M20.105 25.2522L29.2521 21.211L32.485 28.5287L23.3379 32.5698L21.7214 28.911L20.105 25.2522Z" fill="#FF0000"/>
+<path id="Rectangle 35" d="M47.5463 13.1288L56.6934 9.08762L59.9263 16.4053L50.7792 20.4464L49.1627 16.7876L47.5463 13.1288Z" fill="#FF0000"/>
+<path id="Rectangle 31" d="M29.2521 21.211L38.3992 17.1699L41.6321 24.4876L32.485 28.5287L30.8685 24.8699L29.2521 21.211Z" fill="white"/>
+<path id="Rectangle 32" d="M38.3992 17.1699L47.5463 13.1288L50.7792 20.4464L41.6321 24.4876L40.0156 20.8287L38.3992 17.1699Z" fill="white"/>
+<path id="Rectangle 33" d="M56.6934 9.08762L65.8404 5.04649L69.0734 12.3642L59.9263 16.4053L58.3098 12.7465L56.6934 9.08762Z" fill="white"/>
+<path id="Rectangle 29" d="M73.1581 1.81359L65.8405 5.04649L69.0734 12.3642L76.391 9.13126L76.604 4.6642L73.1581 1.81359Z" fill="#FF0000"/>
+</g>
+<g id="Vector 24">
+<path id="Rectangle 28_2" d="M6.36567 3.47438L13.3598 6.18222L10.4714 13.6426L3.47731 10.9348L2.59012 6.30195L6.36567 3.47438Z" fill="#FF0000"/>
+<path id="Rectangle 30_2" d="M13.3597 6.18222L22.6852 9.79268L19.7969 17.2531L10.4714 13.6426L11.9156 9.91241L13.3597 6.18222Z" fill="white"/>
+<path id="Rectangle 34_2" d="M22.6853 9.79268L32.0108 13.4031L29.1224 20.8635L19.7969 17.2531L21.2411 13.5229L22.6853 9.79268Z" fill="#FF0000"/>
+<path id="Rectangle 35_2" d="M50.6617 20.6241L59.9872 24.2345L57.0989 31.6949L47.7734 28.0844L49.2176 24.3542L50.6617 20.6241Z" fill="#FF0000"/>
+<path id="Rectangle 31_2" d="M32.0107 13.4031L41.3362 17.0136L38.4479 24.474L29.1224 20.8635L30.5666 17.1333L32.0107 13.4031Z" fill="white"/>
+<path id="Rectangle 32_2" d="M41.3363 17.0136L50.6618 20.6241L47.7734 28.0844L38.4479 24.474L39.8921 20.7438L41.3363 17.0136Z" fill="white"/>
+<path id="Rectangle 33_2" d="M59.9872 24.2345L69.3127 27.845L66.4243 35.3054L57.0988 31.6949L58.543 27.9647L59.9872 24.2345Z" fill="white"/>
+<path id="Rectangle 29_2" d="M76.7731 30.7333L69.3127 27.845L66.4243 35.3054L73.8847 38.1937L77.194 35.1856L76.7731 30.7333Z" fill="#FF0000"/>
+</g>
+</g>
+</g>
+</svg>

public/images/icon-pl.svg

@@ -1,4 +1,6 @@
-<svg width="39" height="23" viewBox="0 0 39 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="39" height="23" fill="#FF0F0F"/>
-<rect width="39" height="11.5" fill="white"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 640 480">
+  <g fill-rule="evenodd">
+    <path fill="#fff" d="M640 480H0V0h640z"/>
+    <path fill="#dc143c" d="M640 480H0V240h640z"/>
+  </g>
+</svg>

src/App.vue

@@ -1,195 +1,11 @@
 <template>
   <div class="app_container">
-    <UpdateCard
-      :is-update-card-open="isUpdateCardOpen"
-      @toggle-card="() => (isUpdateCardOpen = false)"
-    />
-
-    <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
-
-    <Tooltip />
-
-    <AppHeader :current-lang="store.currentLocale" @change-lang="changeLang" />
-
-    <main class="app_main">
-      <router-view v-slot="{ Component }">
-        <keep-alive exclude="SceneryView">
-          <component :is="Component" :key="$route.name" />
-        </keep-alive>
-      </router-view>
-    </main>
-
-    <AppFooter
-      :version="VERSION"
-      :is-on-production-host="isOnProductionHost"
-      :is-update-card-open="isUpdateCardOpen"
-      @open-update-card="() => (isUpdateCardOpen = true)"
-    />
+    <AppNewDomainInfo />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import axios from 'axios';
-
-import { version } from '../package.json';
-import { Status } from './typings/common';
-import { useMainStore } from './store/mainStore';
-import { useApiStore } from './store/apiStore';
-import { useTooltipStore } from './store/tooltipStore';
-
-import Clock from './components/App/Clock.vue';
-import StatusIndicator from './components/App/StatusIndicator.vue';
-import AppHeader from './components/App/AppHeader.vue';
-import Tooltip from './components/Tooltip/Tooltip.vue';
-import UpdateCard from './components/App/UpdateCard.vue';
-
-import StorageManager from './managers/storageManager';
-import AppFooter from './components/App/AppFooter.vue';
-import AppWelcomeCard from './components/App/AppWelcomeCard.vue';
-
-const STORAGE_VERSION_KEY = 'app_version';
-const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';
-
-export default defineComponent({
-  components: {
-    Clock,
-    StatusIndicator,
-    AppHeader,
-    AppFooter,
-    UpdateCard,
-    AppWelcomeCard,
-    Tooltip
-  },
-
-  data: () => ({
-    VERSION: version,
-    store: useMainStore(),
-    apiStore: useApiStore(),
-    tooltipStore: useTooltipStore(),
-
-    isUpdateCardOpen: false,
-    isWelcomeCardOpen: false,
-
-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
-  }),
-
-  created() {
-    this.init();
-  },
-
-  async mounted() {
-    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
-    window.addEventListener('mousedown', () => this.tooltipStore.hide());
-  },
-
-  methods: {
-    init() {
-      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
-
-      this.loadLang();
-      this.setupOfflineHandling();
-      this.checkAppVersion();
-      this.handleQueries();
-
-      this.apiStore.setupAPIData();
-    },
-
-    handleQueries() {
-      const query = new URLSearchParams(window.location.search);
-
-      if (query.get('welcomeCard') == '1') {
-        this.isWelcomeCardOpen = true;
-      }
-    },
-
-    async checkAppVersion() {
-      const isWelcomeCardSeen = StorageManager.getBooleanValue(WELCOME_CARD_SEEN_KEY);
-      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
-
-      if (isWelcomeCardSeen == false && storageVersion == '') {
-        setTimeout(() => {
-          this.isWelcomeCardOpen = true;
-        }, 1500);
-      }
-
-      try {
-        const releaseData = await (
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-        ).data;
-
-        if (!releaseData) return;
-
-        this.store.appUpdate = {
-          version,
-          changelog: releaseData.body,
-          releaseURL: releaseData.html_url
-        };
-
-        this.isUpdateCardOpen =
-          (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
-          import.meta.env.VITE_UPDATE_TEST === 'test';
-      } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
-      }
-
-      StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
-    },
-
-    setupOfflineHandling() {
-      this.store.isOffline = !window.navigator.onLine;
-
-      if (this.store.isOffline) this.handleOfflineMode();
-
-      window.addEventListener('offline', this.handleOfflineMode);
-      window.addEventListener('online', this.handleOnlineMode);
-    },
-
-    handleOfflineMode() {
-      this.store.isOffline = true;
-
-      this.apiStore.activeData = undefined;
-      this.apiStore.dataStatuses.connection = Status.Data.Offline;
-    },
-
-    handleOnlineMode() {
-      this.store.isOffline = false;
-      this.apiStore.dataStatuses.connection = Status.Data.Loading;
-
-      this.apiStore.connectToAPI();
-    },
-
-    changeLang(lang: string) {
-      this.$i18n.locale = lang;
-      this.store.currentLocale = lang;
-
-      StorageManager.setStringValue('lang', lang);
-    },
-
-    loadLang() {
-      const storageLang = StorageManager.getStringValue('lang');
-
-      if (storageLang) {
-        this.changeLang(storageLang);
-        return;
-      }
-
-      if (!window.navigator.language) return;
-
-      const naviLanguage = window.navigator.language.toString();
-
-      if (!naviLanguage.startsWith('pl')) {
-        this.changeLang('en');
-        return;
-      }
-    },
-
-    closeWelcomeCard() {
-      this.isWelcomeCardOpen = false;
-      StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
-    }
-  }
-});
+<script lang="ts" setup>
+import AppNewDomainInfo from './components/App/AppNewDomainInfo.vue';
 </script>
 
 <style lang="scss">
@@ -216,38 +32,4 @@ export default defineComponent({
 .app_main {
   padding: 0 0.5em;
 }
-
-.warning {
-  background-color: firebrick;
-  text-align: center;
-  padding: 0.5em 0.4em;
-  max-width: 1100px;
-  margin: 0 auto;
-
-  border-radius: 0 0 1em 1em;
-}
-
-// FOOTER
-.app_footer {
-  max-width: 100%;
-  padding: 0.5em;
-
-  button {
-    display: inline-block;
-    padding: 0.1em;
-  }
-
-  img {
-    width: 1.1em;
-    vertical-align: text-bottom;
-  }
-
-  z-index: 10;
-
-  background: #111;
-  color: white;
-
-  text-align: center;
-  vertical-align: middle;
-}
 </style>

src/components/App/AppHeader.vue

@@ -1,18 +1,6 @@
 <template>
   <header class="app_header">
     <div class="header_container">
-      <div class="header_icons">
-        <span class="icons-top">
-          <img
-            src="/images/icon-pl.svg"
-            alt="icon-pl"
-            @click="changeLang('en')"
-            v-if="currentLang == 'pl'"
-          />
-          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
-        </span>
-      </div>
-
       <div class="header_body">
         <StatusIndicator />
 
@@ -76,27 +64,12 @@ import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
   components: { StatusIndicator, Clock, RegionDropdown },
 
-  emits: ['changeLang'],
-
-  props: {
-    currentLang: {
-      type: String,
-      required: true
-    }
-  },
-
   setup() {
     return {
       store: useMainStore()
     };
   },
 
-  methods: {
-    changeLang(lang: string) {
-      this.$emit('changeLang', lang);
-    }
-  },
-
   computed: {
     onlineTrainsCount() {
       return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
@@ -111,7 +84,7 @@ export default defineComponent({
     isChristmas() {
       const date = new Date();
 
-      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 6 && date.getUTCDate() <= 31;
     }
   }
 });
@@ -141,7 +114,7 @@ export default defineComponent({
 
     border-radius: 0 0 1em 1em;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       position: relative;
       margin-top: 0.5em;
     }
@@ -180,20 +153,12 @@ export default defineComponent({
 
     padding: 0.5em;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       transform: translateX(85%);
     }
   }
 }
 
-// ICONS
-.icons-top {
-  img {
-    width: 2.5em;
-    cursor: pointer;
-  }
-}
-
 // COUNTER
 .info_counter {
   display: flex;

src/components/App/AppNewDomainInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="app-domain-info">
+    <div>
+      <img src="/images/icon-loading.svg" alt="loading" height="200" />
+      <h1><span class="text--primary">Aplikacja</span> została przeniesiona na nową domenę!</h1>
+      <h1><span class="text--primary">This app</span> has been moved to a new domain!</h1>
+
+      <div style="margin-top: 1em">
+        <a :href="newLink">Nowy link dla obecnego adresu / New link to the current address</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const newLink = computed(() => {
+  return 'https://stacjownik-td2.spythere.eu' + location.pathname + location.search;
+});
+</script>
+
+<style lang="scss" scoped>
+.app-domain-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 100vh;
+  color: white;
+}
+
+a {
+  font-size: 1.35em;
+  text-decoration: underline;
+}
+</style>

src/components/App/AppWelcomeCard.vue

@@ -4,12 +4,12 @@
       <h1>{{ $t('welcome.title') }}</h1>
 
       <div class="language-select">
-        <button :data-active="$i18n.locale == 'pl'" @click="changeLang('pl')">
+        <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
           <img src="/images/icon-pl.svg" alt="" width="45" />
         </button>
 
-        <button :data-active="$i18n.locale == 'en'" @click="changeLang('en')">
-          <img src="/images/icon-en.jpg" alt="" width="45" />
+        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
+          <img src="/images/icon-en.svg" alt="" width="45" />
         </button>
       </div>
 
@@ -114,12 +114,9 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
 
-const i18n = useI18n();
 const store = useMainStore();
 
 const emit = defineEmits(['toggleCard']);
@@ -130,13 +127,6 @@ const props = defineProps({
 function toggleCard(state: boolean) {
   emit('toggleCard', state);
 }
-
-function changeLang(localeName: string) {
-  i18n.locale.value = localeName;
-  store.currentLocale = localeName;
-
-  StorageManager.setStringValue('lang', localeName);
-}
 </script>
 
 <style lang="scss" scoped>

src/components/App/MigrateInfoCard.vue

@@ -0,0 +1,94 @@
+<template>
+  <Card :is-open="isOpen" @toggle-card="toggleCard">
+    <div class="body-content">
+      <div class="content-top">
+        <img src="/images/icon-loading.svg" alt="loading" height="125" />
+        <h1>{{ t('migrate-info.header-text') }}</h1>
+      </div>
+
+      <div>
+        <p v-html="t('migrate-info.paragraph-1-html')"></p>
+
+        <p>
+          <a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
+            {{ t('migrate-info.paragraph-2-link-text') }}
+          </a>
+        </p>
+
+        <p>
+          {{ t('migrate-info.paragraph-3-text') }}
+        </p>
+
+        <p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
+      </div>
+
+      <div class="content-actions">
+        <button class="btn btn--action" @click="toggleCard">PRZYJĄŁEM!</button>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import Card from '../Global/Card.vue';
+
+const { t } = useI18n();
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggleCard']);
+
+function toggleCard() {
+  emit('toggleCard');
+}
+</script>
+
+<style lang="scss" scoped>
+.body-content {
+  max-width: 800px;
+  min-height: 500px;
+  padding: 1em 0.5em;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+p {
+  padding: 0.5em 0;
+}
+
+a.new-link {
+  font-size: 1.2em;
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
+.info-bottom {
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.content-actions {
+  display: flex;
+  justify-content: center;
+  font-size: 1.2em;
+}
+</style>

src/components/Global/Card.vue

@@ -81,13 +81,8 @@ export default defineComponent({
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;
+  border-radius: 1em;
 
   overflow: auto;
 }
-
-@include responsive.smallScreen{
-  .card {
-    align-items: flex-start;
-  }
-}
 </style>

src/components/Global/VehicleThumbnail.vue

@@ -9,7 +9,7 @@
       <img
         v-for="(thumbnailImage, imageIndex) in images"
         :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        height="60"
+        height="70"
         loading="lazy"
         data-tooltip-type="VehiclePreviewTooltip"
         :data-tooltip-content="vehicleString"
@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">    
 import { computed, PropType, Ref, ref } from 'vue';
 
 const props = defineProps({
@@ -56,16 +56,17 @@ function onImageLoad() {
   transition: opacity 100ms ease-in-out;
 
   &[data-load-status='loading'] {
-    min-height: 60px;
+    min-height: 70px;
     min-width: 200px;
   }
 }
 
 .stock-text {
+  max-width: 90%;
   text-align: center;
   color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
+  font-size: 0.85em;
+  margin: 0 auto;
   padding: 0.25em 0;
 }
 

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -96,6 +96,7 @@ export default defineComponent({
   data() {
     return {
       historyList: [] as API.DispatcherHistory.Response,
+      lastStationName: '',
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data,
       apiStore: useApiStore()
@@ -103,10 +104,10 @@ export default defineComponent({
   },
 
   async activated() {
-    // if (this.historyList.length == 0) {
+    this.historyList.length = 0;
+
     const fetchedHistory = await this.fetchAPIData();
     if (fetchedHistory) this.historyList = fetchedHistory;
-    // }
   },
 
   methods: {
@@ -194,7 +195,7 @@ export default defineComponent({
   color: springgreen;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .journal-list > div {
     flex-direction: column;
     justify-content: center;

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -118,6 +118,7 @@ export default defineComponent({
   align-items: center;
 
   width: 3em;
+  height: 3em;
   margin: 0.25em;
 
   border: 2px solid #4e4e4e;

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -43,8 +43,12 @@
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}
           </span>
-          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
-          <span v-if="route.routeSpeedExit" class="speed">| {{ route.routeSpeedExit }}</span>
+          <span v-if="route.routeSpeed" class="speed">
+            <span>{{ route.routeSpeed }}</span>
+            <span v-if="route.routeSpeedExit && route.routeSpeedExit != route.routeSpeed">
+              | {{ route.routeSpeedExit }}
+            </span>
+          </span>
           <span v-if="route.routeLength" class="length">
             {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
           </span>
@@ -156,7 +160,7 @@ ul.routes-list {
     -moz-user-select: none;
     -webkit-user-select: none;
 
-    span {
+    & > span {
       padding: 0.2em;
       background-color: #007599;
       font-weight: bold;

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -18,7 +18,11 @@
         :key="train.id"
         :data-status="status"
       >
-        <router-link :to="train.driverRouteLocation">
+        <router-link
+          :to="train.driverRouteLocation"
+          data-tooltip-type="TrainInfoTooltip"
+          :data-tooltip-content="train.id"
+        >
           <span class="user_train"> {{ train.trainNo }}</span>
           <span class="user_name">
             {{ train.driverName }}
@@ -83,7 +87,8 @@ export default defineComponent({
         const stop = train.timetableData?.followingStops.find(
           (stop) =>
             stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
-            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW) ||
+            this.onlineScenery?.missingCheckpoints.includes(stop.stopNameRAW)
         );
 
         const sceneryName =

src/components/SceneryView/SceneryTimetable.vue

@@ -54,6 +54,18 @@
           >
         </template>
       </div>
+
+      <div class="timetable-checkpoints" v-else-if="onlineScenery">
+        <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
+          <template v-if="i > 0">&bull;</template>
+          <router-link
+            class="checkpoint-item"
+            :class="{ current: chosenCheckpoint === ch }"
+            :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
+            >{{ ch }}</router-link
+          >
+        </template>
+      </div>
     </div>
 
     <div class="timetable-list">
@@ -122,28 +134,30 @@
                 </span>
 
                 <!-- Train info -->
-                <span>
-                  <b
-                    data-tooltip-type="BaseTooltip"
-                    :data-tooltip-content="
-                      getCategoryExplanation(row.train.timetableData!.category)
-                    "
-                    class="text--primary tooltip-help"
-                  >
+                <span
+                  data-tooltip-type="TrainInfoTooltip"
+                  :data-tooltip-content="row.train.id"
+                  class="tooltip-help"
+                >
+                  <b class="text--primary">
                     {{ row.train.timetableData!.category }}
                   </b>
 
                   <b>&nbsp;{{ row.train.trainNo }}</b>
+                  &bull;
+                  {{ row.train.driverName }}
+
+                  <i
+                    class="fa-solid fa-user-slash"
+                    style="color: salmon"
+                    v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
+                  ></i>
                 </span>
-                <span>&bull;</span>
-                <span>{{ row.train.driverName }}</span>
-                <span>&bull;</span>
-                <b style="color: #ddd">{{ row.train.stockList[0] }}</b>
 
                 <!-- Train stop comments -->
                 <span
-                  class="stop-comments-icon"
                   v-if="row.checkpointStop.comments"
+                  class="stop-comments-icon"
                   data-tooltip-type="BaseTooltip"
                   :data-tooltip-content="row.checkpointStop.comments"
                 >
@@ -243,7 +257,7 @@ import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { SceneryTimetableRow } from './typings';
-import { ActiveScenery, Station } from '../../typings/common';
+import { ActiveScenery, Station, TooltipTrainInfo, Train } from '../../typings/common';
 import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
@@ -285,6 +299,7 @@ export default defineComponent({
 
     const chosenCheckpoint = ref(
       props.station?.generalInfo?.checkpoints[0] ??
+        props.onlineScenery?.missingCheckpoints[0] ??
         props.station?.name ??
         route.query['station']?.toString() ??
         ''
@@ -363,21 +378,30 @@ export default defineComponent({
 
   methods: {
     loadSelectedOption() {
-      if (!this.station) return;
-
-      if (!this.station.generalInfo) {
-        this.chosenCheckpoint = this.station.name;
-        return;
-      }
-
       const queryCheckpoint = this.$route.query['checkpoint']?.toString();
 
-      this.chosenCheckpoint =
-        this.station.generalInfo.checkpoints.find(
-          (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
-        ) ??
-        this.station.generalInfo.checkpoints[0] ??
-        this.station.name;
+      let checkpointsListRef: string[] | null = null;
+      let sceneryName = '';
+
+      if (this.station && this.station.generalInfo) {
+        checkpointsListRef = this.station.generalInfo.checkpoints;
+        sceneryName = this.station.name;
+      } else if (this.onlineScenery) {
+        checkpointsListRef = this.onlineScenery.missingCheckpoints;
+        sceneryName = this.onlineScenery.name;
+      } else if (this.station) {
+        this.chosenCheckpoint = this.station.name;
+        sceneryName = this.station.name;
+      }
+
+      if (checkpointsListRef) {
+        this.chosenCheckpoint =
+          checkpointsListRef.find(
+            (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
+          ) ??
+          checkpointsListRef[0] ??
+          sceneryName;
+      }
     },
 
     setCheckpoint(cp: string) {
@@ -527,11 +551,12 @@ export default defineComponent({
 
 .info-route {
   width: 100%;
+  margin-top: 0.25em;
 }
 
 .stop-comments-icon > img {
-  width: 1.2em;
-  vertical-align: middle;
+  width: 1.3em;
+  vertical-align: top;
 }
 
 .schedule {

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -40,36 +40,28 @@
               <span>
                 {{ $t('scenery.timetable-issued-date') }}
                 <b>
-                  {{
-                    localeDateTime(
-                      timetableHistory.createdAt > timetableHistory.beginDate
-                        ? timetableHistory.beginDate
-                        : timetableHistory.createdAt,
-                      $i18n.locale
-                    )
-                  }}
-                </b></span
-              >
-              <span v-if="timetableHistory.authorName">
-                {{ $t('scenery.timetable-issued-by') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
-                  >
-                    {{ timetableHistory.authorName }}
-                  </router-link>
+                  {{ parseCreatedDate(timetableHistory, $i18n.locale) }}
                 </b>
               </span>
 
               <span>
                 {{ $t('scenery.timetable-issued-for') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
-                  >
-                    {{ timetableHistory.driverName }}
-                  </router-link>
-                </b>
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
+                >
+                  {{ timetableHistory.driverName }}
+                </router-link>
+              </span>
+
+              <span v-if="timetableHistory.authorName">
+                {{ $t('scenery.timetable-issued-by') }}
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
+                >
+                  {{ timetableHistory.authorName }}
+                </router-link>
               </span>
             </div>
           </span>
@@ -106,7 +98,7 @@ import { useApiStore } from '../../store/apiStore';
 import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';
 
-const historyModeList = ['via', 'issuedFrom', 'terminatingAt'] as const;
+const historyModeList = ['includesScenery', 'issuedFrom', 'via', 'terminatingAt'] as const;
 type HistoryMode = (typeof historyModeList)[number];
 
 export default defineComponent({
@@ -131,17 +123,19 @@ export default defineComponent({
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data,
 
-      checkedHistoryMode: 'via' as HistoryMode
+      checkedHistoryMode: 'includesScenery' as HistoryMode
     };
   },
 
   async activated() {
+    this.checkedHistoryMode = 'includesScenery';
     this.fetchAPIData();
   },
 
   methods: {
     async fetchAPIData() {
       const stationName = this.$route.query['station'];
+      this.dataStatus = Status.Data.Loading;
 
       if (!stationName) {
         this.historyList = [];
@@ -152,6 +146,7 @@ export default defineComponent({
       const requestFilters: Record<string, any> = {};
       requestFilters[this.checkedHistoryMode] = stationName.toString();
       requestFilters.countLimit = 30;
+      requestFilters['returnType'] = 'short';
 
       try {
         const response: API.TimetableHistory.Response = await (
@@ -165,12 +160,12 @@ export default defineComponent({
         this.dataStatus = Status.Data.Loaded;
       } catch (error) {
         console.error(error);
+        this.dataStatus = Status.Data.Error;
       }
     },
 
     checkHistoryMode(mode: HistoryMode) {
       this.checkedHistoryMode = mode;
-      this.dataStatus = Status.Data.Loading;
       this.fetchAPIData();
     },
 
@@ -181,6 +176,18 @@ export default defineComponent({
           [`search-${this.checkedHistoryMode}`]: this.station?.name || this.onlineScenery?.name
         }
       });
+    },
+
+    parseCreatedDate(timetable: API.TimetableHistory.Data, locale: string) {
+      const createdDate =
+        timetable.createdAt > timetable.beginDate
+          ? new Date(timetable.beginDate)
+          : new Date(timetable.createdAt);
+
+      return createdDate.toLocaleString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        timeStyle: 'short',
+        dateStyle: 'medium'
+      });
     }
   },
   components: { Loading }
@@ -215,7 +222,15 @@ export default defineComponent({
 
   button {
     padding: 0.35em;
-    min-width: 120px;
+  }
+}
+
+.journal-link {
+  font-weight: bold;
+  color: #eee;
+
+  &:hover {
+    color: var(--clr-primary);
   }
 }
 

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="general-status">
-    <span
+    <router-link
+      v-if="computedScheduledTrain.stationNameHref"
+      :to="`/scenery?station=${computedScheduledTrain.stationNameHref}`"
       :class="computedScheduledTrain.status"
-      @click.prevent="() => {}"
       v-html="computedScheduledTrain.stopStatusIndicator"
     >
-    </span>
+    </router-link>
+
+    <span
+      v-else
+      :class="computedScheduledTrain.status"
+      v-html="computedScheduledTrain.stopStatusIndicator"
+    ></span>
   </div>
 </template>
 
@@ -27,6 +34,7 @@ export default defineComponent({
       const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;
 
       let stopStatusIndicator = '';
+      let stationNameHref = '';
 
       switch (status) {
         case StopStatus.ARRIVING:
@@ -35,6 +43,8 @@ export default defineComponent({
               prevStationName: prevElement?.stationName ?? '',
               prevDepartureLine: prevElement?.departureRouteExt ?? ''
             });
+
+            stationNameHref = prevElement?.stationName ?? '';
           } else {
             stopStatusIndicator = this.$t('timetables.desc-beginning');
           }
@@ -48,6 +58,9 @@ export default defineComponent({
                 nextArrivalLine: nextElement?.arrivalRouteExt
               })
             : this.$t(`timetables.desc-end`);
+
+          stationNameHref = nextElement?.stationName ?? '';
+
           break;
 
         case StopStatus.DEPARTED:
@@ -55,11 +68,15 @@ export default defineComponent({
             stopStatusIndicator = this.$t('timetables.desc-departed-ends', {
               nextStationName: currentElement.stationName
             });
+
+            stationNameHref = nextElement?.stationName ?? '';
           } else {
             stopStatusIndicator = this.$t('timetables.desc-departed', {
               nextStationName: nextElement?.stationName ?? currentElement.stationName,
               nextArrivalLine: nextElement?.arrivalRouteExt
             });
+
+            stationNameHref = nextElement?.stationName ?? '';
           }
 
           break;
@@ -69,6 +86,8 @@ export default defineComponent({
             nextStationName: nextElement?.stationName,
             nextArrivalLine: nextElement?.arrivalRouteExt
           });
+
+          stationNameHref = nextElement?.stationName ?? '';
           break;
 
         case StopStatus.TERMINATED:
@@ -80,9 +99,18 @@ export default defineComponent({
       }
       return {
         ...this.sceneryTimetableRow,
+        stationNameHref,
         stopStatusIndicator
       };
     }
+  },
+
+  methods: {
+    navigateToScenery(sceneryName?: string) {
+      if (!sceneryName) return;
+
+      this.$router.push(`/scenery?station=${sceneryName}`);
+    }
   }
 });
 </script>
@@ -91,11 +119,11 @@ export default defineComponent({
 .general-status {
   margin-top: 0.5em;
 
-  span.arriving {
+  & > .arriving {
     color: #ccc;
   }
 
-  span.departed {
+  & > .departed {
     color: lime;
 
     &-away {
@@ -103,15 +131,15 @@ export default defineComponent({
     }
   }
 
-  span.stopped {
+  & > .stopped {
     color: #ffa600;
   }
 
-  span.online {
+  & > .online {
     color: gold;
   }
 
-  span.terminated {
+  & > .terminated {
     color: salmon;
   }
 }

src/components/StationsView/StationFilterCard.vue

@@ -21,9 +21,7 @@
             <template v-else>{{ $t('filters.no-changed-filters') }}</template>
           </div>
 
-          <section class="card_sceneries-search">
-            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
-
+          <section class="card_input-search">
             <datalist id="sceneries">
               <option
                 v-for="scenery in sortedStationList"
@@ -32,18 +30,60 @@
               ></option>
             </datalist>
 
-            <form action="javascript:void(0);" @submit="handleSceneriesInput">
-              <input
-                v-model="chosenSearchScenery"
-                id="scenery-search"
-                list="sceneries"
-                :placeholder="$t('filters.sceneries-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
+            <input
+              v-model="chosenSearchScenery"
+              id="scenery-search"
+              list="sceneries"
+              :placeholder="$t('filters.sceneries-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
 
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
+            <button class="btn--action" @click="handleSceneriesInput">
+              {{ $t('filters.search-button-title') }}
+            </button>
+          </section>
+
+          <section class="card_input-search authors">
+            <datalist id="authors" name="authors">
+              <option v-for="(author, i) in authorsOptions" :key="i" :value="author"></option>
+            </datalist>
+
+            <input
+              type="text"
+              id="author"
+              list="authors"
+              name="authors"
+              v-model="filters['authors']"
+              :placeholder="$t('filters.authors-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
+
+            <button class="btn--action btn--image" @click="resetAuthorsInput">
+              <img src="/images/icon-exit.svg" alt="reset authors search" />
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <datalist id="projects" name="projects">
+              <option v-for="(project, i) in projectsOptions" :key="i" :value="project"></option>
+            </datalist>
+
+            <input
+              type="text"
+              id="projects"
+              list="projects"
+              name="projects"
+              v-model="filters['projects']"
+              :placeholder="$t('filters.projects-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
+
+            <button class="btn--action btn--image" @click="resetProjectsInput">
+              <img src="/images/icon-exit.svg" alt="reset projects search" />
+            </button>
           </section>
 
           <section class="card_options">
@@ -97,29 +137,6 @@
             </span>
           </section>
 
-          <section class="card_authors-search">
-            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
-
-            <datalist id="authors" name="authors">
-              <option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
-            </datalist>
-
-            <form action="javascript:void(0);" @submit="handleAuthorsInput">
-              <input
-                type="text"
-                id="author"
-                list="authors"
-                name="authors"
-                v-model="authors"
-                :placeholder="$t('filters.authors-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
-
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
-          </section>
-
           <section class="card_sliders">
             <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
               <input
@@ -200,7 +217,8 @@ export default defineComponent({
     sliderStates,
 
     minimumHours: 0,
-    authors: '',
+    authorSearchFilter: '',
+    projectSearchFilter: '',
 
     currentRegion: { id: '', value: '' },
 
@@ -255,11 +273,7 @@ export default defineComponent({
         .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
     },
 
-    currentOptionsActive() {
-      return true;
-    },
-
-    authorsHint() {
+    authorsOptions() {
       return this.store.stationList
         .reduce((acc, station) => {
           station.generalInfo?.authors?.forEach((author) => {
@@ -270,6 +284,17 @@ export default defineComponent({
           return acc;
         }, [] as string[])
         .sort((a, b) => a.localeCompare(b));
+    },
+
+    projectsOptions() {
+      return this.store.stationList
+        .reduce((acc, station) => {
+          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden) return acc;
+          if (!acc.includes(station.generalInfo.project.trim())) acc.push(station.generalInfo.project.trim());
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => a.localeCompare(b));
     }
   },
 
@@ -294,8 +319,12 @@ export default defineComponent({
       this.scrollTop = (e.target as HTMLElement).scrollTop;
     },
 
-    handleAuthorsInput() {
-      this.filters['authors'] = this.authors;
+    resetAuthorsInput() {
+      this.filters['authors'] = this.authorSearchFilter;
+    },
+
+    resetProjectsInput() {
+      this.filters['projects'] = this.projectSearchFilter;
     },
 
     handleSceneriesInput() {
@@ -340,7 +369,7 @@ export default defineComponent({
 
       // Reset local model values
       this.minimumHours = 0;
-      this.authors = '';
+      this.authorSearchFilter = '';
 
       // Reset global filters
       Object.keys(this.filters).forEach((filterKey) => {
@@ -456,27 +485,23 @@ h3.section-header {
   }
 }
 
-.card_authors-search,
-.card_sceneries-search {
-  margin: 1em 0;
+.card_input-search {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  gap: 0.5em;
 
-  form {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5em;
-    width: 100%;
-    margin-top: 1em;
+  button {
+    height: 100%;
   }
 
   input {
-    width: 70%;
-    max-width: 400px;
+    width: 100%;
     padding: 0.5em;
-    outline: 1px solid white;
+    border: 1px solid #aaa;
+  }
+
+  &.authors {
+    margin-top: 1em;
   }
 }
 

src/components/StationsView/StationStats.vue

@@ -14,10 +14,10 @@
     <transition name="dropdown-anim">
       <div class="dropdown_wrapper" v-if="showDropdown">
         <div>
-          <h1 class="stats-title text--primary">
+          <h2 class="stats-title text--primary">
             <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
             {{ $t('station-stats.title') }}
-          </h1>
+          </h2>
 
           <hr style="margin: 0.5em 0" />
 
@@ -245,7 +245,7 @@ export default defineComponent({
 @use '../../styles/badge';
 @use '../../styles/responsive';
 
-h1.stats-title img {
+.stats-title img {
   vertical-align: text-bottom;
 }
 
@@ -279,7 +279,7 @@ h1.stats-title img {
 }
 
 @include responsive.smallScreen {
-  h1.stats-title {
+  .stats-title {
     text-align: center;
   }
 

src/components/StationsView/StationTable.vue

@@ -33,12 +33,12 @@
             class="header-image"
             :class="headerName"
           >
-            <span class="header_wrapper">
-              <img
-                :src="`/images/icon-${headerName}.svg`"
-                :alt="headerName"
-                :title="$t(`sceneries.headers.${headerName}`)"
-              />
+            <span
+              class="header_wrapper"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t(`sceneries.headers.${headerName}`)"
+            >
+              <img :src="`/images/icon-${headerName}.svg`" :alt="headerName" />
 
               <img
                 class="sort-icon"
@@ -76,37 +76,49 @@
                   station.generalInfo.availability != 'nonPublic' &&
                   station.generalInfo.availability != 'unavailable'
                 "
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t(`sceneries.info.${station.generalInfo.availability}`)} (${$t(
+                  'sceneries.info.req-level',
+                  { lvl: station.generalInfo.reqLevel },
+                  station.generalInfo.reqLevel
+                )})`"
                 :style="calculateExpStyle(station.generalInfo.reqLevel)"
               >
                 {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
               </span>
 
-              <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                <img
-                  src="/images/icon-abandoned.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.abandoned')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'abandoned'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.abandoned')"
+              >
+                <img src="/images/icon-abandoned.svg" alt="non-public" />
               </span>
 
-              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                <img
-                  src="/images/icon-lock.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.non-public')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'nonPublic'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.non-public')"
+              >
+                <img src="/images/icon-lock.svg" alt="non-public" />
               </span>
 
-              <span v-else>
-                <img
-                  src="/images/icon-unavailable.svg"
-                  alt="unavailable"
-                  :title="$t('sceneries.info.unavailable')"
-                />
+              <span
+                v-else
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.unavailable')"
+              >
+                <img src="/images/icon-unavailable.svg" alt="unavailable" />
               </span>
             </span>
 
-            <span v-else> ? </span>
+            <span
+              v-else
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
+            >
+              ?
+            </span>
           </td>
 
           <td class="station-status">
@@ -153,7 +165,8 @@
               <span
                 v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
                 class="track catenary"
-                :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-catenary')}${
                   station.generalInfo.routes.singleElectrifiedNames.length
                 }`"
               >
@@ -163,7 +176,8 @@
               <span
                 v-if="station.generalInfo.routes.singleOtherNames.length != 0"
                 class="track no-catenary"
-                :title="`${$t('sceneries.info.single-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-other')}${
                   station.generalInfo.routes.singleOtherNames.length
                 }`"
               >
@@ -177,7 +191,8 @@
               <span
                 v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
                 class="track catenary"
-                :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-catenary')}${
                   station.generalInfo.routes.doubleElectrifiedNames.length
                 }`"
               >
@@ -187,7 +202,8 @@
               <span
                 v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
                 class="track no-catenary"
-                :title="`${$t('sceneries.info.double-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-other')}${
                   station.generalInfo.routes.doubleOtherNames.length
                 }`"
               >
@@ -201,7 +217,8 @@
               v-if="station.generalInfo?.signalType"
               class="scenery-icon icon-info"
               :class="station.generalInfo?.controlType.replace('+', '-')"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                 $t('sceneries.info.control-type') +
                 $t(`controls.${station.generalInfo?.controlType}`)
               "
@@ -214,7 +231,8 @@
               class="icon-info"
               :src="`/images/icon-${station.generalInfo.signalType}.svg`"
               :alt="station.generalInfo.signalType"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                 $t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)
               "
             />
@@ -224,7 +242,8 @@
               class="icon-info"
               src="/images/icon-SUP.svg"
               alt="SUP (RASP-UZK)"
-              :title="$t('sceneries.info.SUP')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.SUP')"
             />
 
             <img
@@ -232,7 +251,8 @@
               class="icon-info"
               src="/images/icon-ASDEK.svg"
               alt="dSAT ASDEK"
-              :title="$t('sceneries.info.ASDEK')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.ASDEK')"
             />
 
             <img
@@ -240,7 +260,8 @@
               class="icon-info"
               src="/images/icon-unknown.svg"
               alt="icon-unknown"
-              :title="$t('sceneries.info.unknown')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
             />
           </td>
 
@@ -248,7 +269,7 @@
             class="station-users"
             :class="{ inactive: !station.onlineInfo }"
             data-tooltip-type="UsersTooltip"
-            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+            :data-tooltip-content="getUsersTooltipContent(station.onlineInfo?.stationTrains ?? [])"
           >
             <span class="text--primary">{{
               station.onlineInfo?.stationTrains?.length ?? '-'
@@ -318,7 +339,7 @@ import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
 import { useMainStore } from '../../store/mainStore';
-import { Station, Status } from '../../typings/common';
+import { Station, Status, TooltipUserTrain, Train } from '../../typings/common';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
@@ -394,6 +415,15 @@ export default defineComponent({
       else this.activeSorter.dir = 1;
 
       this.activeSorter.headerName = headerName;
+    },
+
+    getUsersTooltipContent(stationTrains: Train[]): string {
+      const usersTrains: TooltipUserTrain[] = stationTrains.map((train) => ({
+        driverName: train.driverName,
+        trainNo: train.trainNo
+      }));
+
+      return JSON.stringify(usersTrains);
     }
   }
 });

src/components/StationsView/utils.ts

@@ -132,22 +132,25 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
     filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
     filters['minOneWay'] > routes.singleOtherNames.length ||
     filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-    // filters['minTwoWay'] > routes.doubleOtherNames.length ||
+    filters['minTwoWay'] > routes.doubleOtherNames.length ||
     filters['minOneWayCatenaryInt'] >
       internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
     filters['minOneWayInt'] >
       internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
     filters['minTwoWayCatenaryInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length ||
+    filters['minTwoWayInt'] >
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == false).length
   );
 }
 
 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
   return (
-    filters['authors'].length > 3 &&
-    !generalInfo.authors
-      ?.map((a) => a.toLocaleLowerCase())
-      .includes(filters['authors'].toLocaleLowerCase())
+    (filters['authors'].length > 3 &&
+      !generalInfo.authors
+        ?.map((a) => a.toLocaleLowerCase())
+        .includes(filters['authors'].toLocaleLowerCase())) ||
+    (filters['projects'].length > 0 && generalInfo.project != filters['projects'])
   );
 }
 
@@ -243,7 +246,7 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
   return a.name.localeCompare(b.name);
 };
 
-export const filterStations = (station: Station, filters: Record<string, any>) => {  
+export const filterStations = (station: Station, filters: Record<string, any>) => {
   if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
     return false;
 

src/components/Tooltip/Tooltip.vue

@@ -13,6 +13,7 @@ import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
+import TrainInfoTooltip from "./TrainInfoTooltip.vue";
 
 const BOX_PADDING_PX = 20;
 
@@ -23,7 +24,8 @@ export default defineComponent({
     BaseTooltip,
     SpawnsTooltip,
     UsersTooltip,
-    HtmlTooltip
+    HtmlTooltip,
+    TrainInfoTooltip
   },
 
   data() {

src/components/Tooltip/TrainInfoTooltip.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="tooltip-content">
+    <span v-if="trainInfo">
+      <b v-if="trainInfo.timetableData" style="text-transform: uppercase">
+        <span class="text--primary">{{ trainInfo.timetableData.category }}</span>
+        {{ getCategoryExplanation(trainInfo.timetableData.category) }}
+      </b>
+
+      <div class="text--primary">
+        <b>{{ trainInfo.stockList[0] }}</b> &bull; {{ trainInfo.length }}m &bull;
+        {{ (trainInfo.mass / 1000).toFixed(2) }}t
+        <span v-if="trainInfo.timetableData">
+          &bull; vRJ:
+          {{
+            trainInfo.timetableData?.trainMaxSpeed ||
+            getStockSpeedLimit(trainInfo.stockList, trainInfo.mass)
+          }}km/h
+        </span>
+        <span v-else class="text--grayed font--italic">
+          &bull; vMax:
+          {{ getStockSpeedLimit(trainInfo.stockList, trainInfo.mass) }}km/h
+        </span>
+      </div>
+
+      <div class="text--grayed">
+        {{ displayTrainPosition(trainInfo) }} - {{ trainInfo.speed }}km/h
+        <span v-if="!trainInfo.online" style="color: salmon">
+          - offline {{ lastSeenMessage(trainInfo.lastSeen) }}</span
+        >
+      </div>
+
+      <div></div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  mixins: [trainCategoryMixin, trainInfoMixin],
+
+  data: () => ({
+    tooltipStore: useTooltipStore(),
+    mainStore: useMainStore()
+  }),
+
+  computed: {
+    trainInfo() {
+      if (this.tooltipStore.content == '') return null;
+
+      // Passed "content" string should be the desired train's ID
+      return this.mainStore.trainList.find((t) => t.id === this.tooltipStore.content);
+    },
+
+    lastSceneryStatus() {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/Tooltip/UsersTooltip.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
-import { Train } from '../../typings/common';
+import { TooltipUserTrain } from '../../typings/common';
 
 export default defineComponent({
   data() {
@@ -23,7 +23,7 @@ export default defineComponent({
     trains() {
       if (this.tooltipStore.content == '') return [];
 
-      const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as TooltipUserTrain[];
       return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
     }
   }

src/components/TrainsView/TrainInfo.vue

@@ -110,7 +110,10 @@
           {{ $t('trains.scenery-offline') }}
         </div>
 
-        <div v-if="!train.online" class="train-badge offline">
+        <div
+          v-if="!train.online && train.lastSeen <= Date.now() - 60000"
+          class="train-badge offline"
+        >
           <i class="fa-solid fa-user-slash"></i>
           Offline {{ lastSeenMessage(train.lastSeen) }}
         </div>
@@ -132,7 +135,11 @@
         <img src="/images/icon-speed.svg" alt="speed icon" />
         {{ train.speed }} km/h
 
-        <span v-if="stockSpeedLimit != Infinity">
+        <span v-if="train.timetableData">
+          &bull; vRJ: {{ train.timetableData.trainMaxSpeed }} km/h
+        </span>
+
+        <span v-else-if="stockSpeedLimit != Infinity">
           &bull;
           <em
             class="text--grayed"
@@ -216,57 +223,9 @@ export default defineComponent({
 
   computed: {
     stockSpeedLimit() {
-      let isPassenger = true;
-
-      // Check the whole consist speed limit
-      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName, i) => {
-        const [vehicleName, vehicleCargo] = stockName.split(':');
-
-        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
-
-        if (!vehicleData) return acc;
-
-        let vehicleSpeed = vehicleData.group.speed;
-
-        if (vehicleData.type == 'wagon-freight') {
-          isPassenger = false;
-
-          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
-            vehicleSpeed = vehicleData.group.speedLoaded;
-          }
-        }
-
-        return Math.min(vehicleSpeed, acc);
-      }, Infinity);
-
-      // Check the head vehicle speed limit
-      const headLocoName = this.train.stockList[0];
-      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
-
-      // Omit speed check for head vehicle if there's no data for it
-      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
-        return vehicleMaxSpeed;
-
-      const massSpeeds =
-        headLocoVehicleData.group.massSpeeds[
-          this.train.stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
-        ];
-
-      // Omit speed check if there's no data on mass speeds
-      if (!massSpeeds) return vehicleMaxSpeed;
-
-      // Number type for locomotives alone
-      if (typeof massSpeeds === 'number') return massSpeeds;
-
-      // Record type for passenger or cargo, find the closest range
-      const massKey = Object.keys(massSpeeds).findLast(
-        (massKey) => this.train.mass >= Number(massKey)
-      );
-
-      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
-
-      return Math.min(massMaxSpeed, vehicleMaxSpeed);
+      return this.getStockSpeedLimit(this.train.stockList, this.train.mass);
     },
+
     journalRouteLocation() {
       return {
         path: '/journal/timetables',
@@ -394,6 +353,7 @@ export default defineComponent({
 .status-badges {
   display: flex;
   flex-wrap: wrap;
+  margin-left: 0.25em;
 
   gap: 0.25em;
 

src/components/TrainsView/TrainOptions.vue

@@ -30,17 +30,22 @@
             </div>
 
             <div class="search-box">
-              <select
-                class="search-input"
-                name="active-trains"
-                id="active-trains"
-                v-model="searchedDriver"
-              >
-                <option value="">{{ $t('options.select-driver') }}</option>
+              <datalist id="search-active-driver">
                 <option v-for="driverName in activeDriverNames" :value="driverName">
                   {{ driverName }}
                 </option>
-              </select>
+              </datalist>
+
+              <input
+                class="search-input"
+                list="search-active-driver"
+                name="search-active-driver"
+                id="search-active-driver"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+              />
 
               <button class="btn btn--action search-exit" @click="onInputClear('driver')">
                 <img src="/images/icon-exit.svg" alt="Trains search clear icon" />

src/components/TrainsView/TrainSchedule.vue

@@ -12,8 +12,16 @@
           :data-delayed="stop.departureDelay > 0"
           :data-stop-type="stop.type"
           :data-is-active="stop.isActive"
-          :data-track-count-departure="stop.departureLineInfo?.routeTracks ?? 2"
-          :data-track-count-arrival="stop.arrivalLineInfo?.routeTracks ?? 2"
+          :data-track-count-departure="
+            stop.departureLineInfo?.routeTracks ??
+            stop.nextPointRef?.arrivalLineInfo?.routeTracks ??
+            2
+          "
+          :data-track-count-arrival="
+            stop.arrivalLineInfo?.routeTracks ??
+            scheduleStops[i - 1]?.departureLineInfo?.routeTracks ??
+            2
+          "
         >
           <span class="stop_info">
             <span class="distance">
@@ -60,7 +68,8 @@
                     <span>
                       |
                       {{
-                        stop.departureLineInfo.routeSpeedExit
+                        stop.departureLineInfo.routeSpeedExit &&
+                        stop.departureLineInfo.routeSpeedExit != stop.departureLineInfo.routeSpeed
                           ? `${stop.departureLineInfo.routeSpeedExit} (${stop.departureLineInfo.routeSpeed})`
                           : stop.departureLineInfo.routeSpeed
                       }}</span
@@ -113,10 +122,16 @@
                   <span> {{ stop.nextPointRef.arrivalLine }}</span>
 
                   <span v-if="stop.nextPointRef.arrivalLineInfo">
-                    <span> | {{ stop.nextPointRef.arrivalLineInfo!.routeSpeed }}</span>
-                    <span v-if="stop.nextPointRef.arrivalLineInfo!.routeSpeedExit"
-                      >({{ stop.nextPointRef.arrivalLineInfo!.routeSpeedExit }})</span
+                    <span> | {{ stop.nextPointRef.arrivalLineInfo.routeSpeed }}</span>
+                    <span
+                      v-if="
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit &&
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit !=
+                          stop.nextPointRef.arrivalLineInfo.routeSpeed
+                      "
                     >
+                      ({{ stop.nextPointRef.arrivalLineInfo.routeSpeedExit }})
+                    </span>
 
                     <img
                       :src="
@@ -186,26 +201,28 @@ export default defineComponent({
       const sceneryData =
         this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;
 
-      if (!sceneryData || !sceneryData.generalInfo) return null;
-
       const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
         (sc) => sc.stationName == pathEl.stationName
       );
 
-      const arrivalLineData = pathEl.arrivalRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.arrivalRouteExt
-          ) ?? null)
+      const arrivalLineData = sceneryData?.generalInfo
+        ? pathEl.arrivalRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.arrivalRouteExt
+            ) ?? null)
+          : null
         : null;
 
-      const departureLineData = pathEl.departureRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.departureRouteExt
-          ) ?? null)
+      const departureLineData = sceneryData?.generalInfo
+        ? pathEl.departureRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.departureRouteExt
+            ) ?? null)
+          : null
         : null;
 
       return {
-        generalInfo: sceneryData.generalInfo,
+        generalInfo: sceneryData?.generalInfo ?? null,
         isOnline:
           activeScenery &&
           (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
@@ -234,7 +251,7 @@ export default defineComponent({
       let isActive = false;
 
       if (pathData?.departureLineData) {
-        // arrivalLineInfo = pathData.departureLineData;
+        arrivalLineInfo = pathData.departureLineData;
         departureLineInfo = pathData.departureLineData;
       }
 
@@ -245,22 +262,16 @@ export default defineComponent({
           isExternal = true;
 
           departureLineInfo = pathData?.arrivalLineData ?? null;
-
-          if (pathData?.arrivalLineData) {
-            arrivalLineInfo = pathData.arrivalLineData;
-          }
+          arrivalLineInfo = pathData.arrivalLineData;
         }
 
-        let correctedDepartureLineData: StationRoutesInfo | null = null;
-
         const internalRouteInfo = stop.departureLine
-          ? pathData?.generalInfo.routes.all.find(
+          ? pathData?.generalInfo?.routes.all.find(
               (route) => route.isInternal && route.routeName == stop.departureLine
             )
           : undefined;
 
         if (internalRouteInfo) {
-          correctedDepartureLineData = internalRouteInfo;
           departureLineInfo = internalRouteInfo;
         }
 

src/components/TrainsView/TrainStats.vue

@@ -13,10 +13,10 @@
 
     <transition name="dropdown-anim">
       <div class="dropdown_wrapper" v-if="showOptions">
-        <h1 class="text--primary">
+        <h2 class="stats-title text--primary">
           <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
           {{ $t('train-stats.title') }}
-        </h1>
+        </h2>
 
         <hr style="margin: 0.5em 0" />
 
@@ -229,7 +229,7 @@ export default defineComponent({
 @use '../../styles/badge';
 @use '../../styles/responsive';
 
-h1 img {
+.stats-title img {
   vertical-align: text-bottom;
 }
 
@@ -257,7 +257,7 @@ h3 {
     text-align: center;
   }
 
-  h1 {
+  .stats-title {
     text-align: center;
   }
 }

src/locales/en.json

@@ -23,6 +23,15 @@
     "bottom-text": "Enjoy!\n~Spythere",
     "button-confirm": "Start using the app!"
   },
+  "migrate-info": {
+    "tooltip-content": "Information about migration of\nStacjownik site!",
+    "header-text": "Attention!",
+    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
+    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
+    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
+  },
   "donations": {
     "button-title": "TOSS A COIN",
     "header": "Toss a coin to Stacjownik!",
@@ -76,6 +85,7 @@
     "tooltip-driver-offline": "Driver is offline",
     "tooltip-scenery-offline": "Scenery is offline",
     "pojazdownik-link-content": "POJAZDOWNIK",
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
     "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
   },
   "footer": {
@@ -142,7 +152,7 @@
     "title": "Control type",
     "SPK": "SPK",
     "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "ręczne": "manual",
     "ręczne+SPK": "manual + SPK",
@@ -153,7 +163,7 @@
     "abbrevs": {
       "SPK": "SPK",
       "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
       "SPE": "SPE",
       "ręczne": "R",
       "ręczne+SPK": "R",
@@ -271,6 +281,7 @@
     "SCS": "SCS",
     "SCS-R": "SCS + MANUAL",
     "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "manual": "MANUAL",
     "mechanical": "MECHANICAL",
@@ -304,10 +315,9 @@
       "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
       "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
     },
-    "sceneries-search": "SCENERY SEARCH:",
-    "sceneries-placeholder": "Enter scenery name...",
-    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
-    "authors-placeholder": "Enter the author nickname...",
+    "sceneries-placeholder": "Search for scenery",
+    "authors-placeholder": "Scenery author (other filters apply)",
+    "projects-placeholder": "Scenery project (other filters apply)",
     "search-button-title": "SEARCH",
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
@@ -337,18 +347,20 @@
     },
     "info": {
       "control-type": "Control type: ",
-      "signals-type": "Signals type: ",
-      "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
+      "signals-type": "Signalling type: ",
+      "SBL": "A scenery with automatic block signalling (ABS/SBL) on routes: ",
       "SUP": "Requires the SUP program (level crossing remote control)",
-      "ASDEK": "Requires the ASDEK program (defect detection of moving rolling stock)",
+      "ASDEK": "ASDEK program available (defect detection of moving rolling stock)",
       "TWB-all": "This scenery has two-way route blockade on all routes",
       "TWB-routes": "This scenery has two-way route blockade on following routes: ",
-      "default": "This scenery is available by default",
-      "non-public": "This scenery is not public",
-      "unavailable": "This scenery is unavailable",
-      "abandoned": "This scenery is no longer supported by its creators",
-      "unknown": "This scenery isn't recognizable right now",
-      "real": "Scenery with real lines: ",
+      "default": "Scenery available in the game package",
+      "nonDefault": "Scenery available to download from the forum site",
+      "req-level": "all dispatcher levels | requries {lvl} dispatcher lvl | requires {lvl} dispatcher lvl",
+      "non-public": "Non-public scenery",
+      "unavailable": "Unavailable scenery",
+      "abandoned": "Abandoned scenery",
+      "unknown": "Unknown scenery",
+      "real": "Scenery with real Polish routes: ",
       "double-track-routes-catenary": "Electrified double-track routes count: ",
       "single-track-routes-catenary": "Electrified single-track routes count: ",
       "double-track-routes-other": "Not electrified double-track routes count: ",
@@ -557,12 +569,13 @@
     "option-active-timetables": "Active timetables",
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
-    "timetable-via": "ALL TIMETABLES",
+    "timetable-includesScenery": "ALL TIMETABLES",
+    "timetable-via": "PASSES THROUGH",
     "timetable-issuedFrom": "BEGINS HERE",
-    "timetable-terminatingAt": "TERMINATES HERE",
+    "timetable-terminatingAt": "ENDS HERE",
     "timetable-issued-date": "Issued",
     "timetable-issued-by": " by:",
-    "timetable-issued-for": " for driver:",
+    "timetable-issued-for": " for:",
     "dispatcher-rate": "Rate:",
     "dispatcher-status-changes": "Status changes:",
     "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
@@ -591,14 +604,14 @@
     "terminates": "TERMINATES\nHERE",
     "from": "Arrives from",
     "to": "Departs to",
-    "desc-beginning": "The train begins here",
-    "desc-arriving": "<i>Arrives from: <b>{prevStationName} ({prevDepartureLine})</b></i>",
-    "desc-online": "On scenery / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-stopped": "On scenery - stopped / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-next-arrival": "On scenery / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed": "On scenery / <i>departed to: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed-ends": "On scenery / <i>departed to: <b>{nextStationName}</b></i>",
-    "desc-departed-away": "<i>Departed to: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-beginning": "Outside scenery / begins here",
+    "desc-arriving": "Arrives from: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "On scenery - stopped / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "On scenery / departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "On scenery / departed to: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
     "desc-end": "The train terminates here",
     "desc-terminated": "The train has been terminated"
   },
@@ -607,4 +620,4 @@
     "search-train": "Train no.",
     "search-driver": "Driver name"
   }
-}
+}

src/locales/pl.json

@@ -23,6 +23,14 @@
     "bottom-text": "Miłego korzystania\n~Spythere",
     "button-confirm": "Zacznij korzystać z aplikacji!"
   },
+  "migrate-info": {
+    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
+    "header-text": "Uwaga!",
+    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
+    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
+  },
   "donations": {
     "button-title": "GROSZA DAJ",
     "header": "Grosza daj Stacjownikowi!",
@@ -73,6 +81,7 @@
     "tooltip-driver-offline": "Maszynista offline",
     "tooltip-scenery-offline": "Sceneria offline",
     "pojazdownik-link-content": "POJAZDOWNIK",
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
     "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
   },
   "footer": {
@@ -139,7 +148,7 @@
     "title": "Sterowanie",
     "SPK": "SPK",
     "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "ręczne": "ręczne",
     "ręczne+SPK": "ręczne z SPK",
@@ -150,7 +159,7 @@
     "abbrevs": {
       "SPK": "SPK",
       "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
       "SPE": "SPE",
       "ręczne": "R",
       "ręczne+SPK": "R",
@@ -269,6 +278,7 @@
     "SCS": "SCS",
     "SCS-R": "SCS + RĘCZNE",
     "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "manual": "RĘCZNE",
     "SUP": "SUP (RASP-UZK)",
@@ -302,10 +312,9 @@
       "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
       "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
     },
-    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
-    "sceneries-placeholder": "Wpisz nazwę scenerii...",
-    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
-    "authors-placeholder": "Wpisz nick autora...",
+    "sceneries-placeholder": "Wyszukaj scenerię",
+    "authors-placeholder": "Autor scenerii (uwzględnia inne filtry)",
+    "projects-placeholder": "Projekt scenerii (uwzględnia inne filtry)",
     "search-button-title": "SZUKAJ",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
@@ -338,8 +347,10 @@
       "signals-type": "Sygnalizacja: ",
       "SBL": "Sceneria posiada SBL na szlakach: ",
       "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
-      "ASDEK": "Wymaga programu ASDEK do detekcji stanów awaryjnych taboru w ruchu",
+      "ASDEK": "Dostępny program ASDEK do detekcji stanów awaryjnych taboru w ruchu",
       "default": "Sceneria dostępna domyślnie w paczce z grą",
+      "nonDefault": "Sceneria dostępna do pobrania z forum symulatora",
+      "req-level": "ogólnodostępna | od {lvl} poz. DR | od {lvl} poz. DR",
       "non-public": "Sceneria niepubliczna",
       "unavailable": "Sceneria niedostępna",
       "abandoned": "Sceneria wycofana z rozgrywki",
@@ -543,12 +554,13 @@
     "option-active-timetables": "Aktywne rozkłady jazdy",
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
-    "timetable-via": "WSZYSTKIE RJ",
+    "timetable-includesScenery": "WSZYSTKIE RJ",
+    "timetable-via": "PRZEJEŻDŻA",
     "timetable-issuedFrom": "ROZPOCZYNA BIEG",
     "timetable-terminatingAt": "KOŃCZY BIEG",
-    "timetable-issued-date": "Wystawiony",
+    "timetable-issued-date": "Wystawiony: ",
     "timetable-issued-by": " przez:",
-    "timetable-issued-for": " dla maszynisty:",
+    "timetable-issued-for": " dla:",
     "dispatcher-rate": "Ocena:",
     "dispatcher-status-changes": "Zmiany statusów:",
     "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
@@ -577,18 +589,18 @@
     "terminates": "KOŃCZY BIEG",
     "from": "Przyjedzie z",
     "to": "Odjeżdża do",
-    "desc-beginning": "Pociąg rozpoczyna bieg",
-    "desc-arriving": "<i>Przyjedzie z: <b>{prevStationName} ({prevDepartureLine})</b></i>",
-    "desc-online": "Na scenerii / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-stopped": "Na scenerii - postój / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-next-arrival": "Na scenerii / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed": "Na scenerii / <i>odprawiony do: <b>{nextStationName} ({nextArrivalLine})</b></i>",
-    "desc-departed-ends": "Na scenerii / <i>odprawiony do: <b>{nextStationName}</b></i>",
-    "desc-departed-away": "<i>Odprawiony do: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-beginning": "Poza scenerią / rozpoczyna bieg",
+    "desc-arriving": "Przyjedzie z: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "Na scenerii - postój / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "Na scenerii / odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "Na scenerii / odprawiony do: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
     "desc-end": "Pociąg kończy bieg",
     "desc-terminated": "Pociąg zakończył bieg"
   },
   "history": {
     "title": "DZIENNIK ROZKŁADÓW JAZDY"
   }
-}
+}

src/managers/stationFilterManager.ts

@@ -31,6 +31,7 @@ export const initFilters = {
   mechanical: false,
   'SPK-M': false,
   'SCS-M': false,
+  'SCS-SPK': false,
   modern: false,
   semaphores: false,
   historical: false,
@@ -61,12 +62,14 @@ export const initFilters = {
   maxLevel: 20,
   minOneWay: 0,
   minOneWayCatenary: 0,
-  minTwoWayCatenary: 0,
   minOneWayInt: 0,
   minOneWayCatenaryInt: 0,
+  minTwoWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWayInt: 0,
   minTwoWayCatenaryInt: 0,
-  // minTwoWay: 0,
-  authors: ''
+  authors: '',
+  projects: ''
 };
 
 export const sliderStates = [
@@ -76,12 +79,12 @@ export const sliderStates = [
   { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
   { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
   { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
   { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
   { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }
+  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
 ];
 
 export type StationFilter = keyof typeof initFilters;
@@ -95,7 +98,18 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
   stationType: ['junction', 'nonJunction'],
   access: ['nonPublic', 'unavailable', 'abandoned'],
   addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
-  control: ['SPK', 'SCS', 'SPE', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'],
+  control: [
+    'SPK',
+    'SCS',
+    'SPE',
+    'SCS-SPK',
+    'SPK-M',
+    'SCS-M',
+    'mechanical',
+    'SPK-R',
+    'SCS-R',
+    'manual'
+  ],
   blockades: ['SBL', 'PBL'],
   signals: ['modern', 'semaphores', 'mixed', 'historical']
 };
@@ -116,7 +130,7 @@ export function setupFilters(currentFilters: Record<string, any>) {
   });
 }
 
-export function getChangedFilters(currentFilters: Record<string, any>): string[] {  
+export function getChangedFilters(currentFilters: Record<string, any>): string[] {
   return (
     Object.keys(currentFilters).filter(
       (filterKey) =>

src/mixins/trainInfoMixin.ts

@@ -1,45 +1,10 @@
 import { defineComponent } from 'vue';
 import { Train, TrainStop } from '../typings/common';
+import { useApiStore } from '../store/apiStore';
 
 export default defineComponent({
   data: () => ({
-    STATS: {
-      main: [
-        {
-          name: 'speed',
-          unit: 'km/h'
-        },
-        {
-          name: 'length',
-          unit: 'm'
-        },
-        {
-          name: 'mass',
-          unit: 't',
-          multiplier: 0.001
-        }
-      ],
-
-      position: [
-        {
-          name: 'scenery',
-          prop: 'currentStationName'
-        },
-        {
-          name: 'route',
-          prop: 'connectedTrack'
-        },
-        {
-          name: 'signal',
-          prop: 'signal'
-        },
-        {
-          name: 'distance',
-          prop: 'distance',
-          unit: 'm'
-        }
-      ]
-    }
+    apiStore: useApiStore()
   }),
 
   methods: {
@@ -150,6 +115,57 @@ export default defineComponent({
       if (distance < 1000) return `${distance}m`;
 
       return `${(distance / 1000).toPrecision(2)}km`;
+    },
+
+    getStockSpeedLimit(stockList: string[], trainMass: number) {
+      let isPassenger = true;
+
+      // Check the whole consist speed limit
+      const vehicleMaxSpeed = stockList.reduce((acc, stockName, i) => {
+        const [vehicleName, vehicleCargo] = stockName.split(':');
+
+        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+
+        if (!vehicleData) return acc;
+
+        let vehicleSpeed = vehicleData.group.speed;
+
+        if (vehicleData.type == 'wagon-freight') {
+          isPassenger = false;
+
+          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
+            vehicleSpeed = vehicleData.group.speedLoaded;
+          }
+        }
+
+        return Math.min(vehicleSpeed, acc);
+      }, Infinity);
+
+      // Check the head vehicle speed limit
+      const headLocoName = stockList[0];
+      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
+
+      // Omit speed check for head vehicle if there's no data for it
+      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
+        return vehicleMaxSpeed;
+
+      const massSpeeds =
+        headLocoVehicleData.group.massSpeeds[
+          stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
+        ];
+
+      // Omit speed check if there's no data on mass speeds
+      if (!massSpeeds) return vehicleMaxSpeed;
+
+      // Number type for locomotives alone
+      if (typeof massSpeeds === 'number') return massSpeeds;
+
+      // Record type for passenger or cargo, find the closest range
+      const massKey = Object.keys(massSpeeds).findLast((massKey) => trainMass >= Number(massKey));
+
+      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
+
+      return Math.min(massMaxSpeed, vehicleMaxSpeed);
     }
   }
 });

src/store/mainStore.ts

@@ -11,8 +11,11 @@ import {
 } from '../typings/common';
 import { useApiStore } from './apiStore';
 import { MainStoreState } from './typings';
+import i18n from '../i18n';
+import StorageManager from '../managers/storageManager';
 
 const checkpointsTrains: Map<string, CheckpointTrain[]> = new Map();
+const unknownSceneryCheckpoints: Map<string, Set<string>> = new Map();
 const sceneriesTrains: Map<string, Train[]> = new Map();
 
 export const useMainStore = defineStore('mainStore', {
@@ -33,15 +36,27 @@ export const useMainStore = defineStore('mainStore', {
       chosenModalTrainId: undefined,
 
       modalLastClickedTarget: null,
-      currentLocale: 'pl'
+      currentLocale: 'pl',
+
+      isMigrateInfoCardOpen: false
     }) as MainStoreState,
 
+  actions: {
+    changeLocale(localeName: string) {
+      (i18n.global.locale.value as any) = localeName;
+      this.currentLocale = localeName;
+
+      StorageManager.setStringValue('lang', localeName);
+    }
+  },
+
   getters: {
     trainList(): Train[] {
       const apiStore = useApiStore();
 
       checkpointsTrains.clear();
       sceneriesTrains.clear();
+      unknownSceneryCheckpoints.clear();
 
       const dateNow = new Date();
 
@@ -133,8 +148,13 @@ export const useMainStore = defineStore('mainStore', {
 
           // Checkpoints trains map
           if (trainObj.timetableData) {
-            let currentSceneryIndex = 0;
             const timetablePath = trainObj.timetableData.timetablePath;
+            let currentSceneryIndex = 0;
+
+            let currentSceneryData: Station | null =
+              this.stationList.find(
+                (s) => s.name == timetablePath[currentSceneryIndex].stationName
+              ) ?? null;
 
             trainObj.timetableData.followingStops.forEach((stop, i) => {
               if (/strong|podg|pe/.test(stop.stopName)) {
@@ -153,16 +173,41 @@ export const useMainStore = defineStore('mainStore', {
                   timetablePathElement: timetablePath[currentSceneryIndex]
                 };
 
+                // Adding missing sceneries checkpoints as a fallback when scenery data is missing (and "generalInfo" is unavailable)
+                if (!currentSceneryData) {
+                  const sceneryCheckpointsSet = unknownSceneryCheckpoints.get(
+                    checkpointTrain.timetablePathElement.stationName
+                  );
+
+                  if (!sceneryCheckpointsSet) {
+                    unknownSceneryCheckpoints.set(
+                      checkpointTrain.timetablePathElement.stationName,
+                      new Set([stop.stopNameRAW])
+                    );
+                  } else {
+                    sceneryCheckpointsSet.add(stop.stopNameRAW);
+                  }
+                }
+
+                // Adding trains to their corresponding checkpoints
                 if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
                   checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
                     ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
                     checkpointTrain
                   ]);
-                } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+                } else {
+                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+                }
               }
 
-              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine)
+              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine) {
                 currentSceneryIndex++;
+
+                currentSceneryData =
+                  this.stationList.find(
+                    (s) => s.name == timetablePath[currentSceneryIndex].stationName
+                  ) ?? null;
+              }
             });
           }
 
@@ -222,7 +267,9 @@ export const useMainStore = defineStore('mainStore', {
               all: 0,
               confirmed: 0,
               unconfirmed: 0
-            }
+            },
+
+            missingCheckpoints: []
           });
         });
 
@@ -266,7 +313,9 @@ export const useMainStore = defineStore('mainStore', {
             all: 0,
             confirmed: 0,
             unconfirmed: 0
-          }
+          },
+
+          missingCheckpoints: []
         });
 
         return list;
@@ -277,7 +326,7 @@ export const useMainStore = defineStore('mainStore', {
       for (let i = 0, n = allActiveSceneries.length; i < n; i++) {
         const scenery = allActiveSceneries[i];
 
-        const station = this.stationList.find((s) => s.name === scenery.name);
+        let station = this.stationList.find((s) => s.name === scenery.name);
 
         let checkpointsSet: Set<string> = new Set();
 
@@ -293,6 +342,18 @@ export const useMainStore = defineStore('mainStore', {
         scenery.stationTrains =
           sceneriesTrains.get(scenery.name)?.filter((sc) => sc.region == this.region.id) ?? [];
 
+        // Missing checkpoints as a fallback for sceneries without generalInfo & checkpoints property
+        const missingCheckpointsToAdd = unknownSceneryCheckpoints.get(scenery.name);
+
+        if (missingCheckpointsToAdd) {
+          [...missingCheckpointsToAdd].forEach((cp) => {
+            if (cp.toLowerCase() == scenery.name.toLowerCase()) return;
+
+            checkpoints.push(cp);
+            scenery.missingCheckpoints.push(cp);
+          });
+        }
+
         const uniqueTrainIds: string[] = [];
         checkpoints.forEach((cp) => {
           const scheduledTrains = checkpointsTrains.get(cp.toLowerCase());

src/store/tooltipStore.ts

@@ -8,7 +8,8 @@ export const tooltipKeys = [
   'VehiclePreviewTooltip',
   'SpawnsTooltip',
   'UsersTooltip',
-  'HtmlTooltip'
+  'HtmlTooltip',
+  'TrainInfoTooltip'
 ] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];
@@ -33,6 +34,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
       this.content = '';
     },
 
+    // Tooltip handler reading attributes of DOM elements
     handle(e: MouseEvent) {
       const targetEl = e
         .composedPath()
@@ -44,6 +46,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
         return;
       }
 
+      // Tooltip content is a string but may be parsed to objects / html in corresponding tooltip type components
       const tooltipType = targetEl.getAttribute('data-tooltip-type');
       const tooltipContent = targetEl.getAttribute('data-tooltip-content');
 

src/store/typings.ts

@@ -13,6 +13,7 @@ export interface MainStoreState {
   chosenModalTrainId?: string;
   modalLastClickedTarget: EventTarget | null;
   currentLocale: string;
+  isMigrateInfoCardOpen: boolean;
 }
 
 export interface StationJSONData {
@@ -23,6 +24,7 @@ export interface StationJSONData {
   project: string;
   projectUrl: string;
   hash: string;
+  hidden: boolean;
 
   reqLevel: number;
 

src/styles/_global.scss

@@ -225,6 +225,12 @@ ul {
   }
 }
 
+.font {
+  &--italic {
+    font-style: italic;
+  }
+}
+
 button,
 a.a-button {
   cursor: pointer;

src/styles/_icons.scss

@@ -36,6 +36,6 @@
   }
 
   &.SCS-SPK {
-    color: white;
+    color: #aefff8;
   }
 }

src/typings/common.ts

@@ -118,6 +118,7 @@ export interface StationGeneralInfo {
   availability: Availability;
   routes: StationRoutes;
   checkpoints: string[];
+  hidden: boolean;
 }
 
 export interface StationRoutes {
@@ -170,6 +171,7 @@ export interface ActiveScenery {
     confirmed: number;
     unconfirmed: number;
   };
+  missingCheckpoints: string[];  
 }
 
 export interface ScenerySpawn {
@@ -253,3 +255,25 @@ export interface VehicleCargo {
   id: string;
   weight: number;
 }
+
+export interface TooltipUserTrain {
+  driverName: string;
+  trainNo: number;
+}
+
+export interface TooltipTrainInfo {
+  mass: number;
+  length: number;
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  trainNo: number;
+  driverName: string;
+  driverLevel: number;
+  currentStationName: string;
+  currentStationHash: string;
+  headVehicleName: string;
+  stockCount: number;
+  trainTimetableCategory?: string;
+}

src/views/StationsView.vue

@@ -13,6 +13,28 @@
         </div>
 
         <div class="topbar-links">
+          <button
+            v-if="isOldStacjownikDomain"
+            class="btn--image migrate-info-button"
+            @click="toggleMigrateInfoCard(true)"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('migrate-info.tooltip-content')}</b>`"
+          >
+            <img :src="`/images/icon-alert-triangle.svg`" alt="show migrate info card" />
+          </button>
+
+          <button
+            class="btn--image lang-button"
+            @click="toggleLocales()"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('app.language-tooltip-content')}</b>`"
+          >
+            <img
+              :src="`/images/icon-${mainStore.currentLocale}.svg`"
+              alt="change language flag icon"
+            />
+          </button>
+
           <a
             class="a-button btn--image gnr-link"
             href="https://generator-td2.web.app/"
@@ -96,6 +118,20 @@ export default defineComponent({
   methods: {
     toggleDonationCard(value: boolean) {
       this.isDonationCardOpen = value;
+    },
+
+    toggleMigrateInfoCard(value: boolean) {
+      this.mainStore.isMigrateInfoCardOpen = value;
+    },
+
+    toggleLocales() {
+      this.mainStore.changeLocale(this.mainStore.currentLocale == 'pl' ? 'en' : 'pl');
+    }
+  },
+
+  computed: {
+    isOldStacjownikDomain() {
+      return location.hostname == 'stacjownik-td2.web.app';
     }
   }
 });
@@ -120,11 +156,12 @@ export default defineComponent({
 
 .stations-topbar {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.5em;
   justify-content: space-between;
 
-  position: relative;
   margin-bottom: 0.5em;
+  position: relative;
 
   & > div {
     display: flex;
@@ -149,6 +186,16 @@ button.donation-button {
   }
 }
 
+button.lang-button {
+  padding: 0 0.5em;
+  background-color: #111;
+}
+
+button.migrate-info-button {
+  padding: 0 0.5em;
+  background-color: var(--clr-primary);
+}
+
 a.pojazdownik-link {
   background-color: #1f263b;
 

tsconfig.node.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

vite.config.ts

@@ -5,7 +5,7 @@ import path from 'path';
 
 export default defineConfig({
   server: { port: 5123, open: true },
-  preview: { port: 4001, open: true },
+  preview: { port: 4001, open: false },
   publicDir: 'public',
   css: {
     preprocessorOptions: {
@@ -21,11 +21,9 @@ export default defineConfig({
     vue(),
     VitePWA({
       registerType: 'autoUpdate',
-      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2}'],
-
       workbox: {
         disableDevLogs: true,
-        globPatterns: ['**/*.{js,css,html,png,svg,jpg}'],
+        globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
         cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
@@ -41,14 +39,5 @@ export default defineConfig({
       },
       devOptions: { enabled: true, suppressWarnings: true }
     })
-  ],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: 'app-[name].js',
-        assetFileNames: 'app-[name].css',
-        chunkFileNames: 'chunk-[name].js'
-      }
-    }
-  }
+  ]
 });