funkcjonalności listy pojazdów

src/components/sections/StockSection.vue

@@ -8,6 +8,7 @@
         :data-selected="store.stockSectionMode == id"
       >
         {{ name }}
+        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
 

src/components/tabs/WikiListTab.vue

@@ -11,32 +11,33 @@
       </div>
     </div>
 
-    <div class="table-wrapper">
+    <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
       <table>
         <thead>
           <tr>
-            <th>Zdjęcie</th>
+            <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header.id)">
-            <th>Nazwa</th>
+              {{ header.name }}
-            <th>Typ</th>
+
-            <th>Długość</th>
+              <span v-if="currentModeSorter.id == header.id">
-            <th>Masa</th>
+                {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
-            <th>Prędkość</th>
+              </span>
+            </th>
           </tr>
         </thead>
 
         <tbody v-if="wikiMode == 'locomotives'">
-          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)">
+          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)" @dblclick="addLocomotive(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>{{ vehicleTypes[loco.power] }}</td>
+            <td>{{ loco.constructionType }}</td>
             <td>{{ loco.length }}m</td>
             <td>{{ loco.mass }}t</td>
             <td>{{ loco.maxSpeed }}km/h</td>
@@ -44,11 +45,10 @@
         </tbody>
 
         <tbody v-else>
-          <tr v-for="car in computedCarList" @click="previewCarWagon(car)">
+          <tr v-for="car in computedCarList" @click="previewCarWagon(car)" @dblclick="addCarWagon(car)">
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
-                width="170"
                 loading="lazy"
                 :alt="`Lokomotywa ${car.type}`"
               />
@@ -59,6 +59,7 @@
             <td>{{ car.length }}m</td>
             <td>{{ car.mass }}t</td>
             <td>{{ car.maxSpeed }}km/h</td>
+            <td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
           </tr>
         </tbody>
       </table>
@@ -70,41 +71,138 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { ICarWagon, ILocomotive } from '../../types';
+import { Vehicle } from '../../types';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import stockMixin from '../../mixins/stockMixin';
 
 type WikiMode = 'locomotives' | 'carWagons';
+type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'power';
+
+const locoHeaders: { name: string; id: SorterID }[] = [
+  { name: 'Zdjęcie', id: 'image' },
+  { name: 'Nazwa', id: 'type' },
+  { name: 'Rodzaj', id: 'power' },
+  { name: 'Konstrukcja', id: 'constructionType' },
+  { name: 'Długość', id: 'length' },
+  { name: 'Masa', id: 'mass' },
+  { name: 'Prędkość', id: 'maxSpeed' },
+];
+
+const carHeaders: { name: string; id: SorterID }[] = [
+  { name: 'Zdjęcie', id: 'image' },
+  { name: 'Nazwa', id: 'type' },
+  { name: 'Konstrukcja', id: 'constructionType' },
+  { name: 'Długość', id: 'length' },
+  { name: 'Masa', id: 'mass' },
+  { name: 'Prędkość', id: 'maxSpeed' },
+  { name: 'Ładunki', id: 'cargoCount' },
+];
+
+const vehicleTypes: { [key: string]: string } = {
+  'loco-ezt': 'EZT',
+  'loco-szt': 'SZT',
+  'loco-s': 'Spalinowóz',
+  'loco-e': 'Elektrowóz',
+};
 
 export default defineComponent({
-  mixins: [stockPreviewMixin],
+  mixins: [stockPreviewMixin, stockMixin],
 
   data() {
     return {
       store: useStore(),
+      locoHeaders,
+      carHeaders,
+      vehicleTypes,
+
+      locosScrollTop: 0,
+      carsScrollTop: 0,
+
       wikiMode: 'locomotives' as WikiMode,
       searchedVehicleTypeName: '',
+
+      currentLocoSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+
+      currentCarSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
     };
   },
 
+  activated() {
+    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+    tableWrapperRef.scrollTo({ top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop });
+  },
+
   methods: {
+    scrollEvent(e: Event) {
+      const tableScrollTop = (e.target as HTMLElement).scrollTop;
+
+      if (this.wikiMode == 'locomotives') this.locosScrollTop = tableScrollTop;
+      else this.carsScrollTop = tableScrollTop;
+    },
+
     changeWikiMode(wikiMode: WikiMode) {
       this.searchedVehicleTypeName = '';
       this.wikiMode = wikiMode;
     },
+
+    toggleSorter(id: SorterID) {
+      if (id == this.currentModeSorter.id) this.currentModeSorter.direction = -this.currentModeSorter.direction;
+      this.currentModeSorter.id = id;
+    },
+
+    sortVehicles(vA: Vehicle, vB: Vehicle) {
+      const { id, direction } = this.currentModeSorter;
+      // const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
+      const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
+
+      switch (id) {
+        case 'type':
+        case 'constructionType':
+          return direction == 1 ? vA[id].localeCompare(vB[id]) : vB[id].localeCompare(vA[id]);
+
+        case 'mass':
+        case 'length':
+        case 'maxSpeed':
+          return Math.sign(vA[id] - vB[id]) * direction;
+
+        case 'cargoCount':
+          if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
+
+        default:
+          break;
+      }
+
+      return direction == 1 ? vA.type.localeCompare(vB.type) : vB.type.localeCompare(vA.type);
+    },
   },
 
   computed: {
+    currentModeSorter() {
+      console.log(this.wikiMode);
+
+      return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
+    },
+
     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));
+      return this.store.locoDataList
+        .filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type))
+        .sort(this.sortVehicles);
     },
 
     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));
+      return this.store.carDataList
+        .filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type))
+        .sort(this.sortVehicles);
     },
   },
 });
@@ -150,25 +248,37 @@ export default defineComponent({
   th {
     background-color: #111;
     padding: 0.5em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
   }
 
   tr {
+    cursor: pointer;
     background-color: #333;
 
     &:nth-child(odd) {
       background-color: #444;
     }
+
+    &:hover {
+      background-color: #666;
+    }
   }
 
   td {
     text-align: center;
+    padding: 0.25em;
     height: 100px;
   }
 
+  td:first-child {
+    width: 150px;
+  }
+
   td img {
     display: block;
-    margin: 0 auto;
+    width: 150px;
-    object-fit: cover;
   }
 }
 </style>

src/styles/global.scss

@@ -135,8 +135,8 @@ button {
 
 select,
 input {
-  background: none;
+  background: $bgColor;
-  border: 2px solid white;
+  border: 2px solid #aaa;
   outline: none;
 
   padding: 0.25em 0.35em;
@@ -156,7 +156,7 @@ input {
 }
 
 option {
-  color: black;
+  color: white;
   border: none;
 }