Merge pull request #90 from Spythere/development

v1.24.2

.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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.20.5",
+  "version": "1.24.2",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -14,11 +14,9 @@
   "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"
@@ -26,7 +24,8 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/node": "^20.6.2",
-    "@vite-pwa/assets-generator": "^0.0.10",
+    "@types/showdown": "^2.0.6",
+    "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -37,7 +36,7 @@
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-pwa": "^0.16.5",
+    "vite-plugin-pwa": "^0.20.0",
     "vue-tsc": "^1.8.11"
   },
   "browserslist": [

public/images/icon-ASDEK.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="60" fill="#898989"/>
+<path d="M10.5573 31.3793L9.43741 28.0694C9.35445 27.8592 9.26596 27.6131 9.17195 27.3311C9.07793 27.0435 8.98391 26.7338 8.8899 26.402C8.80694 26.7393 8.71845 27.0518 8.62444 27.3394C8.53042 27.6269 8.44193 27.8758 8.35898 28.086L7.24736 31.3793H10.5573ZM15.0121 36H12.8386C12.5953 36 12.3989 35.9447 12.2496 35.8341C12.1003 35.7179 11.9869 35.5714 11.9095 35.3944L11.1961 33.2873H6.6003L5.88688 35.3944C5.82604 35.5493 5.71544 35.6903 5.55505 35.8175C5.4002 35.9392 5.20664 36 4.97436 36H2.78431L7.46305 23.9133H10.3333L15.0121 36ZM22.643 26.3688C22.5601 26.5015 22.4716 26.6011 22.3775 26.6674C22.2891 26.7338 22.1729 26.767 22.0291 26.767C21.9019 26.767 21.7637 26.7283 21.6143 26.6508C21.4706 26.5679 21.3046 26.4766 21.1166 26.3771C20.9341 26.2775 20.724 26.189 20.4861 26.1116C20.2483 26.0287 19.9773 25.9872 19.6732 25.9872C19.1478 25.9872 18.7551 26.1006 18.4952 26.3273C18.2408 26.5485 18.1136 26.8499 18.1136 27.2315C18.1136 27.4749 18.191 27.6767 18.3459 27.8371C18.5007 27.9975 18.7026 28.1357 18.9515 28.2519C19.2059 28.368 19.4934 28.4759 19.8142 28.5754C20.1405 28.6694 20.4723 28.7773 20.8097 28.8989C21.147 29.0151 21.4761 29.1533 21.7969 29.3137C22.1231 29.4741 22.4107 29.6787 22.6596 29.9276C22.914 30.1765 23.1186 30.4806 23.2735 30.8401C23.4283 31.1941 23.5058 31.6227 23.5058 32.1259C23.5058 32.6845 23.409 33.2071 23.2154 33.6938C23.0218 34.1805 22.7398 34.6063 22.3693 34.9713C22.0042 35.3308 21.5508 35.6156 21.0088 35.8258C20.4723 36.0304 19.8612 36.1327 19.1754 36.1327C18.7994 36.1327 18.415 36.094 18.0223 36.0166C17.6352 35.9392 17.2591 35.8313 16.8941 35.6931C16.5291 35.5493 16.1862 35.3806 15.8655 35.187C15.5447 34.9935 15.2654 34.7778 15.0276 34.54L15.8572 33.2293C15.9235 33.1352 16.0093 33.0578 16.1143 32.997C16.225 32.9306 16.3439 32.8974 16.4711 32.8974C16.637 32.8974 16.8029 32.95 16.9688 33.0551C17.1402 33.1601 17.331 33.2763 17.5412 33.4035C17.7569 33.5307 18.003 33.6468 18.2795 33.7519C18.556 33.857 18.8823 33.9095 19.2584 33.9095C19.7672 33.9095 20.1626 33.7989 20.4447 33.5777C20.7267 33.3509 20.8677 32.9942 20.8677 32.5075C20.8677 32.2255 20.7903 31.996 20.6355 31.819C20.4806 31.642 20.276 31.4955 20.0216 31.3793C19.7727 31.2632 19.4879 31.1609 19.1671 31.0724C18.8464 30.9839 18.5173 30.8871 18.18 30.7821C17.8426 30.6714 17.5135 30.5387 17.1928 30.3839C16.872 30.2235 16.5844 30.0161 16.33 29.7617C16.0812 29.5018 15.8793 29.181 15.7245 28.7994C15.5696 28.4123 15.4922 27.9367 15.4922 27.3725C15.4922 26.9191 15.5834 26.4766 15.7659 26.0452C15.9484 25.6139 16.2167 25.2295 16.5706 24.8922C16.9246 24.5548 17.3587 24.2866 17.873 24.0875C18.3874 23.8829 18.9763 23.7805 19.64 23.7805C20.0105 23.7805 20.37 23.811 20.7184 23.8718C21.0724 23.9271 21.407 24.0128 21.7222 24.129C22.0374 24.2396 22.3305 24.3751 22.6015 24.5354C22.8781 24.6903 23.1242 24.8673 23.3398 25.0664L22.643 26.3688ZM36.1186 29.9525C36.1186 30.8263 35.9665 31.6337 35.6623 32.3748C35.3637 33.1104 34.9406 33.7491 34.3931 34.2911C33.8456 34.8276 33.1847 35.2479 32.4105 35.552C31.6417 35.8507 30.7873 36 29.8471 36H25.1518V23.9133H29.8471C30.7873 23.9133 31.6417 24.0654 32.4105 24.3695C33.1847 24.6737 33.8456 25.094 34.3931 25.6305C34.9406 26.1669 35.3637 26.8057 35.6623 27.5468C35.9665 28.2823 36.1186 29.0842 36.1186 29.9525ZM33.2483 29.9525C33.2483 29.3552 33.1709 28.816 33.016 28.3348C32.8612 27.8537 32.6372 27.4472 32.3441 27.1154C32.0565 26.778 31.7026 26.5209 31.2823 26.3439C30.8619 26.1614 30.3836 26.0701 29.8471 26.0701H27.9723V33.8431H29.8471C30.3836 33.8431 30.8619 33.7547 31.2823 33.5777C31.7026 33.3952 32.0565 33.138 32.3441 32.8062C32.6372 32.4688 32.8612 32.0596 33.016 31.5784C33.1709 31.0973 33.2483 30.5553 33.2483 29.9525ZM40.594 26.0701V28.8906H44.3934V30.9646H40.594V33.8431H45.5547V36H37.7735V23.9133H45.5547V26.0701H40.594ZM50.0882 28.8077H50.5361C50.9509 28.8077 51.2496 28.6777 51.4321 28.4178L54.153 24.4691C54.3134 24.2589 54.4849 24.1151 54.6674 24.0377C54.8554 23.9547 55.0877 23.9133 55.3642 23.9133H57.8031L54.2194 28.7994C53.965 29.1368 53.6912 29.3801 53.3981 29.5294C53.6083 29.6068 53.7991 29.7147 53.9705 29.8529C54.142 29.9912 54.3024 30.1709 54.4517 30.3922L58.1018 36H55.5965C55.4361 36 55.2978 35.9889 55.1817 35.9668C55.0711 35.9447 54.9743 35.9115 54.8913 35.8673C54.8084 35.823 54.7365 35.7705 54.6757 35.7097C54.6148 35.6433 54.5568 35.5686 54.5015 35.4857L51.7639 31.2798C51.6643 31.1249 51.5371 31.0171 51.3823 30.9563C51.233 30.8899 51.0284 30.8567 50.7684 30.8567H50.0882V36H47.2843V23.9133H50.0882V28.8077Z" fill="white"/>
+</svg>

src/App.scss

@@ -1,71 +0,0 @@
-@import './styles/responsive.scss';
-@import './styles/variables.scss';
-@import './styles/global.scss';
-@import './styles/animations.scss';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
-
-// APP
-#app {
-  color: white;
-  font-size: 1rem;
-  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.8vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
-}
-
-// CONTAINER
-.app_container {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 100%;
-
-  min-height: 100vh;
-}
-
-.app_main {
-  padding: 0 0.5em;
-}
-
-.warning {
-  background-color: firebrick;
-  text-align: center;
-  padding: 0.5em 0.4em;
-  max-width: 1100px;
-  margin: 0 auto;
-
-  border-radius: 0 0 1em 1em;
-}
-
-// FOOTER
-footer.app_footer {
-  max-width: 100%;
-  padding: 0.5em;
-
-  img {
-    width: 1.1em;
-    vertical-align: text-bottom;
-  }
-
-  z-index: 10;
-
-  background: #111;
-  color: white;
-
-  text-align: center;
-  vertical-align: middle;
-}

src/App.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="app_container">
+    <UpdateCard
+      :is-update-card-open="isUpdateCardOpen"
+      @toggle-card="() => (isUpdateCardOpen = false)"
+    />
+
+    <Tooltip />
+
     <transition name="modal-anim">
       <keep-alive>
-        <TrainModal v-if="store.chosenModalTrainId" />
+        <TrainModal />
       </keep-alive>
     </transition>
 
@@ -20,7 +27,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>
@@ -32,38 +42,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch } from 'vue';
+import { defineComponent } from 'vue';
 import axios from 'axios';
-import packageInfo from '.././package.json';
+
+import { version } from '.././package.json';
+import { Status } from './typings/common';
+import { useMainStore } from './store/mainStore';
+import { useApiStore } from './store/apiStore';
+import { useTooltipStore } from './store/tooltipStore';
 
 import Clock from './components/App/Clock.vue';
-
-import { useMainStore } from './store/mainStore';
-
 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 { useApiStore } from './store/apiStore';
