chore(app): added the Creator badge

v1.32.1

.gitignore

@@ -15,13 +15,12 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-node_modules
+.vscode/settings.json
 
 *.log
 

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "esbenp.prettier-vscode"]
+}

README.md

@@ -1,4 +1,4 @@
-# [STACJOWNIK TD2](https://stacjownik-td2.web.app)
+# [STACJOWNIK TD2](https://stacjownik-td2.spythere.eu)
 
 ODŚWIEŻANA LISTA SCENERII I SKŁADÓW ONLINE DLA [SYMULATORA TRAIN DRIVER 2](https://td2.info.pl)
 

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -20,7 +20,7 @@
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
 
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
 
     <link rel="stylesheet" href="/fa/css/fontawesome.css" />
     <link rel="stylesheet" href="/fa/css/brands.css" />
@@ -28,7 +28,13 @@
     <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-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
 
     <link
       rel="preload"
@@ -83,7 +89,7 @@
 
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
-    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
+    <meta property="og:url" content="https://stacjownik-td2.spythere.eu/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Stacjownik" />
     <meta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.31.1",
+  "version": "1.35.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -26,12 +26,12 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@types/node": "^24.3.1",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.12.0",
     "@types/showdown": "^2.0.6",
     "@vite-pwa/assets-generator": "^1.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
-    "axios": "^1.9.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.4",
     "vite": "^7.1.4",

src/App.vue

@@ -30,7 +30,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import axios from 'axios';
 
 import { version } from '../package.json';
 import { Status } from './typings/common';
@@ -50,7 +49,6 @@ import AppWelcomeCard from './components/App/AppWelcomeCard.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: {
@@ -92,7 +90,6 @@ export default defineComponent({
       this.setupOfflineHandling();
       this.checkAppVersion();
       this.handleQueries();
-      this.handleMigrateInfo();
 
       this.apiStore.setupAPIData();
     },
@@ -103,10 +100,6 @@ export default defineComponent({
       if (query.get('welcomeCard') == '1') {
         this.isWelcomeCardOpen = true;
       }
-
-      if (query.get('migrateCard') == '1') {
-        this.store.isMigrateInfoCardOpen = true;
-      }
     },
 
     async checkAppVersion() {
@@ -120,11 +113,15 @@ export default defineComponent({
       }
 
       try {
-        const releaseData = await (
+        const response = await fetch(
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
+          'https://api.github.com/repos/Spythere/stacjownik/releases/latest'
-        ).data;
+        );
 
-        if (!releaseData) return;
+        if (!response.ok) {
+          throw new Error('Failed to fetch release data from repository!');
+        }
+
+        const releaseData = await response.json();
 
         this.store.appUpdate = {
           version,
@@ -136,7 +133,7 @@ export default defineComponent({
           (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
           import.meta.env.VITE_UPDATE_TEST === 'test';
       } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        console.error(error);
       }
 
       StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
@@ -165,13 +162,6 @@ 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');
 
@@ -193,11 +183,6 @@ 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/AppWelcomeCard.vue

@@ -63,19 +63,19 @@
         </b>
 
         <div class="apps-grid">
-          <a class="app-item" href="https://pojazdownik-td2.web.app/" target="_blank">
+          <a class="app-item" href="https://pojazdownik-td2.spythere.eu/" target="_blank">
             <img src="/images/icon-pojazdownik.svg" alt="pojazdownik app logo" />
             <h3 class="text--primary">Pojazdownik</h3>
             <p>{{ $t('welcome.pojazdownik-desc') }}</p>
           </a>
 
-          <a class="app-item" href="https://generator-td2.web.app/" target="_blank">
+          <a class="app-item" href="https://generator-td2.spythere.eu/" target="_blank">
             <img src="/images/icon-gnr.svg" alt="generator app logo" />
             <h3 class="text--primary">GeneraTOR</h3>
             <p>{{ $t('welcome.generator-desc') }}</p>
           </a>
 
-          <a class="app-item" href="https://srjp-td2.web.app/" target="_blank">
+          <a class="app-item" href="https://srjp-td2.spythere.eu/" target="_blank">
             <img src="/images/icon-srjp.svg" alt="srjp app logo" />
             <h3 class="text--primary">Rozkładownik</h3>
             <p>{{ $t('welcome.srjp-desc') }}</p>

src/components/App/MigrateInfoCard.vue

@@ -1,94 +0,0 @@
-<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,7 +1,9 @@
 <template>
   <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
     <div class="content" tabindex="0" ref="content">
-      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
+      <h1 class="content-title">
+        <i class="fa-solid fa-wand-sparkles"></i> {{ $t('update.title') }}
+      </h1>
 
       <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
       <div class="no-features" v-else>{{ $t('update.no-data') }}</div>
@@ -16,7 +18,7 @@
 
         <i18n-t keypath="update.info-2">
           <template v-slot:link>
-            <a href="https://github.com/Spythere/stacjownik" target="_blank">{{
+            <a href="https://github.com/Spythere/stacjownik/releases" target="_blank">{{
               $t('update.info-2-link-text')
             }}</a>
           </template>
@@ -86,19 +88,28 @@ export default defineComponent({
 }
 
 ::v-deep(h2) {
-  margin-top: 1em;
   padding: 0.5em 0;
-  border-bottom: 1px solid #aaa;
+
+  &::after {
+    content: '';
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: #aaa;
+    margin-top: 0.25em;
+  }
 }
 
 ::v-deep(h3) {
-  padding: 0.5em 0;
+  padding-bottom: 0.25em;
 }
 
 ::v-deep(ul) {
   list-style: disc;
-  padding: 0 1.5em;
   line-height: 1.5em;
+  padding: 0 1.5em;
+
+  padding-bottom: 0.5em;
 }
 
 .content {
@@ -112,6 +123,19 @@ export default defineComponent({
   max-width: 700px;
 }
 
+.content-title {
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary) 30%, #ffffff 90%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
 .no-features {
   text-align: center;
 }

src/components/DriverView/DriverPropositions.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="driver-propositions">
+    <h3>{{ t('trains.number-propositions-header') }}</h3>
+
+    <div class="categories-select">
+      <button
+        v-for="(category, i) in availableCategories"
+        class="btn btn--option btn--action"
+        @click="selectCategory(i)"
+        :class="{ checked: i == chosenCategoryIndex }"
+      >
+        {{ category }}
+      </button>
+    </div>
+
+    <div v-if="numberPropositions.length > 0" class="propositions-numbers">
+      <div v-if="chosenCategory">
+        <b>{{ chosenCategory }} </b> -
+        {{ t(`categories.${chosenCategory.slice(0, 2)}`) }}
+        ({{ t(`categories.${chosenCategory.slice(2)}`) }})
+      </div>
+
+      <div v-if="chosenCategoryRules">
+        <span v-if="chosenCategoryRules[0]"
+          >{{ t('trains.number-propositions-third-number') }}
+          <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
+        </span>
+
+        <span
+          >{{
+            t('trains.number-propositions-last-nums', {
+              count: chosenCategoryRules[1].length
+            })
+          }}
+          <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
+          <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
+        >
+      </div>
+
+      <div style="margin-top: 0.5em">
+        <b>{{ t('trains.number-propositions-title') }}&nbsp;</b>
+        <i>{{ numberPropositions.join(', ') }}</i>
+      </div>
+    </div>
+
+    <div class="no-propositions" v-else>{{ t('trains.number-propositions-empty') }}</div>
+
+    <div class="cargo-warnings" v-if="getCargoWarnings.size > 0">
+      <hr />
+      <h3>{{ t('cargo-warnings.title') }}</h3>
+
+      <div class="warnings-container">
+        <div
+          v-for="warning in getCargoWarnings"
+          class="train-badge"
+          :class="`${warning.split('-')[0]}`"
+        >
+          {{ t('cargo-warnings.' + warning) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Train } from '../../typings/common';
+import rulesJSON from '../../data/trainNumberRules.json';
+import { useApiStore } from '../../store/apiStore';
+
+const { t } = useI18n();
+const apiStore = useApiStore();
+
+const props = defineProps({
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+
+const emits = defineEmits(['selectCategory']);
+
+const chosenCategoryIndex = ref(0);
+
+const numberPropositions = ref<string[]>([]);
+const chosenCategoryRules = ref<any[]>([]);
+
+watch(
+  computed(() => props.chosenTrain.trainNo),
+  () => {
+    chosenCategoryIndex.value = 0;
+    generateNumberPropositions();
+  }
+);
+
+onMounted(() => {
+  generateNumberPropositions();
+});
+
+function generateNumberPropositions() {
+  const categoryCode = chosenCategory.value?.slice(0, 2);
+  const trainNoStr = props.chosenTrain.trainNo.toString();
+
+  // Get category rules
+  const rules = categoryCode
+    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
+    : undefined;
+
+  if (!categoryCode || !rules) {
+    numberPropositions.value.length = 0;
+    chosenCategoryRules.value.length = 0;
+
+    return;
+  }
+
+  const [thirdNumber, minRange, maxRange] = rules;
+
+  const propositionsArr: string[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    let generatedNumStr = '';
+
+    generatedNumStr += trainNoStr[0] ?? Math.floor(Math.random() * 10);
+    generatedNumStr += trainNoStr[1] ?? Math.floor(Math.random() * 10);
+
+    // Third number
+    generatedNumStr += thirdNumber ?? '';
+
+    // Remaining numbers
+    const rangeNums = minRange?.length ?? 3;
+
+    const randRange = Math.floor(
+      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
+    ).toString();
+
+    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
+      .fill('0')
+      .join('');
+
+    generatedNumStr += `${leadingZeros}${randRange}`;
+
+    const isNumberTaken =
+      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
+
+    if (!isNumberTaken) {
+      propositionsArr.push(generatedNumStr);
+    } else {
+      i--;
+    }
+
+    if (Number(randRange) > Number(maxRange)) break;
+  }
+
+  numberPropositions.value = propositionsArr;
+  chosenCategoryRules.value = rules;
+}
+
+const chosenCategory = computed(() => {
+  return availableCategories.value[chosenCategoryIndex.value];
+});
+
+const getCargoWarnings = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+
+  let warnings: Set<string> = new Set();
+
+  stockList.forEach((stockVehicle) => {
+    const [vehicleName, vehicleCargo] = stockVehicle.split(':');
+
+    if (vehicleName.startsWith('WB117')) warnings.add(vehicleCargo ? 'twr-un1965' : 'tn-un1965');
+    else if (vehicleName.startsWith('445Rb'))
+      warnings.add(vehicleCargo ? 'tn-un1202' : 'tn-un1202-empty');
+    else if (vehicleName.startsWith('EDK80')) warnings.add('pn-edk80');
+
+    if (vehicleCargo) {
+      if (vehicleCargo.startsWith('wt_20')) warnings.add('pn-innofreight');
+      else if (/^(tank|vehicles_01|truck)/.test(vehicleCargo)) warnings.add('pn-military');
+    }
+  });
+
+  return warnings;
+});
+
+const availableCategories = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+  const headVehicle = stockList[0]?.split('-')[0] ?? '';
+
+  let availableCategories: string[] = [];
+  let categoryTraction = 'E';
+
+  let vehicleTypesSet = new Set<string>();
+  let wagonsNamesSet = new Set<string>();
+  let cargoNamesSet = new Set<string>();
+
+  for (const stockName of stockList) {
+    const [vehicleName, ...cargoList] = stockName.split(':');
+
+    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
+
+    if (!vehicleData) continue;
+
+    vehicleTypesSet.add(vehicleData.type);
+
+    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
+
+    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
+  }
+
+  let vehicleTypesArr = [...vehicleTypesSet];
+  let wagonsNamesArr = [...wagonsNamesSet];
+
+  // Traction
+  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
+  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
+  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
+  else categoryTraction = 'M';
+
+  // EMU / DMU - M*, R*, P*
+  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
+    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Only locos (up to 3) - LT, LP, LS
+  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
+    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
+    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
+  }
+  // Only locos (more than 3) - TH
+  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    availableCategories.push('TH');
+  }
+  // Loco(s) + passenger only wagons - M*, R*, E*, P*
+  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
+    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Loco(s) + cargo only / mixed wagons - T*, Z*
+  else {
+    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
+      availableCategories.push('TC', 'TD', 'TS');
+    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
+      availableCategories.push('ZU', 'ZN');
+    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
+      availableCategories.push('TM', 'TG', 'TS', 'TK');
+    } else {
+      availableCategories.push('TN', 'TR', 'TS', 'TK');
+    }
+  }
+
+  return availableCategories.map((c) => `${c}${categoryTraction}`);
+});
+
+function selectCategory(i: number) {
+  chosenCategoryIndex.value = i;
+  generateNumberPropositions();
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+@use '../../styles/badge';
+
+.driver-propositions {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  background-color: #111;
+}
+
+.categories-select {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-0.5em);
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+    background-color: #aaa;
+  }
+}
+
+.propositions-numbers {
+  margin-top: 1em;
+}
+
+.no-propositions {
+  margin-top: 1em;
+  color: #ccc;
+}
+
+.cargo-warnings {
+  margin-top: 0.5em;
+
+  h3 {
+    margin: 0.5em 0;
+  }
+}
+
+.warnings-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+@include responsive.smallScreen {
+  .driver-propositions {
+    text-align: center;
+  }
+
+  .categories-select {
+    justify-content: center;
+  }
+
+  .warnings-container {
+    justify-content: center;
+  }
+}
+</style>

src/components/DriverView/DriverTopActions.vue

@@ -13,7 +13,7 @@
       <div class="actions actions-right">
         <a
           class="a-button btn--filled btn--image"
-          :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+          :href="`https://srjp-td2.spythere.eu/?id=${chosenTrain.id}`"
           target="_blank"
         >
           <span class="hidable">

src/components/DriverView/DriverTrainCard.vue

@@ -4,66 +4,21 @@
 
     <!-- Train action buttons -->
     <div class="train-stock-actions">
-      <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+      <button class="btn btn--action" @click="copyStockToClipboard()">
         <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
       </button>
 
-      <button class="btn btn--action" style="margin: 1em 0" @click="toggleNumberPropositions()">
+      <button class="btn btn--action" @click="toggleNumberPropositions()">
         <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
       </button>
     </div>
 
     <!-- Proposed numbers container -->
-    <transition name="view-anim" class="propositions-container">
+    <transition name="view-anim">
-      <div v-if="arePropositionsVisible">
+      <DriverPropositions :chosenTrain="chosenTrain" v-if="arePropositionsVisible" />
-        <h3 style="margin-bottom: 0.5em">{{ i18n.t('trains.number-propositions-header') }}</h3>
-
-        <div class="categories-select">
-          <button
-            v-for="(category, i) in availableCategories"
-            class="btn btn--option btn--action"
-            @click="selectCategory(i)"
-            :class="{ checked: i == chosenCategoryIndex }"
-          >
-            {{ category }}
-          </button>
-        </div>
-
-        <div v-if="numberPropositions.length > 0" class="propositions-numbers">
-          <div v-if="chosenCategory">
-            <b>{{ chosenCategory }} </b> -
-            {{ i18n.t(`categories.${chosenCategory.slice(0, 2)}`) }}
-            ({{ i18n.t(`categories.${chosenCategory.slice(2)}`) }})
-          </div>
-
-          <div v-if="chosenCategoryRules">
-            <span v-if="chosenCategoryRules[0]"
-              >{{ i18n.t('trains.number-propositions-third-number') }}
-              <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
-            </span>
-
-            <span
-              >{{
-                i18n.t('trains.number-propositions-last-nums', {
-                  count: chosenCategoryRules[1].length
-                })
-              }}
-              <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
-              <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
-            >
-          </div>
-
-          <div style="margin-top: 0.5em">
-            <b>{{ i18n.t('trains.number-propositions-title') }}&nbsp;</b>
-            <i>{{ numberPropositions.join(', ') }}</i>
-          </div>
-        </div>
-
-        <div class="no-propositions" v-else>{{ i18n.t('trains.number-propositions-empty') }}</div>
-      </div>
     </transition>
 
-    <StockList :trainStockList="chosenTrain.stockList" />
+    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
     <TrainSchedule :train="chosenTrain" />
   </div>
 </template>
@@ -72,25 +27,15 @@
 import { PropType, ref } from 'vue';
 import { Train } from '../../typings/common';
 import { useI18n } from 'vue-i18n';
-import { useApiStore } from '../../store/apiStore';
 
 import StockList from '../Global/StockList.vue';
 import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
-
+import DriverPropositions from './DriverPropositions.vue';
-import rulesJSON from '../../data/trainNumberRules.json';
-import { computed } from 'vue';
-import { watch } from 'vue';
-
-const apiStore = useApiStore();
 
 const i18n = useI18n();
 
 const arePropositionsVisible = ref(false);
-const chosenCategoryIndex = ref(0);
-
-const numberPropositions = ref<string[]>([]);
-const chosenCategoryRules = ref<any[]>([]);
 
 const props = defineProps({
   chosenTrain: {
@@ -119,153 +64,7 @@ function copyStockToClipboard() {
 
 function toggleNumberPropositions() {
   arePropositionsVisible.value = !arePropositionsVisible.value;
-
-  if (arePropositionsVisible.value) generateNumberPropositions();
 }
-
-function selectCategory(i: number) {
-  chosenCategoryIndex.value = i;
-
-  generateNumberPropositions();
-}
-
-function generateNumberPropositions() {
-  const categoryCode = chosenCategory.value?.slice(0, 2);
-  const trainNoStr = props.chosenTrain.trainNo.toString();
-
-  // Get category rules
-  const rules = categoryCode
-    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
-    : undefined;
-
-  if (!categoryCode || !rules) {
-    numberPropositions.value.length = 0;
-    chosenCategoryRules.value.length = 0;
-
-    return;
-  }
-
-  const [thirdNumber, minRange, maxRange] = rules;
-
-  const propositionsArr: string[] = [];
-
-  for (let i = 0; i < 5; i++) {
-    let generatedNumStr = '';
-
-    generatedNumStr += trainNoStr.at(0) ?? Math.floor(Math.random() * 10);
-    generatedNumStr += trainNoStr.at(1) ?? Math.floor(Math.random() * 10);
-
-    // Third number
-    generatedNumStr += thirdNumber ?? '';
-
-    // Remaining numbers
-    const rangeNums = minRange?.length ?? 3;
-
-    const randRange = Math.floor(
-      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
-    ).toString();
-
-    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
-      .fill('0')
-      .join('');
-
-    generatedNumStr += `${leadingZeros}${randRange}`;
-
-    const isNumberTaken =
-      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
-
-    if (!isNumberTaken) {
-      propositionsArr.push(generatedNumStr);
-    } else {
-      i--;
-    }
-
-    if (Number(randRange) > Number(maxRange)) break;
-  }
-
-  numberPropositions.value = propositionsArr;
-  chosenCategoryRules.value = rules;
-}
-
-const chosenCategory = computed(() => {
-  return availableCategories.value.at(chosenCategoryIndex.value);
-});
-
-const availableCategories = computed(() => {
-  const stockList = props.chosenTrain.stockList;
-  const headVehicle = stockList.at(0)?.split('-')[0] ?? '';
-
-  let availableCategories: string[] = [];
-  let categoryTraction = 'E';
-
-  let vehicleTypesSet = new Set<string>();
-  let wagonsNamesSet = new Set<string>();
-  let cargoNamesSet = new Set<string>();
-
-  for (const stockName of stockList) {
-    const [vehicleName, ...cargoList] = stockName.split(':');
-
-    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
-
-    if (!vehicleData) continue;
-
-    vehicleTypesSet.add(vehicleData.type);
-
-    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
-
-    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
-  }
-
-  let vehicleTypesArr = [...vehicleTypesSet];
-  let wagonsNamesArr = [...wagonsNamesSet];
-
-  // Traction
-  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
-  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
-  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
-  else categoryTraction = 'M';
-
-  // EMU / DMU - M*, R*, P*
-  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
-    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
-  }
-  // Only locos (up to 3) - LT, LP, LS
-  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
-    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
-    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
-    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
-  }
-  // Only locos (more than 3) - TH
-  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
-    availableCategories.push('TH');
-  }
-  // Loco(s) + passenger only wagons - M*, R*, E*, P*
-  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
-    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
-  }
-  // Loco(s) + cargo only / mixed wagons - T*, Z*
-  else {
-    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
-      availableCategories.push('TC', 'TD', 'TS');
-    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
-      availableCategories.push('ZU', 'ZN');
-    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
-      availableCategories.push('TM', 'TG', 'TS', 'TK');
-    } else {
-      availableCategories.push('TN', 'TR', 'TS', 'TK');
-    }
-  }
-
-  return availableCategories.map((c) => `${c}${categoryTraction}`);
-});
-
-watch(
-  computed(() => `${props.chosenTrain.trainNo}`),
-  () => {
-    chosenCategoryIndex.value = 0;
-    generateNumberPropositions();
-  }
-);
 </script>
 
 <style lang="scss" scoped>
@@ -279,49 +78,13 @@ watch(
 
 .train-stock-actions {
   display: flex;
-  gap: 0.5em;
-}
-
-.propositions-container {
-  margin-bottom: 1em;
-  padding: 0.5em;
-  background-color: #111;
-}
-
-.categories-select {
-  display: inline-flex;
   flex-wrap: wrap;
   gap: 0.5em;
-
+  margin: 1em 0;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-0.5em);
-    left: 0;
-
-    width: 100%;
-    height: 2px;
-    background-color: #aaa;
-  }
-}
-
-.propositions-numbers {
-  margin-top: 1em;
-}
-
-.no-propositions {
-  margin-top: 1em;
-  color: #ccc;
 }
 
 @include responsive.smallScreen {
-  .propositions-container {
+  .train-stock-actions {
-    text-align: center;
-  }
-
-  .categories-select {
     justify-content: center;
   }
 }

src/components/Global/StockList.vue

@@ -7,6 +7,8 @@
           :vehicle-string="vehicleString"
           :images="images"
           :image-fallbacks="imagesFallbacks"
+          :show-previews="showPreviews"
+          :thumbnail-size="thumbnailSize"
         />
       </li>
     </ul>
@@ -23,7 +25,9 @@ export default defineComponent({
 
   props: {
     trainStockList: { type: Array as PropType<string[]>, required: true },
-    tractionOnly: { type: Boolean, required: false }
+    tractionOnly: { type: Boolean, required: false },
+    showPreviews: { type: Boolean },
+    thumbnailSize: { type: Number }
   },
 
   data() {

src/components/Global/VehicleThumbnail.vue

@@ -9,9 +9,10 @@
       <img
         v-for="(thumbnailImage, imageIndex) in images"
         :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        height="70"
+        :height="thumbnailSize || 70"
         loading="lazy"
-        data-tooltip-type="VehiclePreviewTooltip"
+        :data-crosshair-cursor="showPreviews"
+        :data-tooltip-type="showPreviews ? 'VehiclePreviewTooltip' : ''"
         :data-tooltip-content="vehicleString"
         @error="onImageError($event, imageFallbacks[imageIndex])"
         @load="onImageLoad"
@@ -26,7 +27,9 @@ import { computed, PropType, Ref, ref } from 'vue';
 const props = defineProps({
   vehicleString: { type: String, required: true },
   images: { type: Object as PropType<string[]>, required: true },
-  imageFallbacks: { type: Object as PropType<string[]>, required: true }
+  imageFallbacks: { type: Object as PropType<string[]>, required: true },
+  showPreviews: { type: Boolean },
+  thumbnailSize: { type: Number }
 });
 
 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -65,7 +68,7 @@ function onImageLoad() {
   max-width: 90%;
   text-align: center;
   color: #aaa;
-  font-size: 0.85em;
+  font-size: 0.8em;
   margin: 0 auto;
   padding: 0.25em 0;
 }
@@ -74,8 +77,10 @@ function onImageLoad() {
   display: flex;
   justify-content: center;
   align-items: flex-end;
-  cursor: crosshair;
-
   padding: 0.5em 0;
+
+  &[data-crosshair-cursor='true'] {
+    cursor: crosshair;
+  }
 }
 </style>

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -18,7 +18,20 @@
           </b>
 
           <span
-            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            v-if="isCreator(entry.dispatcherName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <router-link
+              class="text--creator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <span
+            v-else-if="apiStore.donatorsData.includes(entry.dispatcherName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.dispatcher-message')"
           >
@@ -122,6 +135,7 @@ import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   props: {
@@ -134,7 +148,7 @@ export default defineComponent({
   emits: ['toggleShowExtraInfo'],
 
   data() {
-    return { regions, apiStore: useApiStore() };
+    return { regions, apiStore: useApiStore(), isCreator };
   },
 
   methods: {

src/components/JournalView/JournalOptions.vue

@@ -120,15 +120,15 @@
               </div>
             </section>
           </div>
+        </div>
 
-          <div class="options_actions">
+        <div class="options_actions">
-            <button class="btn--action" @click="onResetButtonClick">
+          <button class="btn--action" @click="onResetButtonClick">
-              {{ $t('options.reset-button') }}
+            {{ $t('options.reset-button') }}
-            </button>
+          </button>
-            <button class="btn--action" @click="onSearchButtonConfirm">
+          <button class="btn--action" @click="onSearchButtonConfirm">
-              {{ $t('options.search-button') }}
+            {{ $t('options.search-button') }}
-            </button>
+          </button>
-          </div>
         </div>
       </div>
     </transition>
@@ -269,9 +269,9 @@ export default defineComponent({
 
       this.searchTimeout = window.setTimeout(async () => {
         try {
-          const suggestions: string[] = await (
+          const suggestions: string[] = await this.apiStore.client.get(
-            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
+            `api/get${type}Suggestions?name=${value}`
-          ).data;
+          );
 
           this[`${type}Suggestions`] = suggestions;
         } catch (error) {
@@ -330,9 +330,23 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
+@use '../../styles/responsive';
 
-.filters-options > .dropdown_wrapper {
+.dropdown_wrapper {
-  height: calc(100vh - 19em);
+  display: grid;
-  min-height: 500px;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  max-height: calc(100% - 4.5em);
+  top: 3.5em;
+  padding: 1em 0;
+}
+
+.options_content {
+  overflow: auto;
+  padding: 0 1em;
+}
+
+.options_actions {
+  padding: 0 1em;
 }
 </style>

src/components/JournalView/JournalStats.vue

@@ -64,10 +64,18 @@ function navigateToProfile() {
 <style lang="scss" scoped>
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
+@use '../../styles/responsive';
 
 .dropdown_wrapper {
   left: auto;
   right: 0;
   max-width: 700px;
+  top: 3.5em;
+}
+
+@include responsive.smallScreen {
+  .dropdown_wrapper {
+    top: 6.25em;
+  }
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -129,6 +129,7 @@
                   : stockHistory[currentHistoryIndex].stockString
                 ).split(';')
               "
+              :showPreviews="true"
             />
           </div>
         </div>
@@ -200,22 +201,20 @@ const driverRouteLocation = computed<RouteLocationRaw | null>(() => {
 
 async function fetchTimetableDetails() {
   try {
-    const responseData = await apiStore.client!.get<API.TimetableHistory.Response>(
+    const responseData = await apiStore.client.get<API.TimetableHistory.Response>(
       'api/getTimetables',
       {
-        params: {
+        timetableId: props.timetableEntry.id,
-          timetableId: props.timetableEntry.id,
+        returnType: 'detailed'
-          returnType: 'detailed'
-        }
       }
     );
 
-    if (!responseData || responseData.data.length != 1) {
+    if (!responseData || responseData.length != 1) {
       timetableDetails.value = null;
       return;
     }
 
-    timetableDetails.value = responseData.data[0];
+    timetableDetails.value = responseData[0];
   } catch (error) {
     // this.dataStatus = Status.Data.Error;
     console.error(error);

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -59,7 +59,17 @@
       </strong>
 
       <router-link
-        v-if="apiStore.donatorsData.includes(timetable.driverName)"
+        v-if="isCreator(timetable.driverName)"
+        class="text--creator"
+        data-tooltip-type="CreatorTooltip"
+        :data-tooltip-content="$t('donations.creator-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
+      >
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
+
+      <router-link
+        v-else-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
         data-tooltip-type="DonatorTooltip"
         :data-tooltip-content="$t('donations.driver-message')"
@@ -115,6 +125,7 @@ import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   components: { FlagIcon },
@@ -122,7 +133,8 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 

src/components/JournalView/typings.ts

@@ -15,7 +15,8 @@ export namespace Journal {
     | 'search-issuedFrom'
     | 'search-terminatingAt'
     | 'search-via'
-    | 'select-categoryCode';
+    | 'select-categoryCode'
+    | 'search-headUnit';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;

src/components/PlayerProfileView/ProfileHistoryList.vue

@@ -14,7 +14,7 @@
     </div>
 
     <div class="history-list-box">
-      <Loading v-if="journalDataStatus == Status.Data.Loading" />
+      <Loading v-if="journalStatus == Status.Data.Loading" />
 
       <div v-else-if="combinedJournal.length == 0" class="no-recent-history">
         {{ t('profile.list.no-recent-history') }}
@@ -107,12 +107,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  PropType,
+  reactive,
+  ref
+} from 'vue';
 import { dateToLocaleString, humanizeDuration } from '../../composables/time';
 import { API } from '../../typings/api';
 import { useI18n } from 'vue-i18n';
 import { useApiStore } from '../../store/apiStore';
-import { useRoute } from 'vue-router';
+import { onBeforeRouteUpdate, useRoute } from 'vue-router';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
 
@@ -127,18 +136,19 @@ interface JournalEntry {
 const props = defineProps({
   playerName: {
     type: String
+  },
+
+  playerJournal: {
+    type: Object as PropType<API.PlayerJournal.Data>,
+  },
+
+  journalStatus: {
+    type: Number as PropType<Status.Data>,
+    required: true
   }
 });
 
 const { t } = useI18n();
-const apiStore = useApiStore();
-const route = useRoute();
-
-const playerId = ref(-1);
-const playerJournal = ref<API.PlayerJournal.Data | null>(null);
-const journalDataStatus = ref(Status.Data.Initialized);
-
-const intervalId = ref(-1);
 
 const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
   Timetable: true,
@@ -146,23 +156,13 @@ const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
   IssuedTimetable: true
 });
 
-onMounted(() => {
-  fetchPlayerJournal();
-  intervalId.value = setInterval(fetchPlayerJournal, 30000);
-});
-
-onDeactivated(() => {
-  clearInterval(intervalId.value);
-  intervalId.value = -1;
-});
-
 const combinedJournal = computed<JournalEntry[]>(() => {
-  if (!playerJournal.value || !props.playerName) return [];
+  if (!props.playerJournal || !props.playerName) return [];
 
   const list = [
-    ...playerJournal.value.timetables,
+    ...props.playerJournal.timetables,
-    ...playerJournal.value.duties,
+    ...props.playerJournal.duties,
-    ...playerJournal.value.issuedTimetables
+    ...props.playerJournal.issuedTimetables
   ]
     .reduce<JournalEntry[]>((acc, v) => {
       // Timetable or dispatcher type
@@ -209,35 +209,6 @@ function toggleFilter(filterType: JournalEntryType) {
 
   activeFilterTypes[filterType] = toggledState;
 }
-
-async function fetchPlayerJournal() {
-  const queryPlayerId = Number(route.query.playerId) || -1;
-
-  if (!apiStore.client || !queryPlayerId) return;
-
-  if (queryPlayerId != playerId.value) {
-    journalDataStatus.value = Status.Data.Loading;
-  }
-
-  playerId.value = queryPlayerId;
-
-  try {
-    const response = await apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
-      params: {
-        playerId: queryPlayerId,
-        dateScope: '30d'
-      }
-    });
-
-    playerJournal.value = response.data;
-    journalDataStatus.value = Status.Data.Loaded;
-  } catch (error) {
-    console.error(error);
-    journalDataStatus.value = Status.Data.Error;
-  }
-
-  return null;
-}
 </script>
 
 <style lang="scss" scoped>

src/components/PlayerProfileView/ProfilePlayerAvatar.vue

@@ -1,38 +1,42 @@
 <template>
   <div class="player-avatar">
     <img
-      v-if="avatarId"
+      v-if="props.playerTD2Info && props.playerTD2Info.avatar"
+      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${props.playerTD2Info.avatar};type=avatar`"
       class="player-avatar-image"
       ref="avatarImageRef"
-      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${avatarId};type=avatar`"
       alt="player image"
       @load="onAvatarLoadSuccess"
       @error="onAvatarLoadError"
     />
 
     <img
-      v-if="avatarLoadingStatus == Status.Data.Error || avatarId == 0"
+      v-if="
+        avatarLoadingStatus == Status.Data.Error ||
+        (props.playerTD2Info && !props.playerTD2Info.avatar)
+      "
       class="img-placeholder"
       height="100"
       src="/images/default-avatar.jpg"
     />
 
-    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading || avatarId === undefined" />
+    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { PropType, ref, useTemplateRef } from 'vue';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
+import { Td2API } from '../../typings/api';
 
-defineProps({
+const props = defineProps({
-  avatarId: {
+  playerTD2Info: {
-    type: Number
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
   }
 });
 
-const avatarImageRef = ref<HTMLImageElement | null>(null);
+const avatarImageRef = useTemplateRef('avatarImageRef');
 const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
 
 function onAvatarLoadSuccess() {

src/components/PlayerProfileView/ProfileSummary.vue

@@ -2,10 +2,13 @@
   <section class="profile-summary">
     <div class="player-info">
       <div class="info-main">
-        <ProfilePlayerAvatar :avatarId="playerTD2Info?.avatar" />
+        <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
 
         <div>
-          <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
+          <h2
+            class="player-name-header"
+            :class="{ 'text--donator': isPlayerDonator, 'text--creator': isPlayerCreator }"
+          >
             <a :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`" target="_blank">
               <img
                 v-if="isPlayerDonator"
@@ -69,16 +72,16 @@
             </a>
           </div>
 
-          <!-- Current activity -->
+          <!-- Current activities -->
           <div
-            class="player-activity"
+            class="player-activities-box"
             v-if="activeDispatches.length > 0 || activeTrains.length > 0"
           >
             <div class="info-activity" v-if="activeDispatches.length > 0">
               <router-link
                 v-for="d in activeDispatches"
                 class="dispatcher-badge"
-                :to="`/scenery?station=${d.stationName}`"
+                :to="`/scenery?station=${d.stationName}&region=${d.region}`"
               >
                 <img src="/images/icon-user.svg" width="25" alt="user icon" />
                 <b>{{ d.stationName }} ({{ getRegionNameById(d.region) }})</b>
@@ -88,17 +91,17 @@
 
             <div class="info-activity" v-if="activeTrains.length > 0">
               <router-link
-                v-for="d in activeTrains"
+                v-for="t in activeTrains"
-                :to="`/driver?trainId=${d.id}`"
+                :to="`/driver?trainId=${t.id}`"
                 class="driver-badge"
               >
                 <img src="/images/icon-train.svg" width="25" alt="train icon" />
-                <span v-if="d.timetable" class="text--primary">{{ d.timetable.category }}</span>
+                <span v-if="t.timetable" class="text--primary">{{ t.timetable.category }}</span>
-                <span>{{ d.trainNo }}</span>
+                <span>{{ t.trainNo }}</span>
                 &bull;
-                <span>{{ d.currentStationName }} ({{ getRegionNameById(d.region) }})</span>
+                <span>{{ t.currentStationName }} ({{ getRegionNameById(t.region) }})</span>
                 &bull;
-                <span class="text--grayed">{{ d.stockString.split(';')[0] }}</span>
+                <span class="text--grayed">{{ t.stockString.split(';')[0] }}</span>
               </router-link>
             </div>
           </div>
@@ -221,7 +224,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, ref } from 'vue';
+import { computed, onActivated, onMounted, PropType, ref, watch } from 'vue';
 import { API, Td2API } from '../../typings/api';
 import { calculateExpStyles } from '../../composables/badge';
 import { getCountPercentage } from '../../utils/calcUtils';
@@ -230,9 +233,9 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useApiStore } from '../../store/apiStore';
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
-import axios from 'axios';
 import ProfilePlayerAvatar from './ProfilePlayerAvatar.vue';
 import { getRegionNameById } from '../../utils/regionUtils';
+import { isCreator } from '../../utils/userUtils';
 
 const { t } = useI18n();
 
@@ -245,20 +248,20 @@ const props = defineProps({
     required: true
   },
 
+  playerTD2Info: {
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
+  },
+
   playerName: {
     type: String
   }
 });
 
-const playerTD2Info = ref<Td2API.UsersInfoByName.UserInfo | null>(null);
-
 const isPlayerDonator = computed(() =>
   props.playerName ? apiStore.donatorsData.includes(props.playerName) : false
 );
 
-onMounted(() => {
+const isPlayerCreator = computed(() => (props.playerName ? isCreator(props.playerName) : false));
-  fetchTD2Data();
-});
 
 const activeDispatches = computed(() => {
   if (!props.playerName) return [];
@@ -278,27 +281,6 @@ const activeTrains = computed(() => {
     (t) => t.driverName == props.playerName && (t.lastSeen >= Date.now() - 60000 || t.online)
   );
 });
-
-async function fetchTD2Data() {
-  if (!props.playerName) return;
-
-  try {
-    const response = await axios.get<Td2API.UsersInfoByName.Response>('https://api.td2.info.pl', {
-      params: {
-        method: 'getUsersInfoByName',
-        name: props.playerName
-      }
-    });
-
-    if (response.data.success && response.data.message.length == 1) {
-      playerTD2Info.value = response.data.message[0];
-    }
-  } catch (error) {
-    console.error(error);
-  }
-
-  return;
-}
 </script>
 
 <style lang="scss" scoped>
@@ -372,8 +354,6 @@ async function fetchTD2Data() {
 
     gap: 0.25em;
     font-weight: bold;
-
-    padding: 0.25em 0.5em;
     border-radius: 0.5em;
   }
 }

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -127,9 +127,8 @@ export default defineComponent({
           this.station?.name || this.onlineScenery?.name
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
-        const historyAPIData: API.DispatcherHistory.Response = await (
+        const historyAPIData: API.DispatcherHistory.Response =
-          await this.apiStore.client!.get(requestString)
+          await this.apiStore.client.get(requestString);
-        ).data;
 
         this.dataStatus = Status.Data.Loaded;
         return historyAPIData;

src/components/SceneryView/SceneryHeader.vue

@@ -1,19 +1,15 @@
 <template>
   <section class="info-header">
-    <button
+    <button class="btn btn-return" :title="$t('scenery.return-btn')" @click="onReturnButtonClick">
-      class="btn btn-return"
-      :title="$t('scenery.return-btn')"
-      @click="onReturnButtonClick"
-    >
       <img src="/images/icon-back.svg" alt="return button" />
     </button>
 
-    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
+    <div class="scenery-name">
-      {{ stationName.replace(/_/g, ' ') }}
+      <a v-if="station?.generalInfo" :href="station.generalInfo.url" target="_blank">
-    </a>
+        {{ stationName.replace(/_/g, ' ') }}
+      </a>
 
-    <div class="scenery-abbrev" v-if="station?.generalInfo?.abbr">
+      <span v-else> {{ stationName.replace(/_/g, ' ') }}</span>
-      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
     </div>
 
     <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
@@ -28,12 +24,6 @@ import { useRoute, useRouter } from 'vue-router';
 const route = useRoute();
 const router = useRouter();
 
-const prevPath = ref('/');
-
-onMounted(() => {
-  prevPath.value = (route.meta['prevPath'] as string) ?? '/';
-});
-
 defineProps({
   station: {
     type: Object as PropType<Station>
@@ -50,7 +40,7 @@ defineProps({
 });
 
 function onReturnButtonClick() {
-  router.push(prevPath.value);
+  router.push('/');
 }
 </script>
 
@@ -61,15 +51,14 @@ function onReturnButtonClick() {
 .btn-return {
   $bgColor: #2b2b2b;
   background-color: $bgColor;
-  margin-bottom: 0.5em;
-
-  img {
-    width: 2em;
-  }
 
   &:hover {
     background-color: color.adjust($color: $bgColor, $lightness: 15%);
   }
+
+  img {
+    height: 2em;
+  }
 }
 
 .scenery-name {
@@ -81,13 +70,7 @@ function onReturnButtonClick() {
   text-transform: uppercase;
 }
 
-.scenery-abbrev {
-  font-size: 1.3em;
-  color: #aaa;
-}
-
 .scenery-hash {
-  margin-top: 0.5em;
   color: #aaa;
   font-size: 1.2em;
 }

src/components/SceneryView/SceneryInfo.vue

@@ -1,29 +1,32 @@
 <template>
   <div class="scenery-info">
     <section>
-      <SceneryInfoIcons :station="station" />
+      <div class="info-station-data" v-if="apiStore.dataStatuses.sceneries == Status.Data.Loaded">
-      <SceneryInfoGeneral :station="station" />
+        <SceneryInfoIcons :station="station" />
-      <SceneryInfoRoutes v-if="station" :station="station" />
+        <SceneryInfoGeneral :station="station" />
-      <SceneryInfoAuthors :station="station" />
+        <SceneryInfoRoutes v-if="station" :station="station" />
+        <SceneryInfoAuthors :station="station" />
+      </div>
 
-      <div style="margin: 1em 0; height: 2px; background-color: white"></div>
+      <div class="info-station-loading" v-else>
+        <Loading />
+      </div>
+
+      <div class="info-divider"></div>
 
-      <!-- info dispatcher -->
       <SceneryInfoDispatcher :onlineScenery="onlineScenery" />
 
-      <div class="info-lists">
+      <div class="info-online-lists">
-        <!-- user list -->
         <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
-
-        <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
       </div>
     </section>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { PropType, defineComponent } from 'vue';
+import { PropType } from 'vue';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 
 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
@@ -32,27 +35,18 @@ import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
 import SceneryInfoAuthors from './SceneryInfo/SceneryInfoAuthors.vue';
+import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';
 
-import { ActiveScenery, Station } from '../../typings/common';
+const apiStore = useApiStore();
 
-export default defineComponent({
+defineProps({
-  components: {
+  station: {
-    SceneryInfoDispatcher,
+    type: Object as PropType<Station>
-    SceneryInfoGeneral,
-    SceneryInfoIcons,
-    SceneryInfoAuthors,
-    SceneryInfoUserList,
-    SceneryInfoSpawnList,
-    SceneryInfoRoutes
   },
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },
 
-    onlineScenery: {
+  onlineScenery: {
-      type: Object as PropType<ActiveScenery>
+    type: Object as PropType<ActiveScenery>
-    }
   }
 });
 </script>
@@ -60,7 +54,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/responsive';
 
-.info-lists {
+.info-station-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 300px;
+}
+
+.info-online-lists {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
@@ -68,6 +70,12 @@ export default defineComponent({
   margin-top: 1em;
 }
 
+.info-divider {
+  margin: 1em 0;
+  height: 3px;
+  background-color: #5b5b5b;
+}
+
 .scenery-topic a {
   font-weight: bold;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -9,9 +9,16 @@
       </span>
 
       <router-link class="dispatcher-name" :to="`/profile?playerId=${onlineScenery.dispatcherId}`">
+        <span
+          class="text--creator"
+          v-if="isCreator(onlineScenery.dispatcherName)"
+          :title="$t('donations.creator-message')"
+        >
+          {{ onlineScenery.dispatcherName }}
+        </span>
         <span
           class="text--donator"
-          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
+          v-else-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
           :title="$t('donations.dispatcher-message')"
         >
           {{ onlineScenery.dispatcherName }}
@@ -51,6 +58,7 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
 import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
@@ -58,7 +66,8 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 

src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

@@ -5,51 +5,69 @@
     </div>
 
     <div v-else>
-      <span>
+      <div>
-        <b>{{ $t('availability.title') }}:</b>
+        <span>
-        {{ $t(`availability.${station.generalInfo.availability}`) }}
+          <a
-
+            v-if="station?.generalInfo"
-        <span v-if="station.generalInfo.reqLevel > -1">
+            :href="station.generalInfo.url"
-          -
+            class="forum-link"
-          {{
+            target="_blank"
-            $t(
+          >
-              'scenery.req-level',
+            {{ $t('scenery.forum-topic') }}
-              { lvl: station.generalInfo.reqLevel },
+          </a>
-              station.generalInfo.reqLevel
-            )
-          }}
         </span>
-      </span>
 
-      <span>
+        <span>
-        &bull; <b>{{ $t('controls.title') }}:</b>
+          &bull;
-        {{ $t(`controls.${station.generalInfo.controlType}`) }}
+          <b>{{ $t('scenery.abbrev') }}</b> {{ station.generalInfo.abbr }}
-      </span>
+        </span>
 
-      <span>
+        <span>
-        &bull; <b>{{ $t('signals.title') }}:</b>
+          &bull; <b>{{ $t('availability.title') }}:</b>
-        {{ $t(`signals.${station.generalInfo.signalType}`) }}
+          {{ $t(`availability.${station.generalInfo.availability}`) }}
-      </span>
 
-      <span v-if="station.generalInfo.lines">
+          <span v-if="station.generalInfo.reqLevel > -1">
-        &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+            -
-      </span>
+            {{
+              $t(
+                'scenery.req-level',
+                { lvl: station.generalInfo.reqLevel },
+                station.generalInfo.reqLevel
+              )
+            }}
+          </span>
+        </span>
 
-      <span v-if="station.generalInfo.project">
+        <span>
-        &bull; <b>{{ $t('scenery.project-title') }}: </b>
+          &bull; <b>{{ $t('controls.title') }}:</b>
-        <a
+          {{ $t(`controls.${station.generalInfo.controlType}`) }}
-          style="color: salmon; text-decoration: underline; font-weight: bold"
+        </span>
-          :href="station.generalInfo.projectUrl"
-          target="_blank"
-        >
-          {{ station.generalInfo.project }}
-        </a>
-      </span>
 
-      <span v-if="additionalTools.length != 0">
+        <span>
-        &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
+          &bull; <b>{{ $t('signals.title') }}:</b>
-        {{ additionalTools.join(', ') }}
+          {{ $t(`signals.${station.generalInfo.signalType}`) }}
-      </span>
+        </span>
+
+        <span v-if="station.generalInfo.lines">
+          &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+        </span>
+
+        <span v-if="station.generalInfo.project">
+          &bull; <b>{{ $t('scenery.project-title') }}: </b>
+          <a
+            style="color: salmon; text-decoration: underline; font-weight: bold"
+            :href="station.generalInfo.projectUrl"
+            target="_blank"
+          >
+            {{ station.generalInfo.project }}
+          </a>
+        </span>
+
+        <span v-if="additionalTools.length != 0">
+          &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
+          {{ additionalTools.join(', ') }}
+        </span>
+      </div>
     </div>
   </section>
 </template>
@@ -84,9 +102,14 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+}
 
-  div {
+.scenery-abbrev {
-    margin: 0 0.15em;
+  font-size: 1.05em;
-  }
+}
+
+a.forum-link {
+  text-decoration: underline;
+  font-weight: bold;
 }
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -1,102 +1,101 @@
 <template>
-  <section class="info-icons">
+  <section class="info-icons-section">
-    <span v-if="!station || !station.generalInfo">
+    <div class="icons-box">
+      <span v-if="!station || !station.generalInfo">
+        <img
+          class="icon-info"
+          src="/images/icon-unknown.svg"
+          alt="icon-unknown"
+          :title="$t('sceneries.info.unknown')"
+        />
+      </span>
+
+      <span
+        v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
+        class="scenery-icon icon-info level"
+        :style="calculateExpStyles(station?.generalInfo.reqLevel)"
+      >
+        {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
+      </span>
+
       <img
+        v-if="station?.generalInfo?.availability == 'nonPublic'"
         class="icon-info"
-        src="/images/icon-unknown.svg"
+        src="/images/icon-lock.svg"
-        alt="icon-unknown"
+        alt="Non-public scenery"
-        :title="$t('sceneries.info.unknown')"
+        :title="$t('sceneries.info.non-public')"
       />
-    </span>
 
-    <span
+      <img
-      v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
+        v-if="station?.generalInfo?.availability == 'unavailable'"
-      class="scenery-icon icon-info level"
+        class="icon-info"
-      :style="calculateExpStyle(station?.generalInfo.reqLevel)"
+        src="/images/icon-unavailable.svg"
-    >
+        alt="Unavailable scenery"
-      {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
+        :title="$t('sceneries.info.unavailable')"
-    </span>
+      />
 
-    <img
+      <img
-      v-if="station?.generalInfo?.availability == 'nonPublic'"
+        v-if="station?.generalInfo?.availability == 'abandoned'"
-      class="icon-info"
+        class="icon-info"
-      src="/images/icon-lock.svg"
+        src="/images/icon-abandoned.svg"
-      alt="Non-public scenery"
+        alt="Abandoned scenery"
-      :title="$t('sceneries.info.non-public')"
+        :title="$t('sceneries.info.abandoned')"
-    />
+      />
 
-    <img
+      <span
-      v-if="station?.generalInfo?.availability == 'unavailable'"
+        v-if="station?.generalInfo"
-      class="icon-info"
+        class="scenery-icon icon-info"
-      src="/images/icon-unavailable.svg"
+        :class="station?.generalInfo.controlType.replace('+', '-')"
-      alt="Unavailable scenery"
+        :title="
-      :title="$t('sceneries.info.unavailable')"
+          $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
-    />
+        "
+      >
+        {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+      </span>
 
-    <img
+      <img
-      v-if="station?.generalInfo?.availability == 'abandoned'"
+        v-if="station?.generalInfo?.signalType"
-      class="icon-info"
+        class="icon-info"
-      src="/images/icon-abandoned.svg"
+        :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-      alt="Abandoned scenery"
+        :alt="station.generalInfo.signalType"
-      :title="$t('sceneries.info.abandoned')"
+        :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-    />
+      />
 
-    <span
+      <img
-      v-if="station?.generalInfo"
+        v-if="station?.generalInfo?.lines"
-      class="scenery-icon icon-info"
+        class="icon-info"
-      :class="station?.generalInfo.controlType.replace('+', '-')"
+        src="/images/icon-real.svg"
-      :title="
+        alt="real scenery"
-        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+        :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
-      "
+      />
-    >
-      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
-    </span>
 
-    <img
+      <img
-      v-if="station?.generalInfo?.signalType"
+        v-if="station?.generalInfo?.SUP"
-      class="icon-info"
+        class="icon-info"
-      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+        src="/images/icon-SUP.svg"
-      :alt="station.generalInfo.signalType"
+        alt="SUP (RASP-UZK)"
-      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+        :title="$t('sceneries.info.SUP')"
-    />
+      />
 
-    <img
+      <img
-      v-if="station?.generalInfo?.lines"
+        v-if="station?.generalInfo?.ASDEK"
-      class="icon-info"
+        class="icon-info"
-      src="/images/icon-real.svg"
+        src="/images/icon-ASDEK.svg"
-      alt="real scenery"
+        alt="dSAT ASDEK"
-      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
+        :title="$t('sceneries.info.ASDEK')"
-    />
+      />
-
+    </div>
-    <img
-      v-if="station?.generalInfo?.SUP"
-      class="icon-info"
-      src="/images/icon-SUP.svg"
-      alt="SUP (RASP-UZK)"
-      :title="$t('sceneries.info.SUP')"
-    />
-
-    <img
-      v-if="station?.generalInfo?.ASDEK"
-      class="icon-info"
-      src="/images/icon-ASDEK.svg"
-      alt="dSAT ASDEK"
-      :title="$t('sceneries.info.ASDEK')"
-    />
   </section>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { PropType, defineComponent } from 'vue';
+import { PropType } from 'vue';
-import styleMixin from '../../../mixins/styleMixin';
 import { Station } from '../../../typings/common';
+import { calculateExpStyles } from '../../../composables/badge';
 
-export default defineComponent({
+defineProps({
-  mixins: [styleMixin],
+  station: {
-  props: {
+    type: Object as PropType<Station>
-    station: {
-      type: Object as PropType<Station>
-    }
   }
 });
 </script>
@@ -104,12 +103,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../../styles/icons';
 
-.info-icons {
+.icons-box {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 
-  margin: 1em;
+  margin: 0.5em;
 }
 
 .icon-info {

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,18 +1,18 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="oneWayRoutes.length > 0">
+    <div class="routes one-way" v-if="singleRoutesAvailable.length > 0">
       <button
         class="routes-btn"
         @click="toggleRoutesVisibility('single')"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
       >
         <b>{{ $t('scenery.one-way-routes') }}</b>
         <i class="fa-solid" :class="`${showInternalSingleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
       </button>
 
       <ul class="routes-list">
-        <li v-for="route in oneWayRoutes" :key="route.routeName">
+        <li v-for="route in singleRoutesFiltered" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}</span
           >
@@ -24,22 +24,29 @@
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
+
+        <li v-if="singleRoutesFiltered.length == 0">
+          <span class="routes-hidden">
+            <i class="fa-solid fa-eye-slash"></i>
+            {{ $t('scenery.routes-hidden') }}
+          </span>
+        </li>
       </ul>
     </div>
 
-    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
+    <div class="routes two-way" v-if="doubleRoutesAvailable.length > 0">
       <button
         class="routes-btn"
         @click="toggleRoutesVisibility('double')"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
       >
         <b>{{ $t('scenery.two-way-routes') }}</b>
         <i class="fa-solid" :class="`${showInternalDoubleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
       </button>
 
       <ul class="routes-list">
-        <li v-for="route in twoWayRoutes" :key="route.routeName">
+        <li v-for="route in doubleRoutesFiltered" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}
           </span>
@@ -54,6 +61,13 @@
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
+
+        <li v-if="doubleRoutesFiltered.length == 0">
+          <span class="routes-hidden">
+            <i class="fa-solid fa-eye-slash"></i>
+            {{ $t('scenery.routes-hidden') }}
+          </span>
+        </li>
       </ul>
     </div>
   </section>
@@ -102,20 +116,32 @@ export default defineComponent({
   },
 
   computed: {
-    oneWayRoutes() {
+    singleRoutesAvailable() {
       return (
         this.station.generalInfo?.routes.single
-          .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingleRoutes)
+          .filter((r) => !r.hidden)
           .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
       );
     },
 
-    twoWayRoutes() {
+    doubleRoutesAvailable() {
       return (
         this.station.generalInfo?.routes.double
-          .filter((r) => !r.isInternal || r.isInternal == this.showInternalDoubleRoutes)
+          .filter((r) => !r.hidden)
           .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
       );
+    },
+
+    singleRoutesFiltered() {
+      return this.singleRoutesAvailable.filter(
+        (r) => this.showInternalSingleRoutes || !r.isInternal
+      );
+    },
+
+    doubleRoutesFiltered() {
+      return this.doubleRoutesAvailable.filter(
+        (r) => this.showInternalDoubleRoutes || !r.isInternal
+      );
     }
   }
 });
@@ -154,11 +180,6 @@ ul.routes-list {
 
   li {
     margin: 0.5em 0.25em;
-    cursor: pointer;
-
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
 
     & > span {
       padding: 0.2em;
@@ -182,11 +203,16 @@ ul.routes-list {
         background-color: #303030;
         color: #cfcfcf;
       }
+
       &.sbl {
         color: var(--clr-primary);
         background-color: #404040;
       }
 
+      &.routes-hidden {
+        background-color: #4b4b4b;
+      }
+
       &:last-child {
         border-radius: 0 0.5em 0.5em 0;
       }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -29,7 +29,8 @@
             <i
               v-if="
                 train.timetableData != undefined &&
-                (train.lastSeen <= Date.now() - 60000 || !train.online)
+                train.lastSeen <= Date.now() - 60000 &&
+                !train.online
               "
               class="fa-solid fa-user-slash"
               style="color: lightcoral"

src/components/SceneryView/SceneryTimetable.vue

@@ -1,247 +1,18 @@
 <template>
   <section class="scenery-timetable">
-    <div class="timetable-header">
+    <SceneryTimetableHeader
-      <h3>
+      :station="station"
-        <img src="/images/icon-timetable.svg" alt="icon-timetable" />
+      :onlineScenery="onlineScenery"
-        <span>{{ $t('scenery.timetables') }}</span>
+      :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+    />
 
-        <span>
+    <SceneryTimetableList
-          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
+      :station="station"
-          <span> / </span>
+      :onlineScenery="onlineScenery"
-          <span class="text--grayed">
+      :chosenCheckpoint="chosenCheckpoint"
-            {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
+      :showStockThumbnails="showStockThumbnails"
-          </span>
+    />
-        </span>
-
-        <span class="header_links" v-if="station && onlineScenery">
-          <a
-            :href="generatorHref"
-            target="_blank"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
-          >
-            <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
-          </a>
-
-          <a
-            :href="pragotronHref"
-            target="_blank"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
-          >
-            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-          </a>
-
-          <a
-            :href="tabliceZbiorczeHref"
-            target="_blank"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
-          >
-            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
-          </a>
-        </span>
-      </h3>
-
-      <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
-        <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
-          <template v-if="i > 0">&bull;</template>
-          <router-link
-            class="checkpoint-item"
-            :class="{ current: chosenCheckpoint === ch }"
-            :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
-            >{{ ch }}</router-link
-          >
-        </template>
-      </div>
-
-      <div class="timetable-checkpoints" v-else-if="onlineScenery">
-        <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
-          <template v-if="i > 0">&bull;</template>
-          <router-link
-            class="checkpoint-item"
-            :class="{ current: chosenCheckpoint === ch }"
-            :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
-            >{{ ch }}</router-link
-          >
-        </template>
-      </div>
-    </div>
-
-    <div class="timetable-list">
-      <transition-group name="list-anim">
-        <div
-          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
-          style="padding-bottom: 5em"
-          key="list-loading"
-        >
-          <Loading />
-        </div>
-
-        <span
-          class="timetable-item empty"
-          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
-          key="list-offline"
-        >
-          {{ $t('scenery.offline') }}
-        </span>
-
-        <div
-          class="timetable-item empty"
-          v-else-if="sceneryTimetables.length == 0"
-          key="list-no-timetables"
-        >
-          {{ $t('scenery.no-timetables') }}
-        </div>
-
-        <router-link
-          class="timetable-item"
-          v-else
-          v-for="(row, i) in sceneryTimetables"
-          :key="row.train.id + i"
-          tabindex="0"
-          :to="row.train.driverRouteLocation"
-        >
-          <span class="timetable-general">
-            <span class="general-info">
-              <div class="info-train">
-                <!-- Cargo warnings & details badges -->
-                <span
-                  class="train-badge twr"
-                  v-if="row.train.timetableData!.twr"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="$t('warnings.TWR')"
-                >
-                  TWR
-                </span>
-
-                <span
-                  class="train-badge tn"
-                  v-if="row.train.timetableData!.hasDangerousCargo"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="$t('warnings.TN')"
-                >
-                  TN
-                </span>
-
-                <span
-                  class="train-badge pn"
-                  v-if="row.train.timetableData!.hasExtraDeliveries"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="$t('warnings.PN')"
-                >
-                  PN
-                </span>
-
-                <!-- Train info -->
-                <span
-                  data-tooltip-type="TrainInfoTooltip"
-                  :data-tooltip-content="row.train.id"
-                  class="tooltip-help"
-                >
-                  <b class="text--primary">
-                    {{ row.train.timetableData!.category }}
-                  </b>
-
-                  <b>&nbsp;{{ row.train.trainNo }}</b>
-                  &bull;
-                  {{ row.train.driverName }}
-
-                  <i
-                    class="fa-solid fa-user-slash"
-                    style="color: salmon"
-                    v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
-                  ></i>
-                </span>
-
-                <!-- Train stop comments -->
-                <span
-                  v-if="row.checkpointStop.comments"
-                  class="stop-comments-icon"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="row.checkpointStop.comments"
-                >
-                  <img src="/images/icon-warning.svg" />
-                </span>
-              </div>
-
-              <div class="info-route">
-                <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
-              </div>
-
-              <ScheduledTrainStatus :sceneryTimetableRow="row" />
-            </span>
-          </span>
-
-          <span class="timetable-schedule">
-            <span class="schedule-arrival">
-              <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
-                {{ $t('timetables.begins') }}
-              </span>
-
-              <span class="arrival-time" v-else>
-                <div v-if="row.checkpointStop.arrivalDelay == 0">
-                  <span>{{ timestampToString(row.checkpointStop.arrivalTimestamp) }}</span>
-                </div>
-                <div v-else>
-                  <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(row.checkpointStop.arrivalTimestamp)
-                    }}</s>
-                  </div>
-
-                  <span>
-                    {{ timestampToString(row.checkpointStop.arrivalRealTimestamp) }}
-                    ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
-                    }}{{ row.checkpointStop.arrivalDelay }})
-                  </span>
-                </div>
-              </span>
-            </span>
-
-            <span class="schedule-stop">
-              <span class="stop-connection">
-                {{ row.currentElement.arrivalRouteExt }}
-              </span>
-
-              <span class="stop-time">
-                {{ row.checkpointStop.stopTime || '' }}
-                {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
-              </span>
-
-              <span class="stop-connection">
-                {{ row.currentElement.departureRouteExt }}
-              </span>
-            </span>
-
-            <span class="schedule-departure">
-              <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
-                {{ $t('timetables.terminates') }}
-              </span>
-
-              <span class="departure-time" v-else>
-                <div v-if="row.checkpointStop.departureDelay == 0">
-                  <span>{{ timestampToString(row.checkpointStop.departureTimestamp) }}</span>
-                </div>
-                <div v-else>
-                  <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(row.checkpointStop.departureTimestamp)
-                    }}</s>
-                  </div>
-
-                  <span>
-                    {{ timestampToString(row.checkpointStop.departureRealTimestamp) }}
-                    ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
-                    }}{{ row.checkpointStop.departureDelay }})
-                  </span>
-                </div>
-              </span>
-            </span>
-          </span>
-        </router-link>
-      </transition-group>
-    </div>
   </section>
 </template>
 
@@ -249,21 +20,21 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import Loading from '../Global/Loading.vue';
+import SceneryTimetableHeader from './SceneryTimetable/SceneryTimetableHeader.vue';
+
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import { ActiveScenery, Station } from '../../typings/common';
-import { SceneryTimetableRow } from './typings';
+import SceneryTimetableList from './SceneryTimetable/SceneryTimetableList.vue';
-import { ActiveScenery, Station, TooltipTrainInfo, Train } from '../../typings/common';
+import StorageManager from '../../managers/storageManager';
-import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
-  components: { Loading, ScheduledTrainStatus },
+  components: { SceneryTimetableHeader, SceneryTimetableList },
 
   mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
@@ -277,7 +48,8 @@ export default defineComponent({
   },
 
   data: () => ({
-    listOpen: false
+    listOpen: false,
+    showStockThumbnails: false
   }),
 
   activated() {
@@ -313,69 +85,6 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    tabliceZbiorczeHref() {
-      let url = `https://tablice-td2.web.app/?station=${this.station!.name}`;
-      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
-
-      return url;
-    },
-
-    pragotronHref() {
-      let url = `https://pragotron-td2.web.app/board?name=${this.station!.name}&region=${this.mainStore.region.id}`;
-      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
-
-      return url;
-    },
-
-    generatorHref() {
-      return `https://generator-td2.web.app/?sceneryId=${this.onlineScenery!.name}|${this.onlineScenery!.region}`;
-    },
-
-    sceneryTimetables(): SceneryTimetableRow[] {
-      if (!this.onlineScenery) return [];
-
-      const sceneryName = this.$route.query['station']?.toString().replace(/_/g, ' ') ?? '';
-
-      return this.onlineScenery.scheduledTrains
-        .filter(
-          (ct) =>
-            // ct.timetablePathElement.stationName == sceneryName &&
-            ct.train.region == this.mainStore.region.id &&
-            this.chosenCheckpoint &&
-            ct.checkpointStop.stopNameRAW.toLowerCase() == this.chosenCheckpoint.toLowerCase()
-        )
-        .map((ct) => {
-          const trainStopStatus = getTrainStopStatus(
-            ct.checkpointStop,
-            ct.train.currentStationName,
-            sceneryName
-          );
-
-          return {
-            checkpointStop: ct.checkpointStop,
-            train: ct.train,
-            prevElement: ct.previousSceneryElement,
-            nextElement: ct.nextSceneryElement,
-            currentElement: ct.timetablePathElement,
-            status: trainStopStatus
-          };
-        })
-        .sort((a, b) => {
-          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) < 0)
-            return -1;
-
-          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) > 0)
-            return 1;
-
-          if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
-          if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
-
-          return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
-        });
-    }
-  },
-
   methods: {
     loadSelectedOption() {
       const queryCheckpoint = this.$route.query['checkpoint']?.toString();
@@ -402,205 +111,16 @@ export default defineComponent({
           checkpointsListRef[0] ??
           sceneryName;
       }
-    },
-
-    setCheckpoint(cp: string) {
-      this.chosenCheckpoint = cp;
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@use '../../styles/responsive';
-@use '../../styles/animations';
-@use '../../styles/badge';
-
 .scenery-timetable {
+  display: grid;
   height: 100%;
-  overflow-y: scroll;
+  overflow: hidden;
-  padding: 0 0.5em;
+  grid-template-rows: auto 1fr;
-}
-
-.timetable-header {
-  position: sticky;
-  top: 0;
-  z-index: 99;
-
-  background-color: #181818;
-
-  padding: 0.5em;
-
-  img {
-    width: 25px;
-    vertical-align: middle;
-  }
-
-  h3 {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: center;
-
-    gap: 0.5em;
-    font-size: 1.3em;
-  }
-}
-
-.header_links {
-  display: flex;
-  gap: 0.25em;
-  margin-left: 0.5em;
-}
-
-.timetable {
-  &-count {
-    margin-left: 0.5em;
-  }
-
-  &-item {
-    margin: 0.5em auto;
-    padding: 0.5em;
-    max-width: 1100px;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1.2em 0.5em;
-
-    overflow: hidden;
-
-    background: #353535;
-
-    z-index: 10;
-
-    &.empty {
-      padding: 1rem;
-      font-size: 1.2em;
-      color: #bbb;
-    }
-  }
-
-  &-general {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    text-align: left;
-  }
-
-  &-schedule {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.2em;
-    align-items: center;
-
-    width: 100%;
-    max-width: 400px;
-    margin: 0 auto;
-  }
-}
-
-.timetable-checkpoints {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-
-  flex-wrap: wrap;
-  font-size: 1.1em;
-
-  margin-top: 0.5em;
-}
-
-.checkpoint-item {
-  color: #aaa;
-  display: inline;
-
-  &:hover {
-    color: white;
-  }
-
-  &.current {
-    font-weight: bold;
-    color: var(--clr-primary);
-  }
-}
-
-.timetable-list {
-  position: relative;
-}
-
-.general-info {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.info-train {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-}
-
-.info-train > .train-badge {
-  font-size: 0.85em;
-}
-
-.info-number {
-  color: var(--clr-primary);
-}
-
-.info-route {
-  width: 100%;
-  margin-top: 0.25em;
-}
-
-.stop-comments-icon > img {
-  width: 1.3em;
-  vertical-align: top;
-}
-
-.schedule {
-  &-arrival,
-  &-departure {
-    font-size: 1.15em;
-  }
-
-  &-stop {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.5em;
-    align-items: end;
-
-    .stop-connection {
-      font-size: 0.95em;
-    }
-
-    .stop-time {
-      position: relative;
-      inline-size: max-content;
-      align-self: center;
-      font-size: 0.9em;
-
-      color: var(--clr-primary);
-
-      &::after {
-        content: '\027F6';
-        display: block;
-        font-size: 2.2em;
-        line-height: 0.65em;
-      }
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.85em;
-}
-
-@include responsive.smallScreen {
-  .timetable-item {
-    grid-template-columns: 1fr;
-  }
 }
 </style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="scenery-timetable-header">
+    <h3>
+      <img src="/images/icon-timetable.svg" alt="icon-timetable" />
+      <span>{{ $t('scenery.timetables') }}</span>
+
+      <span>
+        <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
+        <span> / </span>
+        <span class="text--grayed">
+          {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
+        </span>
+      </span>
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue';
+import { Station, ActiveScenery } from '../../../typings/common';
+import { useMainStore } from '../../../store/mainStore';
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  },
+
+  chosenCheckpoint: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.scenery-timetable-header {
+  background-color: #181818;
+  padding: 0.5em;
+}
+
+h3 {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+
+  gap: 0.5em;
+  font-size: 1.3em;
+}
+</style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue

@@ -0,0 +1,567 @@
+<template>
+  <div class="scenery-timetable-list">
+    <!-- Checkpoints derived from station data -->
+
+    <div
+      class="timetable-checkpoints"
+      v-if="station?.generalInfo && station.generalInfo.checkpoints.length > 0"
+    >
+      <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
+        <template v-if="i > 0">&bull;</template>
+        <router-link
+          class="checkpoint-item"
+          :class="{ current: chosenCheckpoint === ch }"
+          :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
+        >
+          {{ ch }}
+        </router-link>
+      </template>
+    </div>
+
+    <!-- Missing checkpoints if scenery is not in database -->
+    <div
+      class="timetable-checkpoints"
+      v-else-if="onlineScenery && onlineScenery.missingCheckpoints.length > 0"
+    >
+      <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
+        <template v-if="i > 0">&bull;</template>
+        <router-link
+          class="checkpoint-item"
+          :class="{ current: chosenCheckpoint === ch }"
+          :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
+        >
+          {{ ch }}
+        </router-link>
+      </template>
+    </div>
+
+    <div v-else></div>
+
+    <div class="list-container">
+      <transition-group name="list-anim">
+        <div
+          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
+          style="padding-bottom: 5em"
+          key="list-loading"
+        >
+          <Loading />
+        </div>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
+          key="list-offline"
+        >
+          {{ $t('scenery.offline') }}
+        </div>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0"
+          key="list-no-timetables"
+        >
+          {{ $t('scenery.no-timetables') }}
+        </div>
+
+        <router-link
+          v-for="row in sceneryTimetables"
+          class="timetable-item"
+          :to="row.train.driverRouteLocation"
+          :key="row.train.id"
+        >
+          <div class="item-top">
+            <div class="top-general">
+              <span class="general-info">
+                <div class="info-train">
+                  <!-- Cargo warnings & details badges -->
+                  <span
+                    class="train-badge twr"
+                    v-if="row.train.timetableData!.twr"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.TWR')"
+                  >
+                    TWR
+                  </span>
+
+                  <span
+                    class="train-badge tn"
+                    v-if="row.train.timetableData!.hasDangerousCargo"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.TN')"
+                  >
+                    TN
+                  </span>
+
+                  <span
+                    class="train-badge pn"
+                    v-if="row.train.timetableData!.hasExtraDeliveries"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.PN')"
+                  >
+                    PN
+                  </span>
+
+                  <!-- Train info -->
+                  <span
+                    data-tooltip-type="TrainInfoTooltip"
+                    :data-tooltip-content="row.train.id"
+                    class="tooltip-help"
+                  >
+                    <b class="text--primary">
+                      {{ row.train.timetableData!.category }}
+                    </b>
+
+                    <b>&nbsp;{{ row.train.trainNo }}</b>
+                    &bull;
+                    {{ row.train.driverName }}
+
+                    <i
+                      class="fa-solid fa-user-slash"
+                      style="color: salmon"
+                      v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
+                    ></i>
+                  </span>
+
+                  <!-- Train stop comments -->
+                  <span
+                    v-if="row.checkpointStop.comments"
+                    class="stop-comments-icon"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="row.checkpointStop.comments"
+                  >
+                    <img src="/images/icon-warning.svg" />
+                  </span>
+                </div>
+
+                <div class="info-route">
+                  <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
+                </div>
+
+                <ScheduledTrainStatus :sceneryTimetableRow="row" />
+              </span>
+            </div>
+
+            <div class="top-schedule">
+              <span class="schedule-arrival">
+                <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
+                  {{ $t('timetables.begins') }}
+                </span>
+
+                <span class="arrival-time" v-else>
+                  <div v-if="row.checkpointStop.arrivalDelay == 0">
+                    <span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <s style="margin-right: 0.2em" class="text--grayed">{{
+                        timestampToTimeString(row.checkpointStop.arrivalTimestamp)
+                      }}</s>
+                    </div>
+
+                    <span>
+                      {{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
+                      ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
+                      }}{{ row.checkpointStop.arrivalDelay }})
+                    </span>
+                  </div>
+                </span>
+              </span>
+
+              <span class="schedule-stop">
+                <span class="stop-connection">
+                  {{ row.currentElement.arrivalRouteExt }}
+                </span>
+
+                <span class="stop-time">
+                  {{ row.checkpointStop.stopTime || '' }}
+                  {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
+                </span>
+
+                <span class="stop-connection">
+                  {{ row.currentElement.departureRouteExt }}
+                </span>
+              </span>
+
+              <span class="schedule-departure">
+                <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
+                  {{ $t('timetables.terminates') }}
+                </span>
+
+                <span class="departure-time" v-else>
+                  <div v-if="row.checkpointStop.departureDelay == 0">
+                    <span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <s style="margin-right: 0.2em" class="text--grayed">{{
+                        timestampToTimeString(row.checkpointStop.departureTimestamp)
+                      }}</s>
+                    </div>
+
+                    <span>
+                      {{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
+                      ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
+                      }}{{ row.checkpointStop.departureDelay }})
+                    </span>
+                  </div>
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div class="item-stock-list" v-if="showStockThumbnails">
+            <StockList :trainStockList="row.train.stockList" :thumbnailSize="45" />
+          </div>
+        </router-link>
+      </transition-group>
+    </div>
+
+    <div class="list-actions" v-if="station && onlineScenery">
+      <a
+        :href="generatorHref"
+        target="_blank"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
+      >
+        <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
+      </a>
+
+      <a
+        :href="pragotronHref"
+        target="_blank"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
+      >
+        <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
+      </a>
+
+      <a
+        :href="tabliceZbiorczeHref"
+        target="_blank"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
+      >
+        <img src="/images/icon-tablice.ico" alt="icon-tablice" />
+      </a>
+
+      <div class="list-divider"></div>
+
+      <button
+        class="thumbnails-btn"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t(`scenery.btn-${showStockThumbnails ? 'show' : 'hide'}-timetable-thumbnails`)}</b>`"
+        @click="toggleThumbnails"
+      >
+        <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-expand' : 'fa-compress'}`"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, onMounted, PropType, ref } from 'vue';
+import { Station, ActiveScenery } from '../../../typings/common';
+import { SceneryTimetableRow } from '../typings';
+import { getTrainStopStatus, stopStatusPriorities } from '../utils';
+import { useRoute } from 'vue-router';
+import { useMainStore } from '../../../store/mainStore';
+import { useApiStore } from '../../../store/apiStore';
+import { timestampToTimeString } from '../../../composables/time';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import Loading from '../../Global/Loading.vue';
+import StockList from '../../Global/StockList.vue';
+import StorageManager from '../../../managers/storageManager';
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  },
+
+  chosenCheckpoint: {
+    type: String,
+    required: true
+  }
+});
+
+const route = useRoute();
+const mainStore = useMainStore();
+const apiStore = useApiStore();
+
+const showStockThumbnails = ref(false);
+
+onMounted(() => {
+  handleStockThumbnails();
+});
+
+const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
+  if (!props.onlineScenery) return [];
+
+  const sceneryName = route.query['station']?.toString().replace(/_/g, ' ') ?? '';
+
+  return props.onlineScenery.scheduledTrains
+    .filter(
+      (ct) =>
+        // ct.timetablePathElement.stationName == sceneryName &&
+        ct.train.region == mainStore.region.id &&
+        props.chosenCheckpoint &&
+        ct.checkpointStop.stopNameRAW.toLowerCase() == props.chosenCheckpoint.toLowerCase()
+    )
+    .map((ct) => {
+      const trainStopStatus = getTrainStopStatus(
+        ct.checkpointStop,
+        ct.train.currentStationName,
+        sceneryName
+      );
+
+      return {
+        checkpointStop: ct.checkpointStop,
+        train: ct.train,
+        prevElement: ct.previousSceneryElement,
+        nextElement: ct.nextSceneryElement,
+        currentElement: ct.timetablePathElement,
+        status: trainStopStatus
+      };
+    })
+    .sort((a, b) => {
+      if (stopStatusPriorities.indexOf(a.status) - stopStatusPriorities.indexOf(b.status) < 0)
+        return -1;
+
+      if (stopStatusPriorities.indexOf(a.status) - stopStatusPriorities.indexOf(b.status) > 0)
+        return 1;
+
+      if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
+      if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
+
+      return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
+    });
+});
+
+const tabliceZbiorczeHref = computed(() => {
+  let url = `https://tablice-td2.web.app/?station=${props.station!.name}`;
+  if (props.chosenCheckpoint) url += `&checkpoint=${props.chosenCheckpoint}`;
+
+  return url;
+});
+
+const pragotronHref = computed(() => {
+  let url = `https://pragotron-td2.spythere.eu/board?name=${props.station!.name}&region=${mainStore.region.id}`;
+  if (props.chosenCheckpoint) url += `&checkpoint=${props.chosenCheckpoint}`;
+
+  return url;
+});
+
+const generatorHref = computed(() => {
+  return `https://generator-td2.spythere.eu/?sceneryId=${props.onlineScenery!.name}|${props.onlineScenery!.region}`;
+});
+
+function handleStockThumbnails() {
+  const storageVal = StorageManager.getBooleanValue('showStockThumbnails');
+
+  showStockThumbnails.value = storageVal;
+}
+
+function toggleThumbnails() {
+  showStockThumbnails.value = !showStockThumbnails.value;
+
+  StorageManager.setBooleanValue('showStockThumbnails', showStockThumbnails.value);
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/responsive';
+@use '../../../styles/animations';
+@use '../../../styles/badge';
+
+.scenery-timetable-list {
+  display: grid;
+  grid-template-rows: auto 1fr 40px;
+  overflow: hidden;
+}
+
+.top-general {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  text-align: left;
+}
+
+.top-schedule {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.2em;
+  align-items: center;
+
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.timetable-checkpoints {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+
+  flex-wrap: wrap;
+  font-size: 1.1em;
+
+  margin: 0.5em 0;
+}
+
+.checkpoint-item {
+  color: #aaa;
+  display: inline;
+
+  &:hover {
+    color: white;
+  }
+
+  &.current {
+    font-weight: bold;
+    color: var(--clr-primary);
+  }
+}
+
+.list-container {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  margin-top: 0.5em;
+  padding: 2px;
+  width: 100%;
+}
+
+.timetable-item {
+  display: block;
+
+  margin-bottom: 0.5em;
+  padding: 0.35em;
+  width: 100%;
+
+  overflow: hidden;
+  background: #353535;
+
+  &.empty {
+    padding: 1rem;
+    font-size: 1.2em;
+    color: #bbb;
+  }
+}
+
+.timetable-item > .item-top {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.2em 0.5em;
+}
+
+.timetable-item > .item-stock-list {
+  margin-top: 1em;
+}
+
+.general-info {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.info-train {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
+}
+
+.info-train > .train-badge {
+  font-size: 0.85em;
+}
+
+.info-number {
+  color: var(--clr-primary);
+}
+
+.info-route {
+  width: 100%;
+  margin-top: 0.25em;
+}
+
+.stop-comments-icon > img {
+  width: 1.3em;
+  vertical-align: top;
+}
+
+.schedule-arrival,
+.schedule-departure {
+  font-size: 1.15em;
+}
+
+.schedule-stop {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5em;
+  align-items: end;
+
+  .stop-connection {
+    font-size: 0.95em;
+  }
+
+  .stop-time {
+    position: relative;
+    inline-size: max-content;
+    align-self: center;
+    font-size: 0.9em;
+
+    color: var(--clr-primary);
+
+    &::after {
+      content: '\027F6';
+      display: block;
+      font-size: 2.2em;
+      line-height: 0.65em;
+    }
+  }
+}
+
+.arrival-time.begins,
+.departure-time.terminates {
+  font-size: 0.85em;
+}
+
+.list-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .list-divider {
+    height: 80%;
+    width: 3px;
+    background-color: #6b6b6b;
+  }
+
+  img {
+    width: 25px;
+    height: 25px;
+    vertical-align: middle;
+  }
+
+  .thumbnails-btn {
+    width: 25px;
+    height: 25px;
+    font-size: 25px;
+  }
+}
+
+@include responsive.smallScreen {
+  .timetable-item {
+    grid-template-columns: 1fr;
+  }
+
+  .list-actions {
+    justify-content: center;
+  }
+}
+</style>

src/components/SceneryView/SceneryTimetable/ScheduledTrainStatus.vue

@@ -18,8 +18,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { StopStatus } from '../../typings/common';
+import { StopStatus } from '../../../typings/common';
-import { SceneryTimetableRow } from './typings';
+import { SceneryTimetableRow } from '../typings';
 
 export default defineComponent({
   props: {

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -149,11 +149,12 @@ export default defineComponent({
       requestFilters['returnType'] = 'short';
 
       try {
-        const response: API.TimetableHistory.ResponseShort = await (
+        const response: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
-          await this.apiStore.client!.get('api/getTimetables', {
+          'api/getTimetables',
-            params: requestFilters
+          requestFilters
-          })
+        );
-        ).data;
+
+        console.log(response);
 
         this.historyList = response;
 

src/components/SceneryView/SceneryTopList.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="scenery-top-list">
+    <h2 class="header">{{ t('scenery.top-list.header') }}</h2>
+
+    <div class="top-actions">
+      <div class="actions-modes">
+        <button
+          v-for="mode in availableModes"
+          :class="`btn btn--option ${mode == currentListMode ? 'checked' : ''}`"
+          @click="selectListMode(mode)"
+        >
+          {{ t(`scenery.top-list.mode-${mode}`) }}
+        </button>
+      </div>
+
+      <div class="actions-scopes">
+        <button
+          v-for="scope in availableScopes"
+          :class="`btn btn--option ${scope == currentListScope ? 'checked' : ''}`"
+          @click="selectListScope(scope)"
+        >
+          {{ t(`scenery.top-list.scope-${scope}`) }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rating-list-wrapper">
+      <Loading v-if="listState == Status.Data.Loading" />
+      <div v-else-if="listState == Status.Data.Error">Ups, coś poszło nie tak...</div>
+
+      <ul v-else-if="bestScoreList.length > 0">
+        <li v-for="(value, i) in bestScoreList">
+          <div>
+            {{ t('ordinal', { count: i + 1 }) }} {{ t('scenery.top-list.place') }} -
+            <router-link :to="`/profile?playerId=${value.dispatcherId}`">{{
+              value.dispatcherName
+            }}</router-link>
+          </div>
+
+          <div>
+            <b class="text--primary" v-if="currentListMode == 'dutyCount'">{{
+              t('scenery.top-list.duty-count', value.value)
+            }}</b>
+
+            <b class="text--primary" v-else-if="currentListMode == 'dispatcherRating'">{{
+              t('scenery.top-list.dispatcher-rating', value.value)
+            }}</b>
+
+            <b class="text--primary" v-else>
+              {{ t('scenery.top-list.duration') }}
+              {{ humanizeDuration(value.value) }}
+            </b>
+          </div>
+        </li>
+      </ul>
+
+      <div v-else class="no-data">
+        <span v-if="currentListScope == 'name'">{{ t('scenery.top-list.no-data-general') }}</span>
+        <span v-else>{{ t('scenery.top-list.no-data-current-hash') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onActivated, PropType, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import { Station, ActiveScenery, Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+import { humanizeDuration } from '../../composables/time';
+
+interface SceneryBestScoreItem {
+  dispatcherName: string;
+  dispatcherId: number;
+  value: number;
+}
+
+const { t } = useI18n();
+
+const apiStore = useApiStore();
+
+defineOptions({
+  name: 'SceneryTopList'
+});
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  }
+});
+
+const availableModes = ['dutyCount', 'dispatcherRating', 'dutyDuration'] as const;
+const availableScopes = ['name', 'hash'] as const;
+
+type ListMode = (typeof availableModes)[number];
+type ListScope = (typeof availableScopes)[number];
+
+const currentListMode = ref<ListMode>('dutyCount');
+const currentListScope = ref<ListScope>('name');
+
+const listState = ref<Status.Data>(Status.Data.Loading);
+
+const bestScoreList = ref<SceneryBestScoreItem[]>([]);
+
+onActivated(() => {
+  fetchTopDispatchersList();
+});
+
+function selectListMode(mode: ListMode) {
+  currentListMode.value = mode;
+  fetchTopDispatchersList();
+}
+
+function selectListScope(scope: ListScope) {
+  currentListScope.value = scope;
+  fetchTopDispatchersList();
+}
+
+async function fetchTopDispatchersList() {
+  const searchedStationValue =
+    currentListScope.value == 'name'
+      ? props.station?.name
+      : apiStore.sceneryData.find((sc) => sc.name == props.station!.name)?.hash;
+
+  bestScoreList.value = [];
+
+  if (!searchedStationValue) {
+    listState.value = Status.Data.Loaded;
+    return;
+  }
+
+  try {
+    listState.value = Status.Data.Loading;
+
+    const response: SceneryBestScoreItem[] = await apiStore.client.get(`api/getSceneryBestScores`, {
+      [currentListScope.value]: searchedStationValue,
+      type: currentListMode.value,
+      countLimit: 40
+    });
+
+    bestScoreList.value = response;
+    listState.value = Status.Data.Loaded;
+  } catch (error) {
+    listState.value = Status.Data.Error;
+    console.error(error);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scenery-top-list {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  overflow: hidden;
+  gap: 1em;
+}
+
+.top-actions {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em 1.5em;
+}
+
+.actions-modes,
+.actions-scopes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  font-weight: bold;
+}
+
+.rating-list-wrapper {
+  overflow: auto;
+}
+
+.rating-list-wrapper > ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  align-items: center;
+  gap: 0.65em;
+  padding-right: 0.5em;
+}
+
+.rating-list-wrapper > ul > li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  padding: 0.25em;
+  background-color: #2b2b2b;
+  height: 100%;
+
+  line-height: 1.5em;
+
+  a {
+    font-weight: bold;
+  }
+}
+
+.no-data {
+  padding: 1em 0.5em;
+  font-size: 1.1em;
+  background-color: #333;
+  color: #ccc;
+}
+</style>

src/components/SceneryView/utils.ts

@@ -1,6 +1,6 @@
 import { StopStatus, TrainStop } from '../../typings/common';
 
-export const stopStatusPriority = [
+export const stopStatusPriorities = [
   StopStatus.ONLINE,
   StopStatus.STOPPED,
   StopStatus.DEPARTED,
@@ -18,23 +18,31 @@ export function getTrainStopStatus(
     return StopStatus.TERMINATED;
   }
 
-  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
+  if (
+    !stopInfo.terminatesHere &&
+    stopInfo.confirmed &&
+    currentStationName.startsWith(sceneryName)
+  ) {
     return StopStatus.DEPARTED;
   }
 
-  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
+  if (
+    !stopInfo.terminatesHere &&
+    stopInfo.confirmed &&
+    !currentStationName.startsWith(sceneryName)
+  ) {
     return StopStatus.DEPARTED_AWAY;
   }
 
-  if (currentStationName == sceneryName && !stopInfo.stopped) {
+  if (currentStationName.startsWith(sceneryName) && !stopInfo.stopped) {
     return StopStatus.ONLINE;
   }
 
-  if (currentStationName == sceneryName && stopInfo.stopped) {
+  if (currentStationName.startsWith(sceneryName) && stopInfo.stopped) {
     return StopStatus.STOPPED;
   }
 
-  if (currentStationName != sceneryName) {
+  if (!currentStationName.startsWith(sceneryName)) {
     return StopStatus.ARRIVING;
   }
 

src/components/StationsView/FilterSlider.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="filter-slider-container">
+    <input
+      class="slider"
+      v-for="slider in sliderGroupsOptions[sliderGroup]"
+      type="range"
+      :name="slider.id"
+      :id="slider.id"
+      :min="slider.minRange"
+      :max="slider.maxRange"
+      :step="slider.step"
+      v-model="filters[slider.id]"
+    />
+
+    <div class="slider-track" @click="moveCloserSliderToMousePos"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, PropType } from 'vue';
+import { SliderGroup, sliderGroupsOptions } from '../../managers/stationFilterManager';
+
+const filters = inject('StationsView_filters') as Record<string, any>;
+
+const props = defineProps({
+  sliderGroup: {
+    type: String as PropType<SliderGroup>,
+    required: true
+  }
+});
+
+// Change slider value that's the closest one to the mouse position on the slider track click
+function moveCloserSliderToMousePos(e: MouseEvent) {
+  const { clientX, target } = e;
+  const { minRange, maxRange, step } = sliderGroupsOptions[props.sliderGroup][0];
+
+  const boundingRect = (target as HTMLElement).getBoundingClientRect();
+  const mouseX = clientX - boundingRect.left;
+
+  const leftSliderValue = filters[sliderGroupsOptions[props.sliderGroup][0].id];
+  const rightSliderValue = filters[sliderGroupsOptions[props.sliderGroup][1].id];
+
+  let mouseValue = Math.round((maxRange - minRange) * (mouseX / boundingRect.width));
+
+  // Adjust mouse value to the closest step point (divide by 10, get rounded number, then multiply by step)
+  mouseValue = Math.round(mouseValue / step) * step;
+
+  let sliderIndex =
+    Math.abs(leftSliderValue - mouseValue) < Math.abs(rightSliderValue - mouseValue) ? 0 : 1;
+
+  filters[sliderGroupsOptions[props.sliderGroup][sliderIndex].id] = mouseValue;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.filter-slider-container {
+  position: relative;
+  padding: 0.5em;
+  height: 1.25em;
+}
+
+.slider-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  border-radius: 1em;
+  z-index: 10;
+
+  cursor: pointer;
+  background-color: #444;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #4d4d4d;
+  }
+}
+
+.slider {
+  width: 100%;
+  height: 1.25em;
+  background: none;
+  outline: none;
+  border-radius: 1em;
+  padding: 0;
+
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+
+  z-index: 100;
+
+  pointer-events: none;
+  cursor: pointer;
+
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:hover ~ .slider-track {
+    background-color: #4d4d4d;
+  }
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+
+    position: relative;
+    z-index: 100;
+
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 1em;
+    background: var(--clr-primary);
+
+    pointer-events: all;
+  }
+
+  &::-moz-range-thumb {
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 1em;
+    background: var(--clr-primary);
+
+    pointer-events: all;
+  }
+
+  // &:first-child::-webkit-slider-runnable-track {
+  // }
+
+  &::-moz-range-track {
+    position: relative;
+    z-index: -1;
+
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: none;
+    border-radius: 1em;
+  }
+
+  // &:first-child::-moz-range-track {
+  //   background: var(--clr-primary);
+  // }
+}
+</style>

src/components/StationsView/StationFilterCard.vue

@@ -137,20 +137,16 @@
           </section>
 
           <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
+            <div class="option-slider" v-for="(sliderGroup, i) in sliderGroups" :key="i">
-              <input
+              <FilterSlider :sliderGroup="sliderGroup" />
-                class="slider-input"
+
-                type="range"
+              <span class="slider-value">
-                :name="slider.id"
+                {{ filters[sliderGroupsOptions[sliderGroup][0].id] }} -
-                :id="slider.id"
+                {{ filters[sliderGroupsOptions[sliderGroup][1].id] }}
-                :min="slider.minRange"
+              </span>
-                :max="slider.maxRange"
+
-                :step="slider.step"
-                v-model.number="filters[slider.id]"
-              />
-              <span class="slider-value">{{ filters[slider.id] }}</span>
               <div class="slider-content">
-                {{ $t(`filters.sliders.${slider.id}`) }}
+                {{ $t(`filters.sliders.${sliderGroups[i]}`) }}
               </div>
             </div>
           </section>
@@ -190,13 +186,15 @@ import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';
 
 import FilterOption from './FilterOption.vue';
+import FilterSlider from './FilterSlider.vue';
 import StorageManager from '../../managers/storageManager';
 
 import {
   filtersSections,
-  sliderStates,
   initFilters,
-  getChangedFilters
+  sliderGroups,
+  getChangedFilters,
+  sliderGroupsOptions
 } from '../../managers/stationFilterManager';
 
 import { StationFilterSection } from '../../managers/stationFilterManager';
@@ -206,14 +204,15 @@ import { watch } from 'vue';
 const STORAGE_KEY = 'options_saved';
 
 export default defineComponent({
-  components: { FilterOption },
+  components: { FilterOption, FilterSlider },
   mixins: [keyMixin, routerMixin],
 
   data: () => ({
     saveOptions: false,
 
     filtersSections,
-    sliderStates,
+    sliderGroups,
+    sliderGroupsOptions,
 
     minimumHours: 0,
 
@@ -516,7 +515,7 @@ h3.hours-section-header {
 
 .section-filters {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   gap: 0.5em;
   margin: 1em 0;
 }
@@ -528,9 +527,11 @@ h3.hours-section-header {
   -moz-user-select: none;
 
   span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
     cursor: pointer;
-    display: inline-block;
-    width: 100%;
     text-align: center;
     padding: 0.25em;
     font-weight: bold;
@@ -588,112 +589,34 @@ h3.hours-section-header {
   }
 }
 
-.slider {
+.card_sliders {
+  margin-top: 1em;
+}
+
+.option-slider {
   display: grid;
-  grid-template-columns: 1fr 50px 1fr;
   align-items: center;
+  grid-template-columns: 250px 100px 1fr;
   gap: 0.25em;
+  min-height: 35px;
 
   margin-bottom: 1em;
+}
 
-  &-value {
+.slider-value {
-    color: var(--clr-primary);
+  color: var(--clr-primary);
-    padding: 0.1em 0.2em;
+  padding: 0.1em 0.2em;
-    text-align: center;
+  text-align: center;
-  }
+  font-weight: bold;
-
-  &-input {
-    -webkit-appearance: none;
-    appearance: none;
-    background: none;
-    border: none;
-    outline: none;
-
-    min-width: 25%;
-
-    &:focus-visible ~ * {
-      color: gold;
-    }
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-
-      height: 20px;
-      width: 20px;
-      margin-top: -7px;
-
-      border-radius: 50%;
-
-      background: white;
-      border: 3px solid var(--clr-primary);
-      background-color: #333;
-
-      @include responsive.smallScreen {
-        width: 15px;
-        height: 15px;
-        margin-top: -5px;
-        border: 3px solid var(--clr-primary);
-      }
-    }
-
-    &::-moz-range-thumb {
-      height: 1em;
-      width: 1em;
-
-      border-radius: 50%;
-
-      background: white;
-      border: 4px solid var(--clr-primary);
-
-      cursor: pointer;
-
-      @include responsive.smallScreen {
-        width: 1em;
-        height: 1em;
-        border: 3px solid var(--clr-primary);
-      }
-    }
-
-    &::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-
-    &::-moz-range-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-
-    &::-ms-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-  }
 }
 
 @include responsive.smallScreen {
-  .slider {
+  .option-slider {
-    display: flex;
+    grid-template-columns: 1fr;
-    flex-wrap: wrap;
+  }
-    justify-content: center;
 
-    &-input {
+  .slider-content {
-      width: 90%;
+    text-align: center;
-    }
-
-    &-content {
-      text-align: center;
-    }
   }
 
   .card_controls > button > p {

src/components/StationsView/StationStats.vue

@@ -278,6 +278,10 @@ export default defineComponent({
   color: #ccc;
 }
 
+.dropdown_wrapper {
+  top: 2.5em;
+}
+
 @include responsive.smallScreen {
   .stats-title {
     text-align: center;
@@ -286,5 +290,9 @@ export default defineComponent({
   .filter-button > span {
     display: none;
   }
+
+  .no-data {
+    text-align: center;
+  }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="station_table">
+  <section class="station_table" @scroll="onScroll" ref="tableRef">
     <Loading
       v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
     />
@@ -131,7 +131,16 @@
           <td class="station-dispatcher-name">
             <span v-if="station.onlineInfo?.dispatcherName">
               <b
-                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                v-if="isCreator(station.onlineInfo.dispatcherName)"
+                data-tooltip-type="CreatorTooltip"
+                :data-tooltip-content="$t('donations.creator-message')"
+              >
+                <img src="/images/icon-creator.png" alt="creator icon" />
+                <span class="text--creator">&nbsp;{{ station.onlineInfo.dispatcherName }}</span>
+              </b>
+
+              <b
+                v-else-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                 data-tooltip-type="DonatorTooltip"
                 :data-tooltip-content="$t('donations.dispatcher-message')"
               >
@@ -353,6 +362,7 @@ import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
 import { getLanguageNameById } from '../../utils/languageUtils';
 import FlagIcon from '../Global/FlagIcon.vue';
+import { isCreator } from '../../utils/userUtils';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
@@ -363,7 +373,9 @@ export default defineComponent({
   data: () => ({
     headIconsIds,
     headIds,
-    getChangedFilters
+    scrollTop: 0,
+    getChangedFilters,
+    isCreator
   }),
 
   setup() {
@@ -391,6 +403,10 @@ export default defineComponent({
     };
   },
 
+  activated() {
+    (this.$refs['tableRef'] as HTMLElement).scrollTop = this.scrollTop;
+  },
+
   methods: {
     getSceneryRoute(station: Station) {
       this.$router.push({
@@ -431,6 +447,10 @@ export default defineComponent({
       }));
 
       return JSON.stringify(usersTrains);
+    },
+
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
     }
   }
 });
@@ -578,6 +598,7 @@ tbody tr {
 .station-name {
   font-weight: bold;
   max-width: 200px;
+  padding: 0.25em;
 
   &.default {
     color: var(--clr-primary);
@@ -612,8 +633,8 @@ tbody tr {
 
 .station-dispatcher-name {
   img {
-    max-width: 1.35em;
+    max-height: 1.3em;
-    vertical-align: text-bottom;
+    vertical-align: text-top;
   }
 }
 

src/components/StationsView/utils.ts

@@ -120,28 +120,40 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
   const otherAvailability =
     availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
 
-  const internalRoutes = routes.all.filter((r) => r.isInternal && !r.isRouteSBL && !r.hidden);
+  if (filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0)) return true;
+  if (filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0)) return true;
+  if (filters['minVmax'] > routes.maxRouteSpeed) return true;
+  if (filters['maxVmax'] < routes.minRouteSpeed) return true;
 
-  return (
+  if (filters['oneWay'] && routes.singleOtherNames.length > 0) return true;
-    filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
+  if (filters['oneWayCatenary'] && routes.singleElectrifiedNames.length > 0) return true;
-    filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
+  if (filters['twoWay'] && routes.doubleOtherNames.length > 0) return true;
-    filters['minVmax'] > routes.maxRouteSpeed ||
+  if (filters['twoWayCatenary'] && routes.doubleElectrifiedNames.length > 0) return true;
-    filters['maxVmax'] < routes.minRouteSpeed ||
+
-    (filters['no-1track'] && routes.single.length != 0) ||
+  if (filters['minOneWay'] > routes.singleOtherNames.length) return true;
-    (filters['no-2track'] && routes.double.length != 0) ||
+  if (filters['maxOneWay'] < routes.singleOtherNames.length) return true;
-    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
+  if (filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length) return true;
-    filters['minOneWay'] > routes.singleOtherNames.length ||
+  if (filters['maxOneWayCatenary'] < routes.singleElectrifiedNames.length) return true;
-    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
+  if (filters['minTwoWay'] > routes.doubleOtherNames.length) return true;
-    filters['minTwoWay'] > routes.doubleOtherNames.length ||
+  if (filters['maxTwoWay'] < routes.doubleOtherNames.length) return true;
-    filters['minOneWayCatenaryInt'] >
+  if (filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length) return true;
-      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
+  if (filters['maxTwoWayCatenary'] < routes.doubleElectrifiedNames.length) return true;
-    filters['minOneWayInt'] >
+
-      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
+  if (filters['oneWayInt'] && routes.singleOtherInternalNames.length > 0) return true;
-    filters['minTwoWayCatenaryInt'] >
+  if (filters['oneWayCatenaryInt'] && routes.singleElectrifiedInternalNames.length > 0) return true;
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length ||
+  if (filters['twoWayInt'] && routes.doubleOtherInternalNames.length > 0) return true;
-    filters['minTwoWayInt'] >
+  if (filters['twoWayCatenaryInt'] && routes.doubleElectrifiedInternalNames.length > 0) return true;
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == false).length
+
-  );
+  // Internal routes
+  if (filters['minOneWayInt'] > routes.singleOtherInternalNames.length) return true;
+  if (filters['maxOneWayInt'] < routes.singleOtherInternalNames.length) return true;
+  if (filters['minOneWayCatenaryInt'] > routes.singleElectrifiedInternalNames.length) return true;
+  if (filters['maxOneWayCatenaryInt'] < routes.singleElectrifiedInternalNames.length) return true;
+
+  if (filters['minTwoWayInt'] > routes.doubleOtherInternalNames.length) return true;
+  if (filters['maxTwoWayInt'] < routes.doubleOtherInternalNames.length) return true;
+  if (filters['minTwoWayCatenaryInt'] > routes.doubleElectrifiedInternalNames.length) return true;
+  if (filters['maxTwoWayCatenaryInt'] < routes.doubleElectrifiedInternalNames.length) return true;
 }
 
 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {

src/components/Tooltip/CreatorTooltip.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="tooltip-content">
+    <img src="/images/icon-creator.png" alt="creator icon" />
+    <b class="text--creator">&nbsp;{{ tooltipStore.content }}</b>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: text-bottom;
+  height: 1.25em;
+}
+</style>

src/components/Tooltip/DonatorTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tooltip-content">
     <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-    <span>{{ tooltipStore.content }}</span>
+    <b class="text--donator">&nbsp;{{ tooltipStore.content }}</b>
   </div>
 </template>
 
@@ -20,11 +20,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tooltip-content {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  flex-wrap: wrap;
-
   padding: 0.5em;
   border-radius: 0.25em;
 
@@ -35,7 +30,7 @@ export default defineComponent({
 }
 
 img {
-  vertical-align: middle;
+  vertical-align: text-bottom;
-  height: 1em;
+  height: 1.25em;
 }
 </style>

src/components/Tooltip/Tooltip.vue

@@ -8,12 +8,13 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import DonatorTooltip from './DonatorTooltip.vue';
+import CreatorTooltip from './CreatorTooltip.vue';
 import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
-import TrainInfoTooltip from "./TrainInfoTooltip.vue";
+import TrainInfoTooltip from './TrainInfoTooltip.vue';
 
 const BOX_PADDING_PX = 20;
 
@@ -25,7 +26,8 @@ export default defineComponent({
     SpawnsTooltip,
     UsersTooltip,
     HtmlTooltip,
-    TrainInfoTooltip
+    TrainInfoTooltip,
+    CreatorTooltip
   },
 
   data() {

src/components/TrainsView/TrainInfo.vue

@@ -56,12 +56,21 @@
           </b>
 
           <b
-            v-if="apiStore.donatorsData.includes(train.driverName)"
+            v-if="isCreator(train.driverName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <img src="/images/icon-creator.png" alt="creator icon" />
+            <span class="text--creator">&nbsp;{{ train.driverName }}</span>
+          </b>
+
+          <b
+            v-else-if="apiStore.donatorsData.includes(train.driverName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.driver-message')"
           >
-            <span class="text--donator">{{ train.driverName }}&nbsp;</span>
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            <span class="text--donator">&nbsp;{{ train.driverName }}</span>
           </b>
 
           <span v-else>{{ train.driverName }}</span>
@@ -204,6 +213,7 @@ import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
 import FlagIcon from '../Global/FlagIcon.vue';
+import { isCreator } from '../../utils/userUtils';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -222,7 +232,8 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 
@@ -278,8 +289,6 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   font-size: 1em;
-  gap: 0.25em;
-
   background-color: #1a1a1a;
   gap: 0.5em;
 }
@@ -358,8 +367,6 @@ export default defineComponent({
 .status-badges {
   display: flex;
   flex-wrap: wrap;
-  margin-left: 0.25em;
-
   gap: 0.25em;
 
   img {
@@ -372,7 +379,7 @@ export default defineComponent({
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5em;
-  padding: 0.5em 0;
+  padding: 0.25em 0;
 }
 
 .progress-distance {

src/components/TrainsView/TrainOptions.vue

@@ -210,6 +210,10 @@ export default defineComponent({
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
 
+.dropdown_wrapper {
+  top: 2.5em;
+}
+
 .search_content > div {
   margin: 0.5em auto;
 }

src/components/TrainsView/TrainStats.vue

@@ -250,9 +250,10 @@ h3 {
 
 .dropdown_wrapper {
   max-width: 600px;
+  top: 2.5em;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .no-data {
     text-align: center;
   }

src/components/TrainsView/TrainTableItem.vue

@@ -4,7 +4,7 @@
       <TrainInfo :train="train" />
 
       <div class="train-stats">
-        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" :showPreviews="true" />
 
         <div>
           <span>{{ train.speed }}km/h</span>

src/composables/time.ts

@@ -35,3 +35,10 @@ export function dateToLocaleString(date: Date, dateOptions: Intl.DateTimeFormatO
 
   return date.toLocaleString(locale.value == 'pl' ? 'pl-PL' : 'en-GB', dateOptions);
 }
+
+export function timestampToTimeString(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString('pl-PL', {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}

src/http.ts

@@ -0,0 +1,23 @@
+export class HttpClient {
+  constructor(private readonly baseURL: string) {}
+
+  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
+    const absoluteURL = new URL(this.baseURL + '/' + url);
+
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        if (params[key] === undefined) return;
+
+        absoluteURL.searchParams.append(key, params[key]);
+      });
+    }
+
+    const data = await fetch(absoluteURL);
+
+    if (!data.ok) {
+      throw new Error(`Cannot fetch ${absoluteURL}: ${data.statusText}`);
+    }
+
+    return data.json();
+  }
+}

src/i18n.ts

@@ -9,9 +9,43 @@ const i18n = createI18n({
   warnHtmlMessage: false,
   fallbackLocale: 'pl',
 
+  pluralizationRules: {
+    en: {
+      ordinal: (ctx: { named: (arg0: string) => number }) => {
+        const number = ctx.named('count');
+
+        const suffixes: Record<number, string> = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd'
+        };
+        const suffix = suffixes[number % 10] || 'th';
+
+        return `${number}${suffix}`;
+      }
+    }
+  },
+
   messages: {
-    en: enLang,
+    en: {
-    pl: plLang
+      ...enLang,
+      ordinal: (ctx: { named: (arg0: string) => number }) => {
+        const number = ctx.named('count');
+
+        const suffixes: Record<number, string> = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd'
+        };
+        const suffix = suffixes[number % 10] || 'th';
+
+        return `${number}${suffix}`;
+      }
+    },
+    pl: {
+      ...plLang,
+      ordinal: '{count}.'
+    }
   },
   enableLegacy: false
 });

src/locales/en.json

@@ -23,15 +23,6 @@
     "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!",
@@ -51,7 +42,8 @@
     "action-paypal": "DONATE WITH PAYPAL",
     "action-buycoffee": "BUY ME A COFFEE!",
     "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
-    "driver-message": "Driver supporting the Stacjownik project!"
+    "driver-message": "Driver supporting the Stacjownik project!",
+    "creator-message": "Creator of the Stacjownik project"
   },
   "warnings": {
     "TWR": "Train with high risk cargo",
@@ -65,7 +57,7 @@
     "refresh": "REFRESH"
   },
   "update": {
-    "title": "Stacjownik update!",
+    "title": "Stacjownik has been updated!",
     "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",
@@ -208,6 +200,7 @@
     "search-date-from": "Date (UTC+2 / CEST)",
     "search-date-to": "Date (UTC+2 / CEST)",
     "select-categoryCode": "Train category",
+    "search-headUnit": "Traction unit (e.g. EP09, ET22-401)",
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
@@ -258,7 +251,9 @@
       "blockades": "BLOCK SIGNALLING",
       "status": "ONLINE STATUS",
       "timetables": "ACTIVE TIMETABLES",
-      "spawns": "OPEN SPAWNS"
+      "spawns": "OPEN SPAWNS",
+      "externalRoutes": "EXTERNAL ROUTES",
+      "internalRoutes": "INTERNAL ROUTES"
     },
     "changed-filters-count": "Changed filters:",
     "no-changed-filters": "No changed filters",
@@ -302,19 +297,27 @@
     "withoutActiveTimetables": "NO ACTIVE",
     "junction": "JUNCTIONS",
     "nonJunction": "OTHER",
+
+    "oneWay": "OTHER SINGLE TRACK",
+    "oneWayCatenary": "CATENARY SINGLE TRACK",
+    "twoWayCatenary": "CATENARY DOUBLE TRACK",
+    "twoWay": "OTHER DOUBLE TRACK",
+    "oneWayCatenaryInt": "CATENARY SINGLE TRACK",
+    "oneWayInt": "OTHER SINGLE TRACK",
+    "twoWayCatenaryInt": "CATENARY DOUBLE TRACK",
+    "twoWayInt": "OTHER DOUBLE TRACK",
+
     "sliders": {
-      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
+      "vMax": "ROUTE SPEED",
-      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
+      "level": "REQUIRED DISPATCHER LEVEL",
-      "minVmax": "MIN. SCENERY ROUTE SPEED",
+      "routeOneWay": "SINGLE TRACK ROUTES (OTHER)",
-      "maxVmax": "MAX. SCENERY ROUTE SPEED",
+      "routeOneWayCatenary": "SINGLE TRACK ROUTES (CATENARY)",
-      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
+      "routeTwoWayCatenary": "DOUBLE TRACK ROUTES (CATENARY)",
-      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
+      "routeTwoWay": "DOUBLE TRACK ROUTES (OTHER)",
-      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
+      "routeOneWayInternalCatenary": "INTERNAL SINGLE TRACK ROUTES (CATENARY)",
-      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES",
+      "routeOneWayInternal": "INTERNAL SINGLE TRACK ROUTES (OTHER)",
-      "minOneWayCatenaryInt": "MIN. INTERNAL CATENARY SINGLE TRACK ROUTES",
+      "routeTwoWayInternalCatenary": "INTERNAL DOUBLE TRACK ROUTES (CATENARY)",
-      "minOneWayInt": "MIN. INTERNAL OTHER SINGLE TRACK ROUTES",
+      "routeTwoWayInternal": "INTERNAL DOUBLE TRACK ROUTES (OTHER)"
-      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
     },
     "sceneries-placeholder": "Search for scenery",
     "line-numbers-placeholder": "Line numbers (separated by commas)",
@@ -325,7 +328,6 @@
     "now": "NOW",
     "hour": "h",
     "no-limit": "NO LIMIT",
-    "include-selected": "INCLUDE SELECTED",
     "save": "REMEMBER FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
@@ -437,15 +439,25 @@
     "driver-not-found-others": "Player {driver} is online as:",
     "driver-not-found-return": "RETURN TO THE MAIN SITE",
     "stock-copy": "COPY THE STOCK",
-    "number-propositions": "PROPOSE NUMBER",
+    "number-propositions": "NUMBER & WARNINGS SUGGESTIONS",
     "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
     "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
-    "number-propositions-header": "Generate number examples for selected category:",
+    "number-propositions-header": "Generate number examples for a train category:",
     "number-propositions-third-number": "Third digit:",
     "number-propositions-last-nums": "{count} last digits from the range of:",
     "number-propositions-title": "Propositions:",
     "number-propositions-empty": "No propositions available for the chosen category! :/"
   },
+  "cargo-warnings": {
+    "title": "Additional cargo warnings:",
+    "pn-innofreight": "PN: Innofreight C45: exceeded gauge",
+    "twr-un1965": "TWR: UN1965 (LPG)",
+    "tn-un1965": "TN: unclean tanks after UN1965",
+    "tn-un1202": "TN: UN1202 (diesel fuel)",
+    "tn-un1202-empty": "TN: unclean tanks after UN1202",
+    "pn-military": "PN: military transport",
+    "pn-edk80": "PN: EDK80 railway crane"
+  },
   "train-stats": {
     "stats-button": "STATISTICS",
     "title": "ONLINE TRAINS STATS",
@@ -558,7 +570,7 @@
     "no-users": "NO ACTIVE PLAYERS",
     "no-spawns": "NO OPEN SPAWNS",
     "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "BACK TO THE LAST SITE",
+    "return-btn": "BACK TO SCENERIES",
     "history-btn": "View the dispatcher history",
     "info-btn": "Return to the scenery view",
     "authors-title": "Scenery author | Scenery authors",
@@ -568,10 +580,14 @@
     "additional-tools-title": "Additional tools",
     "one-way-routes": "Single track routes",
     "two-way-routes": "Double track routes",
+    "routes-hidden": "Hidden internal routes",
     "no-data": "No available data about this scenery",
     "option-active-timetables": "Active timetables",
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
+    "option-top-list": "Scenery records",
+    "btn-show-timetable-thumbnails": "Show rolling stock thumbnails",
+    "btn-hide-timetable-thumbnails": "Hide rolling stock thumbnails",
     "timetable-includesScenery": "ALL TIMETABLES",
     "timetable-via": "PASSES THROUGH",
     "timetable-issuedFrom": "BEGINS HERE",
@@ -582,14 +598,30 @@
     "dispatcher-rate": "Rate:",
     "dispatcher-status-changes": "Status changes:",
     "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
-    "history-list-empty": "No recorded scenery history!",
+    "history-list-empty": "No saved scenery history!",
-    "forum-topic": "Official {name} forum topic",
+    "forum-topic": "Scenery's forum topic",
     "gnr-link": "Train orders generator",
     "pragotron-link": "Timetable pallet board",
     "tablice-link": "Timetable summary board <br> (by Thundo)",
     "bottom-info": "Show full history in the Journal tab",
     "btn-show-internal-routes": "Show internal routes",
-    "btn-hide-internal-routes": "Hide internal routes"
+    "btn-hide-internal-routes": "Hide internal routes",
+    "top-list": {
+      "header": "RECORDS ON THE SCENERY (PL1)",
+      "mode-dutyCount": "DUTIES",
+      "mode-dispatcherRating": "RATING",
+      "mode-dutyDuration": "DUTY DURATION",
+      "scope-name": "GENERAL",
+      "scope-hash": "CURRENT HASH",
+
+      "place": "place",
+      "dispatcher-rating": "Rating: {n}",
+      "duty-count": "No duties | 1 duty | Duties: {n}",
+      "duration": "Duration:",
+
+      "no-data-general": "No best scores for this scenery on the PL1 server!",
+      "no-data-current-hash": "No best scores for the current scenery hash on the PL1 server!"
+    }
   },
   "availability": {
     "title": "Availability",

src/locales/pl.json

@@ -23,14 +23,6 @@
     "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!",
@@ -50,7 +42,8 @@
     "action-paypal": "PRZELEJ PAYPALEM",
     "action-buycoffee": "POSTAW KAWĘ!",
     "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
-    "driver-message": "Maszynista wspierający projekt Stacjownika!"
+    "driver-message": "Maszynista wspierający projekt Stacjownika!",
+    "creator-message": "Twórca projektu Stacjownik"
   },
   "warnings": {
     "TWR": "Pociąg z towarami niebezpiecznymi wysokiego ryzyka",
@@ -64,7 +57,7 @@
     "refresh": "ODŚWIEŻ"
   },
   "update": {
-    "title": "Aktualizacja Stacjownika!",
+    "title": "Stacjownik został zaktualizowany!",
     "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",
@@ -204,6 +197,7 @@
     "search-date-from": "Data (UTC+2 / CEST)",
     "search-date-to": "Data (UTC+2 / CEST)",
     "select-categoryCode": "Kategoria pociągu",
+    "search-headUnit": "Pojazd trakcyjny (np. EP09, ET22-137)",
     "sort-routeDistance": "kilometraż",
     "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",
@@ -255,7 +249,9 @@
       "blockades": "BLOKADY LINIOWE",
       "status": "STATUS ONLINE",
       "timetables": "AKTYWNE ROZKŁADY JAZDY",
-      "spawns": "OTWARTE SPAWNY"
+      "spawns": "OTWARTE SPAWNY",
+      "externalRoutes": "SZLAKI ZEWNĘTRZNE",
+      "internalRoutes": "SZLAKI WEWNĘTRZNE"
     },
     "changed-filters-count": "Zmienione filtry:",
     "no-changed-filters": "Brak zmienionych filtrów",
@@ -299,19 +295,27 @@
     "withoutActiveTimetables": "BEZ AKTYWNYCH",
     "junction": "WĘZŁOWE",
     "nonJunction": "INNE",
+
+    "oneWay": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
+    "oneWayCatenary": "JEDNOTOROWE ZELEKTRYFIKOWANE",
+    "twoWayCatenary": "DWUTOROWE ZELEKTRYFIKOWANE",
+    "twoWay": "DWUTOROWE NIEZELEKTRYFIKOWANE",
+    "oneWayCatenaryInt": "JEDNOTOROWE ZELEKTRYFIKOWANE",
+    "oneWayInt": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
+    "twoWayCatenaryInt": "DWUTOROWE ZELEKTRYFIKOWANE",
+    "twoWayInt": "DWUTOROWE NIEZELEKTRYFIKOWANE",
+
     "sliders": {
-      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
+      "vMax": "PRĘDKOŚĆ SZLAKOWA",
-      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
+      "level": "WYMAGANY POZIOM DYŻURNEGO",
-      "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
+      "routeOneWay": "SZLAKI 1-TOROWE NIEZELEKTR.",
-      "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
+      "routeOneWayCatenary": "SZLAKI 1-TOROWE ZELEKTR.",
-      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
+      "routeTwoWayCatenary": "SZLAKI 2-TOROWE ZELEKTR.",
-      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
+      "routeTwoWay": "SZLAKI 2-TOROWE NIEZELEKTR.",
-      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
+      "routeOneWayInternalCatenary": "SZLAKI WEWN. 1-TOROWE ZELEKTR.",
-      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)",
+      "routeOneWayInternal": "SZLAKI WEWN. 1-TOROWE NIEZELEKTR.",
-      "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "routeTwoWayInternalCatenary": "SZLAKI WEWN. 2-TOROWE ZELEKTR.",
-      "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "routeTwoWayInternal": "SZLAKI WEWN. 2-TOROWE NIEZELEKTR."
-      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
     },
     "sceneries-placeholder": "Wyszukaj scenerię",
     "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
@@ -322,7 +326,6 @@
     "now": "TERAZ",
     "hour": " godz.",
     "no-limit": "BEZ LIMITU",
-    "include-selected": "POKAŻ ZAZNACZONE",
     "save": "ZAPAMIĘTAJ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
@@ -423,15 +426,25 @@
     "driver-not-found-others": "Gracz {driver} jest online jako:",
     "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
     "stock-copy": "SKOPIUJ SKŁAD",
-    "number-propositions": "ZAPROPONUJ NUMER",
+    "number-propositions": "PROPOZYCJE NUMERÓW I UWAG",
     "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
     "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
-    "number-propositions-header": "Wygeneruj propozycje numerów dla kategorii pociągu:",
+    "number-propositions-header": "Wygeneruj propozycje numerów dla pociągu kategorii:",
     "number-propositions-third-number": "Trzecia cyfra:",
     "number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
     "number-propositions-title": "Propozycje:",
     "number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
   },
+  "cargo-warnings": {
+    "title": "Dodatkowe uwagi przewozowe:",
+    "pn-innofreight": "PN: Innofreight C45: przekroczona skrajnia",
+    "twr-un1965": "TWR: UN1965 (LPG)",
+    "tn-un1965": "TN: brudne cysterny po UN1965",
+    "tn-un1202": "TN: UN1202 (olej napędowy)",
+    "tn-un1202-empty": "TN: brudne cysterny po UN1202",
+    "pn-military": "PN: transport wojskowy",
+    "pn-edk80": "PN: żuraw kolejowy EDK80"
+  },
   "train-stats": {
     "stats-button": "STATYSTYKI",
     "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
@@ -543,7 +556,7 @@
     "no-users": "BRAK AKTYWNYCH GRACZY",
     "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
     "no-scenery": "Ups! Ta sceneria nie istnieje!",
-    "return-btn": "POWRÓT DO POPRZEDNIEJ STRONY",
+    "return-btn": "POWRÓT DO SCENERII",
     "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
     "info-btn": "Wróć do widoku scenerii",
     "authors-title": "Autor scenerii | Autorzy scenerii",
@@ -553,10 +566,14 @@
     "additional-tools-title": "Dodatkowe narzędzia",
     "one-way-routes": "Szlaki jednotorowe",
     "two-way-routes": "Szlaki dwutorowe",
+    "routes-hidden": "Ukryto szlaki wewnętrzne",
     "no-data": "Brak informacji o tej scenerii",
     "option-active-timetables": "Aktywne rozkłady jazdy",
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
+    "option-top-list": "Rekordy scenerii",
+    "btn-show-timetable-thumbnails": "Pokazuj podglądy składów",
+    "btn-hide-timetable-thumbnails": "Ukrywaj podglądy składów",
     "timetable-includesScenery": "WSZYSTKIE RJ",
     "timetable-via": "PRZEJEŻDŻA",
     "timetable-issuedFrom": "ROZPOCZYNA BIEG",
@@ -568,13 +585,29 @@
     "dispatcher-status-changes": "Zmiany statusów:",
     "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
     "history-list-empty": "Brak historii dla tej scenerii!",
-    "forum-topic": "Oficjalny wątek scenerii {name}",
+    "forum-topic": "Wątek scenerii",
     "gnr-link": "Generator rozkazów pisemnych",
     "pragotron-link": "Paletowa tablica informacyjna",
     "tablice-link": "Tablica informacyjna zbiorcza <br> (autorstwa Thundo)",
     "bottom-info": "Pokaż pełną historię w zakładce Dziennika",
     "btn-show-internal-routes": "Pokazuj szlaki wewnętrzne",
-    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne"
+    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne",
+    "top-list": {
+      "header": "REKORDY NA SCENERII (PL1)",
+      "mode-dutyCount": "DYŻURY",
+      "mode-dispatcherRating": "OCENA",
+      "mode-dutyDuration": "CZAS DYŻURU",
+      "scope-name": "OGÓLNIE",
+      "scope-hash": "OBECNY HASH",
+
+      "place": "miejsce",
+      "dispatcher-rating": "Ocena: {n}",
+      "duty-count": "Brak dyżurów | 1 dyżur | Dyżury: {n}",
+      "duration": "Czas:",
+
+      "no-data-general": "Brak zapisanych rekordów scenerii na serwerze PL1!",
+      "no-data-current-hash": "Brak zapisanych rekordów scenerii z obecnym hashem na serwerze PL1!"
+    }
   },
   "availability": {
     "title": "Dostępność",

src/managers/stationFilterManager.ts

@@ -1,5 +1,24 @@
 import StorageManager from './storageManager';
 
+export type SliderGroup =
+  | 'vMax'
+  | 'level'
+  | 'routeOneWay'
+  | 'routeOneWayCatenary'
+  | 'routeOneWayInternal'
+  | 'routeOneWayInternalCatenary'
+  | 'routeTwoWay'
+  | 'routeTwoWayCatenary'
+  | 'routeTwoWayInternal'
+  | 'routeTwoWayInternalCatenary';
+
+export interface SliderOptions {
+  id: string;
+  minRange: number;
+  maxRange: number;
+  step: number;
+}
+
 export const sections = [
   'status',
   'timetables',
@@ -10,7 +29,9 @@ export const sections = [
   'control',
   'blockades',
   'signals',
-  'addons'
+  'addons',
+  'externalRoutes',
+  'internalRoutes'
 ] as const;
 
 export const initFilters = {
@@ -38,9 +59,6 @@ export const initFilters = {
   mixed: false,
   SBL: false,
   PBL: false,
-  'include-selected': false,
-  'no-1track': false,
-  'no-2track': false,
   free: true,
   occupied: false,
   nonPublic: false,
@@ -60,34 +78,111 @@ export const initFilters = {
   onlineFromHours: 0,
   minLevel: 0,
   maxLevel: 20,
+  oneWay: false,
+  oneWayCatenary: false,
+  twoWay: false,
+  twoWayCatenary: false,
+  oneWayCatenaryInt: false,
+  oneWayInt: false,
+  twoWayInt: false,
+  twoWayCatenaryInt: false,
   minOneWay: 0,
   minOneWayCatenary: 0,
-  minOneWayInt: 0,
   minOneWayCatenaryInt: 0,
+  minOneWayInt: 0,
   minTwoWay: 0,
   minTwoWayCatenary: 0,
   minTwoWayInt: 0,
   minTwoWayCatenaryInt: 0,
+  maxOneWay: 10,
+  maxOneWayCatenary: 10,
+  maxOneWayInt: 20,
+  maxOneWayCatenaryInt: 20,
+  maxTwoWay: 10,
+  maxTwoWayCatenary: 10,
+  maxTwoWayInt: 20,
+  maxTwoWayCatenaryInt: 20,
   authors: '',
   projects: '',
   lines: ''
 };
 
-export const sliderStates = [
+export const sliderGroups: SliderGroup[] = [
-  { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
+  'vMax',
-  { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
+  'level',
-  { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
+  'routeOneWayCatenary',
-  { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
+  'routeOneWay',
-  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
+  'routeTwoWayCatenary',
-  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  'routeTwoWay',
-  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
+  'routeOneWayInternalCatenary',
-  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
+  'routeOneWayInternal',
-  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
+  'routeTwoWayInternalCatenary',
-  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  'routeTwoWayInternal'
-  { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
 ];
 
+export const sliderGroupsOptions: Record<SliderGroup, SliderOptions[]> = {
+  vMax: [
+    { id: 'minVmax', minRange: 0, maxRange: 200, step: 20 },
+    { id: 'maxVmax', minRange: 0, maxRange: 200, step: 20 }
+  ],
+  level: [
+    { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeOneWay: [
+    { id: 'minOneWay', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxOneWay', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeOneWayCatenary: [
+    { id: 'minOneWayCatenary', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxOneWayCatenary', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeOneWayInternal: [
+    { id: 'minOneWayInt', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxOneWayInt', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeOneWayInternalCatenary: [
+    {
+      id: 'minOneWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    },
+    {
+      id: 'maxOneWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    }
+  ],
+  routeTwoWay: [
+    { id: 'minTwoWay', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxTwoWay', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeTwoWayCatenary: [
+    { id: 'minTwoWayCatenary', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxTwoWayCatenary', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeTwoWayInternal: [
+    { id: 'minTwoWayInt', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxTwoWayInt', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeTwoWayInternalCatenary: [
+    {
+      id: 'minTwoWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    },
+    {
+      id: 'maxTwoWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    }
+  ]
+};
+
 export type StationFilter = keyof typeof initFilters;
 export type StationFilterSection = (typeof sections)[number];
 
@@ -112,7 +207,9 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
     'manual'
   ],
   blockades: ['SBL', 'PBL'],
-  signals: ['modern', 'semaphores', 'mixed', 'historical']
+  signals: ['modern', 'semaphores', 'mixed', 'historical'],
+  externalRoutes: ['oneWayCatenary', 'oneWay', 'twoWayCatenary', 'twoWay'],
+  internalRoutes: ['oneWayCatenaryInt', 'oneWayInt', 'twoWayCatenaryInt', 'twoWayInt']
 };
 
 export function setupFilters(currentFilters: Record<string, any>) {
@@ -135,7 +232,8 @@ export function getChangedFilters(currentFilters: Record<string, any>): string[]
   return (
     Object.keys(currentFilters).filter(
       (filterKey) =>
-        currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
+        currentFilters[filterKey].toString() !==
+        initFilters[filterKey as keyof typeof initFilters].toString()
     ) ?? []
   );
 }

src/router/index.ts

@@ -74,7 +74,6 @@ const routes: Array<RouteRecordRaw> = [
 
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
-    console.log(to.name);
     if (
       (to.name == 'SceneryView' || to.name == 'DriverView' || to.name == 'PlayerProfileView') &&
       from.name !== to.name &&

src/store/apiStore.ts

@@ -2,11 +2,25 @@ import { defineStore } from 'pinia';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
-import axios, { AxiosInstance } from 'axios';
+import { HttpClient } from '../http';
+
+let baseURL = 'https://stacjownik.spythere.eu';
+
+switch (import.meta.env.VITE_API_MODE) {
+  case 'development':
+    baseURL = 'http://localhost:3001';
+    break;
+  case 'mocking':
+    baseURL = 'http://localhost:3123';
+    break;
+  default:
+    break;
+}
 
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
     dataStatuses: {
+      allData: Status.Data.Loading,
       connection: Status.Data.Loading,
       sceneries: Status.Data.Loading,
       vehicles: Status.Data.Loading,
@@ -24,30 +38,13 @@ export const useApiStore = defineStore('apiStore', {
     nextUpdateTime: 0,
     nextDataCheckTime: 0,
 
-    client: undefined as AxiosInstance | undefined,
+    client: new HttpClient(baseURL),
 
     activeDataScheduler: undefined as number | undefined
   }),
 
   actions: {
     async setupAPIData() {
-      let baseURL = 'https://stacjownik.spythere.eu';
-
-      switch (import.meta.env.VITE_API_MODE) {
-        case 'development':
-          baseURL = 'http://localhost:3001';
-          break;
-        case 'mocking':
-          baseURL = 'http://localhost:3123';
-          break;
-        default:
-          break;
-      }
-
-      this.client = axios.create({
-        baseURL
-      });
-
       this.connectToAPI();
     },
 
@@ -55,32 +52,35 @@ export const useApiStore = defineStore('apiStore', {
       window.requestAnimationFrame(this.updateTick);
     },
 
-    updateTick(t: number) {
+    async updateTick(t: number) {
       // Static data refresh
       if (t >= this.nextDataCheckTime) {
-        this.fetchDonatorsData();
+        await Promise.all([
-        this.fetchVehiclesInfo();
+          this.fetchStationsGeneralInfo(),
-        this.fetchStationsGeneralInfo();
+          this.fetchVehiclesInfo(),
+          this.fetchDonatorsData()
+        ]);
 
         this.nextDataCheckTime = t + 3600000;
       }
 
       // Active data fefresh
       if (t >= this.nextUpdateTime) {
-        this.fetchActiveData();
+        await this.fetchActiveData();
-        this.nextUpdateTime = t + 20000;
+        this.nextUpdateTime = t + 31000;
       }
 
       window.requestAnimationFrame(this.updateTick);
     },
 
     async fetchActiveData() {
+      if (this.dataStatuses.connection == Status.Data.Offline) return;
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
-        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
+        const response = await this.client.get<API.ActiveData.Response>('api/getActiveData');
 
-        this.activeData = response.data;
+        this.activeData = response;
         this.dataStatuses.connection = Status.Data.Loaded;
       } catch (error) {
         this.dataStatuses.connection = Status.Data.Error;
@@ -90,9 +90,9 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDonatorsData() {
       try {
-        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client.get<API.Donators.Response>('api/getDonators');
 
-        this.donatorsData = response.data;
+        this.donatorsData = response;
       } catch (error) {
         console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
       }
@@ -100,9 +100,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchStationsGeneralInfo() {
       try {
-        const sceneryData: StationJSONData[] = (
+        const sceneryData = await this.client.get<StationJSONData[]>(`api/getSceneries`);
-          await this.client!.get<StationJSONData[]>(`api/getSceneries`)
-        ).data;
 
         this.dataStatuses.sceneries = Status.Data.Loaded;
         this.sceneryData = sceneryData;
@@ -114,10 +112,10 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchVehiclesInfo() {
       try {
-        const response = await this.client!.get<API.VehiclesData.Response>('api/getVehiclesData');
+        const response = await this.client.get<API.VehiclesData.Response>('api/getVehiclesData');
 
-        this.vehiclesData = response.data;
+        this.vehiclesData = response;
-        this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;
+        this.dataStatuses.vehicles = response ? Status.Data.Loaded : Status.Data.Warning;
       } catch (error) {
         this.dataStatuses.vehicles = Status.Data.Error;
         console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
@@ -126,9 +124,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDailyStats() {
       try {
-        const res: API.DailyStats.Response = await (
+        const res = await this.client.get<API.DailyStats.Response>('api/getDailyStats');
-          await this.client!.get('api/getDailyStats')
-        ).data;
 
         this.dailyStatsData = res;
 

src/store/mainStore.ts

@@ -29,9 +29,7 @@ export const useMainStore = defineStore('mainStore', {
       chosenModalTrainId: undefined,
 
       modalLastClickedTarget: null,
-      currentLocale: 'pl',
+      currentLocale: 'pl'
-
-      isMigrateInfoCardOpen: false
     }) as MainStoreState,
 
   actions: {
@@ -393,11 +391,13 @@ export const useMainStore = defineStore('mainStore', {
 
             const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
             const isElectric = route.isElectric;
+
             const routesKey: keyof StationRoutes = `${tracksKey}${
               !isElectric ? 'Other' : 'Electrified'
-            }Names`;
+            }${route.isInternal ? 'Internal' : ''}Names`;
+            
+            acc[routesKey].push(route.routeName);
 
-            if (!route.isInternal) acc[routesKey].push(route.routeName);
             if (route.isRouteSBL) acc['sblNames'].push(route.routeName);
 
             acc.minRouteSpeed =
@@ -412,14 +412,21 @@ export const useMainStore = defineStore('mainStore', {
             return acc;
           },
           {
+            all: [],
             single: [],
+            double: [],
+
             singleElectrifiedNames: [],
             singleOtherNames: [],
-            double: [],
             doubleElectrifiedNames: [],
             doubleOtherNames: [],
+
+            singleElectrifiedInternalNames: [],
+            singleOtherInternalNames: [],
+            doubleElectrifiedInternalNames: [],
+            doubleOtherInternalNames: [],
+
             sblNames: [],
-            all: [],
             minRouteSpeed: 0,
             maxRouteSpeed: 0
           } as StationRoutes

src/store/tooltipStore.ts

@@ -9,7 +9,8 @@ export const tooltipKeys = [
   'SpawnsTooltip',
   'UsersTooltip',
   'HtmlTooltip',
-  'TrainInfoTooltip'
+  'TrainInfoTooltip',
+  'CreatorTooltip'
 ] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];

src/store/typings.ts

@@ -8,7 +8,6 @@ export interface MainStoreState {
   chosenModalTrainId?: string;
   modalLastClickedTarget: EventTarget | null;
   currentLocale: string;
-  isMigrateInfoCardOpen: boolean;
 }
 
 export interface StationJSONData {

src/styles/_animations.scss

@@ -1,4 +1,4 @@
-$animDuration: 95ms;
+$animDuration: 120ms;
 $animType: ease-in-out;
 
 // List animation

src/styles/_badge.scss

@@ -85,7 +85,6 @@
   padding: 0.1em 0.3em;
   border-radius: 0.2em;
   font-weight: bold;
-  user-select: none;
 
   &.twr {
     background-color: var(--clr-twr);

src/styles/_dropdown-filters.scss

@@ -85,7 +85,7 @@ h1.option-title {
   }
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   h1 {
     text-align: center;
 

src/styles/_dropdown.scss

@@ -26,7 +26,7 @@
 .dropdown_wrapper {
   position: absolute;
   left: 0;
-  top: calc(100% + 0.5em);
+  top: 0;
 
   background-color: var(--clr-bg3);
   box-shadow: 0 0 5px 1px var(--clr-primary);
@@ -34,16 +34,8 @@
   width: 100%;
   max-width: 550px;
 
-  max-height: 750px;
   overflow: auto;
 
   padding: 1em;
   z-index: 100;
 }
-
-@include responsive.smallScreen {
-  .dropdown_wrapper {
-    font-size: 1.1em;
-    max-width: 100%;
-  }
-}

src/styles/_global.scss

@@ -217,6 +217,19 @@ ul {
     text-shadow: #f050ff 0 0 10px;
   }
 
+  &--creator {
+    color: var(--clr-primary);
+    color: transparent;
+
+    background: var(--clr-primary);
+    background: linear-gradient(90deg, gold 30%, #ffffff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    text-shadow: gold 0 0 10px;
+  }
+
   &--discord {
     color: var(--clr-donator);
     color: transparent;

src/styles/_journal-section.scss

@@ -24,8 +24,8 @@
   width: 100%;
 
   margin: 0 auto;
-
   padding: 1em 0;
+  position: relative;
 }
 
 .journal_refreshed-date {
@@ -57,7 +57,6 @@
   justify-content: space-between;
   align-items: center;
   gap: 0.5em;
-  position: relative;
 }
 
 .btn--load-data {
@@ -68,7 +67,7 @@
   font-size: 1.2em;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;

src/styles/_search-box.scss

@@ -15,7 +15,6 @@
     gap: 0.25em;
 
     min-width: 200px;
-    margin-right: 0.25em;
   }
 
   &-input {

src/typings/api.ts

@@ -253,8 +253,10 @@ export namespace API {
       pn?: number;
       tn?: number;
 
-      returnType?: 'all' | 'short' | 'detailed';
+      headUnitName?: string;
+      headUnitType?: string;
 
+      returnType?: 'all' | 'short' | 'detailed';
       sortBy?: Journal.TimetableSorter['id'];
     }
 

src/typings/common.ts

@@ -130,6 +130,12 @@ export interface StationRoutes {
   singleOtherNames: string[];
   doubleElectrifiedNames: string[];
   doubleOtherNames: string[];
+
+  singleElectrifiedInternalNames: string[];
+  singleOtherInternalNames: string[];
+  doubleElectrifiedInternalNames: string[];
+  doubleOtherInternalNames: string[];
+
   sblNames: string[];
 
   minRouteSpeed: number;

src/utils/userUtils.ts

@@ -0,0 +1,3 @@
+export function isCreator(name: string) {
+  return /(spythere|kowbojyt)/.test(name.toLowerCase());
+}

src/views/JournalDispatchers.vue

@@ -217,9 +217,10 @@ export default defineComponent({
       this.scrollDataLoaded = false;
       this.currentQueryParams['countFrom'] = this.historyList.length;
 
-      const responseData: API.DispatcherHistory.Response = await (
+      const responseData: API.DispatcherHistory.Response = await await this.apiStore.client.get(
-        await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
+        `api/getDispatchers`,
-      ).data;
+        this.currentQueryParams
+      );
 
       if (!responseData) return;
 
@@ -276,9 +277,10 @@ export default defineComponent({
       this.currentQueryParams = queryParams;
 
       try {
-        const responseData: API.DispatcherHistory.Response = await (
+        const responseData: API.DispatcherHistory.Response = await this.apiStore.client.get(
-          await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
+          `api/getDispatchers`,
-        ).data;
+          this.currentQueryParams
+        );
 
         if (!responseData) {
           this.dataStatus = Status.Data.Error;

src/views/JournalTimetables.vue

@@ -173,8 +173,9 @@ export default defineComponent({
       'search-issuedFrom': '',
       'search-via': '',
       'search-terminatingAt': '',
-      'select-categoryCode': '',
+      'search-headUnit': '',
-      'search-date-from': ''
+      'search-date-from': '',
+      'select-categoryCode': ''
     } as Journal.TimetableSearchType);
 
     const countFromIndex = ref(0);
@@ -277,11 +278,10 @@ export default defineComponent({
 
       this.currentQueryParams['countFrom'] = this.timetableHistory.length;
 
-      const responseData: API.TimetableHistory.Response = await (
+      const responseData: API.TimetableHistory.Response = await this.apiStore.client.get(
-        await this.apiStore.client!.get('api/getTimetables', {
+        'api/getTimetables',
-          params: this.currentQueryParams
+        this.currentQueryParams
-        })
+      );
-      ).data;
 
       if (!responseData) return;
 
@@ -297,6 +297,8 @@ export default defineComponent({
     async fetchHistoryData() {
       this.extraInfoIndexes.length = 0;
 
+      const queryParams: API.TimetableHistory.QueryParams = {};
+
       const driverName = this.searchersValues['search-driver'].trim() || undefined;
       const trainNo = this.searchersValues['search-train'].trim() || undefined;
       const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
@@ -306,6 +308,7 @@ export default defineComponent({
       const via = this.searchersValues['search-via'].trim() || undefined;
       const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
       const categoryCode = this.searchersValues['select-categoryCode'].trim() || undefined;
+      const headUnit = this.searchersValues['search-headUnit'].trim() || undefined;
 
       let dateFromISO: string | undefined = undefined;
       let dateToISO: string | undefined = undefined;
@@ -321,8 +324,6 @@ export default defineComponent({
         dateToISO = dateTo.toISOString();
       }
 
-      const queryParams: API.TimetableHistory.QueryParams = {};
-
       this.filterList
         .filter((f) => f.isActive)
         .forEach((f) => {
@@ -394,17 +395,27 @@ export default defineComponent({
       queryParams['sortBy'] =
         this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;
 
+      // Head unit params
+      if (headUnit) {
+        const [headUnitName, headUnitNumber] = headUnit.split('-');
+
+        if (headUnitNumber && !isNaN(Number(headUnitNumber))) {
+          queryParams['headUnitName'] = `${headUnitName}-${headUnitNumber}`;
+        } else {
+          queryParams['headUnitType'] = headUnitName;
+        }
+      }
+
       if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams))
         this.dataStatus = Status.Data.Loading;
 
       this.currentQueryParams = queryParams;
 
       try {
-        const responseData: API.TimetableHistory.ResponseShort = await (
+        const responseData: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
-          await this.apiStore.client!.get('api/getTimetables', {
+          'api/getTimetables',
-            params: this.currentQueryParams
+          this.currentQueryParams
-          })
+        );
-        ).data;
 
         if (!responseData) {
           this.dataStatus = Status.Data.Error;

src/views/PlayerProfileView.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="profile-view">
-    <div class="profile-wrapper" v-if="playerInfo && playerDataStatus == Status.Data.Loaded">
+    <div class="profile-wrapper" v-if="playerInfo && playerInfoStatus == Status.Data.Loaded">
-      <ProfileSummary :playerInfo="playerInfo" :playerName="playerName" />
+      <ProfileSummary
+        :playerInfo="playerInfo"
+        :playerTD2Info="playerTD2Info"
+        :playerName="playerName"
+      />
 
       <div class="profile-side">
         <ProfileRecentStats :playerInfo="playerInfo" />
-        <ProfileHistoryList :playerName="playerName" />
+        <ProfileHistoryList
+          :playerName="playerName"
+          :playerJournal="playerJournal"
+          :journalStatus="playerJournalStatus"
+        />
       </div>
     </div>
 
-    <Loading v-else-if="playerDataStatus == Status.Data.Loading" />
+    <Loading v-else-if="playerInfoStatus == Status.Data.Loading" />
 
     <div class="no-data-found" v-else>
       <div>
@@ -22,9 +30,9 @@
 
 <script lang="ts" setup>
 import { onActivated, onDeactivated, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useApiStore } from '../store/apiStore';
-import { API } from '../typings/api';
+import { API, Td2API } from '../typings/api';
 import { useI18n } from 'vue-i18n';
 import { Status } from '../typings/common';
 
@@ -34,6 +42,7 @@ import ProfileRecentStats from '../components/PlayerProfileView/ProfileRecentSta
 import ProfileHistoryList from '../components/PlayerProfileView/ProfileHistoryList.vue';
 
 const { t } = useI18n();
+const router = useRouter();
 
 const apiStore = useApiStore();
 const route = useRoute();
@@ -41,15 +50,18 @@ const route = useRoute();
 const playerId = ref(-1);
 const playerName = ref('');
 
-const playerInfo = ref<API.PlayerInfo.Data | null>(null);
+const playerInfo = ref<API.PlayerInfo.Data | undefined>(undefined);
-const playerDataStatus = ref(Status.Data.Initialized);
+const playerTD2Info = ref<Td2API.UsersInfoByName.UserInfo | undefined>(undefined);
+const playerJournal = ref<API.PlayerJournal.Data | undefined>(undefined);
+
+const playerInfoStatus = ref(Status.Data.Initialized);
+const playerJournalStatus = ref(Status.Data.Initialized);
 
 const intervalId = ref(-1);
 
 onActivated(() => {
   fetchPlayerData();
-
+  intervalId.value = setInterval(fetchPlayerData, 32000);
-  intervalId.value = setInterval(fetchPlayerData, 30000);
 });
 
 onDeactivated(() => {
@@ -57,32 +69,82 @@ onDeactivated(() => {
   intervalId.value = -1;
 });
 
+async function fetchPlayerInfo(playerId: number) {
+  return apiStore.client.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
+    playerId
+  });
+}
+
+async function fetchPlayerJournal(playerId: number) {
+  return apiStore.client.get<API.PlayerJournal.Data>('api/getPlayerJournal', {
+    playerId,
+    dateScope: '30d'
+  });
+}
+
+async function fetchPlayerTd2Info(playerName: string): Promise<Td2API.UsersInfoByName.Response> {
+  const response = await fetch(
+    `https://api.td2.info.pl?method=getUsersInfoByName&name=${playerName}`
+  );
+
+  if (!response.ok) {
+    throw new Error('fetchPlayerTd2Info: could not fetch data');
+  }
+
+  return response.json();
+}
+
 async function fetchPlayerData() {
   const queryPlayerId = Number(route.query.playerId) || -1;
 
   if (!apiStore.client || !queryPlayerId) return;
 
   if (queryPlayerId != playerId.value) {
-    playerDataStatus.value = Status.Data.Loading;
+    playerInfoStatus.value = Status.Data.Loading;
+    playerJournalStatus.value = Status.Data.Loading;
+
+    playerInfo.value = undefined;
+    playerTD2Info.value = undefined;
+    playerJournal.value = undefined;
   }
 
   playerId.value = queryPlayerId;
 
   try {
-    const response = await apiStore.client.get<API.PlayerInfo.Data>('api/getPlayerInfo', {
+    const playerInfoResp = await fetchPlayerInfo(playerId.value);
-      params: {
-        playerId: queryPlayerId
-      }
-    });
 
     playerName.value =
-      response.data.driverStats.driverName || response.data.dispatcherStats.dispatcherName || '';
+      playerInfoResp.driverStats.driverName || playerInfoResp.dispatcherStats.dispatcherName || '';
 
-    playerInfo.value = response.data || null;
+    if (!playerName.value) {
-    playerDataStatus.value = Status.Data.Loaded;
+      router.push('/');
+      return;
+    }
+
+    playerInfo.value = playerName.value ? playerInfoResp : undefined;
+    playerInfoStatus.value = Status.Data.Loaded;
+
+    if (playerName.value) {
+      const playerTD2InfoResp = await fetchPlayerTd2Info(playerName.value);
+
+      if (playerTD2InfoResp.success && playerTD2InfoResp.message.length == 1) {
+        playerTD2Info.value = playerTD2InfoResp.message[0];
+      }
+    }
   } catch (error) {
-    console.error(error);
+    playerInfo.value = undefined;
-    playerDataStatus.value = Status.Data.Error;
+    playerTD2Info.value = undefined;
+    playerInfoStatus.value = Status.Data.Error;
+  }
+
+  try {
+    const playerJournalResp = await fetchPlayerJournal(playerId.value);
+
+    playerJournal.value = playerJournalResp;
+    playerJournalStatus.value = Status.Data.Loaded;
+  } catch (error) {
+    playerJournal.value = undefined;
+    playerJournalStatus.value = Status.Data.Error;
   }
 }
 </script>
@@ -100,7 +162,12 @@ async function fetchPlayerData() {
 }
 
 .no-data-found {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   text-align: center;
+  font-size: 1.35em;
 
   max-width: var(--max-container-width);
   width: 100%;

src/views/SceneryView.vue

@@ -58,6 +58,7 @@ import SceneryDispatchersHistory from '../components/SceneryView/SceneryDispatch
 
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
+import SceneryTopList from '../components/SceneryView/SceneryTopList.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -89,6 +90,10 @@ const viewModes = [
   {
     id: 'scenery.option-dispatchers-history',
     component: SceneryDispatchersHistory
+  },
+  {
+    id: 'scenery.option-top-list',
+    component: SceneryTopList
   }
 ];
 
@@ -184,7 +189,7 @@ function setViewMode(componentName: string) {
 
   background-color: #181818;
   border-radius: 0.5em;
-  padding: 1em 0.5em;
+  padding: 1em;
 }
 
 .scenery-left {

src/views/StationsView.vue

@@ -13,16 +13,6 @@
         </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()"
@@ -44,7 +34,7 @@
 
           <a
             class="a-button btn--image gnr-link"
-            href="https://generator-td2.web.app/"
+            href="https://generator-td2.spythere.eu/"
             target="_blank"
             data-tooltip-type="HtmlTooltip"
             :data-tooltip-content="`<b>${$t('app.gnr-link-content')}</b>`"
@@ -54,7 +44,7 @@
 
           <a
             class="a-button btn--image pojazdownik-link"
-            href="https://pojazdownik-td2.web.app/"
+            href="https://pojazdownik-td2.spythere.eu/"
             target="_blank"
             data-tooltip-type="HtmlTooltip"
             :data-tooltip-content="`<b>${$t('app.pojazdownik-link-content')}</b>`"
@@ -129,19 +119,9 @@ 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>
@@ -200,11 +180,6 @@ 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;
 

src/views/TrainsView.vue

@@ -116,13 +116,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../styles/responsive';
 
-.trains-view {
-  position: relative;
-}
-
 .trains_wrapper {
   margin: 1rem auto;
   max-width: var(--max-container-width);
+  position: relative;
 }
 
 .trains_topbar {
@@ -130,7 +127,6 @@ export default defineComponent({
   align-items: center;
   gap: 0.5em;
 
-  position: relative;
   margin-bottom: 0.5em;
 }
 

tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "noUncheckedIndexedAccess": false,
+    "verbatimModuleSyntax": null,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  }
+}

tsconfig.json

@@ -1,24 +1,11 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-
-    "lib": ["ESNext", "DOM"],
-    "types": ["vite/client", "vite-plugin-pwa/client"],
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [
     {
       "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
     }
   ]
 }

tsconfig.node.json

@@ -1,9 +1,12 @@
+// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
 {
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": ["vite.config.*", "eslint.config.*"],
   "compilerOptions": {
-    "composite": true,
+    "module": "preserve",
-    "module": "nodenext",
+    "moduleResolution": "bundler",
-    "moduleResolution": "nodenext",
+    "types": ["node", "vite/client", "vite-plugin-pwa/client"],
-    "allowSyntheticDefaultImports": true
+    "noEmit": true,
-  },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
-  "include": ["vite.config.ts"]
+  }
 }

vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
-import path from 'path';
+import { fileURLToPath } from 'node:url';
 
 export default defineConfig({
   server: { port: 5123, open: false },
@@ -14,7 +14,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src')
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
   plugins: [
@@ -29,10 +29,13 @@ export default defineConfig({
           {
             urlPattern:
               /^https:\/\/stacjownik.spythere.eu\/api\/(getVehiclesData|getDonators|getSceneries)/i,
-            handler: 'NetworkFirst',
+            handler: 'StaleWhileRevalidate',
             options: {
               cacheName: 'stacjownik-api-cache',
-              cacheableResponse: { statuses: [0, 200] }
+              cacheableResponse: { statuses: [0, 200] },
+              expiration: {
+                maxAgeSeconds: 3600
+              }
             }
           }
         ]