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) {