-import { Status } from './typings/common';
+
+const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     AppHeader,
-    TrainModal
+    TrainModal,
+    UpdateCard,
+    Tooltip
   },
 
   data: () => ({
-    VERSION: packageInfo.version,
+    VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
+    tooltipStore: useTooltipStore(),
+
+    isUpdateCardOpen: false,
 
     currentLang: 'pl',
-    releaseURL: '',
-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
+    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
+
+    nextUpdateTime: 0
   }),
 
   created() {
@@ -71,22 +91,52 @@ export default defineComponent({
   },
 
   async mounted() {
-    watch(
-      () => this.store.blockScroll,
-      (value) => {
-        if (value) document.body.classList.add('no-scroll');
-        else document.body.classList.remove('no-scroll');
-      }
-    );
+    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
   },
 
   methods: {
     init() {
       this.loadLang();
-      this.setReleaseURL();
       this.setupOfflineHandling();
+      this.checkAppVersion();
 
       this.apiStore.setupAPIData();
+      window.requestAnimationFrame(this.update);
+
+      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
+    },
+
+    update(t: number) {
+      if (t >= this.nextUpdateTime) {
+        this.apiStore.fetchActiveData();
+        this.nextUpdateTime = t + 20000;
+      }
+      window.requestAnimationFrame(this.update);
+    },
+
+    async checkAppVersion() {
+      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
+
+      try {
+        const releaseData = await (
+          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
+        ).data;
+
+        if (!releaseData) return;
+
+        this.store.appUpdate = {
+          version,
+          changelog: releaseData.body,
+          releaseURL: releaseData.html_url
+        };
+
+        this.isUpdateCardOpen =
+          storageVersion != version || 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() {
@@ -108,7 +158,7 @@ export default defineComponent({
     handleOnlineMode() {
       this.store.isOffline = false;
 
-      this.apiStore.setupAPIData();
+      this.apiStore.connectToAPI();
     },
 
     changeLang(lang: string) {
@@ -118,21 +168,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');
 
@@ -154,4 +189,80 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="./App.scss"></style>
+<style lang="scss">
+@import './styles/global';
+@import './styles/animations';
+
+.route {
+  margin: 0 0.2em;
+
+  &-active,
+  &[data-active='true'] {
+    color: $accentCol;
+    font-weight: bold;
+  }
+}
+
+// APP
+#app {
+  color: white;
+  font-size: 1rem;
+  overflow-x: hidden;
+
+  @include smallScreen() {
+    font-size: calc(0.65rem + 0.8vw);
+  }
+
+  @include screenLandscape() {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+}
+
+// CONTAINER
+.app_container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.app_main {
+  padding: 0 0.5em;
+}
+
+.warning {
+  background-color: firebrick;
+  text-align: center;
+  padding: 0.5em 0.4em;
+  max-width: 1100px;
+  margin: 0 auto;
+
+  border-radius: 0 0 1em 1em;
+}
+
+// FOOTER
+.app_footer {
+  max-width: 100%;
+  padding: 0.5em;
+
+  button {
+    display: inline-block;
+    padding: 0.1em;
+  }
+
+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
+  z-index: 10;
+
+  background: #111;
+  color: white;
+
+  text-align: center;
+  vertical-align: middle;
+}
+</style>

src/components/App/AppHeader.vue

@@ -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" />
@@ -100,15 +95,9 @@ export default defineComponent({
     },
 
     onlineDispatchersCount() {
-      return this.store.onlineSceneryList.filter(
-        (scenery) => scenery.region == this.store.region.id
+      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/Global/Card.vue

@@ -1,11 +1,11 @@
 <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">
+  <transition name="modal-anim" tag="div">
+    <div class="card" v-if="isOpen">
+      <div class="card-background" @click="toggleCard(false)"></div>
+      <div class="card-body" ref="wrapper" tabindex="0">
         <slot></slot>
       </div>
-      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
+      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleCard(false)"></div>
     </div>
   </transition>
 </template>
@@ -15,7 +15,7 @@ import { defineComponent } from 'vue';
 import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
-  emits: ['toggleModal'],
+  emits: ['toggleCard'],
 
   props: {
     isOpen: Boolean
@@ -30,15 +30,14 @@ export default defineComponent({
   watch: {
     isOpen(v) {
       this.$nextTick(() => {
-        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
-        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+        if (v == false) (this.store.modalLastClickedTarget as HTMLElement)?.focus();
       });
     }
   },
 
   methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
     }
   }
 });
@@ -47,17 +46,17 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.body {
+.card {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 200;
 
-  width: 100vw;
+  width: 100%;
   height: 100vh;
+  z-index: 200;
 }
 
-.background {
+.card-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -69,33 +68,20 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.wrapper {
+.card-body {
   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;
+  z-index: 210;
+  overflow: auto;
   max-height: 95vh;
 
+  box-shadow: 0 0 15px 10px #0e0e0e;
+
   & > :slotted(div) {
-    max-height: 95vh;
-  }
-}
-
-@include smallScreen {
-  .wrapper {
-    top: 0;
-    transform: translate(-50%, 1em);
-    max-height: 90vh;
-
-    & > :slotted(div) {
-      max-height: 90vh;
-    }
+    background-color: #1a1a1a;
+    width: 95vw;
   }
 }
 </style>

src/components/Global/Donation.vue

@@ -1,201 +0,0 @@
-<template>
-  <div class="donation-modal" @keydown.esc="toggleModal(false)">
-    <button
-      class="btn-toggle btn--image"
-      ref="btn"
-      @click="toggleModal(true)"
-      @focus="toggleModal(false)"
-    >
-      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
-      <span>{{ $t('donations.button-title') }}</span>
-    </button>
-
-    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
-      <div class="modal_content">
-        <div class="modal_main">
-          <h1 v-html="$t('donations.header')"></h1>
-          <br />
-          <p v-html="$t('donations.p1')"></p>
-          <br />
-          <i18n-t keypath="donations.p2" tag="p">
-            <template v-slot:b1>
-              <b>{{ $t('donations.p2-b1') }}</b>
-            </template>
-            <template v-slot:b2>
-              <b>{{ $t('donations.p2-b2') }}</b>
-            </template>
-            <template v-slot:b3>
-              <b>{{ $t('donations.p2-b3') }}</b>
-            </template>
-            <template v-slot:link>
-              <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
-                {{ $t('donations.p2-a1') }}
-              </a>
-            </template>
-          </i18n-t>
-          <br />
-          <p v-html="$t('donations.p3')"></p>
-          <br />
-          <i18n-t keypath="donations.p4" tag="p">
-            <template v-slot:img>
-              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </template>
-
-            <template v-slot:b1>
-              <b>{{ $t('donations.p4-b1') }}</b>
-            </template>
-
-            <template v-slot:b2>
-              <b>{{ $t('donations.p4-b2') }}</b>
-            </template>
-          </i18n-t>
-          <br />
-          <i
-            v-html="$t('donations.p5')"
-            style="display: flex; justify-content: flex-end; text-align: right"
-          >
-          </i>
-        </div>
-
-        <div class="modal_actions">
-          <a
-            class="modal-action a-button btn--image coffee"
-            href="https://buycoffee.to/spythere"
-            target="_blank"
-          >
-            <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"
-            href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
-            target="_blank"
-          >
-            <img src="/images/icon-dollar.svg" alt="paypal donation" />
-            {{ $t('donations.action-paypal') }}
-          </a>
-
-          <button class="modal-action btn--image exit" @click="toggleModal(false)">
-            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
-            {{ $t('donations.action-exit') }}
-          </button>
-        </div>
-      </div>
-    </AnimatedModal>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import AnimatedModal from './AnimatedModal.vue';
-
-export default defineComponent({
-  props: {
-    isModalOpen: Boolean
-  },
-  emits: ['toggleModal'],
-
-  methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
-    }
-  },
-  components: { AnimatedModal }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-button.btn-toggle {
-  $btnColor: #254069;
-
-  background-color: $btnColor;
-
-  &:hover {
-    background-color: lighten($btnColor, 5%);
-  }
-
-  @include smallScreen {
-    span {
-      display: none;
-    }
-  }
-}
-
-.modal_content {
-  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;
-  }
-}
-
-.modal_main {
-  overflow: auto;
-
-  img {
-    max-height: 20px;
-    margin-right: 5px;
-    vertical-align: text-bottom;
-  }
-}
-
-.modal_actions {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 0.5em;
-
-  form button {
-    width: 100%;
-  }
-}
-
-.modal_actions > .modal-action {
-  &.paypal {
-    $btnColor: #254069;
-
-    background-color: $btnColor;
-
-    &:hover {
-      background-color: lighten($btnColor, 5%);
-    }
-  }
-
-  &.coffee {
-    $btnColor: #009255;
-    background-color: $btnColor;
-
-    &:hover {
-      background-color: lighten($btnColor, 5%);
-    }
-  }
-
-  &.exit {
-    $btnColor: #686868;
-    background-color: $btnColor;
-
-    &:hover {
-      background-color: lighten($btnColor, 5%);
-    }
-  }
-}
-</style>

src/components/Global/DonationCard.vue

@@ -0,0 +1,256 @@
+<template>
+  <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>
+
+          <transition mode="out-in" name="slider-anim" class="current-name">
+            <span :key="displayingName">
+              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+              {{ displayingName }}
+            </span>
+          </transition>
+        </div>
+        <br />
+        <p v-html="$t('donations.p1')"></p>
+        <br />
+        <i18n-t keypath="donations.p2" tag="p">
+          <template v-slot:b1>
+            <b>{{ $t('donations.p2-b1') }}</b>
+          </template>
+          <template v-slot:b2>
+            <b>{{ $t('donations.p2-b2') }}</b>
+          </template>
+          <template v-slot:b3>
+            <b>{{ $t('donations.p2-b3') }}</b>
+          </template>
+          <template v-slot:link>
+            <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
+              {{ $t('donations.p2-a1') }}
+            </a>
+          </template>
+        </i18n-t>
+        <br />
+        <p v-html="$t('donations.p3')"></p>
+        <br />
+        <i18n-t keypath="donations.p4" tag="p">
+          <template v-slot:img>
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+          </template>
+
+          <template v-slot:b1>
+            <b>{{ $t('donations.p4-b1') }}</b>
+          </template>
+
+          <template v-slot:b2>
+            <b>{{ $t('donations.p4-b2') }}</b>
+          </template>
+        </i18n-t>
+        <br />
+        <i
+          v-html="$t('donations.p5')"
+          style="display: flex; justify-content: flex-end; text-align: right"
+        >
+        </i>
+      </div>
+
+      <div class="actions">
+        <a
+          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="action a-button btn--image paypal"
+          href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
+          target="_blank"
+        >
+          <img src="/images/icon-dollar.svg" alt="paypal donation" />
+          {{ $t('donations.action-paypal') }}
+        </a>
+
+        <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>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useApiStore } from '../../store/apiStore';
+import Card from './Card.vue';
+
+export default defineComponent({
+  components: { Card },
+  props: {
+    isCardOpen: Boolean
+  },
+
+  emits: ['toggleCard'],
+
+  watch: {
+    isCardOpen(val: boolean) {
+      this.running = val;
+      this.lastUpdate = Date.now();
+
+      this.$nextTick(() => {
+        if (val) (this.$refs['action'] as HTMLElement).focus();
+      });
+    }
+  },
+
+  created() {
+    this.runUpdate();
+  },
+
+  data() {
+    return {
+      apiStore: useApiStore(),
+      displayingIndex: 0,
+      lastUpdate: 0,
+      running: false
+    };
+  },
+
+  computed: {
+    displayingName() {
+      return this.donatorList[this.displayingIndex];
+    },
+
+    donatorList() {
+      return this.apiStore.donatorsData.slice().sort(() => Math.sign(Math.random() * -2 + 1));
+    }
+  },
+
+  methods: {
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
+    },
+
+    runUpdate() {
+      if (Date.now() >= this.lastUpdate + 2000 && this.running) {
+        this.displayingIndex = (this.displayingIndex + 1) % this.donatorList.length;
+        this.lastUpdate = Date.now();
+      }
+
+      window.requestAnimationFrame(this.runUpdate);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.body {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 1em;
+
+  font-size: 1.1em;
+
+  max-width: 820px;
+}
+
+.content {
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 1em;
+}
+
+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(250px, 1fr));
+  gap: 0.5em;
+  padding: 1em;
+
+  form button {
+    width: 100%;
+  }
+}
+
+.actions > .action {
+  &.paypal {
+    $btnColor: #254069;
+
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 5%);
+    }
+  }
+
+  &.coffee {
+    $btnColor: #009255;
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 5%);
+    }
+  }
+
+  &.exit {
+    $btnColor: #686868;
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 5%);
+    }
+  }
+}
+
+.donators-slider {
+  text-align: center;
+  line-height: 30px;
+
+  .current-name {
+    backface-visibility: hidden;
+    display: block;
+    font-weight: bold;
+    word-wrap: break-word;
+    color: var(--clr-donator);
+  }
+}
+
+.slider-anim {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+</style>

src/components/Global/RegionDropdown.vue

@@ -59,20 +59,18 @@ export default defineComponent({
     'store.region.id': {
       handler(regionId) {
         this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
-
-        console.log('region id', regionId);
       }
     },
     '$route.query.region': {
       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];
         }
       }
     }
@@ -85,8 +83,8 @@ export default defineComponent({
 
     regionList() {
       return regionsJSON.map((region) => {
-        const regionStationCount = this.store.onlineSceneryList.filter(
-          (scenery) => scenery.region == region.id
+        const regionStationCount = this.store.activeSceneryList.filter(
+          (scenery) => scenery.region == region.id && scenery.dispatcherId != -1
         ).length;
 
         const regionTrainCount =
@@ -141,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 {
@@ -199,6 +192,8 @@ li.option {
   }
 
   label {
+    width: 100%;
+    padding: 0.5em 0;
     position: relative;
 
     display: inline-block;
@@ -209,10 +204,6 @@ li.option {
       background-color: #333333f2;
     }
 
-    padding: 0.5em 0;
-
-    width: 100%;
-
     cursor: pointer;
   }
 }

src/components/Global/StationStatusBadge.vue

@@ -61,6 +61,9 @@ export default defineComponent({
         case Status.ActiveDispatcher.UNKNOWN:
           return 'unknown';
 
+        case Status.ActiveDispatcher.FREE:
+          return 'free';
+
         default:
           if (this.dispatcherTimestamp != null && this.dispatcherStatus >= Date.now() + 25500000)
             return 'no-limit';
@@ -83,7 +86,7 @@ $online: #09a116;
 $unknown: #b93c3c;
 
 .status-badge {
-  border-radius: 1rem;
+  border-radius: 1em;
   font-weight: 500;
 
   padding: 0.2em 0.55em;

src/components/Global/StockList.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="stock-list">
-    <ul>
-      <li v-for="(stockName, i) in trainStockList" :key="i">
+    <div v-if="tractionOnly">
+      <p>
+        {{ computedStockList[0].split(':')[0].split('_').splice(0, 2).join(' ') }}
+        {{ computedStockList[0].split(':')[1] }}
+      </p>
+
+      <img
+        class="traction-only"
+        :src="
+          getVehicleThumbnailURL(
+            computedStockList[0].split(':')[0],
+            /^EN/.test(computedStockList[0]) ? 'rb' : ''
+          )
+        "
+        @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] }}
@@ -9,39 +29,55 @@
 
         <span>
           <img
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
-              /^EN/.test(stockName) ? 'rb' : ''
-            }.png`"
+            :data-mouseover="stockName"
+            data-tooltip-type="VehiclePreviewTooltip"
+            :data-tooltip-content="stockName.split(':')[0]"
+            :src="
+              getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
+            "
             @error="onImageError($event, stockName)"
+            @click.stop="() => {}"
             width="400"
             height="60"
           />
 
+          <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
           <img
+            :data-mouseover="stockName"
+            data-tooltip-type="VehiclePreviewTooltip"
+            :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
+            :src="getVehicleThumbnailURL(stockName, 's')"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
             "
+            @click.stop="() => {}"
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-tooltip-type="VehiclePreviewTooltip"
+            :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^EN71/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
+            :src="getVehicleThumbnailURL(stockName, 's')"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
             "
+            @click.stop="() => {}"
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-tooltip-type="VehiclePreviewTooltip"
+            :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
+            :src="getVehicleThumbnailURL(stockName, 'ra')"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
             "
+            @click.stop="() => {}"
           />
+          <!-- ///  -->
         </span>
       </li>
     </ul>
@@ -50,7 +86,6 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { API } from '../../typings/api';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
@@ -58,6 +93,10 @@ export default defineComponent({
     trainStockList: {
       type: Array as PropType<string[]>,
       required: true
+    },
+    tractionOnly: {
+      type: Boolean,
+      required: false
     }
   },
 
@@ -67,14 +106,33 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    computedStockList() {
+      return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
+    }
+  },
+
   methods: {
+    getVehicleThumbnailURL(locoType: string, suffix?: string) {
+      return `https://static.spythere.eu/thumbnails/${locoType}${suffix}.png`;
+    },
+
     onImageError(event: Event, stockName: string) {
-      const fallbackName =
-        Object.keys(this.apiStore.rollingStockData!.info).find((type) => {
-          return this.apiStore.rollingStockData!.info[type as keyof API.RollingStock.Info].find(
-            (v) => v[0] === stockName.split(':')[0]
-          );
-        }) || 'vehicle-unknown';
+      let fallbackName = '';
+
+      const isLoco = /.-\d{3}/.test(stockName);
+
+      if (isLoco) {
+        if (/^\d?EN\d{2}/.test(stockName)) fallbackName = 'loco-ezt';
+        else if (/^SN\d{2}/.test(stockName)) fallbackName = 'loco-szt';
+        else if (/^\d{0,}?E/.test(stockName)) fallbackName = 'loco-e';
+        else fallbackName = 'loco-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`;
     }
@@ -99,6 +157,7 @@ export default defineComponent({
 ul > li > span {
   display: flex;
   align-items: flex-end;
+  cursor: crosshair;
 }
 
 img {
@@ -107,10 +166,14 @@ img {
   height: auto;
 }
 
+img.traction-only {
+  max-width: 100%;
+}
+
 p {
   text-align: center;
   color: #aaa;
-  font-size: 0.9em;
+  font-size: 0.95em;
   margin-bottom: 1em;
 }
 </style>

src/components/Global/TrainThumbnail.vue

@@ -1,85 +0,0 @@
-<template>
-  <img class="train-thumbnail" :src="placeholderUrl" v-if="isNotFound" />
-
-  <img
-    class="train-thumbnail"
-    v-else
-    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${
-      stockType == 'loco-ezt' ? 'rb' : ''
-    }.png`"
-    @error="onImageError"
-    @load="onImageLoad"
-    width="220"
-    height="60"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { API } from '../../typings/api';
-import { useApiStore } from '../../store/apiStore';
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-
-    onlyFirstSegment: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      apiStore: useApiStore(),
-      isNotFound: false,
-      isLoaded: false
-    };
-  },
-
-  computed: {
-    url() {
-      return `https://rj.td2.info.pl/dist/img/thumbnails/${this.name.split(':')[0]}.png`;
-    },
-
-    placeholderUrl() {
-      return `/images/icon-${this.stockType}.png`;
-    },
-
-    stockType() {
-      if (!this.apiStore.rollingStockData) return 'vehicle-unknown';
-
-      return (
-        Object.keys(this.apiStore.rollingStockData.info).find((type) => {
-          return this.apiStore.rollingStockData?.info[type as keyof API.RollingStock.Info].find(
-            (v) => v[0] === this.name.split(':')[0]
-          );
-        }) || 'vehicle-unknown'
-      );
-    }
-  },
-
-  methods: {
-    onImageError() {
-      this.isNotFound = true;
-      this.isLoaded = false;
-    },
-
-    onImageLoad() {
-      this.isNotFound = false;
-      this.isLoaded = true;
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.train-thumbnail {
-  width: auto;
-  height: auto;
-  max-height: 60px;
-}
-</style>

src/components/JournalView/JournalDailyStats.vue

@@ -172,7 +172,7 @@ import dateMixin from '../../mixins/dateMixin';
 
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'journal-daily-stats',
@@ -186,7 +186,8 @@ export default defineComponent({
       statsStatus: Status.Data.Loading,
       intervalId: -1,
 
-      stats: {} as API.DailyStats.Response
+      stats: {} as API.DailyStats.Response,
+      apiStore: useApiStore()
     };
   },
 
@@ -211,7 +212,9 @@ export default defineComponent({
   methods: {
     async fetchDailyTimetableStats() {
       try {
-        const res: API.DailyStats.Response = await (await http.get('api/getDailyStats')).data;
+        const res: API.DailyStats.Response = await (
+          await this.apiStore.client!.get('api/getDailyStats')
+        ).data;
 
         this.stats = res;
 

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -43,7 +43,7 @@
                     :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
                   >
                     <b
-                      v-if="isDonator(historyItem.dispatcherName)"
+                      v-if="apiStore.donatorsData.includes(historyItem.dispatcherName)"
                       class="text--donator"
                       :title="$t('donations.dispatcher-message')"
                     >
@@ -128,13 +128,13 @@ 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 { useApiStore } from '../../../store/apiStore';
 
 export default defineComponent({
   components: { Loading, AddDataButton },
 
-  mixins: [dateMixin, styleMixin, donatorMixin],
+  mixins: [dateMixin, styleMixin],
 
   props: {
     dispatcherHistory: {
@@ -159,6 +159,7 @@ export default defineComponent({
     return {
       Status,
       store: useMainStore(),
+      apiStore: useApiStore(),
       regions
     };
   },

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>
 
@@ -116,7 +116,7 @@ import keyMixin from '../../mixins/keyMixin';
 import { useMainStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
@@ -158,6 +158,7 @@ export default defineComponent({
 
       searchTimeout: 0,
       store: useMainStore(),
+      apiStore: useApiStore(),
 
       JournalFilterSection: Journal.FilterSection
     };
@@ -241,7 +242,7 @@ export default defineComponent({
       this.searchTimeout = window.setTimeout(async () => {
         try {
           const suggestions: string[] = await (
-            await http.get(`api/get${type}Suggestions?name=${value}`)
+            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
           ).data;
 
           this[`${type}Suggestions`] = suggestions;
@@ -300,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/JournalTimetablesList.vue

@@ -17,7 +17,34 @@
         </div>
 
         <div v-else>
-          <TimetableHistoryList :timetableHistory="timetableHistory" />
+          <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" />
+
+                  <!-- Extra -->
+                  <TimetableDetails :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+                </div>
+              </li>
+            </transition-group>
+          </ul>
 
           <AddDataButton
             :list="timetableHistory"
@@ -37,17 +64,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, 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: {
@@ -73,6 +112,15 @@ export default defineComponent({
       Status,
       store: useMainStore()
     };
+  },
+
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        showExtraInfo: ref(false)
+      }));
+    }
   }
 });
 </script>
@@ -80,4 +128,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,195 @@
+<template>
+  <div>
+    <div class="details-actions">
+      <button class="btn--action">
+        <b>{{ $t('journal.stock-info') }}</b>
+        <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
+      </button>
+    </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';
+
+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';
+
+.details-body {
+  margin-top: 0.5em;
+}
+
+.details-actions {
+  display: flex;
+
+  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,183 +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(';')" /> -->
-    <StockList
-      :trainStockList="
-        (currentHistoryIndex == 0
-          ? timetable.stockString
-          : stockHistory[currentHistoryIndex].stockString
-        ).split(';')
-      "
-    />
-
-    <!-- <ul class="stock-list">
-      <li
-        v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')"
-        :key="i"
-      >
-        <div>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</div>
-        <TrainThumbnail :name="stockName" />
-      </li>
-    </ul> -->
-  </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

@@ -1,11 +1,6 @@
 <template>
   <div class="item-general">
-    <span
-      class="general-train"
-      tabindex="0"
-      @click.stop="showTimetable(timetable, $event.currentTarget)"
-      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
-    >
+    <span class="general-train">
       <span class="text--grayed">#{{ timetable.id }}</span>
 
       <span class="badges" v-if="timetable.skr || timetable.twr">
@@ -29,7 +24,7 @@
       </strong>
 
       <strong
-        v-if="isDonator(timetable.driverName)"
+        v-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
         :title="$t('donations.driver-message')"
       >
@@ -62,10 +57,19 @@
           !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--action btn-timetable"
+        @click.stop="showTimetable(timetable, $event.currentTarget)"
+      >
+        <img src="/images/icon-train.svg" alt="train icon" />
+        <b>{{ $t('journal.timetable-online-button') }}</b>
+      </button>
     </span>
   </div>
 </template>
@@ -77,10 +81,16 @@ 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';
 
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin, donatorMixin],
+  mixins: [dateMixin, modalTrainMixin, styleMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
 
   props: {
     timetable: {
@@ -100,8 +110,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
+@import '../../../styles/responsive';
+@import '../../../styles/badge';
 
 .item-general {
   display: flex;
@@ -113,8 +123,22 @@ 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;
+  line-height: 2;
+}
+
+.general-time {
+  display: flex;
+  align-items: center;
+
+  gap: 0.5em;
 }
 
 .badges {
@@ -139,13 +163,13 @@ export default defineComponent({
   }
 }
 
-.general-train {
-  cursor: pointer;
+.btn-timetable {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25em;
+  padding: 0.2em 0.5em;
+
+  img {
+    height: 1.25em;
+  }
 }
 
 @include smallScreen {

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -21,7 +21,7 @@
           <!-- Status -->
           <TimetableStatus :timetable="timetable" />
 
-          <button class="btn--option btn--show">
+          <button class="btn--action btn--show">
             {{ $t('journal.stock-info') }}
             <img
               :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
@@ -66,9 +66,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/JournalSection.scss';
+@import '../../../styles/variables';
+@import '../../../styles/responsive';
+@import '../../../styles/JournalSection';
 
 .btn--show {
   display: flex;

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -72,25 +72,22 @@
 <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 { OnlineScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
-import http from '../../http';
+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: {
       type: Object as PropType<Station>
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   },
 
@@ -98,7 +95,8 @@ export default defineComponent({
     return {
       historyList: [] as API.DispatcherHistory.Response,
       dataStatus: Status.Data.Loading,
-      DataStatus: Status.Data
+      DataStatus: Status.Data,
+      apiStore: useApiStore()
     };
   },
 
@@ -127,7 +125,7 @@ export default defineComponent({
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
         const historyAPIData: API.DispatcherHistory.Response = await (
-          await http.get(requestString)
+          await this.apiStore.client!.get(requestString)
         ).data;
 
         this.dataStatus = Status.Data.Loaded;

src/components/SceneryView/SceneryHeader.vue

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

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 { OnlineScenery } from '../../store/typings';
+import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   components: {
@@ -106,7 +105,7 @@ export default defineComponent({
     },
 
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   }
 });

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,38 +1,45 @@
 <template>
   <section class="info-dispatcher">
-    <div class="dispatcher" v-if="onlineScenery">
+    <div class="info-top" v-if="onlineScenery && onlineScenery.dispatcherExp != -1">
       <span
-        class="dispatcher_level"
+        class="dispatcher-level"
         :style="calculateExpStyle(onlineScenery.dispatcherExp, onlineScenery.dispatcherIsSupporter)"
       >
         {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
       </span>
 
       <router-link
-        class="dispatcher_name"
+        class="dispatcher-name"
         :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
       >
         <span
           class="text--donator"
-          v-if="isDonator(onlineScenery.dispatcherName)"
+          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
           :title="$t('donations.dispatcher-message')"
         >
           {{ onlineScenery.dispatcherName }}
         </span>
         <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
+    </div>
 
-      <span class="dispatcher_likes text--primary">
+    <div class="info-bottom">
+      <span
+        class="dispatcher-likes text--primary"
+        v-if="onlineScenery && onlineScenery.dispatcherExp != -1"
+      >
         <img src="/images/icon-like.svg" alt="Likes count icon" />
         <span>{{ onlineScenery?.dispatcherRate || '0' }}</span>
       </span>
-    </div>
 
-    <StationStatusBadge
-      :isOnline="onlineScenery ? true : false"
-      :dispatcherStatus="onlineScenery?.dispatcherStatus"
-      :dispatcherTimestamp="onlineScenery?.dispatcherTimestamp"
-    />
+      <span class="dispatcher-badge">
+        <StationStatusBadge
+          :isOnline="onlineScenery ? true : false"
+          :dispatcherStatus="onlineScenery?.dispatcherStatus"
+          :dispatcherTimestamp="onlineScenery?.dispatcherTimestamp"
+        />
+      </span>
+    </div>
   </section>
 </template>
 
@@ -42,14 +49,21 @@ import dateMixin from '../../../mixins/dateMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import { OnlineScenery } 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<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>,
       required: false
     }
   },
@@ -59,45 +73,46 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .info-dispatcher {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 1.8em;
+}
 
-  flex-wrap: wrap;
+.info-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.info-bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   gap: 0.5em;
 
-  .dispatcher {
-    font-size: 2em;
+  margin-top: 0.5em;
+}
 
-    &_level {
-      display: inline-block;
-      margin-right: 0.3em;
-      background: firebrick;
+.dispatcher-level {
+  background: firebrick;
 
-      border-radius: 0.1em;
+  border-radius: 0.1em;
 
-      width: 1.5em;
-      height: 1.5em;
-      line-height: 1.5em;
-      font-weight: bold;
-    }
+  width: 1.5em;
+  height: 1.5em;
+  line-height: 1.5em;
+  font-weight: bold;
+}
 
-    &_name {
-      cursor: pointer;
-      margin-right: 0.25em;
-    }
+.dispatcher-likes {
+  display: flex;
+  gap: 0.25em;
 
-    &_likes {
-      img {
-        height: 0.7em;
-        margin: 0 0.25em;
-      }
-    }
-  }
-
-  .status-badge {
-    font-size: 1.25em;
-    margin: 0.5em 0.25em;
+  img {
+    width: 1em;
   }
 }
+
+.dispatcher-badge {
+  font-size: 0.7em;
+}
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -5,7 +5,7 @@
         class="icon-info"
         src="/images/icon-unknown.svg"
         alt="icon-unknown"
-        :title="$t('desc.unknown')"
+        :title="$t('sceneries.info.unknown')"
       />
     </span>
 
@@ -21,25 +21,19 @@
       v-if="station?.generalInfo"
       class="scenery-icon icon-info"
       :class="station?.generalInfo.controlType.replace('+', '-')"
-      :title="$t('desc.control-type') + $t(`controls.${station?.generalInfo.controlType}`)"
-      v-html="getControlTypeAbbrev(station?.generalInfo.controlType)"
+      :title="
+        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+      "
     >
+      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
     </span>
 
-    <img
-      v-if="station?.generalInfo?.SUP"
-      class="icon-info"
-      src="/images/icon-SUP.svg"
-      alt="SUP (RASP-UZK)"
-      :title="$t('desc.SUP')"
-    />
-
     <img
       v-if="station?.generalInfo?.signalType"
       class="icon-info"
       :src="`/images/icon-${station.generalInfo.signalType}.svg`"
       :alt="station.generalInfo.signalType"
-      :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
     />
 
     <img
@@ -47,7 +41,7 @@
       class="icon-info"
       src="/images/icon-lock.svg"
       alt="Non-public scenery"
-      :title="$t('desc.non-public')"
+      :title="$t('sceneries.info.non-public')"
     />
 
     <img
@@ -55,7 +49,7 @@
       class="icon-info"
       src="/images/icon-unavailable.svg"
       alt="Unavailable scenery"
-      :title="$t('desc.unavailable')"
+      :title="$t('sceneries.info.unavailable')"
     />
 
     <img
@@ -63,7 +57,23 @@
       class="icon-info"
       src="/images/icon-abandoned.svg"
       alt="Abandoned scenery"
-      :title="$t('desc.abandoned')"
+      :title="$t('sceneries.info.abandoned')"
+    />
+
+    <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
@@ -71,19 +81,18 @@
       class="icon-info"
       src="/images/icon-real.svg"
       alt="real scenery"
-      :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
+      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
     />
   </section>
 </template>
 
 <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>
@@ -94,6 +103,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../../styles/icons.scss';
+
 .info-icons {
   display: flex;
   justify-content: center;
@@ -101,6 +111,7 @@ export default defineComponent({
 
   margin: 1em;
 }
+
 .icon-info {
   display: flex;
   justify-content: center;

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="filteredOneWayRoutes.length > 0">
+    <div class="routes one-way" v-if="oneWayRoutes.length > 0">
       <b>{{ $t('scenery.one-way-routes') }}</b>
 
       <ul class="routes-list">
         <li
-          v-for="route in filteredOneWayRoutes"
+          v-for="route in oneWayRoutes"
           :key="route.routeName"
           @click="setActiveShowLength(route.routeName)"
         >
@@ -24,12 +24,12 @@
       </ul>
     </div>
 
-    <div class="routes two-way" v-if="filteredTwoWayRoutes.length > 0">
+    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
       <b>{{ $t('scenery.two-way-routes') }}</b>
 
       <ul class="routes-list">
         <li
-          v-for="route in filteredTwoWayRoutes"
+          v-for="route in twoWayRoutes"
           :key="route.routeName"
           @click="setActiveShowLength(route.routeName)"
         >
@@ -52,10 +52,7 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../../scripts/interfaces/Station';
-import { StationRoutesInfo } from '../../../store/typings';
-
-const routeFilter = (route: StationRoutesInfo) => !route.hidden;
+import { Station } from '../../../typings/common';
 
 export default defineComponent({
   props: {
@@ -80,12 +77,12 @@ export default defineComponent({
   },
 
   computed: {
-    filteredOneWayRoutes() {
-      return this.station.generalInfo?.routes.oneWay.filter(routeFilter) || [];
+    oneWayRoutes() {
+      return this.station.generalInfo?.routes.single ?? [];
     },
 
-    filteredTwoWayRoutes() {
-      return this.station.generalInfo?.routes.twoWay.filter(routeFilter) || [];
+    twoWayRoutes() {
+      return this.station.generalInfo?.routes.double ?? [];
     }
   }
 });

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,12 +30,12 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { OnlineScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../typings/common';
 
 export default defineComponent({
   props: {
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>,
       required: false
     }
   },
@@ -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,13 +13,13 @@
       </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"
+        @click.prevent="selectModalTrain(train.id, $event.currentTarget)"
+        @keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
       >
         <span class="user_train">{{ train.trainNo }}</span>
         <span class="user_name">{{ train.driverName }}</span>
@@ -32,15 +32,49 @@
 import { PropType, defineComponent } from 'vue';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import { OnlineScenery } from '../../../store/typings';
+import { ActiveScenery, Station, StopStatus } from '../../../typings/common';
+import { getTrainStopStatus } from '../utils';
+import { useMainStore } from '../../../store/mainStore';
 
 export default defineComponent({
   mixins: [routerMixin, modalTrainMixin],
 
   props: {
     onlineScenery: {
-      type: Object as PropType<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()
+        );
+
+        const status = stop
+          ? getTrainStopStatus(stop, train.currentStationName, this.onlineScenery!.name)
+          : 'no-timetable';
+
+        return {
+          train,
+          status
+        };
+      });
     }
   }
 });
@@ -74,31 +108,31 @@ ul {
     -webkit-transition: background-color 200ms;
   }
 
-  &.no-timetable .user_train {
+  &[data-status='no-timetable'] .user_train {
     background-color: $no-timetable;
   }
 
-  &.departed > &_train {
+  &[data-status='departed'] > &_train {
     background-color: $departed;
   }
 
-  &.stopped > &_train {
+  &[data-status='stopped'] > &_train {
     background-color: $stopped;
   }
 
-  &.online > &_train {
+  &[data-status='online'] > &_train {
     background-color: $online;
   }
 
-  &.terminated > &_train {
+  &[data-status='terminated'] > &_train {
     background-color: $terminated;
   }
 
-  &.disconnected > &_train {
+  &[data-status='disconnected'] > &_train {
     background-color: $disconnected;
   }
 
-  &.offline {
+  &[data-status='offline'] {
     background: firebrick;
     pointer-events: none;
   }

src/components/SceneryView/SceneryTimetable.vue

@@ -6,22 +6,14 @@
         <span>{{ $t('scenery.timetables') }}</span>
 
         <span>
-          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all || 0 }}</span>
+          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
           <span> / </span>
           <span class="text--grayed">
-            {{ onlineScenery?.scheduledTrainCount.confirmed || '0' }}
+            {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
           </span>
         </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')"
-          >
-            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-          </a> -->
-
           <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
             <img src="/images/icon-tablice.ico" alt="icon-tablice" />
           </a>
@@ -33,12 +25,12 @@
           {{ (i > 0 && '&bull;') || '' }}
 
           <button
-            :key="cp.checkpointName"
+            :key="cp"
             class="checkpoint_item"
-            :class="{ current: chosenCheckpoint === cp.checkpointName }"
+            :class="{ current: chosenCheckpoint === cp }"
             @click="setCheckpoint(cp)"
           >
-            {{ cp.checkpointName }}
+            {{ cp }}
           </button>
         </span>
       </div>
@@ -48,7 +40,7 @@
       <transition-group name="list-anim">
         <div
           style="padding-bottom: 5em"
-          v-if="apiStore.dataStatuses.connection == 0 && computedScheduledTrains.length == 0"
+          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
           key="list-loading"
         >
           <Loading />
@@ -56,7 +48,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,7 +56,7 @@
 
         <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') }}
@@ -73,59 +65,56 @@
         <div
           class="timetable-item"
           v-else
-          v-for="scheduledTrain in computedScheduledTrains"
-          :key="scheduledTrain.trainId"
+          v-for="row in sceneryTimetables"
+          :key="row.train.id + row.checkpointStop.arrivalTimestamp"
           tabindex="0"
-          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
-          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
+          @click.prevent.stop="selectModalTrain(row.train.id, $event.currentTarget)"
+          @keydown.enter.prevent="selectModalTrain(row.train.id, $event.currentTarget)"
         >
           <span class="timetable-general">
             <span class="general-info">
               <span class="info-number">
-                <strong>{{ scheduledTrain.category }}</strong>
-                {{ scheduledTrain.trainNo }}
+                <strong>{{ row.train.timetableData!.category }}</strong>
+                {{ row.train.trainNo }}
 
-                <span
-                  v-if="scheduledTrain.stopInfo.comments"
-                  :title="scheduledTrain.stopInfo.comments"
-                >
+                <span v-if="row.checkpointStop.comments" :title="row.checkpointStop.comments">
                   <img src="/images/icon-warning.svg" />
                 </span>
               </span>
               &nbsp;|&nbsp;
               <span>
-                {{ scheduledTrain.driverName }}
+                {{ row.train.driverName }}
               </span>
 
               <div class="info-route">
-                <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+                <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
               </div>
 
-              <ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
+              <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,41 +122,39 @@
 
             <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>
@@ -186,12 +173,13 @@ 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 { useMainStore } from '../../store/mainStore';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { OnlineScenery } from '../../store/typings';
 import { useApiStore } from '../../store/apiStore';
+import { ActiveScenery, Station } from '../../typings/common';
+import { SceneryTimetableRow } from './typings';
+import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
   name: 'SceneryTimetable',
@@ -205,7 +193,7 @@ export default defineComponent({
       type: Object as PropType<Station>
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   },
 
@@ -213,10 +201,6 @@ export default defineComponent({
     listOpen: false
   }),
 
-  mounted() {
-    this.loadSelectedOption();
-  },
-
   activated() {
     this.loadSelectedOption();
   },
@@ -229,9 +213,7 @@ export default defineComponent({
     const mainStore = useMainStore();
 
     const chosenCheckpoint = ref(
-      props.station?.generalInfo?.checkpoints?.length == 0
-        ? ''
-        : props.station?.generalInfo?.checkpoints[0].checkpointName || null
+      props.station?.generalInfo?.checkpoints[0] ?? props.station?.name ?? ''
     );
 
     return {
@@ -250,27 +232,107 @@ export default defineComponent({
       return url;
     },
 
-    computedScheduledTrains() {
+    sceneryTimetables(): SceneryTimetableRow[] {
       if (!this.station) return [];
+      if (!this.onlineScenery) return [];
 
-      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;
+      console.log(this.onlineScenery.scheduledTrains, this.chosenCheckpoint);
 
-            if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
-            if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
+      return this.onlineScenery.scheduledTrains
+        .filter(
+          (ct) =>
+            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,
+            this.station!.name
+          );
 
-            return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
-          }) || []
-      );
+          const trainStopIndex =
+            ct.train.timetableData?.followingStops.findIndex(
+              (stop) => stop.stopName == ct.checkpointStop.stopName
+            ) ?? -1;
+
+          let prevStationName = '',
+            nextStationName = '';
+
+          let departureLine: string | null = null;
+          let arrivingLine: string | null = null;
+
+          let prevDepartureLine: string | null = null,
+            nextArrivalLine: string | null = null;
+
+          if (trainStopIndex > -1 && ct.train.timetableData?.followingStops !== undefined) {
+            for (let i = trainStopIndex; i >= 0; i--) {
+              const stop = ct.train.timetableData.followingStops[i];
+
+              if (
+                /strong|podg\.|pe\./g.test(stop.stopName) &&
+                !prevStationName &&
+                i <= trainStopIndex - 1
+              )
+                prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
+
+              if (
+                stop.arrivalLine != null &&
+                !arrivingLine &&
+                !/-|_|it|sbl/gi.test(stop.arrivalLine)
+              ) {
+                arrivingLine = stop.arrivalLine;
+                prevDepartureLine =
+                  ct.train.timetableData.followingStops[i - 1]?.departureLine || null;
+              }
+            }
+
+            for (let i = trainStopIndex; i < ct.train.timetableData.followingStops.length; i++) {
+              const stop = ct.train.timetableData.followingStops[i];
+
+              if (
+                /strong|podg\.|pe\./g.test(stop.stopName) &&
+                !nextStationName &&
+                i > trainStopIndex
+              )
+                nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
+
+              if (
+                stop.departureLine &&
+                !departureLine &&
+                !/-|_|it|sbl/gi.test(stop.departureLine)
+              ) {
+                departureLine = stop.departureLine;
+                nextArrivalLine = ct.train.timetableData.followingStops[i + 1]?.arrivalLine || null;
+              }
+            }
+          }
+
+          return {
+            checkpointStop: ct.checkpointStop,
+            train: ct.train,
+            prevDepartureLine,
+            nextArrivalLine,
+            departureLine,
+            arrivingLine,
+            prevStationName,
+            nextStationName,
+            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,12 +340,11 @@ export default defineComponent({
     loadSelectedOption() {
       if (!this.station) return;
 
-      this.chosenCheckpoint =
-        this.station.generalInfo?.checkpoints[0]?.checkpointName || this.station.name;
+      this.chosenCheckpoint = this.station.generalInfo?.checkpoints[0] ?? this.station.name;
     },
 
-    setCheckpoint(cp: { checkpointName: string }) {
-      this.chosenCheckpoint = cp.checkpointName;
+    setCheckpoint(cp: string) {
+      this.chosenCheckpoint = cp;
     }
   }
 });
@@ -415,13 +476,6 @@ export default defineComponent({
     width: 100%;
   }
 
-  .g-tooltip > .content {
-    z-index: 100;
-    color: white;
-
-    left: 110%;
-  }
-
   img {
     width: 1.1em;
   }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -71,29 +71,27 @@
 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 { OnlineScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
-import http from '../../http';
+import { ActiveScenery, Station, Status } from '../../typings/common';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin, listObserverMixin],
+  mixins: [dateMixin],
   props: {
     station: {
       type: Object as PropType<Station>
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   },
 
   data() {
     return {
       historyList: [] as API.TimetableHistory.Response,
+      apiStore: useApiStore(),
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data
     };
@@ -112,7 +110,7 @@ export default defineComponent({
 
       try {
         const response: API.TimetableHistory.Response = await (
-          await http.get('api/getTimetables', {
+          await this.apiStore.client!.get('api/getTimetables', {
             params: {
               issuedFrom: this.station?.name || this.onlineScenery?.name
             }

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,10 +1,10 @@
 <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">
@@ -28,34 +28,49 @@
     </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" tabindex="0" ref="cardRef" @keydown.r="resetFilters">
+        <div class="card_content" @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" v-if="changedFilters.length > 0">
+            {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
+          </div>
+
+          <div class="changed-filters" v-else>{{ $t('filters.no-changed-filters') }}</div>
+
           <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"
+                  @click="() => (filters[filterKey] = !filters[filterKey])"
+                  @dblclick="setSingleSectionFilter(sectionKey, filterKey)"
+                  :for="filterKey"
+                >
+                  <input
+                    :checked="filters[filterKey]"
+                    v-model="filters[filterKey]"
+                    type="checkbox"
+                    :class="sectionKey"
+                    :name="filterKey"
+                  />
+                  <span>
+                    {{ $t(`filters.${filterKey}`) }}
+                  </span>
+                </label>
               </div>
             </div>
           </section>
@@ -68,29 +83,29 @@
               <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"
               />
@@ -100,18 +115,18 @@
           </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 +147,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 +165,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 +253,7 @@ export default defineComponent({
       return true;
     },
 
-    authors() {
+    authorsHint() {
       return this.store.stationList
         .reduce((acc, station) => {
           station.generalInfo?.authors?.forEach((author) => {
@@ -236,7 +279,10 @@ export default defineComponent({
 
     isVisible(value: boolean) {
       this.$nextTick(() => {
-        if (value) (this.$refs['cardEl'] as HTMLDivElement).focus();
+        if (value) {
+          (this.$refs['cardRef'] as HTMLDivElement).focus();
+          (this.$refs['cardContentRef'] as HTMLDivElement).scrollTop = this.scrollTop;
+        }
       });
     }
   },
@@ -247,63 +293,67 @@ 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() {
-      console.log(this.authorsInputValue);
-
-      this.filterStore.changeFilterValue('authors', this.authorsInputValue);
-
-      if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
-    },
-
-    changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.filterStore.changeFilterValue(name, value);
-      if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
+      this.filters['authors'] = this.authors;
+      // if (this.saveOptions) StorageManager.setStringValue('authors', target.value);
     },
 
     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 = '';
-
+      // 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 (filterKey != chosenKey) this.filters[filterKey] = initFilters[filterKey];
+      });
     },
 
     closeCard() {
@@ -318,9 +368,9 @@ 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';
 
 h3.section-header {
   text-align: center;
@@ -337,6 +387,11 @@ h3.section-header {
   padding: 0.5em;
 }
 
+.changed-filters {
+  background-color: #111;
+  padding: 0.5em;
+}
+
 .card_controls {
   display: flex;
   gap: 0.5em;
@@ -365,28 +420,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;
@@ -432,24 +465,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;
 
@@ -473,35 +545,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;
@@ -510,7 +565,6 @@ h3.section-header {
     outline: none;
 
     min-width: 25%;
-    max-width: 120px;
 
     &:focus-visible ~ * {
       color: gold;
@@ -580,4 +634,19 @@ h3.section-header {
     }
   }
 }
+
+@include smallScreen {
+  .card_controls > button.card-button > p {
+    display: none;
+  }
+
+  .slider {
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &-input {
+      width: 90%;
+    }
+  }
+}
 </style>

src/components/StationsView/StationStats.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="station-stats">
+    <div class="separator" />
+
+    <div class="stats-row">
+      <div>
+        <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>
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.avg-timetable-count') }}
+        <b>{{ avgTimetableCount.toFixed(2) }}</b>
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.single-track-count') }}
+        <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.double-track-count') }}
+        <b>{{ trackCount.twoWay }}</b>
+        (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+      </div>
+
+      <div>
+        &bull; {{ $t('station-stats.cross-sceneries') }} <b>{{ trackCount.crossTrack }}</b> (<b
+          >{{ trackCount.crossTrackElectric }} ⚡</b
+        >)
+      </div>
+
+      <div>
+        &bull;
+        {{ $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
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  data() {
+    return {
+      mainStore: useMainStore()
+    };
+  },
+
+  methods: {
+    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>
+.separator {
+  width: 100%;
+  height: 2px;
+  margin: 0.5em 0;
+  background-color: #aaa;
+}
+
+.station-stats {
+  text-align: center;
+  color: #ddd;
+}
+
+.stats-row {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-wrap: pretty;
+  gap: 0.25em;
+  margin-top: 0.25em;
+}
+
+.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);
+  }
+}
+</style>

src/components/StationsView/StationTable.vue

@@ -1,6 +1,10 @@
 <template>
   <section class="station_table">
-    <div class="table_wrapper">
+    <Loading
+      v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
+    />
+
+    <div class="table_wrapper" v-else-if="filteredStationList.length > 0">
       <table>
         <thead>
           <tr>
@@ -9,14 +13,15 @@
               :key="headerName"
               @click="changeSorter(headerName)"
               class="header-text"
+              :class="headerName"
             >
               <span class="header_wrapper">
-                <div v-html="$t(`sceneries.${headerName}`)"></div>
+                <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
 
                 <img
                   class="sort-icon"
-                  v-if="sorterActive.headerName == headerName"
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  v-if="activeSorter.headerName == headerName"
+                  :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
                   alt="sort icon"
                 />
               </span>
@@ -27,18 +32,19 @@
               :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.${headerName}`)"
+                  :title="$t(`sceneries.headers.${headerName}`)"
                 />
 
                 <img
                   class="sort-icon"
-                  v-if="sorterActive.headerName == headerName"
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  v-if="activeSorter.headerName == headerName"
+                  :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
                   alt="sort icon"
                 />
               </span>
@@ -48,24 +54,23 @@
 
         <tbody>
           <tr
-            class="station"
+            v-for="station in filteredStationList"
             :class="{ 'last-selected': lastSelectedStationName == station.name }"
-            v-for="(station, i) in stations"
-            :key="i + 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_name" :class="station.generalInfo?.availability">
+            <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">
+            <td class="station-level">
               <span v-if="station.generalInfo">
                 <span
                   v-if="
@@ -82,7 +87,7 @@
                   <img
                     src="/images/icon-abandoned.svg"
                     alt="non-public"
-                    :title="$t('desc.abandoned')"
+                    :title="$t('sceneries.info.abandoned')"
                   />
                 </span>
 
@@ -90,7 +95,7 @@
                   <img
                     src="/images/icon-lock.svg"
                     alt="non-public"
-                    :title="$t('desc.non-public')"
+                    :title="$t('sceneries.info.non-public')"
                   />
                 </span>
 
@@ -98,7 +103,7 @@
                   <img
                     src="/images/icon-unavailable.svg"
                     alt="unavailable"
-                    :title="$t('desc.unavailable')"
+                    :title="$t('sceneries.info.unavailable')"
                   />
                 </span>
               </span>
@@ -106,19 +111,20 @@
               <span v-else> ? </span>
             </td>
 
-            <td class="station_status">
+            <td class="station-status">
               <StationStatusBadge
                 :isOnline="station.onlineInfo ? true : false"
                 :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
               />
             </td>
 
-            <td class="station_dispatcher-name">
+            <td class="station-dispatcher-name">
               <span v-if="station.onlineInfo?.dispatcherName">
                 <b
                   v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                  :title="$t('donations.dispatcher-message')"
-                  @click.stop="openDonationModal"
+                  @click.stop="openDonationCard"
+                  data-tooltip-type="DonatorTooltip"
+                  :data-tooltip-content="$t('donations.dispatcher-message')"
                 >
                   <img src="/images/icon-diamond.svg" alt="" />
                   {{ station.onlineInfo.dispatcherName }}
@@ -130,9 +136,9 @@
               </span>
             </td>
 
-            <td class="station_dispatcher-exp">
+            <td class="station-dispatcher-exp">
               <span
-                v-if="station.onlineInfo"
+                v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
                 :style="
                   calculateExpStyle(
                     station.onlineInfo.dispatcherExp,
@@ -144,206 +150,230 @@
               </span>
             </td>
 
-            <td class="station_tracks twoway">
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
-                "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
-              </span>
+            <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 &&
-                  station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
-              </span>
-
-              <span class="separator"></span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
-                "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
-              </span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.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_info" v-if="station.generalInfo">
+            <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('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+                :class="station.generalInfo?.controlType.replace('+', '-')"
+                :title="
+                  $t('sceneries.info.control-type') +
+                  $t(`controls.${station.generalInfo?.controlType}`)
+                "
               >
+                {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
               </span>
 
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo.SUP"
-                  src="/images/icon-SUP.svg"
-                  alt="SUP (RASP-UZK)"
-                  :title="$t('desc.SUP')"
-                />
-              </span>
-
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo.signalType"
-                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-                  :alt="station.generalInfo.signalType"
-                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-                />
-              </span>
-
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                  src="/images/icon-SBL.svg"
-                  alt="SBL"
-                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
-                />
-              </span>
-            </td>
-
-            <td class="station_info" v-else>
               <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('desc.unknown')"
+                :title="$t('sceneries.info.unknown')"
               />
             </td>
 
-            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+            <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>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+              <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
             </td>
 
-            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
+            <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
+              <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
             </td>
 
             <td
-              class="station_schedules all"
-              style="width: 30px"
+              class="station-spawns"
               :class="{ inactive: !station.onlineInfo }"
+              data-tooltip-type="SpawnsTooltip"
+              :data-tooltip-content="JSON.stringify(station.onlineInfo?.spawns ?? [])"
             >
-              {{ station.onlineInfo?.scheduledTrainCount.all }}
+              <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
             </td>
 
             <td
-              class="station_schedules unconfirmed"
+              class="station-schedules all"
               style="width: 30px"
               :class="{ inactive: !station.onlineInfo }"
             >
-              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
+              {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
             </td>
 
             <td
-              class="station_schedules confirmed"
+              class="station-schedules unconfirmed"
               style="width: 30px"
               :class="{ inactive: !station.onlineInfo }"
             >
-              {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
+              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
+            </td>
+
+            <td
+              class="station-schedules confirmed"
+              style="width: 30px"
+              :class="{ inactive: !station.onlineInfo }"
+            >
+              {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
             </td>
           </tr>
         </tbody>
       </table>
     </div>
 
-    <Loading v-if="apiStore.dataStatuses.connection == Status.Loading" />
+    <div class="no-stations" v-else>
+      <div>
+        {{ $t('sceneries.no-stations') }} (region: <b>{{ mainStore.region.name }}</b
+        >)
+      </div>
 
-    <div class="no-stations" v-else-if="stations.length == 0">
-      {{ $t('sceneries.no-stations') }}
+      <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 { useMainStore } from '../../store/mainStore';
+import { 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],
+  mixins: [styleMixin, dateMixin],
 
   data: () => ({
     headIconsIds,
     headIds,
-    lastSelectedStationName: ''
+    lastSelectedStationName: '',
+    getChangedFilters
   }),
 
-  computed: {
-    sorterActive() {
-      return this.stationFiltersStore.sorterActive;
-    }
-  },
-
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
-    const stationFiltersStore = useStationFiltersStore();
+    const tooltipStore = useTooltipStore();
+
+    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);
+      const station = this.filteredStationList.find((station) => station.name === name);
+
       if (!station) return;
 
       this.lastSelectedStationName = station.name;
+      this.tooltipStore.hide();
 
       this.$router.push({
         name: 'SceneryView',
@@ -354,9 +384,10 @@ export default defineComponent({
       });
     },
 
-    openDonationModal(e: Event) {
-      this.$emit('toggleDonationModal', true);
+    openDonationCard(e: Event) {
+      this.$emit('toggleDonationCard', true);
       this.mainStore.modalLastClickedTarget = e.target;
+      this.tooltipStore.hide();
     },
 
     openForumSite(e: Event, url: string | undefined) {
@@ -365,10 +396,14 @@ export default defineComponent({
       window.open(url, '_blank');
     },
 
-    changeSorter(headerName: HeadIdsTypes) {
-      if (headerName == 'general' || headerName == 'routes') return;
+    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;
     }
   }
 });
@@ -381,33 +416,27 @@ 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: 80vh;
+  min-height: 700px;
   overflow: auto;
-  overflow-y: hidden;
   font-weight: 500;
 }
 
-table {
-  white-space: nowrap;
-  border-collapse: collapse;
-  // min-width: 1350px;
-  width: 100%;
+.no-stations {
+  text-align: center;
+  font-size: 1.25em;
+  padding: 1em;
+  background: #1a1a1a;
+  line-height: 1.5em;
+}
 
-  @include smallScreen() {
-    min-width: auto;
-  }
+table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  min-width: 1250px;
+  white-space: wrap;
 
   thead tr {
     background-color: $bgCol;
@@ -417,12 +446,41 @@ table {
     position: sticky;
     top: 0;
 
-    &.header-text {
-      min-width: 140px;
+    &.station {
+      width: 12em;
+    }
+
+    &.min-lvl {
+      width: 4em;
+    }
+
+    &.status {
+      width: 10em;
+    }
+
+    &.dispatcher {
+      width: 12em;
+    }
+
+    &.dispatcher-lvl {
+      width: 6em;
+    }
+
+    &.routes-double,
+    &.routes-single {
+      width: 7em;
+    }
+
+    &.general {
+      width: 11em;
     }
 
     &.header-image {
-      min-width: 60px;
+      width: 3.5em;
+
+      &.user {
+        width: 5em;
+      }
     }
 
     padding: 0.5em 0.25em;
@@ -447,7 +505,7 @@ table {
   }
 }
 
-tr.station {
+tr {
   background-color: $rowCol;
 
   &:nth-child(even) {
@@ -461,10 +519,15 @@ tr.station {
   }
 
   td {
-    padding: 0.25em 1em;
+    padding: 0.15em 0;
     text-align: center;
-
     cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.inactive {
+      opacity: 0.2;
+    }
 
     @include smallScreen() {
       margin: 0;
@@ -474,118 +537,95 @@ tr.station {
   }
 }
 
-td.station {
-  &_name {
-    font-weight: bold;
+.station-name {
+  font-weight: bold;
+  max-width: 200px;
 
-    &.default {
-      color: $accentCol;
-    }
-
-    &.nonPublic {
-      color: #bebebe;
-    }
-
-    &.unavailable {
-      font-weight: 500;
-      color: #bebebe;
-    }
+  &.default {
+    color: $accentCol;
   }
 
-  &_level,
-  &_dispatcher-exp {
-    span {
-      display: block;
-
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      margin: 0 auto;
-    }
-
-    img {
-      width: 2em;
-      border-radius: 50%;
-    }
+  &.nonPublic {
+    color: #bebebe;
   }
 
-  // &_dispatcher-name {
-  //   position: relative;
-  // }
+  &.unavailable {
+    font-weight: 500;
+    color: #bebebe;
+  }
+}
 
-  &_dispatcher-name img {
+.station-level,
+.station-dispatcher-exp {
+  span {
+    display: block;
+
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    margin: 0 auto;
+  }
+
+  img {
+    width: 2em;
+    border-radius: 50%;
+  }
+}
+
+.station-dispatcher-name {
+  img {
     max-width: 1.35em;
     vertical-align: text-bottom;
   }
-
-  &_level {
-    span {
-      background-color: #888;
-      border-radius: 50%;
-    }
-  }
-
-  &_info {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    /* Images */
-    .icon-info {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 32px;
-      height: 32px;
-      font-size: 12px;
-
-      margin: 0 0.2em;
-
-      outline: 2px solid #444;
-      border-radius: 0.5em;
-
-      @include smallScreen() {
-        width: 24px;
-        height: 24px;
-        font-size: 10px;
-      }
-    }
-  }
-
-  &_tracks {
-    .no-catenary {
-      background-color: #939393;
-    }
-
-    .catenary {
-      background-color: #009dce;
-    }
-
-    .track {
-      margin: 0 0.35em;
-      padding: 0.35em;
-      font-size: 1.05em;
-      white-space: pre-wrap;
-    }
-  }
-
-  &_users,
-  &_spawns,
-  &_schedules {
-    &.inactive {
-      opacity: 0.2;
-    }
-  }
 }
 
-.station_users {
+.station-level {
   span {
-    color: gold;
+    background-color: #888;
+    border-radius: 50%;
   }
 }
 
-.station_schedules {
+.station-info {
+  .icon-info {
+    vertical-align: middle;
+    line-height: 2.5em;
+
+    width: 2.5em;
+    height: 2.5em;
+    font-size: 0.8em;
+    margin: 0 3px;
+
+    outline: 2px solid #2b2b2b;
+    border-radius: 5px;
+  }
+}
+
+.station-tracks {
+  .no-catenary {
+    background-color: #939393;
+  }
+
+  .catenary {
+    background-color: #009dce;
+  }
+
+  .separator {
+    background-color: #b3b3b3;
+    padding: 2px;
+  }
+
+  .track {
+    display: inline-block;
+    text-align: center;
+    width: 1.3em;
+    padding: 0.35em 0;
+    font-size: 1.1em;
+    margin: 0 0.2em;
+  }
+}
+
+.station-schedules {
   &.all {
     color: gold;
   }
@@ -598,18 +638,4 @@ td.station {
     color: lime;
   }
 }
-
-.separator {
-  border-left: 3px solid #b3b3b3;
-}
-
-.no-stations {
-  text-align: center;
-  font-size: 1.5em;
-
-  padding: 1em;
-  margin: 1em 0;
-
-  background: #333;
-}
 </style>

src/components/StationsView/typings.ts

@@ -5,51 +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;
-  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;
+export const headIds = [
+  'station',
+  'min-lvl',
+  'status',
+  'dispatcher',
+  'dispatcher-lvl',
+  'routes-single',
+  'routes-double',
+  'general'
+] as const;
 
-  endingStatus: boolean;
-  afkStatus: boolean;
-  noSpaceStatus: boolean;
-  unavailableStatus: boolean;
-  unsignedStatus: boolean;
+export const headIconsIds = [
+  'user',
+  'like',
+  'spawn',
+  'timetableAll',
+  'timetableUnconfirmed',
+  'timetableConfirmed'
+] as const;
 
-  authors: string;
+export type HeadIdsType = (typeof headIds)[number] | (typeof headIconsIds)[number];
 
-  onlineFromHours: 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

@@ -0,0 +1,38 @@
+<template>
+  <div class="tooltip-content">
+    <span>{{ tooltipStore.content }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #333;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/Tooltip/DonatorTooltip.vue

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

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="tooltip" v-show="tooltipStore.type" ref="preview">
+    <component v-if="tooltipStore.type" :is="tooltipStore.type" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+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: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
+
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  },
+
+  watch: {
+    'tooltipStore.mousePos': {
+      deep: true,
+      // [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 = '0',
+            translateY = '30px';
+
+          if (clientWidth < 500) {
+            previewEl.style.left = '50%';
+            translateX = '-50%';
+          } else if (val[0] <= boxWidth / 2) {
+            previewEl.style.left = '0';
+            translateX = '0px';
+          } else if (val[0] >= clientWidth - boxWidth / 2) {
+            previewEl.style.left = '100%';
+            translateX = '-100%';
+          } else {
+            previewEl.style.left = `${val[0]}px`;
+            translateX = '-50%';
+          }
+
+          previewEl.style.top = `${val[1]}px`;
+
+          const isOutside =
+            val[1] + previewEl.getBoundingClientRect().height + 30 >=
+            window.innerHeight + window.scrollY;
+
+          if (isOutside) translateY = 'calc(-100% - 30px)';
+          previewEl.style.transform = `translate(${translateX}, ${translateY})`;
+        });
+      }
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip {
+  position: absolute;
+  z-index: 250;
+  max-width: 400px;
+  text-align: center;
+}
+</style>

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,95 @@
+<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/${tooltipStore.content}--300px.jpg`"
+    />
+
+    <div v-if="imageState == 'error'" class="error-placeholder"></div>
+
+    <div class="vehicle-name">
+      {{ tooltipStore.content.replace(/_/g, ' ') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore(),
+      imageState: 'loading'
+    };
+  },
+
+  mounted() {
+    this.imageState = 'loading';
+  },
+
+  watch: {
+    'tooltipStore.type'(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';
+    }
+  }
+});
+</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;
+  color: #ccc;
+  text-wrap: wrap;
+}
+
+.error-placeholder {
+  height: 176px;
+}
+</style>

src/components/TrainsView/TrainInfo.vue

@@ -1,60 +1,86 @@
 <template>
-  <div class="train-info">
+  <div class="train-info" :data-extended="extended">
     <section class="train-general">
-      <div class="general-info">
-        <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
+      <div class="general-top-bar">
+        <div>
+          <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="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
-            SKR
-          </span>
-        </span>
 
-        <strong>
-          <span v-if="train.timetableData" class="text--primary"
-            >{{ train.timetableData.category }}&nbsp;</span
+          <span
+            class="timetable-warnings"
+            v-if="train.timetableData?.TWR || train.timetableData?.SKR"
           >
-          <span class="train-number">{{ train.trainNo }}</span>
-        </strong>
-        <span>&bull;</span>
-        <b
-          class="level-badge driver"
-          :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-        >
-          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-        </b>
+            <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>
 
-        <div class="train-driver">
+          <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
-            v-if="apiStore.donatorsData.includes(train.driverName)"
-            :title="$t('donations.driver-message')"
+            class="level-badge driver"
+            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
           >
-            {{ train.driverName }}
-            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
           </b>
-          <span v-else>{{ train.driverName }}</span>
+
+          <div class="train-driver">
+            <b
+              v-if="apiStore.donatorsData.includes(train.driverName)"
+              data-tooltip-type="DonatorTooltip"
+              :data-tooltip-content="$t('donations.driver-message')"
+            >
+              {{ train.driverName }}
+              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            </b>
+
+            <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>
-        <img
+        <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          class="image-warning"
-          src="/images/icon-warning.svg"
-          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
             train.timetableData
           )})`"
-        />
+        >
+          <img class="image-warning" src="/images/icon-warning.svg" />
+        </span>
       </div>
 
       <hr style="margin: 0.25em 0" />
@@ -67,7 +93,7 @@
       </div>
 
       <div class="general-status">
-        <div class="timetable-progress" v-if="train.timetableData">
+        <div class="status-timetable-progress" v-if="train.timetableData">
           <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
           <span class="progress-distance">
@@ -91,29 +117,43 @@
         </div>
       </div>
 
-      <div class="driver_position text--grayed" style="margin-top: 0.25em">
+      <div class="general-stats" v-if="extended">
+        <div>
+          <img src="/images/icon-length.svg" alt="length icon" />
+          {{ train.length }}m
+        </div>
+
+        <div>
+          <img src="/images/icon-mass.svg" alt="mass icon" />
+          {{ (train.mass / 1000).toFixed(1) }}t
+        </div>
+
+        <div>
+          <img src="/images/icon-speed.svg" alt="speed icon" />
+          {{ train.speed }} km/h
+        </div>
+      </div>
+
+      <div class="text--grayed" style="margin-top: 0.25em">
         {{ displayTrainPosition(train) }}
       </div>
     </section>
 
-    <section class="train-stats">
-      <TrainThumbnail :name="train.locoType" :onlyFirstSegment="true" />
-
-      <div class="text--grayed">
-        {{ train.locoType }}
-        <span v-if="train.stockList.length > 1">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.stockList.length - 1 }}</span>
-        </span>
-      </div>
+    <section class="train-stats" v-if="!extended">
+      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
 
       <div>
-        <span v-for="(stat, i) in STATS.main" :key="stat.name">
-          <span v-if="i > 0"> &bull; </span>
-          <span
-            >{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
+        <span>{{ train.speed }}km/h</span>
+
+        <div>
+          <span> {{ train.length }}m</span>
+          &bull;
+          <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+          <span v-if="train.stockList.length > 1">
+            &bull;
+            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
           </span>
-        </span>
+        </div>
       </div>
     </section>
   </div>
@@ -123,15 +163,16 @@
 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 TrainThumbnail from '../Global/TrainThumbnail.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';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin],
-  components: { ProgressBar, TrainThumbnail },
+  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
+  components: { ProgressBar, StockList },
 
   props: {
     train: {
@@ -139,8 +180,7 @@ export default defineComponent({
       required: true
     },
     extended: {
-      type: Boolean,
-      default: true
+      type: Boolean
     }
   },
 
@@ -149,25 +189,31 @@ export default defineComponent({
       store: useMainStore(),
       apiStore: useApiStore()
     };
+  },
+
+  methods: {
+    navigateToJournal() {
+      this.$router.push({
+        path: '/journal/timetables',
+        query: {
+          'search-driver': this.train.driverName
+        }
+      });
+
+      this.closeModal();
+    }
   }
 });
 </script>
 
-<!-- Global style for TrainThumbnail -->
-<style lang="scss">
-.train-stats .train-thumbnail {
-  max-width: 100%;
-}
-</style>
-
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 
 .image-warning {
   height: 1em;
-
   margin-left: 0.5em;
+  vertical-align: middle;
 }
 
 .train-stats {
@@ -178,7 +224,7 @@ export default defineComponent({
   flex-direction: column;
   text-align: center;
 
-  gap: 0.25em;
+  line-height: 1.5em;
 }
 
 .train-info {
@@ -186,6 +232,10 @@ export default defineComponent({
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr;
 
+  &[data-extended='true'] {
+    grid-template-columns: 1fr;
+  }
+
   padding: 1em;
 
   background-color: #1a1a1a;
@@ -220,14 +270,29 @@ export default defineComponent({
   font-size: 0.8em;
 }
 
-.general-info {
+.general-top-bar {
   display: flex;
-  align-items: center;
+  justify-content: space-between;
   flex-wrap: wrap;
+  gap: 0.5em;
 
-  gap: 0.25em;
-  margin-right: 1.5em;
+  & > div {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 0.25em;
+  }
 }
+
+.btn-timetable {
+  padding: 0.25em;
+}
+
+.btn-exit {
+  padding: 0.25em;
+}
+
 .general-status {
   display: flex;
   align-items: center;
@@ -236,6 +301,27 @@ export default defineComponent({
   gap: 0.25em;
 }
 
+.general-stats {
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+  }
+
+  img {
+    width: 1.5em;
+  }
+}
+
+.general-timetable {
+  display: flex;
+  align-items: center;
+}
+
 .status-badges {
   display: flex;
   flex-wrap: wrap;
@@ -247,17 +333,7 @@ export default defineComponent({
   }
 }
 
-.general-timetable {
-  display: flex;
-  align-items: center;
-}
-
-.timetable-warnings {
-  display: flex;
-  gap: 0.25em;
-}
-
-.timetable-progress {
+.status-timetable-progress {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -267,32 +343,19 @@ export default defineComponent({
   margin-right: 0.25em;
 }
 
+.timetable-warnings {
+  display: flex;
+  gap: 0.25em;
+}
+
 @include smallScreen() {
   .train-info {
     grid-template-columns: 1fr;
     gap: 1em 0;
-    text-align: center;
-
-    font-size: 1.15em;
   }
 
-  .general-info,
-  .general-status,
-  .general-timetable {
-    justify-content: center;
-  }
-
-  .timetable-progress {
-    justify-content: center;
-  }
-
-  .comments {
-    flex-direction: column;
-    justify-content: center;
-
-    img {
-      margin: 0 0 0.5em 0;
-    }
+  .btn-timetable > span {
+    display: none;
   }
 }
 </style>

src/components/TrainsView/TrainModal.vue

@@ -1,12 +1,8 @@
 <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">
-      <button class="btn exit" @click="closeModal">
-        <img src="/images/icon-exit.svg" alt="close card" />
-      </button>
-
-      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
+    <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>
@@ -17,54 +13,33 @@ import { defineComponent } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import TrainInfo from './TrainInfo.vue';
 import TrainSchedule from './TrainSchedule.vue';
+import { Train } from '../../typings/common';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
   mixins: [modalTrainMixin],
 
-  activated() {
-    const contentEl = this.$refs['content'] as HTMLElement;
+  computed: {
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.id == this.store.chosenModalTrainId);
+    }
+  },
 
-    this.$nextTick(() => {
-      contentEl.focus();
-    });
+  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;
-  }
-}
-
-.exit {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  margin: 0.5em 1em;
-
-  padding: 0.25em;
-
-  z-index: 201;
-
-  img {
-    width: 1.5rem;
-    vertical-align: middle;
-  }
-}
 
 .train-modal {
   position: fixed;
@@ -82,7 +57,7 @@ export default defineComponent({
   text-align: left;
 }
 
-.modal_background {
+.modal-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -94,14 +69,14 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.modal_content {
+.modal-content {
   position: relative;
   overflow-y: scroll;
 
   margin-top: 1em;
 
   width: 95vw;
-  max-height: 96vh;
+  max-height: 95vh;
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;

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>
 
@@ -81,7 +81,6 @@
           </div>
 
           <div class="filter-actions">
-            <div></div>
             <button class="btn--action" @click="resetAllFilters">
               {{ $t('options.filter-reset') }}
             </button>
@@ -223,9 +222,6 @@ export default defineComponent({
 
 .filter-actions {
   display: flex;
-  gap: 0.5em;
-  width: 100%;
-
   margin-top: 1em;
 
   > * {

src/components/TrainsView/TrainSchedule.vue

@@ -81,11 +81,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 { Train } from '../../typings/common';
 
 export interface TrainScheduleStop {
   nameHtml: string;
@@ -181,7 +181,7 @@ export default defineComponent({
             isSBL: /sbl/gi.test(stop.stopName),
             position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
             sceneryHash: '',
-            sceneryName: this.timetableSceneryNames[currentSceneryIndex],
+            sceneryName: this.train.timetableData!.sceneryNames[currentSceneryIndex],
             status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
           };
         }) ?? []
@@ -216,19 +216,6 @@ export default defineComponent({
       }
 
       return activeMinorStopList;
-    },
-
-    timetableSceneryNames() {
-      if (!this.train.timetableData?.sceneries) return [];
-
-      return this.train.timetableData?.sceneries
-        .map(
-          (sceneryHash) =>
-            this.store.onlineSceneryList.find((st) => st.hash === sceneryHash)?.name ??
-            this.apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
-            sceneryHash
-        )
-        .reverse();
     }
   },
 

src/components/TrainsView/TrainTable.vue

@@ -1,26 +1,27 @@
 <template>
   <transition name="status-anim" mode="out-in" tag="div" class="train-table">
     <div :key="apiStore.dataStatuses.connection">
-      <div class="table-info" key="offline" v-if="store.isOffline">
+      <div class="table-warning" key="offline" v-if="store.isOffline">
         {{ $t('app.offline') }}
       </div>
 
       <Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
 
-      <div class="table-info" key="no-trains" v-else-if="trains.length == 0">
-        {{ $t('trains.no-trains') }}
+      <div class="table-warning" key="no-trains" v-else-if="trains.length == 0">
+        {{ $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"
+          :key="train.id"
           tabindex="0"
-          @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
-          @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+          @click.stop="selectModalTrain(train.id, $event.currentTarget)"
+          @keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
         >
-          <TrainInfo :train="train" />
+          <TrainInfo :train="train" :extended="false" />
         </li>
       </transition-group>
     </div>
@@ -30,11 +31,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({
@@ -105,12 +105,11 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
-.table-info {
+.table-warning {
   text-align: center;
 
   padding: 1em 0;
-
-  font-size: 1.5em;
+  font-size: 1.25em;
 
   background: #1a1a1a;
 }

src/components/TrainsView/newFile.ts

@@ -1,14 +0,0 @@
-import { PropType, defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { TrainScheduleStop } from './TrainSchedule.vue';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    stop: {
-      type: Object as PropType<TrainScheduleStop>,
-      required: true
-    }
-  }
-});

src/data/options.json

@@ -1,13 +1,15 @@
 {
   "optionSections": [
+    "status",
+    "timetables",
     "reality",
     "package-access",
+    "station-type",
     "access",
     "control",
-    "addons",
     "blockades",
     "signals",
-    "status"
+    "addons"
   ],
 
   "options": [
@@ -60,6 +62,20 @@
       "value": false,
       "defaultValue": false
     },
+    {
+      "id": "junction",
+      "name": "junction",
+      "section": "station-type",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "nonJunction",
+      "name": "nonJunction",
+      "section": "station-type",
+      "value": true,
+      "defaultValue": true
+    },
     {
       "id": "SPK",
       "name": "SPK",
@@ -138,6 +154,20 @@
       "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",
@@ -228,6 +258,20 @@
       "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": [
@@ -236,6 +280,7 @@
       "name": "minLevel",
       "minRange": 0,
       "maxRange": 20,
+      "step": 1,
       "value": 0,
       "defaultValue": 0
     },
@@ -244,14 +289,34 @@
       "name": "maxLevel",
       "minRange": 0,
       "maxRange": 20,
+      "step": 1,
       "value": 20,
       "defaultValue": 20
     },
+    {
+      "id": "min-vmax",
+      "name": "minVmax",
+      "minRange": 0,
+      "maxRange": 200,
+      "step": 10,
+      "value": 0,
+      "defaultValue": 0
+    },
+    {
+      "id": "max-vmax",
+      "name": "maxVmax",
+      "minRange": 0,
+      "maxRange": 200,
+      "step": 10,
+      "value": 200,
+      "defaultValue": 200
+    },
     {
       "id": "routes-1t-cat",
       "name": "minOneWayCatenary",
       "minRange": 0,
       "maxRange": 5,
+      "step": 1,
       "value": 0,
       "defaultValue": 0
     },
@@ -260,6 +325,7 @@
       "name": "minOneWay",
       "minRange": 0,
       "maxRange": 5,
+      "step": 1,
       "value": 0,
       "defaultValue": 0
     },
@@ -268,6 +334,7 @@
       "name": "minTwoWayCatenary",
       "minRange": 0,
       "maxRange": 5,
+      "step": 1,
       "value": 0,
       "defaultValue": 0
     },
@@ -276,6 +343,7 @@
       "name": "minTwoWay",
       "minRange": 0,
       "maxRange": 5,
+      "step": 1,
       "value": 0,
       "defaultValue": 0
     }

src/http.ts

@@ -1,10 +0,0 @@
-import axios from 'axios';
-
-const http = axios.create({
-  baseURL:
-    import.meta.env.VITE_API_MODE === 'development'
-      ? 'http://localhost:3001'
-      : 'https://stacjownik.spythere.eu'
-});
-
-export default http;

src/i18n.ts

@@ -0,0 +1,19 @@
+import enLang from './locales/en.json';
+import plLang from './locales/pl.json';
+
+import { createI18n } from 'vue-i18n';
+
+const i18n = createI18n({
+  locale: 'pl',
+  legacy: false,
+  warnHtmlMessage: false,
+  fallbackLocale: 'pl',
+
+  messages: {
+    en: enLang,
+    pl: plLang
+  },
+  enableLegacy: false
+});
+
+export default i18n;

src/locales/en.json

@@ -2,6 +2,7 @@
   "donations": {
     "button-title": "TOSS A COIN",
     "header": "Toss a coin to Stacjownik!",
+    "donator-title": "Project is supported by more than <b>{count}</b> people, including:",
     "p1": "<b>Hello o7!</b> This is Spythere, the creator of Stacjownik, Pojazdownik and several other applications that enhance the gameplay of Train Driver 2!",
     "p2": "{b1} is a completely free tool, created and continuously developed for the Train Driver 2 simulator community since 2020. However, a part of the project is sustained solely through my private financial contribution.  Features such as  {b2} or {b3} (operating on my {link} - to which you are warmly invited) must function on a dedicated server where they can collect and process data, and then display it on the website.",
     "p2-b1": "Stacjownik",
@@ -25,6 +26,13 @@
     "TWR": "High risk freight train",
     "SKR": "Train with exceeded gauge"
   },
+  "update": {
+    "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",
     "trains": "TRAINS",
@@ -40,12 +48,10 @@
   "footer": {
     "discord": "Stacjownik Discord server"
   },
-  "update": {
-    "title": "New version of the app is available!",
-    "paragraph1": "Enjoy the application and may the green signal be with you!",
-    "release-link": "Click here to browse version changelog (GitHub)",
-    "confirm-button": "UPDATE NOW",
-    "later-button": "LATER"
+
+  "vehicle-preview": {
+    "loading": "Loading preview...",
+    "error": "Oops! The vehicle preview seems to be missing! :/"
   },
   "data-status": {
     "S1-offline": "<b>S1 signal</b> <br> The app is working in offline mode!",
@@ -57,20 +63,6 @@
     "S5-dispatchers": "<b>S5 signal</b> <br> Cannot load dispatchers status data!",
     "S5-trains": "<b>S5 signal</b> <br> Cannot load online trains data!"
   },
-  "desc": {
-    "control-type": "Control type: ",
-    "signals-type": "Signals type:  ",
-    "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
-    "SUP": "Requires the SUP application (level crossing remote control simulator)",
-    "TWB-all": "This scenery has two-way route blockade on all routes",
-    "TWB-routes": "This scenery has two-way route blockade on following routes: ",
-    "default": "This scenery is available by default",
-    "non-public": "This scenery is not public",
-    "unknown": "This scenery isn't recognizable right now",
-    "unavailable": "This scenery is unavailable",
-    "abandoned": "This scenery is no longer supported by its creators",
-    "real": "Scenery with real lines: "
-  },
   "signals": {
     "title": "Signal type",
     "współczesna": "modern",
@@ -89,7 +81,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 ",
@@ -169,16 +174,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"
+      "status": "ONLINE STATUS",
+      "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",
 
@@ -189,11 +200,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",
@@ -203,13 +214,15 @@
     "SCS-R": "SCS + MANUAL",
     "SCS-M": "SCS + MECH.",
     "SPE": "SPE",
-
     "manual": "MANUAL",
     "mechanical": "MECHANICAL",
 
     "SUP": "SUP (RASP-UZK)",
     "noSUP": "WITHOUT SUP",
 
+    "ASDEK": "ASDEK",
+    "noASDEK": "NO ASDEK",
+
     "SBL": "AUTOMATIC (SBL)",
     "PBL": "SEMIAUTOMATIC (PBL)",
 
@@ -219,14 +232,24 @@
     "historical": "HISTORICAL",
     "free": "FREE",
     "occupied": "OCCUPIED",
+
+    "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"
     },
+
     "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
     "authors-placeholder": "Enter the author nickname...",
     "authors-button-title": "Search",
@@ -241,20 +264,53 @@
     "close": "CLOSE FILTERS"
   },
   "sceneries": {
-    "station": "Station",
-    "min-lvl": "Min. dispatcher\nlevel",
-    "status": "Status",
-    "dispatcher": "Dispatcher",
-    "dispatcher-lvl": "Dispatcher\nlevel",
-    "routes": "Routes\ndouble / single",
-    "general": "General info",
-    "user": "Drivers online",
-    "spawn": "Spawns online",
-    "timetableAll": "Active timetables",
-    "timetableConfirmed": "Confirmed timetables",
-    "timetableUnconfirmed": "Unconfirmed timetables",
+    "headers": {
+      "station": "Scenery",
+      "min-lvl": "Scenery\nlevel",
+      "status": "Status",
+      "dispatcher": "Dispatcher",
+      "dispatcher-lvl": "Dispatcher\nlevel",
+      "routes-single": "1-track\nroutes",
+      "routes-double": "2-track\nroutes",
+      "general": "General info",
+      "user": "Drivers online",
+      "like": "Dispatcher rating",
+      "spawn": "Spawns online",
+      "timetableAll": "Active timetables",
+      "timetableConfirmed": "Confirmed timetables",
+      "timetableUnconfirmed": "Unconfirmed timetables"
+    },
+    "info": {
+      "control-type": "Control type: ",
+      "signals-type": "Signals type: ",
+      "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
+      "SUP": "Requires the SUP program (level crossing remote control)",
+      "ASDEK": "Requires the ASDEK program (defect detection of moving rolling stock)",
+      "TWB-all": "This scenery has two-way route blockade on all routes",
+      "TWB-routes": "This scenery has two-way route blockade on following routes: ",
+      "default": "This scenery is available by default",
+      "non-public": "This scenery is not public",
+      "unavailable": "This scenery is unavailable",
+      "abandoned": "This scenery is no longer supported by its creators",
+      "unknown": "This scenery isn't recognizable right now",
+      "real": "Scenery with real lines: ",
+      "double-track-routes-catenary": "Electrified double-track routes count: ",
+      "single-track-routes-catenary": "Electrified single-track routes count: ",
+      "double-track-routes-other": "Not electrified double-track routes count: ",
+      "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!",
@@ -297,7 +353,9 @@
     "last-seen-ago": "since {minutes} minutes",
 
     "scenery-offline": "Offline ride",
-    "timeout": "An error occured while trying to refresh SWDR timetable data!"
+    "timeout": "An error occured while trying to refresh SWDR timetable data!",
+
+    "journal-button": "DRIVER'S JOURNAL"
   },
   "train-stats": {
     "stats-button": "STATISTICS",
@@ -333,6 +391,7 @@
     "timetable-active": "ACTIVE",
     "timetable-fulfilled": "FULFILLED",
     "timetable-abandoned": "ABANDONED",
+    "timetable-online-button": "ONLINE TIMETABLE",
 
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",
@@ -341,7 +400,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",

src/locales/pl.json

@@ -2,8 +2,9 @@
   "donations": {
     "button-title": "GROSZA DAJ",
     "header": "Grosza daj Stacjownikowi!",
+    "donator-title": "Projekt ma już ponad <b>{count}</b> wspierających, w tym:",
     "p1": "<b>Hej o7!</b> Z tej strony Spythere, twórca Stacjownika, Pojazdownika oraz kilku innych aplikacji wspomagających rozgrywkę symulatora Train Driver 2!",
-    "p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdeczne zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
+    "p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdecznie zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
     "p2-b1": "Stacjownik",
     "p2-b2": "Dziennik",
     "p2-b3": "Stacjobot",
@@ -25,6 +26,13 @@
     "TWR": "Towar niebezpieczny wysokiego ryzyka",
     "SKR": "Przekroczona skrajnia"
   },
+  "update": {
+    "title": "Aktualizacja Stacjownika!",
+    "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",
     "trains": "POCIĄGI",
@@ -37,6 +45,10 @@
   "footer": {
     "discord": "Serwer Discord Stacjownika"
   },
+  "vehicle-preview": {
+    "loading": "Ładowanie podglądu...",
+    "error": "Ups! Nie znaleziono podglądu pojazdu! :/"
+  },
   "data-status": {
     "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
     "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
@@ -47,18 +59,6 @@
     "S5-dispatchers": "<b>Sygnał S5</b> <br> Błąd podczas pobierania danych o statusach dyżurnych ruchu!",
     "S5-trains": "<b>Sygnał S5</b>  <br> Błąd podczas pobierania danych o pociągach online!"
   },
-  "desc": {
-    "control-type": "Sterowanie:",
-    "signals-type": "Sygnalizacja:",
-    "SBL": "Sceneria posiada SBL na szlakach:",
-    "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
-    "default": "Sceneria dostępna domyślnie w paczce z grą",
-    "non-public": "Sceneria niepubliczna",
-    "unavailable": "Sceneria niedostępna",
-    "unknown": "Nieznana sceneria",
-    "real": "Sceneria z realnymi liniami kolejowymi:",
-    "abandoned": "Sceneria wycofana z rozgrywki"
-  },
   "signals": {
     "title": "Sygnalizacja",
     "współczesna": "współczesna",
@@ -77,7 +77,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 +108,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:",
@@ -158,16 +171,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"
+      "status": "STATUS ONLINE",
+      "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",
 
@@ -178,11 +197,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",
@@ -197,6 +216,9 @@
     "SUP": "SUP (RASP-UZK)",
     "noSUP": "BEZ SUP",
 
+    "ASDEK": "ASDEK",
+    "noASDEK": "BEZ ASDEK-a",
+
     "SBL": "SAMOCZYNNA",
     "PBL": "PÓŁSAMOCZYNNA",
 
@@ -205,17 +227,24 @@
     "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):",
@@ -231,21 +260,51 @@
     "close": "ZAMKNIJ FILTRY"
   },
   "sceneries": {
-    "station": "Stacja",
-    "abbr": "Skrót\nposterunku",
-    "min-lvl": "Min. poziom\ndyżurnego",
-    "status": "Status",
-    "dispatcher": "Dyżurny",
-    "dispatcher-lvl": "Poziom\ndyżurnego",
-    "routes": "Szlaki\n2tor / 1tor",
-    "general": "Informacje\nogólne",
-    "user": "Maszyniści online",
-    "spawn": "Otwarte spawny",
-    "timetableAll": "Aktywne rozkłady jazdy",
-    "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
-    "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy",
+    "headers": {
+      "station": "Sceneria",
+      "min-lvl": "Poziom\nscenerii",
+      "status": "Status",
+      "dispatcher": "Dyżurny",
+      "dispatcher-lvl": "Poziom\ndyżurnego",
+      "routes-single": "Szlaki\n1-torowe",
+      "routes-double": "Szlaki\n2-torowe",
+      "general": "Informacje\nogólne",
+      "user": "Maszyniści online",
+      "like": "Ocena dyżurnego",
+      "spawn": "Otwarte spawny",
+      "timetableAll": "Aktywne rozkłady jazdy",
+      "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
+      "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy"
+    },
+    "info": {
+      "control-type": "Sterowanie: ",
+      "signals-type": "Sygnalizacja: ",
+      "SBL": "Sceneria posiada SBL na szlakach: ",
+      "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
+      "ASDEK": "Wymaga programu ASDEK do detekcji stanów awaryjnych taboru w ruchu",
+      "default": "Sceneria dostępna domyślnie w paczce z grą",
+      "non-public": "Sceneria niepubliczna",
+      "unavailable": "Sceneria niedostępna",
+      "abandoned": "Sceneria wycofana z rozgrywki",
+      "unknown": "Nieznana sceneria",
+      "real": "Sceneria z realnymi liniami kolejowymi: ",
+      "double-track-routes-catenary": "Liczba zelektryfikowanych szlaków dwutorowych: ",
+      "single-track-routes-catenary": "Liczba zelektryfikowanych szlaków jednotorowych: ",
+      "double-track-routes-other": "Liczba niezelektryfikowanych szlaków dwutorowych: ",
+      "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!",
@@ -279,7 +338,9 @@
 
     "scenery-offline": "Przejazd offline",
 
-    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
+    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
+
+    "journal-button": "DZIENNIK MASZYNISTY"
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -321,8 +382,9 @@
     "timetable-active": "AKTYWNY",
     "timetable-fulfilled": "WYPEŁNIONY",
     "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.",

src/main.ts

@@ -2,28 +2,19 @@ import { createApp, Directive, ref } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-import enLang from './locales/en.json';
-import plLang from './locales/pl.json';
+import i18n from './i18n';
 
-import { createI18n } from 'vue-i18n';
 import { createPinia } from 'pinia';
-import useCustomSW from './mixins/useCustomSW';
+import { registerSW } from 'virtual:pwa-register';
 
-const i18n = createI18n({
-  locale: 'pl',
-  legacy: false,
-  warnHtmlMessage: false,
-  fallbackLocale: 'pl',
-  messages: {
-    en: enLang,
-    pl: plLang
-  },
-  enableLegacy: false
+// Service worker
+registerSW({
+  immediate: true,
+  onNeedRefresh() {
+    console.log('Needs refresh!');
+  }
 });
 
-// SW
-useCustomSW();
-
 const clickOutsideDirective: Directive = {
   mounted(el, binding) {
     el.clickOutsideEvent = (event: Event) => {

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,19 +1,15 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../store/mainStore';
+import { useTooltipStore } from '../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      store: useMainStore(),
+      tooltipStore: useTooltipStore()
     };
   },
 
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
-    }
-  },
-
   methods: {
     selectModalTrain(trainId: string, target?: EventTarget | null) {
       this.store.chosenModalTrainId = trainId;
@@ -23,6 +19,7 @@ export default defineComponent({
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
+      this.tooltipStore.hide();
 
       setTimeout(() => {
         (this.store.modalLastClickedTarget as any)?.focus();

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/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) {
@@ -148,11 +147,6 @@ export default defineComponent({
       if (distance < 1000) return `${distance}m`;
 
       return `${(distance / 1000).toPrecision(2)}km`;
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

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

@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import JournalDispatchersVue from '../views/JournalDispatchers.vue';
-import JournalTimetablesVue from '../views/JournalTimetables.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -38,7 +36,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/timetables',
     name: 'JournalTimetables',
-    component: JournalTimetablesVue,
+    component: () => import('../views/JournalTimetables.vue'),
     props: (route) => ({
       region: route.query.region
     })
@@ -46,7 +44,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/dispatchers',
     name: 'JournalDispatchers',
-    component: JournalDispatchersVue,
+    component: () => import('../views/JournalDispatchers.vue'),
     props: (route) => ({
       region: route.query.region
     })

src/scripts/data/stationHeaderNames.ts

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

src/scripts/interfaces/Station.ts

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

src/scripts/interfaces/StationRoutes.ts

@@ -1,13 +0,0 @@
-import { StationRoutesInfo } from '../../store/typings';
-
-export interface StationRoutes {
-  oneWay: StationRoutesInfo[];
-  twoWay: StationRoutesInfo[];
-
-  /* [catenary, noCatenary] */
-  oneWayCatenaryRouteNames: string[];
-  oneWayNoCatenaryRouteNames: string[];
-  twoWayCatenaryRouteNames: string[];
-  twoWayNoCatenaryRouteNames: string[];
-  sblRouteNames: string[];
-}

src/scripts/interfaces/Train.ts

@@ -1,37 +0,0 @@
-import { TrainStop } from '../../store/typings';
-
-export default interface Train {
-  trainId: string;
-
-  mass: number;
-  length: number;
-  speed: number;
-  signal: string;
-  distance: number;
-  connectedTrack: string;
-  driverId: number;
-  trainNo: number;
-  driverName: string;
-  driverLevel: number;
-  currentStationName: string;
-  currentStationHash: string;
-  locoType: string;
-  online: boolean;
-  lastSeen: number;
-  region: string;
-  stockList: string[];
-
-  isTimeout: boolean;
-  isSupporter: boolean;
-
-  timetableData?: {
-    timetableId: number;
-    category: string;
-    route: string;
-    followingStops: TrainStop[];
-    TWR: boolean;
-    SKR: boolean;
-    routeDistance: number;
-    sceneries: string[];
-  };
-}

src/scripts/utils/filterUtils.ts

@@ -1,191 +0,0 @@
-import { Filter } from '../../components/StationsView/typings';
-import { Status } from '../../typings/common';
-import { HeadIdsTypes } from '../data/stationHeaderNames';
-import Station from '../interfaces/Station';
-
-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
-];
-
-export const sortStations = (
-  a: Station,
-  b: Station,
-  sorter: { headerName: HeadIdsTypes; dir: number }
-) => {
-  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 'user':
-      diff =
-        (b.onlineInfo ? b.onlineInfo.currentUsers : -1) -
-        (a.onlineInfo ? a.onlineInfo.currentUsers : -1);
-      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: Filter) => {
-  if (!station.onlineInfo && filters['free']) return false;
-
-  if (station.onlineInfo) {
-    const { dispatcherStatus } = station.onlineInfo;
-
-    const isEnding = dispatcherStatus == Status.ActiveDispatcher.ENDING && filters['endingStatus'];
-
-    const isNotSigned =
-      (dispatcherStatus == Status.ActiveDispatcher.NOT_LOGGED_IN ||
-        dispatcherStatus == Status.ActiveDispatcher.UNAVAILABLE) &&
-      filters['unavailableStatus'];
-
-    const isAFK = dispatcherStatus == Status.ActiveDispatcher.AFK && filters['afkStatus'];
-
-    const isNoSpace =
-      dispatcherStatus == Status.ActiveDispatcher.NO_SPACE && filters['noSpaceStatus'];
-
-    const isOccupied = station.onlineInfo && filters['occupied'];
-
-    if (isEnding || isNotSigned || isAFK || isNoSpace || isOccupied) return false;
-
-    if (
-      filters['onlineFromHours'] > 0 &&
-      dispatcherStatus <= Date.now() + filters['onlineFromHours'] * 3600000
-    )
-      return false;
-  }
-
-  if (
-    (station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) &&
-    filters['nonPublic']
-  )
-    return false;
-
-  if (station.generalInfo) {
-    const { routes, availability, controlType, lines, reqLevel, signalType, SUP, authors } =
-      station.generalInfo;
-
-    if (availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
-      return false;
-    if (availability == 'abandoned' && filters['abandoned'] && !station.onlineInfo) return false;
-    if (availability == 'default' && filters['default']) return false;
-
-    if (
-      availability != 'default' &&
-      filters['notDefault'] &&
-      !(availability == 'abandoned' || availability == 'unavailable')
-    )
-      return false;
-
-    if (filters['real'] && lines) return false;
-    if (filters['fictional'] && !lines) return false;
-
-    const otherAvailability =
-      availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
-
-    if (reqLevel + (otherAvailability ? 1 : 0) < filters['minLevel']) return false;
-
-    if (reqLevel + (otherAvailability ? 1 : 0) > filters['maxLevel']) return false;
-
-    if (
-      filters['no-1track'] &&
-      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
-    )
-      return false;
-
-    if (
-      filters['no-2track'] &&
-      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
-    )
-      return false;
-
-    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return false;
-    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return false;
-
-    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return false;
-    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return false;
-
-    if (filters[controlType]) return false;
-    if (filters[signalType]) return false;
-
-    if (filters['SUP'] && SUP) return false;
-    if (filters['noSUP'] && !SUP) return false;
-
-    if (filters['SBL'] && routes.sblRouteNames.length > 0) return false;
-    if (filters['PBL'] && routes.sblRouteNames.length == 0) return false;
-
-    if (
-      filters['authors'].length > 3 &&
-      !authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
-    )
-      return false;
-  }
-
-  return true;
-};

src/store/apiStore.ts

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia';
-import http from '../http';
 import { API } from '../typings/api';
-import axios from 'axios';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
+import axios, { AxiosInstance } from 'axios';
 
-// Update seconds cron for active data scheduler
-const UPDATE_SECONDS = [3, 23, 43];
+export enum APIMode {
+  PRODUCTION = 0,
+  DEV = 1,
+  MOCK = 2
+}
 
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
@@ -16,45 +18,55 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     activeData: undefined as API.ActiveData.Response | undefined,
-    rollingStockData: undefined as API.RollingStock.Response | undefined,
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
 
+    lastFetchData: new Date(),
+
+    client: undefined as AxiosInstance | undefined,
+
     activeDataScheduler: undefined as number | undefined
   }),
 
   actions: {
     async setupAPIData() {
-      // Static data
-      this.fetchStockInfoData();
-      this.fetchDonatorsData();
-      this.fetchStationsGeneralInfo();
+      let baseURL = 'https://stacjownik.spythere.eu';
 
-      // Active data schedueler
-      this.fetchActiveData();
-      this.setupActiveDataFetcher();
+      switch (import.meta.env.VITE_API_MODE) {
+        case 'development':
+          baseURL = 'http://localhost:3001';
+          break;
+        case 'mocking':
+          baseURL = 'http://localhost:3123';
+          break;
+        default:
+          break;
+      }
+
+      this.client = axios.create({
+        baseURL
+      });
+
+      this.connectToAPI();
     },
 
-    async setupActiveDataFetcher() {
-      if (this.activeDataScheduler) return;
-
-      this.dataStatuses.connection = Status.Data.Loading;
-
-      this.activeDataScheduler = window.setInterval(() => {
-        if (UPDATE_SECONDS.includes(new Date().getSeconds())) {
-          this.fetchActiveData();
-        }
-      }, 1000);
+    async connectToAPI() {
+      // Static data
+      this.fetchDonatorsData();
+      this.fetchStationsGeneralInfo();
     },
 
     async fetchActiveData() {
+      if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
+
       try {
-        const response = await http.get<API.ActiveData.Response>('api/getActiveData');
+        console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
+
+        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
 
         this.activeData = response.data;
+        this.lastFetchData = new Date();
         this.dataStatuses.connection = Status.Data.Loaded;
-
-        console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
       } catch (error) {
         this.dataStatuses.connection = Status.Data.Error;
         console.error('Ups! Wystąpił błąd podczas pobierania danych online:', error);
@@ -63,7 +75,7 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDonatorsData() {
       try {
-        const response = await http.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
 
         this.donatorsData = response.data;
       } catch (error) {
@@ -71,21 +83,10 @@ export const useApiStore = defineStore('apiStore', {
       }
     },
 
-    async fetchStockInfoData() {
-      try {
-        this.rollingStockData = (
-          await axios.get<API.RollingStock.Response>(
-            'https://raw.githubusercontent.com/Spythere/api/main/td2/data/stockInfo.json'
-          )
-        ).data;
-      } catch (error) {
-        console.error('Ups! Wystąpił błąd podczas pobierania informacji o taborze z API:', error);
-      }
-    },
-
     async fetchStationsGeneralInfo() {
-      const sceneryData: StationJSONData[] = (await http.get<StationJSONData[]>('api/getSceneries'))
-        .data;
+      const sceneryData: StationJSONData[] = (
+        await this.client!.get<StationJSONData[]>('api/getSceneries')
+      ).data;
 
       if (!sceneryData) {
         this.dataStatuses.sceneries = Status.Data.Error;

src/store/mainStore.ts

@@ -1,20 +1,27 @@
 import { defineStore } from 'pinia';
-import Train from '../scripts/interfaces/Train';
-import { parseSpawns, getScheduledTrains, getStationTrains } from './utils';
+import { parseSpawns } from './utils';
 
-import { OnlineScenery, ScheduledTrain, StoreState } from './typings';
-
-import { Status } from '../typings/common';
-import Station from '../scripts/interfaces/Station';
+import {
+  ActiveScenery,
+  CheckpointTrain,
+  Station,
+  StationRoutes,
+  Status,
+  Train
+} from '../typings/common';
 import { useApiStore } from './apiStore';
-import { StationRoutes } from '../scripts/interfaces/StationRoutes';
+import { MainStoreState } from './typings';
 
-export const useMainStore = defineStore('store', {
+const checkpointsTrains: Map<string, CheckpointTrain[]> = new Map();
+const sceneriesTrains: Map<string, Train[]> = new Map();
+
+export const useMainStore = defineStore('mainStore', {
   state: () =>
     ({
-      region: { id: 'eu', value: 'PL1' },
+      region: { id: 'eu', value: 'PL1', name: 'PL1' },
 
       isOffline: false,
+      appUpdate: null,
 
       dispatcherStatsName: '',
       dispatcherStatsStatus: Status.Data.Initialized,
@@ -25,15 +32,21 @@ export const useMainStore = defineStore('store', {
 
       chosenModalTrainId: undefined,
 
-      blockScroll: false,
       modalLastClickedTarget: null
-    }) as StoreState,
+    }) as MainStoreState,
 
   getters: {
+    checkpointsTrains() {
+      return checkpointsTrains;
+    },
+
     trainList(): Train[] {
       const apiStore = useApiStore();
 
-      return (apiStore.activeData?.trains ?? [])
+      checkpointsTrains.clear();
+      sceneriesTrains.clear();
+
+      const x = (apiStore.activeData?.trains ?? [])
         .filter((train) => train.timetable || train.online)
         .map((train) => {
           const stock = train.stockString.split(';');
@@ -41,8 +54,17 @@ export const useMainStore = defineStore('store', {
 
           const timetable = train.timetable;
 
-          return {
-            trainId: train.driverName + train.trainNo.toString(),
+          const sceneryNames =
+            train.timetable?.sceneries?.map(
+              (sceneryHash) =>
+                apiStore.activeData?.activeSceneries?.find((st) => st.stationHash === sceneryHash)
+                  ?.stationName ??
+                apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
+                sceneryHash
+            ) ?? [];
+
+          const trainObj = {
+            id: train.id,
 
             trainNo: train.trainNo,
             mass: train.mass,
@@ -76,49 +98,108 @@ export const useMainStore = defineStore('store', {
                   category: timetable.category,
                   followingStops: timetable.stopList,
                   routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
-                  sceneries: timetable.sceneries
+                  sceneries: timetable.sceneries,
+                  sceneryNames: sceneryNames.reverse()
                 }
               : undefined
           } as Train;
+
+          // Sceneries trains map
+          if (sceneriesTrains.has(train.currentStationName)) {
+            sceneriesTrains.set(train.currentStationName, [
+              ...sceneriesTrains.get(train.currentStationName)!,
+              trainObj
+            ]);
+          } else sceneriesTrains.set(train.currentStationName, [trainObj]);
+
+          // Checkpoints trains map
+          timetable?.stopList.forEach((stop, i) => {
+            if (/strong|podg\.|pe\./.test(stop.stopName)) {
+              const checkpointTrain: CheckpointTrain = {
+                train: trainObj,
+                checkpointStop: stop
+              };
+
+              if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
+                checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
+                  ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
+                  checkpointTrain
+                ]);
+              } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+            }
+          });
+
+          return trainObj;
         });
+
+      return x;
     },
 
-    onlineSceneryList(state): OnlineScenery[] {
+    // computed active sceneries
+    activeSceneryList(state): ActiveScenery[] {
       const apiStore = useApiStore();
 
       if (state.isOffline) return [];
+
       if (!apiStore.activeData?.activeSceneries) return [];
 
-      return apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
+      console.time('activeSceneryList');
+      const offlineActiveSceneries = this.trainList.reduce((acc, train) => {
+        if (!train.timetableData) return acc;
+
+        train.timetableData.sceneryNames.forEach((name) => {
+          if (
+            acc.findIndex((v) => v.name == name && v.region == train.region) != -1 ||
+            apiStore.activeData?.activeSceneries?.findIndex(
+              (sc) =>
+                sc.stationName === name &&
+                sc.region == train.region &&
+                Date.now() - sc.lastSeen < 1000 * 60 * 2
+            ) != -1
+          )
+            return acc;
+
+          acc.push({
+            name: name,
+            hash: '',
+            region: train.region,
+            maxUsers: 0,
+            currentUsers: 0,
+            spawns: [],
+            dispatcherName: '',
+            dispatcherRate: 0,
+            dispatcherId: -1,
+            dispatcherExp: -1,
+            dispatcherIsSupporter: false,
+            dispatcherStatus: Status.ActiveDispatcher.FREE,
+            dispatcherTimestamp: -1,
+
+            isOnline: false,
+
+            stationTrains: [],
+            scheduledTrains: [],
+
+            scheduledTrainCount: {
+              all: 0,
+              confirmed: 0,
+              unconfirmed: 0
+            }
+          });
+        });
+
+        return acc;
+      }, [] as ActiveScenery[]);
+
+      const onlineActiveSceneries = apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
         if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return list;
         if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return list;
 
-        const station = this.stationList.find((s) => s.name === scenery.stationName);
-
-        const scheduledTrains = getScheduledTrains(this.trainList, scenery, station?.generalInfo);
-
-        const stationTrains = getStationTrains(
-          this.trainList,
-          scheduledTrains,
-          this.region.id,
-          scenery
-        );
-
-        // Remove checkpoint duplicates
-        const uniqueScheduledTrains = scheduledTrains.reduce(
-          (uniqueList, sTrain) =>
-            uniqueList.find((v) => v.trainId === sTrain.trainId)
-              ? uniqueList
-              : [...uniqueList, sTrain],
-          [] as ScheduledTrain[]
-        );
-
         const dispatcherTimestamp =
           scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
             ? Date.now() + 25500000
             : scenery.dispatcherStatus > 5
-            ? scenery.dispatcherStatus
-            : null;
+              ? scenery.dispatcherStatus
+              : null;
 
         list.push({
           name: scenery.stationName,
@@ -132,51 +213,103 @@ export const useMainStore = defineStore('store', {
           dispatcherId: scenery.dispatcherId,
           dispatcherExp: scenery.dispatcherExp,
           dispatcherIsSupporter: scenery.dispatcherIsSupporter,
-          scheduledTrains: scheduledTrains,
-          stationTrains: stationTrains,
           dispatcherStatus: scenery.dispatcherStatus,
           dispatcherTimestamp: dispatcherTimestamp,
 
           isOnline: scenery.isOnline == 1,
 
+          stationTrains: [],
+          scheduledTrains: [],
+
           scheduledTrainCount: {
-            all: uniqueScheduledTrains.length,
-            confirmed: uniqueScheduledTrains.filter((train) => train.stopInfo.confirmed).length,
-            unconfirmed: uniqueScheduledTrains.filter((train) => !train.stopInfo.confirmed).length
+            all: 0,
+            confirmed: 0,
+            unconfirmed: 0
           }
         });
 
         return list;
-      }, [] as OnlineScenery[]);
+      }, [] as ActiveScenery[]);
+
+      const allActiveSceneries = [...onlineActiveSceneries, ...offlineActiveSceneries];
+
+      for (let i = 0, n = allActiveSceneries.length; i < n; i++) {
+        const scenery = allActiveSceneries[i];
+
+        const station = this.stationList.find((s) => s.name === scenery.name);
+
+        const checkpoints = [scenery.name];
+        if (station?.generalInfo?.checkpoints && station.generalInfo.checkpoints.length > 0)
+          checkpoints.push(...station.generalInfo.checkpoints.filter((cp) => cp !== station.name));
+
+        scenery.stationTrains =
+          sceneriesTrains.get(scenery.name)?.filter((sc) => sc.region == this.region.id) ?? [];
+
+        const uniqueTrainIds: string[] = [];
+        checkpoints.forEach((cp) => {
+          const scheduledTrains = checkpointsTrains.get(cp.toLowerCase());
+
+          if (!scheduledTrains) return;
+
+          scheduledTrains.forEach(({ train, checkpointStop }) => {
+            scenery.scheduledTrains.push({ train, checkpointStop });
+
+            if (uniqueTrainIds.includes(train.id) || train.region != this.region.id) return;
+
+            scenery.scheduledTrainCount.all += 1;
+
+            if (checkpointStop.confirmed) scenery.scheduledTrainCount.confirmed++;
+            else scenery.scheduledTrainCount.unconfirmed++;
+
+            uniqueTrainIds.push(train.id);
+          });
+        });
+      }
+
+      console.timeEnd('activeSceneryList');
+
+      return allActiveSceneries;
     },
 
+    // computed station data
     stationList(): Station[] {
       const apiStore = useApiStore();
 
       return apiStore.sceneryData.map((scenery) => {
         const routes = scenery.routesInfo.reduce(
           (acc, route) => {
-            const tracksKey = route.routeTracks == 2 ? 'twoWay' : 'oneWay';
+            if (route.hidden) return acc;
+
+            const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
             const isElectric = route.isElectric;
             const routesKey: keyof StationRoutes = `${tracksKey}${
-              !isElectric ? 'No' : ''
-            }CatenaryRouteNames`;
+              !isElectric ? 'Other' : 'Electrified'
+            }Names`;
 
             if (!route.isInternal) acc[routesKey].push(route.routeName);
-            if (route.isRouteSBL) acc['sblRouteNames'].push(route.routeName);
+            if (route.isRouteSBL) acc['sblNames'].push(route.routeName);
+
+            acc.minRouteSpeed =
+              acc.minRouteSpeed == 0
+                ? route.routeSpeed
+                : Math.min(route.routeSpeed, acc.minRouteSpeed);
+
+            acc.maxRouteSpeed = Math.max(route.routeSpeed, acc.maxRouteSpeed);
 
             acc[tracksKey].push(route);
 
             return acc;
           },
           {
-            oneWay: [],
-            oneWayCatenaryRouteNames: [],
-            oneWayNoCatenaryRouteNames: [],
-            twoWay: [],
-            twoWayCatenaryRouteNames: [],
-            twoWayNoCatenaryRouteNames: [],
-            sblRouteNames: []
+            single: [],
+            singleElectrifiedNames: [],
+            singleOtherNames: [],
+            double: [],
+            doubleElectrifiedNames: [],
+            doubleOtherNames: [],
+            sblNames: [],
+            minRouteSpeed: 0,
+            maxRouteSpeed: 0
           } as StationRoutes
         );
 
@@ -187,14 +320,37 @@ export const useMainStore = defineStore('store', {
             ...scenery,
             authors: scenery.authors?.split(',').map((a) => a.trim()),
             routes: routes,
-            checkpoints: scenery.checkpoints
-              ? scenery.checkpoints
-                  .split(';')
-                  .map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
-              : []
+            checkpoints:
+              scenery.checkpoints && scenery.checkpoints.trim().length > 0
+                ? scenery.checkpoints.split(';')
+                : []
           }
         };
       });
+    },
+
+    allStationInfo(): Station[] {
+      const onlineUnsavedStations = this.activeSceneryList
+        .filter(
+          (scenery) =>
+            this.stationList.findIndex((st) => st.name == scenery.name) == -1 &&
+            scenery.region == this.region.id
+        )
+        .map((os) => ({
+          name: os.name,
+          generalInfo: undefined,
+          onlineInfo: os
+        }));
+
+      return [
+        ...onlineUnsavedStations,
+        ...this.stationList.map((st) => ({
+          ...st,
+          onlineInfo: this.activeSceneryList.find(
+            (os) => os.name == st.name && os.region == this.region.id
+          )
+        }))
+      ];
     }
   }
 });

src/store/stationFiltersStore.ts

@@ -1,155 +0,0 @@
-import { defineStore } from 'pinia';
-import inputData from '../data/options.json';
-import { useMainStore } from './mainStore';
-import { filterStations, sortStations } from '../scripts/utils/filterUtils';
-import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
-import StorageManager from '../managers/storageManager';
-import { Filter } from '../components/StationsView/typings';
-
-const filterInitStates: Filter = {
-  default: false,
-  notDefault: false,
-  real: false,
-  fictional: false,
-  SPK: false,
-  SCS: false,
-  SPE: false,
-  SUP: false,
-  noSUP: false,
-  ręczne: false,
-  'ręczne+SPK': false,
-  'ręczne+SCS': false,
-  mechaniczne: false,
-  'mechaniczne+SPK': false,
-  'mechaniczne+SCS': false,
-  współczesna: false,
-  kształtowa: false,
-  historyczna: false,
-  mieszana: false,
-  SBL: false,
-  PBL: false,
-  minLevel: 0,
-  maxLevel: 20,
-  minOneWayCatenary: 0,
-  minOneWay: 0,
-  minTwoWayCatenary: 0,
-  minTwoWay: 0,
-  'include-selected': false,
-  'no-1track': false,
-  'no-2track': false,
-  free: true,
-  occupied: false,
-  ending: false,
-  nonPublic: false,
-  unavailable: true,
-  abandoned: true,
-  afkStatus: false,
-  endingStatus: false,
-  noSpaceStatus: false,
-  unavailableStatus: false,
-  unsignedStatus: false,
-
-  authors: '',
-
-  onlineFromHours: 0
-};
-
-export const useStationFiltersStore = defineStore('stationFiltersStore', {
-  state() {
-    return {
-      inputs: inputData,
-      filters: { ...filterInitStates },
-      sorterActive: { headerName: 'station' as HeadIdsTypes, dir: 1 },
-      lastClickedFilterId: ''
-    };
-  },
-
-  getters: {
-    areFiltersAtDefault: (state) => {
-      return Object.keys(state.filters).every((f) => state.filters[f] === filterInitStates[f]);
-    },
-
-    filteredStationList: (state) => {
-      const store = useMainStore();
-      const savedStationNames = store.stationList.map((s) => s.name);
-
-      const onlineUnsavedStations = store.onlineSceneryList
-        .filter((os) => !savedStationNames.includes(os.name) && os.region == store.region.id)
-        .map((os) => ({
-          name: os.name,
-          generalInfo: undefined,
-          onlineInfo: os
-        }));
-
-      return [
-        ...onlineUnsavedStations,
-        ...store.stationList.map((station) => ({
-          ...station,
-          onlineInfo: store.onlineSceneryList.find(
-            (os) => os.name == station.name && os.region == store.region.id
-          )
-        }))
-      ]
-        .filter((station) => filterStations(station, state.filters))
-        .sort((a, b) => sortStations(a, b, state.sorterActive));
-    }
-  },
-
-  actions: {
-    setupFilters() {
-      if (!StorageManager.isRegistered('options_saved')) return;
-
-      this.inputs.options.forEach((option) => {
-        if (!StorageManager.isRegistered(option.name)) return;
-        const savedValue = StorageManager.getBooleanValue(option.name);
-
-        this.filters[option.name] = savedValue;
-        option.value = !savedValue;
-      });
-
-      this.inputs.sliders.forEach((slider) => {
-        if (!StorageManager.isRegistered(slider.name)) return;
-        const savedValue = StorageManager.getNumericValue(slider.name);
-
-        this.filters[slider.name] = savedValue;
-        slider.value = savedValue;
-      });
-    },
-
-    changeFilterValue(name: string, value: any) {
-      this.filters[name] = value;
-      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(name, value);
-    },
-
-    resetFilters() {
-      this.filters = { ...filterInitStates };
-
-      this.inputs.options.forEach((option) => {
-        option.value = option.defaultValue;
-        StorageManager.setBooleanValue(option.name, !option.defaultValue);
-      });
-
-      this.inputs.sliders.forEach((slider) => {
-        slider.value = slider.defaultValue;
-        StorageManager.setNumericValue(slider.name, slider.defaultValue);
-      });
-    },
-
-    resetSectionOptions(section: string) {
-      this.inputs.options
-        .filter((option) => option.section == section)
-        .forEach((option) => {
-          option.value = option.defaultValue;
-          StorageManager.setBooleanValue(option.name, !option.defaultValue);
-        });
-    },
-
-    changeSorter(headerName: HeadIdsTypes) {
-      if (headerName == this.sorterActive.headerName)
-        this.sorterActive.dir = -1 * this.sorterActive.dir;
-      else this.sorterActive.dir = 1;
-
-      this.sorterActive.headerName = headerName;
-    }
-  }
-});

src/store/tooltipStore.ts

@@ -0,0 +1,56 @@
+import { defineStore } from 'pinia';
+
+const isTooltip = (v: any): v is TooltipType => tooltipKeys.includes(v);
+
+export const tooltipKeys = [
+  'DonatorTooltip',
+  'BaseTooltip',
+  'VehiclePreviewTooltip',
+  'SpawnsTooltip',
+  'UsersTooltip'
+] as const;
+
+export type TooltipType = (typeof tooltipKeys)[number];
+
+export const useTooltipStore = defineStore('tooltipStore', {
+  state: () => ({
+    mousePos: [0, 0],
+    type: null as TooltipType | null,
+    content: ''
+  }),
+
+  actions: {
+    show(_e: MouseEvent, type: string, value?: string) {
+      if (!isTooltip(type)) return;
+
+      this.type = type;
+      this.content = value ?? '';
+    },
+
+    hide() {
+      this.type = null;
+      this.content = '';
+    },
+
+    handle(e: MouseEvent) {
+      const targetEl = e
+        .composedPath()
+        .find((p) => p instanceof HTMLElement && p.getAttribute('data-tooltip-type'));
+
+      if (!targetEl || !(targetEl instanceof HTMLElement)) {
+        if (this.type != null) this.hide();
+
+        return;
+      }
+
+      const tooltipType = targetEl.getAttribute('data-tooltip-type');
+      const tooltipContent = targetEl.getAttribute('data-tooltip-content');
+
+      if (tooltipType && tooltipContent) this.show(e, tooltipType, tooltipContent);
+      else if (this.type != null) this.hide();
+
+      this.mousePos[0] = e.pageX;
+      this.mousePos[1] = e.pageY;
+    }
+  }
+});

src/store/typings.ts

@@ -1,43 +1,19 @@
 import { API } from '../typings/api';
-import { Status } from '../typings/common';
-
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
-
-export interface RegionCounters {
-  stationCount: number;
-  trainsCount: number;
-  timetablesCount: number;
-}
-
-export interface StoreState {
-  region: { id: string; value: string };
+import { Availability, CheckpointTrain, StationRoutesInfo, Status } from '../typings/common';
 
+export interface MainStoreState {
+  region: { id: string; value: string; name: string };
   isOffline: boolean;
-
+  appUpdate: { version: string; changelog: string; releaseURL: string } | null;
   dispatcherStatsName: string;
   dispatcherStatsData?: API.DispatcherStats.Response;
-
   driverStatsName: string;
   driverStatsData?: API.DriverStats.Response;
   driverStatsStatus: Status.Data;
-
   chosenModalTrainId?: string;
-
-  blockScroll: boolean;
   modalLastClickedTarget: EventTarget | null;
 }
 
-export interface StationRoutesInfo {
-  routeName: string;
-  isElectric: boolean;
-  isInternal: boolean;
-  isRouteSBL: boolean;
-  routeLength: number;
-  routeSpeed: number;
-  routeTracks: number;
-  hidden?: boolean;
-}
-
 export interface StationJSONData {
   name: string;
   abbr: string;
@@ -53,6 +29,7 @@ export interface StationJSONData {
   controlType: string;
 
   SUP: boolean;
+  ASDEK: boolean;
 
   // routes: string;
   routesInfo: StationRoutesInfo[];
@@ -62,110 +39,3 @@ export interface StationJSONData {
 
   availability: Availability;
 }
-
-export interface OnlineScenery {
-  name: string;
-  hash: string;
-  region: string;
-  maxUsers: number;
-  currentUsers: number;
-  spawns: { spawnName: string; spawnLength: number; isElectrified: boolean }[];
-  dispatcherName: string;
-  dispatcherRate: number;
-  dispatcherId: number;
-  dispatcherExp: number;
-  dispatcherIsSupporter: boolean;
-
-  dispatcherStatus: Status.ActiveDispatcher | number;
-  dispatcherTimestamp: number | null;
-
-  isOnline: boolean;
-
-  stationTrains?: StationTrain[];
-  scheduledTrains?: ScheduledTrain[];
-
-  scheduledTrainCount: {
-    all: number;
-    confirmed: number;
-    unconfirmed: number;
-  };
-}
-
-export interface StationTrain {
-  driverName: string;
-  driverId: number;
-  trainNo: number;
-  trainId: string;
-  stopStatus: string;
-}
-
-export interface ScheduledTrain {
-  checkpointName: string;
-
-  trainId: string;
-  trainNo: number;
-
-  driverName: string;
-  driverId: number;
-  currentStationName: string;
-  currentStationHash: string;
-  category: string;
-  stopInfo: TrainStop;
-
-  terminatesAt: string;
-  beginsAt: string;
-
-  prevStationName: string;
-  nextStationName: string;
-
-  arrivingLine: string | null;
-  departureLine: string | null;
-
-  prevDepartureLine: string | null;
-  nextArrivalLine: string | null;
-
-  signal: string;
-  connectedTrack: string;
-
-  stopLabel: string;
-  stopStatus: StopStatus;
-  stopStatusID: number;
-
-  region: string;
-}
-
-export enum StopStatus {
-  ARRIVING = 'arriving',
-  DEPARTED = 'departed',
-  DEPARTED_AWAY = 'departed-away',
-  ONLINE = 'online',
-  STOPPED = 'stopped',
-  TERMINATED = 'terminated'
-}
-
-export interface TrainStop {
-  stopName: string;
-  stopNameRAW: string;
-  stopType: string;
-  stopDistance: number;
-  mainStop: boolean;
-
-  arrivalLine: string | null;
-  arrivalTimestamp: number;
-  arrivalRealTimestamp: number;
-  arrivalDelay: number;
-
-  departureLine: string | null;
-  departureTimestamp: number;
-  departureRealTimestamp: number;
-  departureDelay: number;
-  pointId: number;
-
-  comments?: string;
-
-  beginsHere: boolean;
-  terminatesHere: boolean;
-  confirmed: boolean;
-  stopped: boolean;
-  stopTime: number | null;
-}

src/store/utils.ts

@@ -1,13 +1,4 @@
-import Station from '../scripts/interfaces/Station';
-import Train from '../scripts/interfaces/Train';
-import { API } from '../typings/api';
-import { ScheduledTrain, StationTrain, StopStatus, TrainStop } from './typings';
-
-export function getLocoURL(locoType: string): string {
-  return `https://rj.td2.info.pl/dist/img/thumbnails/${
-    locoType.includes('EN') ? locoType + 'rb' : locoType
-  }.png`;
-}
+import { ScenerySpawn, ScenerySpawnType } from '../typings/common';
 
 export function getStatusTimestamp(stationStatus: any): number {
   if (!stationStatus) return -2;
@@ -32,7 +23,7 @@ export function getStatusTimestamp(stationStatus: any): number {
   return -1;
 }
 
-export function parseSpawns(spawnString: string | null) {
+export function parseSpawns(spawnString: string | null): ScenerySpawn[] {
   if (!spawnString) return [];
   if (spawnString === 'NO_SPAWN') return [];
 
@@ -42,229 +33,18 @@ export function parseSpawns(spawnString: string | null) {
     const spawnLength = parseInt(spawnArray[2]);
     const isElectrified = spawnArray[3] == 'True';
 
-    return { spawnName, spawnLength, isElectrified };
+    let spawnType: ScenerySpawnType = /EZT|POS|OSOB|PAS/i.test(spawnName)
+      ? 'passenger'
+      : /TOW/i.test(spawnName)
+        ? 'freight'
+        : /LUZ/i.test(spawnName)
+          ? 'loco'
+          : 'all';
+
+    return { spawnName, spawnLength, isElectrified, spawnType };
   });
 }
 
 export function getTimestamp(date: string | null): number {
   return date ? new Date(date).getTime() : 0;
 }
-
-export function getTrainStopStatus(
-  stopInfo: TrainStop,
-  currentStationName: string,
-  sceneryName: string
-) {
-  let stopStatus = StopStatus.ARRIVING,
-    stopLabel = '',
-    stopStatusID = -1;
-
-  if (stopInfo.terminatesHere && stopInfo.confirmed) {
-    stopStatus = StopStatus.TERMINATED;
-    stopLabel = 'Skończył bieg';
-    stopStatusID = 5;
-  } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
-    stopStatus = StopStatus.DEPARTED;
-    stopLabel = 'Odprawiony';
-    stopStatusID = 2;
-  } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
-    stopStatus = StopStatus.DEPARTED_AWAY;
-    stopLabel = 'Odjechał';
-    stopStatusID = 4;
-  } else if (currentStationName == sceneryName && !stopInfo.stopped) {
-    stopStatus = StopStatus.ONLINE;
-    stopLabel = 'Na stacji';
-    stopStatusID = 0;
-  } else if (currentStationName == sceneryName && stopInfo.stopped) {
-    stopStatus = StopStatus.STOPPED;
-    stopLabel = 'Postój';
-    stopStatusID = 1;
-  } else if (currentStationName != sceneryName) {
-    stopStatus = StopStatus.ARRIVING;
-    stopLabel = 'W drodze';
-    stopStatusID = 3;
-  }
-
-  return { stopStatus, stopLabel, stopStatusID };
-}
-
-export function getCheckpointTrain(
-  train: Train,
-  trainStopIndex: number,
-  sceneryName: string
-): ScheduledTrain {
-  const timetable = train.timetableData!;
-  const followingStops = timetable.followingStops;
-  const trainStop = followingStops[trainStopIndex];
-
-  const trainStopStatus = getTrainStopStatus(trainStop, train.currentStationName, sceneryName);
-
-  let prevStationName = '',
-    nextStationName = '';
-
-  let prevDepartureLine: string | null = null,
-    nextArrivalLine: string | null = null;
-
-  for (let i = trainStopIndex - 1; i >= 0; i--) {
-    if (/strong|podg/g.test(followingStops[i].stopName)) {
-      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
-
-      break;
-    }
-  }
-
-  for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
-    if (/strong|podg/g.test(followingStops[i].stopName)) {
-      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
-
-      break;
-    }
-  }
-
-  let departureLine: string | null = null;
-  let arrivingLine: string | null = null;
-
-  for (let i = trainStopIndex; i < followingStops.length; i++) {
-    const currentStop = followingStops[i];
-
-    if (currentStop.departureLine == null) continue;
-
-    if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
-      departureLine = currentStop.departureLine;
-      nextArrivalLine = followingStops[i + 1]?.arrivalLine || null;
-
-      break;
-    }
-  }
-
-  for (let i = trainStopIndex; i >= 0; i--) {
-    const currentStop = followingStops[i];
-
-    if (currentStop.arrivalLine == null) continue;
-
-    if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
-      arrivingLine = currentStop.arrivalLine;
-      prevDepartureLine = followingStops[i - 1]?.departureLine || null;
-
-      break;
-    }
-  }
-
-  return {
-    checkpointName: trainStop.stopNameRAW,
-
-    trainNo: train.trainNo,
-    trainId: train.trainId,
-
-    signal: train.signal,
-    connectedTrack: train.connectedTrack,
-
-    driverName: train.driverName,
-    driverId: train.driverId,
-    currentStationName: train.currentStationName,
-    currentStationHash: train.currentStationHash,
-    category: timetable.category,
-    beginsAt: timetable.followingStops[0].stopNameRAW,
-    terminatesAt: timetable.followingStops[timetable.followingStops.length - 1].stopNameRAW,
-
-    nextStationName,
-    prevStationName,
-
-    stopInfo: trainStop,
-    stopLabel: trainStopStatus.stopLabel,
-    stopStatus: trainStopStatus.stopStatus,
-    stopStatusID: trainStopStatus.stopStatusID,
-
-    region: train.region,
-
-    arrivingLine,
-    departureLine,
-
-    nextArrivalLine,
-    prevDepartureLine
-  };
-}
-
-export function getScheduledTrains(
-  trainList: Train[],
-  sceneryData: API.ActiveSceneries.Data,
-  stationGeneralInfo: Station['generalInfo']
-): ScheduledTrain[] {
-  const stationNameLower = sceneryData.stationName.toLocaleLowerCase();
-
-  stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
-
-  return trainList.reduce((acc: ScheduledTrain[], train) => {
-    if (!train.timetableData) return acc;
-    if (train.region != sceneryData.region) return acc;
-
-    const timetable = train.timetableData;
-    if (!timetable.sceneries.includes(sceneryData.stationHash)) return acc;
-
-    const stopInfoIndex = timetable.followingStops.findIndex((stop) => {
-      const stopNameLower = stop.stopNameRAW.toLocaleLowerCase();
-
-      return (
-        stationNameLower == stopNameLower ||
-        (!/(po\.|podg\.)/.test(stopNameLower) && stopNameLower.includes(stationNameLower)) ||
-        (!/(po\.|podg\.)/.test(stationNameLower) && stationNameLower.includes(stopNameLower)) ||
-        (stopNameLower.split(', podg.')[0] !== undefined &&
-          stationNameLower.startsWith(stopNameLower.split(', podg.')[0]))
-      );
-    });
-
-    const checkpointScheduledTrains: ScheduledTrain[] = [];
-
-    if (stopInfoIndex != -1) {
-      checkpointScheduledTrains.push(
-        getCheckpointTrain(train, stopInfoIndex, sceneryData.stationName)
-      );
-    }
-
-    stationGeneralInfo?.checkpoints?.forEach((checkpoint) => {
-      // if (checkpoint.checkpointName.toLocaleLowerCase() == stationNameLower) return;
-
-      if (
-        checkpointScheduledTrains.findIndex(
-          (cpTrain) =>
-            cpTrain.checkpointName.toLocaleLowerCase() ==
-            checkpoint.checkpointName.toLocaleLowerCase()
-        ) != -1
-      )
-        return;
-
-      const index = timetable.followingStops.findIndex(
-        (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
-      );
-
-      if (index > -1)
-        checkpointScheduledTrains.push(getCheckpointTrain(train, index, sceneryData.stationName));
-    });
-
-    acc.push(...checkpointScheduledTrains);
-    return acc;
-  }, []) as ScheduledTrain[];
-}
-
-export function getStationTrains(
-  trainList: Train[],
-  scheduledTrainList: ScheduledTrain[],
-  region: string,
-  sceneryData: API.ActiveSceneries.Data
-): StationTrain[] {
-  return trainList
-    .filter(
-      (train) =>
-        train?.region === region &&
-        train.online &&
-        train.currentStationName === sceneryData.stationName
-    )
-    .map((train) => ({
-      driverName: train.driverName,
-      driverId: train.driverId,
-      trainNo: train.trainNo,
-      trainId: train.trainId,
-      stopStatus:
-        scheduledTrainList.find((st) => st.trainNo === train.trainNo)?.stopStatus || 'no-timetable'
-    }));
-}

src/styles/JournalSection.scss

@@ -6,12 +6,13 @@
   height: 90vh;
   min-height: 550px;
   margin-top: 0.5em;
+  position: relative;
 
   padding-right: 0.2em;
 }
 
 .journal_wrapper {
-  max-width: 1350px;
+  max-width: 1500px;
   width: 100%;
 
   margin: 0 auto;

src/styles/animations.scss

@@ -1,4 +1,4 @@
-$animDuration: 150ms;
+$animDuration: 95ms;
 $animType: ease-in-out;
 
 // List animation
@@ -72,7 +72,6 @@ $animType: ease-in-out;
 
   &-enter-from,
   &-leave-to {
-    transform: translateY(-25%);
     opacity: 0;
   }
 }

src/styles/badge.scss

@@ -101,3 +101,16 @@
     background-color: #be3728;
   }
 }
+
+.spawn-badge {
+  color: white;
+
+  .length {
+    background-color: #404040;
+    color: #cfcfcf;
+  }
+
+  &[data-electrified='true'] > .name {
+    background-color: #007599;
+  }
+}

src/styles/global.scss

@@ -1,4 +1,6 @@
-@import 'fonts.scss';
+@import 'fonts';
+@import 'variables';
+@import 'responsive';
 
 :root {
   --clr-primary: #ffc014;
@@ -18,12 +20,15 @@
 
   --clr-donator: #f7a4ff;
 
+  --no-scroll-padding: 17px;
+  --max-container-width: 1700px;
+
   font-size: 16px;
 }
 
 ::-webkit-scrollbar {
-  width: 15px;
-  height: 15px;
+  width: var(--no-scroll-padding);
+  height: var(--no-scroll-padding);
   background-color: transparent;
 
   &-track {
@@ -46,11 +51,16 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   font-weight: 500;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+
   overflow-y: scroll;
+  overflow-x: hidden;
+  position: relative;
 
   &.no-scroll {
     overflow-y: hidden;
-    padding-right: 15px;
+    padding-right: var(--no-scroll-padding);
 
     @include smallScreen() {
       padding: 0;
@@ -111,8 +121,6 @@ input {
   height: 7px;
   background-color: lightgreen;
   border-radius: 50%;
-
-  margin-left: 10px;
 }
 
 a {
@@ -203,6 +211,7 @@ a.a-button {
   &.btn--action {
     background-color: #424242;
     border-radius: 0.25em;
+    font-weight: bold;
 
     &:hover {
       background-color: #555;
@@ -226,7 +235,7 @@ a.a-button {
     padding: 0.35em 0.75em;
 
     img {
-      width: 1.5em;
+      width: 1.35em;
       vertical-align: middle;
     }
   }
@@ -288,3 +297,23 @@ a.a-button {
     }
   }
 }
+
+// Basic tooltip
+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+  transform: translate(10px, -50%);
+
+  content: attr(data-tooltip);
+  color: white;
+  background-color: #171717;
+  border-radius: 0.5em;
+  padding: 0.5em;
+  margin: 0 0.25em;
+  max-width: 300px;
+  z-index: 100;
+}
+
+[data-tooltip] {
+  cursor: help;
+}

src/typings/api.ts

@@ -128,8 +128,8 @@ export namespace API {
     export type Response = Data[];
 
     export interface Data {
+      id: string;
       trainNo: number;
-
       mass: number;
       length: number;
       speed: number;
@@ -161,7 +161,6 @@ export namespace API {
       stopNameRAW: string;
       stopType: string;
       stopDistance: number;
-      pointId: string;
 
       mainStop: boolean;
 
@@ -263,22 +262,6 @@ export namespace API {
     export type Response = Data[];
   }
 
-  export namespace RollingStock {
-    export interface Response {
-      usage: Record<string, string>;
-      info: Info;
-    }
-
-    export interface Info {
-      'loco-e': [string, string, string, string, boolean][];
-      'loco-s': [string, string, string, string, boolean][];
-      'loco-szt': [string, string, string, string, boolean][];
-      'loco-ezt': [string, string, string, string, boolean][];
-      'car-passenger': [string, string, boolean, boolean, string][];
-      'car-cargo': [string, string, boolean, boolean, string][];
-    }
-  }
-
   export namespace DailyStats {
     export interface Response {
       totalTimetables: number;

src/typings/common.ts

@@ -1,5 +1,18 @@
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
+
+export enum StopStatus {
+  ARRIVING = 'arriving',
+  DEPARTED = 'departed',
+  DEPARTED_AWAY = 'departed-away',
+  ONLINE = 'online',
+  STOPPED = 'stopped',
+  TERMINATED = 'terminated'
+}
+
 export namespace Status {
   export enum ActiveDispatcher {
+    FREE = -3,
     INVALID = -2,
     UNKNOWN = -1,
     NO_LIMIT = 0,
@@ -19,3 +32,159 @@ export namespace Status {
     Warning = 3
   }
 }
+
+export interface RegionCounters {
+  stationCount: number;
+  trainsCount: number;
+  timetablesCount: number;
+}
+
+export interface Train {
+  id: string;
+  mass: number;
+  length: number;
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  driverId: number;
+  trainNo: number;
+  driverName: string;
+  driverLevel: number;
+  currentStationName: string;
+  currentStationHash: string;
+  locoType: string;
+  online: boolean;
+  lastSeen: number;
+  region: string;
+  stockList: string[];
+
+  isTimeout: boolean;
+  isSupporter: boolean;
+
+  timetableData?: {
+    timetableId: number;
+    category: string;
+    route: string;
+    followingStops: TrainStop[];
+    TWR: boolean;
+    SKR: boolean;
+    routeDistance: number;
+    sceneries: string[];
+    sceneryNames: string[];
+  };
+}
+
+export interface Station {
+  name: string;
+
+  generalInfo?: StationGeneralInfo;
+
+  onlineInfo?: ActiveScenery;
+}
+
+export interface StationGeneralInfo {
+  name: string;
+  url: string;
+  abbr: string;
+  hash?: string;
+  reqLevel: number;
+  lines: string;
+  project: string;
+  projectUrl?: string;
+  signalType: string;
+  controlType: string;
+  SUP: boolean;
+  ASDEK: boolean;
+  authors?: string[];
+  availability: Availability;
+  routes: StationRoutes;
+  checkpoints: string[];
+}
+
+export interface StationRoutes {
+  single: StationRoutesInfo[];
+  double: StationRoutesInfo[];
+
+  singleElectrifiedNames: string[];
+  singleOtherNames: string[];
+  doubleElectrifiedNames: string[];
+  doubleOtherNames: string[];
+  sblNames: string[];
+
+  minRouteSpeed: number;
+  maxRouteSpeed: number;
+}
+
+export interface StationRoutesInfo {
+  routeName: string;
+  isElectric: boolean;
+  isInternal: boolean;
+  isRouteSBL: boolean;
+  routeLength: number;
+  routeSpeed: number;
+  routeTracks: number;
+  hidden?: boolean;
+}
+
+export interface ActiveScenery {
+  name: string;
+  hash: string;
+  region: string;
+  maxUsers: number;
+  currentUsers: number;
+  spawns: ScenerySpawn[];
+  dispatcherName: string;
+  dispatcherRate: number;
+  dispatcherId: number;
+  dispatcherExp: number;
+  dispatcherIsSupporter: boolean;
+  dispatcherStatus: Status.ActiveDispatcher | number;
+  dispatcherTimestamp: number | null;
+  isOnline: boolean;
+  stationTrains: Train[];
+  scheduledTrains: CheckpointTrain[];
+  scheduledTrainCount: {
+    all: number;
+    confirmed: number;
+    unconfirmed: number;
+  };
+}
+
+export interface ScenerySpawn {
+  spawnName: string;
+  spawnLength: number;
+  isElectrified: boolean;
+  spawnType: ScenerySpawnType;
+}
+
+export interface TrainStop {
+  stopName: string;
+  stopNameRAW: string;
+  stopType: string;
+  stopDistance: number;
+  mainStop: boolean;
+
+  arrivalLine: string | null;
+  arrivalTimestamp: number;
+  arrivalRealTimestamp: number;
+  arrivalDelay: number;
+
+  departureLine: string | null;
+  departureTimestamp: number;
+  departureRealTimestamp: number;
+  departureDelay: number;
+
+  comments?: string;
+
+  beginsHere: boolean;
+  terminatesHere: boolean;
+  confirmed: number;
+  stopped: number;
+  stopTime: number | null;
+}
+
+export interface CheckpointTrain {
+  checkpointStop: TrainStop;
+  train: Train;
+}

src/views/JournalDispatchers.vue

@@ -17,8 +17,9 @@
         <JournalStats :statsButtons="statsButtons" />
       </div>
 
-      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
-        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+      <div class="journal_refreshed-date">
+        {{ $t('journal.data-refreshed-at') }}:
+        {{ dataRefreshedAt?.toLocaleString($i18n.locale) ?? '---' }}
       </div>
 
       <div class="list_wrapper" @scroll="handleScroll">
@@ -37,7 +38,6 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 
-import http from '../http';
 import { useMainStore } from '../store/mainStore';
 import { LocationQuery } from 'vue-router';
 import { Journal } from '../components/JournalView/typings';
@@ -48,6 +48,7 @@ import JournalDispatchersList from '../components/JournalView/JournalDispatchers
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
+import { useApiStore } from '../store/apiStore';
 
 const statsButtons: Journal.StatsButton[] = [
   {
@@ -120,6 +121,7 @@ export default defineComponent({
 
     return {
       mainStore: useMainStore(),
+      apiStore: useApiStore(),
 
       sorterActive,
       searchersValues,
@@ -201,7 +203,7 @@ export default defineComponent({
 
       try {
         const statsData: API.DispatcherStats.Response = await (
-          await http.get('api/getDispatcherStats', {
+          await this.apiStore.client!.get('api/getDispatcherStats', {
             params: {
               name: this.mainStore.dispatcherStatsName
             }
@@ -236,7 +238,9 @@ export default defineComponent({
       this.countFromIndex = this.historyList.length;
 
       const responseData: API.DispatcherHistory.Response = await (
-        await http.get(`api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`)
+        await this.apiStore.client!.get(
+          `api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`
+        )
       ).data;
 
       if (!responseData) return;
@@ -283,7 +287,7 @@ export default defineComponent({
         if (reset) this.dataStatus = Status.Data.Loading;
 
         const responseData: API.DispatcherHistory.Response = await (
-          await http.get(`api/getDispatchers?${this.currentQuery}`)
+          await this.apiStore.client!.get(`api/getDispatchers?${this.currentQuery}`)
         ).data;
 
         if (!responseData) {

src/views/JournalTimetables.vue

@@ -17,8 +17,9 @@
         <JournalStats :statsButtons="statsButtons" />
       </div>
 
-      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
-        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+      <div class="journal_refreshed-date">
+        {{ $t('journal.data-refreshed-at') }}:
+        {{ dataRefreshedAt?.toLocaleString($i18n.locale) ?? '---' }}
       </div>
 
       <div class="list_wrapper" @scroll="handleScroll">
@@ -53,7 +54,7 @@ import JournalTimetablesList from '../components/JournalView/JournalTimetables/J
 import { Journal } from '../components/JournalView/typings';
 import { Status } from '../typings/common';
 import { API } from '../typings/api';
-import http from '../http';
+import { useApiStore } from '../store/apiStore';
 
 export const journalTimetableFilters: Journal.TimetableFilter[] = [
   {
@@ -158,6 +159,7 @@ export default defineComponent({
   data: () => ({
     journalTimetableFilters,
     mainStore: useMainStore(),
+    apiStore: useApiStore(),
 
     statsButtons: [
       {
@@ -282,7 +284,9 @@ export default defineComponent({
         this.mainStore.driverStatsStatus = Status.Data.Loading;
 
         const statsData: API.DriverStats.Response = await (
-          await http.get(`api/getDriverInfo?name=${this.mainStore.driverStatsName}`)
+          await this.apiStore.client!.get(
+            `api/getDriverInfo?name=${this.mainStore.driverStatsName}`
+          )
         ).data;
 
         this.mainStore.driverStatsData = statsData;
@@ -321,7 +325,7 @@ export default defineComponent({
       this.currentQueryParams['countFrom'] = this.timetableHistory.length;
 
       const responseData: API.TimetableHistory.Response = await (
-        await http.get('api/getTimetables', {
+        await this.apiStore.client!.get('api/getTimetables', {
           params: { ...this.currentQueryParams }
         })
       ).data;
@@ -425,7 +429,7 @@ export default defineComponent({
 
       try {
         const responseData: API.TimetableHistory.Response = await (
-          await http.get('api/getTimetables', {
+          await this.apiStore.client!.get('api/getTimetables', {
             params: this.currentQueryParams
           })
         ).data;

src/views/SceneryView.vue

@@ -147,7 +147,7 @@ export default defineComponent({
     },
 
     onlineSceneryInfo() {
-      return this.store.onlineSceneryList.find(
+      return this.store.activeSceneryList.find(
         (scenery) =>
           scenery.name === this.station?.toString().replace(/_/g, ' ') &&
           scenery.region == this.store.region.id
@@ -169,11 +169,7 @@ export default defineComponent({
     loadSelectedCheckpoint() {
       if (!this.stationInfo?.generalInfo?.checkpoints) return;
       if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
-      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
-    },
-
-    selectCheckpoint(cp: { checkpointName: string }) {
-      this.selectedCheckpoint = cp.checkpointName;
+      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0];
     }
   }
 });
@@ -204,7 +200,7 @@ button.back-btn {
 
     display: inline-block;
 
-    font-size: 1.5em;
+    font-size: 1.25em;
 
     button {
       margin: 1em auto;
@@ -214,13 +210,13 @@ button.back-btn {
 
 .scenery-wrapper {
   display: grid;
-  grid-template-columns: 4fr 5fr;
+  grid-template-columns: 4fr 6fr;
   gap: 0 1em;
 
   position: relative;
 
   width: 100%;
-  max-width: 1700px;
+  max-width: var(--max-container-width);
   min-height: 100vh;
 
   margin: 1rem 0;
@@ -237,10 +233,9 @@ button.back-btn {
   background-color: #181818;
   padding: 1em 0.5em;
 
-  height: 95vh;
-  min-height: 550px;
+  height: 100vh;
+  min-height: 750px;
   max-height: 1000px;
-
   overflow: auto;
 
   display: flex;
@@ -251,8 +246,8 @@ button.back-btn {
   background: #181818;
   padding: 1em 0.5em;
 
-  height: 95vh;
-  min-height: 550px;
+  height: 100vh;
+  min-height: 750px;
   max-height: 1000px;
 
   display: grid;

src/views/StationsView.vue

@@ -8,10 +8,20 @@
           ref="filterCardRef"
         />
 
-        <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
+        <button
+          class="btn-donation btn--image"
+          ref="btn"
+          @click="isDonationCardOpen = true"
+          @focus="isDonationCardOpen = false"
+        >
+          <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+          <span>{{ $t('donations.button-title') }}</span>
+        </button>
       </div>
 
-      <StationTable :stations="computedStationList" @toggleDonationModal="toggleDonationModal" />
+      <DonationCard :is-card-open="isDonationCardOpen" @toggle-card="toggleDonationCard" />
+      <StationTable @toggle-donation-card="toggleDonationCard" />
+      <StationStats />
     </div>
   </section>
 </template>
@@ -20,41 +30,47 @@
 import { defineComponent } from 'vue';
 import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
-import { useStationFiltersStore } from '../store/stationFiltersStore';
 import { useMainStore } from '../store/mainStore';
-import Donation from '../components/Global/Donation.vue';
+import DonationCard from '../components/Global/DonationCard.vue';
+import StationStats from '../components/StationsView/StationStats.vue';
+import { initFilters, setupFilters } from '../managers/stationFilterManager';
+import { reactive } from 'vue';
+import { provide } from 'vue';
+import { ActiveSorter } from '../components/StationsView/typings';
+import { onMounted } from 'vue';
+
+const filterInitStates = { ...initFilters };
 
 export default defineComponent({
   components: {
     StationTable,
     StationFilterCard,
-    Donation
+    StationStats,
+    DonationCard
   },
 
   data: () => ({
     filterCardOpen: false,
-    modalHidden: true,
-    STORAGE_KEY: 'options_saved',
-    focusedStationName: '',
-    filterStore: useStationFiltersStore(),
-    store: useMainStore(),
+    isDonationCardOpen: false,
 
-    isDonationModalOpen: false
+    mainStore: useMainStore()
   }),
 
-  mounted() {
-    this.filterStore.setupFilters();
-  },
+  setup() {
+    const filters = reactive(filterInitStates);
+    const activeSorter = reactive({ headerName: 'station', dir: 1 }) as ActiveSorter;
 
-  computed: {
-    computedStationList() {
-      return this.filterStore.filteredStationList;
-    }
+    provide('StationsView_filters', filters);
+    provide('StationsView_activeSorter', activeSorter);
+
+    onMounted(() => {
+      setupFilters(filters);
+    });
   },
 
   methods: {
-    toggleDonationModal(value: boolean) {
-      this.isDonationModalOpen = value;
+    toggleDonationCard(value: boolean) {
+      this.isDonationCardOpen = value;
     }
   }
 });
@@ -64,30 +80,6 @@ export default defineComponent({
 @import '../styles/variables.scss';
 @import '../styles/responsive.scss';
 
-@keyframes blinkAnim {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-  }
-}
-
-.indicator-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
 .stations-view {
   position: relative;
   display: flex;
@@ -99,13 +91,31 @@ export default defineComponent({
 
 .wrapper {
   max-width: 100%;
+  width: var(--max-container-width);
 }
 
 .stations-options {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 0.5em;
 
   margin-bottom: 0.5em;
 }
+
+button.btn-donation {
+  $btnColor: #254069;
+
+  background-color: $btnColor;
+
+  &:hover {
+    background-color: lighten($btnColor, 5%);
+  }
+
+  @include smallScreen {
+    span {
+      display: none;
+    }
+  }
+}
 </style>

src/views/TrainsView.vue

@@ -20,11 +20,11 @@ import { computed, ComputedRef, defineComponent, provide, reactive, ref, watch }
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
 import modalTrainMixin from '../mixins/modalTrainMixin';
-import Train from '../scripts/interfaces/Train';
 import { useMainStore } from '../store/mainStore';
 import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
+import { Train } from '../typings/common';
 
 export default defineComponent({
   components: {
@@ -126,7 +126,7 @@ export default defineComponent({
 
 .trains_wrapper {
   margin: 1rem auto;
-  max-width: 1350px;
+  max-width: 1500px;
 }
 
 .trains_topbar {

vite.config.ts

@@ -4,51 +4,46 @@ import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
   server: {
-    port: 5001
+    port: 5001,
+    open: true
+  },
+  preview: {
+    port: 4001,
+    open: true
   },
   publicDir: 'public',
   plugins: [
     vue(),
     VitePWA({
       registerType: 'autoUpdate',
-      includeAssets: ['/images/*.png', '/fonts/*.woff', '/fonts/*.woff2'],
+      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2}'],
 
       workbox: {
         disableDevLogs: true,
         globPatterns: ['**/*.{js,css,html,png,svg,jpg}'],
+        cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
-            urlPattern: new RegExp('^https://stacjownik.spythere.eu/api/getSceneries', 'i'),
-            handler: 'NetworkFirst',
+            urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/getSceneries/i,
+            handler: 'StaleWhileRevalidate',
             options: {
-              cacheName: 'sceneries-cache',
+              cacheName: 'spythere-sceneries-cache',
               cacheableResponse: {
                 statuses: [0, 200]
               }
             }
           },
           {
-            urlPattern: new RegExp('^https://raw.githubusercontent.com/Spythere/api/*', 'i'),
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'github-api-cache',
-
-              cacheableResponse: {
-                statuses: [0, 200]
-              }
-            }
-          },
-          {
-            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
+            urlPattern: /^https:\/\/static.spythere.eu\/.*/i,
             handler: 'CacheFirst',
             options: {
-              cacheName: 'images-cache',
+              cacheName: 'spythere-static-cache',
+              cacheableResponse: {
+                statuses: [0, 200]
+              },
               expiration: {
                 maxEntries: 100,
-                maxAgeSeconds: 60 * 60 * 24 * 7 // <== 7 days
-              },
-              cacheableResponse: {
-                statuses: [0, 200, 404]
+                maxAgeSeconds: 60 * 60 * 8
               }
             }
           }
@@ -59,5 +54,14 @@ export default defineConfig({
         suppressWarnings: true
       }
     })
-  ]
+  ],
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: 'app-[name].js',
+        assetFileNames: 'app-[name].css',
+        chunkFileNames: 'chunk-[name].js'
+      }
+    }
+  }
 });