Merge pull request #105 from Spythere/development

v1.27.0

.github/workflows/firebase-hosting-merge.yml

@@ -1,6 +1,3 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
 name: Deploy to Firebase Hosting on merge
 'on':
   push:
@@ -11,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
           channelId: live
-          projectId: stacjownik-td2
+          projectId: stacjownik-td2

.github/workflows/firebase-hosting-pull-request.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

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

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

index.html

@@ -19,7 +19,6 @@
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#222222" />
 
     <link rel="icon" href="favicon.ico" />
 

package.json

@@ -1,11 +1,13 @@
 {
   "name": "stacjownik",
-  "version": "1.23.1",
+  "version": "1.27.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "deploy": "yarn build && firebase deploy --only hosting",
+    "deploy:prod": "yarn build && firebase deploy --only hosting",
+    "deploy:dev": "yarn build && firebase hosting:channel:deploy dev --expires 7d",
     "preview": "yarn build && vite preview",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -14,31 +16,25 @@
   "dependencies": {
     "core-js": "^3.32.2",
     "dotenv": "^16.3.1",
-    "firebase": "^10.4.0",
-    "howler": "^2.2.4",
     "pinia": "^2.1.6",
     "sass": "^1.67.0",
-    "socket.io-client": "^4.7.4",
+    "showdown": "^2.1.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.4.1",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^20.6.2",
-    "@vite-pwa/assets-generator": "^0.0.10",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
-    "axios": "^1.5.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-pwa": "^0.16.5",
-    "vue-tsc": "^1.8.11"
+    "@types/node": "^20.14.12",
+    "@types/showdown": "^2.0.6",
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@vue/tsconfig": "^0.5.1",
+    "axios": "^1.7.2",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.4",
+    "vite-plugin-pwa": "^0.20.0",
+    "vue-tsc": "^2.0.28"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,13 +1,11 @@
 <template>
-  <div class="app_container" v-cloak>
-    <PopUp />
-
-    <transition name="modal-anim">
-      <keep-alive>
-        <TrainModal />
-      </keep-alive>
-    </transition>
+  <div class="app_container">
+    <UpdateCard
+      :is-update-card-open="isUpdateCardOpen"
+      @toggle-card="() => (isUpdateCardOpen = false)"
+    />
 
+    <Tooltip />
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
@@ -22,7 +20,10 @@
       &copy;
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
       {{ new Date().getUTCFullYear() }} |
-      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
+      <button class="btn--text" @click="() => (isUpdateCardOpen = true)">
+        v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
+      </button>
+
       <br />
       <a href="https://discord.gg/x2mpNN3svk">
         <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
@@ -36,19 +37,20 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import axios from 'axios';
-import { version } from '.././package.json';
 
+import { version } from '.././package.json';
+import { Status } from './typings/common';
 import { useMainStore } from './store/mainStore';
-import popupMixin from './mixins/popupMixin';
+import { useApiStore } from './store/apiStore';
+import { useTooltipStore } from './store/tooltipStore';
 
 import Clock from './components/App/Clock.vue';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import AppHeader from './components/App/AppHeader.vue';
-import TrainModal from './components/TrainsView/TrainModal.vue';
+import Tooltip from './components/Tooltip/Tooltip.vue';
+import UpdateCard from './components/App/UpdateCard.vue';
+
 import StorageManager from './managers/storageManager';
-import PopUp from './components/PopUp/PopUp.vue';
-import { useApiStore } from './store/apiStore';
-import { Status } from './typings/common';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -57,19 +59,19 @@ export default defineComponent({
     Clock,
     StatusIndicator,
     AppHeader,
-    TrainModal,
-    PopUp
+    UpdateCard,
+    Tooltip
   },
 
-  mixins: [popupMixin],
-
   data: () => ({
     VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
+    tooltipStore: useTooltipStore(),
+
+    isUpdateCardOpen: false,
 
     currentLang: 'pl',
-    releaseURL: '',
     isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
   }),
 
@@ -78,41 +80,44 @@ export default defineComponent({
   },
 
   async mounted() {
-    window.addEventListener('focus', () => {
-      if (Date.now() - this.apiStore.lastFetchData.getTime() < 15000) return;
-
-      this.apiStore.fetchActiveData();
-    });
-
-    window.addEventListener('mousemove', (e: MouseEvent) => this.handlePopUpEvents(e));
+    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
   },
 
   methods: {
     init() {
+      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
+
       this.loadLang();
-      this.setReleaseURL();
       this.setupOfflineHandling();
       this.checkAppVersion();
 
       this.apiStore.setupAPIData();
-
-      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
     },
 
-    checkAppVersion() {
-      if (import.meta.env.DEV) {
-        this.store.isNewUpdate = true;
-
-        return;
-      }
-
+    async checkAppVersion() {
       const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
 
-      if (storageVersion === undefined || storageVersion != version) {
-        this.store.isNewUpdate = true;
+      try {
+        const releaseData = await (
+          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
+        ).data;
 
-        StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
+        if (!releaseData) return;
+
+        this.store.appUpdate = {
+          version,
+          changelog: releaseData.body,
+          releaseURL: releaseData.html_url
+        };
+
+        this.isUpdateCardOpen =
+          (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
+          import.meta.env.VITE_UPDATE_TEST === 'test';
+      } catch (error) {
+        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
       }
+
+      StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
     },
 
     setupOfflineHandling() {
@@ -133,31 +138,11 @@ export default defineComponent({
 
     handleOnlineMode() {
       this.store.isOffline = false;
+      this.apiStore.dataStatuses.connection = Status.Data.Loading;
 
       this.apiStore.connectToAPI();
     },
 
-    handlePopUpEvents(e: MouseEvent) {
-      const targetEl = e
-        .composedPath()
-        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
-
-      if (!targetEl || !(targetEl instanceof HTMLElement)) {
-        if (this.store.popUpData.key != null) this.hidePopUp();
-
-        return;
-      }
-
-      const popupComponentKey = targetEl.getAttribute('data-popup-key');
-      const popupContent = targetEl.getAttribute('data-popup-content');
-
-      if (popupComponentKey && popupContent) this.showPopUp(e, popupComponentKey, popupContent);
-      else if (this.store.popUpData.key != null) this.hidePopUp();
-
-      this.store.mousePos.x = e.pageX;
-      this.store.mousePos.y = e.pageY;
-    },
-
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;
@@ -165,21 +150,6 @@ export default defineComponent({
       StorageManager.setStringValue('lang', lang);
     },
 
-    async setReleaseURL() {
-      try {
-        const releaseData = await (
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-        ).data;
-
-        if (!releaseData) return;
-
-        this.releaseURL = releaseData.html_url;
-      } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
-        return;
-      }
-    },
-
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 
@@ -192,7 +162,7 @@ export default defineComponent({
 
       const naviLanguage = window.navigator.language.toString();
 
-      if (naviLanguage.includes('en')) {
+      if (naviLanguage.startsWith('en')) {
         this.changeLang('en');
         return;
       }
@@ -222,7 +192,7 @@ export default defineComponent({
   overflow-x: hidden;
 
   @include smallScreen() {
-    font-size: calc(0.65rem + 0.8vw);
+    font-size: calc(0.65rem + 0.85vw);
   }
 
   @include screenLandscape() {
@@ -238,6 +208,7 @@ export default defineComponent({
 
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .app_main {
@@ -255,10 +226,15 @@ export default defineComponent({
 }
 
 // FOOTER
-footer.app_footer {
+.app_footer {
   max-width: 100%;
   padding: 0.5em;
 
+  button {
+    display: inline-block;
+    padding: 0.1em;
+  }
+
   img {
     width: 1.1em;
     vertical-align: text-bottom;

src/components/App/AppHeader.vue

@@ -29,11 +29,6 @@
             <img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
             <span class="text--primary">{{ onlineDispatchersCount }}</span>
 
-            <!-- <span class="g-tooltip">
-              <b class="text--primary">{{ factorU }}U</b>
-              <div class="content">Test</div>
-            </span> -->
-
             <span class="text--grayed"> / </span>
             <span class="text--primary">{{ onlineTrainsCount }}</span>
             <img src="/images/icon-train.svg" alt="icon train" />
@@ -103,12 +98,6 @@ export default defineComponent({
       return this.store.activeSceneryList.filter(
         (scenery) => scenery.region == this.store.region.id && scenery.dispatcherId != -1
       ).length;
-    },
-
-    factorU() {
-      return this.onlineDispatchersCount == 0
-        ? '-'
-        : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
     }
   },
   components: { StatusIndicator, Clock, RegionDropdown }

src/components/App/UpdateCard.vue

@@ -0,0 +1,123 @@
+<template>
+  <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
+    <div class="content">
+      <h1 style="margin-bottom: 0.5em">🚀 {{ $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>
+
+      <button class="btn btn--action" ref="confirm-btn" @click="toggleCard(false)">
+        {{ $t('update.confirm') }}
+      </button>
+
+      <p class="bottom-info">
+        {{ $t('update.info-1') }}
+        <br />
+        <span v-html="$t('update.info-2')"></span>
+      </p>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { version } from '../../../package.json';
+import { Converter } from 'showdown';
+
+import Card from '../Global/Card.vue';
+
+const converter = new Converter();
+
+export default defineComponent({
+  components: { Card },
+
+  props: {
+    isUpdateCardOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  emits: ['toggleCard'],
+
+  data() {
+    return {
+      mainStore: useMainStore(),
+      version: version
+    };
+  },
+
+  watch: {
+    isUpdateCardOpen(val: boolean) {
+      this.$nextTick(() => {
+        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+      });
+    }
+  },
+
+  computed: {
+    htmlChangelog() {
+      if (this.mainStore.appUpdate == null) return '';
+
+      return converter.makeHtml(this.mainStore.appUpdate.changelog);
+    }
+  },
+
+  methods: {
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
+::v-deep(h1) {
+  text-align: center;
+  color: $accentCol;
+}
+
+::v-deep(h2) {
+  padding: 0.25em 0;
+  border-bottom: 1px solid #aaa;
+}
+
+::v-deep(ul) {
+  list-style: initial;
+  padding: 1em;
+  line-height: 1.5em;
+}
+
+.content {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+  padding: 1em;
+  min-height: 700px;
+  overflow: auto;
+  text-align: justify;
+  max-width: 700px;
+}
+
+.no-features {
+  text-align: center;
+}
+
+button {
+  margin: 0 auto;
+  padding: 0.5em 0.75em;
+  font-size: 1.1em;
+}
+
+p.bottom-info {
+  text-align: center;
+  color: #ccc;
+}
+
+a {
+  text-decoration: underline;
+}
+</style>

src/components/App/UpdateModal.vue

@@ -1,133 +0,0 @@
-<template>
-  <AnimatedModal :is-open="mainStore.isNewUpdate" @toggle-modal="toggleModal">
-    <div class="modal_content">
-      <div>
-        <h1 style="margin-bottom: 0.5em">{{ $t('update.title') }}</h1>
-        <h2 class="text--primary">{{ $t('update.version', [version]) }}</h2>
-        <hr class="separator" />
-      </div>
-
-      <div class="features-list">
-        <h2>Nowości i zmiany:</h2>
-        <ul>
-          <li v-for="content in localeChangesArray" :key="content">{{ content }}</li>
-        </ul>
-      </div>
-
-      <div class="modal_actions">
-        <button class="btn--action">Przyjąłem!</button>
-
-        <p>Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony!</p>
-
-        <!-- <div class="actions-checkboxes">
-          <label>
-            <input type="checkbox" />
-            <span>nie pokazuj dla przyszłych aktualizacji</span>
-          </label>
-
-          <label>
-            <input type="checkbox" />
-            <span>nie pokazuj dla przyszłych aktualizacji</span>
-          </label>
-        </div> -->
-      </div>
-    </div>
-  </AnimatedModal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
-import { version } from '../../../package.json';
-import AnimatedModal from '../Global/AnimatedModal.vue';
-
-export default defineComponent({
-  components: { AnimatedModal },
-
-  data() {
-    return {
-      mainStore: useMainStore(),
-      version: version
-    };
-  },
-
-  computed: {
-    localeChangesArray() {
-      return this.$t('update.content').split('\n');
-    }
-  },
-
-  methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.modal_content {
-  font-size: 1.2em;
-  text-align: center;
-  padding: 1em;
-  height: 80vh;
-  min-height: 550px;
-
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  gap: 0.5em;
-}
-
-hr.separator {
-  margin: 0.5em 0;
-  padding: 0;
-  height: 3px;
-  background-color: #fff;
-}
-
-.features-list {
-  margin-top: 0.5em;
-  overflow: auto;
-
-  ul {
-    text-align: left;
-    list-style: '\21D2  ';
-    padding: 1em;
-  }
-
-  li {
-    margin: 0.5em 0;
-  }
-}
-
-.modal_actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-
-  button {
-    font-weight: bold;
-    padding: 0.35em;
-  }
-
-  p {
-    font-size: 0.9em;
-  }
-}
-
-.actions-checkboxes {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  gap: 1em;
-
-  label {
-    font-size: 0.9em;
-  }
-
-  label > input {
-    margin-right: 0.5em;
-  }
-}
-</style>

src/components/Global/AnimatedModal.vue

@@ -1,101 +0,0 @@
-<template>
-  <transition name="modal-anim" tag="div" class="modal">
-    <div class="body" v-if="isOpen">
-      <div class="background" @click="toggleModal(false)"></div>
-      <div class="wrapper" ref="wrapper" tabindex="0">
-        <slot></slot>
-      </div>
-      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
-    </div>
-  </transition>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
-
-export default defineComponent({
-  emits: ['toggleModal'],
-
-  props: {
-    isOpen: Boolean
-  },
-
-  data() {
-    return {
-      store: useMainStore()
-    };
-  },
-
-  watch: {
-    isOpen(v) {
-      this.$nextTick(() => {
-        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
-        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
-      });
-    }
-  },
-
-  methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.body {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 200;
-
-  width: 100vw;
-  height: 100vh;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #333333;
-
-  width: 95%;
-  max-width: 800px;
-  max-height: 95vh;
-
-  & > :slotted(div) {
-    max-height: 95vh;
-  }
-}
-
-@include smallScreen {
-  .wrapper {
-    top: 0;
-    transform: translate(-50%, 1em);
-    max-height: 90vh;
-
-    & > :slotted(div) {
-      max-height: 90vh;
-    }
-  }
-}
-</style>

src/components/Global/Card.vue

@@ -0,0 +1,93 @@
+<template>
+  <transition name="modal-anim" tag="div">
+    <div class="card" v-if="isOpen">
+      <div class="card-background" @click="toggleCard(false)"></div>
+      <div class="card-body" tabindex="0">
+        <slot></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  emits: ['toggleCard'],
+
+  props: {
+    isOpen: Boolean
+  },
+
+  data() {
+    return {
+      store: useMainStore()
+    };
+  },
+
+  watch: {
+    isOpen(v) {
+      this.$nextTick(() => {
+        if (v == false) (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+      });
+    }
+  },
+
+  methods: {
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.card {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.card-body {
+  position: relative;
+
+  margin: 1em;
+
+  max-height: 95vh;
+  max-height: 95dvh;
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #0e0e0e;
+
+  overflow: auto;
+}
+
+@include smallScreen {
+  .card {
+    align-items: flex-start;
+  }
+}
+</style>

src/components/Global/DonationCard.vue

@@ -1,12 +1,7 @@
 <template>
-  <AnimatedModal
-    class="donation-modal"
-    :isOpen="isModalOpen"
-    @toggleModal="toggleModal"
-    @keydown.esc="toggleModal(false)"
-  >
-    <div class="modal_content">
-      <div class="modal_main">
+  <Card :isOpen="isCardOpen" @toggleCard="toggleCard" @keydown.esc="toggleCard(false)">
+    <div class="body">
+      <div class="content">
         <h1 v-html="$t('donations.header')"></h1>
         <div class="donators-slider" v-if="donatorList.length != 0">
           <span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
@@ -61,18 +56,19 @@
         </i>
       </div>
 
-      <div class="modal_actions">
+      <div class="actions">
         <a
-          class="modal-action a-button btn--image coffee"
+          class="action a-button btn--image coffee"
           href="https://buycoffee.to/spythere"
           target="_blank"
+          ref="action"
         >
           <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
           {{ $t('donations.action-buycoffee') }}
         </a>
 
         <a
-          class="modal-action a-button btn--image paypal"
+          class="action a-button btn--image paypal"
           href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
           target="_blank"
         >
@@ -80,32 +76,36 @@
           {{ $t('donations.action-paypal') }}
         </a>
 
-        <button class="modal-action btn--image exit" @click="toggleModal(false)">
+        <button class="action btn--image exit" @click="toggleCard(false)">
           <img src="/images/icon-exit.svg" alt="dollar donation icon" />
           {{ $t('donations.action-exit') }}
         </button>
       </div>
     </div>
-  </AnimatedModal>
+  </Card>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import AnimatedModal from './AnimatedModal.vue';
 import { useApiStore } from '../../store/apiStore';
+import Card from './Card.vue';
 
 export default defineComponent({
-  components: { AnimatedModal },
+  components: { Card },
   props: {
-    isModalOpen: Boolean
+    isCardOpen: Boolean
   },
 
-  emits: ['toggleModal'],
+  emits: ['toggleCard'],
 
   watch: {
-    isModalOpen(b: boolean) {
-      this.running = b;
+    isCardOpen(val: boolean) {
+      this.running = val;
       this.lastUpdate = Date.now();
+
+      this.$nextTick(() => {
+        if (val) (this.$refs['action'] as HTMLElement).focus();
+      });
     }
   },
 
@@ -133,8 +133,8 @@ export default defineComponent({
   },
 
   methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
     },
 
     runUpdate() {
@@ -152,53 +152,53 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.modal_content {
+.body {
   display: grid;
   grid-template-rows: 1fr auto;
   gap: 1em;
 
   font-size: 1.1em;
 
-  & > div {
-    padding: 1em;
-  }
-
-  h1 {
-    font-size: 1.95em;
-    text-align: center;
-  }
-
-  p {
-    text-align: justify;
-  }
-
-  a.discord {
-    text-decoration: underline;
-  }
+  max-width: 820px;
 }
 
-.modal_main {
+.content {
   overflow: auto;
   overflow-x: hidden;
-
-  img {
-    max-height: 20px;
-    margin-right: 5px;
-    vertical-align: text-bottom;
-  }
+  padding: 1em;
 }
 
-.modal_actions {
+img {
+  max-height: 20px;
+  margin-right: 5px;
+  vertical-align: text-bottom;
+}
+
+h1 {
+  font-size: 1.95em;
+  text-align: center;
+}
+
+p {
+  text-align: justify;
+}
+
+a.discord {
+  text-decoration: underline;
+}
+
+.actions {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 0.5em;
+  padding: 1em;
 
   form button {
     width: 100%;
   }
 }
 
-.modal_actions > .modal-action {
+.actions > .action {
   &.paypal {
     $btnColor: #254069;
 

src/components/Global/ProgressBar.vue

@@ -43,7 +43,6 @@ export default defineComponent({
 
   width: 6em;
   height: 1em;
-  margin: 0.5em 0;
 
   .bar-fg,
   .bar-bg {

src/components/Global/RegionDropdown.vue

@@ -65,12 +65,12 @@ export default defineComponent({
       immediate: true,
       handler(regionQuery: string) {
         if (regionQuery) {
-          this.store.region.id =
+          this.store.region =
             regionsJSON.find(
               (reg) =>
                 reg.id == regionQuery.toLocaleLowerCase() ||
                 reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
-            )?.id || 'eu';
+            ) ?? regionsJSON[0];
         }
       }
     }
@@ -139,15 +139,10 @@ button.selected-region {
   color: paleturquoise;
 
   font-weight: bold;
-  padding: 0.1em 0.5em;
 
   &:focus {
     background-color: #262626;
   }
-
-  span {
-    margin-right: 10px;
-  }
 }
 
 .content {
@@ -197,6 +192,8 @@ li.option {
   }
 
   label {
+    width: 100%;
+    padding: 0.5em 0;
     position: relative;
 
     display: inline-block;
@@ -207,10 +204,6 @@ li.option {
       background-color: #333333f2;
     }
 
-    padding: 0.5em 0;
-
-    width: 100%;
-
     cursor: pointer;
   }
 }

src/components/Global/StationStatusBadge.vue

@@ -88,8 +88,9 @@ $unknown: #b93c3c;
 .status-badge {
   border-radius: 1em;
   font-weight: 500;
+  text-wrap: nowrap;
 
-  padding: 0.2em 0.55em;
+  padding: 0.2rem 0.55rem;
 
   background-color: $online;
 
@@ -106,13 +107,13 @@ $unknown: #b93c3c;
 
   &.no-limit {
     background-color: $no-limit;
-    font-size: 0.85em;
+    font-size: 0.9em;
   }
 
   &.not-signed,
   &.unavailable {
     background-color: $unav;
-    font-size: 0.85em;
+    font-size: 0.9em;
   }
 
   &.afk {
@@ -125,7 +126,7 @@ $unknown: #b93c3c;
     background-color: $no-space;
     border: 1px solid white;
     color: white;
-    font-size: 0.85em;
+    font-size: 0.9em;
   }
 
   &.unknown,

src/components/Global/StockList.vue

@@ -1,80 +1,24 @@
 <template>
   <div class="stock-list">
-    <div v-if="tractionOnly">
-      <p>
-        {{ computedStockList[0].split(':')[0].split('_').splice(0, 2).join(' ') }}
-        {{ computedStockList[0].split(':')[1] }}
-      </p>
-
-      <img
-        class="traction-only"
-        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${computedStockList[0].split(':')[0]}${
-          /^EN/.test(computedStockList[0]) ? 'rb' : ''
-        }.png`"
-        @error="onImageError($event, computedStockList[0])"
-        width="300"
-        height="60"
-      />
-    </div>
-
-    <ul v-else>
-      <li v-for="(stockName, i) in computedStockList" :key="i">
-        <p>
-          {{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
-          {{ stockName.split(':')[1] }}
-        </p>
+    <ul>
+      <li
+        v-for="(
+          { vehicleName, vehicleCargo, images, imagesFallbacks, vehicleString }, i
+        ) in thumbnailNames"
+        :key="i"
+      >
+        <div class="stock-text">
+          <p>{{ vehicleName.replace(/_/g, ' ') }}</p>
+          <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
+        </div>
 
         <span>
-          <img
-            :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
-            :data-popup-content="stockName.split(':')[0]"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
-              /^EN/.test(stockName) ? 'rb' : ''
-            }.png`"
-            @error="onImageError($event, stockName)"
-            @click.stop="() => {}"
-            width="400"
-            height="60"
+          <VehicleThumbnail
+            v-for="(thumbnailImage, imageIndex) in images"
+            :vehicle-name="vehicleString"
+            :img-name="thumbnailImage"
+            :fallback-name="imagesFallbacks[imageIndex]"
           />
-
-          <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
-          <img
-            :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
-            :data-popup-content="stockName.split(':')[0]"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-            @click.stop="() => {}"
-          />
-
-          <img
-            :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
-            :data-popup-content="stockName.split(':')[0]"
-            v-if="/^EN71/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-            @click.stop="() => {}"
-          />
-
-          <img
-            :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
-            :data-popup-content="stockName.split(':')[0]"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
-            "
-            @click.stop="() => {}"
-          />
-          <!-- ///  -->
         </span>
       </li>
     </ul>
@@ -84,8 +28,11 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import VehicleThumbnail from './VehicleThumbnail.vue';
 
 export default defineComponent({
+  components: { VehicleThumbnail },
+
   props: {
     trainStockList: {
       type: Array as PropType<string[]>,
@@ -106,32 +53,117 @@ export default defineComponent({
   computed: {
     computedStockList() {
       return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
+    },
+
+    thumbnailNames() {
+      return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
+        .filter((v) => v.length != 0)
+        .map((vehicleString) => {
+          const [vehicleName, vehicleCargo] = vehicleString.split(':');
+
+          const vehicleThumbnailData = {
+            images: [] as string[],
+            imagesFallbacks: [] as string[],
+            vehicleName,
+            vehicleCargo,
+            vehicleString
+          };
+
+          // Generowanie członów EN57
+          if (vehicleName.startsWith('EN57')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 's',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów EN71
+          else if (vehicleName.startsWith('EN71')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 'sa',
+              vehicleName + 'sb',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-sa',
+              'unknown_ezt-sb',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie pojazdów i członów 2EN57
+          else if (vehicleString.startsWith('2EN57')) {
+            const [firstVehicleNumber, secondVehicleNumber] = vehicleString
+              .replace('2EN57-', '')
+              .split('+');
+
+            vehicleThumbnailData['images'] = [
+              `EN57-${firstVehicleNumber}ra`,
+              `EN57-${firstVehicleNumber}s`,
+              `EN57-${firstVehicleNumber}rb`,
+              `EN57-${secondVehicleNumber}ra`,
+              `EN57-${secondVehicleNumber}s`,
+              `EN57-${secondVehicleNumber}rb`
+            ];
+
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb',
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów Gor77
+          else if (vehicleString.startsWith('Gor77')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + '-A',
+              vehicleName + '-B',
+              vehicleName + '-C',
+              vehicleName + '-D'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_Gor77-A',
+              'unknown_Gor77-B',
+              'unknown_Gor77-C',
+              'unknown_Gor77-D'
+            ];
+          }
+          // Generowanie członów ET41
+          else if (vehicleString.startsWith('ET41')) {
+            vehicleThumbnailData['images'] = [vehicleName + '-A', vehicleName + '-B'];
+            vehicleThumbnailData['imagesFallbacks'] = ['unknown_ET41-A', 'unknown_ET41-B'];
+          }
+          // Generowanie pozostałych pojazdów
+          else {
+            let fallbackVehicleImage = 'unknown_cargo';
+
+            if (/^(EP|EU|ET|201E)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
+            else if (/^(SM42)/.test(vehicleName)) fallbackVehicleImage = 'unknown_SM42';
+            else if (/(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(vehicleName))
+              fallbackVehicleImage = 'unknown_passenger';
+
+            vehicleThumbnailData['images'] = [vehicleName];
+            vehicleThumbnailData['imagesFallbacks'] = [fallbackVehicleImage];
+          }
+
+          if (this.tractionOnly) vehicleThumbnailData['images'].length = 1;
+
+          return vehicleThumbnailData;
+        });
     }
   },
 
   methods: {
-    onImageError(event: Event, stockName: string) {
-      let fallbackName = '';
-
-      const isLoco = /.-\d{3}/.test(stockName);
-
-      if (isLoco) {
-        fallbackName += 'loco-';
-        fallbackName += /^\d?EN\d{2}/.test(stockName)
-          ? 'ezt'
-          : /^SN\d{2}/.test(stockName)
-          ? 'szt'
-          : /^\d?E/.test(stockName)
-          ? 'e'
-          : 's';
-      } else {
-        const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
-
-        fallbackName += 'car-';
-        fallbackName += isCarPassenger ? 'passenger' : 'cargo';
-      }
-
-      (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
+    onImageError(event: Event, fallbackImage: string) {
+      (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
     }
   }
 });
@@ -167,10 +199,10 @@ img.traction-only {
   max-width: 100%;
 }
 
-p {
+.stock-text {
   text-align: center;
   color: #aaa;
-  font-size: 0.95em;
-  margin-bottom: 1em;
+  font-size: 0.9em;
+  margin-bottom: 0.25em;
 }
 </style>

src/components/Global/VehicleThumbnail.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="vehicle-thumbnail">
+    <img
+      ref="imgRef"
+      :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
+      height="60"
+      loading="lazy"
+      data-tooltip-type="VehiclePreviewTooltip"
+      :data-tooltip-content="vehicleName"
+      :data-load-status="imgStatus"
+      @error="onImageError"
+      @load="onImageLoad"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, Ref, ref } from 'vue';
+
+const props = defineProps({
+  vehicleName: { type: String, required: true },
+  imgName: { type: String, required: true },
+  fallbackName: { type: String, required: true },
+  placeholderName: String
+});
+
+const imgRef = ref(null) as Ref<HTMLElement | null>;
+
+const imgStatus = ref('loading');
+
+function onImageError(event: Event) {
+  console.log('error');
+
+  (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
+  imgStatus.value = 'error';
+}
+
+function onImageLoad() {
+  if (imgStatus.value != 'error') {
+    imgStatus.value = 'loaded';
+  }
+
+  imgRef.value!.style.opacity = '1';
+}
+</script>
+
+<style lang="scss" scoped>
+.vehicle-thumbnail {
+  position: relative;
+}
+
+img {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+
+  &[data-load-status='loading'] {
+    min-height: 60px;
+    min-width: 150px;
+  }
+}
+</style>

src/components/JournalView/JournalDailyStats.vue

@@ -1,29 +1,28 @@
 <template>
   <section class="daily-stats">
     <span :data-active="statsStatus">
-      <span class="stats-list">
-        <h3>
-          {{ $t('journal.daily-stats.title') }}
-          <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
-        </h3>
+      <h3>
+        {{ $t('journal.daily-stats.title') }}
+        <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
+      </h3>
 
-        <hr class="header-separator" />
+      <hr class="header-separator" />
 
-        <b v-if="statsStatus == Status.Data.Loading">
-          {{ $t('app.loading') }}
-        </b>
+      <b v-if="statsStatus == Status.Data.Loading">
+        {{ $t('app.loading') }}
+      </b>
 
-        <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
-          {{ $t('journal.stats-error') }}
-        </b>
+      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+        {{ $t('journal.stats-error') }}
+      </b>
 
-        <b v-else-if="topDispatchers.length == 0">
-          {{ $t('journal.daily-stats.info') }}
-        </b>
+      <b v-else-if="topDispatchers.length == 0">
+        {{ $t('journal.daily-stats.info') }}
+      </b>
 
-        <div v-else>
-          <div v-if="stats.totalTimetables">
-            &bull;
+      <div v-else>
+        <ul class="stats-list">
+          <li v-if="stats.totalTimetables">
             <i18n-t keypath="journal.daily-stats.total">
               <template #count>
                 <b class="text--primary">
@@ -36,10 +35,9 @@
                 <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
               </template>
             </i18n-t>
-          </div>
+          </li>
 
-          <div v-if="stats.maxTimetable">
-            &bull;
+          <li v-if="stats.maxTimetable">
             <i18n-t keypath="journal.daily-stats.longest">
               <template #id>
                 <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
@@ -60,10 +58,9 @@
                 <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
               </template>
             </i18n-t>
-          </div>
+          </li>
 
-          <div v-if="topDispatchers.length == 1">
-            &bull;
+          <li v-if="topDispatchers.length == 1">
             <i18n-t keypath="journal.daily-stats.most-active-dr">
               <template #dispatcher>
                 <router-link
@@ -79,10 +76,9 @@
                 </b>
               </template>
             </i18n-t>
-          </div>
+          </li>
 
-          <div v-if="topDispatchers.length > 1">
-            &bull;
+          <li v-if="topDispatchers.length > 1">
             <i18n-t keypath="journal.daily-stats.most-active-dr-many">
               <template #dispatchers>
                 <span v-for="(disp, i) in topDispatchers" :key="i">
@@ -103,10 +99,9 @@
                 </b>
               </template>
             </i18n-t>
-          </div>
+          </li>
 
-          <div v-if="stats.longestDuties.length > 0">
-            &bull;
+          <li v-if="stats.longestDuties.length > 0">
             <i18n-t keypath="journal.daily-stats.longest-duties">
               <template #dispatcher>
                 <router-link
@@ -122,10 +117,9 @@
                 {{ calculateDuration(stats.longestDuties[0].duration) }}
               </template>
             </i18n-t>
-          </div>
+          </li>
 
-          <div v-if="stats.mostActiveDrivers.length > 0">
-            &bull;
+          <li v-if="stats.mostActiveDrivers.length > 0">
             <i18n-t keypath="journal.daily-stats.most-active-driver">
               <template #driver>
                 <router-link
@@ -138,30 +132,30 @@
                 <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
               </template>
             </i18n-t>
-          </div>
+          </li>
+        </ul>
 
-          <hr class="section-separator" />
+        <hr class="section-separator" />
 
-          <div class="stats-badges">
-            <span
-              class="stat-badge"
-              v-for="key in [
-                'rippedSwitches',
-                'derailments',
-                'skippedStopSignals',
-                'radioStops',
-                'kills'
-              ]"
-              :key="key"
-            >
-              <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
-              <span>{{
-                Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--'
-              }}</span>
+        <div class="stats-badges">
+          <span
+            class="badge stat-badge"
+            v-for="key in [
+              'rippedSwitches',
+              'derailments',
+              'skippedStopSignals',
+              'radioStops',
+              'kills'
+            ]"
+            :key="key"
+          >
+            <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
+            <span>
+              {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
             </span>
-          </div>
+          </span>
         </div>
-      </span>
+      </div>
     </span>
   </section>
 </template>
@@ -178,7 +172,6 @@ export default defineComponent({
   name: 'journal-daily-stats',
 
   mixins: [dateMixin],
-  // emits: ['toggleStatsOpen'],
 
   data() {
     return {
@@ -193,7 +186,6 @@ export default defineComponent({
 
   activated() {
     this.startFetchingDailyStats();
-    // this.$emit('toggleStatsOpen', true);
   },
 
   deactivated() {
@@ -249,14 +241,24 @@ export default defineComponent({
 .daily-stats {
   text-align: left;
 }
+
 .daily-stats > span[data-active='0'] {
   opacity: 0.75;
 }
 
+ul.stats-list {
+  list-style: disc;
+  padding: 0 1em;
+}
+
 .stats-list a {
   text-decoration: underline;
 }
 
+.stats-list > li {
+  margin: 0.25em 0;
+}
+
 .stats-badges {
   display: flex;
   flex-wrap: wrap;

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -0,0 +1,217 @@
+<template>
+  <li class="dispatcher-history-entry">
+    <div class="entry-info">
+      <span>
+        <span>
+          <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
+            <b>{{ entry.stationName }}</b>
+          </router-link>
+
+          <b class="text--grayed"> #{{ entry.stationHash }}</b>
+        </span>
+        &bull;
+        <b
+          v-if="entry.dispatcherLevel !== null"
+          class="level-badge dispatcher"
+          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+        >
+          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+        </b>
+        <b style="margin-left: 5px">
+          <span
+            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            data-tooltip-type="DonatorTooltip"
+            :data-tooltip-content="$t('donations.dispatcher-message')"
+          >
+            <router-link
+              class="text--donator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <router-link
+            v-else
+            :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+          >
+            {{ entry.dispatcherName }}
+          </router-link>
+        </b>
+
+        <div>
+          <span v-if="entry.timestampTo">
+            <b>{{ $d(entry.timestampFrom) }}</b>
+            {{ timestampToString(entry.timestampFrom) }}
+            -
+            <b
+              v-if="
+                new Date(entry.timestampFrom).getDate() != new Date(entry.timestampTo).getDate()
+              "
+            >
+              {{ $d(entry.timestampTo) }}
+            </b>
+            {{ timestampToString(entry.timestampTo) }} ({{
+              calculateDuration(entry.currentDuration)
+            }})
+          </span>
+
+          <router-link
+            :to="`/scenery?station=${entry.stationName}`"
+            class="dispatcher-online"
+            v-else
+          >
+            {{ $t('journal.online-since') }}
+            <b>
+              {{
+                new Date().getDate() != new Date(entry.timestampFrom).getDate()
+                  ? $d(entry.timestampFrom)
+                  : ''
+              }}
+              {{ timestampToString(entry.timestampFrom) }}
+            </b>
+            ({{ calculateDuration(entry.currentDuration) }})
+          </router-link>
+        </div>
+      </span>
+
+      <span class="entry-info-right">
+        <div>
+          <span>
+            {{ $t('scenery.dispatcher-rate') }}
+            <b class="text--primary"> {{ entry.dispatcherRate }}</b>
+          </span>
+          <button class="btn btn--option" @click="toggleExtraInfo">
+            {{ $t('scenery.dispatcher-status-changes') }}
+            <b class="text--primary">{{ entry.statusHistory.length }}</b>
+          </button>
+        </div>
+
+        <b class="region-badge" :aria-describedby="entry.region">
+          REGION: {{ regions.find((r) => r.id == entry.region)?.name }}
+        </b>
+      </span>
+    </div>
+
+    <div class="entry-extra" v-if="showExtraInfo">
+      <ul class="status-list">
+        <li v-for="statusItem in entry.statusHistory">
+          <b style="margin-right: 0.5em">{{
+            timestampToString(parseInt(statusItem.split('@')[0]))
+          }}</b>
+
+          <StationStatusBadge
+            :dispatcher-status="Number(statusItem.split('@')[1])"
+            :is-online="true"
+          />
+        </li>
+      </ul>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { regions } from '../../../data/options.json';
+import { API } from '../../../typings/api';
+import dateMixin from '../../../mixins/dateMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import { useApiStore } from '../../../store/apiStore';
+import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+
+export default defineComponent({
+  props: {
+    entry: {
+      type: Object as PropType<API.DispatcherHistory.Data>,
+      required: true
+    },
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  components: { StationStatusBadge },
+  mixins: [dateMixin, styleMixin],
+  emits: ['toggleShowExtraInfo'],
+
+  data() {
+    return {
+      regions,
+      apiStore: useApiStore()
+    };
+  },
+
+  methods: {
+    toggleExtraInfo() {
+      this.$emit('toggleShowExtraInfo', this.entry.id);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.region-badge {
+  padding: 0 0.25em;
+}
+
+.level-badge {
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+.dispatcher-history-entry {
+  background-color: #1a1a1a;
+  padding: 1em;
+}
+
+.entry-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 1.75em;
+  gap: 0.5em;
+}
+
+.entry-info-right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  gap: 1em;
+}
+
+.entry-extra {
+  margin-top: 1em;
+}
+
+.status-list {
+  display: flex;
+  overflow: auto;
+  gap: 0.5em;
+}
+
+.status-list > li {
+  background-color: #313131;
+  padding: 0.2rem 0 0.2rem 0.5em;
+  margin: 0.5em 0;
+  border-radius: 1em;
+}
+
+@include smallScreen {
+  .entry-info {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}
+</style>

src/components/JournalView/JournalDispatchers/JournalDispatcherStats.vue

@@ -16,17 +16,17 @@
       <hr class="header-separator" />
 
       <div class="info-stats">
-        <span class="stat-badge" v-if="stats.services">
+        <span class="badge stat-badge" v-if="stats.services">
           <span>{{ $t('journal.dispatcher-stats.services-count') }}</span>
           <span>{{ stats.services.count }}</span>
         </span>
 
-        <span class="stat-badge" v-if="stats.services">
+        <span class="badge stat-badge" v-if="stats.services">
           <span>{{ $t('journal.dispatcher-stats.service-max') }}</span>
           <span>{{ calculateDuration(stats.services.durationMax) }}</span>
         </span>
 
-        <span class="stat-badge" v-if="stats.services">
+        <span class="badge stat-badge" v-if="stats.services">
           <span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
           <span>{{ calculateDuration(stats.services.durationAvg) }}</span>
         </span>
@@ -35,22 +35,22 @@
       <hr class="section-separator" />
 
       <div class="info-stats">
-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
           <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
           <span>{{ stats.issuedTimetables.count }}</span>
         </span>
 
-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
           <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
           <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
         </span>
 
-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
           <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
           <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
         </span>
 
-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
           <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
           <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
         </span>

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -15,90 +15,16 @@
         {{ $t('app.no-result') }}
       </div>
 
-      <div v-else>
-        <table class="dispatchers-table">
-          <thead>
-            <th>{{ $t('journal.history-name') }}</th>
-            <th>{{ $t('journal.history-hash') }}</th>
-            <th>{{ $t('journal.history-dispatcher') }}</th>
-            <th>{{ $t('journal.history-level') }}</th>
-            <th>{{ $t('journal.history-rate') }}</th>
-            <th>{{ $t('journal.history-region') }}</th>
-            <th>{{ $t('journal.history-date') }}</th>
-          </thead>
-
-          <tbody>
-            <transition-group name="list-anim">
-              <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
-                <td>
-                  <router-link
-                    :to="`/journal/dispatchers?search-station=${historyItem.stationName}`"
-                  >
-                    <b>{{ historyItem.stationName }}</b>
-                  </router-link>
-                </td>
-                <td>#{{ historyItem.stationHash }}</td>
-                <td>
-                  <router-link
-                    :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-                  >
-                    <b
-                      v-if="isDonator(historyItem.dispatcherName)"
-                      class="text--donator"
-                      :title="$t('donations.dispatcher-message')"
-                    >
-                      {{ historyItem.dispatcherName }}
-                    </b>
-
-                    <b v-else>
-                      {{ historyItem.dispatcherName }}
-                    </b>
-                  </router-link>
-                </td>
-                <td>
-                  <b
-                    v-if="historyItem.dispatcherLevel !== null"
-                    class="level-badge dispatcher"
-                    :style="
-                      calculateExpStyle(
-                        historyItem.dispatcherLevel,
-                        historyItem.dispatcherIsSupporter
-                      )
-                    "
-                  >
-                    {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
-                  </b>
-                </td>
-                <td class="text--primary">
-                  <b>{{ historyItem.dispatcherRate }}</b>
-                </td>
-                <td>
-                  <b class="region-badge" :aria-describedby="historyItem.region">{{
-                    regions.find((r) => r.id == historyItem.region)?.value || '???'
-                  }}</b>
-                </td>
-                <td style="min-width: 200px" class="time">
-                  <span v-if="historyItem.timestampTo" class="text--offline">
-                    <b>{{ $d(historyItem.timestampFrom) }}</b>
-                    {{ timestampToString(historyItem.timestampFrom) }}
-                    - {{ timestampToString(historyItem.timestampTo) }} ({{
-                      calculateDuration(historyItem.currentDuration)
-                    }})
-                  </span>
-                  <span class="dispatcher-online" v-else>
-                    <b class="text--online">
-                      <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
-                        $t('journal.online-since')
-                      }}</router-link>
-                      {{ timestampToString(historyItem.timestampFrom) }}
-                    </b>
-                    ({{ calculateDuration(historyItem.currentDuration) }})
-                  </span>
-                </td>
-              </tr>
-            </transition-group>
-          </tbody>
-        </table>
+      <ul v-else class="journal-list">
+        <transition-group name="list-anim">
+          <JournalDispatcherEntry
+            v-for="entry in dispatcherHistory"
+            :key="entry.id"
+            :entry="entry"
+            :onToggleShowExtraInfo="toggleExtraInfo"
+            :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+          />
+        </transition-group>
 
         <AddDataButton
           :list="dispatcherHistory"
@@ -106,7 +32,7 @@
           :scrollNoMoreData="scrollNoMoreData"
           @addHistoryData="addHistoryData"
         />
-      </div>
+      </ul>
 
       <div class="journal_warning" v-if="scrollNoMoreData">
         {{ $t('journal.no-further-data') }}
@@ -121,20 +47,15 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { regions } from '../../../data/options.json';
 import { useMainStore } from '../../../store/mainStore';
 import { API } from '../../../typings/api';
 import { Status } from '../../../typings/common';
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
-import dateMixin from '../../../mixins/dateMixin';
-import donatorMixin from '../../../mixins/donatorMixin';
-import styleMixin from '../../../mixins/styleMixin';
+import JournalDispatcherEntry from './JournalDispatcherEntry.vue';
 
 export default defineComponent({
-  components: { Loading, AddDataButton },
-
-  mixins: [dateMixin, styleMixin, donatorMixin],
+  components: { Loading, AddDataButton, JournalDispatcherEntry },
 
   props: {
     dispatcherHistory: {
@@ -159,98 +80,23 @@ export default defineComponent({
     return {
       Status,
       store: useMainStore(),
-      regions
+
+      extraInfoIndexes: [] as number[]
     };
   },
 
-  computed: {
-    computedDispatcherHistory() {
-      return this.dispatcherHistory.reduce(
-        (acc, historyItem, i) => {
-          if (this.isAnotherDay(i - 1, i))
-            acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
-          acc.push(historyItem);
-
-          return acc;
-        },
-        [] as (API.DispatcherHistory.Data | string)[]
-      );
-    }
-  },
-
   methods: {
-    navigateToScenery(name: string, isOnline: boolean) {
-      if (!isOnline) return;
+    toggleExtraInfo(id: number) {
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
 
-      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
-    },
-
-    isAnotherDay(prevIndex: number, currIndex: number) {
-      if (currIndex == 0) return true;
-
-      return (
-        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
-        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
-      );
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/animations.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
 @import '../../../styles/variables.scss';
 @import '../../../styles/JournalSection.scss';
-
-table.dispatchers-table {
-  --_bg-table: #111;
-  --_bg-head: #101010;
-  --_bg-row: #2f2f2f;
-
-  width: 100%;
-  border-collapse: collapse;
-  position: relative;
-  text-align: center;
-
-  margin-bottom: 1em;
-
-  thead {
-    position: sticky;
-    top: 0;
-    background-color: var(--_bg-head);
-  }
-
-  th {
-    padding: 0.5em;
-  }
-
-  tr {
-    background-color: var(--_bg-row);
-    border-bottom: 2px solid black;
-
-    &:last-child {
-      border: none;
-    }
-  }
-
-  td {
-    padding: 0.75em;
-
-    .level-badge {
-      margin: 0 auto;
-    }
-  }
-}
-
-.text {
-  &--online {
-    color: springgreen;
-  }
-
-  &--offline {
-    color: #ddd;
-  }
-}
 </style>

src/components/JournalView/JournalOptions.vue

@@ -9,7 +9,7 @@
         ref="button"
       >
         <img src="/images/icon-filter2.svg" alt="Open filters" />
-        {{ $t('options.filters') }} [F]
+        [F] {{ $t('options.filters') }}
         <span class="active-indicator" v-if="currentOptionsActive"></span>
       </button>
 
@@ -301,6 +301,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/dropdown_filters.scss';
+@import '../../styles/dropdown';
+@import '../../styles/dropdown_filters';
 </style>

src/components/JournalView/JournalTimetables/JournalDriverStats.vue

@@ -12,7 +12,7 @@
       <hr class="header-separator" />
 
       <div class="info-stats">
-        <span class="stat-badge">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.timetables') }}</span>
           <span
             >{{ store.driverStatsData._count.fulfilled }} /
@@ -20,17 +20,17 @@
           >
         </span>
 
-        <span class="stat-badge">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
           <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
         </span>
 
-        <span class="stat-badge">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
           <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
         </span>
 
-        <span class="stat-badge">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.distance') }}</span>
           <span>
             {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
@@ -38,7 +38,7 @@
           </span>
         </span>
 
-        <span class="stat-badge">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.stations') }}</span>
           <span>
             {{ store.driverStatsData._sum.confirmedStopsCount }} /

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -17,7 +17,37 @@
         </div>
 
         <div v-else>
-          <TimetableHistoryList :timetableHistory="timetableHistory" />
+          <transition-group name="list-anim" tag="ul" class="journal-list">
+            <li v-for="timetable in timetableHistory" class="journal_item" :key="timetable.id">
+              <div class="journal_item-info">
+                <!-- General -->
+                <TimetableGeneral :timetable="timetable" />
+
+                <div @click="toggleExtraInfo(timetable.id)" style="cursor: pointer">
+                  <!-- Route -->
+                  <span class="item-route">
+                    <b>{{ timetable.route.replace('|', ' - ') }}</b>
+                  </span>
+
+                  <hr />
+                  <!-- Stops -->
+                  <TimetableStops
+                    :timetable="timetable"
+                    :showExtraInfo="extraInfoIndexes.includes(timetable.id)"
+                  />
+                  <!-- Status -->
+                  <TimetableStatus :timetable="timetable" />
+                </div>
+
+                <!-- Extra -->
+                <TimetableDetails
+                  :timetable="timetable"
+                  :showExtraInfo="extraInfoIndexes.includes(timetable.id)"
+                  @toggle-extra-info="toggleExtraInfo"
+                />
+              </div>
+            </li>
+          </transition-group>
 
           <AddDataButton
             :list="timetableHistory"
@@ -30,6 +60,7 @@
     </transition>
 
     <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+
     <div class="journal_warning" v-else-if="!scrollDataLoaded">
       {{ $t('journal.loading-further-data') }}
     </div>
@@ -37,17 +68,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, Prop, PropType, ref } from 'vue';
 
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
-import TimetableHistoryList from './TimetableHistoryList.vue';
+
 import { useMainStore } from '../../../store/mainStore';
 import { Status } from '../../../typings/common';
 import { API } from '../../../typings/api';
 
+import TimetableGeneral from './TimetableGeneral.vue';
+import TimetableStops from './TimetableStops.vue';
+import TimetableStatus from './TimetableStatus.vue';
+import TimetableDetails from './TimetableDetails.vue';
+
 export default defineComponent({
-  components: { Loading, AddDataButton, TimetableHistoryList },
+  components: {
+    Loading,
+    AddDataButton,
+    TimetableDetails,
+    TimetableGeneral,
+    TimetableStatus,
+    TimetableStops
+  },
 
   props: {
     timetableHistory: {
@@ -71,8 +114,18 @@ export default defineComponent({
   data() {
     return {
       Status,
-      store: useMainStore()
+      store: useMainStore(),
+      extraInfoIndexes: [] as number[]
     };
+  },
+
+  methods: {
+    toggleExtraInfo(id: number) {
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
+
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
+    }
   }
 });
 </script>
@@ -80,4 +133,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../../styles/JournalSection.scss';
 @import '../../../styles/animations.scss';
+
+@include smallScreen {
+  .journal_item-info {
+    text-align: center;
+  }
+
+  .item-route {
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>

src/components/JournalView/JournalTimetables/TimetableDetails.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <div class="details-actions">
+      <button class="btn--action" @click="toggleExtraInfo">
+        <b>{{ $t('journal.stock-info') }}</b>
+        <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
+      </button>
+
+      <router-link
+        v-if="driverRouteLocation !== null"
+        class="a-button btn--action btn-timetable"
+        :to="driverRouteLocation"
+      >
+        <img src="/images/icon-train.svg" alt="train icon" />
+        <b>{{ $t('journal.timetable-online-button') }}</b>
+      </router-link>
+    </div>
+
+    <div class="details-body" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
+      <hr />
+
+      <div class="stock-specs">
+        <span class="badge">
+          <span>{{ $t('journal.dispatcher-name') }}</span>
+          <span>{{ timetable.authorName }}</span>
+        </span>
+      </div>
+
+      <div class="stock-specs">
+        <span class="badge">
+          <span>{{ $t('journal.stock-max-speed') }}</span>
+          <span>{{ timetable.maxSpeed }}km/h</span>
+        </span>
+
+        <span class="badge">
+          <span>{{ $t('journal.stock-length') }}</span>
+          <span>
+            {{
+              currentHistoryIndex == 0
+                ? timetable.stockLength
+                : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+            }}m
+          </span>
+        </span>
+
+        <span class="badge">
+          <span>{{ $t('journal.stock-mass') }}</span>
+          <span>
+            {{
+              Math.floor(
+                (currentHistoryIndex == 0
+                  ? timetable.stockMass!
+                  : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+              )
+            }}t
+          </span>
+        </span>
+      </div>
+
+      <!-- Historia zmian w składzie -->
+      <div class="stock-history" v-if="stockHistory.length > 1">
+        <button
+          v-for="(sh, i) in stockHistory"
+          :key="i"
+          class="btn--action"
+          :data-checked="i == currentHistoryIndex"
+          @click.stop="currentHistoryIndex = i"
+        >
+          {{ sh.updatedAt }}
+        </button>
+      </div>
+
+      <StockList
+        :trainStockList="
+          (currentHistoryIndex == 0
+            ? timetable.stockString
+            : stockHistory[currentHistoryIndex].stockString
+          ).split(';')
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import StockList from '../../Global/StockList.vue';
+import { API } from '../../../typings/api';
+import { RouteLocationRaw } from 'vue-router';
+
+export default defineComponent({
+  components: { StockList },
+
+  emits: ['toggleExtraInfo'],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentHistoryIndex: 0
+    };
+  },
+  computed: {
+    stockHistory() {
+      return this.timetable.stockHistory
+        .slice()
+        .reverse()
+        .map((h) => {
+          const historyData = h.split('@');
+          return {
+            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+              hour: '2-digit',
+              minute: '2-digit'
+            }),
+            stockString: historyData[1],
+            stockMass: Number(historyData[2]) || undefined,
+            stockLength: Number(historyData[3]) || undefined
+          };
+        });
+    },
+    driverRouteLocation(): RouteLocationRaw | null {
+      if (this.timetable.terminated) return null;
+      return {
+        name: 'DriverView',
+        query: {
+          trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
+        }
+      }
+    }
+  },
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = '/images/icon-unknown.png';
+    },
+
+    toggleExtraInfo() {
+      this.$emit('toggleExtraInfo', this.timetable.id);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.details-body {
+  margin-top: 0.5em;
+}
+
+.details-actions {
+  display: flex;
+  gap: 0.5em;
+
+  button img {
+    height: 1.25em;
+  }
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button[data-checked='true'] {
+    color: $accentCol;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+
+  padding-bottom: 0.5em;
+
+  li > div {
+    margin: 1em 0;
+
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+
+@include smallScreen() {
+  .stock-specs {
+    justify-content: center;
+  }
+
+  .details-actions {
+    justify-content: center;
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -1,173 +0,0 @@
-<template>
-  <div class="item-extra" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
-    <hr />
-
-    <div class="stock-specs">
-      <span class="badge">
-        <span>{{ $t('journal.dispatcher-name') }}</span>
-        <span>{{ timetable.authorName }}</span>
-      </span>
-    </div>
-
-    <div class="stock-specs">
-      <span class="badge">
-        <span>{{ $t('journal.stock-max-speed') }}</span>
-        <span>{{ timetable.maxSpeed }}km/h</span>
-      </span>
-
-      <span class="badge">
-        <span>{{ $t('journal.stock-length') }}</span>
-        <span>
-          {{
-            currentHistoryIndex == 0
-              ? timetable.stockLength
-              : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-          }}m
-        </span>
-      </span>
-
-      <span class="badge">
-        <span>{{ $t('journal.stock-mass') }}</span>
-        <span>
-          {{
-            Math.floor(
-              (currentHistoryIndex == 0
-                ? timetable.stockMass!
-                : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-            )
-          }}t
-        </span>
-      </span>
-    </div>
-
-    <!-- Historia zmian w składzie -->
-    <div class="stock-history" v-if="stockHistory.length > 1">
-      <button
-        v-for="(sh, i) in stockHistory"
-        :key="i"
-        class="btn--action"
-        :data-checked="i == currentHistoryIndex"
-        @click.stop="currentHistoryIndex = i"
-      >
-        {{ sh.updatedAt }}
-      </button>
-    </div>
-
-    <StockList
-      :trainStockList="
-        (currentHistoryIndex == 0
-          ? timetable.stockString
-          : stockHistory[currentHistoryIndex].stockString
-        ).split(';')
-      "
-    />
-
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import StockList from '../../Global/StockList.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { StockList },
-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
-  },
-  data() {
-    return {
-      currentHistoryIndex: 0
-    };
-  },
-  computed: {
-    stockHistory() {
-      return this.timetable.stockHistory
-        .slice()
-        .reverse()
-        .map((h) => {
-          const historyData = h.split('@');
-          return {
-            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
-              hour: '2-digit',
-              minute: '2-digit'
-            }),
-            stockString: historyData[1],
-            stockMass: Number(historyData[2]) || undefined,
-            stockLength: Number(historyData[3]) || undefined
-          };
-        });
-    }
-  },
-  methods: {
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
-
-.item-extra {
-  margin-top: 0.5em;
-}
-
-.stock-history {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 1em;
-
-  button[data-checked='true'] {
-    color: $accentCol;
-  }
-}
-
-.stock-specs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 0.5em;
-
-  .badge {
-    margin: 0;
-
-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
-  }
-
-  @include smallScreen() {
-    justify-content: center;
-  }
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-
-  padding-bottom: 0.5em;
-
-  li > div {
-    margin: 1em 0;
-
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -3,13 +3,15 @@
     <span class="general-train">
       <span class="text--grayed">#{{ timetable.id }}</span>
 
-      <span class="badges" v-if="timetable.skr || timetable.twr">
-        <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-        <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
-      </span>
+      <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
+      <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
 
       <span>
-        <strong class="text--primary">
+        <strong
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(timetable.trainCategoryCode)"
+          class="text--primary tooltip-help"
+        >
           {{ timetable.trainCategoryCode }}
         </strong>
         <strong>&nbsp;{{ timetable.trainNo }}</strong>
@@ -23,17 +25,19 @@
         {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
       </strong>
 
-      <strong
-        v-if="isDonator(timetable.driverName)"
+      <router-link
+        v-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
-        :title="$t('donations.driver-message')"
+        data-tooltip-type="DonatorTooltip"
+        :data-tooltip-content="$t('donations.driver-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
       >
-        {{ timetable.driverName }}
-      </strong>
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
 
-      <strong v-else>
-        {{ timetable.driverName }}
-      </strong>
+      <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
     </span>
 
     <span class="general-time">
@@ -57,19 +61,10 @@
           !timetable.terminated
             ? $t('journal.timetable-active')
             : timetable.fulfilled
-            ? $t('journal.timetable-fulfilled')
-            : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+              ? $t('journal.timetable-fulfilled')
+              : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
         }}
       </b>
-
-      <button
-        v-if="timetable.terminated == false"
-        class="btn--image btn--action btn-timetable"
-        @click.stop="showTimetable(timetable, $event.currentTarget)"
-      >
-        <img src="/images/icon-train.svg" alt="" />
-        {{ $t('journal.timetable-online-button') }}
-      </button>
     </span>
   </div>
 </template>
@@ -79,33 +74,31 @@ import { PropType, defineComponent } from 'vue';
 
 import { API } from '../../../typings/api';
 import dateMixin from '../../../mixins/dateMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import styleMixin from '../../../mixins/styleMixin';
-import donatorMixin from '../../../mixins/donatorMixin';
+import { useApiStore } from '../../../store/apiStore';
+import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin, donatorMixin],
+  mixins: [dateMixin, styleMixin, trainCategoryMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
 
   props: {
     timetable: {
       type: Object as PropType<API.TimetableHistory.Data>,
       required: true
     }
-  },
-
-  methods: {
-    showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
-      if (timetable?.terminated) return;
-
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
-    }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
+@import '../../../styles/responsive';
+@import '../../../styles/badge';
 
 .item-general {
   display: flex;
@@ -117,8 +110,21 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-.info-date {
-  margin-right: 0.5em;
+.general-train {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25em;
+
+  cursor: pointer;
+}
+
+.general-time {
+  display: flex;
+  align-items: center;
+
+  gap: 0.5em;
 }
 
 .badges {
@@ -143,29 +149,18 @@ export default defineComponent({
   }
 }
 
-.general-train {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25em;
-
-  cursor: pointer;
-  line-height: 2;
-}
-
 .btn-timetable {
-  display: inline-block;
-  padding: 0.1em 0.4em;
-  margin-left: 0.5em;
+  display: flex;
+  padding: 0.2em 0.5em;
 
   img {
-    vertical-align: top;
+    height: 1.25em;
   }
 }
 
 @include smallScreen {
   .item-general {
+    flex-direction: column;
     justify-content: center;
   }
 }

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -1,101 +0,0 @@
-<template>
-  <ul class="journal-list">
-    <transition-group name="list-anim">
-      <li
-        v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
-        class="journal_item"
-        :key="timetable.id"
-        @click="showExtraInfo.value = !showExtraInfo.value"
-      >
-        <div class="journal_item-info">
-          <!-- General -->
-          <TimetableGeneral :timetable="timetable" />
-          <!-- Route -->
-          <span class="item-route">
-            <b>{{ timetable.route.replace('|', ' - ') }}</b>
-          </span>
-
-          <hr />
-          <!-- Stops -->
-          <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-          <!-- Status -->
-          <TimetableStatus :timetable="timetable" />
-
-          <button class="btn--option btn--show">
-            {{ $t('journal.stock-info') }}
-            <img
-              :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
-              alt="Arrow icon"
-            />
-          </button>
-          <!-- Extra -->
-          <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-        </div>
-      </li>
-    </transition-group>
-  </ul>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
-
-import TimetableGeneral from './TimetableGeneral.vue';
-import TimetableStops from './TimetableStops.vue';
-import TimetableStatus from './TimetableStatus.vue';
-import TimetableExtra from './TimetableExtra.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
-
-  props: {
-    timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
-      required: true
-    }
-  },
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false)
-      }));
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/JournalSection.scss';
-
-.btn--show {
-  display: flex;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-hr {
-  margin: 0.25em 0;
-}
-
-@include smallScreen {
-  .journal_item-info {
-    text-align: center;
-  }
-
-  .item-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableStops.vue

@@ -1,23 +1,41 @@
 <template>
-  <div class="stop-list" v-if="showExtraInfo == true">
-    <span
-      v-for="(stop, i) in timetableStops.filter((_, i) =>
-        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
-      )"
-      class="stop-list-item"
-      :key="stop.stopName"
-      :data-confirmed="stop.confirmed"
-    >
-      <span v-if="i > 0">
-        &gt;
-        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
-          ... (+{{ timetableStops.length - 2 }}) &gt;
+  <div class="timetable-stops">
+    <div class="stop-list">
+      <span
+        v-for="(stop, i) in timetableStops.filter((_, i) =>
+          !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
+        )"
+        class="stop-list-item"
+        :key="stop.stopName"
+        :data-confirmed="stop.confirmed"
+      >
+        <span v-if="i > 0">
+          &gt;
+          <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
+            ... (+{{ timetableStops.length - 2 }}) &gt;
+          </span>
+        </span>
+
+        <span class="stop-name">{{ stop.stopName }}</span>
+        <span v-html="stop.html"></span>
+      </span>
+    </div>
+
+    <div class="path-details" v-if="showExtraInfo && timetablePathDetails">
+      <span
+        v-for="(pathData, i) in timetablePathDetails"
+        :data-visited="pathData.isVisited"
+        :data-next-visited="
+          i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
+        "
+      >
+        <span class="path-arrival" v-if="pathData.arrival">/ {{ pathData.arrival }} &RightArrow; </span>
+        <b class="path-scenery">{{ pathData.sceneryName }}</b>
+        <span class="path-departure" v-if="pathData.departure">
+          &RightArrow; {{ pathData.departure }}&nbsp;
         </span>
       </span>
-
-      <span class="stop-name">{{ stop.stopName }}</span>
-      <span v-html="stop.html"></span>
-    </span>
+    </div>
   </div>
 </template>
 
@@ -42,6 +60,24 @@ export default defineComponent({
   },
 
   computed: {
+    timetablePathDetails() {
+      if (!this.timetable.path || this.timetable.path == '') return null;
+
+      return this.timetable.path.split(';').map((pathEl, i) => {
+        const [arrival, name, departure] = pathEl.split(',');
+        const sceneryName = name.split(' ').slice(0, -1).join(' ');
+        const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
+
+        return {
+          arrival,
+          sceneryName,
+          sceneryHash,
+          departure,
+          isVisited: this.timetable.visitedSceneries?.includes(sceneryHash) ?? false
+        };
+      });
+    },
+
     timetableStops() {
       const timetable = this.timetable;
 
@@ -94,13 +130,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.stop-list {
+.timetable-stops {
   word-wrap: break-word;
   gap: 0.25em;
   font-size: 0.95em;
-
   color: #adadad;
+}
 
+.stop-list {
   &-item[data-confirmed='true'] {
     color: lightgreen;
 
@@ -109,4 +146,19 @@ export default defineComponent({
     }
   }
 }
+
+.path-details {
+  margin-top: 0.5em;
+}
+
+.path-details > span[data-visited='true'] {
+  .path-arrival,
+  .path-scenery {
+    color: lightgreen;
+  }
+
+  &[data-next-visited='true'] .path-departure {
+    color: lightgreen;
+  }
+}
 </style>

src/components/JournalView/typings.ts

@@ -6,7 +6,9 @@ export namespace Journal {
     | 'search-train'
     | 'search-date'
     | 'search-dispatcher'
-    | 'search-issuedFrom';
+    | 'search-issuedFrom'
+    | 'search-terminatingAt'
+    | 'search-via';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;

src/components/PopUp/VehiclePreviewPopUp.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="popup-content">
-    <div v-if="imageState == 'loading'" class="loading-info">
-      {{ $t('vehicle-preview.loading') }}
-    </div>
-
-    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
-
-    <img
-      v-if="store.popUpData.key"
-      @load="onImageLoad"
-      @error="onImageError"
-      width="300"
-      height="176"
-      class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${store.popUpData.content}--300px.jpg`"
-    />
-
-    <div class="vehicle-name" v-if="imageState != 'error'">
-      {{ store.popUpData.content.replace(/_/g, ' ') }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
-
-export default defineComponent({
-  data() {
-    return {
-      store: useMainStore(),
-      imageState: 'loading'
-    };
-  },
-
-  mounted() {
-    this.imageState = 'loading';
-  },
-
-  methods: {
-    onImageLoad() {
-      this.imageState = 'loaded';
-    },
-
-    onImageError(e: Event) {
-      this.imageState = 'error';
-
-      (e.target as HTMLElement).style.display = 'none';
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.popup-content {
-  // min-w-[300px] min-h-[200px] p-2 bg-slate-800 rounded-md
-
-  width: 300px;
-  min-height: 200px;
-  background-color: #333;
-  box-shadow: 0 0 10px 2px #aaa;
-
-  padding: 0.5em;
-  border-radius: 0.5em;
-}
-
-.loading-info {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-img {
-  width: 100%;
-  height: auto;
-}
-
-.vehicle-name {
-  text-align: center;
-  margin-top: 0.5em;
-  color: #ccc;
-  text-wrap: wrap;
-}
-</style>

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,31 +1,18 @@
 <template>
-  <section class="scenery-table-section">
-    <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
+  <div class="scenery-dispatchers-history">
+    <div class="history-wrapper">
+      <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
 
-    <div class="no-history" v-else-if="historyList.length == 0">
-      {{ $t('scenery.history-list-empty') }}
-    </div>
+      <div v-else-if="historyList.length == 0" class="no-history">
+        {{ $t('scenery.history-list-empty') }}
+      </div>
 
-    <table class="scenery-history-table" v-else>
-      <thead>
-        <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-level') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-date') }}</th>
-      </thead>
-
-      <tbody>
-        <tr v-for="historyItem in historyList" :key="historyItem.id">
-          <td>#{{ historyItem.stationHash }}</td>
-          <td>
-            <router-link
-              :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-            >
-              <b>{{ historyItem.dispatcherName }}</b>
-            </router-link>
-          </td>
-          <td>
+      <div v-else class="journal-list">
+        <div v-for="historyItem in historyList" :key="historyItem.id">
+          <span>
+            <span class="text--grayed" style="margin-right: 10px">
+              #{{ historyItem.stationHash }}
+            </span>
             <b
               v-if="historyItem.dispatcherLevel !== null"
               class="level-badge dispatcher"
@@ -35,55 +22,67 @@
             >
               {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
             </b>
+            <b style="margin-left: 5px">
+              <router-link
+                :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
+              >
+                {{ historyItem.dispatcherName }}
+              </router-link>
+            </b>
 
-            <b v-else>?</b>
-          </td>
-          <td class="text--primary">
-            <b>{{ historyItem.dispatcherRate }}</b>
-          </td>
-          <td style="min-width: 300px">
-            <div v-if="historyItem.timestampTo">
+            <div>
+              <span>
+                {{ $t('scenery.dispatcher-rate') }}
+                <b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
+              </span>
+              |
+              <span>
+                {{ $t('scenery.dispatcher-status-changes') }}
+                <b class="text--primary">{{ historyItem.statusHistory.length }}</b>
+              </span>
+            </div>
+          </span>
+
+          <span>
+            <span v-if="historyItem.timestampTo">
               <b>{{ $d(historyItem.timestampFrom) }}</b>
 
               {{ timestampToString(historyItem.timestampFrom) }}
               - {{ timestampToString(historyItem.timestampTo) }} ({{
                 calculateDuration(historyItem.currentDuration)
               }})
-            </div>
+            </span>
 
-            <div class="dispatcher-online" v-else>
+            <span class="dispatcher-online" v-else>
               {{ $t('journal.online-since') }}
               <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
               ({{ calculateDuration(historyItem.currentDuration) }})
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
 
-  <div class="bottom-info">
-    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
-      {{ $t('scenery.bottom-info') }}
-    </button>
+    <div class="bottom-info">
+      <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
+        {{ $t('scenery.bottom-info') }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import Station from '../../scripts/interfaces/Station';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
-import listObserverMixin from '../../mixins/listObserverMixin';
-import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin, styleMixin, listObserverMixin],
+  mixins: [dateMixin, styleMixin],
   components: { Loading },
   props: {
     station: {
@@ -152,8 +151,43 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/sceneryViewTables.scss';
 
+.scenery-dispatchers-history {
+  height: 100%;
+  overflow: auto;
+
+  display: grid;
+  gap: 0.5em;
+  grid-template-rows: auto 40px;
+}
+
+.history-wrapper {
+  position: relative;
+  overflow: auto;
+}
+
+.journal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+}
+
+.journal-list > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  padding: 0.5em;
+  background-color: #2b2b2b;
+  line-height: 1.75em;
+}
+
 .level-badge {
-  margin: 0 auto;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
 }
 
 .dispatcher-online {
@@ -161,13 +195,10 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .history-list {
-    font-size: 1.1em;
-  }
-  .list-item {
-    align-items: center;
+  .journal-list > div {
     flex-direction: column;
+    justify-content: center;
+    text-align: center;
   }
 }
 </style>
-../../store/storeTypes

src/components/SceneryView/SceneryHeader.vue

@@ -14,8 +14,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../scripts/interfaces/Station';
-import { ActiveScenery } from '../../store/typings';
+import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   props: {

src/components/SceneryView/SceneryInfo.vue

@@ -72,7 +72,7 @@
 
       <div class="info-lists">
         <!-- user list -->
-        <SceneryInfoUserList :onlineScenery="onlineScenery" />
+        <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
 
         <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
@@ -89,8 +89,7 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
-import Station from '../../scripts/interfaces/Station';
-import { ActiveScenery } from '../../store/typings';
+import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   components: {
@@ -125,11 +124,6 @@ h3.section-header {
   align-items: center;
 
   font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
 }
 
 .info-lists {

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -14,7 +14,7 @@
       >
         <span
           class="text--donator"
-          v-if="isDonator(onlineScenery.dispatcherName)"
+          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
           :title="$t('donations.dispatcher-message')"
         >
           {{ onlineScenery.dispatcherName }}
@@ -49,11 +49,18 @@ import dateMixin from '../../../mixins/dateMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import { ActiveScenery } from '../../../store/typings';
-import donatorMixin from '../../../mixins/donatorMixin';
+import { ActiveScenery } from '../../../typings/common';
+import { useApiStore } from '../../../store/apiStore';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin, donatorMixin],
+  mixins: [styleMixin, dateMixin, routerMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
+
   props: {
     onlineScenery: {
       type: Object as PropType<ActiveScenery>,

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -24,8 +24,8 @@
       :title="
         $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
       "
-      v-html="getControlTypeAbbrev(station?.generalInfo.controlType)"
     >
+      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
     </span>
 
     <img
@@ -88,12 +88,11 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import stationInfoMixin from '../../../mixins/stationInfoMixin';
 import styleMixin from '../../../mixins/styleMixin';
-import Station from '../../../scripts/interfaces/Station';
+import { Station } from '../../../typings/common';
 
 export default defineComponent({
-  mixins: [stationInfoMixin, styleMixin],
+  mixins: [styleMixin],
   props: {
     station: {
       type: Object as PropType<Station>
@@ -104,6 +103,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../../styles/icons.scss';
+
 .info-icons {
   display: flex;
   justify-content: center;
@@ -111,6 +111,7 @@ export default defineComponent({
 
   margin: 1em;
 }
+
 .icon-info {
   display: flex;
   justify-content: center;

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../../scripts/interfaces/Station';
+import { Station } from '../../../typings/common';
 
 export default defineComponent({
   props: {

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -8,7 +8,7 @@
 
     <transition-group name="spawns-anim" tag="ul">
       <li
-        class="badge spawn badge-none"
+        class="badge badge-none"
         v-if="!onlineScenery || onlineScenery.spawns.length == 0"
         key="no-spawns"
       >
@@ -16,13 +16,13 @@
       </li>
 
       <li
-        class="badge spawn"
+        class="badge spawn-badge"
         v-for="(spawn, i) in sortedSpawns"
         :key="spawn.spawnName + onlineScenery?.dispatcherName + i"
         :data-electrified="spawn.isElectrified"
       >
-        <span class="spawn_name">{{ spawn.spawnName }}</span>
-        <span class="spawn_length">{{ spawn.spawnLength }}m</span>
+        <span class="name">{{ spawn.spawnName }}</span>
+        <span class="length">{{ spawn.spawnLength }}m</span>
       </li>
     </transition-group>
   </section>
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { ActiveScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../typings/common';
 
 export default defineComponent({
   props: {
@@ -59,19 +59,6 @@ ul {
   position: relative;
 }
 
-.spawn {
-  color: white;
-
-  &_length {
-    background-color: #404040;
-    color: #cfcfcf;
-  }
-
-  &[data-electrified='true'] > &_name {
-    background-color: #007599;
-  }
-}
-
 .spawns-anim {
   &-move,
   &-enter-active,

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

@@ -1,83 +0,0 @@
-<template>
-  <section class="info-stats" :class="!station.onlineInfo ? 'no-stats' : ''">
-    <span class="likes">
-      <img src="/images/icon-like" alt="Likes count icon" />
-      <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
-    </span>
-
-    <span class="users">
-      <img src="/images/icon-user" alt="Users count icon" />
-      <span>{{ station.onlineInfo?.currentUsers || '0' }}</span>
-      /
-      <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
-    </span>
-
-    <span class="spawns">
-      <img src="/images/icon-spawn" alt="Spawns count icon" />
-      <span>{{ station.onlineInfo?.spawns.length || '0' }}</span>
-    </span>
-
-    <span class="schedules">
-      <img src="/images/icon-timetable" alt="Timetables count icon" />
-      <span>
-        <span style="color: #eee">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
-        /
-        <span style="color: #bbb"
-          >{{
-            station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed)
-              .length || '0'
-          }}
-        </span>
-      </span>
-    </span>
-  </section>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import Station from '../../../scripts/interfaces/Station';
-
-export default defineComponent({
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
-.info-stats {
-  padding: 1rem 0;
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  font-size: 1.65em;
-
-  &.no-stats {
-    opacity: 0.5;
-  }
-
-  & > span {
-    display: flex;
-    align-items: center;
-
-    margin: 0.3em;
-  }
-
-  .likes,
-  .spawns {
-    color: $accentCol;
-  }
-
-  span > img {
-    width: 1.2em;
-    margin-right: 0.5em;
-  }
-}
-</style>

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -13,16 +13,15 @@
       </li>
 
       <li
-        v-for="train in onlineScenery?.stationTrains"
+        v-for="{ train, status } in stationTrains"
         class="badge user"
-        :class="train.stopStatus"
-        :key="train.trainId"
-        tabindex="0"
-        @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
-        @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+        :key="train.id"
+        :data-status="status"
       >
-        <span class="user_train">{{ train.trainNo }}</span>
-        <span class="user_name">{{ train.driverName }}</span>
+        <router-link :to="train.driverRouteLocation" class="a-block">
+          <span class="user_train">{{ train.trainNo }}</span>
+          <span class="user_name">{{ train.driverName }}</span>
+        </router-link>
       </li>
     </transition-group>
   </section>
@@ -30,17 +29,52 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import { ActiveScenery } from '../../../store/typings';
+import { ActiveScenery, Station } from '../../../typings/common';
+import { getTrainStopStatus } from '../utils';
+import { useMainStore } from '../../../store/mainStore';
 
 export default defineComponent({
-  mixins: [routerMixin, modalTrainMixin],
+  mixins: [routerMixin],
 
   props: {
     onlineScenery: {
       type: Object as PropType<ActiveScenery>,
       required: false
+    },
+    station: {
+      type: Object as PropType<Station>
+    }
+  },
+
+  data() {
+    return {
+      mainStore: useMainStore()
+    };
+  },
+
+  computed: {
+    stationTrains() {
+      if (!this.onlineScenery) return;
+
+      const name = this.station?.generalInfo?.checkpoints[0] ?? this.onlineScenery.name;
+
+      return this.onlineScenery.stationTrains.map((train) => {
+        const stop = train.timetableData?.followingStops.find(
+          (stop) =>
+            stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
+        );
+
+        const status = stop
+          ? getTrainStopStatus(stop, train.currentStationName, this.onlineScenery!.name)
+          : 'no-timetable';
+
+        return {
+          train,
+          status
+        };
+      });
     }
   }
 });
@@ -63,46 +97,45 @@ ul {
 }
 
 .user {
-  cursor: pointer;
-
-  &_train {
-    color: black;
-    background-color: $no-timetable;
-
-    transition: background-color 200ms;
-    -ms-transition: background-color 200ms;
-    -webkit-transition: background-color 200ms;
-  }
-
-  &.no-timetable .user_train {
+  &[data-status='no-timetable'] .user_train {
     background-color: $no-timetable;
   }
 
-  &.departed > &_train {
+  &[data-status='departed'] .user_train {
     background-color: $departed;
   }
 
-  &.stopped > &_train {
+  &[data-status='stopped'] .user_train {
     background-color: $stopped;
   }
 
-  &.online > &_train {
+  &[data-status='online'] .user_train {
     background-color: $online;
   }
 
-  &.terminated > &_train {
+  &[data-status='terminated'] .user_train {
     background-color: $terminated;
   }
 
-  &.disconnected > &_train {
+  &[data-status='disconnected'] .user_train {
     background-color: $disconnected;
   }
 
-  &.offline {
+  &[data-status='offline'] {
     background: firebrick;
     pointer-events: none;
   }
 }
+
+.user_train {
+  color: black;
+  background-color: $no-timetable;
+
+  transition: background-color 200ms;
+  -ms-transition: background-color 200ms;
+  -webkit-transition: background-color 200ms;
+}
+
 .users-anim {
   &-move,
   &-enter-active,

src/components/SceneryView/SceneryTimetable.vue

@@ -14,13 +14,9 @@
         </span>
 
         <span class="header_links" v-if="station">
-          <!-- <a
-            :href="`https://pragotron-td2.web.app/board?name=${station.name}`"
-            target="_blank"
-            :title="$t('scenery.pragotron-link')"
-          >
+          <a :href="pragotronHref" target="_blank" :title="$t('scenery.pragotron-link')">
             <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-          </a> -->
+          </a>
 
           <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
             <img src="/images/icon-tablice.ico" alt="icon-tablice" />
@@ -29,26 +25,23 @@
       </h3>
 
       <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
-        <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
-          {{ (i > 0 && '&bull;') || '' }}
-
-          <button
-            :key="cp"
-            class="checkpoint_item"
-            :class="{ current: chosenCheckpoint === cp }"
-            @click="setCheckpoint(cp)"
+        <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
           >
-            {{ cp }}
-          </button>
-        </span>
+        </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"
-          v-if="apiStore.dataStatuses.connection == 0 && computedScheduledTrains.length == 0"
           key="list-loading"
         >
           <Loading />
@@ -56,7 +49,7 @@
 
         <span
           class="timetable-item empty"
-          v-else-if="computedScheduledTrains.length == 0 && !onlineScenery"
+          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
           key="list-offline"
         >
           {{ $t('scenery.offline') }}
@@ -64,68 +57,72 @@
 
         <div
           class="timetable-item empty"
-          v-else-if="computedScheduledTrains.length == 0"
+          v-else-if="sceneryTimetables.length == 0"
           key="list-no-timetables"
         >
           {{ $t('scenery.no-timetables') }}
         </div>
 
-        <div
-          class="timetable-item"
+        <router-link
+          class="timetable-item a-block"
           v-else
-          v-for="scheduledTrain in computedScheduledTrains"
-          :key="scheduledTrain.trainId + scheduledTrain.stopInfo.arrivalTimestamp"
+          v-for="(row, i) in sceneryTimetables"
+          :key="row.train.id + i"
           tabindex="0"
-          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
-          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
+          :to="row.train.driverRouteLocation"
         >
           <span class="timetable-general">
             <span class="general-info">
-              <span class="info-number">
-                <strong>{{ scheduledTrain.category }}</strong>
-                {{ scheduledTrain.trainNo }}
-
+              <div class="info-train">
+                <b
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="getCategoryExplanation(row.train.timetableData!.category)"
+                  class="text--primary tooltip-help"
+                >
+                  {{ row.train.timetableData!.category }}
+                </b>
+                <span>&nbsp;</span>
+                <b>{{ row.train.trainNo }}</b>
+                <span>&nbsp;&bull;&nbsp;</span>
+                <span>{{ row.train.driverName }}</span>
                 <span
-                  v-if="scheduledTrain.stopInfo.comments"
-                  :title="scheduledTrain.stopInfo.comments"
+                  v-if="row.checkpointStop.comments"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="row.checkpointStop.comments"
                 >
                   <img src="/images/icon-warning.svg" />
                 </span>
-              </span>
-              &nbsp;|&nbsp;
-              <span>
-                {{ scheduledTrain.driverName }}
-              </span>
-
-              <div class="info-route">
-                <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
               </div>
 
-              <ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
+              <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="scheduledTrain.stopInfo.beginsHere">
+              <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
                 {{ $t('timetables.begins') }}
               </span>
 
               <span class="arrival-time" v-else>
-                <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
-                  <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
+                <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(scheduledTrain.stopInfo.arrivalTimestamp)
+                      timestampToString(row.checkpointStop.arrivalTimestamp)
                     }}</s>
                   </div>
 
                   <span>
-                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                    {{ timestampToString(row.checkpointStop.arrivalRealTimestamp) }}
+                    ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
+                    }}{{ row.checkpointStop.arrivalDelay }})
                   </span>
                 </div>
               </span>
@@ -133,47 +130,45 @@
 
             <span class="schedule-stop">
               <span class="stop-connection">
-                {{ scheduledTrain.arrivingLine }}
+                {{ row.arrivingLine }}
               </span>
 
               <span class="stop-time">
-                {{ scheduledTrain.stopInfo.stopTime || '' }}
-                {{
-                  scheduledTrain.stopInfo.stopTime ? scheduledTrain.stopInfo.stopType || 'pt' : ''
-                }}
+                {{ row.checkpointStop.stopTime || '' }}
+                {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
               </span>
 
               <span class="stop-connection">
-                {{ scheduledTrain.departureLine }}
+                {{ row.departureLine }}
               </span>
             </span>
 
             <span class="schedule-departure">
-              <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
+              <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
                 {{ $t('timetables.terminates') }}
               </span>
 
               <span class="departure-time" v-else>
-                <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
-                  <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
+                <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(scheduledTrain.stopInfo.departureTimestamp)
+                      timestampToString(row.checkpointStop.departureTimestamp)
                     }}</s>
                   </div>
 
                   <span>
-                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                    {{ timestampToString(row.checkpointStop.departureRealTimestamp) }}
+                    ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
+                    }}{{ row.checkpointStop.departureDelay }})
                   </span>
                 </div>
               </span>
             </span>
           </span>
-        </div>
+        </router-link>
       </transition-group>
     </div>
   </section>
@@ -186,19 +181,20 @@ import { useRoute } from 'vue-router';
 import Loading from '../Global/Loading.vue';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
-import Station from '../../scripts/interfaces/Station';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import { useMainStore } from '../../store/mainStore';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { ActiveScenery } from '../../store/typings';
 import { useApiStore } from '../../store/apiStore';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import { SceneryTimetableRow } from './typings';
+import { ActiveScenery, Station } from '../../typings/common';
+import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, modalTrainMixin],
+  mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
   props: {
     station: {
@@ -213,12 +209,14 @@ export default defineComponent({
     listOpen: false
   }),
 
-  mounted() {
+  activated() {
     this.loadSelectedOption();
   },
 
-  activated() {
-    this.loadSelectedOption();
+  watch: {
+    currentURL() {
+      this.loadSelectedOption();
+    }
   },
 
   setup(props) {
@@ -229,9 +227,10 @@ export default defineComponent({
     const mainStore = useMainStore();
 
     const chosenCheckpoint = ref(
-      props.station?.generalInfo?.checkpoints?.length == 0
-        ? ''
-        : props.station?.generalInfo?.checkpoints[0] ?? null
+      props.station?.generalInfo?.checkpoints[0] ??
+        props.station?.name ??
+        route.query['station']?.toString() ??
+        ''
     );
 
     return {
@@ -250,27 +249,57 @@ export default defineComponent({
       return url;
     },
 
-    computedScheduledTrains() {
-      if (!this.station) return [];
+    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 (
-        this.onlineScenery?.scheduledTrains
-          ?.filter(
-            (train) =>
-              train.checkpointName.toLocaleLowerCase() ==
-                (this.chosenCheckpoint || this.station!.name).toLocaleLowerCase() &&
-              train.region == this.mainStore.region.id
-          )
-          .sort((a, b) => {
-            if (a.stopStatusID > b.stopStatusID) return 1;
-            if (a.stopStatusID < b.stopStatusID) return -1;
+      return url;
+    },
 
-            if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
-            if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
+    sceneryTimetables(): SceneryTimetableRow[] {
+      if (!this.onlineScenery) return [];
 
-            return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
-          }) || []
-      );
+      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,
+            prevDepartureLine: ct.previousSceneryElement?.departureRouteExt ?? null,
+            nextArrivalLine: ct.nextSceneryElement?.arrivalRouteExt ?? null,
+            departureLine: ct.timetablePathElement.departureRouteExt ?? null,
+            arrivingLine: ct.timetablePathElement.arrivalRouteExt ?? null,
+            prevStationName: ct.previousSceneryElement?.stationName ?? null,
+            nextStationName: ct.nextSceneryElement?.stationName ?? null,
+            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;
+        });
     }
   },
 
@@ -278,7 +307,19 @@ export default defineComponent({
     loadSelectedOption() {
       if (!this.station) return;
 
-      this.chosenCheckpoint = this.station.generalInfo?.checkpoints[0] ?? this.station.name;
+      if (!this.station.generalInfo) {
+        this.chosenCheckpoint = this.station.name;
+        return;
+      }
+
+      const queryCheckpoint = this.$route.query['checkpoint']?.toString();
+
+      this.chosenCheckpoint =
+        this.station.generalInfo.checkpoints.find(
+          (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
+        ) ??
+        this.station.generalInfo.checkpoints[0] ??
+        this.station.name;
     },
 
     setCheckpoint(cp: string) {
@@ -348,7 +389,6 @@ export default defineComponent({
 
     background: #353535;
 
-    cursor: pointer;
     z-index: 10;
 
     &.empty {
@@ -378,30 +418,35 @@ export default defineComponent({
   }
 }
 
-.timetable-list {
-  position: relative;
-}
-
 .timetable-checkpoints {
   display: flex;
   justify-content: center;
+  gap: 0.5em;
 
   flex-wrap: wrap;
   font-size: 1.1em;
 
   margin-top: 0.5em;
+}
 
-  button.checkpoint_item {
-    color: #aaa;
-    display: inline;
+.checkpoint-item {
+  color: #aaa;
+  display: inline;
+
+  &:hover {
+    color: white;
   }
 
-  .checkpoint_item.current {
+  &.current {
     font-weight: bold;
     color: $accentCol;
   }
 }
 
+.timetable-list {
+  position: relative;
+}
+
 .general-info {
   display: flex;
   flex-wrap: wrap;
@@ -414,15 +459,10 @@ export default defineComponent({
     width: 100%;
   }
 
-  .g-tooltip > .content {
-    z-index: 100;
-    color: white;
-
-    left: 110%;
-  }
-
   img {
-    width: 1.1em;
+    height: 0.9em;
+    vertical-align: middle;
+    margin: 0 0.25em;
   }
 }
 

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,69 +1,97 @@
 <template>
-  <!-- WIP -->
-  <!-- <div class="top-filters">
-    <button class="btn btn--option">ROZPOCZYNA BIEG</button>
-
-    <button class="btn btn--option">PRZEZ</button>
-
-    <button class="btn btn--option">KOŃCZY BIEG</button>
-  </div> -->
-
-  <section class="scenery-table-section">
-    <Loading v-if="dataStatus != DataStatus.Loaded" />
-
-    <div class="no-history" v-else-if="historyList.length == 0">
-      {{ $t('scenery.history-list-empty') }}
+  <div class="scenery-timetables-history">
+    <div class="history-modes">
+      <button
+        class="btn btn--option"
+        v-for="mode in historyModeList"
+        :key="mode"
+        :class="{ checked: checkedHistoryMode == mode }"
+        @click="checkHistoryMode(mode)"
+      >
+        {{ $t(`scenery.timetable-${mode}`) }}
+      </button>
     </div>
 
-    <table class="scenery-history-table" v-else>
-      <thead>
-        <th>{{ $t('scenery.timetables-history-id') }}</th>
-        <th>{{ $t('scenery.timetables-history-number') }}</th>
-        <th>{{ $t('scenery.timetables-history-route') }}</th>
-        <th>{{ $t('scenery.timetables-history-driver') }}</th>
-        <th>{{ $t('scenery.timetables-history-author') }}</th>
-        <th>{{ $t('scenery.timetables-history-date') }}</th>
-      </thead>
+    <div class="history-wrapper">
+      <Loading v-if="dataStatus != DataStatus.Loaded" />
 
-      <tbody>
-        <tr v-for="historyItem in historyList" :key="historyItem.id">
-          <td>
-            <router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
-              #{{ historyItem.id }}
-            </router-link>
-          </td>
-          <td>
-            <b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
-            {{ historyItem.trainNo }}
-          </td>
-          <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
-          <td>
-            <router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
-              {{ historyItem.driverName }}
-            </router-link>
-          </td>
+      <div v-else-if="historyList.length == 0" class="no-history">
+        {{ $t('scenery.history-list-empty') }}
+      </div>
 
-          <td>
-            <router-link
-              v-if="historyItem.authorName"
-              :to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
-              >{{ historyItem.authorName }}
-            </router-link>
-            <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
-          </td>
-          <td>
-            <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
-            {{ localeTime(historyItem.beginDate, $i18n.locale) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+      <div v-else class="journal-list">
+        <div v-for="timetableHistory in historyList" :key="timetableHistory.id">
+          <span>
+            <div>
+              <span
+                class="timetable-status-indicator"
+                :data-terminated="timetableHistory.terminated"
+                :data-fulfilled="timetableHistory.fulfilled"
+              >
+                &ofcir;
+              </span>
+              #{{ timetableHistory.id }} |
+              <b class="text--primary">{{ timetableHistory.trainCategoryCode }}</b>
+              {{ timetableHistory.trainNo }}
+              {{ timetableHistory.route.replace('|', ' &Rightarrow; ') }}
+            </div>
 
-  <div class="bottom-info">
-    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
-      {{ $t('scenery.bottom-info') }}
-    </button>
+            <div class="text--grayed">
+              <span>
+                {{ $t('scenery.timetable-issued-date') }}
+                <b>
+                  {{
+                    localeDateTime(
+                      timetableHistory.createdAt > timetableHistory.beginDate
+                        ? timetableHistory.beginDate
+                        : timetableHistory.createdAt,
+                      $i18n.locale
+                    )
+                  }}
+                </b></span
+              >
+              <span v-if="timetableHistory.authorName">
+                {{ $t('scenery.timetable-issued-by') }}
+                <b>
+                  <router-link
+                    :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
+                  >
+                    {{ timetableHistory.authorName }}
+                  </router-link>
+                </b>
+              </span>
+
+              <span>
+                {{ $t('scenery.timetable-issued-for') }}
+                <b>
+                  <router-link
+                    :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
+                  >
+                    {{ timetableHistory.driverName }}
+                  </router-link>
+                </b>
+              </span>
+            </div>
+          </span>
+
+          <button
+            @click="
+              navigateTo(`/journal/timetables`, {
+                'search-train': `#${timetableHistory.id}`
+              })
+            "
+          >
+            <img src="/images/icon-back.svg" alt="icon navigate to timetable" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-info">
+      <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
+        {{ $t('scenery.bottom-info') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -71,17 +99,19 @@
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 
-import Station from '../../scripts/interfaces/Station';
 import Loading from '../Global/Loading.vue';
-import listObserverMixin from '../../mixins/listObserverMixin';
-import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import routerMixin from '../../mixins/routerMixin';
+import { useMainStore } from '../../store/mainStore';
+
+const historyModeList = ['via', 'issuedFrom', 'terminatingAt'] as const;
+type HistoryMode = (typeof historyModeList)[number];
 
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin, listObserverMixin],
+  mixins: [dateMixin, routerMixin],
   props: {
     station: {
       type: Object as PropType<Station>
@@ -94,9 +124,14 @@ export default defineComponent({
   data() {
     return {
       historyList: [] as API.TimetableHistory.Response,
+      historyModeList,
+
       apiStore: useApiStore(),
+      mainStore: useMainStore(),
       dataStatus: Status.Data.Loading,
-      DataStatus: Status.Data
+      DataStatus: Status.Data,
+
+      checkedHistoryMode: 'via' as HistoryMode
     };
   },
 
@@ -106,17 +141,22 @@ export default defineComponent({
 
   methods: {
     async fetchAPIData() {
-      if (!this.station && !this.onlineScenery) {
+      const stationName = this.$route.query['station'];
+
+      if (!stationName) {
+        this.historyList = [];
         this.dataStatus = Status.Data.Loaded;
         return;
       }
 
+      const requestFilters: Record<string, any> = {};
+      requestFilters[this.checkedHistoryMode] = stationName.toString();
+      requestFilters.countLimit = 30;
+
       try {
         const response: API.TimetableHistory.Response = await (
           await this.apiStore.client!.get('api/getTimetables', {
-            params: {
-              issuedFrom: this.station?.name || this.onlineScenery?.name
-            }
+            params: requestFilters
           })
         ).data;
 
@@ -128,11 +168,17 @@ export default defineComponent({
       }
     },
 
+    checkHistoryMode(mode: HistoryMode) {
+      this.checkedHistoryMode = mode;
+      this.dataStatus = Status.Data.Loading;
+      this.fetchAPIData();
+    },
+
     navigateToHistory() {
       this.$router.push({
         path: '/journal/timetables',
         query: {
-          'search-issuedFrom': this.station?.name || this.onlineScenery?.name
+          [`search-${this.checkedHistoryMode}`]: this.station?.name || this.onlineScenery?.name
         }
       });
     }
@@ -145,13 +191,66 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/sceneryViewTables.scss';
 
-.top-filters {
+.scenery-timetables-history {
+  height: 100%;
+  overflow: auto;
+
+  display: grid;
+  gap: 1em;
+  grid-template-rows: auto 1fr 40px;
+}
+
+.history-wrapper {
+  position: relative;
+  overflow: auto;
+}
+
+.history-modes {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
+
   gap: 0.5em;
+  padding: 0.25em;
 
   button {
-    padding: 0.5em;
+    padding: 0.35em;
+    min-width: 120px;
+  }
+}
+
+.journal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+}
+
+.journal-list > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5em;
+  background-color: #2b2b2b;
+  line-height: 1.5em;
+}
+
+.journal-list > div > button > img {
+  width: 2em;
+  transform: rotate(180deg);
+}
+
+.timetable-status-indicator {
+  &[data-fulfilled='true'] {
+    color: lightgreen;
+  }
+
+  &[data-terminated='false'] {
+    color: lightblue;
+  }
+
+  &[data-terminated='true'][data-fulfilled='false'] {
+    color: lightcoral;
   }
 }
 </style>

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="general-status">
     <span
-      :class="computedScheduledTrain.stopStatus"
+      :class="computedScheduledTrain.status"
       :title="computedScheduledTrain.stopStatusDescription"
     >
       {{ computedScheduledTrain.stopStatusIndicator }}
@@ -11,25 +11,21 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { ScheduledTrain, StopStatus } from '../../store/typings';
-
-interface ScheduledTrainComp extends ScheduledTrain {
-  stopStatusIndicator: string;
-  stopStatusDescription: string;
-}
+import { StopStatus } from '../../typings/common';
+import { SceneryTimetableRow } from './typings';
 
 export default defineComponent({
   props: {
-    scheduledTrain: {
-      type: Object as PropType<ScheduledTrain>,
+    sceneryTimetableRow: {
+      type: Object as PropType<SceneryTimetableRow>,
       required: true
     }
   },
 
   computed: {
-    computedScheduledTrain(): ScheduledTrainComp {
-      const { prevDepartureLine, prevStationName, stopStatus, nextArrivalLine, nextStationName } =
-        this.scheduledTrain;
+    computedScheduledTrain() {
+      const { prevDepartureLine, prevStationName, nextArrivalLine, nextStationName, status } =
+        this.sceneryTimetableRow;
 
       const prevDepartureIndicator = prevDepartureLine
         ? `(${prevDepartureLine}) ${prevStationName}`
@@ -41,7 +37,7 @@ export default defineComponent({
       let stopStatusDescription = '',
         stopStatusIndicator = '';
 
-      switch (stopStatus) {
+      switch (status) {
         case StopStatus.ARRIVING:
           stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
           stopStatusDescription = this.$t('timetables.desc-arriving', {
@@ -56,7 +52,7 @@ export default defineComponent({
             ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
             : `${this.$t('timetables.desc-end')}`;
           stopStatusDescription = nextArrivalLine
-            ? this.$t(`timetables.desc-${stopStatus}`, { nextStationName, nextArrivalLine })
+            ? this.$t(`timetables.desc-${status}`, { nextStationName, nextArrivalLine })
             : '';
           break;
 
@@ -85,7 +81,7 @@ export default defineComponent({
           break;
       }
       return {
-        ...this.scheduledTrain,
+        ...this.sceneryTimetableRow,
         stopStatusDescription,
         stopStatusIndicator
       };

src/components/SceneryView/typings.ts

@@ -0,0 +1,13 @@
+import { StopStatus, Train, TrainStop } from '../../typings/common';
+
+export interface SceneryTimetableRow {
+  checkpointStop: TrainStop;
+  train: Train;
+  prevDepartureLine: string | null;
+  nextArrivalLine: string | null;
+  departureLine: string | null;
+  arrivingLine: string | null;
+  prevStationName: string | null;
+  nextStationName: string | null;
+  status: StopStatus;
+}

src/components/SceneryView/utils.ts

@@ -0,0 +1,42 @@
+import { StopStatus, TrainStop } from '../../typings/common';
+
+export const stopStatusPriority = [
+  StopStatus.ONLINE,
+  StopStatus.STOPPED,
+  StopStatus.DEPARTED,
+  StopStatus.ARRIVING,
+  StopStatus.DEPARTED_AWAY,
+  StopStatus.TERMINATED
+];
+
+export function getTrainStopStatus(
+  stopInfo: TrainStop,
+  currentStationName: string,
+  sceneryName: string
+) {
+  if (stopInfo.terminatesHere && stopInfo.confirmed) {
+    return StopStatus.TERMINATED;
+  }
+
+  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
+    return StopStatus.DEPARTED;
+  }
+
+  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
+    return StopStatus.DEPARTED_AWAY;
+  }
+
+  if (currentStationName == sceneryName && !stopInfo.stopped) {
+    return StopStatus.ONLINE;
+  }
+
+  if (currentStationName == sceneryName && stopInfo.stopped) {
+    return StopStatus.STOPPED;
+  }
+
+  if (currentStationName != sceneryName) {
+    return StopStatus.ARRIVING;
+  }
+
+  return StopStatus.ONLINE;
+}

src/components/StationsView/FilterOption.vue

@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStationFiltersStore } from '../../store/stationFiltersStore';
 
 interface FilterOption {
   id: string;
@@ -40,15 +39,9 @@ export default defineComponent({
 
   emits: ['update:optionValue'],
 
-  setup() {
-    return {
-      filterStore: useStationFiltersStore()
-    };
-  },
-
   watch: {
     'option.value'() {
-      this.filterStore.changeFilterValue(this.option.name, !this.option.value);
+      // this.filterStore.changeFilterValue(this.option.name, !this.option.value);
     }
   },
 
@@ -56,17 +49,17 @@ export default defineComponent({
     handleDbClick(e: Event) {
       e.preventDefault();
 
-      this.filterStore.lastClickedFilterId = this.option.id;
+      // this.filterStore.lastClickedFilterId = this.option.id;
       // this.option.value = true;
       this.$emit('update:optionValue', true);
 
-      this.filterStore.inputs.options
-        .filter((option) => {
-          return option.section == this.option.section && option.id != this.option.id;
-        })
-        .forEach((option) => {
-          option.value = !this.option.value;
-        });
+      // this.filterStore.inputs.options
+      //   .filter((option) => {
+      //     return option.section == this.option.section && option.id != this.option.id;
+      //   })
+      //   .forEach((option) => {
+      //     option.value = !this.option.value;
+      //   });
     }
   }
 });

src/components/StationsView/StationFilterCard.vue

@@ -1,61 +1,82 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
     <div class="card_controls">
-      <button class="btn--filled btn--image" @click="toggleCard">
+      <button class="card-button btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
-        {{ $t('options.filters') }} [F]
-        <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
+        <p>[F] {{ $t('options.filters') }}</p>
+        <span class="active-indicator" v-if="changedFilters.length != 0"></span>
       </button>
-
-      <label for="scenery-search">
-        <input
-          id="scenery-search"
-          list="sceneries"
-          :placeholder="$t('sceneries.scenery-search')"
-          @focus="preventKeyDown = true"
-          @blur="preventKeyDown = false"
-          v-model="chosenSearchScenery"
-        />
-
-        <datalist id="sceneries">
-          <option
-            v-for="scenery in sortedStationList"
-            :key="scenery.name"
-            :value="scenery.name"
-          ></option>
-        </datalist>
-      </label>
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
-        <div class="card_content">
+      <div class="card" v-if="isVisible" ref="cardRef" @keydown.r="resetFilters">
+        <div class="card_content" tabindex="0" @scroll="onScroll" ref="cardContentRef">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
+          <div class="changed-filters" :data-active="changedFilters.length > 0">
+            <template v-if="changedFilters.length > 0">
+              {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
+            </template>
+            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
+          </div>
+
+          <section class="card_sceneries-search">
+            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
+
+            <datalist id="sceneries">
+              <option
+                v-for="scenery in sortedStationList"
+                :key="scenery.name"
+                :value="scenery.name"
+              ></option>
+            </datalist>
+
+            <form action="javascript:void(0);" @submit="handleSceneriesInput">
+              <input
+                v-model="chosenSearchScenery"
+                id="scenery-search"
+                list="sceneries"
+                :placeholder="$t('filters.sceneries-placeholder')"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+              />
+
+              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
+            </form>
+          </section>
+
           <section class="card_options">
             <div
               class="option-section"
-              v-for="section in filterStore.inputs.optionSections"
-              :key="section"
+              v-for="(sectionFilters, sectionKey) in filtersSections"
+              :key="sectionKey"
             >
               <h3 class="text--primary">
-                {{ $t(`filters.sections.${section}`) }}
-
-                <button @click="filterStore.resetSectionOptions(section)">RESET</button>
+                <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
+                {{ $t(`filters.sections.${sectionKey}`) }}
+                <button @click="resetSectionFilters(sectionKey)">RESET</button>
               </h3>
 
               <hr />
 
-              <div class="section-inputs">
-                <FilterOption
-                  v-for="(option, i) in filterStore.inputs.options.filter(
-                    (o) => o.section == section
-                  )"
-                  v-model:optionValue="option.value"
-                  :option="option"
-                  :key="i"
-                />
+              <div class="section-filters">
+                <label
+                  v-for="filterKey in sectionFilters"
+                  @dblclick="setSingleSectionFilter(sectionKey, filterKey)"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="filters[filterKey]"
+                    v-model="filters[filterKey]"
+                    :class="sectionKey"
+                    :name="filterKey"
+                    :id="filterKey"
+                  />
+                  <span>
+                    {{ $t(`filters.${filterKey}`) }}
+                  </span>
+                </label>
               </div>
             </div>
           </section>
@@ -68,50 +89,50 @@
               <span>{{
                 minimumHours == 0
                   ? $t('filters.now')
-                  : minimumHours < 8
-                  ? minimumHours + $t('filters.hour')
-                  : $t('filters.no-limit')
+                  : minimumHours < 7
+                    ? minimumHours + $t('filters.hour')
+                    : $t('filters.no-limit')
               }}</span>
               <button class="btn--action" @click="addHour">+</button>
             </span>
           </section>
 
-          <datalist id="authors">
-            <option v-for="(author, i) in authors" :key="i" :value="author"></option>
-          </datalist>
-
           <section class="card_authors-search">
             <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
 
+            <datalist id="authors" name="authors">
+              <option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
+            </datalist>
+
             <form action="javascript:void(0);" @submit="handleAuthorsInput">
               <input
                 type="text"
                 id="author"
                 list="authors"
                 name="authors"
+                v-model="authors"
                 :placeholder="$t('filters.authors-placeholder')"
-                v-model="authorsInputValue"
                 @focus="preventKeyDown = true"
                 @blur="preventKeyDown = false"
               />
 
-              <button class="btn--action">{{ $t('filters.authors-button-title') }}</button>
+              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
             </form>
           </section>
 
           <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in filterStore.inputs.sliders" :key="i">
+            <div class="slider" v-for="(slider, i) in initSliders" :key="i">
               <input
                 class="slider-input"
                 type="range"
-                :name="slider.name"
+                :name="slider.id"
                 :id="slider.id"
                 :min="slider.minRange"
                 :max="slider.maxRange"
-                v-model="slider.value"
-                @change="handleInput"
+                :step="slider.step"
+                v-model="filters[slider.id]"
               />
-              <span class="slider-value">{{ slider.value }}</span>
+              <span class="slider-value">{{ filters[slider.id] }}</span>
               <div class="slider-content">
                 {{ $t(`filters.sliders.${slider.id}`) }}
               </div>
@@ -132,11 +153,11 @@
 
             <button
               class="btn--action"
+              :disabled="changedFilters.length == 0"
+              :data-disabled="changedFilters.length == 0"
               @click="resetFilters"
-              :disabled="filterStore.areFiltersAtDefault"
-              :data-disabled="filterStore.areFiltersAtDefault"
             >
-              {{ $t('filters.reset') }}
+              [R] {{ $t('filters.reset') }}
             </button>
             <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
           </div>
@@ -150,48 +171,76 @@
 import { defineComponent, inject } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import routerMixin from '../../mixins/routerMixin';
-import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useMainStore } from '../../store/mainStore';
 
 import FilterOption from './FilterOption.vue';
 import StorageManager from '../../managers/storageManager';
 
+import {
+  filtersSections,
+  initSliders,
+  initFilters,
+  getChangedFilters
+} from '../../managers/stationFilterManager';
+
+import { StationFilterSection } from '../../managers/stationFilterManager';
+import { computed } from 'vue';
+import { watch } from 'vue';
+
+const STORAGE_KEY = 'options_saved';
+
 export default defineComponent({
   components: { FilterOption },
   mixins: [keyMixin, routerMixin],
 
   data: () => ({
     saveOptions: false,
-    STORAGE_KEY: 'options_saved',
 
-    authorsInputValue: '',
+    filtersSections,
+    initSliders,
+
     minimumHours: 0,
+    authors: '',
 
     currentRegion: { id: '', value: '' },
 
     delayInputTimer: -1,
-    chosenSearchScenery: ''
+    chosenSearchScenery: '',
+
+    scrollTop: 0,
+    lastFocusedEl: null as HTMLElement | null
   }),
 
   setup() {
     const isVisible = inject('isFilterCardVisible');
     const store = useMainStore();
-    const filterStore = useStationFiltersStore();
+
+    const filters = inject('StationsView_filters') as Record<string, any>;
+
+    const changedFilters = computed(() => getChangedFilters(filters));
+
+    // Save filters to persistent storage
+    watch(filters, (value) => {
+      if (!StorageManager.isRegistered(STORAGE_KEY)) return;
+
+      Object.keys(value).forEach((filterKey) => {
+        StorageManager.setValue(filterKey, filters[filterKey]);
+      });
+    });
 
     return {
       isVisible,
       store,
-      filterStore
+      filters,
+      changedFilters
     };
   },
 
   mounted() {
-    this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
+    this.saveOptions = StorageManager.isRegistered(STORAGE_KEY);
 
     if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) {
       this.minimumHours = StorageManager.getNumericValue('onlineFromHours');
-
-      this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
     }
 
     this.currentRegion = this.store.region;
@@ -210,7 +259,7 @@ export default defineComponent({
       return true;
     },
 
-    authors() {
+    authorsHint() {
       return this.store.stationList
         .reduce((acc, station) => {
           station.generalInfo?.authors?.forEach((author) => {
@@ -225,18 +274,12 @@ export default defineComponent({
   },
 
   watch: {
-    chosenSearchScenery(value: string) {
-      const chosenStation = this.store.stationList.find(({ name }) => name == value);
-
-      if (chosenStation) {
-        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
-        this.chosenSearchScenery = '';
-      }
-    },
-
     isVisible(value: boolean) {
       this.$nextTick(() => {
-        if (value) (this.$refs['cardEl'] as HTMLDivElement).focus();
+        if (value) {
+          (this.$refs['cardContentRef'] as HTMLDivElement).scrollTop = this.scrollTop;
+          (this.$refs['cardContentRef'] as HTMLDivElement).focus();
+        }
       });
     }
   },
@@ -247,61 +290,81 @@ export default defineComponent({
       this.isVisible = !this.isVisible;
     },
 
-    handleInput(e: Event) {
-      const target = e.target as HTMLInputElement;
-
-      this.filterStore.changeFilterValue(target.name, target.value);
-
-      if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
     },
 
     handleAuthorsInput() {
-      this.filterStore.changeFilterValue('authors', this.authorsInputValue);
-
-      if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
+      this.filters['authors'] = this.authors;
     },
 
-    changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.filterStore.changeFilterValue(name, value);
-      if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
+    handleSceneriesInput() {
+      const chosenStation = this.store.stationList.find(
+        ({ name }) => name == this.chosenSearchScenery
+      );
+
+      if (chosenStation) {
+        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
+        this.chosenSearchScenery = '';
+        this.isVisible = false;
+      }
     },
 
     subHour() {
-      this.minimumHours = this.minimumHours < 1 ? 8 : this.minimumHours - 1;
-
-      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
+      this.minimumHours = this.minimumHours < 1 ? 7 : this.minimumHours - 1;
+      this.filters['onlineFromHours'] = this.minimumHours;
     },
 
     addHour() {
-      this.minimumHours = this.minimumHours > 7 ? 0 : this.minimumHours + 1;
-
-      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
+      this.minimumHours = this.minimumHours > 6 ? 0 : this.minimumHours + 1;
+      this.filters['onlineFromHours'] = this.minimumHours;
     },
 
     saveFilters() {
       this.saveOptions = !this.saveOptions;
 
       if (!this.saveOptions) {
-        StorageManager.unregisterStorage(this.STORAGE_KEY);
+        StorageManager.unregisterStorage(STORAGE_KEY);
         return;
       }
 
-      StorageManager.registerStorage(this.STORAGE_KEY);
+      StorageManager.registerStorage(STORAGE_KEY);
 
-      this.filterStore.inputs.options.forEach((option) =>
-        StorageManager.setBooleanValue(option.name, !option.value)
-      );
-      this.filterStore.inputs.sliders.forEach((slider) =>
-        StorageManager.setNumericValue(slider.name, slider.value)
-      );
+      Object.keys(this.filters).forEach((filterKey) => {
+        StorageManager.setValue(filterKey, this.filters[filterKey]);
+      });
     },
 
     resetFilters() {
-      this.authorsInputValue = '';
+      if (this.preventKeyDown) return;
 
+      // Reset local model values
       this.minimumHours = 0;
-      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
-      this.filterStore.resetFilters();
+      this.authors = '';
+
+      // Reset global filters
+      Object.keys(this.filters).forEach((filterKey) => {
+        this.filters[filterKey] = (initFilters as any)[filterKey];
+      });
+    },
+
+    areSectionFiltersDefault(sectionKey: StationFilterSection) {
+      return filtersSections[sectionKey].every((filterKey) => {
+        return this.filters[filterKey] == initFilters[filterKey];
+      });
+    },
+
+    resetSectionFilters(sectionKey: StationFilterSection) {
+      filtersSections[sectionKey].forEach((filterKey) => {
+        this.filters[filterKey] = initFilters[filterKey];
+      });
+    },
+
+    setSingleSectionFilter(sectionKey: StationFilterSection, chosenKey: string) {
+      filtersSections[sectionKey].forEach((filterKey) => {
+        if (typeof this.filters[filterKey] === 'boolean')
+          this.filters[filterKey] = filterKey != chosenKey;
+      });
     },
 
     closeCard() {
@@ -316,9 +379,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/card.scss';
-@import '../../styles/animations.scss';
+@import '../../styles/responsive';
+@import '../../styles/card';
+@import '../../styles/animations';
+@import '../../styles/variables';
 
 h3.section-header {
   text-align: center;
@@ -328,6 +392,7 @@ h3.section-header {
 .card {
   display: grid;
   grid-template-rows: 1fr auto;
+  padding: 1px;
 }
 
 .card_info {
@@ -335,6 +400,15 @@ h3.section-header {
   padding: 0.5em;
 }
 
+.changed-filters {
+  background-color: #111;
+  padding: 0.5em;
+
+  &[data-active='true'] {
+    color: lightgreen;
+  }
+}
+
 .card_controls {
   display: flex;
   gap: 0.5em;
@@ -363,28 +437,6 @@ h3.section-header {
   text-align: center;
 }
 
-.card_regions {
-  display: flex;
-  justify-content: center;
-
-  label > input {
-    display: none;
-  }
-
-  label > span {
-    padding: 0.25em 0.5em;
-    margin: 0 0.25em;
-
-    cursor: pointer;
-
-    background-color: gray;
-
-    &.checked {
-      background-color: seagreen;
-    }
-  }
-}
-
 .card_timestamp {
   display: flex;
   flex-direction: column;
@@ -410,8 +462,12 @@ h3.section-header {
   }
 }
 
-.card_authors-search {
+.card_authors-search,
+.card_sceneries-search {
   margin: 1em 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   form {
     display: flex;
@@ -430,24 +486,63 @@ h3.section-header {
   }
 }
 
-.card_actions {
-  width: 100%;
-  padding: 0.5em;
+.section-filters {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5em;
+  margin: 1em 0;
+}
 
-  .filter-option {
-    max-width: 50%;
-    margin: 0 auto;
+.section-filters > label {
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  span {
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    padding: 0.25em;
+    font-weight: bold;
+    background-color: forestgreen;
   }
 
+  span:hover {
+    background-color: #22aa22;
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+
+    &:checked + span {
+      background-color: #444;
+
+      &:hover {
+        background-color: #555;
+      }
+    }
+
+    &:focus-visible + span {
+      outline: 1px solid $accentCol;
+    }
+  }
+}
+
+.card_actions {
+  padding: 0.5em;
+
   .action-buttons {
     display: flex;
     gap: 0.5em;
-    width: 100%;
 
     margin-top: 0.5em;
 
     button {
-      width: 50%;
+      width: 100%;
       margin: 0 auto;
       padding: 0.5em;
 
@@ -471,35 +566,18 @@ h3.section-header {
   }
 }
 
-.section-inputs {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5em;
-  margin: 1em 0;
-}
-
-.quick-actions div {
-  display: flex;
-  margin: 1em 0;
-  gap: 1em;
-}
-
 .slider {
   display: flex;
   align-items: center;
+  gap: 0.25em;
 
   margin-bottom: 1em;
 
   &-value {
     color: $accentCol;
-    margin-right: 0.5em;
     padding: 0.1em 0.2em;
   }
 
-  &-content {
-    flex-grow: 2;
-  }
-
   &-input {
     -webkit-appearance: none;
     appearance: none;
@@ -508,7 +586,6 @@ h3.section-header {
     outline: none;
 
     min-width: 25%;
-    max-width: 120px;
 
     &:focus-visible ~ * {
       color: gold;
@@ -578,4 +655,15 @@ h3.section-header {
     }
   }
 }
+
+@include smallScreen {
+  .slider {
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &-input {
+      width: 90%;
+    }
+  }
+}
 </style>

src/components/StationsView/StationStats.vue

@@ -0,0 +1,237 @@
+<template>
+  <div
+    class="dropdown"
+    @keydown.esc="showDropdown = false"
+    v-click-outside="() => (showDropdown = false)"
+  >
+    <div class="bg" v-if="showDropdown" @click="showDropdown = false"></div>
+
+    <button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
+      <img src="/images/icon-stats.svg" alt="Open filters icon" />
+      <!-- {{ $t('train-stats.stats-button') }} -->
+      <span>STATYSTYKI</span>
+    </button>
+
+    <transition name="dropdown-anim">
+      <div class="dropdown_wrapper" v-if="showDropdown">
+        <div>
+          <h1 class="text--primary">
+            <img src="/images/icon-stats.svg" alt="Open filters icon" />
+            {{ $t('train-stats.title') }}
+          </h1>
+
+          <hr style="margin: 0.5em 0" />
+
+          <ul class="stats-list">
+            <li>
+              <span>
+                {{ $t('station-stats.u-factor') }}
+                <a
+                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                  target="_blank"
+                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                  >(?)</a
+                >:
+              </span>
+              <b class="u-factor" :style="calculateFactorStyle()">
+                {{ uFactor.toFixed(2) }}
+              </b>
+            </li>
+            <li>
+              {{ $t('station-stats.avg-timetable-count') }}
+              <b>{{ avgTimetableCount.toFixed(2) }}</b>
+            </li>
+            <li>
+              {{ $t('station-stats.single-track-count') }}
+              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+            </li>
+            <li>
+              {{ $t('station-stats.double-track-count') }}
+              <b>{{ trackCount.twoWay }}</b>
+              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+            </li>
+            <li>
+              {{ $t('station-stats.cross-sceneries') }}
+              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+            </li>
+            <li>
+              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
+              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
+              <b>{{ spawnCount.all }}</b> - ALL
+            </li>
+          </ul>
+        </div>
+
+        <div tabindex="0" @focus="() => (showDropdown = false)"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  data() {
+    return {
+      mainStore: useMainStore(),
+      showDropdown: false
+    };
+  },
+
+  methods: {
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown;
+    },
+
+    calculateFactorStyle() {
+      if (this.uFactor == 0) return '';
+
+      const norm = this.uFactor == 0 ? 1 : Math.max(Math.min(this.uFactor / 2, 1), 0);
+      const lerp = 120 * norm;
+
+      return `color: hsl(${lerp}, 100%, 60%)`;
+    }
+  },
+
+  computed: {
+    uFactor() {
+      const activeDispatchers = this.mainStore.activeSceneryList.filter(
+        (scenery) => scenery.region == this.mainStore.region.id && scenery.dispatcherId != -1
+      );
+
+      const activeTrains = this.mainStore.trainList.filter(
+        (train) => train.region == this.mainStore.region.id
+      );
+
+      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
+    },
+
+    avgTimetableCount() {
+      const regionSceneries = this.mainStore.activeSceneryList.filter((sc) => {
+        return sc.region == this.mainStore.region.id;
+      });
+
+      const timetableCountSum = regionSceneries.reduce((acc, sc) => {
+        acc += sc.scheduledTrainCount.all;
+        return acc;
+      }, 0);
+
+      if (regionSceneries.length == 0) return 0;
+
+      return timetableCountSum / regionSceneries.length;
+    },
+
+    trackCount() {
+      return this.mainStore.allStationInfo
+        .filter(
+          (st) =>
+            st.onlineInfo?.dispatcherId != -1 &&
+            st.onlineInfo?.region == this.mainStore.region.id &&
+            st.generalInfo?.routes
+        )
+        .reduce(
+          (acc, st) => {
+            const { routes } = st.generalInfo!;
+
+            if (
+              routes.single.filter((r) => !r.isInternal).length > 0 &&
+              routes.double.filter((r) => !r.isInternal).length > 0
+            ) {
+              acc.crossTrack++;
+
+              if (
+                routes.single.some((r) => r.isElectric) &&
+                routes.double.some((r) => r.isElectric)
+              )
+                acc.crossTrackElectric++;
+            }
+
+            [...routes.single, ...routes.double].forEach((r) => {
+              if (r.isInternal) return;
+
+              acc[r.routeTracks == 2 ? 'twoWay' : 'oneWay'] += 1;
+              if (r.isElectric) acc[r.routeTracks == 2 ? 'twoWayElectric' : 'oneWayElectric'] += 1;
+            });
+
+            return acc;
+          },
+          {
+            oneWay: 0,
+            oneWayElectric: 0,
+            twoWay: 0,
+            twoWayElectric: 0,
+            crossTrack: 0,
+            crossTrackElectric: 0
+          }
+        );
+    },
+
+    spawnCount() {
+      return this.mainStore.activeSceneryList.reduce(
+        (acc, scenery) => {
+          if (scenery.region != this.mainStore.region.id) return acc;
+
+          scenery.spawns.forEach((spawn) => {
+            if (/EZT|POS|OSOB/i.test(spawn.spawnName)) acc['passenger'] += 1;
+            if (/TOW/i.test(spawn.spawnName)) acc['freight'] += 1;
+            if (/LUZ|SM/i.test(spawn.spawnName)) acc['loco'] += 1;
+            if (/ALL/i.test(spawn.spawnName)) acc['all'] += 1;
+          });
+
+          return acc;
+        },
+        { passenger: 0, freight: 0, loco: 0, all: 0 }
+      );
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/dropdown.scss';
+@import '../../styles/badge.scss';
+
+h1 img {
+  vertical-align: text-bottom;
+}
+
+h3 {
+  margin: 0.5em 0;
+}
+
+.u-factor {
+  [data-factor-low='true'] {
+    color: #ddd;
+  }
+
+  [data-factor-mediocre='true'] {
+    color: lightgreen;
+  }
+
+  [data-factor-high='true'] {
+    color: greenyellow;
+  }
+
+  [data-factor-highest='true'] {
+    color: rgb(22, 245, 22);
+  }
+}
+
+ul.stats-list {
+  list-style: disc;
+  padding-left: 1em;
+  margin-top: 1em;
+
+  & > li {
+    margin: 0.25em 0;
+  }
+}
+
+@include smallScreen {
+  .filter-button span {
+    display: none;
+  }
+}
+</style>

src/components/StationsView/StationTable.vue

@@ -1,377 +1,383 @@
 <template>
   <section class="station_table">
-    <transition name="status-anim" mode="out-in">
-      <div class="table_wrapper" :key="apiStore.dataStatuses.connection">
-        <table>
-          <thead>
-            <tr>
-              <th
-                v-for="headerName in headIds"
-                :key="headerName"
-                @click="changeSorter(headerName)"
-                class="header-text"
-                :class="headerName"
+    <Loading
+      v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
+    />
+
+    <table v-else-if="filteredStationList.length > 0">
+      <thead>
+        <tr>
+          <th
+            v-for="headerName in headIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-text"
+            :class="headerName"
+          >
+            <span class="header_wrapper">
+              <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
+
+              <img
+                class="sort-icon"
+                v-if="activeSorter.headerName == headerName"
+                :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
+              />
+            </span>
+          </th>
+
+          <th
+            v-for="headerName in headIconsIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-image"
+            :class="headerName"
+          >
+            <span class="header_wrapper">
+              <img
+                :src="`/images/icon-${headerName}.svg`"
+                :alt="headerName"
+                :title="$t(`sceneries.headers.${headerName}`)"
+              />
+
+              <img
+                class="sort-icon"
+                v-if="activeSorter.headerName == headerName"
+                :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <router-link
+          v-for="station in filteredStationList"
+          class="a-row"
+          role="row"
+          :key="station.name"
+          @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
+          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
+          :to="getSceneryRoute(station)"
+        >
+          <td class="station-name" :class="station.generalInfo?.availability">
+            <b v-if="station.generalInfo?.project" style="color: salmon">{{
+              station.generalInfo.project
+            }}</b>
+            {{ station.name }}
+          </td>
+
+          <td class="station-level">
+            <span v-if="station.generalInfo">
+              <span
+                v-if="
+                  station.generalInfo.reqLevel > -1 &&
+                  station.generalInfo.availability != 'nonPublic' &&
+                  station.generalInfo.availability != 'unavailable'
+                "
+                :style="calculateExpStyle(station.generalInfo.reqLevel)"
               >
-                <span class="header_wrapper">
-                  <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
+                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+              </span>
 
-                  <img
-                    class="sort-icon"
-                    v-if="sorterActive.headerName == headerName"
-                    :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                    alt="sort icon"
-                  />
-                </span>
-              </th>
+              <span v-else-if="station.generalInfo.availability == 'abandoned'">
+                <img
+                  src="/images/icon-abandoned.svg"
+                  alt="non-public"
+                  :title="$t('sceneries.info.abandoned')"
+                />
+              </span>
 
-              <th
-                v-for="headerName in headIconsIds"
-                :key="headerName"
-                @click="changeSorter(headerName)"
-                class="header-image"
-                :class="headerName"
+              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                <img
+                  src="/images/icon-lock.svg"
+                  alt="non-public"
+                  :title="$t('sceneries.info.non-public')"
+                />
+              </span>
+
+              <span v-else>
+                <img
+                  src="/images/icon-unavailable.svg"
+                  alt="unavailable"
+                  :title="$t('sceneries.info.unavailable')"
+                />
+              </span>
+            </span>
+
+            <span v-else> ? </span>
+          </td>
+
+          <td class="station-status">
+            <StationStatusBadge
+              :isOnline="station.onlineInfo ? true : false"
+              :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+            />
+          </td>
+
+          <td class="station-dispatcher-name">
+            <span v-if="station.onlineInfo?.dispatcherName">
+              <b
+                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                @click.prevent="openDonationCard"
+                data-tooltip-type="DonatorTooltip"
+                :data-tooltip-content="$t('donations.dispatcher-message')"
               >
-                <span class="header_wrapper">
-                  <img
-                    :src="`/images/icon-${headerName}.svg`"
-                    :alt="headerName"
-                    :title="$t(`sceneries.headers.${headerName}`)"
-                  />
+                <img src="/images/icon-diamond.svg" alt="" />
+                {{ station.onlineInfo.dispatcherName }}
+              </b>
 
-                  <img
-                    class="sort-icon"
-                    v-if="sorterActive.headerName == headerName"
-                    :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                    alt="sort icon"
-                  />
-                </span>
-              </th>
-            </tr>
-          </thead>
+              <div v-else>
+                {{ station.onlineInfo.dispatcherName }}
+              </div>
+            </span>
+          </td>
 
-          <tbody>
-            <tr
-              v-for="station in stations"
-              :class="{ 'last-selected': lastSelectedStationName == station.name }"
-              :key="station.name"
-              @click.left="setScenery(station.name)"
-              @click.right="openForumSite($event, station.generalInfo?.url)"
-              @keydown.enter="setScenery(station.name)"
-              @keydown.space="openForumSite($event, station.generalInfo?.url)"
-              tabindex="0"
+          <td class="station-dispatcher-exp">
+            <span
+              v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
+              :style="
+                calculateExpStyle(
+                  station.onlineInfo.dispatcherExp,
+                  station.onlineInfo.dispatcherIsSupporter
+                )
+              "
             >
-              <td class="station-name" :class="station.generalInfo?.availability">
-                <b v-if="station.generalInfo?.project" style="color: salmon">{{
-                  station.generalInfo.project
-                }}</b>
-                {{ station.name }}
-              </td>
+              {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+            </span>
+          </td>
 
-              <td class="station-level">
-                <span v-if="station.generalInfo">
-                  <span
-                    v-if="
-                      station.generalInfo.reqLevel > -1 &&
-                      station.generalInfo.availability != 'nonPublic' &&
-                      station.generalInfo.availability != 'unavailable'
-                    "
-                    :style="calculateExpStyle(station.generalInfo.reqLevel)"
-                  >
-                    {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
-                  </span>
-
-                  <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                    <img
-                      src="/images/icon-abandoned.svg"
-                      alt="non-public"
-                      :title="$t('sceneries.info.abandoned')"
-                    />
-                  </span>
-
-                  <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                    <img
-                      src="/images/icon-lock.svg"
-                      alt="non-public"
-                      :title="$t('sceneries.info.non-public')"
-                    />
-                  </span>
-
-                  <span v-else>
-                    <img
-                      src="/images/icon-unavailable.svg"
-                      alt="unavailable"
-                      :title="$t('sceneries.info.unavailable')"
-                    />
-                  </span>
-                </span>
-
-                <span v-else> ? </span>
-              </td>
-
-              <td class="station-status">
-                <StationStatusBadge
-                  :isOnline="station.onlineInfo ? true : false"
-                  :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
-                />
-              </td>
-
-              <td class="station-dispatcher-name">
-                <span v-if="station.onlineInfo?.dispatcherName">
-                  <b
-                    v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                    @click.stop="openDonationModal"
-                    data-popup-key="DonatorPopUp"
-                    :data-popup-content="$t('donations.dispatcher-message')"
-                  >
-                    <img src="/images/icon-diamond.svg" alt="" />
-                    {{ station.onlineInfo.dispatcherName }}
-                  </b>
-
-                  <div v-else>
-                    {{ station.onlineInfo.dispatcherName }}
-                  </div>
-                </span>
-              </td>
-
-              <td class="station-dispatcher-exp">
-                <span
-                  v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
-                  :style="
-                    calculateExpStyle(
-                      station.onlineInfo.dispatcherExp,
-                      station.onlineInfo.dispatcherIsSupporter
-                    )
-                  "
-                >
-                  {{
-                    station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp
-                  }}
-                </span>
-              </td>
-
-              <td class="station-tracks">
-                <div v-if="station.generalInfo">
-                  <span
-                    v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
-                    class="track catenary"
-                    :title="`${$t('sceneries.info.single-track-routes-catenary')}${
-                      station.generalInfo.routes.singleElectrifiedNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.singleElectrifiedNames.length }}
-                  </span>
-
-                  <span
-                    v-if="station.generalInfo.routes.singleOtherNames.length != 0"
-                    class="track no-catenary"
-                    :title="`${$t('sceneries.info.single-track-routes-other')}${
-                      station.generalInfo.routes.singleOtherNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.singleOtherNames.length }}
-                  </span>
-                </div>
-              </td>
-
-              <td class="station-tracks">
-                <div v-if="station.generalInfo">
-                  <span
-                    v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
-                    class="track catenary"
-                    :title="`${$t('sceneries.info.double-track-routes-catenary')}${
-                      station.generalInfo.routes.doubleElectrifiedNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
-                  </span>
-
-                  <span
-                    v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
-                    class="track no-catenary"
-                    :title="`${$t('sceneries.info.double-track-routes-other')}${
-                      station.generalInfo.routes.doubleOtherNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.doubleOtherNames.length }}
-                  </span>
-                </div>
-              </td>
-
-              <td class="station-info">
-                <span
-                  v-if="station.generalInfo?.signalType"
-                  class="scenery-icon icon-info"
-                  :class="station.generalInfo?.controlType.replace('+', '-')"
-                  :title="
-                    $t('sceneries.info.control-type') +
-                    $t(`controls.${station.generalInfo?.controlType}`)
-                  "
-                  v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
-                >
-                </span>
-
-                <img
-                  v-if="station.generalInfo?.signalType"
-                  class="icon-info"
-                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-                  :alt="station.generalInfo.signalType"
-                  :title="
-                    $t('sceneries.info.signals-type') +
-                    $t(`signals.${station.generalInfo.signalType}`)
-                  "
-                />
-
-                <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')"
-                />
-
-                <img
-                  v-if="!station.generalInfo"
-                  class="icon-info"
-                  src="/images/icon-unknown.svg"
-                  alt="icon-unknown"
-                  :title="$t('sceneries.info.unknown')"
-                />
-              </td>
-
-              <td class="station-users" :class="{ inactive: !station.onlineInfo }">
-                <span class="text--primary">{{ station.onlineInfo?.currentUsers ?? '-' }}</span>
-                /
-                <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
-              </td>
-
-              <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
-                <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
-              </td>
-
-              <td class="station-spawns" :class="{ inactive: !station.onlineInfo }">
-                <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
-              </td>
-
-              <td
-                class="station-schedules all"
-                style="width: 30px"
-                :class="{ inactive: !station.onlineInfo }"
+          <td class="station-tracks">
+            <div v-if="station.generalInfo">
+              <span
+                v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
+                class="track catenary"
+                :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                  station.generalInfo.routes.singleElectrifiedNames.length
+                }`"
               >
-                {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
-              </td>
+                {{ station.generalInfo.routes.singleElectrifiedNames.length }}
+              </span>
 
-              <td
-                class="station-schedules unconfirmed"
-                style="width: 30px"
-                :class="{ inactive: !station.onlineInfo }"
+              <span
+                v-if="station.generalInfo.routes.singleOtherNames.length != 0"
+                class="track no-catenary"
+                :title="`${$t('sceneries.info.single-track-routes-other')}${
+                  station.generalInfo.routes.singleOtherNames.length
+                }`"
               >
-                {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
-              </td>
+                {{ station.generalInfo.routes.singleOtherNames.length }}
+              </span>
+            </div>
+          </td>
 
-              <td
-                class="station-schedules confirmed"
-                style="width: 30px"
-                :class="{ inactive: !station.onlineInfo }"
+          <td class="station-tracks">
+            <div v-if="station.generalInfo">
+              <span
+                v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
+                class="track catenary"
+                :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                  station.generalInfo.routes.doubleElectrifiedNames.length
+                }`"
               >
-                {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
+              </span>
 
-        <Loading
-          v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0"
-        />
+              <span
+                v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
+                class="track no-catenary"
+                :title="`${$t('sceneries.info.double-track-routes-other')}${
+                  station.generalInfo.routes.doubleOtherNames.length
+                }`"
+              >
+                {{ station.generalInfo.routes.doubleOtherNames.length }}
+              </span>
+            </div>
+          </td>
 
-        <div class="no-stations" v-else-if="stations.length == 0">
-          {{ $t('sceneries.no-stations') }}
-        </div>
+          <td class="station-info">
+            <span
+              v-if="station.generalInfo?.signalType"
+              class="scenery-icon icon-info"
+              :class="station.generalInfo?.controlType.replace('+', '-')"
+              :title="
+                $t('sceneries.info.control-type') +
+                $t(`controls.${station.generalInfo?.controlType}`)
+              "
+            >
+              {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+            </span>
+
+            <img
+              v-if="station.generalInfo?.signalType"
+              class="icon-info"
+              :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+              :alt="station.generalInfo.signalType"
+              :title="
+                $t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)
+              "
+            />
+
+            <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')"
+            />
+
+            <img
+              v-if="!station.generalInfo"
+              class="icon-info"
+              src="/images/icon-unknown.svg"
+              alt="icon-unknown"
+              :title="$t('sceneries.info.unknown')"
+            />
+          </td>
+
+          <td
+            class="station-users"
+            :class="{ inactive: !station.onlineInfo }"
+            data-tooltip-type="UsersTooltip"
+            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+          >
+            <span class="text--primary">{{
+              station.onlineInfo?.stationTrains?.length ?? '-'
+            }}</span>
+            /
+            <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
+          </td>
+
+          <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
+            <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
+          </td>
+
+          <td
+            class="station-spawns"
+            :class="{ inactive: !station.onlineInfo }"
+            data-tooltip-type="SpawnsTooltip"
+            :data-tooltip-content="JSON.stringify(station.onlineInfo?.spawns ?? [])"
+          >
+            <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
+          </td>
+
+          <td
+            class="station-schedules all"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
+          </td>
+
+          <td
+            class="station-schedules unconfirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
+          </td>
+
+          <td
+            class="station-schedules confirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
+          </td>
+        </router-link>
+      </tbody>
+    </table>
+
+    <div class="no-stations" v-else>
+      <div>
+        {{ $t('sceneries.no-stations') }} (region: <b>{{ mainStore.region.name }}</b
+        >)
       </div>
-    </transition>
+
+      <div class="text--primary" v-if="getChangedFilters(filters).length != 0">
+        ⚠ {{ $t('sceneries.active-filters') }}
+      </div>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import stationInfoMixin from '../../mixins/stationInfoMixin';
-import styleMixin from '../../mixins/styleMixin';
-import Station from '../../scripts/interfaces/Station';
-import { useStationFiltersStore } from '../../store/stationFiltersStore';
-import { useMainStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
+import { defineComponent, inject, computed } from 'vue';
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
-import { Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+import dateMixin from '../../mixins/dateMixin';
+import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
-import popupMixin from '../../mixins/popupMixin';
+import { useMainStore } from '../../store/mainStore';
+import { Station, Status } from '../../typings/common';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { getChangedFilters } from '../../managers/stationFilterManager';
+import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
+import { filterStations, sortStations } from './utils';
 
 export default defineComponent({
-  props: {
-    stations: {
-      type: Array as PropType<Station[]>,
-      required: true
-    }
-  },
+  emits: ['toggleDonationCard'],
 
-  emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, stationInfoMixin, popupMixin],
+  mixins: [styleMixin, dateMixin],
 
   data: () => ({
     headIconsIds,
     headIds,
-    lastSelectedStationName: ''
+    getChangedFilters
   }),
 
-  computed: {
-    sorterActive() {
-      return this.stationFiltersStore.sorterActive;
-    }
-  },
-
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
+    const tooltipStore = useTooltipStore();
 
-    const stationFiltersStore = useStationFiltersStore();
+    const filters = inject('StationsView_filters') as Record<string, any>;
+    const activeSorter = inject('StationsView_activeSorter') as ActiveSorter;
+
+    const filteredStationList = computed(() =>
+      mainStore.allStationInfo
+        .filter((station) => filterStations(station, filters))
+        .sort((a, b) => sortStations(a, b, activeSorter))
+    );
 
     return {
       Status: Status.Data,
-      stationFiltersStore,
       mainStore,
-      apiStore
+      apiStore,
+      tooltipStore,
+      filters,
+      filteredStationList,
+      activeSorter
     };
   },
 
   methods: {
-    setScenery(name: string) {
-      const station = this.stations.find((station) => station.name === name);
-      if (!station) return;
+    getSceneryRoute(station: Station) {
+      // TODO: Hide tooltips when navigating away
 
-      this.lastSelectedStationName = station.name;
-
-      this.$router.push({
+      return {
         name: 'SceneryView',
         query: {
-          station: station.name.replaceAll(' ', '_'),
+          station: station.name,
           region: this.$route.query.region || undefined
         }
-      });
+      };
     },
 
-    openDonationModal(e: Event) {
-      this.$emit('toggleDonationModal', true);
+    openDonationCard(e: Event) {
+      this.$emit('toggleDonationCard', true);
       this.mainStore.modalLastClickedTarget = e.target;
-      this.hidePopUp();
+      this.tooltipStore.hide();
     },
 
     openForumSite(e: Event, url: string | undefined) {
@@ -380,10 +386,14 @@ export default defineComponent({
       window.open(url, '_blank');
     },
 
-    changeSorter(headerName: HeadIdsTypes) {
+    changeSorter(headerName: HeadIdsType) {
       if (headerName == 'general') return;
 
-      this.stationFiltersStore.changeSorter(headerName);
+      if (headerName == this.activeSorter.headerName)
+        this.activeSorter.dir = -1 * this.activeSorter.dir;
+      else this.activeSorter.dir = 1;
+
+      this.activeSorter.headerName = headerName;
     }
   }
 });
@@ -396,33 +406,20 @@ export default defineComponent({
 
 $rowCol: #424242;
 
-.change-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 100ms ease-in;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.table_wrapper {
+.station_table {
+  height: 90vh;
+  max-height: 2000px;
+  min-height: 700px;
   overflow: auto;
   font-weight: 500;
-  height: 90vh;
-  min-height: 550px;
 }
 
 .no-stations {
   text-align: center;
-  font-size: 1.5em;
-
+  font-size: 1.25em;
   padding: 1em;
-  margin: 1em 0;
-
-  background: #333;
+  background: #1a1a1a;
+  line-height: 1.5em;
 }
 
 table {
@@ -499,8 +496,10 @@ table {
   }
 }
 
-tr {
+tr,
+.a-row {
   background-color: $rowCol;
+  vertical-align: middle;
 
   &:nth-child(even) {
     background-color: lighten($rowCol, 5);

src/components/StationsView/typings.ts

@@ -5,52 +5,29 @@ export interface FilterOption {
   defaultValue: boolean;
 }
 
-export interface Filter {
-  [key: string]: boolean | number | string;
-  default: boolean;
-  notDefault: boolean;
-  real: boolean;
-  fictional: boolean;
-  SPK: boolean;
-  SCS: boolean;
-  SPE: boolean;
-  SUP: boolean;
-  noSUP: boolean;
-  ASDEK: boolean;
-  noASDEK: boolean;
-  ręczne: boolean;
-  'ręczne+SPK': boolean;
-  'ręczne+SCS': boolean;
-  mechaniczne: boolean;
-  'mechaniczne+SPK': boolean;
-  'mechaniczne+SCS': boolean;
-  SBL: boolean;
-  PBL: boolean;
-  współczesna: boolean;
-  kształtowa: boolean;
-  historyczna: boolean;
-  mieszana: boolean;
-  minLevel: number;
-  maxLevel: number;
-  minOneWayCatenary: number;
-  minOneWay: number;
-  minTwoWayCatenary: number;
-  minTwoWay: number;
-  'no-1track': boolean;
-  'no-2track': boolean;
-  'include-selected': boolean;
-  free: boolean;
-  occupied: boolean;
-  nonPublic: boolean;
-  unavailable: boolean;
-  abandoned: boolean;
-  endingStatus: boolean;
-  afkStatus: boolean;
-  noSpaceStatus: boolean;
-  unavailableStatus: boolean;
-  unsignedStatus: boolean;
-  authors: string;
-  onlineFromHours: number;
-  withActiveTimetables: boolean;
-  withoutActiveTimetables: boolean;
+export const headIds = [
+  'station',
+  'min-lvl',
+  'status',
+  'dispatcher',
+  'dispatcher-lvl',
+  'routes-single',
+  'routes-double',
+  'general'
+] as const;
+
+export const headIconsIds = [
+  'user',
+  'like',
+  'spawn',
+  'timetableAll',
+  'timetableUnconfirmed',
+  'timetableConfirmed'
+] as const;
+
+export type HeadIdsType = (typeof headIds)[number] | (typeof headIconsIds)[number];
+
+export interface ActiveSorter {
+  headerName: HeadIdsType;
+  dir: number;
 }

src/components/StationsView/utils.ts

@@ -0,0 +1,275 @@
+import { ActiveSorter } from '../../components/StationsView/typings';
+import { ActiveScenery, StationGeneralInfo, Status } from '../../typings/common';
+import { Station } from '../../typings/common';
+
+const dispatcherStatusPriority = [
+  Status.ActiveDispatcher.UNKNOWN,
+  Status.ActiveDispatcher.INVALID,
+  Status.ActiveDispatcher.NOT_LOGGED_IN,
+  Status.ActiveDispatcher.UNAVAILABLE,
+  Status.ActiveDispatcher.AFK,
+  Status.ActiveDispatcher.ENDING,
+  Status.ActiveDispatcher.NO_SPACE,
+  undefined
+];
+
+const filtersAssociations: Record<string, string> = {
+  mechaniczne: 'mechanical',
+  ręczne: 'manual',
+  'mechaniczne+SPK': 'SPK-M',
+  'ręczne+SPK': 'SPK-R',
+  'mechaniczne+SCS': 'SCS-M',
+  'ręczne+SCS': 'SCS-R',
+  współczesna: 'modern',
+  historyczna: 'historical',
+  kształtowa: 'semaphores',
+  mieszana: 'mixed'
+};
+
+function filterStatusSection(
+  filters: Record<string, any>,
+  { dispatcherStatus, dispatcherTimestamp }: ActiveScenery
+) {
+  return (
+    (filters['endingStatus'] && dispatcherStatus == Status.ActiveDispatcher.ENDING) ||
+    (filters['unavailableStatus'] &&
+      (dispatcherStatus == Status.ActiveDispatcher.UNAVAILABLE ||
+        dispatcherStatus == Status.ActiveDispatcher.NOT_LOGGED_IN)) ||
+    (filters['afkStatus'] && dispatcherStatus == Status.ActiveDispatcher.AFK) ||
+    (filters['noSpaceStatus'] && dispatcherStatus == Status.ActiveDispatcher.NO_SPACE) ||
+    (filters['occupied'] && dispatcherStatus != Status.ActiveDispatcher.FREE) ||
+    (filters['onlineFromHours'] > 0 &&
+      (dispatcherTimestamp ?? 0) <= Date.now() + filters['onlineFromHours'] * 3600000)
+  );
+}
+
+function filterTimetablesSection(filters: Record<string, any>, station: Station) {
+  return (
+    (filters['withoutActiveTimetables'] &&
+      (!station.onlineInfo || station.onlineInfo.scheduledTrainCount.all == 0)) ||
+    (filters['withActiveTimetables'] &&
+      station.onlineInfo &&
+      (station.onlineInfo.scheduledTrainCount.all != 0 ||
+        station.onlineInfo.dispatcherStatus == Status.ActiveDispatcher.FREE))
+  );
+}
+
+function filterAccessibilitySection(filters: Record<string, any>, station: Station) {
+  if (
+    filters['nonPublic'] &&
+    (!station.generalInfo || station.generalInfo.availability == 'nonPublic')
+  )
+    return true;
+
+  if (!station.generalInfo) return false;
+
+  const { availability } = station.generalInfo;
+
+  return (
+    (filters['unavailable'] && availability == 'unavailable' && !station.onlineInfo) ||
+    (filters['abandoned'] && availability == 'abandoned' && !station.onlineInfo) ||
+    (filters['default'] && availability == 'default') ||
+    (filters['notDefault'] &&
+      availability != 'default' &&
+      availability != 'abandoned' &&
+      availability != 'unavailable')
+  );
+}
+
+function filterRealitySection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  return (filters['real'] && generalInfo.lines) || (filters['fictional'] && !generalInfo.lines);
+}
+
+function filterProgramsSection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  return (
+    (filters['SUP'] && generalInfo.SUP) ||
+    (filters['noSUP'] && !generalInfo.SUP) ||
+    (filters['ASDEK'] && generalInfo.ASDEK) ||
+    (filters['noASDEK'] && !generalInfo.ASDEK)
+  );
+}
+
+function filterControlsSection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  return (
+    filters[generalInfo.controlType] == true ||
+    filters[filtersAssociations[generalInfo.controlType]] == true
+  );
+}
+
+function filterSignalsSection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  return (
+    filters[generalInfo.signalType] == true ||
+    filters[filtersAssociations[generalInfo.signalType]] == true ||
+    (filters['SBL'] && generalInfo.routes.sblNames.length > 0) ||
+    (filters['PBL'] && generalInfo.routes.sblNames.length == 0)
+  );
+}
+
+function filterStationType(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  const singleTracks = generalInfo.routes.single.filter((r) => !r.isInternal);
+  const doubleTracks = generalInfo.routes.double.filter((r) => !r.isInternal);
+
+  let isJunction = singleTracks.length > 0 && doubleTracks.length > 0;
+
+  return (filters['junction'] && isJunction) || (filters['nonJunction'] && !isJunction);
+}
+
+function filterSliderValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  const { availability, reqLevel, routes } = generalInfo;
+
+  const otherAvailability =
+    availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
+
+  return (
+    filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
+    filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
+    filters['minVmax'] > routes.maxRouteSpeed ||
+    filters['maxVmax'] < routes.minRouteSpeed ||
+    (filters['no-1track'] && routes.single.length != 0) ||
+    (filters['no-2track'] && routes.double.length != 0) ||
+    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
+    filters['minOneWay'] > routes.singleOtherNames.length ||
+    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
+    filters['minTwoWay'] > routes.doubleOtherNames.length
+  );
+}
+
+function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
+  return (
+    filters['authors'].length > 3 &&
+    !generalInfo.authors
+      ?.map((a) => a.toLocaleLowerCase())
+      .includes(filters['authors'].toLocaleLowerCase())
+  );
+}
+
+export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
+  let diff = 0;
+
+  switch (sorter.headerName) {
+    case 'station':
+      return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+
+    case 'min-lvl':
+      diff = (a.generalInfo?.reqLevel || 0) - (b.generalInfo?.reqLevel || 0);
+      break;
+
+    case 'status':
+      diff =
+        (a.onlineInfo?.dispatcherTimestamp ??
+          dispatcherStatusPriority.indexOf(a.onlineInfo?.dispatcherStatus)) -
+        (b.onlineInfo?.dispatcherTimestamp ??
+          dispatcherStatusPriority.indexOf(b.onlineInfo?.dispatcherStatus));
+      break;
+
+    case 'dispatcher':
+      if (
+        (a.onlineInfo?.dispatcherName.toLowerCase() || '') >
+        (b.onlineInfo?.dispatcherName.toLowerCase() || '')
+      )
+        return sorter.dir;
+      if (
+        (a.onlineInfo?.dispatcherName.toLowerCase() || '') <
+        (b.onlineInfo?.dispatcherName.toLowerCase() || '')
+      )
+        return -sorter.dir;
+      break;
+
+    case 'dispatcher-lvl':
+      diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
+      break;
+
+    case 'routes-single':
+      diff =
+        (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
+        (b.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
+      break;
+
+    case 'routes-double':
+      diff =
+        (a.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
+        (b.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
+      break;
+
+    case 'user':
+      diff =
+        (b.onlineInfo?.stationTrains ? b.onlineInfo.stationTrains.length : -1) -
+        (a.onlineInfo?.stationTrains ? a.onlineInfo.stationTrains.length : -1);
+      break;
+
+    case 'like':
+      diff =
+        (a.onlineInfo ? a.onlineInfo.dispatcherRate : -Infinity) -
+        (b.onlineInfo ? b.onlineInfo.dispatcherRate : -Infinity);
+      break;
+
+    case 'spawn':
+      diff =
+        (a.onlineInfo ? a.onlineInfo.spawns.length : -1) -
+        (b.onlineInfo ? b.onlineInfo.spawns.length : -1);
+      break;
+
+    case 'timetableConfirmed':
+      diff =
+        (a.onlineInfo?.scheduledTrainCount.confirmed ?? -1) -
+        (b.onlineInfo?.scheduledTrainCount.confirmed ?? -1);
+      break;
+
+    case 'timetableUnconfirmed':
+      diff =
+        (a.onlineInfo?.scheduledTrainCount.unconfirmed ?? -1) -
+        (b.onlineInfo?.scheduledTrainCount.unconfirmed ?? -1);
+      break;
+
+    case 'timetableAll':
+      diff =
+        (a.onlineInfo?.scheduledTrainCount.all ?? -1) -
+        (b.onlineInfo?.scheduledTrainCount.all ?? -1);
+      break;
+
+    default:
+      break;
+  }
+
+  if (diff != 0) return Math.sign(diff) * sorter.dir;
+  return a.name.localeCompare(b.name);
+};
+
+export const filterStations = (station: Station, filters: Record<string, any>) => {
+  if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
+    return false;
+
+  // Scenery Timetables section
+  if (filterTimetablesSection(filters, station)) return false;
+
+  // Scenery Accessibility section
+  if (filterAccessibilitySection(filters, station)) return false;
+
+  // Scenery Status section
+  if (station.onlineInfo && filterStatusSection(filters, station.onlineInfo)) return false;
+
+  if (station.generalInfo) {
+    // Scenery Reality section
+    if (filterRealitySection(filters, station.generalInfo)) return false;
+
+    // Scenery Additional Programs section
+    if (filterProgramsSection(filters, station.generalInfo)) return false;
+
+    // Scenery Controls section
+    if (filterControlsSection(filters, station.generalInfo)) return false;
+
+    // Scenery Signalling section(s)
+    if (filterSignalsSection(filters, station.generalInfo)) return false;
+
+    // Scenery Station Type section
+    if (filterStationType(filters, station.generalInfo)) return false;
+
+    // Scenery sliders
+    if (filterSliderValues(filters, station.generalInfo)) return false;
+
+    // Scenery Authors section
+    if (filterInputValues(filters, station.generalInfo)) return false;
+  }
+
+  return true;
+};

src/components/Tooltip/BaseTooltip.vue

@@ -1,28 +1,29 @@
 <template>
-  <div class="popup-content">
-    <span>{{ store.popUpData.content }}</span>
+  <div class="tooltip-content">
+    <span>{{ tooltipStore.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
+import { useTooltipStore } from '../../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      tooltipStore: useTooltipStore()
     };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.popup-content {
+.tooltip-content {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5em;
+  white-space: pre-line;
 
   padding: 0.25em 0.5em;
   border-radius: 0.25em;

src/components/Tooltip/DonatorTooltip.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="popup-content">
+  <div class="tooltip-content">
     <img src="/images/icon-diamond.svg" alt="" />
-    <span>{{ store.popUpData.content }}</span>
+    <span>{{ tooltipStore.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
+import { useTooltipStore } from '../../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      tooltipStore: useTooltipStore()
     };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.popup-content {
+.tooltip-content {
   gap: 0.5em;
 
   padding: 0.5em;

src/components/Tooltip/SpawnsTooltip.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="tooltip-content" v-if="spawns.length != 0">
+    <span v-for="(spawn, i) in spawns">
+      <template v-if="i > 0"> | </template>
+      <b>{{ spawn.spawnName }}</b> ({{ spawn.spawnLength }}m)
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { ScenerySpawn } from '../../typings/common';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  },
+
+  computed: {
+    spawns() {
+      if (this.tooltipStore.content == '') return [];
+
+      const parsedSpawns = JSON.parse(this.tooltipStore.content) as ScenerySpawn[];
+      return parsedSpawns ?? [];
+    }
+  }
+});
+</script>
+
+<style scoped>
+.tooltip-content {
+  width: 300px;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1b1b1b;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+</style>

src/components/Tooltip/Tooltip.vue

@@ -1,55 +1,55 @@
 <template>
-  <div class="popup" v-show="store.popUpData.key" ref="preview">
-    <component v-if="store.popUpData.key" :is="store.popUpData.key" />
+  <div class="tooltip" ref="preview">
+    <component v-if="tooltipStore.type" :is="tooltipStore.type" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import DonatorPopUp from './DonatorPopUp.vue';
-import TrainCommentsPopUp from './TrainCommentsPopUp.vue';
-import VehiclePreviewPopUp from './VehiclePreviewPopUp.vue';
-import { useMainStore } from '../../store/mainStore';
+import { useTooltipStore } from '../../store/tooltipStore';
+import DonatorTooltip from './DonatorTooltip.vue';
+import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
+import BaseTooltip from './BaseTooltip.vue';
+import SpawnsTooltip from './SpawnsTooltip.vue';
+import UsersTooltip from './UsersTooltip.vue';
 
 export default defineComponent({
-  components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
+  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
 
   data() {
     return {
-      store: useMainStore()
+      tooltipStore: useTooltipStore()
     };
   },
 
   watch: {
-    'store.mousePos': {
+    'tooltipStore.mousePos': {
       deep: true,
-      handler(val: typeof this.store.mousePos) {
+      // [x, y]
+      handler(val: [number, number]) {
         this.$nextTick(() => {
           const previewEl = this.$refs['preview'] as HTMLElement;
           const clientWidth = document.body.clientWidth;
           const boxWidth = previewEl.getBoundingClientRect().width;
 
-          let translateX = '0px',
+          let translateX = '0',
             translateY = '30px';
 
-          if (clientWidth < 500) {
-            previewEl.style.left = '50%';
-            translateX = '-50%';
-          } else if (val.x <= boxWidth / 2) {
+          if (val[0] <= boxWidth / 2) {
             previewEl.style.left = '0';
             translateX = '0px';
-          } else if (val.x >= clientWidth - boxWidth / 2) {
+          } else if (val[0] >= clientWidth - boxWidth / 2) {
             previewEl.style.left = '100%';
             translateX = '-100%';
           } else {
-            previewEl.style.left = `${val.x}px`;
+            previewEl.style.left = `${val[0]}px`;
             translateX = '-50%';
           }
 
-          previewEl.style.top = `${val.y}px`;
+          previewEl.style.top = `${val[1]}px`;
 
           const isOutside =
-            val.y + previewEl.getBoundingClientRect().height + 30 >=
+            val[1] + previewEl.getBoundingClientRect().height + 30 >=
             window.innerHeight + window.scrollY;
 
           if (isOutside) translateY = 'calc(-100% - 30px)';
@@ -62,7 +62,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.popup {
+.tooltip {
   position: absolute;
   z-index: 250;
   max-width: 400px;

src/components/Tooltip/UsersTooltip.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="tooltip-content" v-if="trains.length != 0">
+    <span v-for="(train, i) in trains">
+      <template v-if="i > 0"> | </template>
+      <b>{{ train.trainNo }}</b> {{ train.driverName }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { Train } from '../../typings/common';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  },
+
+  computed: {
+    trains() {
+      if (this.tooltipStore.content == '') return [];
+
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
+      return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.tooltip-content {
+  width: 300px;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1b1b1b;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+</style>

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="tooltip-content">
+    <div v-if="imageState == 'loading'" class="loading-info">
+      {{ $t('vehicle-preview.loading') }}
+    </div>
+
+    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
+
+    <img
+      v-if="tooltipStore.type"
+      @load="onImageLoad"
+      @error="onImageError"
+      width="300"
+      height="176"
+      class="rounded-md w-full h-auto"
+      :src="`https://static.spythere.eu/images/${vehicleName}--300px.jpg`"
+    />
+
+    <div v-if="imageState == 'error'" class="error-placeholder"></div>
+
+    <div class="vehicle-name">
+      {{ vehicleName.replace(/_/g, ' ') }}
+      <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
+    </div>
+
+    <div class="vehicle-props" v-if="vehicleData">
+      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
+      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
+      <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { useApiStore } from '../../store/apiStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore(),
+      apiStore: useApiStore(),
+      imageState: 'loading'
+    };
+  },
+
+  mounted() {
+    this.imageState = 'loading';
+  },
+
+  watch: {
+    vehicleName(prev, val) {
+      if (prev != val) this.imageState = 'loading';
+    }
+  },
+
+  methods: {
+    onImageLoad() {
+      this.imageState = 'loaded';
+    },
+
+    onImageError(e: Event) {
+      this.imageState = 'error';
+
+      (e.target as HTMLElement).style.display = 'none';
+    }
+  },
+
+  computed: {
+    vehicleName() {
+      return this.tooltipStore.content.split(':')[0];
+    },
+
+    vehicleData() {
+      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
+    },
+
+    vehicleCargo() {
+      return this.vehicleData?.group.cargoTypes?.find(
+        (c) => c.id == this.tooltipStore.content.split(':')[1]
+      );
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  width: 300px;
+  min-height: 200px;
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+
+  padding: 0.5em;
+  border-radius: 0.5em;
+}
+
+.loading-info {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+.vehicle-name {
+  text-align: center;
+  margin-top: 0.5em;
+  text-wrap: wrap;
+}
+
+.vehicle-props {
+  color: #ccc;
+}
+
+.error-placeholder {
+  height: 176px;
+}
+</style>

src/components/TrainsView/StopLabel.vue

@@ -1,20 +1,22 @@
 <template>
-  <span class="stop-label" :data-sbl="stop.isSBL">
-    <span class="name" v-html="stop.nameHtml"></span>
+  <span
+    class="stop-label"
+    :data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po') && !stop.duration)"
+  >
+    <router-link v-if="/(, podg$|<strong>)/.test(stop.nameHtml)" :to="sceneryHref">
+      <span class="name" v-html="stop.nameHtml"></span>
+    </router-link>
+
+    <span v-else class="name" v-html="stop.nameHtml"></span>
 
     <span
       v-if="stop.position != 'begin'"
       class="date arrival"
-      :data-status="
-        stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
-          ? 'delayed'
-          : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
-          ? 'preponed'
-          : stop.arrivalDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
-          : ''
-      "
+      :data-status-delayed="stop.arrivalDelay > 0"
+      :data-status-preponed="stop.arrivalDelay < 0"
+      :data-status="stop.status"
     >
+      p.
       <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
         <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
         {{ timestampToString(stop.arrivalReal) }}
@@ -27,19 +29,16 @@
     </span>
 
     <span
-      v-if="
-        stop.duration ||
-        (stop.status == 'stopped' &&
-          stop.position != 'begin' &&
-          stop.departureDelay != stop.arrivalDelay)
-      "
+      v-if="stop.duration"
       class="date stop"
       :data-stop-types="stop.type.replace(', ', '-')"
-      :data-stop-status="
-        stop.departureDelay - stop.arrivalDelay > 0 && !stop.duration ? 'delayed' : ''
-      "
+      :data-stop-status="stop.departureDelay > 0 && !stop.duration ? 'delayed' : ''"
     >
-      {{ stop.duration || stop.departureDelay - stop.arrivalDelay }}
+      {{
+        stop.duration == 0 && stop.departureDelay > 0
+          ? stop.departureDelay - stop.arrivalDelay
+          : stop.duration
+      }}
       {{ stop.type == '' ? 'pt' : stop.type }}
     </span>
 
@@ -49,16 +48,11 @@
         (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
       "
       class="date departure"
-      :data-status="
-        stop.departureDelay > 0 && stop.status == 'confirmed'
-          ? 'delayed'
-          : stop.departureDelay < 0 && stop.status == 'confirmed'
-          ? 'preponed'
-          : stop.departureDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
-          : ''
-      "
+      :data-status-delayed="stop.departureDelay > 0"
+      :data-status-preponed="stop.departureDelay < 0"
+      :data-status-confirmed="stop.status == 'confirmed'"
     >
+      o.
       <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
         <s>{{ timestampToString(stop.departureScheduled) }}</s>
         {{ timestampToString(stop.departureReal) }}
@@ -86,6 +80,12 @@ export default defineComponent({
       type: Object as PropType<TrainScheduleStop>,
       required: true
     }
+  },
+
+  computed: {
+    sceneryHref() {
+      return `/scenery?station=${this.stop.sceneryName}&checkpoint=${this.stop.nameRaw}`;
+    }
   }
 });
 </script>
@@ -96,27 +96,20 @@ $delayedClr: salmon;
 $dateClr: #525151;
 $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
-$stopNameClr: #22a8d1;
+$stopNameClr: #303030;
+
+s {
+  color: #ccc;
+}
 
 .stop-label {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 
-  &[data-sbl='true'] {
-    .date {
-      display: none;
-    }
-
-    .name {
-      background: none;
-      color: #aaa;
-      padding: 0;
-    }
-  }
-
   .name {
     background: $stopNameClr;
+    border-radius: 0.5em 0 0 0.5em;
     padding: 0.3em 0.5em;
 
     display: flex;
@@ -130,6 +123,22 @@ $stopNameClr: #22a8d1;
   .date {
     background: $dateClr;
     padding: 0.3em 0.5em;
+
+    &:last-child {
+      border-radius: 0 0.5em 0.5em 0;
+    }
+  }
+
+  &[data-minor='true'] {
+    .date {
+      display: none;
+    }
+
+    .name {
+      background: none;
+      color: #aaa;
+      padding: 0;
+    }
   }
 
   .stop {
@@ -145,27 +154,48 @@ $stopNameClr: #22a8d1;
       color: $delayedClr;
     }
   }
+}
 
-  .arrival,
-  .departure {
-    &[data-status='delayed'] {
-      s {
-        color: #999;
-      }
+.stop-label > a {
+  z-index: 0;
+}
 
-      span {
-        color: $delayedClr;
-      }
+.stop .arrival {
+  &[data-status='confirmed'][data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
     }
+  }
 
-    &[data-status='preponed'] {
-      s {
-        color: #999;
-      }
+  &[data-status='confirmed'][data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
+    }
+  }
 
-      span {
-        color: $preponedClr;
-      }
+  &[data-status='stopped'][data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
+    }
+  }
+
+  &[data-status='stopped'][data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
+    }
+  }
+}
+
+.stop .departure[data-status-confirmed='true'] {
+  &[data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
+    }
+  }
+
+  &[data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
     }
   }
 }

src/components/TrainsView/TrainInfo.vue

@@ -2,51 +2,43 @@
   <div class="train-info" :data-extended="extended">
     <section class="train-general">
       <div class="general-top-bar">
-        <div>
+        <div class="top-bar-header">
           <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
           <span class="timetable-id" v-if="train.timetableData">
             #{{ train.timetableData.timetableId }}
           </span>
 
-          <span
-            class="timetable-warnings"
-            v-if="train.timetableData?.TWR || train.timetableData?.SKR"
-          >
-            <span
-              class="train-badge twr"
-              v-if="train.timetableData?.TWR"
-              :title="$t('general.TWR')"
-            >
-              TWR
-            </span>
-            <span
-              class="train-badge skr"
-              v-if="train.timetableData?.SKR"
-              :title="$t('general.SKR')"
-            >
-              SKR
-            </span>
+          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
+            TWR
+          </span>
+
+          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
+            SKR
           </span>
 
-          <strong>
-            <span v-if="train.timetableData" class="text--primary"
-              >{{ train.timetableData.category }}&nbsp;</span
-            >
-            <span class="train-number">{{ train.trainNo }}</span>
-          </strong>
-          <span>&bull;</span>
           <b
-            class="level-badge driver"
-            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
+            v-if="train.timetableData"
+            data-tooltip-type="BaseTooltip"
+            :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
+            class="text--primary tooltip-help"
           >
-            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
+            {{ train.timetableData.category }}
           </b>
+          <b class="train-number">{{ train.trainNo }}</b>
+          <span>&bull;</span>
 
           <div class="train-driver">
+            <b
+              class="level-badge driver"
+              :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
+            >
+              {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
+            </b>
+
             <b
               v-if="apiStore.donatorsData.includes(train.driverName)"
-              data-popup-key="DonatorPopUp"
-              :data-popup-content="$t('donations.driver-message')"
+              data-tooltip-type="DonatorTooltip"
+              :data-tooltip-content="$t('donations.driver-message')"
             >
               {{ train.driverName }}
               <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
@@ -55,27 +47,14 @@
             <span v-else>{{ train.driverName }}</span>
           </div>
         </div>
-
-        <div v-if="extended">
-          <button class="btn-timetable btn--image btn--action" @click="navigateToJournal">
-            <img src="/images/icon-train.svg" alt="train icon" />
-            <span>
-              {{ $t('trains.journal-button') }}
-            </span>
-          </button>
-
-          <button class="btn-exit btn--image btn--action" @click="closeModal">
-            <img src="/images/icon-exit.svg" alt="modal exit icon" />
-          </button>
-        </div>
       </div>
 
       <div class="general-timetable" v-if="train.timetableData">
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
         <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-popup-key="TrainCommentsPopUp"
-          :data-popup-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
             train.timetableData
           )})`"
         >
@@ -88,7 +67,7 @@
       <div class="general-stops" v-if="train.timetableData">
         <span v-if="train.timetableData.followingStops.length > 2">
           {{ $t('trains.via-title') }}
-          <span v-html="displayStopList(train.timetableData.followingStops)"></span>
+          <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
         </span>
       </div>
 
@@ -97,21 +76,22 @@
           <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
           <span class="progress-distance">
-            &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
-            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-            |
+            <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
+            <span>/</span>
+            <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
+            <span>|</span>
             <span v-html="currentDelay(train.timetableData.followingStops)"></span>
           </span>
         </div>
 
         <div class="status-badges">
           <div v-if="!train.currentStationHash" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="" />
+            <img src="/images/icon-offline.svg" alt="offline train icon" />
             {{ $t('trains.scenery-offline') }}
           </div>
 
           <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="" />
+            <img src="/images/icon-offline.svg" alt="offline train icon" />
             Offline {{ lastSeenMessage(train.lastSeen) }}
           </div>
         </div>
@@ -131,6 +111,18 @@
         <div>
           <img src="/images/icon-speed.svg" alt="speed icon" />
           {{ train.speed }} km/h
+
+          <span v-if="stockSpeedLimit != Infinity">
+            &bull;
+            <em
+              class="text--grayed"
+              style="text-decoration: underline dotted"
+              tabindex="0"
+              :data-tooltip="$t('trains.vmax-tooltip')"
+            >
+              {{ stockSpeedLimit }} km/h
+            </em>
+          </span>
         </div>
       </div>
 
@@ -163,15 +155,15 @@
 import { defineComponent } from 'vue';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
-import Train from '../../scripts/interfaces/Train';
 import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
+import { Train } from '../../typings/common';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
+  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
   components: { ProgressBar, StockList },
 
   props: {
@@ -191,16 +183,23 @@ export default defineComponent({
     };
   },
 
-  methods: {
-    navigateToJournal() {
-      this.$router.push({
+  computed: {
+    stockSpeedLimit() {
+      return this.train.stockList.reduce((acc, stockName) => {
+        const vehicleSpeed =
+          this.apiStore.vehiclesData?.find((v) => v.name == stockName.split(':')[0])?.group.speed ??
+          300;
+
+        return Math.min(vehicleSpeed, acc);
+      }, 300);
+    },
+    journalRouteLocation() {
+      return {
         path: '/journal/timetables',
         query: {
           'search-driver': this.train.driverName
         }
-      });
-
-      this.closeModal();
+      }
     }
   }
 });
@@ -242,6 +241,12 @@ export default defineComponent({
   gap: 0.5em;
 }
 
+.train-driver {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
 .train-driver img {
   max-height: 20px;
   vertical-align: text-bottom;
@@ -273,24 +278,15 @@ export default defineComponent({
 .general-top-bar {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
   gap: 0.5em;
-
-  & > div {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    gap: 0.25em;
-  }
 }
 
-.btn-timetable {
-  padding: 0.25em;
-}
+.top-bar-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 
-.btn-exit {
-  padding: 0.25em;
+  gap: 0.25em;
 }
 
 .general-status {
@@ -337,10 +333,14 @@ export default defineComponent({
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: 0.5em;
+  padding: 0.5em 0;
 }
 
 .progress-distance {
-  margin-right: 0.25em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
 }
 
 .timetable-warnings {
@@ -353,9 +353,5 @@ export default defineComponent({
     grid-template-columns: 1fr;
     gap: 1em 0;
   }
-
-  .btn-timetable > span {
-    display: none;
-  }
 }
 </style>

src/components/TrainsView/TrainModal.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal_background" @click="closeModal"></div>
-    <div class="modal_content" ref="content" tabindex="0">
-      <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
-      <TrainSchedule :train="chosenTrain" tabindex="0" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import TrainInfo from './TrainInfo.vue';
-import TrainSchedule from './TrainSchedule.vue';
-import Train from '../../scripts/interfaces/Train';
-
-export default defineComponent({
-  components: { TrainInfo, TrainSchedule },
-  mixins: [modalTrainMixin],
-
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
-    }
-  },
-
-  watch: {
-    chosenTrain(train: Train | undefined) {
-      this.$nextTick(() => {
-        if (train) {
-          const contentEl = this.$refs['content'] as HTMLElement;
-          contentEl.focus();
-        }
-      });
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/card.scss';
-
-.top-info-bar-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-  }
-}
-
-.train-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-
-  color: white;
-  z-index: 200;
-
-  display: flex;
-  justify-content: center;
-
-  text-align: left;
-}
-
-.modal_background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.modal_content {
-  position: relative;
-  overflow-y: scroll;
-
-  margin-top: 1em;
-
-  width: 95vw;
-  max-height: 96vh;
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #0e0e0e;
-}
-
-@include midScreen {
-  .exit {
-    margin: 0.5em;
-
-    img {
-      width: 1.75rem;
-    }
-  }
-}
-
-@include smallScreen {
-  .modal_content {
-    max-height: 85vh;
-  }
-}
-</style>

src/components/TrainsView/TrainOptions.vue

@@ -4,7 +4,7 @@
 
     <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
       <img src="/images/icon-filter2.svg" alt="Open filters icon" />
-      {{ $t('options.filters') }} [F]
+      [F] {{ $t('options.filters') }}
       <span class="active-indicator" v-if="currentOptionsActive"></span>
     </button>
 
@@ -15,12 +15,14 @@
           <div class="search_content">
             <div class="search-box">
               <input
+                v-model="searchedTrain"
                 class="search-input"
                 ref="initFocusedElement"
+                id="train-search"
+                name="train-search"
                 @focus="preventKeyDown = true"
                 @blur="preventKeyDown = false"
                 :placeholder="$t(`options.search-train`)"
-                v-model="searchedTrain"
               />
               <button class="search-exit">
                 <img
@@ -33,11 +35,13 @@
 
             <div class="search-box">
               <input
+                v-model="searchedDriver"
                 class="search-input"
+                id="driver-search"
+                name="driver-search"
                 @focus="preventKeyDown = true"
                 @blur="preventKeyDown = false"
                 :placeholder="$t(`options.search-driver`)"
-                v-model="searchedDriver"
               />
               <button class="search-exit">
                 <img
@@ -81,7 +85,6 @@
           </div>
 
           <div class="filter-actions">
-            <div></div>
             <button class="btn--action" @click="resetAllFilters">
               {{ $t('options.filter-reset') }}
             </button>
@@ -223,9 +226,6 @@ export default defineComponent({
 
 .filter-actions {
   display: flex;
-  gap: 0.5em;
-  width: 100%;
-
   margin-top: 1em;
 
   > * {

src/components/TrainsView/TrainSchedule.vue

@@ -14,7 +14,6 @@
           :data-stop-type="stop.type"
           :data-minor-stop-active="stop.isActive"
           :data-last-confirmed="stop.isLastConfirmed"
-          x
         >
           <span class="stop_info">
             <span class="distance">
@@ -48,26 +47,46 @@
               <span
                 v-if="
                   stop.departureLine &&
-                  stop.departureLine == scheduleStops[i + 1]?.arrivalLine &&
-                  !/sbl/gi.test(stop.departureLine)
+                  scheduleStops[i + 1] != undefined &&
+                  !/-|_|(^it\d+)|(^sbl)/gi.test(stop.departureLine)
                 "
               >
-                {{ stop.departureLine }}
-              </span>
-
-              <span v-else-if="stop.departureLine && !/sbl/gi.test(stop.departureLine)">
-                <div>{{ stop.departureLine }}</div>
-                <div
-                  class="scenery-change-name"
-                  v-if="
-                    i < scheduleStops.length - 1 &&
-                    stop.sceneryName != scheduleStops[i + 1].sceneryName
-                  "
-                >
-                  {{ scheduleStops[i + 1].sceneryName }}
+                <div class="scenery-route">
+                  <span>{{ stop.departureLine }}</span>
+                  <span v-if="stop.departureLineInfo">
+                    | {{ stop.departureLineInfo.routeSpeed }}
+                    <span v-if="stop.departureLineInfo.isElectric">⚡</span>
+                    <img
+                      v-else
+                      src="/images/icon-we4a.png"
+                      :title="$t('trains.we4a-tooltip')"
+                      width="10"
+                    />
+                  </span>
                 </div>
-                <div>
-                  {{ scheduleStops[i + 1].arrivalLine }}
+
+                <div
+                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  class="scenery-change-name"
+                >
+                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
+                  <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
+                  <span v-else> &UpArrowDownArrow;</span>
+                </div>
+
+                <div class="scenery-route">
+                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
+
+                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
+                    | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }}
+                    <span v-if="scheduleStops[i + 1].arrivalLineInfo!.isElectric">⚡</span>
+                    <img
+                      v-else
+                      src="/images/icon-we4a.png"
+                      :title="$t('trains.we4a-tooltip')"
+                      width="10"
+                    />
+                  </span>
                 </div>
               </span>
             </div>
@@ -81,11 +100,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import Train from '../../scripts/interfaces/Train';
 import StopLabel from './StopLabel.vue';
 import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
+import { StationRoutesInfo, Train } from '../../typings/common';
 
 export interface TrainScheduleStop {
   nameHtml: string;
@@ -111,12 +130,16 @@ export interface TrainScheduleStop {
   isSBL: boolean;
 
   sceneryName: string | null;
-  sceneryHash: string;
   distance: number;
 
   arrivalLine: string | null;
   departureLine: string | null;
 
+  arrivalLineInfo?: StationRoutesInfo;
+  departureLineInfo?: StationRoutesInfo;
+
+  isExternal: boolean;
+
   comments: string | null;
 }
 
@@ -142,17 +165,29 @@ export default defineComponent({
 
   computed: {
     scheduleStops(): TrainScheduleStop[] {
-      let currentSceneryIndex = 0;
+      if (!this.train.timetableData) return [];
+
+      const { timetablePath } = this.train.timetableData;
+      let currentPathIndex = 0;
 
       return (
         this.train.timetableData?.followingStops.map((stop, i, arr) => {
-          if (
-            i > 0 &&
-            stop.arrivalLine &&
-            stop.arrivalLine != arr[i - 1].departureLine &&
-            !/sbl/gi.test(stop.arrivalLine)
-          )
-            currentSceneryIndex++;
+          const isExternal =
+            i < arr.length - 1 &&
+            stop.departureLine === timetablePath[currentPathIndex].departureRouteExt;
+
+          const sceneryName = timetablePath[currentPathIndex].stationName;
+          const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
+
+          const arrivalLineInfo = sceneryInfo?.routesInfo.find(
+            (r) => r.routeName == stop.arrivalLine
+          );
+
+          const departureLineInfo = sceneryInfo?.routesInfo.find(
+            (r) => r.routeName == stop.departureLine
+          );
+
+          if (isExternal) currentPathIndex++;
 
           return {
             nameHtml: stop.stopName,
@@ -174,14 +209,18 @@ export default defineComponent({
             arrivalLine: stop.arrivalLine,
             departureLine: stop.departureLine,
 
+            arrivalLineInfo: arrivalLineInfo,
+            departureLineInfo: departureLineInfo,
+
+            isExternal,
+
             type: stop.stopType,
             distance: stop.stopDistance,
             isActive: this.activeMinorStops.includes(i),
             isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
             isSBL: /sbl/gi.test(stop.stopName),
             position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
-            sceneryHash: '',
-            sceneryName: this.train.timetableData!.sceneryNames[currentSceneryIndex],
+            sceneryName,
             status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
           };
         }) ?? []
@@ -210,7 +249,7 @@ export default defineComponent({
         i < this.train.timetableData!.followingStops.length;
         i++
       ) {
-        if (/po\.|sbl/gi.test(this.train.timetableData!.followingStops[i].stopNameRAW))
+        if (/(, po$|sbl|, pe$)/gi.test(this.train.timetableData!.followingStops[i].stopNameRAW))
           activeMinorStopList.push(i);
         else break;
       }
@@ -247,7 +286,7 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 }
 
 .train-schedule {
-  padding: 0 1em;
+  padding: 1em;
 }
 
 .schedule-wrapper {
@@ -483,22 +522,35 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
   }
 }
 
-.bottom-line-info {
-  .scenery-change-name {
-    position: relative;
-    margin: 0.25em 0;
+.scenery-route {
+  display: flex;
+  gap: 0.25em;
 
-    &::before {
-      content: '';
-      position: absolute;
-      height: 2px;
-      width: 30px;
-      background-color: #aaa;
+  span:nth-child(2) {
+    display: flex;
+    gap: 0.25em;
+    align-items: center;
+  }
 
-      top: 50%;
-      right: calc(100% + 5px);
-      transform: translate(0, -50%);
-    }
+  img {
+    width: 1em;
+  }
+}
+
+.scenery-change-name {
+  position: relative;
+  margin: 0.25em 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    height: 2px;
+    width: 30px;
+    background-color: #aaa;
+
+    top: 50%;
+    right: calc(100% + 5px);
+    transform: translate(0, -50%);
   }
 }
 </style>

src/components/TrainsView/TrainStats.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="dropdown" @keydown.esc="showOptions = false" @focusout="showOptions = false">
+  <div
+    class="dropdown"
+    @keydown.esc="showOptions = false"
+    v-click-outside="() => (showOptions = false)"
+  >
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
     <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
@@ -19,21 +23,21 @@
         <div v-if="apiStore.dataStatuses.connection == Status.Loaded && regionTrains.length > 0">
           <div class="top-list general">
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" key="timetable-count">
+              <li class="badge stat-badge" key="timetable-count">
                 <span>{{ $t('train-stats.timetable-count') }}</span>
                 <span>
                   <b>{{ regionTrainsWithTT.length }}</b>
                 </span>
               </li>
 
-              <li class="badge" key="avg-speed">
+              <li class="badge stat-badge" key="avg-speed">
                 <span>{{ $t('train-stats.avg-speed') }}</span>
                 <span>
                   <b>{{ stats.avgSpeed.toFixed(1) }} km/h</b>
                 </span>
               </li>
 
-              <li class="badge" key="avg-distance">
+              <li class="badge stat-badge" key="avg-distance">
                 <span>{{ $t('train-stats.avg-timetable') }}</span>
                 <span>
                   <b>{{ stats.avgDistance.toFixed(1) }} km</b>
@@ -46,7 +50,7 @@
             <h3>{{ $t('train-stats.top-categories') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topCategories" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topCategories" :key="top.name">
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -61,7 +65,7 @@
             <h3>{{ $t('train-stats.top-vehicles') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topVehicles" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topVehicles" :key="top.name">
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -76,7 +80,7 @@
             <h3>{{ $t('train-stats.top-units') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -95,6 +99,8 @@
         <div class="no-data" v-else>
           {{ $t('train-stats.no-stats') }}
         </div>
+
+        <div tabindex="0" @focus="() => (showOptions = false)"></div>
       </div>
     </transition>
   </div>
@@ -236,43 +242,12 @@ h3 {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
-
-  // @include smallScreen {
-  //   justify-content: center;
-  // }
-}
-
-.badge {
-  margin: 0;
-
-  & > span:first-child {
-    background-color: $accentCol;
-    color: black;
-  }
 }
 
 .dropdown_wrapper {
   max-width: 600px;
 }
 
-.stats-anim {
-  &-move,
-  &-enter-active,
-  &-leave-active {
-    transition: all 250ms ease;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(5px);
-  }
-
-  &-leave-active {
-    position: absolute;
-  }
-}
-
 @include smallScreen {
   h1,
   .no-data {

src/components/TrainsView/TrainTable.vue

@@ -8,19 +8,19 @@
       <Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
 
       <div class="table-warning" key="no-trains" v-else-if="trains.length == 0">
-        {{ $t('trains.no-trains') }}
+        {{ $t('trains.no-trains') }} (region: <b>{{ store.region.name }}</b
+        >)
       </div>
 
       <transition-group name="list-anim" tag="ul">
         <li
           class="train-row"
           v-for="train in trains"
-          :key="train.trainId"
-          tabindex="0"
-          @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
-          @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+          :key="train.id"
         >
-          <TrainInfo :train="train" :extended="false" />
+          <router-link class="a-block" :to="train.driverRouteLocation">
+            <TrainInfo :train="train" :extended="false" />
+          </router-link>
         </li>
       </transition-group>
     </div>
@@ -29,12 +29,10 @@
 
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import Train from '../../scripts/interfaces/Train';
 import { useMainStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import TrainInfo from './TrainInfo.vue';
-import { Status } from '../../typings/common';
+import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
@@ -47,8 +45,6 @@ export default defineComponent({
     }
   },
 
-  mixins: [modalTrainMixin],
-
   setup() {
     const store = useMainStore();
     const apiStore = useApiStore();
@@ -77,17 +73,6 @@ export default defineComponent({
 
       return Status.Data.Loaded;
     }
-  },
-
-  activated() {
-    const query = this.$route.query;
-    if (query.trainNo && query.driverName) {
-      this.searchedDriver = query.driverName.toString();
-      this.searchedTrain = query.trainNo.toString();
-      setTimeout(() => {
-        this.selectModalTrain(query.driverName! + query.trainNo!.toString());
-      }, 20);
-    }
   }
 });
 </script>
@@ -109,8 +94,7 @@ export default defineComponent({
   text-align: center;
 
   padding: 1em 0;
-
-  font-size: 1.5em;
+  font-size: 1.25em;
 
   background: #1a1a1a;
 }
@@ -119,7 +103,5 @@ li.train-row {
   background-color: var(--clr-secondary);
   margin-bottom: 1em;
   width: 100%;
-
-  cursor: pointer;
 }
 </style>

src/data/options.json

@@ -1,330 +1,4 @@
 {
-  "optionSections": [
-    "status",
-    "timetables",
-    "reality",
-    "package-access",
-    "access",
-    "control",
-    "blockades",
-    "signals",
-    "addons"
-  ],
-
-  "options": [
-    {
-      "id": "real",
-      "name": "real",
-      "section": "reality",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "fictional",
-      "name": "fictional",
-      "section": "reality",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "default",
-      "name": "default",
-      "section": "package-access",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "not-default",
-      "name": "notDefault",
-      "section": "package-access",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "non-public",
-      "name": "nonPublic",
-      "section": "access",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "unavailable",
-      "name": "unavailable",
-      "section": "access",
-      "value": false,
-      "defaultValue": false
-    },
-    {
-      "id": "abandoned",
-      "name": "abandoned",
-      "section": "access",
-      "value": false,
-      "defaultValue": false
-    },
-    {
-      "id": "SPK",
-      "name": "SPK",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SCS",
-      "name": "SCS",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SPE",
-      "name": "SPE",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-
-    {
-      "id": "SPK-M",
-      "name": "mechaniczne+SPK",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SCS-M",
-      "name": "mechaniczne+SCS",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "mechanical",
-      "name": "mechaniczne",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SPK-R",
-      "name": "ręczne+SPK",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SCS-R",
-      "name": "ręczne+SCS",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "manual",
-      "name": "ręczne",
-      "section": "control",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SUP",
-      "name": "SUP",
-      "section": "addons",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "noSUP",
-      "name": "noSUP",
-      "section": "addons",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "ASDEK",
-      "name": "ASDEK",
-      "section": "addons",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "noASDEK",
-      "name": "noASDEK",
-      "section": "addons",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "SBL",
-      "name": "SBL",
-      "section": "blockades",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "PBL",
-      "name": "PBL",
-      "section": "blockades",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "modern",
-      "name": "współczesna",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "semaphores",
-      "name": "kształtowa",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "mixed",
-      "name": "mieszana",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "historical",
-      "name": "historyczna",
-      "section": "signals",
-      "value": true,
-      "defaultValue": true
-    },
-
-    {
-      "id": "free",
-      "name": "free",
-
-      "section": "status",
-      "value": false,
-      "defaultValue": false
-    },
-    {
-      "id": "occupied",
-      "name": "occupied",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "endingStatus",
-      "name": "endingStatus",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "afkStatus",
-      "name": "afkStatus",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "noSpaceStatus",
-      "name": "noSpaceStatus",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "unavailableStatus",
-      "name": "unavailableStatus",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "withActiveTimetables",
-      "name": "withActiveTimetables",
-      "section": "timetables",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "withoutActiveTimetables",
-      "name": "withoutActiveTimetables",
-      "section": "timetables",
-      "value": true,
-      "defaultValue": true
-    }
-  ],
-  "sliders": [
-    {
-      "id": "min-lvl",
-      "name": "minLevel",
-      "minRange": 0,
-      "maxRange": 20,
-      "value": 0,
-      "defaultValue": 0
-    },
-    {
-      "id": "max-lvl",
-      "name": "maxLevel",
-      "minRange": 0,
-      "maxRange": 20,
-      "value": 20,
-      "defaultValue": 20
-    },
-    {
-      "id": "routes-1t-cat",
-      "name": "minOneWayCatenary",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0
-    },
-    {
-      "id": "routes-1t-other",
-      "name": "minOneWay",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0
-    },
-    {
-      "id": "routes-2t-cat",
-      "name": "minTwoWayCatenary",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0
-    },
-    {
-      "id": "routes-2t-other",
-      "name": "minTwoWay",
-      "minRange": 0,
-      "maxRange": 5,
-      "value": 0,
-      "defaultValue": 0
-    }
-  ],
-  "modes": [
-    {
-      "id": "include-selected",
-      "name": "include-selected",
-      "section": "mode",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "save",
-      "name": "save",
-      "section": "mode",
-      "value": true,
-      "defaultValue": true
-    }
-  ],
   "regions": [
     {
       "id": "eu",

src/locales/en.json

@@ -27,11 +27,11 @@
     "SKR": "Train with exceeded gauge"
   },
   "update": {
-    "title": "Stacjownik app update!",
-    "version": "Version {0}",
-    "confirm-button": "UPDATE NOW",
-    "later-button": "LATER",
-    "content": "context tooltips when hovering over project sponsors and timetable comment warnings\nvehicle image preview when hovering over its thumbnail in the active timetable card view and timetable journal\nlink to the driver's timetable history in the active timetable card view\nlink to the driver's active timetable card view in the timetable journal (available for online trains only)\nnew update card with version changelog"
+    "title": "Stacjownik update!",
+    "confirm": "ROGER THAT!",
+    "no-data": "No data about the latest app update has been found",
+    "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
+    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
   },
   "app": {
     "sceneries": "SCENERIES",
@@ -48,7 +48,48 @@
   "footer": {
     "discord": "Stacjownik Discord server"
   },
+  "categories": {
+    "EI": "domestic express",
+    "EC": "international express",
+    "EN": "domestic night express",
 
+    "MP": "intervoivodeship bullet",
+    "MO": "intervoivodeship regio",
+    "MM": "international bullet",
+    "MH": "intervoivodeship night bullet",
+
+    "RP": "voivodeship bullet",
+    "RM": "international voivodeship regio",
+    "RO": "voivodeship regio",
+    "RA": "voivodeship regio (urban)",
+
+    "PW": "empty passenger",
+    "PX": "empty passenger test drive",
+
+    "TC": "international freight (intermodal)",
+    "TG": "international freight (organized cargo)",
+    "TR": "international freight (unorganized cargo)",
+    "TD": "domestic freight (intermodal)",
+    "TM": "domestic freight (organized cargo)",
+    "TN": "domestic freight (unorganized cargo)",
+    "TK": "freight (for stations & sidings)",
+    "TS": "empty freight test drive",
+    "TH": "locomotive rolling stock (over 3 vehicles)",
+
+    "LT": "freight locomotive only",
+    "LP": "passenger locomotive only",
+    "LS": "shunting locomotive only",
+    "LZ": "shunting locomotive only",
+
+    "ZN": "inspection / diagnostic type",
+    "ZU": "other maintenance type",
+    "ZG": "emergency (deprecated category)",
+
+    "E": "electric loco",
+    "J": "EMU",
+    "S": "diesel loco",
+    "M": "DMU"
+  },
   "vehicle-preview": {
     "loading": "Loading preview...",
     "error": "Oops! The vehicle preview seems to be missing! :/"
@@ -81,7 +122,20 @@
     "ręczne+SCS": "manual + SCS",
     "mechaniczne": "levers (mechanical)",
     "mechaniczne+SPK": "levers + SPK",
-    "mechaniczne+SCS": "levers + SCS"
+    "mechaniczne+SCS": "levers + SCS",
+
+    "abbrevs": {
+      "SPK": "SPK",
+      "SCS": "SCS",
+      "SCS-SPK": "S/S",
+      "SPE": "SPE",
+      "ręczne": "R",
+      "ręczne+SPK": "R",
+      "ręczne+SCS": "R",
+      "mechaniczne": "M",
+      "mechaniczne+SPK": "M",
+      "mechaniczne+SCS": "M"
+    }
   },
   "status": {
     "online": "UNTIL ",
@@ -99,8 +153,8 @@
     "filters": "FILTERS",
     "donate": "DONATE",
 
-    "search-button": "Search",
-    "reset-button": "Reset",
+    "search-button": "SEARCH",
+    "reset-button": "RESET",
 
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",
@@ -110,9 +164,11 @@
     "search-train": "Train no.",
     "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
-    "search-station": "Scenery name",
+    "search-station": "Scenery name / #",
     "search-author": "Timetable author name",
-    "search-issuedFrom": "Origin scenery name",
+    "search-issuedFrom": "Issuing scenery name",
+    "search-via": "Via scenery name",
+    "search-terminatingAt": "Terminating scenery name",
     "search-timetables-date": "Timetable date (UTC+2 / CEST)",
     "search-dispatchers-date": "Service date (UTC+2 / CEST)",
     "search-date": "Date (UTC+2 / CEST)",
@@ -161,17 +217,22 @@
 
     "sections": {
       "quick": "QUICK FILTERS",
+      "stationType": "STATION TYPE",
       "reality": "SCENERY REALITY",
-      "package-access": "IN-GAME AVAILABILITY",
+      "packageAccess": "IN-GAME AVAILABILITY",
       "access": "GENERAL AVAILABILITY",
       "control": "CONTROLS",
       "signals": "SIGNALLING",
       "addons": "ADDITIONAL PROGRAMS",
       "blockades": "BLOCK SIGNALLING",
       "status": "ONLINE STATUS",
-      "timetables": "ACTIVE TIMETABLES"
+      "timetables": "ACTIVE TIMETABLES",
+      "spawns": "OPEN SPAWNS"
     },
 
+    "changed-filters-count": "Changed filters:",
+    "no-changed-filters": "No changed filters",
+
     "all-available": "ALL AVAILABLE",
     "all-free": "CURRENTLY FREE",
 
@@ -182,11 +243,11 @@
 
     "title": "STATION FILTERS",
     "default": "IN-GAME",
-    "not-default": "ADDITIONAL",
+    "notDefault": "ADDITIONAL",
     "real": "REAL",
     "fictional": "FICTIONAL",
     "unavailable": "UNSUPPORTED",
-    "non-public": "NON-PUBLIC",
+    "nonPublic": "NON-PUBLIC",
     "abandoned": "ABANDONED",
 
     "SPK": "SPK",
@@ -196,7 +257,6 @@
     "SCS-R": "SCS + MANUAL",
     "SCS-M": "SCS + MECH.",
     "SPE": "SPE",
-
     "manual": "MANUAL",
     "mechanical": "MECHANICAL",
 
@@ -219,17 +279,25 @@
     "withActiveTimetables": "ACTIVE",
     "withoutActiveTimetables": "NO ACTIVE",
 
+    "junction": "JUNCTIONS",
+    "nonJunction": "OTHER",
+
     "sliders": {
-      "min-lvl": "MIN. REQUIRED DISPATCHER LEVEL",
-      "max-lvl": "MAX. REQUIRED DISPATCHER LEVEL",
-      "routes-1t-cat": "MIN. CATENARY SINGLE TRACK ROUTES",
-      "routes-1t-other": "MIN. OTHER SINGLE TRACK ROUTES",
-      "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
+      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
+      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
+      "minVmax": "MIN. SCENERY ROUTE SPEED",
+      "maxVmax": "MAX. SCENERY ROUTE SPEED",
+      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
+      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
+      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
+      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES"
     },
+
+    "sceneries-search": "SCENERY SEARCH:",
+    "sceneries-placeholder": "Enter scenery name...",
     "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
     "authors-placeholder": "Enter the author nickname...",
-    "authors-button-title": "Search",
+    "search-button-title": "SEARCH",
 
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
@@ -277,7 +345,17 @@
       "single-track-routes-other": "Not electrified single-track routes count:  "
     },
     "no-stations": "No stations to show here!",
-    "scenery-search": "Search for scenery..."
+    "scenery-search": "Search for scenery...",
+    "active-filters": "Attention! You got active filters!"
+  },
+  "station-stats": {
+    "u-factor": "U-factor",
+    "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
+    "avg-timetable-count": "Average count of scenery timetables:",
+    "single-track-count": "Single track routes:",
+    "double-track-count": "Double track routes:",
+    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
+    "open-spawns": "Open spawns:"
   },
   "trains": {
     "no-trains": "No trains to show here!",
@@ -296,6 +374,9 @@
     "current-signal": "at signal",
     "current-track": "on track",
 
+    "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
+    "we4a-tooltip": "Non-electrified track",
+
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",
     "on-time": "On time",
@@ -322,7 +403,14 @@
     "scenery-offline": "Offline ride",
     "timeout": "An error occured while trying to refresh SWDR timetable data!",
 
-    "journal-button": "DRIVER'S JOURNAL"
+    "driver-journal-link": "DRIVER JOURNAL",
+    "driver-return-link": "GO BACK",
+
+    "driver-not-found-header": "Train not found! :/",
+    "driver-not-found-desc-1": "This train has already been terminated or it's offline.",
+    "driver-not-found-desc-2": "You can browse timetable history in the",
+    "driver-not-found-journal": "TIMETABLES JOURNAL",
+    "driver-not-found-return": "GO BACK TO THE MAIN SITE"
   },
   "train-stats": {
     "stats-button": "STATISTICS",
@@ -367,7 +455,7 @@
     "minutes": "{value} min | {value} mins",
     "seconds": "{value} s",
 
-    "stock-info": "EXTRA INFO",
+    "stock-info": "DETAILS",
     "stock-length": "Length",
     "stock-mass": "Mass",
     "stock-max-speed": "Max. speed",
@@ -458,28 +546,23 @@
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
 
-    "timetable-author-title": "Issued by",
-    "timetable-author-unknown": "Author unknown",
+    "timetable-via": "ALL TIMETABLES",
+    "timetable-issuedFrom": "BEGINS HERE",
+    "timetable-terminatingAt": "TERMINATES HERE",
 
-    "timetables-history-id": "ID",
-    "timetables-history-number": "Number",
-    "timetables-history-route": "Route",
-    "timetables-history-driver": "Driver",
-    "timetables-history-author": "TT author",
-    "timetables-history-date": "Date",
+    "timetable-issued-date": "Issued",
+    "timetable-issued-by": " by:",
+    "timetable-issued-for": " for driver:",
 
-    "dispatchers-history-hash": "Hash",
-    "dispatchers-history-dispatcher": "Dispatcher",
-    "dispatchers-history-level": "Level",
-    "dispatchers-history-rate": "Rate",
-    "dispatchers-history-date": "Service date",
+    "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!",
 
     "forum-topic": "Official {name} forum topic",
 
-    "pragotron-link": "Timetable pallet board (beta)",
+    "pragotron-link": "Timetable pallet board",
     "tablice-link": "Timetable summary board (by Thundo)",
 
     "bottom-info": "Show full history in the Journal tab"

src/locales/pl.json

@@ -28,10 +28,10 @@
   },
   "update": {
     "title": "Aktualizacja Stacjownika!",
-    "version": "Wersja {0}",
-    "confirm-button": "UPDATE NOW",
-    "later-button": "LATER",
-    "content": "dymki kontekstowe po najechaniu kursorem na m.in. sponsorów projektu i uwagi eksploatacyjne\npodgląd pojazdu po najechaniu kursorem na jego miniaturkę w karcie aktywnego rozkładu jazdy oraz dzienniku RJ\nodnośnik do historii RJ maszynisty w widoku karty aktywnego rozkładu jazdy\nodnośnik do karty aktywnego rozkładu jazdy maszynisty w dzienniku (dostępny tylko dla pociągów online)\nnowa karta ze zmianami w aktualizacji"
+    "confirm": "PRZYJĄŁEM!",
+    "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
+    "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
+    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
   },
   "app": {
     "sceneries": "SCENERIE",
@@ -45,6 +45,48 @@
   "footer": {
     "discord": "Serwer Discord Stacjownika"
   },
+  "categories": {
+    "EI": "ekspres krajowy",
+    "EC": "ekspres międzynarodowy",
+    "EN": "ekspres krajowy nocny",
+
+    "MP": "międzywojewódzki pospieszny",
+    "MO": "międzywojewódzki osobowy",
+    "MM": "międzynarodowy pospieszny",
+    "MH": "międzywojewódzki pospieszny (nocny)",
+
+    "RP": "wojewódzki pospieszny",
+    "RO": "wojewódzki osobowy",
+    "RM": "wojewódzki osobowy międzynarodowy",
+    "RA": "wojewódzki osobowy algomeracyjny",
+
+    "PW": "pasażerski próżny - służbowy",
+    "PX": "pasażerski próżny próbny",
+
+    "TC": "towarowy międzynarodowy intermodalny",
+    "TG": "towarowy międzynarodowy masowy",
+    "TR": "towarowy międzynarodowy niemasowy",
+    "TD": "towarowy krajowy intermodalny",
+    "TM": "towarowy krajowy masowy",
+    "TN": "towarowy krajowy niemasowy",
+    "TK": "towarowy zdawczy",
+    "TS": "towarowy próżny próbny",
+    "TH": "skład lokomotyw (powyżej 3 pojazdów)",
+
+    "LT": "lokomotywa towarowa luzem",
+    "LP": "lokomotywa pasażerska luzem",
+    "LS": "lokomotywa manewrowa luzem",
+    "LZ": "lokomotywa dla poc. utrzymaniowo-naprawczych",
+
+    "ZN": "inspekcyjny / diagnostyczny",
+    "ZU": "inny utrzymaniowy",
+    "ZG": "ratunkowy (kat. wycofana)",
+
+    "E": "elektrowóz",
+    "J": "EZT",
+    "S": "spalinowóz",
+    "M": "SZT"
+  },
   "vehicle-preview": {
     "loading": "Ładowanie podglądu...",
     "error": "Ups! Nie znaleziono podglądu pojazdu! :/"
@@ -77,7 +119,20 @@
     "ręczne+SCS": "ręczne z SCS",
     "mechaniczne": "mechaniczne",
     "mechaniczne+SPK": "mechaniczne z SPK",
-    "mechaniczne+SCS": "mechaniczne z SCS"
+    "mechaniczne+SCS": "mechaniczne z SCS",
+
+    "abbrevs": {
+      "SPK": "SPK",
+      "SCS": "SCS",
+      "SCS-SPK": "S/S",
+      "SPE": "SPE",
+      "ręczne": "R",
+      "ręczne+SPK": "R",
+      "ręczne+SCS": "R",
+      "mechaniczne": "M",
+      "mechaniczne+SPK": "M",
+      "mechaniczne+SCS": "M"
+    }
   },
   "status": {
     "online": "DO ",
@@ -95,8 +150,8 @@
     "filters": "FILTRY",
     "donate": "WESPRZYJ",
 
-    "search-button": "Szukaj",
-    "reset-button": "Zresetuj",
+    "search-button": "SZUKAJ",
+    "reset-button": "ZRESETUJ",
 
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
@@ -106,9 +161,11 @@
     "search-train": "Nr pociągu / #",
     "search-driver": "Nick maszynisty",
     "search-dispatcher": "Nick dyżurnego",
-    "search-station": "Nazwa scenerii",
+    "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",
     "search-issuedFrom": "Sceneria początkowa",
+    "search-via": "Przez scenerię",
+    "search-terminatingAt": "Sceneria końcowa",
     "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
     "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
     "search-date": "Data (UTC+2 / CEST)",
@@ -158,17 +215,22 @@
 
     "sections": {
       "quick": "SZYBKIE FILTRY",
+      "stationType": "RODZAJ STACJI",
       "reality": "FIKCYJNOŚĆ SCENERII",
-      "package-access": "DOSTĘPNOŚĆ W PACZCE",
+      "packageAccess": "DOSTĘPNOŚĆ W PACZCE",
       "access": "DOSTĘPNOŚĆ OGÓLNA",
       "control": "TYP STEROWANIA",
       "signals": "TYP SYGNALIZACJI",
-      "addons": "DODATKOWE PROGRAMY",
+      "addons": "SZCZEGÓŁY",
       "blockades": "BLOKADY LINIOWE",
       "status": "STATUS ONLINE",
-      "timetables": "AKTYWNE ROZKŁADY JAZDY"
+      "timetables": "AKTYWNE ROZKŁADY JAZDY",
+      "spawns": "OTWARTE SPAWNY"
     },
 
+    "changed-filters-count": "Zmienione filtry:",
+    "no-changed-filters": "Brak zmienionych filtrów",
+
     "all-available": "WSZYSTKIE DOSTĘPNE",
     "all-free": "WSZYSTKIE WOLNE",
 
@@ -179,11 +241,11 @@
 
     "title": "FILTRUJ STACJE",
     "default": "DOMYŚLNA",
-    "not-default": "POZA PACZKĄ",
+    "notDefault": "POZA PACZKĄ",
     "real": "REALNA",
     "fictional": "FIKCYJNA",
     "unavailable": "NIEDOSTĘPNA",
-    "non-public": "NIEPUBLICZNA",
+    "nonPublic": "NIEPUBLICZNA",
     "abandoned": "WYCOFANA",
 
     "SPK": "SPK",
@@ -209,25 +271,31 @@
     "semaphores": "KSZTAŁTOWA",
     "mixed": "MIESZANA",
     "historical": "HISTORYCZNA",
-
     "free": "WOLNA",
     "occupied": "ZAJĘTA",
 
     "withActiveTimetables": "AKTYWNE",
     "withoutActiveTimetables": "BEZ AKTYWNYCH",
 
+    "junction": "WĘZŁOWE",
+    "nonJunction": "INNE",
+
     "sliders": {
-      "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
-      "max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
-      "routes-1t-cat": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
-      "routes-1t-other": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
-      "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
+      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
+      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
+      "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
+      "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
+      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
+      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
+      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
+      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     },
 
-    "authors-search": "SZUKAJ AUTORA (uwzględnia inne filtry):",
+    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
+    "sceneries-placeholder": "Wpisz nazwę scenerii...",
+    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
     "authors-placeholder": "Wpisz nick autora...",
-    "authors-button-title": "Szukaj",
+    "search-button-title": "SZUKAJ",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
     "hour": " godz.",
@@ -272,7 +340,17 @@
       "single-track-routes-other": "Liczba niezelektryfikowanych szlaków jednotorowych: "
     },
     "no-stations": "Brak stacji do wyświetlenia!",
-    "scenery-search": "Wyszukaj scenerię..."
+    "scenery-search": "Wyszukaj scenerię...",
+    "active-filters": "Uwaga! Masz obecnie aktywne filtry!"
+  },
+  "station-stats": {
+    "u-factor": "Współczynnik Ugla",
+    "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
+    "avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
+    "single-track-count": "Szlaki jednotorowe:",
+    "double-track-count": "Szlaki dwutorowe:",
+    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
+    "open-spawns": "Otwarte spawny:"
   },
   "trains": {
     "no-trains": "Brak pociągów do wyświetlenia!",
@@ -283,6 +361,9 @@
     "current-signal": "przy semaforze",
     "current-track": "na szlaku",
 
+    "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
+    "we4a-tooltip": "Szlak niezelektryfikowany",
+
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",
     "on-time": "Planowo",
@@ -308,7 +389,14 @@
 
     "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
 
-    "journal-button": "DZIENNIK MASZYNISTY"
+    "driver-journal-link": "DZIENNIK MASZYNISTY",
+    "driver-return-link": "POWRÓT",
+
+    "driver-not-found-header": "Nie znaleziono pociągu! :/",
+    "driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg lub jest offline.",
+    "driver-not-found-desc-2": "Historię rozkładów jazdy możesz przejrzeć w",
+    "driver-not-found-journal": "DZIENNIKU RJ",
+    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -352,7 +440,7 @@
     "timetable-abandoned": "PORZUCONY",
     "timetable-online-button": "RJ ONLINE",
 
-    "stock-info": "DODATKOWE INFORMACJE",
+    "stock-info": "SZCZEGÓŁY",
     "stock-length": "Długość",
     "stock-mass": "Masa",
     "stock-max-speed": "Prędkość maks.",
@@ -442,28 +530,23 @@
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
 
-    "timetable-author-title": "Wydany przez",
-    "timetable-author-unknown": "Autor nieznany",
+    "timetable-via": "WSZYSTKIE RJ",
+    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
+    "timetable-terminatingAt": "KOŃCZY BIEG",
 
-    "timetables-history-id": "ID",
-    "timetables-history-number": "Numer",
-    "timetables-history-route": "Trasa",
-    "timetables-history-driver": "Maszynista",
-    "timetables-history-author": "Autor RJ",
-    "timetables-history-date": "Data",
+    "timetable-issued-date": "Wystawiony",
+    "timetable-issued-by": " przez:",
+    "timetable-issued-for": " dla maszynisty:",
 
-    "dispatchers-history-hash": "Hash",
-    "dispatchers-history-dispatcher": "Dyżurny",
-    "dispatchers-history-level": "Poziom",
-    "dispatchers-history-rate": "Ocena",
-    "dispatchers-history-date": "Data służby",
+    "dispatcher-rate": "Ocena:",
+    "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}",
 
-    "pragotron-link": "Paletowa tablica informacyjna (beta)",
+    "pragotron-link": "Paletowa tablica informacyjna",
     "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
 
     "bottom-info": "Pokaż pełną historię w zakładce Dziennika"

src/main.ts

@@ -5,10 +5,15 @@ import router from './router';
 import i18n from './i18n';
 
 import { createPinia } from 'pinia';
-import useCustomSW from './mixins/useCustomSW';
+import { registerSW } from 'virtual:pwa-register';
 
 // Service worker
-useCustomSW();
+registerSW({
+  immediate: true,
+  onNeedRefresh() {
+    console.log('Needs refresh!');
+  }
+});
 
 const clickOutsideDirective: Directive = {
   mounted(el, binding) {

src/managers/stationFilterManager.ts

@@ -0,0 +1,119 @@
+import StorageManager from './storageManager';
+
+export const sections = [
+  'status',
+  'timetables',
+  'reality',
+  'packageAccess',
+  'stationType',
+  'access',
+  'control',
+  'blockades',
+  'signals',
+  'addons'
+] as const;
+
+export const initFilters = {
+  default: false,
+  notDefault: false,
+  real: false,
+  fictional: false,
+  SPK: false,
+  SCS: false,
+  SPE: false,
+  SUP: false,
+  noSUP: false,
+  ASDEK: false,
+  noASDEK: false,
+  manual: false,
+  'SPK-R': false,
+  'SCS-R': false,
+  mechanical: false,
+  'SPK-M': false,
+  'SCS-M': false,
+  modern: false,
+  semaphores: false,
+  historical: false,
+  mixed: false,
+  SBL: false,
+  PBL: false,
+  'include-selected': false,
+  'no-1track': false,
+  'no-2track': false,
+  free: true,
+  occupied: false,
+  nonPublic: false,
+  unavailable: true,
+  abandoned: true,
+  afkStatus: false,
+  endingStatus: false,
+  noSpaceStatus: false,
+  unavailableStatus: false,
+  unsignedStatus: false,
+  withActiveTimetables: false,
+  withoutActiveTimetables: false,
+  junction: false,
+  nonJunction: false,
+  maxVmax: 200,
+  minVmax: 0,
+  onlineFromHours: 0,
+  minLevel: 0,
+  maxLevel: 20,
+  minOneWayCatenary: 0,
+  minOneWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWay: 0,
+  authors: ''
+};
+
+export const initSliders = [
+  { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
+  { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
+  { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
+  { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
+  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 }
+];
+
+export type StationFilter = keyof typeof initFilters;
+export type StationFilterSection = (typeof sections)[number];
+
+export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
+  status: ['free', 'occupied', 'endingStatus', 'afkStatus', 'noSpaceStatus', 'unavailableStatus'],
+  timetables: ['withActiveTimetables', 'withoutActiveTimetables'],
+  reality: ['real', 'fictional'],
+  packageAccess: ['default', 'notDefault'],
+  stationType: ['junction', 'nonJunction'],
+  access: ['nonPublic', 'unavailable', 'abandoned'],
+  addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
+  control: ['SPK', 'SCS', 'SPE', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'],
+  blockades: ['SBL', 'PBL'],
+  signals: ['modern', 'semaphores', 'mixed', 'historical']
+};
+
+export function setupFilters(currentFilters: Record<string, any>) {
+  if (!StorageManager.isRegistered('options_saved')) return;
+
+  Object.keys(currentFilters).forEach((filterKey) => {
+    const savedValue = StorageManager.getValue(filterKey);
+
+    if (savedValue != null) {
+      if (typeof currentFilters[filterKey] == 'boolean')
+        currentFilters[filterKey] = savedValue === 'true';
+      else if (typeof currentFilters[filterKey] == 'number')
+        currentFilters[filterKey] = Number(savedValue);
+      else currentFilters[filterKey] = savedValue.toString();
+    }
+  });
+}
+
+export function getChangedFilters(currentFilters: Record<string, any>): string[] {
+  return (
+    Object.keys(currentFilters).filter(
+      (filterKey) =>
+        currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
+    ) ?? []
+  );
+}

src/managers/storageManager.ts

@@ -34,6 +34,10 @@ export default class StorageManager {
     window.localStorage.removeItem(key);
   }
 
+  static getValue(key: string) {
+    return window.localStorage.getItem(key);
+  }
+
   static getBooleanValue(key: string): boolean {
     return window.localStorage.getItem(key) === 'true' ? true : false;
   }

src/managers/trainFilterManager.ts

@@ -1,6 +1,5 @@
 import { TrainFilter, TrainFilterId } from '../components/TrainsView/typings';
-import Train from '../scripts/interfaces/Train';
-import { TrainStop } from '../store/typings';
+import { Train, TrainStop } from '../typings/common';
 
 function confirmedPercentage(stops: TrainStop[] | undefined) {
   if (!stops) return -1;

src/mixins/donatorMixin.ts

@@ -1,16 +0,0 @@
-import { defineComponent } from 'vue';
-import { useApiStore } from '../store/apiStore';
-
-export default defineComponent({
-  data() {
-    return {
-      apiStore: useApiStore()
-    };
-  },
-
-  methods: {
-    isDonator(name: string) {
-      return this.apiStore.donatorsData.includes(name);
-    }
-  }
-});

src/mixins/listObserverMixin.ts

@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  data: () => ({
-    observer: null as IntersectionObserver | null,
-    observerTarget: null as Element | null
-  }),
-
-  methods: {
-    mountObserver(actionFunction: () => void, target: Element) {
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].intersectionRatio > 0.5) actionFunction();
-        },
-        { threshold: 0.2 }
-      );
-
-      this.observer.observe(target);
-    },
-
-    unmountObserver() {
-      if (!this.observerTarget) return;
-
-      this.observer?.unobserve(this.observerTarget);
-    }
-  }
-});

src/mixins/modalTrainMixin.ts

@@ -1,28 +0,0 @@
-import { defineComponent } from 'vue';
-import { useMainStore } from '../store/mainStore';
-
-export default defineComponent({
-  data() {
-    return {
-      store: useMainStore()
-    };
-  },
-
-  methods: {
-    selectModalTrain(trainId: string, target?: EventTarget | null) {
-      this.store.chosenModalTrainId = trainId;
-      document.body.classList.add('no-scroll');
-      if (target) this.store.modalLastClickedTarget = target;
-    },
-
-    closeModal() {
-      this.store.chosenModalTrainId = undefined;
-      this.store.popUpData.key = null;
-
-      setTimeout(() => {
-        (this.store.modalLastClickedTarget as any)?.focus();
-        document.body.classList.remove('no-scroll');
-      }, 150);
-    }
-  }
-});

src/mixins/popupMixin.ts

@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue';
-import { useMainStore } from '../store/mainStore';
-import { PopUpType, popupKeys } from '../store/typings';
-
-const isPopUp = (v: any): v is PopUpType => popupKeys.includes(v);
-
-export default defineComponent({
-  data() {
-    return {
-      store: useMainStore()
-    };
-  },
-
-  methods: {
-    showPopUp(e: MouseEvent, componentKey: string, value?: string) {
-      if (!isPopUp(componentKey)) return;
-
-      this.store.popUpData['key'] = componentKey;
-      this.store.popUpData['content'] = value ?? '';
-    },
-
-    hidePopUp() {
-      this.store.popUpData['key'] = null;
-      this.store.popUpData['content'] = '';
-    }
-  }
-});

src/mixins/stationInfoMixin.ts

@@ -1,24 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    getControlTypeAbbrev(controlType: string) {
-      switch (controlType) {
-        case 'mechaniczne':
-          return 'M';
-        case 'SCS-SPK':
-          return 'S/S';
-        case 'ręczne':
-          return 'R';
-        case 'mechaniczne+SPK':
-          return 'M';
-        case 'ręczne+SPK':
-          return 'R';
-        case 'mechaniczne+SCS':
-          return 'M';
-        default:
-          return controlType;
-      }
-    }
-  }
-});

src/mixins/trainCategoryMixin.ts

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    getCategoryExplanation(categoryCode: string) {
+      const categoryKey = categoryCode.slice(0, 2);
+      const vehicleTypeKey = categoryCode.slice(-1);
+
+      return `${this.$t('categories.' + categoryKey)}\n(${this.$t('categories.' + vehicleTypeKey)})`;
+    }
+  }
+});

src/mixins/trainInfoMixin.ts

@@ -1,6 +1,5 @@
 import { defineComponent } from 'vue';
-import Train from '../scripts/interfaces/Train';
-import { TrainStop } from '../store/typings';
+import { Train, TrainStop } from '../typings/common';
 
 export default defineComponent({
   data: () => ({
@@ -51,8 +50,8 @@ export default defineComponent({
       return diffMins < 1
         ? this.$t('trains.last-seen-now')
         : diffMins < 2
-        ? this.$t('trains.last-seen-min')
-        : this.$t('trains.last-seen-ago', { minutes: diffMins });
+          ? this.$t('trains.last-seen-min')
+          : this.$t('trains.last-seen-ago', { minutes: diffMins });
     },
 
     displayTrainPosition(train: Train) {
@@ -76,18 +75,18 @@ export default defineComponent({
       return positionString.charAt(0).toUpperCase() + positionString.slice(1);
     },
 
-    displayStopList(stops: TrainStop[]): string | undefined {
+    getTrainStopsHtml(stops: TrainStop[]): string {
       if (!stops) return '';
 
       return stops
         .reduce((acc: string[], stop: TrainStop, i: number) => {
-          if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.'))
+          if (stop.stopType.includes('ph'))
             acc.push(
               `<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${
                 stop.stopName
               }</strong>`
             );
-          else if (i > 0 && i < stops.length - 1 && !/po\.|sbl/gi.test(stop.stopNameRAW))
+          else if (i > 0 && i < stops.length - 1 && !/(, po$|sbl)/gi.test(stop.stopNameRAW))
             acc.push(
               `<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${
                 stop.stopName
@@ -109,16 +108,19 @@ export default defineComponent({
     },
 
     currentDelay(stops: TrainStop[]) {
-      const delay =
-        stops.find(
-          (stop, i) =>
-            (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed)
-        )?.departureDelay || 0;
+      const lastConfirmedStop = stops.find(
+        (stop, i) =>
+          (i == 0 && !stop.confirmed) ||
+          (i > 0 && stops[i - 1].confirmed && !stop.confirmed) ||
+          (stops[i + 1] == undefined && stop.confirmed)
+      );
 
-      if (delay > 0)
-        return `<span style='color: salmon'>${this.$t('trains.delayed')} ${delay} min</span>`;
-      else if (delay < 0)
-        return `<span style='color: lightgreen'>${this.$t('trains.preponed')} ${delay} min</span>`;
+      const lastDelay = lastConfirmedStop?.departureDelay ?? lastConfirmedStop?.arrivalDelay ?? 0;
+
+      if (lastDelay > 0)
+        return `<span style='color: salmon'>${this.$t('trains.delayed')} ${lastDelay} min</span>`;
+      else if (lastDelay < 0)
+        return `<span style='color: lightgreen'>${this.$t('trains.preponed')} ${lastDelay} min</span>`;
       else return this.$t('trains.on-time');
     },
 

src/mixins/useCustomSW.ts

@@ -1,13 +0,0 @@
-import { useRegisterSW } from 'virtual:pwa-register/vue';
-
-export default () => {
-  const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
-    immediate: true
-  });
-
-  return {
-    needRefresh,
-    updateServiceWorker,
-    offlineReady
-  };
-};

src/router/index.ts

@@ -20,6 +20,15 @@ const routes: Array<RouteRecordRaw> = [
       region: route.query.region
     })
   },
+  {
+    path: '/driver',
+    name: 'DriverView',
+    component: () => import('../views/DriverView.vue'),
+    props: (route) => ({
+      trainId: route.query.trainId,
+      modalId: route.query.modalId
+    })
+  },
   {
     path: '/scenery',
     name: 'SceneryView',
@@ -57,8 +66,12 @@ const routes: Array<RouteRecordRaw> = [
 
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
-    if (to.name == 'SceneryView' && from.name !== to.name && from.query['view'] === undefined)
-      return { el: `.app_main` };
+    if (
+      (to.name == 'SceneryView' || to.name == 'DriverView') &&
+      from.name !== to.name &&
+      from.query['view'] === undefined
+    )
+      return { el: `.app_main`, top: -15 };
 
     if (savedPosition) return savedPosition;
   },
@@ -66,4 +79,10 @@ const router = createRouter({
   routes
 });
 
+router.beforeEach((to, from, next) => {
+  next((vm) => {
+    (vm as any)['xd'] = 'xd';
+  });
+});
+
 export default router;

src/scripts/data/stationHeaderNames.ts

@@ -1,21 +0,0 @@
-export const headIds = [
-  'station',
-  'min-lvl',
-  'status',
-  'dispatcher',
-  'dispatcher-lvl',
-  'routes-single',
-  'routes-double',
-  'general'
-] as const;
-
-export const headIconsIds = [
-  'user',
-  'like',
-  'spawn',
-  'timetableAll',
-  'timetableUnconfirmed',
-  'timetableConfirmed'
-] as const;
-
-export type HeadIdsTypes = (typeof headIds)[number] | (typeof headIconsIds)[number];

src/scripts/interfaces/Station.ts

@@ -1,34 +0,0 @@
-import { Availability, ActiveScenery } from '../../store/typings';
-import { StationRoutes } from './StationRoutes';
-
-export default interface Station {
-  name: string;
-
-  generalInfo?: {
-    name: string;
-    url: string;
-    abbr: string;
-    hash?: string;
-
-    reqLevel: number;
-    // supportersOnly: boolean;
-
-    lines: string;
-    project: string;
-    projectUrl?: string;
-
-    signalType: string;
-    controlType: string;
-
-    SUP: boolean;
-    ASDEK: boolean;
-    authors?: string[];
-
-    availability: Availability;
-    routes: StationRoutes;
-
-    checkpoints: string[];
-  };
-
-  onlineInfo?: ActiveScenery;
-}