Wersja 1.14.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "private": true,
   "scripts": {
     "dev": "vite",

src/assets/icon-timetableAll.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#F2E147"/>
+</svg>

src/assets/icon-timetableConfirmed.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#66FF6C"/>
+</svg>

src/assets/icon-timetableUnconfirmed.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#898989"/>
+</svg>

src/components/StationsView/StationTable.vue

@@ -8,7 +8,12 @@
       <table>
         <thead>
           <tr>
-            <th v-for="(headerName, i) in headIds" :key="headerName" @click="changeSorter(headerName)">
+            <th
+              v-for="(headerName, i) in headIds"
+              :key="headerName"
+              @click="changeSorter(headerName)"
+              class="header-text"
+            >
               <span class="header_wrapper">
                 <div v-html="$t(`sceneries.${headerName}`)"></div>
 
@@ -21,9 +26,14 @@
               </span>
             </th>
 
-            <th v-for="(headerName, i) in headIconsIds" :key="headerName" @click="changeSorter(headerName)">
+            <th
+              v-for="(headerName, i) in headIconsIds"
+              :key="headerName"
+              @click="changeSorter(headerName)"
+              class="header-image"
+            >
               <span class="header_wrapper">
-                <img :src="getIcon(headerName)" :alt="headerName" :title="$t(`sceneries.${headerName}s`)" />
+                <img :src="getIcon(headerName)" :alt="headerName" :title="$t(`sceneries.${headerName}`)" />
 
                 <img
                   class="sort-icon"
@@ -190,25 +200,31 @@
 
             <td class="station_users" :class="{ inactive: !station.onlineInfo }">
               <span>
-                <span class="highlight">{{ station.onlineInfo?.currentUsers || '0' }}</span>
+                <span class="highlight">{{ station.onlineInfo?.currentUsers || 0 }}</span>
                 /
-                <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
+                <span class="highlight">{{ station.onlineInfo?.maxUsers || 0 }}</span>
               </span>
             </td>
 
             <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <span class="highlight">{{ station.onlineInfo?.spawns.length || '0' }}</span>
+              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
             </td>
 
-            <td class="station_schedules" :class="{ inactive: !station.onlineInfo }">
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
-              <span>
+              <span class="highlight">
-                <span class="highlight">
+                {{ station.onlineInfo?.scheduledTrains?.length || 0 }}
-                  {{ station.onlineInfo?.scheduledTrains?.length || '0' }}
+              </span>
-                </span>
+            </td>
-                /
+
-                <span style="color: #bbb">
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
-                  {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+              <span style="color: #ccc">
-                </span>
+                {{ station.onlineInfo?.scheduledTrains?.filter((train) => !train.stopInfo.confirmed).length || 0 }}
+              </span>
+            </td>
+
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
+              <span style="color: #66ff6c">
+                {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || 0 }}
               </span>
             </td>
           </tr>
@@ -352,9 +368,15 @@ table {
     position: sticky;
     top: 0;
 
-    min-width: 80px;
+    &.header-text {
+      min-width: 140px;
+    }
 
-    padding: 0.5em;
+    &.header-image {
+      min-width: 60px;
+    }
+
+    padding: 0.5em 0.25em;
     background-color: $bgCol;
     white-space: pre-wrap;
 

src/locales/en.json

@@ -211,9 +211,11 @@
     "dispatcher-lvl": "Dispatcher\nlevel",
     "routes": "Routes\ndouble / single",
     "general": "General info",
-    "users": "Drivers online",
+    "user": "Drivers online",
-    "spawns": "Spawns online",
+    "spawn": "Spawns online",
-    "timetables": "Active timetables",
+    "timetableAll": "Active timetables",
+    "timetableConfirmed": "Confirmed timetables",
+    "timetableUnconfirmed": "Unconfirmed timetables",
     "no-stations": "No stations to show here!",
     "scenery-search": "Search for scenery..."
   },

src/locales/pl.json

@@ -215,9 +215,11 @@
     "dispatcher-lvl": "Poziom\ndyżurnego",
     "routes": "Szlaki\n2tor / 1tor",
     "general": "Informacje\nogólne",
-    "users": "Maszyniści online",
+    "user": "Maszyniści online",
-    "spawns": "Otwarte spawny",
+    "spawn": "Otwarte spawny",
-    "timetables": "Aktywne rozkłady jazdy",
+    "timetableAll": "Aktywne rozkłady jazdy",
+    "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
+    "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy",
     "no-stations": "Brak stacji do wyświetlenia!",
     "scenery-search": "Wyszukaj scenerię..."
   },

src/scripts/data/stationHeaderNames.ts

