Merge pull request #40 from Spythere/development

v1.8.13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.8.10",
+  "version": "1.8.13",
   "private": true,
   "type": "module",
   "scripts": {
@@ -16,7 +16,8 @@
     "pinia": "^2.0.17",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",
-    "vue-i18n": "9.11.0"
+    "vue-i18n": "9.11.0",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <AppModals />
   <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
-  <AppContainerView />
+ 
+  <router-view></router-view>
 </template>
 
 <script lang="ts">

src/components/cards/RealStockCard.vue

@@ -76,7 +76,7 @@
               <div class="thumbnail-container">
                 <div>{{ stockType }}</div>
                 <img
-                  :src="`https://static.spythere.eu/thumbnails/${stockType}.png`"
+                  :src="`https://stacjownik.spythere.eu/static/thumbnails/${stockType}.png`"
                   :title="stockType"
                   style="opacity: 0"
                   @error="(e) => onStockItemError(e, stockType)"
@@ -100,7 +100,7 @@ import { useStore } from '../../store';
 import imageMixin from '../../mixins/imageMixin';
 import stockMixin from '../../mixins/stockMixin';
 
-import { IRealComposition, VehicleGroupType } from '../../types';
+import { IRealComposition, VehicleGroupType } from '../../types/common.types';
 
 function getVehicleType(stockType: string): VehicleGroupType {
   if (/^E/.test(stockType)) return 'loco-electric';

src/components/sections/InputsSection.vue

@@ -126,7 +126,7 @@ import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
-import { LocoGroupType, WagonGroupType } from '../../types';
+import { LocoGroupType, WagonGroupType } from '../../types/common.types';
 
 export default defineComponent({
   mixins: [imageMixin, stockPreviewMixin, stockMixin],

src/components/sections/StockSection.vue

@@ -1,45 +1,46 @@
 <template>
   <section class="stock-section">
     <div class="section_modes">
-      <button
-        v-for="(id, i) in sectionModes"
-        :key="id"
-        class="btn"
-        ref="sectionButtonRefs"
-        @click="chooseSection(id)"
-        :data-selected="store.stockSectionMode == id"
-      >
-        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
-        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
-      </button>
+      <router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href">
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
+        <span class="text--grayed" v-if="route.name == 'stock'">({{ store.stockList.length }})</span>
+      </router-link>
     </div>
 
     <transition name="tab-change" mode="out-in">
       <keep-alive>
-        <component :is="chosenSectionComponent"></component>
+        <component :is="route.meta.viewMode"></component>
       </keep-alive>
     </transition>
   </section>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
-
-const sectionButtonRefs = ref([]);
+import { useRoute, useRouter } from 'vue-router';
 
 const store = useStore();
-type SectionMode = typeof store.stockSectionMode;
+const route = useRoute();
+const router = useRouter();
 
-const sectionModes: SectionMode[] = [
-  'stock-list',
-  'wiki-list',
-  'number-generator',
-  'stock-generator',
+const routes = [
+  {
+    name: 'stock',
+    href: '/',
+  },
+  {
+    name: 'wiki',
+    href: '/wiki',
+  },
+  {
+    name: 'numgen',
+    href: '/numgen',
+  },
+  {
+    name: 'stockgen',
+    href: '/stockgen',
+  },
 ];
 
 onMounted(() => {
@@ -49,34 +50,10 @@ onMounted(() => {
     if (/^[1234]$/.test(e.key)) {
       const keyNum = Number(e.key);
 
-      store.stockSectionMode = sectionModes[keyNum - 1];
-      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
+      router.push(routes[keyNum - 1].href);
     }
   });
 });
-
-const chosenSectionComponent = computed(() => {
-  switch (store.stockSectionMode) {
-    case 'stock-list':
-      return StockListTab;
-
-    case 'wiki-list':
-      return WikiListTab;
-
-    case 'stock-generator':
-      return StockGeneratorTab;
-
-    case 'number-generator':
-      return NumberGeneratorTab;
-
-    default:
-      return StockListTab;
-  }
-});
-
-function chooseSection(sectionId: SectionMode) {
-  store.stockSectionMode = sectionId;
-}
 </script>
 
 <style lang="scss">
@@ -107,32 +84,11 @@ function chooseSection(sectionId: SectionMode) {
 .section_modes {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+  padding: 1px;
 
   gap: 0.5em;
 
   margin-bottom: 1em;
-
-  button {
-    position: relative;
-    border-radius: 0.5em 0.5em 0 0;
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-
-      content: '';
-      width: 0;
-      height: 2px;
-      transition: all 100ms;
-      background-color: $accentColor;
-    }
-
-    &[data-selected='true']::after {
-      width: 100%;
-    }
-  }
 }
 
 @media screen and (max-width: 650px) {

src/components/tabs/StockGeneratorTab.vue

@@ -118,7 +118,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 
 import stockMixin from '../../mixins/stockMixin';
-import { ICargo, ICarWagon, IStock } from '../../types';
+import { ICargo, ICarWagon, IStock } from '../../types/common.types';
 import { isTractionUnit } from '../../utils/vehicleUtils';
 
 import generatorDataJSON from '../../data/generatorData.json';
@@ -280,10 +280,9 @@ export default defineComponent({
 
       const bestStockList = bestGeneration.stockList;
 
-      this.groupStock(bestStockList);
-
       this.store.stockList = bestGeneration.stockList;
-      this.store.stockSectionMode = 'stock-list';
+      this.groupStock(bestStockList);
+      this.$router.push('/');
     },
 
     previewCar(type: string) {

src/components/tabs/WikiListTab.vue

@@ -6,41 +6,48 @@
 
     <div class="tab_content">
       <div class="actions">
-        <label>
-          <span>{{ $t('wiki.labels.search-vehicle') }}</span>
+        <div class="action action-input">
+          <label for="search-vehicle">
+            {{ $t('wiki.labels.search-vehicle') }}
+            <button class="reset-btn" @click="resetSearchInput">
+              <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
+            </button>
+          </label>
           <input
             type="text"
+            id="search-vehicle"
+            name="search-vehicle"
             :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
             v-model="searchedVehicleTypeName"
           />
-        </label>
+        </div>
 
-        <label>
-          <span>{{ $t('wiki.labels.vehicles') }}</span>
+        <div class="action action-select">
+          <label for="filter-type">{{ $t('wiki.labels.vehicles') }}</label>
           <select name="filter-type" id="filter-type" v-model="filterType">
             <option v-for="filter in filters" :key="filter" :value="filter">
               {{ $t(`wiki.filters.${filter}`) }}
             </option>
           </select>
-        </label>
+        </div>
 
-        <label>
-          <span>{{ $t('wiki.labels.sort-by') }}</span>
+        <div class="action action-select">
+          <label for="sorter-type">{{ $t('wiki.labels.sort-by') }}</label>
           <select name="sorter-type" id="sorter-type" v-model="sorterType">
             <option v-for="sorter in sorters" :key="sorter" :value="sorter">
               {{ $t(`wiki.sort-by.${sorter}`) }}
             </option>
           </select>
-        </label>
+        </div>
 
-        <label>
-          <span>{{ $t('wiki.labels.sort-direction') }}</span>
+        <div class="action action-select">
+          <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>
 
           <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
             <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
             <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
           </select>
-        </label>
+        </div>
       </div>
 
       <ul class="vehicles" ref="vehicles">
@@ -79,6 +86,10 @@
           </span>
         </li>
       </ul>
+
+      <div class="no-vehicles-warning" v-if="computedVehicles.length == 0">
+        {{ $t('wiki.no-vehicles') }}
+      </div>
     </div>
   </section>
 </template>
@@ -87,19 +98,28 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { IVehicle } from '../../types';
+import { IVehicle } from '../../types/common.types';
 import { isTractionUnit } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 
 const sorters = ['type', 'group', 'length', 'weight', 'maxSpeed'] as const;
-const filters = ['vehicles-all', 'vehicles-traction', 'vehicles-wagon'] as const;
+
+enum VehicleFilter {
+  AllVehicles = 'vehicles-all',
+  AllTractions = 'vehicles-tractions-all',
+  ElectricTraction = 'vehicles-tractions-electric',
+  DieselTraction = 'vehicles-tractions-diesel',
+  EmuTraction = 'vehicles-tractions-emu',
+  DmuTraction = 'vehicles-tractions-dmu',
+  AllWagons = 'vehicles-wagons-all',
+  PassengerWagons = 'vehicles-wagons-passenger',
+  FreightWagons = 'vehicles-wagons-freight',
+}
 
 type SorterType = (typeof sorters)[number];
 type SorterDirection = 'asc' | 'desc';
 
-type FilterType = (typeof filters)[number];
-
 export default defineComponent({
   mixins: [stockPreviewMixin, stockMixin, imageMixin],
 
@@ -109,14 +129,14 @@ export default defineComponent({
       observer: null as IntersectionObserver | null,
 
       sorters: sorters,
-      filters: filters,
+      filters: Object.values(VehicleFilter),
 
       searchedVehicleTypeName: '',
 
       sorterType: 'type' as SorterType,
       sorterDirection: 'asc' as SorterDirection,
 
-      filterType: 'vehicles-all' as FilterType,
+      filterType: VehicleFilter.AllVehicles,
 
       lastScrollTop: 0,
     };
@@ -148,23 +168,44 @@ export default defineComponent({
       this.previewVehicle(vehicle);
     },
 
+    resetSearchInput() {
+      this.searchedVehicleTypeName = '';
+    },
+
     filterVehicles(v: IVehicle) {
-      if (this.searchedVehicleTypeName)
-        return v.type
-          .toLocaleLowerCase()
-          .includes(this.searchedVehicleTypeName.toLocaleLowerCase());
+      if (
+        this.searchedVehicleTypeName != '' &&
+        !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())
+      )
+        return false;
 
       switch (this.filterType) {
-        case 'vehicles-all':
-          return true;
-        case 'vehicles-traction':
+        case VehicleFilter.AllTractions:
           return isTractionUnit(v);
-        case 'vehicles-wagon':
+
+        case VehicleFilter.ElectricTraction:
+          return isTractionUnit(v) && v.group == 'loco-electric';
+
+        case VehicleFilter.DieselTraction:
+          return isTractionUnit(v) && v.group == 'loco-diesel';
+
+        case VehicleFilter.EmuTraction:
+          return isTractionUnit(v) && v.group == 'unit-electric';
+
+        case VehicleFilter.DmuTraction:
+          return isTractionUnit(v) && v.group == 'unit-diesel';
+
+        case VehicleFilter.AllWagons:
           return !isTractionUnit(v);
 
-        default:
-          return false;
+        case VehicleFilter.PassengerWagons:
+          return !isTractionUnit(v) && v.group == 'wagon-passenger';
+
+        case VehicleFilter.FreightWagons:
+          return !isTractionUnit(v) && v.group == 'wagon-freight';
       }
+
+      return true;
     },
 
     sortVehicles(v1: IVehicle, v2: IVehicle) {
@@ -180,21 +221,6 @@ export default defineComponent({
         case 'maxSpeed':
           return Math.sign(v1[this.sorterType] - v2[this.sorterType]) * direction;
 
-        // case 'cargoCount':
-        //   return (
-        //     Math.sign(
-        //       (!isTractionUnit(v1) ? v1.cargoTypes.length || -1 : -1) -
-        //         (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1)
-        //     ) * direction
-        //   );
-
-        // case 'coldStart':
-        //   return (
-        //     ((isTractionUnit(v1) && v1.coldStart ? 1 : -1) -
-        //       (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
-        //     direction
-        //   );
-
         default:
           return v1.type.localeCompare(v2.type) * direction;
       }
@@ -220,16 +246,29 @@ export default defineComponent({
   gap: 0.5em;
 }
 
-.actions > label {
+.action {
   display: flex;
   flex-direction: column;
-  gap: 0.25em;
+  gap: 0.5em;
 
-  span {
+  label {
     color: #ccc;
+    position: relative;
   }
 }
 
+.action.action-input label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.reset-btn {
+  display: flex;
+  background-color: #161c2e;
+  border-radius: 0.25em;
+}
+
 .vehicles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
@@ -290,6 +329,12 @@ export default defineComponent({
   color: #ccc;
 }
 
+.no-vehicles-warning {
+  text-align: center;
+  padding: 1em;
+  background-color: #161c2e;
+}
+
 @media screen and (max-width: $breakpointSm) {
   .actions-panel {
     align-items: stretch;

src/components/utils/StockThumbnails.vue

@@ -28,7 +28,7 @@
             v-for="thumbnail in getVehicleThumbnails(stock.vehicleRef.type)"
             draggable="false"
             style="min-width: 200px"
-            :src="`https://static.spythere.eu/thumbnails/v2/${thumbnail.src}.png`"
+            :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnail.src}.png`"
             :alt="stock.vehicleRef.type"
             :title="stock.vehicleRef.type"
             @load="($event) => (($event.target as HTMLImageElement).style.minWidth = 'auto')"

src/locales/en.json

@@ -41,10 +41,10 @@
     "construction": "Construction type:"
   },
   "topbar": {
-    "stock-list": "STOCK",
-    "wiki-list": "VEHICLES",
-    "number-generator": "NUMBER GEN.",
-    "stock-generator": "STOCK GEN."
+    "stock": "STOCK",
+    "wiki": "VEHICLES",
+    "numgen": "NUMBER GEN.",
+    "stockgen": "STOCK GEN."
   },
   "stocklist": {
     "title": "STOCK EDITOR",
@@ -128,20 +128,20 @@
       "EI": "EI - domestic express",
       "EC": "EC - international express",
       "EN": "EN - domestic night express",
-  
+
       "MP": "MP - intervoivodeship bullet",
       "MO": "MO - intervoivodeship regio",
       "MM": "MM - international bullet",
       "MH": "MH - intervoivodeship night bullet",
-      
+
       "RP": "RP - voivodeship bullet",
       "RM": "RM - international voivodeship regio",
       "RO": "RO - voivodeship regio",
       "RA": "RA - voivodeship regio (urban)",
-  
+
       "PW": "PW - empty passenger",
       "PX": "PX - empty passenger test drive",
-  
+
       "TC": "TC - international freight (intermodal)",
       "TG": "TG - international freight (organized cargo)",
       "TR": "TR - international freight (unorganized cargo)",
@@ -151,18 +151,19 @@
       "TK": "TK - freight (for stations & sidings)",
       "TS": "TS - empty freight test drive",
       "TH": "TH - locomotive rolling stock (over 3 vehicles)",
-  
+
       "LT": "LT - freight locomotive only",
       "LP": "LP - passenger locomotive only",
       "LS": "LS - shunting locomotive only",
       "LZ": "LS - shunting locomotive only",
-  
+
       "ZN": "ZN - inspection / diagnostic type",
       "ZU": "ZU - other maintenance type"
     }
   },
   "wiki": {
     "title": "LIST OF AVAILABLE VEHICLES",
+    "no-vehicles": "No vehicles to show with the selected filters!",
     "labels": {
       "vehicles": "Vehicles",
       "sort-by": "Sort by",
@@ -172,8 +173,14 @@
     },
     "filters": {
       "vehicles-all": "all",
-      "vehicles-traction": "traction units",
-      "vehicles-wagon": "wagons"
+      "vehicles-tractions-all": "traction units - all",
+      "vehicles-tractions-electric": "electric locomotives",
+      "vehicles-tractions-diesel": "diesel locomotives",
+      "vehicles-tractions-emu": "electric units",
+      "vehicles-tractions-dmu": "diesel units",
+      "vehicles-wagons-all": "wagons - all",
+      "vehicles-wagons-passenger": "wagons - passenger",
+      "vehicles-wagons-freight": "wagons - freight"
     },
     "sort-by": {
       "type": "name",

src/locales/pl.json

@@ -41,10 +41,10 @@
     "construction": "Typ konstrukcji:"
   },
   "topbar": {
-    "stock-list": "SKŁAD",
-    "wiki-list": "POJAZDY",
-    "number-generator": "GNR NUMERU",
-    "stock-generator": "GNR SKŁADU"
+    "stock": "SKŁAD",
+    "wiki": "POJAZDY",
+    "numgen": "GNR NUMERU",
+    "stockgen": "GNR SKŁADU"
   },
   "stocklist": {
     "title": "EDYTOR SKŁADU",
@@ -137,7 +137,7 @@
       "MM": "MM - międzynar. pośpieszny",
       "MH": "MH - międzywoj. pośpieszny hotelowy",
       "RM": "RM - woj. osobowy międzynarodowy",
-      "RA": "RA - woj. osobowy algomeracyjny",
+      "RA": "RA - woj. osobowy aglomeracyjny",
 
       "PW": "PW - pasażerski próżny - służbowy",
       "PX": "PX - pasażerski próżny próbny",
@@ -163,6 +163,7 @@
   },
   "wiki": {
     "title": "LISTA DOSTĘPNYCH POJAZDÓW",
+    "no-vehicles": "Brak pojazdów do pokazania przy obecnych filtrach!",
     "labels": {
       "vehicles": "Pojazdy",
       "sort-by": "Sortuj wg",
@@ -172,8 +173,14 @@
     },
     "filters": {
       "vehicles-all": "wszystkie",
-      "vehicles-traction": "trakcyjne",
-      "vehicles-wagon": "wagony"
+      "vehicles-tractions-all": "trakcyjne - wszystkie",
+      "vehicles-tractions-electric": "elektrowozy",
+      "vehicles-tractions-diesel": "spalinowozy",
+      "vehicles-tractions-emu": "EZT",
+      "vehicles-tractions-dmu": "SZT",
+      "vehicles-wagons-all": "wagony - wszystkie",
+      "vehicles-wagons-passenger": "wagony pasażerskie",
+      "vehicles-wagons-freight": "wagony towarowe"
     },
     "sort-by": {
       "type": "nazwa",

src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia';
 
 import App from './App.vue';
 import i18n from './i18n-setup';
+import router from './router';
 const pinia = createPinia();
 
-createApp(App).use(pinia).use(i18n).mount('#app');
+createApp(App).use(pinia).use(i18n).use(router).mount('#app');

src/managers/apiManager.ts

@@ -0,0 +1,16 @@
+import http from '../http';
+import { API } from '../types/api.types';
+
+export class ApiManager {
+  static async fetchActiveData() {
+    try {
+      const responseData = (await http.get<API.ActiveData>('/api/getActiveData')).data;
+
+      return responseData;
+    } catch (error) {
+      console.error('Nie udało się pobrać zdalnej zawartości', error);
+    }
+
+    return null;
+  }
+}

src/mixins/imageMixin.ts

@@ -7,7 +7,7 @@ export default defineComponent({
     },
 
     getThumbnailURL(vehicleType: string, size: 'small' | 'large') {
-      return `https://static.spythere.eu/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
+      return `https://stacjownik.spythere.eu/static/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
     },
   },
 });

src/mixins/stockMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types/common.types';
 import { isTractionUnit } from '../utils/vehicleUtils';
 
 export default defineComponent({

src/mixins/stockPreviewMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICarWagon, ILocomotive, IStock, IVehicle, LocoGroupType, WagonGroupType } from '../types';
+import { ICarWagon, ILocomotive, IStock, IVehicle, LocoGroupType, WagonGroupType } from '../types/common.types';
 import { isTractionUnit } from '../utils/vehicleUtils';
 
 export default defineComponent({

src/router.ts

@@ -0,0 +1,53 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import AppContainerView from './views/AppContainerView.vue';
+import WikiListTab from './components/tabs/WikiListTab.vue';
+import StockListTab from './components/tabs/StockListTab.vue';
+import NumberGeneratorTab from './components/tabs/NumberGeneratorTab.vue';
+import StockGeneratorTab from './components/tabs/StockGeneratorTab.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: AppContainerView,
+    meta: {
+      viewMode: StockListTab,
+    },
+    children: [
+      {
+        path: 'stock',
+        redirect: '/',
+        meta: {
+          viewMode: StockListTab,
+        },
+      },
+      {
+        path: 'wiki',
+        component: AppContainerView,
+        meta: {
+          viewMode: WikiListTab,
+        },
+      },
+      {
+        path: 'numgen',
+        component: AppContainerView,
+        meta: {
+          viewMode: NumberGeneratorTab,
+        },
+      },
+      {
+        path: 'stockgen',
+        component: AppContainerView,
+        meta: {
+          viewMode: StockGeneratorTab,
+        },
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

src/store.ts

@@ -9,7 +9,7 @@ import {
   LocoGroupType,
   WagonGroupType,
   IVehicleData,
-} from './types';
+} from './types/common.types';
 import { defineStore } from 'pinia';
 import {
   acceptableWeight,
@@ -50,8 +50,6 @@ export const useStore = defineStore({
 
     vehiclePreviewSrc: '',
 
-    stockSectionMode: 'stock-list',
-
     isRandomizerCardOpen: false,
     isRealStockListCardOpen: false,
 
@@ -59,7 +57,7 @@ export const useStore = defineStore({
 
     lastFocusedElement: null as HTMLElement | null,
 
-    compatibleSimulatorVersion: '2024.1.2',
+    compatibleSimulatorVersion: '2024.2.1',
   }),
 
   getters: {
@@ -139,18 +137,8 @@ export const useStore = defineStore({
     },
 
     handleRouting() {
-      switch (window.location.pathname) {
-        case '/numgnr':
-          this.stockSectionMode = 'number-generator';
-          break;
-        case '/stockgnr':
-          this.stockSectionMode = 'stock-generator';
-          break;
-        case '/vehicles':
-          this.stockSectionMode = 'wiki-list';
-          break;
-        default:
-          break;
+      if (window.location.search.includes('trainId=')) {
+        const trainId = window.location.search;
       }
     },
   },

src/styles/global.scss

@@ -115,6 +115,10 @@ button {
   &:hover {
     color: $accentColor;
   }
+
+  &:focus-visible {
+    outline: 1px solid $accentColor;
+  }
 }
 
 [data-tooltip]:hover::after,
@@ -134,7 +138,8 @@ button {
   cursor: pointer;
 }
 
-.btn {
+.btn,
+.link-btn {
   padding: 0.4em 0.75em;
 
   outline: none;
@@ -202,6 +207,10 @@ button {
   }
 }
 
+.link-btn.router-link-exact-active {
+  color: $accentColor;
+}
+
 select,
 input[type='text'],
 input[type='number'] {

src/types/api.types.ts

@@ -0,0 +1,87 @@
+// API namespace
+export namespace API {
+  export interface ActiveData {
+    trains: Train[];
+    activeSceneries: ActiveScenery[];
+  }
+}
+
+export interface ActiveScenery {
+  dispatcherId: number;
+  dispatcherName: string;
+  dispatcherIsSupporter: boolean;
+  stationName: string;
+  stationHash: string;
+  region: string;
+  maxUsers: number;
+  currentUsers: number;
+  spawn: number;
+  lastSeen: number;
+  dispatcherExp: number;
+  nameFromHeader: string;
+  spawnString?: string;
+  networkConnectionString: string;
+  isOnline: number;
+  dispatcherRate: number;
+  dispatcherStatus: number;
+}
+
+export interface Train {
+  id: string;
+  trainNo: number;
+  mass: number;
+  speed: number;
+  length: number;
+  distance: number;
+  stockString: string;
+  driverName: string;
+  driverId: number;
+  driverIsSupporter: boolean;
+  driverLevel: number;
+  currentStationHash: string;
+  currentStationName: string;
+  signal: string;
+  connectedTrack: string;
+  online: number;
+  lastSeen: number;
+  region: string;
+  isTimeout: boolean;
+  timetable?: Timetable;
+}
+
+export interface Timetable {
+  SKR: boolean;
+  TWR: boolean;
+  hasDangerousCargo: boolean;
+  hasExtraDeliveries: boolean;
+  warningNotes: string;
+  category: string;
+  stopList: TimetableStop[];
+  route: string;
+  timetableId: number;
+  sceneries: string[];
+  path: string;
+}
+
+export interface TimetableStop {
+  stopName: string;
+  stopNameRAW: string;
+  stopType: string;
+  stopDistance: number;
+  pointId: string;
+  comments?: (null | string)[];
+  mainStop: boolean;
+  arrivalLine?: string;
+  arrivalTimestamp: number;
+  arrivalRealTimestamp: number;
+  arrivalDelay: number;
+  departureLine?: string;
+  departureTimestamp: number;
+  departureRealTimestamp: number;
+  departureDelay: number;
+  beginsHere: boolean;
+  terminatesHere: boolean;
+  confirmed: number;
+  stopped: number;
+  stopTime?: number;
+}

src/types/common.types.ts

@@ -1,5 +1,4 @@
 export type IVehicle = ILocomotive | ICarWagon;
-export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
 
 export type LocoGroupType = 'loco-electric' | 'loco-diesel' | 'unit-electric' | 'unit-diesel';
 export type WagonGroupType = 'wagon-passenger' | 'wagon-freight';

src/utils/vehicleUtils.ts

@@ -6,7 +6,7 @@ import {
   IVehiclesAPIResponse,
   LocoGroupType,
   WagonGroupType,
-} from '../types';
+} from '../types/common.types';
 import {
   MassLimitLocoType,
   SpeedLimitLocoType,

yarn.lock

@@ -1672,6 +1672,11 @@
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz"
   integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
 
+"@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/eslint-config-prettier@^9.0.0":
   version "9.0.0"
   resolved "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz"
@@ -4346,6 +4351,13 @@ vue-i18n@9.11.0:
     "@intlify/shared" "9.11.0"
     "@vue/devtools-api" "^6.5.0"
 
+vue-router@4:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.5.0.tgz#58fc5fe374e10b6018f910328f756c3dae081f14"
+  integrity sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz"