Zmiana wyglądu filtrów widoku pociągów

src/views/HistoryView.vue

@@ -3,15 +3,25 @@
     <div class="history_wrapper">
       <div class="header">
         <h2>DZIENNIK AKTYWNOŚCI SCENERII</h2>
-        <p style="color: #ccc;">Pokazuje dyżurnych, którzy ostatnio byli aktywni na wybranej scenerii</p>
+        <p style="color: #ccc">
+          Pokazuje dyżurnych, którzy ostatnio byli aktywni na wybranej scenerii
+        </p>
       </div>
 
       <div class="search-box">
         <div class="search-box_content">
           <label :class="{ disabled: dataLoading }">
             <select v-model="inputStationName" :disabled="dataLoading">
-              <option value disabled selected hidden>{{ dataLoading ? 'Pobieranie danych...' : 'Wybierz scenerię' }}</option>
-              <option v-for="(station) in filteredStationList" :key="station" :value="station">{{ station }}</option>
+              <option value disabled selected hidden>
+                {{ dataLoading ? "Pobieranie danych..." : "Wybierz scenerię" }}
+              </option>
+              <option
+                v-for="station in filteredStationList"
+                :key="station"
+                :value="station"
+              >
+                {{ station }}
+              </option>
             </select>
           </label>
         </div>
@@ -19,35 +29,63 @@
 
       <div class="disclaimer">
         <h4>Ta funkcjonalność jest w testach beta!</h4>
-        <p>Informacje pokazywane na ekranie mogą znikać, a ich zawartość może być fałszywa!</p>
+        <p>
+          Informacje pokazywane na ekranie mogą znikać, a ich zawartość może być
+          fałszywa!
+        </p>
       </div>
 
       <div class="list">
         <div class="list_wrapper">
           <!-- <div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div> -->
           <transition name="list-anim" mode="out-in">
-            <ul class="list_content" v-if="!dataLoading && !historyLoading && computedHistoryList.length != 0" :key="inputStationName">
+            <ul
+              class="list_content"
+              v-if="
+                !dataLoading &&
+                !historyLoading &&
+                computedHistoryList.length != 0
+              "
+              :key="inputStationName"
+            >
               <li v-if="currentDispatcherFrom != -1" class="current">
                 <div class="dispatcher-name">
-                  <a :href="`https://td2.info.pl/profile/?u=${currentDispatcherId}`">{{ currentDispatcher}}</a>
+                  <a
+                    :href="`https://td2.info.pl/profile/?u=${currentDispatcherId}`"
+                    >{{ currentDispatcher }}</a
+                  >
                 </div>
                 <div class="dispatcher-date">
