Merge pull request #153 from Spythere/development

v1.31.1

.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) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+app.get('/api/getVehiclesData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
 });
 
 app.get('/api/getDonators', (_, res) => {

index.html

@@ -62,24 +62,24 @@
       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-stats.svg" />
+    <link rel="preload" as="image" href="/images/icon-filter2.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-gnr.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" />
+    
+    <link rel="prefetch" as="image" href="/images/icon-arrow-asc.svg" />
+    <link rel="prefetch" as="image" href="/images/icon-diamond.svg" />
 
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.30.7",
+  "version": "1.31.1",
   "private": true,
   "type": "module",
   "scripts": {

public/images/flags/cz.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v240H0z"/>
+  <path fill="#d7141a" d="M0 240h640v240H0z"/>
+  <path fill="#11457e" d="M360 240 0 0v480z"/>
+</svg>

public/images/flags/de.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 640 480">
+  <path fill="#fc0" d="M0 320h640v160H0z"/>
+  <path fill="#000001" d="M0 0h640v160H0z"/>
+  <path fill="red" d="M0 160h640v160H0z"/>
+</svg>

public/images/flags/it.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#009246" d="M0 0h213.3v480H0z"/>
+    <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
+  </g>
+</svg>

public/images/flags/ru.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ru" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#0039a6" d="M0 160h640v160H0z"/>
+  <path fill="#d52b1e" d="M0 320h640v160H0z"/>
+</svg>

public/images/flags/se.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-se" viewBox="0 0 640 480">
+  <path fill="#005293" d="M0 0h640v480H0z"/>
+  <path fill="#fecb00" d="M176 0v192H0v96h176v192h96V288h368v-96H272V0z"/>
+</svg>

public/images/flags/sk.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sk" viewBox="0 0 640 480">
+  <path fill="#ee1c25" d="M0 0h640v480H0z"/>
+  <path fill="#0b4ea2" d="M0 0h640v320H0z"/>
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#fff" d="M233 370.8c-43-20.7-104.6-61.9-104.6-143.2 0-81.4 4-118.4 4-118.4h201.3s3.9 37 3.9 118.4S276 350 233 370.8"/>
+  <path fill="#ee1c25" d="M233 360c-39.5-19-96-56.8-96-131.4s3.6-108.6 3.6-108.6h184.8s3.5 34 3.5 108.6C329 303.3 272.5 341 233 360"/>
+  <path fill="#fff" d="M241.4 209c10.7.2 31.6.6 50.1-5.6 0 0-.4 6.7-.4 14.4s.5 14.4.5 14.4c-17-5.7-38.1-5.8-50.2-5.7v41.2h-16.8v-41.2c-12-.1-33.1 0-50.1 5.7 0 0 .5-6.7.5-14.4s-.5-14.4-.5-14.4c18.5 6.2 39.4 5.8 50 5.6v-25.9c-9.7 0-23.7.4-39.6 5.7 0 0 .5-6.6.5-14.4 0-7.7-.5-14.4-.5-14.4 15.9 5.3 29.9 5.8 39.6 5.7-.5-16.4-5.3-37-5.3-37s9.9.7 13.8.7 13.8-.7 13.8-.7-4.8 20.6-5.3 37c9.7.1 23.7-.4 39.6-5.7 0 0-.5 6.7-.5 14.4s.5 14.4.5 14.4a119 119 0 0 0-39.7-5.7v26z"/>
+  <path fill="#0b4ea2" d="M233 263.3c-19.9 0-30.5 27.5-30.5 27.5s-6-13-22.2-13c-11 0-19 9.7-24.2 18.8 20 31.7 51.9 51.3 76.9 63.4 25-12 57-31.7 76.9-63.4-5.2-9-13.2-18.8-24.2-18.8-16.2 0-22.2 13-22.2 13S253 263.3 233 263.3"/>
+</svg>

public/images/flags/ua.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ua" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="gold" d="M0 0h640v480H0z"/>
+    <path fill="#0057b8" d="M0 0h640v240H0z"/>
+  </g>
+</svg>

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-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>

src/App.vue

@@ -7,6 +7,11 @@
 
     <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
 
+    <MigrateInfoCard
+      :is-open="store.isMigrateInfoCardOpen"
+      @toggle-card="closeMigrateInfoCard"
+    ></MigrateInfoCard>
+
     <Tooltip />
 
     <AppHeader />
@@ -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,6 +172,13 @@ export default defineComponent({
       this.apiStore.connectToAPI();
     },
 
+    handleMigrateInfo() {
+      if (location.hostname != 'stacjownik-td2.web.app') return;
+      if (StorageManager.getBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY) === true) return;
+
+      this.store.isMigrateInfoCardOpen = true;
+    },
+
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 
@@ -180,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

@@ -84,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;
     }
   }
 });

