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

src/App.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="app">
-    <UpdateModal :currentVersion="VERSION" @toggleUpdateModal="toggleUpdateModal" v-if="updateModalVisible" />
+    <UpdateModal
+      :currentVersion="VERSION"
+      @toggleUpdateModal="toggleUpdateModal"
+      v-if="updateModalVisible"
+    />
 
     <div class="app_container">
       <header class="app_header">
@@ -22,9 +26,15 @@
           </span>
 
           <span class="header_links">
-            <router-link class="route" active-class="route-active" to="/" exact>SCENERIE</router-link>/
-            <router-link class="route" active-class="route-active" to="/trains">POCIĄGI</router-link>/
-            <router-link class="route" active-class="route-active" to="/history">DZIENNIK</router-link>
+            <router-link class="route" active-class="route-active" to="/" exact
+              >SCENERIE</router-link
+            >/
+            <router-link class="route" active-class="route-active" to="/trains"
+              >POCIĄGI</router-link
+            >/
+            <router-link class="route" active-class="route-active" to="/history"
+              >DZIENNIK</router-link
+            >
           </span>
         </div>
       </header>
@@ -39,8 +49,10 @@
 
       <footer class="app_footer">
         &copy;
-        <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-        2021 | v{{VERSION}}
+        <a href="https://td2.info.pl/profile/?u=20777" target="_blank">
+          Spythere
+        </a>
+        2021 | v{{ VERSION }}
       </footer>
     </div>
   </div>

src/components/SceneryView/SceneryTimetable.vue

@@ -3,8 +3,16 @@
     <h3 class="timetable-header">
       <span>AKTYWNE ROZKŁADY JAZDY</span>
 
-      <a v-if="!timetableOnly" :href="currentURL + '&timetable_only=1'" target="_blank">
-        <img :src="viewIcon" alt="icon-view" title="Wyodrębnij rozkłady jazdy" />
+      <a
+        v-if="!timetableOnly"
+        :href="currentURL + '&timetable_only=1'"
+        target="_blank"
+      >
+        <img
+          :src="viewIcon"
+          alt="icon-view"
+          title="Wyodrębnij rozkłady jazdy"
+        />
       </a>
     </h3>
 
@@ -16,7 +24,12 @@
         </div>
 
         <ul class="option-list" :class="{ open: listOpen }">
-          <li class="option-item" v-for="(cp, i) in stationInfo.checkpoints" :key="i" @click="() => chooseOption(cp.checkpointName)">
+          <li
+            class="option-item"
+            v-for="(cp, i) in stationInfo.checkpoints"
+            :key="i"
+            @click="() => chooseOption(cp.checkpointName)"
+          >
             <input type="option-radio" name="sort" />
             <label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
           </li>
@@ -24,50 +37,74 @@
       </div>
     </div>
 
-    <span class="timetable-item loading" v-if="dataStatus == 0">Ładowanie...</span>
+    <span class="timetable-item loading" v-if="dataStatus == 0"
+      >Ładowanie...</span
+    >
 
-    <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">Brak aktywnych rozkładów!</span>
+    <span
+      class="timetable-item empty"
+      v-else-if="computedScheduledTrains.length == 0"
+      >Brak aktywnych rozkładów!</span
+    >
 
     <transition-group name="list-anim">
-      <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i+1">
+      <div
+        class="timetable-item"
+        v-for="(scheduledTrain, i) in computedScheduledTrains"
+        :key="i + 1"
+      >
         <span class="timetable-general">
           <span class="general-info">
-            <router-link :to="{
-                  name: 'TrainsView',
-                  params: {
-                    passedSearchedTrain: scheduledTrain.trainNo.toString(),
-                  },
-                }">
+            <router-link
+              :to="{
+                name: 'TrainsView',
+                params: {
+                  queryTrain: scheduledTrain.trainNo.toString(),
+                },
+              }"
+            >
               <span>
                 <strong>{{ scheduledTrain.category }}</strong>
                 {{ scheduledTrain.trainNo }}