-                  <span style="color: #bbb">{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
-                  {{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
+                  <span style="color: #bbb">{{
+                    new Date(currentDispatcherFrom).toLocaleDateString("pl-PL")
+                  }}</span>
+                  {{
+                    new Date(currentDispatcherFrom).toLocaleTimeString(
+                      "pl-PL",
+                      { hour: "2-digit", minute: "2-digit" }
+                    )
+                  }}
                 </div>
               </li>
 
               <li v-for="(history, i) in computedHistoryList" :key="i">
                 <div class="dispatcher-name">
-                  <a :href="`https://td2.info.pl/profile/?u=${history.dispatcherId}`">{{ history.dispatcherName }}</a>
+                  <a
+                    :href="`https://td2.info.pl/profile/?u=${history.dispatcherId}`"
+                    >{{ history.dispatcherName }}</a
+                  >
                 </div>
                 <div class="dispatcher-date">
                   <div>
-                    <span style="color: #888">{{history.dispatcherFromDate }}</span>
+                    <span style="color: #888">{{
+                      history.dispatcherFromDate
+                    }}</span>
                     {{ history.dispatcherFromTime }}
                   </div>
                   <div>
-                    <span style="color: #888">{{ history.dispatcherToDate }}</span>
+                    <span style="color: #888">{{
+                      history.dispatcherToDate
+                    }}</span>
                     {{ history.dispatcherToTime }}
                   </div>
                 </div>

src/views/StationsView.vue

@@ -6,8 +6,15 @@
       <div class="stations_body">
         <div class="body_bar">
           <div class="bar_actions">
-            <button class="action-btn" :class="{ open: filterCardOpen }" @click="() => toggleCardsState('filter')">
-              <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
+            <button
+              class="action-btn"
+              :class="{ open: filterCardOpen }"
+              @click="() => toggleCardsState('filter')"
+            >
+              <img
+                :src="require('@/assets/icon-filter2.svg')"
+                alt="icon-filter"
+              />
               <p>FILTRY</p>
             </button>
 
@@ -20,13 +27,21 @@
 
           <div class="bar_indicators">
             <transition name="indicator-anim">
-              <span class="indicator_scenery-data" v-if="data.dataConnectionStatus < 2" :class="dataStatusClass">
+              <span
+                class="indicator_scenery-data"
+                v-if="data.dataConnectionStatus < 2"
+                :class="dataStatusClass"
+              >
                 <img :src="trainIcon" alt="icon-train" />
               </span>
             </transition>
 
             <transition name="indicator-anim">
-              <span class="indicator_timetable-data" v-if="data.timetableDataStatus < 2" :class="timetableDataStatusClass">
+              <span
+                class="indicator_timetable-data"
+                v-if="data.timetableDataStatus < 2"
+                :class="timetableDataStatusClass"
+              >
                 <img :src="timetableIcon" alt="icon-timetable" />
               </span>
             </transition>
@@ -34,17 +49,31 @@
         </div>
 
         <div class="body_table">
-          <StationTable :stations="computedStations" :sorterActive="filterManager.getSorter()" :setFocusedStation="setFocusedStation" :changeSorter="changeSorter" />
+          <StationTable
+            :stations="computedStations"
+            :sorterActive="filterManager.getSorter()"
+            :setFocusedStation="setFocusedStation"
+            :changeSorter="changeSorter"
+          />
         </div>
       </div>
     </div>
 
     <transition name="card-anim">
-      <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
+      <StationCard
+        v-if="focusedStationInfo"
+        :stationInfo="focusedStationInfo"
+        :exit="closeCard"
+      />
     </transition>
 
     <transition name="card-anim">
-      <FilterCard v-if="filterCardOpen" :exit="() => toggleCardsState('filter')" @changeFilterValue="changeFilterValue" @resetFilters="resetFilters" />
+      <FilterCard
+        v-if="filterCardOpen"
+        :exit="() => toggleCardsState('filter')"
+        @changeFilterValue="changeFilterValue"
+        @resetFilters="resetFilters"
+      />
     </transition>
   </div>
 </template>
@@ -54,7 +83,6 @@ import { Vue, Component } from "vue-property-decorator";
 import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
 
 import StorageManager from "@/scripts/storageManager";
 import StationFilterManager from "@/scripts/stationFilterManager";
@@ -172,7 +200,7 @@ export default class StationsView extends Vue {
   }
 
   get computedStations() {
-    return this.filterManager.filteredStationList(this.stationList);
+    return this.filterManager.getFilteredStationList(this.stationList);
   }
 
   closeCard() {

src/views/TrainsView.vue

@@ -1,13 +1,29 @@
 <template>
   <section class="trains-view">
     <div class="body-wrapper">
-      <div class="options-wrapper">
-        <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-        <TrainSearch @changeSearchedTrain="changeSearchedTrain" @changeSearchedDriver="changeSearchedDriver" :passedSearchedTrain="passedSearchedTrain" :focusedTrain="focusedTrain" />
+      <!-- <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
+        <TrainSearch
+          @changeSearchedTrain="changeSearchedTrain"
+          @changeSearchedDriver="changeSearchedDriver"
+          :passedSearchedTrain="passedSearchedTrain"
+          :focusedTrain="focusedTrain"
+        /> -->
+
+      <div class="options-bar">
+        <TrainStats :trains="trains" class="test" />
+        <TrainOptions
+          :queryTrain="queryTrain"
+          :focusedTrain="focusedTrain"
+          @changeSorter="changeSorter"
+          @changeSearchedTrain="changeSearchedTrain"
+          @changeSearchedDriver="changeSearchedDriver"
+        />
       </div>
 
-      <TrainStats :trains="trains" />
-      <TrainTable :computedTrains="computedTrains" @changeFocusedTrain="changeFocusedTrain" />
+      <TrainTable
+        :computedTrains="computedTrains"
+        @changeFocusedTrain="changeFocusedTrain"
+      />
     </div>
   </section>
 </template>
@@ -15,31 +31,28 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
-import { Getter, Action } from "vuex-class";
+import { Getter } from "vuex-class";
 
-import Station from "@/scripts/interfaces/Station";
 import Train from "@/scripts/interfaces/Train";
 
-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";
-
-import axios from "axios";
+import TrainOptions from "@/components/TrainsView/TrainOptions.vue";
 
 @Component({
   components: {
-    TrainSorter,
     TrainTable,
     TrainStats,
-    TrainSearch,
+    TrainOptions,
   },
 })
 export default class TrainsView extends Vue {
   @Getter("getTrainList") trains!: Train[];
-  @Prop() readonly passedSearchedTrain!: string;
 
-  sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
+  // Passed in route as query parameters
+  @Prop() readonly queryTrain!: string;
+
+  sorterActive: { id: string; dir: number } = { id: "distance", dir: -1 };
 
   searchedTrain: string = "";
   searchedDriver: string = "";
@@ -130,15 +143,6 @@ export default class TrainsView extends Vue {
   padding: 0 0.5rem;
 }
 
-.options-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-
-  & > div {
-    margin-right: 1rem;
-  }
-}
-
 @include bigScreen() {
   .body-wrapper {
     font-size: 0.9rem;