feature: tabela z pojazdami i wagonami

src/components/sections/StockSection.vue

@@ -25,12 +25,14 @@ 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 store = useStore();
 type SectionMode = typeof store.stockSectionMode;
 
 const sectionModes: { [key: string]: SectionMode } = {
   SKŁAD: 'stock-list',
+  POJAZDY: 'wiki-list',
   'GNR NUMERU': 'number-generator',
   'GNR SKŁADU': 'stock-generator',
 };
@@ -40,6 +42,9 @@ const chosenSectionComponent = computed(() => {
     case 'stock-list':
       return StockListTab;
 
+    case 'wiki-list':
+      return WikiListTab;
+
     case 'stock-generator':
       return StockGeneratorTab;
 
@@ -83,7 +88,7 @@ function chooseSection(sectionId: SectionMode) {
 
 .section_modes {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 0.5em;
 
   margin-bottom: 0.5em;

src/components/tabs/WikiListTab.vue

@@ -0,0 +1,174 @@
+<template>
+  <section class="wiki-list">
+    <div class="actions-panel">
+      <div class="actions-panel_vehicles">
+        <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
+        <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
+      </div>
+
+      <div class="actions-panel_search">
+        <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th>Zdjęcie</th>
+            <th>Nazwa</th>
+            <th>Typ</th>
+            <th>Długość</th>
+            <th>Masa</th>
+            <th>Prędkość</th>
+          </tr>
+        </thead>
+
+        <tbody v-if="wikiMode == 'locomotives'">
+          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)">
+            <td>
+              <img
+                :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
+                width="170"
+                loading="lazy"
+                :alt="`Lokomotywa ${loco.type}`"
+              />
+            </td>
+
+            <td>{{ loco.type }}</td>
+            <td>{{ loco.cabinType }}</td>
+            <td>{{ loco.length }}m</td>
+            <td>{{ loco.mass }}t</td>
+            <td>{{ loco.maxSpeed }}km/h</td>
+          </tr>
+        </tbody>
+
+        <tbody v-else>
+          <tr v-for="car in computedCarList" @click="previewCarWagon(car)">
+            <td>
+              <img
+                :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
+                width="170"
+                loading="lazy"
+                :alt="`Lokomotywa ${car.type}`"
+              />
+            </td>
+
+            <td>{{ car.type }}</td>
+            <td>{{ car.constructionType }}</td>
+            <td>{{ car.length }}m</td>
+            <td>{{ car.mass }}t</td>
+            <td>{{ car.maxSpeed }}km/h</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import { ICarWagon, ILocomotive } from '../../types';
+
+type WikiMode = 'locomotives' | 'carWagons';
+
+export default defineComponent({
+  mixins: [stockPreviewMixin],
+
+  data() {
+    return {
+      store: useStore(),
+      wikiMode: 'locomotives' as WikiMode,
+      searchedVehicleTypeName: '',
+    };
+  },
+
+  methods: {
+    changeWikiMode(wikiMode: WikiMode) {
+      this.searchedVehicleTypeName = '';
+      this.wikiMode = wikiMode;
+    },
+  },
+
+  computed: {
+    computedLocoList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+      if (trimmedSearchValue == '') return this.store.locoDataList;
+
+      return this.store.locoDataList.filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type));
+    },
+
+    computedCarList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+      if (trimmedSearchValue == '') return this.store.carDataList;
+
+      return this.store.carDataList.filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type));
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.actions-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin: 0.5em 0;
+}
+
+.actions-panel_vehicles {
+  display: flex;
+  gap: 0.5em;
+}
+
+.actions-panel_search {
+  input {
+    width: auto;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  height: 750px;
+}
+
+.wiki-list table {
+  border-collapse: collapse;
+  width: 100%;
+
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
+  th {
+    background-color: #111;
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: #333;
+
+    &:nth-child(odd) {
+      background-color: #444;
+    }
+  }
+
+  td {
+    text-align: center;
+    height: 100px;
+  }
+
+  td img {
+    display: block;
+    margin: 0 auto;
+    object-fit: cover;
+  }
+}
+</style>

src/mixins/stockPreviewMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
 
 export default defineComponent({
   setup() {
@@ -48,7 +48,7 @@ export default defineComponent({
       });
     },
 
-    previewStock(stock: IStock) {      
+    previewStock(stock: IStock) {
       if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
 
       if (stock.isLoco) {
@@ -67,14 +67,26 @@ export default defineComponent({
       }
     },
 
+    previewLocomotive(loco: ILocomotive) {
+      this.store.chosenLoco = loco;
+      this.store.chosenVehicle = loco;
+      this.store.chosenLocoPower = loco.power;
+    },
+
+    previewCarWagon(carWagon: ICarWagon) {
+      this.store.chosenCar = carWagon;
+      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenVehicle = carWagon;
+
+      this.store.chosenCargo = null;
+    },
+
     resetPreview() {
-        this.store.chosenVehicle = null;
-        this.store.chosenCar = null;
-        this.store.chosenCargo = null;
-        this.store.chosenLoco = null;
-    }
+      this.store.chosenVehicle = null;
+      this.store.chosenCar = null;
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+    },
   },
 });
 
-
-

src/store.ts

@@ -38,7 +38,7 @@ export const useStore = defineStore({
 
       vehiclePreviewSrc: '',
 
-      stockSectionMode: 'stock-list',
+      stockSectionMode: 'wiki-list',
 
       isRandomizerCardOpen: false,
       isRealStockListCardOpen: false,

src/types.ts

@@ -27,7 +27,7 @@ export interface IStore {
   isRandomizerCardOpen: boolean;
   isRealStockListCardOpen: boolean;
 
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator';
+  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
   stockData?: IStockData;
 }
 
@@ -42,7 +42,7 @@ export interface IStockProps {
 
 export interface IStockData {
   version: string;
-  
+
   generator: {
     passenger: any;
     cargo: {