-              </span>
-            </router-link>|
+              </span> </router-link
+            >|
             <span>
-              <a :href="
-                    'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
-                  " target="_blank">{{ scheduledTrain.driverName }}</a>
+              <a
+                :href="
+                  'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
+                "
+                target="_blank"
+                >{{ scheduledTrain.driverName }}</a
+              >
             </span>
 
             <div class="info-route">
-              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+              <strong
+                >{{ scheduledTrain.beginsAt }} -
+                {{ scheduledTrain.terminatesAt }}</strong
+              >
             </div>
           </span>
 
           <span class="general-status">
-            <span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
+            <span :class="scheduledTrain.stopStatus">{{
+              scheduledTrain.stopLabel
+            }}</span>
           </span>
         </span>
 
         <span class="timetable-schedule">
           <span class="schedule-arrival">
-            <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+            <span
+              class="arrival-time begins"
+              v-if="scheduledTrain.stopInfo.beginsHere"
+            >
               ROZPOCZYNA
               <div>BIEG</div>
             </span>
             <span class="arrival-time" v-else>
               {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
-              scheduledTrain.stopInfo.arrivalDelay
+                scheduledTrain.stopInfo.arrivalDelay
               }})
             </span>
           </span>
@@ -80,10 +117,14 @@
             <span class="stop-arrow arrow"></span>
           </span>
           <span class="schedule-departure">
-            <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">KOŃCZY BIEG</span>
+            <span
+              class="departure-time terminates"
+              v-if="scheduledTrain.stopInfo.terminatesHere"
+              >KOŃCZY BIEG</span
+            >
             <span class="departure-time" v-else>
               {{ scheduledTrain.stopInfo.departureTimeString }} ({{
-              scheduledTrain.stopInfo.departureDelay
+                scheduledTrain.stopInfo.departureDelay
               }})
             </span>
           </span>

