Kolumna z aktywnymi RJ dla scenerii - W.I.P.

src/views/StationsView.vue

@@ -6,7 +6,6 @@
     <transition name="card-anim">
       <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
     </transition>
-    <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
     <div class="stations-wrapper" v-if="connectionState == 2">
       <div class="stations-body">
@@ -22,6 +21,9 @@ import { Vue, Component } from "vue-property-decorator";
 import { Getter, Action } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
+import inputData from "@/data/options.json";
 
 import Loading from "@/components/App/Loading.vue";
 import Error from "@/components/App/Error.vue";
@@ -30,8 +32,6 @@ import StationTable from "@/components/StationsView/StationTable.vue";
 import StationCard from "@/components/StationsView/StationCard.vue";
 import Options from "@/components/StationsView/Options.vue";
 
-import inputData from "@/data/options.json";
-
 enum ConnState {
   Loading = 0,
   Error = 1,

src/views/TrainsView.vue

@@ -7,12 +7,28 @@
         <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
         <div class="search train">
           <div class="search-title title">Szukaj składu</div>
-          <input class="search-input" v-model="searchedTrain" />
+          <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>
-          <input class="search-input" v-model="searchedDriver" />
+          <div class="search-box">
+            <input class="search-input" v-model="searchedDriver" />
+            <img
+              class="search-exit"
+              :src="exitIcon"
+              alt="exit-icon"
+              @click="() => searchedDriver = ''"
+            />
+          </div>
         </div>
       </div>
 
@@ -48,7 +64,10 @@ import axios from "axios";
   },
 })
 export default class TrainsView extends Vue {
+  exitIcon = require("@/assets/icon-exit.svg");
+
   @Getter("trainsDataList") trains!: Train[];
+
   @Getter("trainsDataState") connectionState;
 
   @Action("fetchTrainsData") fetchTrainsData;
@@ -70,7 +89,9 @@ export default class TrainsView extends Vue {
             ? train.trainNo.toString().includes(this.searchedTrain)
             : true) &&
           (this.searchedDriver.length > 0
-            ? train.driverName.includes(this.searchedDriver)
+            ? train.driverName
+                .toLowerCase()
+                .includes(this.searchedDriver.toLowerCase())
             : true)
       )
       .sort((a, b) => {
@@ -107,12 +128,6 @@ export default class TrainsView extends Vue {
         return 0;
       });
   }
-
-  mounted() {
-    this.fetchTrainsData();
-
-    setInterval(this.fetchTrainsData, 5000);
-  }
 }
 </script>
 
@@ -142,17 +157,34 @@ export default class TrainsView extends Vue {
   }
 
   .search {
-    &-input {
+    &-box {
+      position: relative;
+
       background: #333;
-      border: none;
       border-radius: 0.5em;
+      min-width: 150px;
+    }
+
+    &-input {
+      border: none;
 
       padding: 0.5rem 1rem;
       margin: 0;
 
       font-size: 1em;
 
-      min-width: 150px;
+      min-width: 85%;
+    }
+
+    &-exit {
+      position: absolute;
+      cursor: pointer;
+
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+
+      width: 1em;
     }
   }
 }