src/components/App/AppWelcomeCard.vue

@@ -5,11 +5,11 @@
 
       <div class="language-select">
         <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
-          <img src="/images/icon-pl.svg" alt="" width="45" />
+          <FlagIcon :language-id="0" width="2.5em" />
         </button>
 
         <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
-          <img src="/images/icon-en.svg" alt="" width="45" />
+          <FlagIcon :language-id="1" width="2.5em" />
         </button>
       </div>
 
@@ -116,6 +116,7 @@
 <script setup lang="ts">
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
+import FlagIcon from '../Global/FlagIcon.vue';
 
 const store = useMainStore();
 
@@ -157,7 +158,7 @@ a.link {
   justify-content: center;
   margin: 0.5em 0;
 
-  button[data-active='false'] img {
+  button[data-active='false'] ::v-deep(img) {
     opacity: 0.5;
   }
 }

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;
-  padding: 1em;
+  list-style: disc;
+  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/FlagIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flag-icon">
+    <img
+      :src="languageFlagSrc"
+      alt="language flag"
+      :style="{
+        width: width
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getLanguageNameById } from '../../utils/languageUtils';
+
+const props = defineProps({
+  languageId: {
+    type: Number,
+    required: true
+  },
+
+  width: {
+    type: String
+  }
+});
+
+const languageFlagSrc = computed(
+  () => `/images/flags/${getLanguageNameById(props.languageId)}.svg`
+);
+</script>
+
+<style scoped>
+.flag-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flag-icon img {
+  vertical-align: middle;
+}
+</style>

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -1,23 +1,22 @@
 <template>
   <li class="dispatcher-history-entry">
     <div class="entry-info">
-      <span>
-        <span>
+      <span class="entry-info-left">
+        <div class="station-info">
           <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
             <b>{{ entry.stationName }}</b>
           </router-link>
 
           <b class="text--grayed"> #{{ entry.stationHash }}</b>