src/components/TrainsView/TrainOptions.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="train-options">
+    <div class="options_wrapper">
+      <div class="train-sorter option">
+        <div class="train-sorter_wrapper">
+          <div class="train-sorter_selected" @click="toggleSorterOptions">
+            <span>{{ currentSorterOption }}</span>
+            <img :src="descIcon" alt="icon-select" />
+          </div>
+
+          <div class="train-sorter_options">
+            <ul :class="{ open: sorterOptionsOpen }">
+              <li
+                v-for="(option, i) in sorterOptions"
+                :key="i"
+                @click="() => chooseOption(option)"
+              >
+                <input type="radio" name="sort" :id="option.id" />
+                <label :for="option.id">{{ option.content }}</label>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="train-search_train option">
+        <div class="search-box">
+          <input
+            class="search-input"
+            placeholder="Szukaj nr pociągu..."
+            v-model="searchedTrain"
+          />
+          <img
+            class="search-exit"
+            :src="exitIcon"
+            alt="exit-icon"
+            @click="() => (searchedTrain = '')"
+          />
+        </div>
+      </div>
+
+      <div class="train-search_driver option">
+        <div class="search-box">
+          <input
+            class="search-input"
+            placeholder="Szukaj maszynisty..."
+            v-model="searchedDriver"
+          />
+          <img
+            class="search-exit"
+            :src="exitIcon"
+            alt="exit-icon"
+            @click="() => (searchedDriver = '')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+
+@Component
+export default class TrainOptions extends Vue {
+  ascIcon = require("@/assets/icon-arrow-asc.svg");
+  descIcon = require("@/assets/icon-arrow-desc.svg");
+  exitIcon = require("@/assets/icon-exit.svg");
+
+  clickEventListener!: EventListener;
+
+  sorterOptionsOpen = false;
+  currentSorterOption = "kilometraż";
+
+  searchedTrain = "";
+  searchedDriver = "";
+
+  // Passed as component parameters
+  @Prop() readonly queryTrain!: string;
+  @Prop() readonly focusedTrain!: string;
+
+  sorterOptions: { id: string; content: string }[] = [
+    {
+      id: "mass",
+      content: "masa",
+    },
+    {
+      id: "speed",
+      content: "prędkość",
+    },
+    {
+      id: "length",
+      content: "długość",
+    },
+    {
+      id: "distance",
+      content: "kilometraż",
+    },
+    {
+      id: "timetable",
+      content: "numer pociągu",
+    },
+  ];
+
+  toggleSorterOptions() {
+    this.sorterOptionsOpen = !this.sorterOptionsOpen;
+  }
+
+  closeSorterOptions() {
+    this.sorterOptionsOpen = false;
+  }
+
+  chooseOption(option: { id: string; content: string }) {
+    this.$emit("changeSorter", { id: option.id, dir: -1 });
+    this.currentSorterOption = option.content;
+
+    this.closeSorterOptions();
+  }
+
+  @Watch("searchedTrain")
+  onSearchedTrainChanged(train: string) {
+    this.$emit("changeSearchedTrain", train);
+  }
+
+  @Watch("searchedDriver")
+  onSearchedDriverChanged(driver: string) {
+    this.$emit("changeSearchedDriver", driver);
+  }
+
+  @Watch("queryTrain")
+  onQueryTrainChanged(train: string) {
+    if (train && train != "") {
+      this.searchedTrain = train;
+      this.searchedDriver = "";
+    }
+  }
+
+  @Watch("focusedTrain")
+  onFocusedTrainChanged(train: string) {
+    this.searchedTrain = train;
+    this.searchedDriver = "";
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+
+.train-options {
+  @include smallScreen() {
+    width: 100%;
+  }
+}
+
+.options_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  margin-bottom: 0.5em;
+}
+
+.option {
+  background: #333;
+  border-radius: 0.5em 0.5em 0 0;
+
+  margin-right: 0.5rem;
+
+  @include smallScreen() {
+    width: 100%;
+    margin: 0.5rem 0;
+
+    font-size: 1.15em;
+  }
+}
+
+.train-sorter {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &_options {
+    position: relative;
+
+    ul {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+
+      transition: all 150ms ease-in;
+
+      z-index: 9;
+      overflow: hidden;
+
+      max-height: 0;
+
+      &.open {
+        max-height: 250px;
+        opacity: 1;
+      }
+
+      li {
+        display: flex;
+        transition: background 150ms ease-in;
+
+        background-color: rgba(#222, 0.95);
+
+        &:last-child {
+          border-radius: 0 0 0.5em 0.5em;
+        }
+
+        &:hover {
+          background-color: rgba(#868686, 0.85);
+        }
+
+        input {
+          display: none;
+        }
+
+        label {
+          padding: 0.5rem 1rem;
+          width: 100%;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  &_selected {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.5rem 0.5rem;
+    min-width: 200px;
+
+    cursor: pointer;
+
+    span {
+      margin-right: 1em;
+    }
+
+    img {
+      max-width: 2em;
+    }
+  }
+}
+
+.search {
+  &-box {
+    position: relative;
+
+    background: #333;
+    border-radius: 0.5em;
+    min-width: 200px;
+  }
+
+  &-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;
+  }
+}
+</style>

src/components/TrainsView/TrainSearch.vue

@@ -80,16 +80,10 @@ export default class extends Vue {
 @import "../../styles/responsive.scss";
 
 .train-search {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
   margin-bottom: 1rem;
 }
 
 .search {
-  padding-right: 1rem;
-
   &-box {
     position: relative;
 

src/components/TrainsView/TrainSorter.vue

@@ -2,8 +2,6 @@
   <div class="train-sorter">
     <div class="sorter-wrapper">
       <div class="sorter-box">
-        <div class="title">Sortuj według</div>
-
         <div class="selected" @click="toggleOptionList">
           <span>{{ sorterName }}</span>
           <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
@@ -88,10 +86,6 @@ export default class TrainSorter extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.title {
-  padding-left: 0.3em;
-}
-
 .sorter-wrapper {
   display: flex;
 

src/components/TrainsView/TrainStats.vue

@@ -115,8 +115,11 @@ export default class TrainStats extends Vue {
     if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
 
     const avg = (
-      this.trains.reduce((acc, train) => train.timetableData ? acc + train.timetableData.routeDistance : acc, 0) /
-      this.trains.length
+      this.trains.reduce(
+        (acc, train) =>
+          train.timetableData ? acc + train.timetableData.routeDistance : acc,
+        0
+      ) / this.trains.length
     ).toFixed(2);
 
     const minMax = this.trains.reduce((acc, train) => {
@@ -143,7 +146,9 @@ export default class TrainStats extends Vue {
 
       acc.set(
         train.timetableData.category,
-        acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
+        acc.get(train.timetableData.category)
+          ? acc.get(train.timetableData.category) + 1
+          : 1
       );
 
       return acc;
@@ -172,8 +177,12 @@ export default class TrainStats extends Vue {
   }
 
   get specialTrainCount(): [number, number] {
-    const twrList = this.trains.filter((train) => train.timetableData && train.timetableData.TWR);
-    const skrList = this.trains.filter((train) => train.timetableData && train.timetableData.SKR);
+    const twrList = this.trains.filter(
+      (train) => train.timetableData && train.timetableData.TWR
+    );
+    const skrList = this.trains.filter(
+      (train) => train.timetableData && train.timetableData.SKR
+    );
 
     return [twrList.length, skrList.length];
   }
@@ -198,11 +207,14 @@ export default class TrainStats extends Vue {
 }
 
 .train-stats {
-  padding: 0.3em 0;
   font-size: 1.1em;
-  z-index: 5;
+  z-index: 10;
+
+  margin-bottom: 0.5em;
 
   position: relative;
+
+  outline: none;
 }
 
 .stats {
@@ -219,6 +231,7 @@ export default class TrainStats extends Vue {
     position: absolute;
     display: inline-block;
     max-width: 700px;
+    width: 100%;
 
     background: rgba(black, 0.85);
     border-radius: 0 1em 1em 1em;

src/components/TrainsView/TrainTable.vue

@@ -181,25 +181,21 @@ import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 
 const unknownTrainImage = require("@/assets/unknown.png");
 
-const ascSVG = require("@/assets/icon-arrow-asc.svg");
-const descSVG = require("@/assets/icon-arrow-desc.svg");
-
 import Train from "@/scripts/interfaces/Train";
-import Station from "@/scripts/interfaces/Station";
 
 import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
-import TrainStop from '@/scripts/interfaces/TrainStop';
+import TrainStop from "@/scripts/interfaces/TrainStop";
 
 @Component({
-  components: { TrainSchedule }
+  components: { TrainSchedule },
 })
 export default class TrainTable extends Vue {
   @Prop() computedTrains!: Train[];
 
   showedSchedule = 0;
 
-  ascSVG = ascSVG;
-  descSVG = descSVG;
+  ascSVG = require("@/assets/icon-arrow-asc.svg");
+  descSVG = require("@/assets/icon-arrow-desc.svg");
 
   speedIcon: string = require("@/assets/icon-speed.svg");
   massIcon: string = require("@/assets/icon-mass.svg");
@@ -220,15 +216,29 @@ export default class TrainTable extends Vue {
 
   generateStopList(stops: any): string | undefined {
     if (!stops) return "";
-    return stops.reduce((acc, stop: TrainStop, i) => {
-      if (stop.stopType.includes("ph")) acc.push(`<strong style='color:${stop.confirmed ? "springgreen" : "white"}'>${stop.stopName}</strong>`);
-      else if (i > 0 && i < stops.length - 1 && !stop.stopNameRAW.includes("po."))
-        acc.push(`<span style='color:${stop.confirmed ? "springgreen" : "lightgray"}'>${stop.stopName}</span>`);
-      return acc;
-    }, []).join(" * ");
+    return stops
+      .reduce((acc, stop: TrainStop, i) => {
+        if (stop.stopType.includes("ph"))
+          acc.push(
+            `<strong style='color:${
+              stop.confirmed ? "springgreen" : "white"
+            }'>${stop.stopName}</strong>`
+          );
+        else if (
+          i > 0 &&
+          i < stops.length - 1 &&
+          !stop.stopNameRAW.includes("po.") &&
+          !stop.stopNameRAW.includes("SBL")
+        )
+          acc.push(
+            `<span style='color:${
+              stop.confirmed ? "springgreen" : "lightgray"
+            }'>${stop.stopName}</span>`
+          );
+        return acc;
+      }, [])
+      .join(" > ");
   }
-
-
 }
 </script>
 
@@ -249,6 +259,8 @@ export default class TrainTable extends Vue {
 
 .train {
   &-list {
+    font-size: 1.05em;
+
     @include smallScreen() {
       width: 100%;
       overflow: hidden;
@@ -266,13 +278,12 @@ export default class TrainTable extends Vue {
     & > .wrapper {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      font-size: calc(0.4rem + 0.5vw);
 
       @include smallScreen() {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, minmax(100px, 1fr));
 
-        font-size: 0.8rem;
+        font-size: 1.1em;
         gap: 0.4em 0;
       }
 
@@ -305,7 +316,7 @@ export default class TrainTable extends Vue {
       background: #1085b3;
       border-radius: 1em;
 
-      font-size: 0.9em;
+      font-size: 0.85em;
 
       -moz-user-select: none;
       -webkit-user-select: none;
@@ -330,14 +341,14 @@ export default class TrainTable extends Vue {
     display: flex;
     align-items: center;
 
-    font-size: 1.25em;
+    font-size: 1.3em;
     margin: 5px 0;
   }
 
   &-stops {
     margin-bottom: 10px;
 
-    font-size: 0.75em;
+    font-size: 0.7em;
   }
 
   &-online {
@@ -374,23 +385,16 @@ export default class TrainTable extends Vue {
   justify-content: center;
   flex-wrap: wrap;
 
-  &-exp {
-    font-size: 1.4em;
-    padding: 0.3em 0.6em;
-
-    border-radius: 0.4em;
-
-    background-color: red;
-  }
-
   &-name {
     margin: 0 0.3em;
     font-weight: bold;
+    font-size: 1.1em;
   }
 
   &-type {
     color: #bbb;
-    margin-left: 1em;
+    margin-left: 0.5em;
+    font-size: 1.1em;
   }
 
   &-loco {
@@ -400,7 +404,7 @@ export default class TrainTable extends Vue {
 
   &-loco img {
     width: 13em;
-    max-width: 190px;
+    max-width: 200px;
   }
 }
 
@@ -433,8 +437,6 @@ export default class TrainTable extends Vue {
     margin-top: 1em;
     text-align: center;
 
-    font-size: 0.9em;
-
     p {
       color: #00cff3;
     }

src/scripts/stationFilterManager.ts

@@ -31,7 +31,7 @@ export default class StationFilterManager {
 
   private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
 
-  private filteredStationList(stationList: Station[]): Station[] {
+  getFilteredStationList(stationList: Station[]): Station[] {
     return stationList
       .filter(station => {
         if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;

src/styles/responsive.scss

@@ -1,5 +1,5 @@
 @mixin smallScreen() {
-    @media only screen and (max-width: 650px) {
+    @media only screen and (max-width: 700px) {
         @content;
     }
 }

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;