Merge pull request #93 from Spythere/development

v1.25.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.24.3",
+  "version": "1.25.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -180,7 +180,7 @@ export default defineComponent({
 
       const naviLanguage = window.navigator.language.toString();
 
-      if (naviLanguage.includes('en')) {
+      if (naviLanguage.startsWith('en')) {
         this.changeLang('en');
         return;
       }
@@ -226,6 +226,7 @@ export default defineComponent({
 
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .app_main {

src/components/Global/StockList.vue

@@ -23,15 +23,15 @@
     <ul v-else>
       <li v-for="(stockName, i) in computedStockList" :key="i">
         <p>
-          {{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
-          {{ stockName.split(':')[1] }}
+          {{ stockName.split(':')[0].split('_').splice(0, 3).join(' ') }}
+          <div v-if="stockName.split(':')[1]">({{ stockName.split(':')[1] }})</div>
         </p>
 
         <span>
           <img
             :data-mouseover="stockName"
             data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
+            :data-tooltip-content="stockName"
             :src="
               getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
             "

src/components/JournalView/typings.ts

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

src/components/SceneryView/SceneryDispatchersHistory.vue

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

src/components/SceneryView/SceneryInfo.vue

@@ -124,11 +124,6 @@ h3.section-header {
   align-items: center;
 
   font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
 }
 
 .info-lists {

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -63,7 +63,9 @@ export default defineComponent({
 
       return this.onlineScenery.stationTrains.map((train) => {
         const stop = train.timetableData?.followingStops.find(
-          (stop) => stop.stopNameRAW.toLowerCase() == name.toLowerCase()
+          (stop) =>
+            stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
         );
 
         const status = stop

src/components/SceneryView/SceneryTimetable.vue

@@ -66,7 +66,7 @@
           class="timetable-item"
           v-else
           v-for="(row, i) in sceneryTimetables"
-          :key="row.train.id"
+          :key="row.train.id + i"
           tabindex="0"
           @click.prevent.stop="selectModalTrain(row.train, $event.currentTarget)"
           @keydown.enter.prevent="selectModalTrain(row.train, $event.currentTarget)"

src/components/SceneryView/SceneryTimetablesHistory.vue

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

src/components/StationsView/StationTable.vue

@@ -4,302 +4,299 @@
       v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
     />
 
-    <div class="table_wrapper" v-else-if="filteredStationList.length > 0">
-      <table>
-        <thead>
-          <tr>
-            <th
-              v-for="headerName in headIds"
-              :key="headerName"
-              @click="changeSorter(headerName)"
-              class="header-text"
-              :class="headerName"
-            >
-              <span class="header_wrapper">
-                <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
-
-                <img
-                  class="sort-icon"
-                  v-if="activeSorter.headerName == headerName"
-                  :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
-                  alt="sort icon"
-                />
-              </span>
-            </th>
-
-            <th
-              v-for="headerName in headIconsIds"
-              :key="headerName"
-              @click="changeSorter(headerName)"
-              class="header-image"
-              :class="headerName"
-            >
-              <span class="header_wrapper">
-                <img
-                  :src="`/images/icon-${headerName}.svg`"
-                  :alt="headerName"
-                  :title="$t(`sceneries.headers.${headerName}`)"
-                />
-
-                <img
-                  class="sort-icon"
-                  v-if="activeSorter.headerName == headerName"
-                  :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
-                  alt="sort icon"
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            v-for="station in filteredStationList"
-            :class="{ 'last-selected': lastSelectedStationName == station.name }"
-            :key="station.name"
-            @click.left="setScenery(station.name)"
-            @click.right="openForumSite($event, station.generalInfo?.url)"
-            @keydown.enter="setScenery(station.name)"
-            @keydown.space="openForumSite($event, station.generalInfo?.url)"
-            tabindex="0"
+    <table v-else-if="filteredStationList.length > 0">
+      <thead>
+        <tr>
+          <th
+            v-for="headerName in headIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-text"
+            :class="headerName"
           >
-            <td class="station-name" :class="station.generalInfo?.availability">
-              <b v-if="station.generalInfo?.project" style="color: salmon">{{
-                station.generalInfo.project
-              }}</b>
-              {{ station.name }}
-            </td>
+            <span class="header_wrapper">
+              <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
 
-            <td class="station-level">
-              <span v-if="station.generalInfo">
-                <span
-                  v-if="
-                    station.generalInfo.reqLevel > -1 &&
-                    station.generalInfo.availability != 'nonPublic' &&
-                    station.generalInfo.availability != 'unavailable'
-                  "
-                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
-                >
-                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
-                </span>
-
-                <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                  <img
-                    src="/images/icon-abandoned.svg"
-                    alt="non-public"
-                    :title="$t('sceneries.info.abandoned')"
-                  />
-                </span>
-
-                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                  <img
-                    src="/images/icon-lock.svg"
-                    alt="non-public"
-                    :title="$t('sceneries.info.non-public')"
-                  />
-                </span>
-
-                <span v-else>
-                  <img
-                    src="/images/icon-unavailable.svg"
-                    alt="unavailable"
-                    :title="$t('sceneries.info.unavailable')"
-                  />
-                </span>
-              </span>
-
-              <span v-else> ? </span>
-            </td>
-
-            <td class="station-status">
-              <StationStatusBadge
-                :isOnline="station.onlineInfo ? true : false"
-                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+              <img
+                class="sort-icon"
+                v-if="activeSorter.headerName == headerName"
+                :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
               />
-            </td>
+            </span>
+          </th>
 
-            <td class="station-dispatcher-name">
-              <span v-if="station.onlineInfo?.dispatcherName">
-                <b
-                  v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                  @click.stop="openDonationCard"
-                  data-tooltip-type="DonatorTooltip"
-                  :data-tooltip-content="$t('donations.dispatcher-message')"
-                >
-                  <img src="/images/icon-diamond.svg" alt="" />
-                  {{ station.onlineInfo.dispatcherName }}
-                </b>
+          <th
+            v-for="headerName in headIconsIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-image"
+            :class="headerName"
+          >
+            <span class="header_wrapper">
+              <img
+                :src="`/images/icon-${headerName}.svg`"
+                :alt="headerName"
+                :title="$t(`sceneries.headers.${headerName}`)"
+              />
 
-                <div v-else>
-                  {{ station.onlineInfo.dispatcherName }}
-                </div>
-              </span>
-            </td>
+              <img
+                class="sort-icon"
+                v-if="activeSorter.headerName == headerName"
+                :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
 
-            <td class="station-dispatcher-exp">
+      <tbody>
+        <tr
+          v-for="station in filteredStationList"
+          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+          :key="station.name"
+          @click.left="setScenery(station.name)"
+          @click.right="openForumSite($event, station.generalInfo?.url)"
+          @keydown.enter="setScenery(station.name)"
+          @keydown.space="openForumSite($event, station.generalInfo?.url)"
+          tabindex="0"
+        >
+          <td class="station-name" :class="station.generalInfo?.availability">
+            <b v-if="station.generalInfo?.project" style="color: salmon">{{
+              station.generalInfo.project
+            }}</b>
+            {{ station.name }}
+          </td>
+
+          <td class="station-level">
+            <span v-if="station.generalInfo">
               <span
-                v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
-                :style="
-                  calculateExpStyle(
-                    station.onlineInfo.dispatcherExp,
-                    station.onlineInfo.dispatcherIsSupporter
-                  )
+                v-if="
+                  station.generalInfo.reqLevel > -1 &&
+                  station.generalInfo.availability != 'nonPublic' &&
+                  station.generalInfo.availability != 'unavailable'
                 "
+                :style="calculateExpStyle(station.generalInfo.reqLevel)"
               >
-                {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
               </span>
-            </td>
 
-            <td class="station-tracks">
-              <div v-if="station.generalInfo">
-                <span
-                  v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
-                  class="track catenary"
-                  :title="`${$t('sceneries.info.single-track-routes-catenary')}${
-                    station.generalInfo.routes.singleElectrifiedNames.length
-                  }`"
-                >
-                  {{ station.generalInfo.routes.singleElectrifiedNames.length }}
-                </span>
+              <span v-else-if="station.generalInfo.availability == 'abandoned'">
+                <img
+                  src="/images/icon-abandoned.svg"
+                  alt="non-public"
+                  :title="$t('sceneries.info.abandoned')"
+                />
+              </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>
+              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                <img
+                  src="/images/icon-lock.svg"
+                  alt="non-public"
+                  :title="$t('sceneries.info.non-public')"
+                />
+              </span>
+
+              <span v-else>
+                <img
+                  src="/images/icon-unavailable.svg"
+                  alt="unavailable"
+                  :title="$t('sceneries.info.unavailable')"
+                />
+              </span>
+            </span>
+
+            <span v-else> ? </span>
+          </td>
+
+          <td class="station-status">
+            <StationStatusBadge
+              :isOnline="station.onlineInfo ? true : false"
+              :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+            />
+          </td>
+
+          <td class="station-dispatcher-name">
+            <span v-if="station.onlineInfo?.dispatcherName">
+              <b
+                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                @click.stop="openDonationCard"
+                data-tooltip-type="DonatorTooltip"
+                :data-tooltip-content="$t('donations.dispatcher-message')"
+              >
+                <img src="/images/icon-diamond.svg" alt="" />
+                {{ station.onlineInfo.dispatcherName }}
+              </b>
+
+              <div v-else>
+                {{ station.onlineInfo.dispatcherName }}
               </div>
-            </td>
+            </span>
+          </td>
 
-            <td class="station-tracks">
-              <div v-if="station.generalInfo">
-                <span
-                  v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
-                  class="track catenary"
-                  :title="`${$t('sceneries.info.double-track-routes-catenary')}${
-                    station.generalInfo.routes.doubleElectrifiedNames.length
-                  }`"
-                >
-                  {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
-                </span>
+          <td class="station-dispatcher-exp">
+            <span
+              v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
+              :style="
+                calculateExpStyle(
+                  station.onlineInfo.dispatcherExp,
+                  station.onlineInfo.dispatcherIsSupporter
+                )
+              "
+            >
+              {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+            </span>
+          </td>
 
-                <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">
+          <td class="station-tracks">
+            <div v-if="station.generalInfo">
               <span
-                v-if="station.generalInfo?.signalType"
-                class="scenery-icon icon-info"
-                :class="station.generalInfo?.controlType.replace('+', '-')"
-                :title="
-                  $t('sceneries.info.control-type') +
-                  $t(`controls.${station.generalInfo?.controlType}`)
-                "
+                v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
+                class="track catenary"
+                :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                  station.generalInfo.routes.singleElectrifiedNames.length
+                }`"
               >
-                {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+                {{ station.generalInfo.routes.singleElectrifiedNames.length }}
               </span>
 
-              <img
-                v-if="station.generalInfo?.signalType"
-                class="icon-info"
-                :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-                :alt="station.generalInfo.signalType"
-                :title="
-                  $t('sceneries.info.signals-type') +
-                  $t(`signals.${station.generalInfo.signalType}`)
-                "
-              />
+              <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>
 
-              <img
-                v-if="station.generalInfo?.SUP"
-                class="icon-info"
-                src="/images/icon-SUP.svg"
-                alt="SUP (RASP-UZK)"
-                :title="$t('sceneries.info.SUP')"
-              />
+          <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>
 
-              <img
-                v-if="station.generalInfo?.ASDEK"
-                class="icon-info"
-                src="/images/icon-ASDEK.svg"
-                alt="dSAT ASDEK"
-                :title="$t('sceneries.info.ASDEK')"
-              />
+              <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>
 
-              <img
-                v-if="!station.generalInfo"
-                class="icon-info"
-                src="/images/icon-unknown.svg"
-                alt="icon-unknown"
-                :title="$t('sceneries.info.unknown')"
-              />
-            </td>
-
-            <td
-              class="station-users"
-              :class="{ inactive: !station.onlineInfo }"
-              data-tooltip-type="UsersTooltip"
-              :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+          <td class="station-info">
+            <span
+              v-if="station.generalInfo?.signalType"
+              class="scenery-icon icon-info"
+              :class="station.generalInfo?.controlType.replace('+', '-')"
+              :title="
+                $t('sceneries.info.control-type') +
+                $t(`controls.${station.generalInfo?.controlType}`)
+              "
             >
-              <span class="text--primary">{{
-                station.onlineInfo?.stationTrains?.length ?? '-'
-              }}</span>
-              /
-              <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
-            </td>
+              {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+            </span>
 
-            <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
-            </td>
+            <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}`)
+              "
+            />
 
-            <td
-              class="station-spawns"
-              :class="{ inactive: !station.onlineInfo }"
-              data-tooltip-type="SpawnsTooltip"
-              :data-tooltip-content="JSON.stringify(station.onlineInfo?.spawns ?? [])"
-            >
-              <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
-            </td>
+            <img
+              v-if="station.generalInfo?.SUP"
+              class="icon-info"
+              src="/images/icon-SUP.svg"
+              alt="SUP (RASP-UZK)"
+              :title="$t('sceneries.info.SUP')"
+            />
 
-            <td
-              class="station-schedules all"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
-            </td>
+            <img
+              v-if="station.generalInfo?.ASDEK"
+              class="icon-info"
+              src="/images/icon-ASDEK.svg"
+              alt="dSAT ASDEK"
+              :title="$t('sceneries.info.ASDEK')"
+            />
 
-            <td
-              class="station-schedules unconfirmed"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
-            </td>
+            <img
+              v-if="!station.generalInfo"
+              class="icon-info"
+              src="/images/icon-unknown.svg"
+              alt="icon-unknown"
+              :title="$t('sceneries.info.unknown')"
+            />
+          </td>
 
-            <td
-              class="station-schedules confirmed"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+          <td
+            class="station-users"
+            :class="{ inactive: !station.onlineInfo }"
+            data-tooltip-type="UsersTooltip"
+            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+          >
+            <span class="text--primary">{{
+              station.onlineInfo?.stationTrains?.length ?? '-'
+            }}</span>
+            /
+            <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
+          </td>
+
+          <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
+            <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
+          </td>
+
+          <td
+            class="station-spawns"
+            :class="{ inactive: !station.onlineInfo }"
+            data-tooltip-type="SpawnsTooltip"
+            :data-tooltip-content="JSON.stringify(station.onlineInfo?.spawns ?? [])"
+          >
+            <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
+          </td>
+
+          <td
+            class="station-schedules all"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
+          </td>
+
+          <td
+            class="station-schedules unconfirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
+          </td>
+
+          <td
+            class="station-schedules confirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
     <div class="no-stations" v-else>
       <div>
@@ -418,6 +415,7 @@ $rowCol: #424242;
 
 .station_table {
   height: 80vh;
+  max-height: 2000px;
   min-height: 700px;
   overflow: auto;
   font-weight: 500;

src/components/Tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tooltip" v-show="tooltipStore.type" ref="preview">
+  <div class="tooltip" ref="preview">
     <component v-if="tooltipStore.type" :is="tooltipStore.type" />
   </div>
 </template>
@@ -35,10 +35,7 @@ export default defineComponent({
           let translateX = '0',
             translateY = '30px';
 
-          if (clientWidth < 500) {
-            previewEl.style.left = '50%';
-            translateX = '-50%';
-          } else if (val[0] <= boxWidth / 2) {
+          if (val[0] <= boxWidth / 2) {
             previewEl.style.left = '0';
             translateX = '0px';
           } else if (val[0] >= clientWidth - boxWidth / 2) {

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -13,13 +13,20 @@
       width="300"
       height="176"
       class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${tooltipStore.content}--300px.jpg`"
+      :src="`https://static.spythere.eu/images/${vehicleName}--300px.jpg`"
     />
 
     <div v-if="imageState == 'error'" class="error-placeholder"></div>
 
     <div class="vehicle-name">
-      {{ tooltipStore.content.replace(/_/g, ' ') }}
+      {{ vehicleName.replace(/_/g, ' ') }}
+      <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
+    </div>
+
+    <div class="vehicle-props" v-if="vehicleData">
+      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
+      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
+      <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
     </div>
   </div>
 </template>
@@ -27,11 +34,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   data() {
     return {
       tooltipStore: useTooltipStore(),
+      apiStore: useApiStore(),
       imageState: 'loading'
     };
   },
@@ -56,6 +65,34 @@ export default defineComponent({
 
       (e.target as HTMLElement).style.display = 'none';
     }
+  },
+
+  computed: {
+    vehicleName() {
+      return this.tooltipStore.content.split(':')[0];
+    },
+
+    vehicleData() {
+      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
+    },
+
+    vehicleCargo() {
+      return this.vehicleData?.group.cargoTypes?.find(
+        (c) => c.id == this.tooltipStore.content.split(':')[1]
+      );
+    }
+
+    // vehicleProps() {
+    //   const vehicleDataArray = this.apiStore.vehiclesData?.vehicleList.find(
+    //     ([name]) => name === this.vehicleName
+    //   );
+
+    //   if (!vehicleDataArray) return null;
+
+    //   return (
+    //     this.apiStore.vehiclesData!.vehicleProps.find((v) => v.type == vehicleDataArray[1]) ?? null
+    //   );
+    // }
   }
 });
 </script>
@@ -85,10 +122,13 @@ img {
 .vehicle-name {
   text-align: center;
   margin-top: 0.5em;
-  color: #ccc;
   text-wrap: wrap;
 }
 
+.vehicle-props {
+  color: #ccc;
+}
+
 .error-placeholder {
   height: 176px;
 }

src/components/TrainsView/StopLabel.vue

@@ -1,5 +1,8 @@
 <template>
-  <span class="stop-label" :data-sbl="stop.isSBL">
+  <span
+    class="stop-label"
+    :data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po.') && !stop.duration)"
+  >
     <span class="name" v-html="stop.nameHtml"></span>
 
     <span
@@ -9,12 +12,13 @@
         stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
           ? 'delayed'
           : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
-          ? 'preponed'
-          : stop.arrivalDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
-          : ''
+            ? 'preponed'
+            : stop.arrivalDelay == 0 && stop.status == 'confirmed'
+              ? 'on-time'
+              : ''
       "
     >
+      p.
       <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
         <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
         {{ timestampToString(stop.arrivalReal) }}
@@ -29,17 +33,17 @@
     <span
       v-if="
         stop.duration ||
-        (stop.status == 'stopped' &&
-          stop.position != 'begin' &&
-          stop.departureDelay != stop.arrivalDelay)
+        (stop.status == 'stopped' && stop.position != 'begin' && stop.departureDelay > 0)
       "
       class="date stop"
       :data-stop-types="stop.type.replace(', ', '-')"
-      :data-stop-status="
-        stop.departureDelay - stop.arrivalDelay > 0 && !stop.duration ? 'delayed' : ''
-      "
+      :data-stop-status="stop.departureDelay > 0 && !stop.duration ? 'delayed' : ''"
     >
-      {{ stop.duration || stop.departureDelay - stop.arrivalDelay }}
+      {{
+        stop.duration == 0 && stop.departureDelay > 0
+          ? stop.departureDelay - stop.arrivalDelay
+          : stop.duration
+      }}
       {{ stop.type == '' ? 'pt' : stop.type }}
     </span>
 
@@ -53,13 +57,16 @@
         stop.departureDelay > 0 && stop.status == 'confirmed'
           ? 'delayed'
           : stop.departureDelay < 0 && stop.status == 'confirmed'
-          ? 'preponed'
-          : stop.departureDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
-          : ''
+            ? 'preponed'
+            : stop.departureDelay == 0 && stop.status == 'confirmed'
+              ? 'on-time'
+              : ''
       "
     >
-      <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
+      o.
+      <span
+        v-if="stop.departureDelay != 0 && (stop.status == 'confirmed' || stop.status == 'stopped')"
+      >
         <s>{{ timestampToString(stop.departureScheduled) }}</s>
         {{ timestampToString(stop.departureReal) }}
 
@@ -96,14 +103,14 @@ $delayedClr: salmon;
 $dateClr: #525151;
 $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
-$stopNameClr: #22a8d1;
+$stopNameClr: #303030;
 
 .stop-label {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 
-  &[data-sbl='true'] {
+  &[data-minor='true'] {
     .date {
       display: none;
     }
@@ -117,6 +124,7 @@ $stopNameClr: #22a8d1;
 
   .name {
     background: $stopNameClr;
+    border-radius: 0.5em 0 0 0.5em;
     padding: 0.3em 0.5em;
 
     display: flex;
@@ -130,6 +138,10 @@ $stopNameClr: #22a8d1;
   .date {
     background: $dateClr;
     padding: 0.3em 0.5em;
+
+    &:last-child {
+      border-radius: 0 0.5em 0.5em 0;
+    }
   }
 
   .stop {
@@ -150,7 +162,7 @@ $stopNameClr: #22a8d1;
   .departure {
     &[data-status='delayed'] {
       s {
-        color: #999;
+        color: #ccc;
       }
 
       span {
@@ -160,7 +172,7 @@ $stopNameClr: #22a8d1;
 
     &[data-status='preponed'] {
       s {
-        color: #999;
+        color: #ccc;
       }
 
       span {

src/components/TrainsView/TrainInfo.vue

@@ -131,6 +131,18 @@
         <div>
           <img src="/images/icon-speed.svg" alt="speed icon" />
           {{ train.speed }} km/h
+
+          <span v-if="stockSpeedLimit != Infinity">
+            &bull;
+            <em
+              class="text--grayed"
+              style="text-decoration: underline dotted"
+              tabindex="0"
+              :data-tooltip="$t('trains.vmax-tooltip')"
+            >
+              {{ stockSpeedLimit }} km/h
+            </em>
+          </span>
         </div>
       </div>
 
@@ -191,6 +203,18 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    stockSpeedLimit() {
+      return this.train.stockList.reduce((acc, stockName) => {
+        const vehicleSpeed =
+          this.apiStore.vehiclesData?.find((v) => v.name == stockName.split(':')[0])?.group.speed ??
+          300;
+
+        return Math.min(vehicleSpeed, acc);
+      }, 300);
+    }
+  },
+
   methods: {
     navigateToJournal() {
       this.$router.push({

src/components/TrainsView/TrainSchedule.vue

@@ -14,7 +14,6 @@
           :data-stop-type="stop.type"
           :data-minor-stop-active="stop.isActive"
           :data-last-confirmed="stop.isLastConfirmed"
-          x
         >
           <span class="stop_info">
             <span class="distance">
@@ -48,26 +47,46 @@
               <span
                 v-if="
                   stop.departureLine &&
-                  stop.departureLine == scheduleStops[i + 1]?.arrivalLine &&
-                  !/sbl/gi.test(stop.departureLine)
+                  scheduleStops[i + 1] != undefined &&
+                  !/-|_|(^it\d+)|(^sbl)/gi.test(stop.departureLine)
                 "
               >
-                {{ stop.departureLine }}
-              </span>
-
-              <span v-else-if="stop.departureLine && !/sbl/gi.test(stop.departureLine)">
-                <div>{{ stop.departureLine }}</div>
-                <div
-                  class="scenery-change-name"
-                  v-if="
-                    i < scheduleStops.length - 1 &&
-                    stop.sceneryName != scheduleStops[i + 1].sceneryName
-                  "
-                >
-                  {{ scheduleStops[i + 1].sceneryName }}
+                <div class="scenery-route">
+                  <span>{{ stop.departureLine }}</span>
+                  <span v-if="stop.departureLineInfo">
+                    | {{ stop.departureLineInfo.routeSpeed }}
+                    <span v-if="stop.departureLineInfo.isElectric">⚡</span>
+                    <img
+                      v-else
+                      src="/images/icon-we4a.png"
+                      :title="$t('trains.we4a-tooltip')"
+                      width="12"
+                    />
+                  </span>
                 </div>
-                <div>
-                  {{ scheduleStops[i + 1].arrivalLine }}
+
+                <div
+                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  class="scenery-change-name"
+                >
+                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
+                  <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
+                  <span v-else> &UpArrowDownArrow;</span>
+                </div>
+
+                <div class="scenery-route">
+                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
+
+                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
+                    | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }}
+                    <span v-if="scheduleStops[i + 1].arrivalLineInfo!.isElectric">⚡</span>
+                    <img
+                      v-else
+                      src="/images/icon-we4a.png"
+                      :title="$t('trains.we4a-tooltip')"
+                      width="12"
+                    />
+                  </span>
                 </div>
               </span>
             </div>
@@ -85,7 +104,7 @@ 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';
+import { StationRoutesInfo, Train } from '../../typings/common';
 
 export interface TrainScheduleStop {
   nameHtml: string;
@@ -111,12 +130,16 @@ export interface TrainScheduleStop {
   isSBL: boolean;
 
   sceneryName: string | null;
-  sceneryHash: string;
   distance: number;
 
   arrivalLine: string | null;
   departureLine: string | null;
 
+  arrivalLineInfo?: StationRoutesInfo;
+  departureLineInfo?: StationRoutesInfo;
+
+  isExternal: boolean;
+
   comments: string | null;
 }
 
@@ -146,13 +169,25 @@ export default defineComponent({
 
       return (
         this.train.timetableData?.followingStops.map((stop, i, arr) => {
-          if (
+          const isExternal =
             i > 0 &&
-            stop.arrivalLine &&
-            stop.arrivalLine != arr[i - 1].departureLine &&
-            !/sbl/gi.test(stop.arrivalLine)
-          )
-            currentSceneryIndex++;
+            stop.arrivalLine != null &&
+            (stop.arrivalLine != arr[i - 1].departureLine ||
+              (stop.arrivalLine == arr[i - 1].departureLine &&
+                !/-|_|(^it\d+)|(^sbl)/gi.test(stop.arrivalLine)));
+
+          if (isExternal) currentSceneryIndex++;
+
+          const sceneryName = this.train.timetableData!.sceneryNames[currentSceneryIndex];
+          const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
+
+          const arrivalLineInfo = sceneryInfo?.routesInfo.find(
+            (r) => r.routeName == stop.arrivalLine
+          );
+
+          const departureLineInfo = sceneryInfo?.routesInfo.find(
+            (r) => r.routeName == stop.departureLine
+          );
 
           return {
             nameHtml: stop.stopName,
@@ -174,14 +209,18 @@ export default defineComponent({
             arrivalLine: stop.arrivalLine,
             departureLine: stop.departureLine,
 
+            arrivalLineInfo: arrivalLineInfo,
+            departureLineInfo: departureLineInfo,
+
+            isExternal,
+
             type: stop.stopType,
             distance: stop.stopDistance,
             isActive: this.activeMinorStops.includes(i),
             isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
             isSBL: /sbl/gi.test(stop.stopName),
             position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
-            sceneryHash: '',
-            sceneryName: this.train.timetableData!.sceneryNames[currentSceneryIndex],
+            sceneryName,
             status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
           };
         }) ?? []
@@ -483,22 +522,26 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
   }
 }
 
-.bottom-line-info {
-  .scenery-change-name {
-    position: relative;
-    margin: 0.25em 0;
+.scenery-route {
+  img {
+    vertical-align: middle;
+  }
+}
 
-    &::before {
-      content: '';
-      position: absolute;
-      height: 2px;
-      width: 30px;
-      background-color: #aaa;
+.scenery-change-name {
+  position: relative;
+  margin: 0.25em 0;
 
-      top: 50%;
-      right: calc(100% + 5px);
-      transform: translate(0, -50%);
-    }
+  &::before {
+    content: '';
+    position: absolute;
+    height: 2px;
+    width: 30px;
+    background-color: #aaa;
+
+    top: 50%;
+    right: calc(100% + 5px);
+    transform: translate(0, -50%);
   }
 }
 </style>

src/data/options.json

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

src/locales/en.json

@@ -125,7 +125,9 @@
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name",
     "search-author": "Timetable author name",
-    "search-issuedFrom": "Origin scenery name",
+    "search-issuedFrom": "Issuing scenery name",
+    "search-via": "Via scenery name",
+    "search-terminatingAt": "Terminating scenery name",
     "search-timetables-date": "Timetable date (UTC+2 / CEST)",
     "search-dispatchers-date": "Service date (UTC+2 / CEST)",
     "search-date": "Date (UTC+2 / CEST)",
@@ -329,6 +331,9 @@
     "current-signal": "at signal",
     "current-track": "on track",
 
+    "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
+    "we4a-tooltip": "Non-electrified track",
+
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",
     "on-time": "On time",
@@ -491,21 +496,16 @@
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
 
-    "timetable-author-title": "Issued by",
-    "timetable-author-unknown": "Author unknown",
+    "timetable-via": "ALL TIMETABLES",
+    "timetable-issuedFrom": "BEGINS HERE",
+    "timetable-terminatingAt": "TERMINATES HERE",
 
-    "timetables-history-id": "ID",
-    "timetables-history-number": "Number",
-    "timetables-history-route": "Route",
-    "timetables-history-driver": "Driver",
-    "timetables-history-author": "TT author",
-    "timetables-history-date": "Date",
+    "timetable-issued-date": "Issued",
+    "timetable-issued-by": " by:",
+    "timetable-issued-for": " for driver:",
 
-    "dispatchers-history-hash": "Hash",
-    "dispatchers-history-dispatcher": "Dispatcher",
-    "dispatchers-history-level": "Level",
-    "dispatchers-history-rate": "Rate",
-    "dispatchers-history-date": "Service date",
+    "dispatcher-rate": "Rate:",
+    "dispatcher-status-changes": "Status changes:",
 
     "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
     "history-list-empty": "No recorded scenery history!",

src/locales/pl.json

@@ -122,6 +122,8 @@
     "search-station": "Nazwa scenerii",
     "search-author": "Nick autora rozkładu jazdy",
     "search-issuedFrom": "Sceneria początkowa",
+    "search-via": "Przez scenerię",
+    "search-terminatingAt": "Sceneria końcowa",
     "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
     "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
     "search-date": "Data (UTC+2 / CEST)",
@@ -315,6 +317,9 @@
     "current-signal": "przy semaforze",
     "current-track": "na szlaku",
 
+    "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
+    "we4a-tooltip": "Szlak niezelektryfikowany",
+
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",
     "on-time": "Planowo",
@@ -474,21 +479,16 @@
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
 
-    "timetable-author-title": "Wydany przez",
-    "timetable-author-unknown": "Autor nieznany",
+    "timetable-via": "WSZYSTKIE RJ",
+    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
+    "timetable-terminatingAt": "KOŃCZY BIEG",
 
-    "timetables-history-id": "ID",
-    "timetables-history-number": "Numer",
-    "timetables-history-route": "Trasa",
-    "timetables-history-driver": "Maszynista",
-    "timetables-history-author": "Autor RJ",
-    "timetables-history-date": "Data",
+    "timetable-issued-date": "Wystawiony",
+    "timetable-issued-by": " przez:",
+    "timetable-issued-for": " dla maszynisty:",
 
-    "dispatchers-history-hash": "Hash",
-    "dispatchers-history-dispatcher": "Dyżurny",
-    "dispatchers-history-level": "Poziom",
-    "dispatchers-history-rate": "Ocena",
-    "dispatchers-history-date": "Data służby",
+    "dispatcher-rate": "Ocena:",
+    "dispatcher-status-changes": "Zmiany statusów:",
 
     "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
     "history-list-empty": "Brak historii dla tej scenerii!",

src/router/index.ts

@@ -58,7 +58,7 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
     if (to.name == 'SceneryView' && from.name !== to.name && from.query['view'] === undefined)
-      return { el: `.app_main` };
+      return { el: `.app_main`, top: -15 };
 
     if (savedPosition) return savedPosition;
   },

src/store/apiStore.ts

@@ -4,20 +4,17 @@ import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
 import axios, { AxiosInstance } from 'axios';
 
-export enum APIMode {
-  PRODUCTION = 0,
-  DEV = 1,
-  MOCK = 2
-}
-
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
     dataStatuses: {
       connection: Status.Data.Loading,
-      sceneries: Status.Data.Loading
+      sceneries: Status.Data.Loading,
+      vehicles: Status.Data.Loading
     },
 
     activeData: undefined as API.ActiveData.Response | undefined,
+    vehiclesData: undefined as API.Vehicles.Response | undefined,
+
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
 
@@ -54,9 +51,22 @@ export const useApiStore = defineStore('apiStore', {
       // Static data
       this.fetchDonatorsData();
       this.fetchStationsGeneralInfo();
+      this.fetchVehiclesInfo();
     },
 
     async fetchActiveData() {
+      if (import.meta.env.VITE_API_ACTIVE_DATA_MODE == 'mocking') {
+        import('../../tests/data/getActiveData.json').then((data) => {
+          console.warn('activeData: mocking mode');
+          this.activeData = data.default as API.ActiveData.Response;
+          this.lastFetchData = new Date();
+
+          this.dataStatuses.connection = Status.Data.Loaded;
+        });
+
+        return;
+      }
+
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
@@ -82,17 +92,39 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     async fetchStationsGeneralInfo() {
-      const sceneryData: StationJSONData[] = (
-        await this.client!.get<StationJSONData[]>('api/getSceneries')
-      ).data;
+      try {
+        const sceneryData: StationJSONData[] = (
+          await this.client!.get<StationJSONData[]>('api/getSceneries')
+        ).data;
 
-      if (!sceneryData) {
+        this.dataStatuses.sceneries = Status.Data.Loaded;
+        this.sceneryData = sceneryData;
+      } catch (error) {
         this.dataStatuses.sceneries = Status.Data.Error;
-        return;
+        console.error('Ups! Wystąpił błąd podczas pobierania informacji o sceneriach:', error);
       }
+    },
 
-      this.dataStatuses.sceneries = Status.Data.Loaded;
-      this.sceneryData = sceneryData;
+    async fetchVehiclesInfo() {
+      // if (import.meta.env.VITE_API_VEHICLES_MODE == 'mocking') {
+      //   import('../../tests/data/vehicles.json').then((data) => {
+      //     console.warn('vehicles.json: mocking mode');
+      //     this.vehiclesData = data.default;
+      //     this.dataStatuses.vehicles = Status.Data.Loaded;
+      //   });
+
+      //   return;
+      // }
+
+      try {
+        const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');
+
+        this.vehiclesData = response.data;
+        this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;
+      } catch (error) {
+        this.dataStatuses.vehicles = Status.Data.Error;
+        console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
+      }
     }
   }
 });

src/styles/JournalSection.scss

@@ -4,7 +4,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: 90vh;
-  min-height: 550px;
+  min-height: 650px;
   margin-top: 0.5em;
   position: relative;
 

src/styles/global.scss

@@ -228,6 +228,10 @@ a.a-button {
 
       background-color: #3c3c3c;
     }
+
+    &:hover {
+      background-color: #555;
+    }
   }
 
   &.btn--image {
@@ -283,6 +287,27 @@ a.a-button {
   }
 }
 
+// Basic tooltip
+[data-tooltip] {
+  cursor: help;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+  transform: translate(0, -50%);
+
+  content: attr(data-tooltip);
+  color: white;
+  background-color: #333;
+  box-shadow: 0 0 5px 2px #aaa;
+  border-radius: 0.5em;
+  padding: 0.5em;
+  margin: 0 0.5em;
+  max-width: 300px;
+  z-index: 100;
+}
+
 @include smallScreen {
   ::-webkit-scrollbar {
     width: 0.5em;
@@ -296,24 +321,11 @@ a.a-button {
       background-color: #777;
     }
   }
-}
 
-// 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;
+  [data-tooltip]:hover::after,
+  [data-tooltip]:focus::after {
+    transform: translate(-50%, 2em);
+    left: 50%;
+    width: 100%;
+  }
 }

src/styles/sceneryViewTables.scss

@@ -1,11 +1,7 @@
-.scenery-table-section {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
-}
-
 table.scenery-history-table {
   width: 100%;
+  table-layout: fixed;
+  min-width: 900px;
   border-collapse: collapse;
 
   thead {
@@ -25,7 +21,7 @@ table.scenery-history-table {
 
   td {
     padding: 0.75em;
-    border-bottom: solid 5px #111;
+    border-bottom: solid 5px #181818;
   }
 }
 

src/typings/api.ts

@@ -1,4 +1,4 @@
-import { Status } from './common';
+import { Status, VehicleData } from './common';
 
 export enum APIDataStatus {
   OK = 'OK',
@@ -19,6 +19,7 @@ export namespace API {
       apiStatuses?: APIStatuses;
     }
   }
+
   export namespace DispatcherHistory {
     export type Response = Data[];
 
@@ -38,6 +39,7 @@ export namespace API {
       stationName: string;
       timestampFrom: number;
       timestampTo?: number;
+      statusHistory: string[];
     }
   }
 
@@ -316,6 +318,10 @@ export namespace API {
   export namespace Donators {
     export type Response = string[];
   }
+
+  export namespace Vehicles {
+    export type Response = VehicleData[];
+  }
 }
 
 export namespace GithubAPI {

src/typings/common.ts

@@ -189,3 +189,33 @@ export interface CheckpointTrain {
   checkpointStop: TrainStop;
   train: Train;
 }
+
+// Vehicles Data
+
+export interface VehicleData {
+  id: number;
+  name: string;
+  type: string;
+  cabinName: string | null;
+  restrictions: Record<string, any> | null;
+  vehicleGroupsId: number;
+  group: VehiclesGroup;
+}
+
+export interface VehiclesGroup {
+  id: number;
+  name: string;
+  speed: number;
+  length: number;
+  weight: number;
+  cargoTypes: VehicleCargo[] | null;
+  locoProps: {
+    coldStart: boolean;
+    doubleManned: boolean;
+  } | null;
+}
+
+export interface VehicleCargo {
+  id: string;
+  weight: number;
+}

src/views/JournalTimetables.vue

@@ -126,6 +126,8 @@ interface TimetablesQueryParams {
   dateTo?: string;
 
   issuedFrom?: string;
+  terminatingAt?: string;
+  via?: string;
 
   countFrom?: number;
   countLimit?: number;
@@ -206,6 +208,8 @@ export default defineComponent({
       'search-driver': '',
       'search-dispatcher': '',
       'search-issuedFrom': '',
+      'search-via': '',
+      'search-terminatingAt': '',
       'search-date': ''
     } as Journal.TimetableSearchType);
 
@@ -299,11 +303,17 @@ export default defineComponent({
     },
 
     setOptions(options: { [key: string]: string }) {
-      this.searchersValues['search-date'] = options['search-date'] ?? '';
-      this.searchersValues['search-driver'] = options['search-driver'] ?? '';
-      this.searchersValues['search-train'] = options['search-train'] ?? '';
-      this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
-      this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
+      Object.keys(this.searchersValues).forEach((v) => {
+        this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
+      });
+
+      // this.searchersValues['search-date'] = options['search-date'] ?? '';
+      // this.searchersValues['search-driver'] = options['search-driver'] ?? '';
+      // this.searchersValues['search-train'] = options['search-train'] ?? '';
+      // this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
+      // this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
+      // this.searchersValues['search-via'] = options['search-via'] ?? '';
+      // this.searchersValues['search-terminatingAt'] = options['search-terminatingAt'] ?? '';
 
       this.sorterActive.id =
         (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
@@ -347,6 +357,8 @@ export default defineComponent({
       const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
       const dateFrom = this.searchersValues['search-date'].trim() || undefined;
       const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
+      const via = this.searchersValues['search-via'].trim() || undefined;
+      const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
 
       let dateTo: string | undefined = undefined;
 
@@ -418,6 +430,10 @@ export default defineComponent({
       queryParams['authorName'] = authorName;
       queryParams['dateFrom'] = dateFrom;
       queryParams['dateTo'] = dateTo;
+      queryParams['issuedFrom'] = issuedFrom;
+      queryParams['terminatingAt'] = terminatingAt;
+      queryParams['via'] = via;
+
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['sortBy'] =
         this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;

src/views/SceneryView.vue

@@ -22,8 +22,8 @@
             v-for="(viewMode, i) in viewModes"
             :key="i"
             class="btn btn--option"
+            :class="{ checked: currentMode == viewMode.component }"
             @click="setViewMode(viewMode.component)"
-            :data-checked="currentMode == viewMode.component"
           >
             {{ $t(viewMode.id) }}
           </button>
@@ -121,10 +121,6 @@ export default defineComponent({
     Status: Status.Data
   }),
 
-  // activated() {
-  //   this.loadSelectedCheckpoint();
-  // },
-
   setup() {
     const route = useRoute();
 
@@ -215,11 +211,10 @@ button.back-btn {
 
   position: relative;
 
-  width: 100%;
   max-width: var(--max-container-width);
-  min-height: 100vh;
+  width: 100%;
 
-  margin: 1rem 0;
+  padding: 1rem 0;
   text-align: center;
 
   &[data-timetable-only='true'] {
@@ -228,30 +223,27 @@ button.back-btn {
   }
 }
 
-.scenery-left {
+.scenery-left,
+.scenery-right {
   position: relative;
+  overflow: auto;
+
   background-color: #181818;
   padding: 1em 0.5em;
 
-  height: 100vh;
-  min-height: 750px;
-  max-height: 1000px;
-  overflow: auto;
+  height: calc(100vh - 0.5em);
+  min-height: 800px;
+  max-height: 2000px;
+}
 
+.scenery-left {
   display: flex;
   flex-direction: column;
 }
 
 .scenery-right {
-  background: #181818;
-  padding: 1em 0.5em;
-
-  height: 100vh;
-  min-height: 750px;
-  max-height: 1000px;
-
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
   gap: 1em;
 }
 
@@ -261,18 +253,12 @@ button.back-btn {
 
 .info-actions {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-wrap: wrap;
+  justify-content: center;
   gap: 0.75em;
 
-  .btn {
+  button {
     padding: 0.5em;
-    box-shadow: 0 0 10px 4px #242424;
-
-    &[data-checked='true'] {
-      color: var(--clr-primary);
-    }
   }
 }
 

src/vite-env.d.ts

@@ -6,8 +6,10 @@ declare module '*.vue' {
   export default component;
 }
 interface ImportMetaEnv {
-  readonly VITE_APP_API_DEV: string;
-  readonly VITE_APP_WS_DEV: string;
+  readonly VITE_API_MODE: 'production' | 'mocking' | 'development';
+  readonly VITE_API_VEHICLES_MODE: 'production' | 'mocking' | 'development';
+  readonly VITE_API_ACTIVE_DATA_MODE: 'production' | 'mocking' | 'development';
+  readonly VITE_UPDATE_TEST: 'test' | 'production';
 }
 
 interface ImportMeta {

tests/data/getDonators.json

@@ -0,0 +1 @@
+["kowbojYT","matseb","peterminecraft333","MIlanSVK_SimRailCZ","kierownik_z_ulicy","luk31as","pppatryk123","Kryszakos","MilyPan","paweld","Isitkiwi","Krisoy007","zeswaq","robcioRK","Ugulele","Spanky","KapitanKoza","Kuba6396","BravuraLion","trichlor","jasieleczeq","trannelgamer","tommy001","Waffel","krytaqu","NadrazakHonza","zordem","Ludolog"]

vite.config.ts

@@ -24,10 +24,11 @@ export default defineConfig({
         cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
-            urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/getSceneries/i,
-            handler: 'StaleWhileRevalidate',
+            urlPattern:
+              /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
+            handler: 'NetworkFirst',
             options: {
-              cacheName: 'spythere-sceneries-cache',
+              cacheName: 'stacjownik-api-cache',
               cacheableResponse: {
                 statuses: [0, 200]
               }
@@ -35,15 +36,14 @@ export default defineConfig({
           },
           {
             urlPattern: /^https:\/\/static.spythere.eu\/.*/i,
-            handler: 'CacheFirst',
+            handler: 'StaleWhileRevalidate',
             options: {
               cacheName: 'spythere-static-cache',
               cacheableResponse: {
                 statuses: [0, 200]
               },
               expiration: {
-                maxEntries: 100,
-                maxAgeSeconds: 60 * 60 * 8
+                maxEntries: 100
               }
             }
           }