api & naming changes

src/components/sections/InputsSection.vue

@@ -9,7 +9,7 @@
             v-for="locoType in locomotiveTypeList"
             :key="locoType.id"
             class="btn btn--choice"
-            :data-selected="locoType.id == store.chosenLocoPower"
+            :data-selected="locoType.id == store.chosenLocoGroup"
             @click="selectLocoType(locoType.id)"
           >
             {{ $t(`inputs.${locoType.id}`) }}
@@ -39,7 +39,7 @@
             v-for="carType in carTypeList"
             :key="carType.id"
             class="btn btn--choice"
-            :data-selected="carType.id == store.chosenCarUseType"
+            :data-selected="carType.id == store.chosenCarGroup"
             @click="selectCarWagonType(carType.id)"
           >
             {{ $t(`inputs.${carType.id}`) }}
@@ -70,7 +70,7 @@
           id="cargo-select"
           :disabled="
             (store.chosenCar && !store.chosenCar.loadable) ||
-            (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
+            (store.chosenCar && store.chosenCar.group == 'wagon-passenger') ||
             !store.chosenCar
           "
           data-select="cargo"
@@ -123,6 +123,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';
 
 export default defineComponent({
   mixins: [imageMixin, stockPreviewMixin, stockMixin],
@@ -131,33 +132,33 @@ export default defineComponent({
     store: useStore(),
     locomotiveTypeList: [
       {
-        id: 'loco-e',
+        id: 'loco-electric',
         desc: 'ELEKTRYCZNE',
       },
       {
-        id: 'loco-s',
+        id: 'loco-diesel',
         desc: 'SPALINOWE',
       },
       {
-        id: 'loco-ezt',
+        id: 'unit-electric',
         desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
       },
       {
-        id: 'loco-szt',
+        id: 'unit-diesel',
         desc: 'SPAL. ZESPOŁY TRAKCYJNE',
       },
-    ],
+    ] as { id: LocoGroupType; desc: string }[],
 
     carTypeList: [
       {
-        id: 'car-passenger',
+        id: 'wagon-passenger',
         desc: 'PASAŻERSKIE',
       },
       {
-        id: 'car-cargo',
+        id: 'wagon-freight',
         desc: 'TOWAROWE',
       },
-    ],
+    ] as { id: WagonGroupType; desc: string }[],
   }),
 
   computed: {
@@ -165,14 +166,14 @@ export default defineComponent({
       return this.store.locoDataList
         .slice()
         .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((loco) => loco.power == this.store.chosenLocoPower);
+        .filter((loco) => loco.group == this.store.chosenLocoGroup);
     },
 
     carOptions() {
       return this.store.carDataList
         .slice()
         .sort((a, b) => (a.type > b.type ? 1 : -1))
-        .filter((car) => car.useType == this.store.chosenCarUseType);
+        .filter((car) => car.group == this.store.chosenCarGroup);
     },
   },
 
@@ -209,14 +210,14 @@ export default defineComponent({
       this.store.stockList[this.store.chosenStockListIndex] = stockObject;
     },
 
-    selectLocoType(locoTypeId: string) {
-      this.store.chosenLocoPower = locoTypeId;
+    selectLocoType(locoGroupType: LocoGroupType) {
+      this.store.chosenLocoGroup = locoGroupType;
       this.store.chosenVehicle = this.locoOptions[0];
       this.store.chosenLoco = this.locoOptions[0];
     },
 
-    selectCarWagonType(carWagonTypeId: string) {
-      this.store.chosenCarUseType = carWagonTypeId;
+    selectCarWagonType(wagonGroupType: WagonGroupType) {
+      this.store.chosenCarGroup = wagonGroupType;
       this.store.chosenVehicle = this.carOptions[0];
       this.store.chosenCar = this.carOptions[0];
       this.store.chosenCargo = null;

src/components/sections/TrainImageSection.vue

@@ -20,7 +20,7 @@
       <b style="color: #ccc">
         {{
           $t(
-            `preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`
+            `preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
           )
         }}
       </b>
@@ -37,7 +37,7 @@
 
         <div v-else>
           {{
-            store.chosenVehicle.useType == 'car-cargo'
+            store.chosenVehicle.group == 'wagon-freight'
               ? $t(`usage.${store.chosenVehicle.constructionType}`)
               : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
           }}
@@ -60,7 +60,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 import { ILocomotive, IVehicle } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
 
@@ -103,7 +103,7 @@ export default defineComponent({
     },
 
     isLocomotive(vehicle: IVehicle): vehicle is ILocomotive {
-      return isLocomotive(vehicle);
+      return isTractionUnit(vehicle);
     },
 
     onImageClick(e: Event) {

src/components/tabs/StockGeneratorTab.vue

@@ -290,7 +290,7 @@ export default defineComponent({
       this.store.chosenLoco = null;
       this.store.chosenCargo = null;
 
-      if (c) this.store.chosenCarUseType = c?.useType;
+      if (c) this.store.chosenCarGroup = c?.group;
     },
 
     toggleCargoChosen(cargoType: string, vehicles: string[]) {

src/components/tabs/StockListTab.vue

@@ -474,6 +474,7 @@ export default defineComponent({
 
 .warning {
   padding: 0.25em;
+  margin: 0.25em 0;
   background: $accentColor;
   color: black;
 

src/components/tabs/WikiListTab.vue

@@ -67,9 +67,9 @@
               </td>
 
               <td v-if="isLocomotive(vehicle)">
-                {{ $t(`wiki.${vehicle.power}`) }}
+                {{ $t(`wiki.${vehicle.group}`) }}
               </td>
-              <td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
+              <td v-else>{{ $t(`wiki.${vehicle.group}`) }}</td>
 
               <td>{{ vehicle.constructionType }}</td>
               <td>{{ vehicle.length }}m</td>
@@ -97,7 +97,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import { IVehicle } from '../../types';
-import { isLocomotive } from '../../utils/vehicleUtils';
+import { isTractionUnit } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';
 
@@ -165,7 +165,7 @@ export default defineComponent({
   },
 
   methods: {
-    isLocomotive,
+    isLocomotive: isTractionUnit,
 
     toggleFilter(name: typeof this.currentFilterMode) {
       this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
@@ -198,14 +198,16 @@ export default defineComponent({
 
         case 'cargoCount':
           return (
-            (!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoTypes.length || -1) : -1) -
-            (!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoTypes.length || -1) * direction : -1)
+            (!isTractionUnit(row1.vehicle) ? Math.sign(row1.vehicle.cargoTypes.length || -1) : -1) -
+            (!isTractionUnit(row2.vehicle)
+              ? (row2.vehicle.cargoTypes.length || -1) * direction
+              : -1)
           );
 
         case 'coldStart':
           return (
-            ((isLocomotive(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) -
-              (isLocomotive(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
+            ((isTractionUnit(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) -
+              (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
             direction
           );
 
@@ -227,8 +229,8 @@ export default defineComponent({
           show:
             new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
             (this.currentFilterMode == 'all' ||
-              (this.currentFilterMode == 'tractions' && isLocomotive(vehicle)) ||
-              (this.currentFilterMode == 'carriages' && !isLocomotive(vehicle))),
+              (this.currentFilterMode == 'tractions' && isTractionUnit(vehicle)) ||
+              (this.currentFilterMode == 'carriages' && !isTractionUnit(vehicle))),
         }))
         .sort((a, b) => this.sortTableRows(a, b));
     },

src/components/utils/StockThumbnails.vue

@@ -43,7 +43,7 @@ const onListItemClick = (index: number) => {
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
-  (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
+  (e.target as HTMLImageElement).src = `images/${stock.group}-unknown.png`;
 };
 
 watch(