Merge pull request #151 from Spythere/development

v1.31.0

.github/workflows/vps-deploy.yml

@@ -0,0 +1,23 @@
+name: Build & Deploy to VPS
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  PROJECT_NAME: stacjownik-td2
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:    
+      - uses: actions/checkout@v3
+      - name: Build the app
+        run: yarn && yarn build
+      - name: Setup SSH key for connection with the server
+        run: |
+            mkdir -p ~/.ssh
+            echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
+      - name: Send new files
+        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete

api-mock/index.js

@@ -15,8 +15,8 @@ app.get('/api/getSceneries', (_, res) => {
   res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
 });
 
-app.get('/api/getVehicles', (_, res) => {
+app.get('/api/getVehiclesData', (_, res) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
 });
 
 app.get('/api/getDonators', (_, res) => {

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/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
+    <link rel="stylesheet" href="/fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
+    <link rel="stylesheet" href="/fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.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.6",
+  "version": "1.31.0",
   "private": true,
   "type": "module",
   "scripts": {

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

src/App.vue

@@ -7,13 +7,18 @@
 
     <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
 
+    <MigrateInfoCard
+      :is-open="store.isMigrateInfoCardOpen"
+      @toggle-card="closeMigrateInfoCard"
+    ></MigrateInfoCard>
+
     <Tooltip />
 
-    <AppHeader :current-lang="store.currentLocale" @change-lang="changeLang" />
+    <AppHeader />
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
-        <keep-alive exclude="SceneryView">
+        <keep-alive>
           <component :is="Component" :key="$route.name" />
         </keep-alive>
       </router-view>
@@ -47,9 +52,11 @@ 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';
+import MigrateInfoCard from './components/App/MigrateInfoCard.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';
+const MIGRATE_INFO_CARD_SEEN_KEY = 'migrate_info_card_seen';
 
 export default defineComponent({
   components: {
@@ -59,6 +66,7 @@ export default defineComponent({
     AppFooter,
     UpdateCard,
     AppWelcomeCard,
+    MigrateInfoCard,
     Tooltip
   },
 
@@ -71,7 +79,7 @@ export default defineComponent({
     isUpdateCardOpen: false,
     isWelcomeCardOpen: false,
 
-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
+    isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
   }),
 
   created() {
@@ -91,6 +99,7 @@ export default defineComponent({
       this.setupOfflineHandling();
       this.checkAppVersion();
       this.handleQueries();
+      this.handleMigrateInfo();
 
       this.apiStore.setupAPIData();
     },
@@ -101,6 +110,10 @@ export default defineComponent({
       if (query.get('welcomeCard') == '1') {
         this.isWelcomeCardOpen = true;
       }
+
+      if (query.get('migrateCard') == '1') {
+        this.store.isMigrateInfoCardOpen = true;
+      }
     },
 
     async checkAppVersion() {
@@ -159,18 +172,18 @@ export default defineComponent({
       this.apiStore.connectToAPI();
     },
 
-    changeLang(lang: string) {
+    handleMigrateInfo() {
-      this.$i18n.locale = lang;
+      if (location.hostname != 'stacjownik-td2.web.app') return;
-      this.store.currentLocale = lang;
+      if (StorageManager.getBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY) === true) return;
 
-      StorageManager.setStringValue('lang', lang);
+      this.store.isMigrateInfoCardOpen = true;
     },
 
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 
       if (storageLang) {
-        this.changeLang(storageLang);
+        this.store.changeLocale(storageLang);
         return;
       }
 
@@ -179,7 +192,7 @@ export default defineComponent({
       const naviLanguage = window.navigator.language.toString();
 
       if (!naviLanguage.startsWith('pl')) {
-        this.changeLang('en');
+        this.store.changeLocale('en');
         return;
       }
     },
@@ -187,6 +200,11 @@ export default defineComponent({
     closeWelcomeCard() {
       this.isWelcomeCardOpen = false;
       StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
+    },
+
+    closeMigrateInfoCard() {
+      this.store.isMigrateInfoCardOpen = false;
+      StorageManager.setBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY, true);
     }
   }
 });

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/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')">
+        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
-          <img src="/images/icon-en.jpg" alt="" width="45" />
+          <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/App/UpdateCard.vue

@@ -1,6 +1,6 @@
 <template>
   <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
-    <div class="content">
+    <div class="content" tabindex="0" ref="content">
       <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
 
       <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
@@ -13,7 +13,14 @@
       <p class="bottom-info">
         {{ $t('update.info-1') }}
         <br />
-        <span v-html="$t('update.info-2')"></span>
+
+        <i18n-t keypath="update.info-2">
+          <template v-slot:link>
+            <a href="https://github.com/Spythere/stacjownik" target="_blank">{{
+              $t('update.info-2-link-text')
+            }}</a>
+          </template>
+        </i18n-t>
       </p>
     </div>
   </Card>
@@ -51,7 +58,7 @@ export default defineComponent({
   watch: {
     isUpdateCardOpen(val: boolean) {
       this.$nextTick(() => {
-        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+        if (val) (this.$refs['content'] as HTMLElement).focus();
       });
     }
   },
@@ -79,13 +86,18 @@ export default defineComponent({
 }
 
 ::v-deep(h2) {
-  padding: 0.25em 0;
+  margin-top: 1em;
+  padding: 0.5em 0;
   border-bottom: 1px solid #aaa;
 }
 
+::v-deep(h3) {
+  padding: 0.5em 0;
+}
+
 ::v-deep(ul) {
-  list-style: initial;
+  list-style: disc;
-  padding: 1em;
+  padding: 0 1.5em;
   line-height: 1.5em;
 }
 
@@ -105,7 +117,7 @@ export default defineComponent({
 }
 
 button {
-  margin: 0 auto;
+  margin: 0.5em auto;
   padding: 0.5em 0.75em;
   font-size: 1.1em;
 }
@@ -117,5 +129,6 @@ p.bottom-info {
 
 a {
   text-decoration: underline;
+  color: white;
 }
 </style>

src/components/DriverView/DriverTrainCard.vue

@@ -205,7 +205,7 @@ const availableCategories = computed(() => {
   for (const stockName of stockList) {
     const [vehicleName, ...cargoList] = stockName.split(':');
 
-    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
 
     if (!vehicleData) continue;
 

src/components/Global/ActionButton.vue

@@ -1,23 +0,0 @@
-<template>
-  <button class="action-btn btn--filled">
-    <div class="button_content">
-      <slot></slot>
-    </div>
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style lang="scss">
-@use '../../styles/responsive';
-
-.button_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</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"
@@ -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;
+  font-size: 0.85em;
-  margin-bottom: 0.25em;
+  margin: 0 auto;
   padding: 0.25em 0;
 }
 

src/components/JournalView/typings.ts

@@ -10,6 +10,7 @@ export namespace Journal {
     | 'search-train'
     | 'search-date-from'
     | 'search-dispatcher'
+    | 'search-includesScenery'
     | 'search-issuedFrom'
     | 'search-terminatingAt'
     | 'search-via'

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: {
@@ -150,6 +151,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/responsive';
 @use '../../styles/scenery-history-table';
+@use '../../styles/badge';
 
 .scenery-dispatchers-history {
   height: 100%;
@@ -194,7 +196,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.vue

@@ -57,20 +57,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @use '../../styles/responsive';
-@use '../../styles/badge';
-
-h3.section-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-}
 
 .info-lists {
   display: flex;

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/SceneryInfoSpawnList.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="info-spawn-list">
-    <h3 class="spawn-header section-header">
+    <h3 class="spawn-header">
       <img src="/images/icon-spawn.svg" alt="Open spawns icon" />
       &nbsp;{{ $t('scenery.spawns') }} &nbsp;
       <span class="text--primary">{{ onlineScenery?.spawns.length || '0' }}</span>
@@ -53,10 +53,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 ul {
   position: relative;
 }
 
+h3.spawn-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+}
+
 .spawns-anim {
   &-move,
   &-enter-active,

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="info-user-list">
-    <h3 class="user-header section-header">
+    <h3 class="user-header">
       <img src="/images/icon-user.svg" alt="Users icon" />
       &nbsp;{{ $t('scenery.users') }} &nbsp;
       <span class="text--primary">{{ onlineScenery?.stationTrains?.length || 0 }}</span
@@ -111,6 +111,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 $no-timetable: #aaa;
 $departed: springgreen;
 $stopped: #ffa600;
@@ -118,6 +120,17 @@ $online: gold;
 $terminated: salmon;
 $disconnected: slategray;
 
+h3.user-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+}
+
 .info-user-list {
   width: 100%;
 }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -40,36 +40,28 @@
               <span>
                 {{ $t('scenery.timetable-issued-date') }}
                 <b>
-                  {{
+                  {{ parseCreatedDate(timetableHistory, $i18n.locale) }}
-                    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>
                 </b>
               </span>
 
               <span>
                 {{ $t('scenery.timetable-issued-for') }}
-                <b>
                 <router-link
+                  class="journal-link"
                   :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
                 >
                   {{ timetableHistory.driverName }}
                 </router-link>
-                </b>
+              </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/StationsView/StationFilterCard.vue

@@ -21,9 +21,7 @@
             <template v-else>{{ $t('filters.no-changed-filters') }}</template>
           </div>
 
-          <section class="card_sceneries-search">
+          <section class="card_input-search">
-            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
-
             <datalist id="sceneries">
               <option
                 v-for="scenery in sortedStationList"
@@ -32,18 +30,59 @@
               ></option>
             </datalist>
 
-            <form action="javascript:void(0);" @submit="handleSceneriesInput">
             <input
               v-model="chosenSearchScenery"
               id="scenery-search"
               list="sceneries"
               :placeholder="$t('filters.sceneries-placeholder')"
+              @change="handleSceneriesInput"
               @focus="preventKeyDown = true"
               @blur="preventKeyDown = false"
             />
 
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
+            <button class="btn--action" @click="handleSceneriesInput">
-            </form>
+              {{ $t('filters.search-button-title') }}
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <input
+              v-model="filters['lines']"
+              id="line-numbers-search"
+              :placeholder="$t('filters.line-numbers-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
+
+            <button class="btn--action btn--image" @click="resetLineNumbersInput">
+              <img src="/images/icon-exit.svg" alt="reset line numbers search" />
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <select id="author" name="authors" v-model="filters['authors']">
+              <option value="">{{ $t('filters.authors-placeholder') }}</option>
+              <option v-for="(author, i) in authorsOptions" :key="i" :value="author">
+                {{ author }}
+              </option>
+            </select>
+
+            <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">
+            <select id="projects" name="projects" v-model="filters['projects']">
+              <option value="">{{ $t('filters.projects-placeholder') }}</option>
+              <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
+                {{ project }}
+              </option>
+            </select>
+
+            <button class="btn--action btn--image" @click="resetProjectsInput">
+              <img src="/images/icon-exit.svg" alt="reset projects search" />
+            </button>
           </section>
 
           <section class="card_options">
@@ -52,7 +91,7 @@
               v-for="(sectionFilters, sectionKey) in filtersSections"
               :key="sectionKey"
             >
-              <h3 class="text--primary">
+              <h3 class="section-header">
                 <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
                 {{ $t(`filters.sections.${sectionKey}`) }}
                 <button @click="resetSectionFilters(sectionKey)">RESET</button>
@@ -82,7 +121,7 @@
           </section>
 
           <section class="card_timestamp">
-            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
+            <h3 class="hours-section-header">{{ $t('filters.minimum-hours-title') }}</h3>
 
             <span class="clock">
               <button class="btn--action" @click="subHour">-</button>
@@ -97,29 +136,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 +216,6 @@ export default defineComponent({
     sliderStates,
 
     minimumHours: 0,
-    authors: '',
 
     currentRegion: { id: '', value: '' },
 
@@ -255,13 +270,11 @@ export default defineComponent({
         .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
     },
 
-    currentOptionsActive() {
+    authorsOptions() {
-      return true;
-    },
-
-    authorsHint() {
       return this.store.stationList
         .reduce((acc, station) => {
+          if (station.generalInfo?.hidden === true) return acc;
+
           station.generalInfo?.authors?.forEach((author) => {
             if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
               acc.push(author.toLocaleLowerCase());
@@ -270,6 +283,19 @@ 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 +320,16 @@ export default defineComponent({
       this.scrollTop = (e.target as HTMLElement).scrollTop;
     },
 
-    handleAuthorsInput() {
+    resetAuthorsInput() {
-      this.filters['authors'] = this.authors;
+      this.filters['authors'] = '';
+    },
+
+    resetProjectsInput() {
+      this.filters['projects'] = '';
+    },
+
+    resetLineNumbersInput() {
+      this.filters['lines'] = '';
     },
 
     handleSceneriesInput() {
@@ -340,7 +374,6 @@ export default defineComponent({
 
       // Reset local model values
       this.minimumHours = 0;
-      this.authors = '';
 
       // Reset global filters
       Object.keys(this.filters).forEach((filterKey) => {
@@ -384,6 +417,14 @@ export default defineComponent({
 @use '../../styles/animations';
 
 h3.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25em;
+  gap: 0.5em;
+  color: var(--clr-primary);
+}
+
+h3.hours-section-header {
   text-align: center;
   margin: 0.5em 0;
 }
@@ -456,27 +497,20 @@ h3.section-header {
   }
 }
 
-.card_authors-search,
+.card_input-search {
-.card_sceneries-search {
-  margin: 1em 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
-
-  form {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
   gap: 0.5em;
-    width: 100%;
+
-    margin-top: 1em;
+  button {
+    height: 100%;
   }
 
-  input {
+  input,
-    width: 70%;
+  select {
-    max-width: 400px;
+    width: 100%;
     padding: 0.5em;
-    outline: 1px solid white;
+    border: 1px solid #aaa;
   }
 }
 
@@ -548,12 +582,6 @@ h3.section-header {
 }
 
 .option-section h3 {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25em;
-
-  gap: 0.5em;
-
   button {
     padding: 0.15em;
     color: coral;

src/components/StationsView/StationTable.vue

@@ -14,7 +14,7 @@
             class="header-text"
             :class="headerName"
           >
-            <span class="header_wrapper">
+            <div class="header_wrapper">
               <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
 
               <img
@@ -23,7 +23,7 @@
                 :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
                 alt="sort icon"
               />
-            </span>
+            </div>
           </th>
 
           <th
@@ -52,14 +52,14 @@
       </thead>
 
       <tbody>
-        <router-link
+        <tr
           v-for="station in filteredStationList"
           class="a-row"
-          role="row"
+          tabindex="0"
           :key="station.name"
           @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
-          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
+          @click="getSceneryRoute(station)"
-          :to="getSceneryRoute(station)"
+          @keydown.enter="getSceneryRoute(station)"
         >
           <td class="station-name" :class="station.generalInfo?.availability">
             <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -314,7 +314,7 @@
           >
             {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
           </td>
-        </router-link>
+        </tr>
       </tbody>
     </table>
 
@@ -384,15 +384,13 @@ export default defineComponent({
 
   methods: {
     getSceneryRoute(station: Station) {
-      // TODO: Hide tooltips when navigating away
+      this.$router.push({
-
-      return {
         name: 'SceneryView',
         query: {
           station: station.name,
           region: this.$route.query.region || undefined
         }
-      };
+      });
     },
 
     openDonationCard(e: Event) {
@@ -459,17 +457,28 @@ table {
   width: 100%;
   min-width: 1250px;
   white-space: wrap;
+}
 
-  thead {
+thead {
   position: sticky;
   top: 0;
-  }
+  z-index: 50;
+}
 
-  thead tr {
+thead tr {
   background-color: var(--clr-bg3);
-  }
+}
+
+thead th {
+  background-color: var(--clr-bg3);
+  white-space: pre-wrap;
+  padding: 0.5em 0.25em;
+
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 
-  thead th {
   &.station {
     width: 12em;
   }
@@ -506,17 +515,9 @@ table {
       width: 5em;
     }
   }
+}
 
-    padding: 0.5em 0.25em;
+thead th .header_wrapper {
-    background-color: var(--clr-bg3);
-    white-space: pre-wrap;
-
-    cursor: pointer;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    span {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -525,12 +526,9 @@ table {
     width: 1.5em;
     vertical-align: middle;
   }
-    }
-  }
 }
 
-tr,
+tbody tr {
-.a-row {
   background-color: $rowCol;
   vertical-align: middle;
 
@@ -550,6 +548,7 @@ tr,
     cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
+    height: 2.5em;
 
     &.inactive {
       opacity: 0.2;

src/components/StationsView/utils.ts

@@ -145,12 +145,33 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
 }
 
 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
-  return (
+  if (
     filters['authors'].length > 3 &&
-    !generalInfo.authors
+    generalInfo.authors &&
-      ?.map((a) => a.toLocaleLowerCase())
+    !generalInfo.authors.some(
-      .includes(filters['authors'].toLocaleLowerCase())
+      (a) => a.toLocaleLowerCase() == filters['authors'].toLocaleLowerCase()
-  );
+    )
+  )
+    return true;
+
+  if (filters['projects'].length > 0 && generalInfo.project != filters['projects']) return true;
+
+  if (filters['lines'].length > 0) {
+    const linesNumbers = (filters['lines'] as string)
+      .split(',')
+      .map((l) => Number(l))
+      .filter((l) => !isNaN(l) && l != 0);
+
+    if (
+      !generalInfo.lines
+        ?.split(',')
+        .map((l) => Number(l))
+        .some((l) => linesNumbers.includes(l))
+    )
+      return true;
+  }
+
+  return false;
 }
 
 export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -18,9 +18,9 @@
       <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
     </div>
 
-    <div class="vehicle-props" v-if="vehicleData">
+    <div class="vehicle-props" v-if="vehicleGroup">
-      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
+      {{ vehicleGroup.speed }}km/h &bull; {{ vehicleGroup.length }}m &bull;
-      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
+      {{ (vehicleGroup.weight / 1000).toFixed(1) }}t
       <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
     </div>
   </div>
@@ -73,12 +73,18 @@ export default defineComponent({
       return this.tooltipStore.content.split(':')[0];
     },
 
-    vehicleData() {
+    vehicleGroup() {
-      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
+      if (!this.apiStore.vehiclesData) return null;
+
+      const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == this.vehicleName);
+
+      if (!vehicle) return null;
+
+      return this.apiStore.vehiclesData.vehicleGroups.find((g) => g.id == vehicle?.vehicleGroupsId);
     },
 
     vehicleCargo() {
-      const x = this.vehicleData?.group.cargoTypes?.find(
+      const x = this.vehicleGroup?.cargoTypes?.find(
         (c) => c.id == this.tooltipStore.content.split(':')[1]
       );
 

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!",
@@ -60,7 +69,8 @@
     "confirm": "ROGER THAT!",
     "no-data": "No data about the latest app update has been found",
     "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
-    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
+    "info-2": "The full app changelog available on {link}",
+    "info-2-link-text": "the project's GitHub page"
   },
   "app": {
     "sceneries": "SCENERIES",
@@ -76,6 +86,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": {
@@ -189,6 +200,7 @@
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name / #",
     "search-author": "Timetable author name",
+    "search-includesScenery": "Includes scenery name",
     "search-issuedFrom": "Issuing scenery name",
     "search-via": "Via scenery name",
     "search-terminatingAt": "Terminating scenery name",
@@ -305,10 +317,10 @@
       "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
       "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
     },
-    "sceneries-search": "SCENERY SEARCH:",
+    "sceneries-placeholder": "Search for scenery",
-    "sceneries-placeholder": "Enter scenery name...",
+    "line-numbers-placeholder": "Line numbers (separated by commas)",
-    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
+    "authors-placeholder": "Scenery author",
-    "authors-placeholder": "Enter the author nickname...",
+    "projects-placeholder": "Scenery project",
     "search-button-title": "SEARCH",
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
@@ -560,12 +572,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",

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!",
@@ -60,7 +68,8 @@
     "confirm": "PRZYJĄŁEM!",
     "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
     "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
-    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
+    "info-2": "Pełny changelog dostępny na {link}",
+    "info-2-link-text": "GitHubie projektu"
   },
   "app": {
     "sceneries": "SCENERIE",
@@ -73,6 +82,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": {
@@ -186,6 +196,7 @@
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",
+    "search-includesScenery": "Zawiera scenerię",
     "search-issuedFrom": "Sceneria początkowa",
     "search-via": "Przez scenerię",
     "search-terminatingAt": "Sceneria końcowa",
@@ -303,10 +314,10 @@
       "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
       "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
     },
-    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
+    "sceneries-placeholder": "Wyszukaj scenerię",
-    "sceneries-placeholder": "Wpisz nazwę scenerii...",
+    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
-    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
+    "authors-placeholder": "Autor scenerii",
-    "authors-placeholder": "Wpisz nick autora...",
+    "projects-placeholder": "Projekt scenerii",
     "search-button-title": "SZUKAJ",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
@@ -546,12 +557,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",

src/managers/stationFilterManager.ts

@@ -68,7 +68,9 @@ export const initFilters = {
   minTwoWayCatenary: 0,
   minTwoWayInt: 0,
   minTwoWayCatenaryInt: 0,
-  authors: ''
+  authors: '',
+  projects: '',
+  lines: ''
 };
 
 export const sliderStates = [
@@ -83,7 +85,7 @@ export const sliderStates = [
   { 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 },
+  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
 ];
 
 export type StationFilter = keyof typeof initFilters;
@@ -97,7 +99,18 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
   stationType: ['junction', 'nonJunction'],
   access: ['nonPublic', 'unavailable', 'abandoned'],
   addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
-  control: ['SPK', 'SCS', 'SPE', 'SCS-SPK', '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']
 };

src/mixins/trainInfoMixin.ts

@@ -122,19 +122,27 @@ export default defineComponent({
 
       // Check the whole consist speed limit
       const vehicleMaxSpeed = stockList.reduce((acc, stockName, i) => {
+        if (!this.apiStore.vehiclesData) return acc;
+
         const [vehicleName, vehicleCargo] = stockName.split(':');
 
-        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+        const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == vehicleName);
 
-        if (!vehicleData) return acc;
+        if (!vehicle) return acc;
 
-        let vehicleSpeed = vehicleData.group.speed;
+        const vehicleGroup = this.apiStore.vehiclesData.vehicleGroups.find(
+          (g) => g.id == vehicle.vehicleGroupsId
+        );
 
-        if (vehicleData.type == 'wagon-freight') {
+        if (!vehicleGroup) return acc;
+
+        let vehicleSpeed = vehicleGroup.speed;
+
+        if (vehicle.type == 'wagon-freight') {
           isPassenger = false;
 
-          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
+          if (vehicleCargo !== undefined && vehicleGroup.speedLoaded) {
-            vehicleSpeed = vehicleData.group.speedLoaded;
+            vehicleSpeed = vehicleGroup.speedLoaded;
           }
         }
 
@@ -143,14 +151,23 @@ export default defineComponent({
 
       // Check the head vehicle speed limit
       const headLocoName = stockList[0];
-      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
+
+      const headLocoVehicle = this.apiStore.vehiclesData!.vehicles.find(
+        (v) => v.name == headLocoName
+      );
+
+      const headLocoVehicleGroup = this.apiStore.vehiclesData!.vehicleGroups.find(
+        (g) => g.id == headLocoVehicle?.vehicleGroupsId
+      );
+
+      if (!headLocoVehicleGroup) return vehicleMaxSpeed;
 
       // Omit speed check for head vehicle if there's no data for it
-      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
+      if (!headLocoName || !headLocoVehicle || !headLocoVehicleGroup.massSpeeds)
         return vehicleMaxSpeed;
 
       const massSpeeds =
-        headLocoVehicleData.group.massSpeeds[
+        headLocoVehicleGroup.massSpeeds[
           stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
         ];
 

src/store/apiStore.ts

@@ -13,7 +13,7 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     activeData: undefined as API.ActiveData.Response | undefined,
-    vehiclesData: undefined as API.Vehicles.Response | undefined,
+    vehiclesData: undefined as API.VehiclesData.Response | undefined,
 
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
@@ -111,7 +111,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchVehiclesInfo() {
       try {
-        const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');
+        const response = await this.client!.get<API.VehiclesData.Response>('api/getVehiclesData');
 
         this.vehiclesData = response.data;
         this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;

src/store/mainStore.ts

@@ -11,6 +11,8 @@ 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();
@@ -34,9 +36,21 @@ export const useMainStore = defineStore('mainStore', {
       chosenModalTrainId: undefined,
 
       modalLastClickedTarget: null,
-      currentLocale: 'pl'
+      currentLocale: 'pl',
+
+      isMigrateInfoCardOpen: false,
+      pinnedStationNames: []
     }) 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();
@@ -333,8 +347,12 @@ export const useMainStore = defineStore('mainStore', {
         const missingCheckpointsToAdd = unknownSceneryCheckpoints.get(scenery.name);
 
         if (missingCheckpointsToAdd) {
-          checkpoints.push(...missingCheckpointsToAdd);
+          [...missingCheckpointsToAdd].forEach((cp) => {
-          scenery.missingCheckpoints.push(...missingCheckpointsToAdd);
+            if (cp.toLowerCase() == scenery.name.toLowerCase()) return;
+
+            checkpoints.push(cp);
+            scenery.missingCheckpoints.push(cp);
+          });
         }
 
         const uniqueTrainIds: string[] = [];
@@ -414,7 +432,6 @@ export const useMainStore = defineStore('mainStore', {
 
         return {
           name: scenery.name,
-
           generalInfo: {
             ...scenery,
             authors: scenery.authors?.split(',').map((a) => a.trim()),
@@ -429,7 +446,7 @@ export const useMainStore = defineStore('mainStore', {
     },
 
     allStationInfo(): Station[] {
-      const onlineUnsavedStations = this.activeSceneryList
+      const onlineUnsavedStations: Station[] = this.activeSceneryList
         .filter(
           (scenery) =>
             this.stationList.findIndex((st) => st.name == scenery.name) == -1 &&

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

@@ -89,7 +89,8 @@ select {
   font-size: 1em;
 }
 
-input {
+input,
+select {
   background: none;
   color: white;
   font-size: 1em;
@@ -358,3 +359,22 @@ a.a-button {
   background-color: #aaa;
   margin: 0.5em 0;
 }
+
+.g-checkbox {
+  position: relative;
+  display: inline-block;
+
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+}

src/styles/_search-box.scss

@@ -62,7 +62,3 @@
   transform: translateY(-50%);
   padding-right: 0.5em;
 }
-
-select.search-input {
-
-}

src/typings/api.ts

@@ -1,4 +1,4 @@
-import { Status, VehicleData } from './common';
+import { Status, Vehicle, VehicleGroup } from './common';
 
 export enum APIDataStatus {
   OK = 'OK',
@@ -329,8 +329,51 @@ export namespace API {
     export type Response = string[];
   }
 
-  export namespace Vehicles {
+  export namespace VehiclesData {
-    export type Response = VehicleData[];
+    export interface VehicleObject {
+      id: number;
+      name: string;
+      type: string;
+      cabinName: string | null;
+      restrictions: Record<string, any> | null;
+      vehicleGroupsId: number;
+    }
+
+    export interface VehicleGroupObject {
+      id: number;
+      name: string;
+      speed: number;
+      speedLoaded?: number;
+      speedLoco?: number;
+      length: number;
+      weight: number;
+      cargoTypes: VehicleCargo[] | null;
+
+      locoProps: {
+        coldStart: boolean;
+        doubleManned: boolean;
+      } | null;
+
+      massSpeeds: VehicleGroupMassSpeeds | null;
+    }
+
+    export interface VehicleGroupMassSpeeds {
+      passenger: Record<string, number> | null;
+      cargo: Record<string, number> | null;
+      none: number | null;
+    }
+
+    export interface VehicleCargo {
+      id: string;
+      weight: number;
+    }
+
+    export interface Data {
+      vehicles: VehicleObject[];
+      vehicleGroups: VehicleGroupObject[];
+    }
+
+    export type Response = Data;
   }
 }
 

src/typings/common.ts

@@ -1,5 +1,6 @@
 import { RouteLocationRaw } from 'vue-router';
 import { StationJSONData } from '../store/typings';
+import { API } from './api';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
@@ -95,9 +96,7 @@ export interface TrainTimetableData {
 
 export interface Station {
   name: string;
-
   generalInfo?: StationGeneralInfo;
-
   onlineInfo?: ActiveScenery;
 }
 
@@ -107,7 +106,7 @@ export interface StationGeneralInfo {
   abbr: string;
   hash?: string;
   reqLevel: number;
-  lines: string;
+  lines?: string;
   project: string;
   projectUrl?: string;
   signalType: string;
@@ -118,6 +117,7 @@ export interface StationGeneralInfo {
   availability: Availability;
   routes: StationRoutes;
   checkpoints: string[];
+  hidden: boolean;
 }
 
 export interface StationRoutes {
@@ -215,45 +215,8 @@ export interface CheckpointTrain {
 }
 
 // Vehicles Data
-
+export type Vehicle = API.VehiclesData.VehicleObject;
-export interface VehicleData {
+export type VehicleGroup = API.VehiclesData.VehicleGroupObject;
-  id: number;
-  name: string;
-  type: string;
-  cabinName: string | null;
-  restrictions: Record<string, any> | null;
-  vehicleGroupsId: number;
-  group: VehiclesGroup;
-}
-
-export interface VehiclesGroup {
-  id: number;
-  name: string;
-  speed: number;
-  speedLoaded?: number;
-  speedLoco?: number;
-  length: number;
-  weight: number;
-  cargoTypes: VehicleCargo[] | null;
-
-  locoProps: {
-    coldStart: boolean;
-    doubleManned: boolean;
-  } | null;
-
-  massSpeeds: VehicleGroupMassSpeeds | null;
-}
-
-export interface VehicleGroupMassSpeeds {
-  passenger: Record<string, number> | null;
-  cargo: Record<string, number> | null;
-  none: number | null;
-}
-
-export interface VehicleCargo {
-  id: string;
-  weight: number;
-}
 
 export interface TooltipUserTrain {
   driverName: string;

src/views/JournalDispatchers.vue

@@ -280,9 +280,25 @@ export default defineComponent({
       const dateFromString = this.searchersValues['search-date-from'].trim() || undefined;
       const dateToString = this.searchersValues['search-date-to'].trim() || undefined;
 
+      let dateFromISO: string | undefined = undefined;
+      let dateToISO: string | undefined = undefined;
+
+      if (dateFromString) {
+        let dateFrom = new Date(dateFromString);
+        dateFrom.setMinutes(dateFrom.getMinutes() + dateFrom.getTimezoneOffset());
+        dateFromISO = dateFrom.toISOString();
+      }
+
+      if (dateToString) {
+        let dateTo = new Date(dateToString);
+        dateTo.setMinutes(dateTo.getMinutes() + dateTo.getTimezoneOffset());
+        dateToISO = dateTo.toISOString();
+      }
+
       queryParams['dispatcherName'] = dispatcherName;
-      queryParams['dateFrom'] = dateFromString;
+
-      queryParams['dateTo'] = dateToString ? `${dateToString}T23:00:00` : undefined;
+      queryParams['dateFrom'] = dateFromISO;
+      queryParams['dateTo'] = dateToISO;
 
       queryParams['countLimit'] = 30;
 

src/views/JournalTimetables.vue

@@ -132,6 +132,7 @@ interface TimetablesQueryParams {
   issuedFrom?: string;
   terminatingAt?: string;
   via?: string;
+  includesScenery?: string;
 
   countFrom?: number;
   countLimit?: number;
@@ -213,6 +214,7 @@ export default defineComponent({
       'search-train': '',
       'search-driver': '',
       'search-dispatcher': '',
+      'search-includesScenery': '',
       'search-issuedFrom': '',
       'search-via': '',
       'search-terminatingAt': '',
@@ -355,19 +357,25 @@ export default defineComponent({
       const driverName = this.searchersValues['search-driver'].trim() || undefined;
       const trainNo = this.searchersValues['search-train'].trim() || undefined;
       const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-      const dateFrom = this.searchersValues['search-date-from'].trim() || undefined;
+      const dateFromString = this.searchersValues['search-date-from'].trim() || undefined;
+      const includesScenery = this.searchersValues['search-includesScenery'].trim() || undefined;
       const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
       const via = this.searchersValues['search-via'].trim() || undefined;
       const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
       const categoryCode = this.searchersValues['select-categoryCode'].trim() || undefined;
 
-      let dateTo: string | undefined = undefined;
+      let dateFromISO: string | undefined = undefined;
+      let dateToISO: string | undefined = undefined;
 
-      if (dateFrom) {
+      if (dateFromString) {
-        const d = new Date(dateFrom);
+        let dateFrom = new Date(dateFromString);
-        d.setDate(d.getDate() + 1);
+        dateFrom.setMinutes(dateFrom.getMinutes() + dateFrom.getTimezoneOffset());
 
-        dateTo = d.toISOString().split('T')[0];
+        let dateTo = new Date(dateFrom);
+        dateTo.setDate(dateTo.getDate() + 1);
+
+        dateFromISO = dateFrom.toISOString();
+        dateToISO = dateTo.toISOString();
       }
 
       const queryParams: TimetablesQueryParams = {};
@@ -430,8 +438,9 @@ export default defineComponent({
       queryParams['countLimit'] = undefined;
 
       queryParams['authorName'] = authorName;
-      queryParams['dateFrom'] = dateFrom;
+      queryParams['dateFrom'] = dateFromISO;
-      queryParams['dateTo'] = dateTo;
+      queryParams['dateTo'] = dateToISO;
+      queryParams['includesScenery'] = includesScenery;
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['terminatingAt'] = terminatingAt;
       queryParams['via'] = via;

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;
 

vite.config.ts

@@ -4,8 +4,8 @@ import { VitePWA } from 'vite-plugin-pwa';
 import path from 'path';
 
 export default defineConfig({
-  server: { port: 5123, open: true },
+  server: { port: 5123, open: false },
-  preview: { port: 4001, open: true },
+  preview: { port: 4001, open: false },
   publicDir: 'public',
   css: {
     preprocessorOptions: {
@@ -23,30 +23,21 @@ export default defineConfig({
       registerType: 'autoUpdate',
       workbox: {
         disableDevLogs: true,
-        globPatterns: ['**/*.{js,css,html,png,svg,jpg,ico,woff,woff2,ttf}'],
+        globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
         cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
             urlPattern:
-              /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
+              /^https:\/\/stacjownik.spythere.eu\/api\/(getVehiclesData|getDonators|getSceneries)/i,
             handler: 'NetworkFirst',
             options: {
               cacheName: 'stacjownik-api-cache',
               cacheableResponse: { statuses: [0, 200] }
             }
-          },
+          }
         ]
       },
       devOptions: { enabled: true, suppressWarnings: true }
     })
-  ],
+  ]
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: 'app-[name].js',
-        assetFileNames: 'app-[name].css',
-        chunkFileNames: 'chunk-[name].js'
-      }
-    }
-  }
 });