feature: skrót posterunku w tabelce

src/components/App/StatusIndicator.vue

@@ -164,7 +164,7 @@
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
-import { StoreState } from '../../store/storeTypes';
+import { StoreState } from '../../scripts/interfaces/store/storeTypes';
 
 export default defineComponent({
   data() {

src/components/StationsView/FilterOption.vue

@@ -50,9 +50,6 @@ export default defineComponent({
     handleDbClick(e: Event) {
       e.preventDefault();
 
-      
-      const lastClicked = this.filterStore.lastClickedFilterId == this.option.id;
-      console.log(this.filterStore.lastClickedFilterId);
       this.filterStore.lastClickedFilterId = this.option.id;
       this.option.value = true;
 
@@ -96,51 +93,8 @@ button {
   }
 
   &[data-selected='true'] {
-    //  &.reality {
-    //   background-color: $realityCol;
-    //   box-shadow: 0 0 6px 1px $realityCol;
-    // }
-
-    // &.access {
-    //   background-color: $accessCol;
-    //   box-shadow: 0 0 6px 1px $accessCol;
-    // }
-
-    // &.control {
-    //   background-color: $controlCol;
-    //   box-shadow: 0 0 6px 1px $controlCol;
-    // }
-
-    // &.signals {
-    //   background-color: $signalCol;
-    //   box-shadow: 0 0 6px 1px $signalCol;
-    // }
-
-    // &.routes {
-    //   background-color: $routesCol;
-    //   box-shadow: 0 0 6px 1px $routesCol;
-    // }
-
-    // &.status {
-    //   background-color: $statusCol;
-    //   box-shadow: 0 0 6px 1px $statusCol;
-    // }
-
-    // &.save {
-    //   background-color: $saveCol;
-    //   box-shadow: 0 0 6px 1px $saveCol;
-    // }
-
-    // &.troll {
-    //   background-color: firebrick;
-    //   box-shadow: 0 0 6px 1px firebrick;
-    // }
-
-    // & {
     background-color: forestgreen;
-
     font-weight: bold;
-    // }
   }
 }
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -128,7 +128,6 @@ import { useStore } from '../../store/store';
 
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
-import { filterInitStates } from '../../store/constants/initFilterStates';
 
 export default defineComponent({
   components: { ActionButton, FilterOption },

src/components/StationsView/StationTable.vue

@@ -8,26 +8,26 @@
       <table>
         <thead>
           <tr>
-            <th v-for="(id, i) in headIds" :key="id" @click="() => changeSorter(i)">
+            <th v-for="(headerName, i) in headIds" :key="headerName" @click="changeSorter(headerName)">
               <span class="header_wrapper">
-                <div v-html="$t(`sceneries.${id}`)"></div>
+                <div v-html="$t(`sceneries.${headerName}`)"></div>
 
                 <img
                   class="sort-icon"
-                  v-if="sorterActive.index == i"
+                  v-if="sorterActive.headerName == headerName"
                   :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                   alt="sort icon"
                 />
               </span>
             </th>
 
-            <th v-for="(id, i) in headIconsIds" :key="id" @click="() => changeSorter(i + 7)">
+            <th v-for="(headerName, i) in headIconsIds" :key="headerName" @click="changeSorter(headerName)">
               <span class="header_wrapper">
-                <img :src="getIcon(id)" :alt="id" :title="$t(`sceneries.${id}s`)" />
+                <img :src="getIcon(headerName)" :alt="headerName" :title="$t(`sceneries.${headerName}s`)" />
 
                 <img
                   class="sort-icon"
-                  v-if="sorterActive.index == i + 7"
+                  v-if="sorterActive.headerName == headerName"
                   :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                   alt="sort icon"
                 />
@@ -53,6 +53,12 @@
               {{ station.name }}
             </td>
 
+            <td>
+              <b>
+                {{ station.generalInfo?.abbr }}
+              </b>
+            </td>
+
             <td class="station_level">
               <span v-if="station.generalInfo">
                 <span
@@ -236,6 +242,7 @@ import Station from '../../scripts/interfaces/Station';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
+import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
 
 export default defineComponent({
   props: {
@@ -249,8 +256,8 @@ export default defineComponent({
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
 
   data: () => ({
-    headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
+    headIconsIds,
-    headIconsIds: ['user', 'spawn', 'timetable'],
+    headIds,
     lastSelectedStationName: '',
   }),
 
@@ -291,8 +298,10 @@ export default defineComponent({
       window.open(url, '_blank');
     },
 
-    changeSorter(i: number) {
+    changeSorter(headerName: HeadIdsTypes) {
-      this.stationFiltersStore.changeSorter(i);
+      if (headerName == 'general' || headerName == 'routes') return;
+
+      this.stationFiltersStore.changeSorter(headerName);
     },
   },
 });
@@ -349,7 +358,7 @@ table {
     position: sticky;
     top: 0;
 
-    min-width: 75px;
+    min-width: 80px;
 
     padding: 0.5em;
     background-color: $bgCol;

src/locales/en.json

@@ -202,6 +202,7 @@
   },
   "sceneries": {
     "station": "Station",
+    "abbr": "Station\nabbrev.",
     "min-lvl": "Min. dispatcher\nlevel",
     "status": "Status",
     "dispatcher": "Dispatcher",

src/locales/pl.json

@@ -207,6 +207,7 @@
   },
   "sceneries": {
     "station": "Stacja",
+    "abbr": "Skrót\nposterunku",
     "min-lvl": "Min. poziom\ndyżurnego",
     "status": "Status",
     "dispatcher": "Dyżurny",

src/scripts/data/stationHeaderNames.ts

@@ -0,0 +1,14 @@
+export const headIds = [
+  'station',
+  'abbr',
+  'min-lvl',
+  'status',
+  'dispatcher',
+  'dispatcher-lvl',
+  'routes',
+  'general',
+] as const;
+
+export const headIconsIds = ['user', 'spawn', 'timetable'] as const;
+
+export type HeadIdsTypes = typeof headIds[number] | typeof headIconsIds[number];

src/scripts/interfaces/Station.ts

@@ -1,4 +1,4 @@
-import { Availability } from '../../store/storeTypes';
+import { Availability } from './store/storeTypes';
 import ScheduledTrain from './ScheduledTrain';
 import StationRoutes from './StationRoutes';
 
@@ -8,10 +8,12 @@ export default interface Station {
   generalInfo?: {
     name: string;
     url: string;
+    abbr: string;
 
     reqLevel: number;
     // supportersOnly: boolean;
 
+    
     lines: string;
     project: string;
     projectUrl?: string;

src/scripts/interfaces/store/storeTypes.ts

@@ -1,11 +1,11 @@
 import { Socket } from 'socket.io-client';
-import { DataStatus } from '../scripts/enums/DataStatus';
+import { DataStatus } from '../../enums/DataStatus';
-import StationAPIData from '../scripts/interfaces/api/StationAPIData';
+import StationAPIData from '../api/StationAPIData';
-import { TrainAPIData } from '../scripts/interfaces/api/TrainAPIData';
+import { TrainAPIData } from '../api/TrainAPIData';
-import Station from '../scripts/interfaces/Station';
+import Station from '../Station';
-import Train from '../scripts/interfaces/Train';
+import Train from '../Train';
-import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
+import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData';
-import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
+import { DriverStatsAPIData } from '../api/DriverStatsAPIData';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 
@@ -57,6 +57,7 @@ export interface APIData {
 
 export interface StationJSONData {
   name: string;
+  abbr: string;
   url: string;
   lines: string;
   project: string;

src/store/stationFiltersStore.ts

@@ -1,18 +1,18 @@
 import { defineStore } from 'pinia';
 import inputData from '../data/options.json';
-import Filter from '../scripts/interfaces/Filter';
 import Station from '../scripts/interfaces/Station';
 import StorageManager from '../scripts/managers/storageManager';
 import { useStore } from './store';
 import { filterInitStates } from './constants/initFilterStates';
 import { filterStations, sortStations } from './utils/filterUtils';
+import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
 
 export const useStationFiltersStore = defineStore('stationFiltersStore', {
   state() {
     return {
       inputs: inputData,
       filters: { ...filterInitStates },
-      sorterActive: { index: 0, dir: 1 },
+      sorterActive: { headerName: 'station' as HeadIdsTypes, dir: 1 },
       store: useStore(),
       lastClickedFilterId: '',
     };
@@ -89,13 +89,11 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
-    changeSorter(index: number) {
+    changeSorter(headerName: HeadIdsTypes) {
-      if (index > 4 && index < 7) return;
+      if (headerName == this.sorterActive.headerName) this.sorterActive.dir = -1 * this.sorterActive.dir;
-
-      if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir;
       else this.sorterActive.dir = 1;
 
-      this.sorterActive.index = index;
+      this.sorterActive.headerName = headerName;
     },
   },
 });

src/store/store.ts

@@ -15,7 +15,7 @@ import {
   getScheduledTrain,
   parseSpawns,
 } from '../scripts/utils/storeUtils';
-import { APIData, StationJSONData, StoreState } from './storeTypes';
+import { APIData, StationJSONData, StoreState } from '../scripts/interfaces/store/storeTypes';
 
 export const useStore = defineStore('store', {
   state: () =>

src/store/utils/filterUtils.ts

@@ -1,34 +1,40 @@
+import { HeadIdsTypes } from '../../scripts/data/stationHeaderNames';
 import Filter from '../../scripts/interfaces/Filter';
 import Station from '../../scripts/interfaces/Station';
 
-export const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
+export const sortStations = (a: Station, b: Station, sorter: { headerName: HeadIdsTypes; dir: number }) => {
-  switch (sorter.index) {
+  switch (sorter.headerName) {
-    case 0:
+    case 'station':
       return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
-    case 1:
+    case 'abbr':
+      if ((a.generalInfo?.abbr || '') > (b.generalInfo?.abbr || '')) return sorter.dir;
+      if ((a.generalInfo?.abbr || '') < (b.generalInfo?.abbr || '')) return -sorter.dir;
+      break;
+
+    case 'min-lvl':
       if ((a.generalInfo?.reqLevel || 0) > (b.generalInfo?.reqLevel || 0)) return sorter.dir;
       if ((a.generalInfo?.reqLevel || 0) < (b.generalInfo?.reqLevel || 0)) return -sorter.dir;
       break;
 
-    case 2:
+    case 'status':
       if ((a.onlineInfo?.statusTimestamp || 0) > (b.onlineInfo?.statusTimestamp || 0)) return sorter.dir;
       if ((a.onlineInfo?.statusTimestamp || 0) < (b.onlineInfo?.statusTimestamp || 0)) return -sorter.dir;
       break;
 
-    case 3:
+    case 'dispatcher':
       if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') > (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
         return sorter.dir;
       if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') < (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
         return -sorter.dir;
       break;
 
-    case 4:
+    case 'dispatcher-lvl':
       if ((a.onlineInfo?.dispatcherExp || 0) > (b.onlineInfo?.dispatcherExp || 0)) return sorter.dir;
       if ((a.onlineInfo?.dispatcherExp || 0) < (b.onlineInfo?.dispatcherExp || 0)) return -sorter.dir;
       break;
 
-    case 7:
+    case 'user':
       if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir;
       if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir;
 
@@ -36,13 +42,13 @@ export const sortStations = (a: Station, b: Station, sorter: { index: number; di
       if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir;
       break;
 
-    case 8:
+    case 'spawn':
       if ((a.onlineInfo?.spawns.length || 0) > (b.onlineInfo?.spawns.length || 0)) return sorter.dir;
       if ((a.onlineInfo?.spawns.length || 0) < (b.onlineInfo?.spawns.length || 0)) return -sorter.dir;
 
       break;
 
-    case 9:
+    case 'timetable':
       if ((a.onlineInfo?.scheduledTrains?.length || 0) > (b.onlineInfo?.scheduledTrains?.length || 0))
         return sorter.dir;
       if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))

src/views/StationsView.vue

@@ -52,17 +52,6 @@ export default defineComponent({
 
   mounted() {
     this.filterStore.setupFilters();
-    // this.filterStore.inputs.options.forEach((option) => {
-    //   const value = StorageManager.getBooleanValue(option.name);
-    //   option.value = value;
-    //   this.filterStore.changeFilterValue({ name: option.name, value: value });
-    // });
-
-    // this.filterStore.inputs.sliders.forEach((slider) => {
-    //   const value = StorageManager.getNumericValue(slider.name);
-    //   slider.value = value;
-    //   this.filterStore.changeFilterValue({ name: slider.name, value: value });
-    // });
   },
 });
 </script>