-        </span>
-        &bull;
-        <b
-          v-if="entry.dispatcherLevel !== null"
-          class="level-badge dispatcher"
-          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
-        >
-          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
-        </b>
-        <b style="margin-left: 5px">
+          &bull;
+          <b
+            v-if="entry.dispatcherLevel !== null"
+            class="level-badge dispatcher"
+            :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+          >
+            {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+          </b>
+
           <span
             v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
             data-tooltip-type="DonatorTooltip"
@@ -37,7 +36,11 @@
           >
             {{ entry.dispatcherName }}
           </router-link>
-        </b>
+
+          <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
+            <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.75em" />
+          </span>
+        </div>
 
         <div>
           <span v-if="entry.timestampTo">
@@ -118,6 +121,7 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
   props: {
@@ -125,7 +129,7 @@ export default defineComponent({
     showExtraInfo: { type: Boolean, required: true }
   },
 
-  components: { StationStatusBadge },
+  components: { StationStatusBadge, FlagIcon },
   mixins: [dateMixin, styleMixin],
   emits: ['toggleShowExtraInfo'],
 
@@ -164,6 +168,11 @@ export default defineComponent({
   padding: 1em;
 }
 
+.dispatcher-language {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .entry-info {
   display: flex;
   justify-content: space-between;
@@ -185,6 +194,15 @@ export default defineComponent({
   margin-top: 1em;
 }
 
+.station-info {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  align-items: center;
+  gap: 0.25em;
+  font-weight: bold;
+}
+
 .status-list {
   display: flex;
   overflow: auto;
@@ -198,11 +216,15 @@ export default defineComponent({
   border-radius: 1em;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .entry-info {
     flex-direction: column;
     justify-content: center;
     text-align: center;
   }
+
+  .station-info {
+    justify-content: center;
+  }
 }
 </style>

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -71,6 +71,10 @@
       <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
         <strong>{{ timetable.driverName }}</strong>
       </router-link>
+
+      <div v-if="timetable.driverLanguageId != null">
+        <FlagIcon :language-id="timetable.driverLanguageId" width="1.75em" />
+      </div>
     </span>
 
     <span class="general-time">
@@ -110,8 +114,10 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
+  components: { FlagIcon },
   mixins: [dateMixin, styleMixin, trainCategoryMixin],
 
   data() {
@@ -191,7 +197,7 @@ export default defineComponent({
   }
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .item-general {
     flex-direction: column;
     justify-content: center;

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

@@ -151,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%;

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

@@ -21,6 +21,8 @@
         </span>
         <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
+
+      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
     </div>
 
     <div class="info-bottom">
@@ -51,9 +53,11 @@ import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
+import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
+  components: { StationStatusBadge, FlagIcon },
 
   data() {
     return {
@@ -66,8 +70,7 @@ export default defineComponent({
       type: Object as PropType<ActiveScenery>,
       required: false
     }
-  },
-  components: { StationStatusBadge }
+  }
 });
 </script>
 

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/StationsView/StationFilterCard.vue

@@ -35,6 +35,7 @@
               id="scenery-search"
               list="sceneries"
               :placeholder="$t('filters.sceneries-placeholder')"
+              @change="handleSceneriesInput"
               @focus="preventKeyDown = true"
               @blur="preventKeyDown = false"
             />
@@ -44,42 +45,40 @@
             </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>
-
+          <section class="card_input-search">
             <input
-              type="text"
-              id="author"
-              list="authors"
-              name="authors"
-              v-model="filters['authors']"
-              :placeholder="$t('filters.authors-placeholder')"
+              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">
-            <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"
-            />
+            <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" />
@@ -92,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>
@@ -122,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>
@@ -217,8 +216,6 @@ export default defineComponent({
     sliderStates,
 
     minimumHours: 0,
-    authorSearchFilter: '',
-    projectSearchFilter: '',
 
     currentRegion: { id: '', value: '' },
 
@@ -276,6 +273,8 @@ export default defineComponent({
     authorsOptions() {
       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());
@@ -289,8 +288,10 @@ export default defineComponent({
     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());
+          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[])
@@ -320,11 +321,15 @@ export default defineComponent({
     },
 
     resetAuthorsInput() {
-      this.filters['authors'] = this.authorSearchFilter;
+      this.filters['authors'] = '';
     },
 
     resetProjectsInput() {
-      this.filters['projects'] = this.projectSearchFilter;
+      this.filters['projects'] = '';
+    },
+
+    resetLineNumbersInput() {
+      this.filters['lines'] = '';
     },
 
     handleSceneriesInput() {
@@ -369,7 +374,6 @@ export default defineComponent({
 
       // Reset local model values
       this.minimumHours = 0;
-      this.authorSearchFilter = '';
 
       // Reset global filters
       Object.keys(this.filters).forEach((filterKey) => {
@@ -413,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;
 }
@@ -494,15 +506,12 @@ h3.section-header {
     height: 100%;
   }
 
-  input {
+  input,
+  select {
     width: 100%;
     padding: 0.5em;
     border: 1px solid #aaa;
   }
-
-  &.authors {
-    margin-top: 1em;
-  }
 }
 
 .section-filters {
@@ -573,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)"
-          :to="getSceneryRoute(station)"
+          @click="getSceneryRoute(station)"
+          @keydown.enter="getSceneryRoute(station)"
         >
           <td class="station-name" :class="station.generalInfo?.availability">
             <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -146,6 +146,14 @@
             </span>
           </td>
 
+          <td class="station-dispatcher-lang">
+            <FlagIcon
+              v-if="station.onlineInfo && station.onlineInfo.dispatcherLanguageId != -1"
+              :language-id="station.onlineInfo.dispatcherLanguageId"
+              width="2.25em"
+            />
+          </td>
+
           <td class="station-dispatcher-exp">
             <span
               v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
@@ -314,7 +322,7 @@
           >
             {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
           </td>
-        </router-link>
+        </tr>
       </tbody>
     </table>
 
@@ -344,11 +352,13 @@ import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
+import { getLanguageNameById } from '../../utils/languageUtils';
+import FlagIcon from '../Global/FlagIcon.vue';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
 
-  components: { Loading, StationStatusBadge },
+  components: { Loading, StationStatusBadge, FlagIcon },
   mixins: [styleMixin, dateMixin],
 
   data: () => ({
@@ -384,15 +394,13 @@ export default defineComponent({
 
   methods: {
     getSceneryRoute(station: Station) {
-      // TODO: Hide tooltips when navigating away
-
-      return {
+      this.$router.push({
         name: 'SceneryView',
         query: {
           station: station.name,
           region: this.$route.query.region || undefined
         }
-      };
+      });
     },
 
     openDonationCard(e: Event) {
@@ -459,78 +467,82 @@ table {
   width: 100%;
   min-width: 1250px;
   white-space: wrap;
+}
 
-  thead {
-    position: sticky;
-    top: 0;
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+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;
+
+  &.station {
+    width: 12em;
   }
 
-  thead tr {
-    background-color: var(--clr-bg3);
+  &.min-lvl {
+    width: 4em;
   }
 
-  thead th {
-    &.station {
-      width: 12em;
-    }
+  &.status {
+    width: 10em;
+  }
 
-    &.min-lvl {
-      width: 4em;
-    }
+  &.dispatcher {
+    width: 12em;
+  }
 
-    &.status {
-      width: 10em;
-    }
+  &.dispatcher-lang {
+    width: 6em;
+  }
 
-    &.dispatcher {
-      width: 12em;
-    }
+  &.dispatcher-lvl {
+    width: 6em;
+  }
 
-    &.dispatcher-lvl {
-      width: 6em;
-    }
+  &.routes-double,
+  &.routes-single {
+    width: 7em;
+  }
 
-    &.routes-double,
-    &.routes-single {
-      width: 7em;
-    }
+  &.general {
+    width: 11em;
+  }
 
-    &.general {
-      width: 11em;
-    }
+  &.header-image {
+    width: 3.5em;
 
-    &.header-image {
-      width: 3.5em;
-
-      &.user {
-        width: 5em;
-      }
-    }
-
-    padding: 0.5em 0.25em;
-    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;
-
-      img {
-        width: 1.5em;
-        vertical-align: middle;
-      }
+    &.user {
+      width: 5em;
     }
   }
 }
 
-tr,
-.a-row {
+thead th .header_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 1.5em;
+    vertical-align: middle;
+  }
+}
+
+tbody tr {
   background-color: $rowCol;
   vertical-align: middle;
 
@@ -550,6 +562,7 @@ tr,
     cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
+    height: 2.5em;
 
     &.inactive {
       opacity: 0.2;

src/components/StationsView/typings.ts

@@ -10,6 +10,7 @@ export const headIds = [
   'min-lvl',
   'status',
   'dispatcher',
+  'dispatcher-lang',
   'dispatcher-lvl',
   'routes-single',
   'routes-double',

src/components/StationsView/utils.ts

@@ -145,13 +145,33 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
 }
 
 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
-  return (
-    (filters['authors'].length > 3 &&
-      !generalInfo.authors
-        ?.map((a) => a.toLocaleLowerCase())
-        .includes(filters['authors'].toLocaleLowerCase())) ||
-    (filters['projects'].length > 0 && generalInfo.project != filters['projects'])
-  );
+  if (
+    filters['authors'].length > 3 &&
+    generalInfo.authors &&
+    !generalInfo.authors.some(
+      (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) => {
@@ -190,6 +210,11 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
       diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
       break;
 
+    case 'dispatcher-lang':
+      diff =
+        (a.onlineInfo?.dispatcherLanguageId ?? -1) - (b.onlineInfo?.dispatcherLanguageId ?? -1);
+      break;
+
     case 'routes-single':
       diff =
         (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -18,9 +18,9 @@
       <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
     </div>
 
-    <div class="vehicle-props" v-if="vehicleData">
-      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
-      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
+    <div class="vehicle-props" v-if="vehicleGroup">
+      {{ vehicleGroup.speed }}km/h &bull; {{ vehicleGroup.length }}m &bull;
+      {{ (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() {
-      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
+    vehicleGroup() {
+      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/components/TrainsView/TrainInfo.vue

@@ -66,6 +66,10 @@
 
           <span v-else>{{ train.driverName }}</span>
         </div>
+
+        <div class="train-language-flag">
+          <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
+        </div>
       </div>
     </div>
 
@@ -199,10 +203,11 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
+import FlagIcon from '../Global/FlagIcon.vue';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
-  components: { ProgressBar, StockList },
+  components: { ProgressBar, StockList, FlagIcon },
 
   props: {
     train: {

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",
@@ -190,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",
@@ -307,8 +318,9 @@
       "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
     },
     "sceneries-placeholder": "Search for scenery",
-    "authors-placeholder": "Scenery author (other filters apply)",
-    "projects-placeholder": "Scenery project (other filters apply)",
+    "line-numbers-placeholder": "Line numbers (separated by commas)",
+    "authors-placeholder": "Scenery author",
+    "projects-placeholder": "Scenery project",
     "search-button-title": "SEARCH",
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
@@ -325,6 +337,7 @@
       "min-lvl": "Scenery\nlevel",
       "status": "Status",
       "dispatcher": "Dispatcher",
+      "dispatcher-lang": "Language",
       "dispatcher-lvl": "Dispatcher\nlevel",
       "routes-single": "1-track\nroutes",
       "routes-double": "2-track\nroutes",

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",
@@ -187,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",
@@ -305,8 +315,9 @@
       "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
     },
     "sceneries-placeholder": "Wyszukaj scenerię",
-    "authors-placeholder": "Autor scenerii (uwzględnia inne filtry)",
-    "projects-placeholder": "Projekt scenerii (uwzględnia inne filtry)",
+    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
+    "authors-placeholder": "Autor scenerii",
+    "projects-placeholder": "Projekt scenerii",
     "search-button-title": "SZUKAJ",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
@@ -323,6 +334,7 @@
       "min-lvl": "Poziom\nscenerii",
       "status": "Status",
       "dispatcher": "Dyżurny",
+      "dispatcher-lang": "Język",
       "dispatcher-lvl": "Poziom\ndyżurnego",
       "routes-single": "Szlaki\n1-torowe",
       "routes-double": "Szlaki\n2-torowe",

src/managers/stationFilterManager.ts

@@ -69,7 +69,8 @@ export const initFilters = {
   minTwoWayInt: 0,
   minTwoWayCatenaryInt: 0,
   authors: '',
-  projects: ''
+  projects: '',
+  lines: ''
 };
 
 export const sliderStates = [

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) {
-            vehicleSpeed = vehicleData.group.speedLoaded;
+          if (vehicleCargo !== undefined && vehicleGroup.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

@@ -36,7 +36,10 @@ export const useMainStore = defineStore('mainStore', {
       chosenModalTrainId: undefined,
 
       modalLastClickedTarget: null,
-      currentLocale: 'pl'
+      currentLocale: 'pl',
+
+      isMigrateInfoCardOpen: false,
+      pinnedStationNames: []
     }) as MainStoreState,
 
   actions: {
@@ -84,6 +87,7 @@ export const useMainStore = defineStore('mainStore', {
             online: Boolean(train.online),
             driverId: train.driverId,
             driverName: train.driverName,
+            driverLanguageId: train.driverLanguageId,
             currentStationName: train.currentStationName,
             currentStationHash: train.currentStationHash,
             connectedTrack: train.connectedTrack,
@@ -255,6 +259,7 @@ export const useMainStore = defineStore('mainStore', {
             dispatcherIsSupporter: false,
             dispatcherStatus: Status.ActiveDispatcher.FREE,
             dispatcherTimestamp: -1,
+            dispatcherLanguageId: -1,
 
             isOnline: false,
 
@@ -301,6 +306,7 @@ export const useMainStore = defineStore('mainStore', {
           dispatcherIsSupporter: scenery.dispatcherIsSupporter,
           dispatcherStatus: scenery.dispatcherStatus,
           dispatcherTimestamp: dispatcherTimestamp,
+          dispatcherLanguageId: scenery.dispatcherLanguageId,
 
           isOnline: scenery.isOnline == 1,
 
@@ -429,7 +435,6 @@ export const useMainStore = defineStore('mainStore', {
 
         return {
           name: scenery.name,
-
           generalInfo: {
             ...scenery,
             authors: scenery.authors?.split(',').map((a) => a.trim()),
@@ -444,7 +449,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 {

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

@@ -61,8 +61,4 @@
   top: 50%;
   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',
@@ -38,6 +38,7 @@ export namespace API {
       dispatcherLevel: number | null;
       dispatcherRate: number;
       dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number | null;
       dispatcherStatus?: number;
       isOnline: boolean;
       lastOnlineTimestamp: number;
@@ -114,6 +115,7 @@ export namespace API {
       dispatcherId: number;
       dispatcherName: string;
       dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number;
       stationName: string;
       stationHash: string;
       region: string;
@@ -152,6 +154,7 @@ export namespace API {
       driverId: number;
       driverIsSupporter: boolean;
       driverLevel?: number;
+      driverLanguageId: number;
 
       currentStationName: string;
       currentStationHash?: string;
@@ -221,6 +224,7 @@ export namespace API {
       driverName: string;
       driverLevel: number | null;
       driverIsSupporter: boolean;
+      driverLanguageId: number | null;
 
       route: string;
       twr: number;
@@ -329,8 +333,51 @@ export namespace API {
     export type Response = string[];
   }
 
-  export namespace Vehicles {
-    export type Response = VehicleData[];
+  export namespace VehiclesData {
+    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';
@@ -59,6 +60,7 @@ export interface Train {
   distance: number;
   connectedTrack: string;
   driverId: number;
+  driverLanguageId: number;
   trainNo: number;
   driverName: string;
   driverLevel: number;
@@ -95,9 +97,7 @@ export interface TrainTimetableData {
 
 export interface Station {
   name: string;
-
   generalInfo?: StationGeneralInfo;
-
   onlineInfo?: ActiveScenery;
 }
 
@@ -107,7 +107,7 @@ export interface StationGeneralInfo {
   abbr: string;
   hash?: string;
   reqLevel: number;
-  lines: string;
+  lines?: string;
   project: string;
   projectUrl?: string;
   signalType: string;
@@ -163,6 +163,7 @@ export interface ActiveScenery {
   dispatcherIsSupporter: boolean;
   dispatcherStatus: Status.ActiveDispatcher | number;
   dispatcherTimestamp: number | null;
+  dispatcherLanguageId: number;
   isOnline: boolean;
   stationTrains: Train[];
   scheduledTrains: CheckpointTrain[];
@@ -171,7 +172,7 @@ export interface ActiveScenery {
     confirmed: number;
     unconfirmed: number;
   };
-  missingCheckpoints: string[];  
+  missingCheckpoints: string[];
 }
 
 export interface ScenerySpawn {
@@ -216,45 +217,8 @@ export interface CheckpointTrain {
 }
 
 // Vehicles Data
-
-export interface VehicleData {
-  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 type Vehicle = API.VehiclesData.VehicleObject;
+export type VehicleGroup = API.VehiclesData.VehicleGroupObject;
 
 export interface TooltipUserTrain {
   driverName: string;

src/utils/languageUtils.ts

@@ -0,0 +1,5 @@
+export const languageFlagNames = ['pl', 'en', 'de', 'cz', 'sk', 'ru', 'se', 'ua', 'it'];
+
+export function getLanguageNameById(languageId: number) {
+  return languageFlagNames[languageId] ?? 'pl';
+}

src/views/JournalDispatchers.vue

@@ -272,7 +272,7 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    async fetchHistoryData() {      
+    async fetchHistoryData() {
       const queryParams: DispatchersQueryParams = {};
 
       const dispatcherName = this.searchersValues['search-dispatcher'].trim() || undefined;
@@ -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) {
-        const d = new Date(dateFrom);
-        d.setDate(d.getDate() + 1);
+      if (dateFromString) {
+        let dateFrom = new Date(dateFromString);
+        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['dateTo'] = dateTo;
+      queryParams['dateFrom'] = dateFromISO;
+      queryParams['dateTo'] = dateToISO;
+      queryParams['includesScenery'] = includesScenery;
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['terminatingAt'] = terminatingAt;
       queryParams['via'] = via;

src/views/StationsView.vue

@@ -13,16 +13,23 @@
         </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"
-            />
+            <FlagIcon :language-id="mainStore.currentLocale == 'pl' ? 0 : 1" />
           </button>
 
           <a
@@ -75,6 +82,7 @@ import { reactive } from 'vue';
 import { provide } from 'vue';
 import { ActiveSorter } from '../components/StationsView/typings';
 import { onMounted } from 'vue';
+import FlagIcon from '../components/Global/FlagIcon.vue';
 
 const filterInitStates = { ...initFilters };
 
@@ -83,7 +91,8 @@ export default defineComponent({
     StationTable,
     StationFilterCard,
     StationStats,
-    DonationCard
+    DonationCard,
+    FlagIcon
   },
 
   data: () => ({
@@ -110,9 +119,19 @@ export default defineComponent({
       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';
+    }
   }
 });
 </script>
@@ -136,11 +155,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;
@@ -170,6 +190,11 @@ button.lang-button {
   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,7 +4,7 @@ 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: false },
   publicDir: 'public',
   css: {
@@ -28,7 +28,7 @@ export default defineConfig({
         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',
@@ -39,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'
-      }
-    }
-  }
+  ]
 });