@@ -1,13 +1,5 @@
-export const headIds = [
+export const headIds = ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'] as const;
-  'station',
-  'min-lvl',
-  'status',
-  'dispatcher',
-  'dispatcher-lvl',
-  'routes',
-  'general',
-] as const;
 
-export const headIconsIds = ['user', 'spawn', 'timetable'] as const;
+export const headIconsIds = ['user', 'spawn', 'timetableAll', 'timetableUnconfirmed', 'timetableConfirmed'] as const;
 
 export type HeadIdsTypes = typeof headIds[number] | typeof headIconsIds[number];

src/store/utils/filterUtils.ts

@@ -3,18 +3,18 @@ import Filter from '../../scripts/interfaces/Filter';
 import Station from '../../scripts/interfaces/Station';
 
 export const sortStations = (a: Station, b: Station, sorter: { headerName: HeadIdsTypes; dir: number }) => {
+  let diff = 0;
+
   switch (sorter.headerName) {
     case 'station':
       return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
     case 'min-lvl':
-      if ((a.generalInfo?.reqLevel || 0) > (b.generalInfo?.reqLevel || 0)) return sorter.dir;
+      diff = (a.generalInfo?.reqLevel || 0) - (b.generalInfo?.reqLevel || 0);
-      if ((a.generalInfo?.reqLevel || 0) < (b.generalInfo?.reqLevel || 0)) return -sorter.dir;
       break;
 
     case 'status':
-      if ((a.onlineInfo?.statusTimestamp || 0) > (b.onlineInfo?.statusTimestamp || 0)) return sorter.dir;
+      diff = (a.onlineInfo?.statusTimestamp || 0) - (b.onlineInfo?.statusTimestamp || 0);
-      if ((a.onlineInfo?.statusTimestamp || 0) < (b.onlineInfo?.statusTimestamp || 0)) return -sorter.dir;
       break;
 
     case 'dispatcher':
@@ -25,34 +25,48 @@ export const sortStations = (a: Station, b: Station, sorter: { headerName: HeadI
       break;
 
     case 'dispatcher-lvl':
-      if ((a.onlineInfo?.dispatcherExp || 0) > (b.onlineInfo?.dispatcherExp || 0)) return sorter.dir;
+      diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
-      if ((a.onlineInfo?.dispatcherExp || 0) < (b.onlineInfo?.dispatcherExp || 0)) return -sorter.dir;
       break;
 
     case 'user':
-      if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir;
+      diff = (b.onlineInfo ? b.onlineInfo.currentUsers : -1) - (a.onlineInfo ? a.onlineInfo.currentUsers : -1);
-      if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir;
-
-      if ((a.onlineInfo?.maxUsers || 0) > (b.onlineInfo?.maxUsers || 0)) return sorter.dir;
-      if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir;
       break;
 
     case 'spawn':
-      if ((a.onlineInfo?.spawns.length || 0) > (b.onlineInfo?.spawns.length || 0)) return sorter.dir;
+      diff = (a.onlineInfo ? a.onlineInfo.spawns.length : -1) - (b.onlineInfo ? b.onlineInfo.spawns.length : -1);
-      if ((a.onlineInfo?.spawns.length || 0) < (b.onlineInfo?.spawns.length || 0)) return -sorter.dir;
-
       break;
 
-    case 'timetable':
+    case 'timetableConfirmed':
-      if ((a.onlineInfo?.scheduledTrains?.length || 0) > (b.onlineInfo?.scheduledTrains?.length || 0))
+      diff =
-        return sorter.dir;
+        (a.onlineInfo?.scheduledTrains
-      if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))
+          ? a.onlineInfo.scheduledTrains.filter((train) => train.stopInfo.confirmed).length
-        return -sorter.dir;
+          : -1) -
+        (b.onlineInfo?.scheduledTrains
+          ? b.onlineInfo.scheduledTrains.filter((train) => train.stopInfo.confirmed).length
+          : -1);
+      break;
+
+    case 'timetableUnconfirmed':
+      diff =
+        (a.onlineInfo?.scheduledTrains
+          ? a.onlineInfo.scheduledTrains.filter((train) => !train.stopInfo.confirmed).length
+          : -1) -
+        (b.onlineInfo?.scheduledTrains
+          ? b.onlineInfo.scheduledTrains.filter((train) => !train.stopInfo.confirmed).length
+          : -1);
+      break;
+
+    case 'timetableAll':
+      diff =
+        (a.onlineInfo?.scheduledTrains ? a.onlineInfo.scheduledTrains.length : -1) -
+        (b.onlineInfo?.scheduledTrains ? b.onlineInfo.scheduledTrains.length : -1);
+      break;
 
     default:
       break;
   }
 
+  if (diff != 0) return Math.sign(diff) * sorter.dir;
   return a.name.localeCompare(b.name);
 };