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

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;
     }