Zmiana w wyglądzie elementów listy pociągów, poprawki kosmetyczne

src/views/StationsView.vue

@@ -10,7 +10,12 @@
     <div class="stations-wrapper" v-if="connectionState == 2">
       <div class="stations-body">
         <Options />
-        <StationTable :stations="stations" :setFocusedStation="setFocusedStation" />
+        <StationTable
+          :stations="computedStations"
+          :sorterActive="sorterActive"
+          :setFocusedStation="setFocusedStation"
+          :changeSorter="changeSorter"
+        />
       </div>
     </div>
   </div>
@@ -55,8 +60,108 @@ export default class StationsView extends Vue {
   @Getter("getStationList") stations!: Station[];
   @Getter("getConnectionState") connectionState!: ConnState;
 
+  @Getter("trainsDataList") trains!: Train[];
+  @Getter("trainsDataState") trainsDataState!: number;
+
   @Action("setFilter") setFilter;
 
+  sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
+
+  changeSorter(index: number) {
+    if (index > 5) return;
+
+    if (index == this.sorterActive.index)
+      this.sorterActive.dir = -1 * this.sorterActive.dir;
+    else this.sorterActive.dir = 1;
+
+    this.sorterActive.index = index;
+  }
+
+  get scheduledTrains() {
+    const reducedList = this.stations.reduce((acc, station) => {
+      if (!acc[station.stationName]) acc[station.stationName] = [];
+
+      this.trains
+        .filter((train) => !train.noTimetable)
+        .forEach((train) => {
+          const found = train.stopPoints!.find(
+            (sp) =>
+              (station.stationName
+                .toLowerCase()
+                .includes(sp.pointNameRAW.toLowerCase()) ||
+                station.stationName
+                  .toLowerCase()
+                  .includes(sp.pointNameRAW.toLowerCase().split(",")[0]) ||
+                (station.stationName
+                  .toLowerCase()
+                  .includes(sp.pointNameRAW.toLowerCase().split(" ")[0]) &&
+                  station.stationName.toLowerCase().includes("lcs"))) &&
+              !acc[station.stationName].find((t) => t.trainNo === train.trainNo)
+          );
+
+          if (!found) return acc;
+
+          acc[station.stationName].push({
+            trainNo: train.trainNo,
+            driverName: train.driverName,
+            category: train.category,
+            ...found,
+          });
+        });
+
+      return acc;
+    }, {});
+
+    return reducedList;
+  }
+
+  get computedStations() {
+    const dir: number = this.sorterActive.dir;
+    const scheduledTrainList = this.scheduledTrains;
+
+    return this.stations
+      .sort((a, b) => {
+        switch (this.sorterActive.index) {
+          case 1:
+            if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
+            if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
+            break;
+
+          case 2:
+            if (a.statusTimestamp > b.statusTimestamp) return dir;
+            if (a.statusTimestamp < b.statusTimestamp) return -dir;
+            break;
+
+          case 3:
+            if (a.dispatcherName > b.dispatcherName) return dir;
+            if (a.dispatcherName < b.dispatcherName) return -dir;
+            break;
+
+          case 4:
+            if (a.dispatcherExp > b.dispatcherExp) return dir;
+            if (a.dispatcherExp < b.dispatcherExp) return -dir;
+            break;
+
+          case 5:
+            if (a.currentUsers > b.currentUsers) return dir;
+            if (a.currentUsers < b.currentUsers) return -dir;
+            if (a.maxUsers > b.maxUsers) return dir;
+            if (a.maxUsers < b.maxUsers) return -dir;
+            break;
+
+          default:
+            break;
+        }
+
+        if (a.stationName >= b.stationName) return dir;
+        return -dir;
+      })
+      .map((station) => ({
+        ...station,
+        scheduledTrains: scheduledTrainList[station.stationName],
+      }));
+  }
+
   mounted() {
     const storage = window.localStorage;
 
@@ -139,6 +244,7 @@ export default class StationsView extends Vue {
 }
 
 .stations-body {
+  margin: 0 auto;
   overflow: auto;
 }
 </style>

src/views/TrainsView.vue

@@ -5,35 +5,13 @@
     <div class="body-wrapper" v-else>
       <div class="options-wrapper">
         <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-        <div class="search train">
-          <div class="search-title title">Szukaj składu</div>
-          <div class="search-box">
-            <input class="search-input" v-model="searchedTrain" />
-            <img
-              class="search-exit"
-              :src="exitIcon"
-              alt="exit-icon"
-              @click="() => searchedTrain = ''"
-            />
-          </div>
-        </div>
-
-        <div class="search driver">
-          <div class="search-title title">Szukaj maszynisty</div>
-          <div class="search-box">
-            <input class="search-input" v-model="searchedDriver" />
-            <img
-              class="search-exit"
-              :src="exitIcon"
-              alt="exit-icon"
-              @click="() => searchedDriver = ''"
-            />
-          </div>
-        </div>
+        <TrainSearch
+          @changeSearchedTrain="changeSearchedTrain"
+          @changeSearchedDriver="changeSearchedDriver"
+        />
       </div>
 
       <TrainStats :trains="trains" />
-
       <TrainTable :computedTrains="computedTrains" />
     </div>
   </section>
@@ -50,6 +28,7 @@ import Train from "@/scripts/interfaces/Train";
 import Loading from "@/components/App/Loading.vue";
 
 import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
+import TrainSearch from "@/components/TrainsView/TrainSearch.vue";
 import TrainTable from "@/components/TrainsView/TrainTable.vue";
 import TrainStats from "@/components/TrainsView/TrainStats.vue";
 
@@ -61,11 +40,10 @@ import axios from "axios";
     TrainSorter,
     TrainTable,
     TrainStats,
+    TrainSearch,
   },
 })
 export default class TrainsView extends Vue {
-  exitIcon = require("@/assets/icon-exit.svg");
-
   @Getter("trainsDataList") trains!: Train[];
 
   @Getter("trainsDataState") connectionState;
@@ -76,6 +54,14 @@ export default class TrainsView extends Vue {
   searchedTrain: string = "";
   searchedDriver: string = "";
 
+  changeSearchedTrain(trainNo: string) {
+    this.searchedTrain = trainNo;
+  }
+
+  changeSearchedDriver(name: string) {
+    this.searchedDriver = name;
+  }
+
   changeSorter(sorter: { id: string; dir: number }) {
     this.sorterActive = sorter;
   }
@@ -141,11 +127,11 @@ export default class TrainsView extends Vue {
 
 .body-wrapper {
   margin: 1rem auto;
-  max-width: 1250px;
+  max-width: 1200px;
 
   padding: 0 0.5rem;
 
-  font-size: calc(0.4rem + 0.5vw);
+  font-size: calc(0.3rem + 0.4vw);
 }
 
 .options-wrapper {
@@ -155,43 +141,11 @@ export default class TrainsView extends Vue {
   & > div {
     margin-right: 1rem;
   }
-
-  .search {
-    &-box {
-      position: relative;
-
-      background: #333;
-      border-radius: 0.5em;
-      min-width: 150px;
-    }
-
-    &-input {
-      border: none;
-
-      padding: 0.5rem 1rem;
-      margin: 0;
-
-      font-size: 1em;
-
-      min-width: 85%;
-    }
-
-    &-exit {
-      position: absolute;
-      cursor: pointer;
-
-      top: 50%;
-      right: 10px;
-      transform: translateY(-50%);
-
-      width: 1em;
-    }
-  }
 }
 
 @include bigScreen() {
   .body-wrapper {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 }