Dodano sortowanie i filtrowanie pociągów

src/assets/icon-select.svg

@@ -0,0 +1,4 @@
+<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 14L13 2L25 14" stroke="white" stroke-width="2"/>
+<path d="M1 20L13 32L25 20" stroke="white" stroke-width="2"/>
+</svg>

src/components/TrainsView/TrainSorter.vue

@@ -0,0 +1,173 @@
+<template>
+  <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" />
+        </div>
+
+        <div class="options-container">
+          <ul class="options-list" :class="{'open': listOpen}">
+            <li
+              class="option"
+              v-for="(option, i) in sortOptionList"
+              :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>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+const ascSVG = require("@/assets/icon-arrow-asc.svg");
+const descSVG = require("@/assets/icon-arrow-desc.svg");
+
+@Component
+export default class TrainSorter extends Vue {
+  ascSVG = ascSVG;
+  descSVG = descSVG;
+
+  @Prop() trainList!: [];
+
+  listOpen: boolean = false;
+  sorterName: string = "numer pociągu";
+
+  sortOptionList: { 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",
+    },
+  ];
+
+  toggleOptionList() {
+    this.listOpen = !this.listOpen;
+  }
+
+  closeOptionList() {
+    this.listOpen = false;
+  }
+
+  chooseOption(option: { id: string; content: string }) {
+    this.$emit("changeSorter", { id: option.id, dir: -1 });
+    this.sorterName = option.content;
+
+    this.closeOptionList();
+  }
+
+  get compTrainList() {
+    return this.trainList;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+  padding-left: 0.3em;
+}
+
+.sorter-wrapper {
+  display: flex;
+
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+.selected {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  span {
+    margin-right: 2rem;
+  }
+
+  img {
+    max-width: 0.75em;
+  }
+}
+
+.selected,
+.options-list {
+  background: #333;
+  border-radius: 0.5em;
+
+  margin: 0.3rem 0;
+}
+
+.selected {
+  padding: 0.5rem 1rem;
+  min-width: 150px;
+  cursor: pointer;
+}
+
+.options-container {
+  position: relative;
+}
+
+.options-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  background-color: rgba(#333, 0.85);
+  overflow: hidden;
+
+  max-height: 0;
+
+  &.open {
+    max-height: 250px;
+    opacity: 1;
+  }
+
+  transition: all 250ms ease-in;
+}
+
+.option {
+  display: flex;
+
+  &:hover {
+    background-color: rgba(#868686, 0.85);
+  }
+
+  transition: background 150ms ease-in;
+}
+
+input {
+  display: none;
+}
+
+label {
+  padding: 0.5rem 1rem;
+  width: 100%;
+  cursor: pointer;
+}
+</style>

src/components/TrainsView/TrainTable.vue

@@ -0,0 +1,258 @@
+<template>
+  <ul class="list">
+    <li class="item" v-for="train in computedTrains" :key="train.timetableId">
+      <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
+        <span class="info">
+          <div class="info-category">
+            <span>
+              <strong>{{ train.category }}</strong>
+              {{ train.trainNo }} |
+            </span>
+            <span style=" color: gold;">{{ train.routeDistance }} km</span>
+          </div>
+
+          <div class="info-warnings">
+            <span class="warning twr" v-if="train.TWR">TWR</span>
+            <span class="warning skr" v-if="train.SKR">SKR</span>
+          </div>
+
+          <div class="info-route">
+            <strong>
+              {{
+              train.route && train.route.replace("|", " - ")
+              }}
+            </strong>
+          </div>
+
+          <div class="info-stations">
+            <i v-if="train.sceneries.length > 0">Przez: {{ train.sceneries }}</i>
+          </div>
+        </span>
+      </a>
+
+      <span class="driver">
+        <span class="driver-name">
+          {{ train.driverName }}
+          <span style="color: #bbb; margin-left: 1em;">
+            {{
+            train.locoType
+            }}
+          </span>
+        </span>
+        <span class="driver-loco">
+          <img :src="train.locoURL" @error="onImageError" />
+        </span>
+      </span>
+
+      <span class="stats">
+        <div class="stats-general">
+          <span class="mass">
+            <img :src="massIcon" alt="icon-mass" />
+            {{ train.mass / 1000 }}t
+          </span>
+
+          <span class="speed">
+            <img :src="speedIcon" alt="icon-speed" />
+            {{ train.speed }} km/h
+          </span>
+
+          <span class="length">
+            <img :src="lengthIcon" alt="icon-length" />
+            {{ train.length }}m
+          </span>
+        </div>
+
+        <div class="stats-position">
+          <span class="station">
+            <p>
+              <strong>SCENERIA</strong>
+            </p>
+            {{ train.currentStationName }}
+          </span>
+          <span class="track">
+            <p>
+              <strong>SZLAK</strong>
+            </p>
+            {{ train.connectedTrack || "---" }}
+          </span>
+          <span class="signal">
+            <p>
+              <strong>SEMAFOR</strong>
+            </p>
+            {{ train.signal || "---" }}
+          </span>
+        </div>
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+const unknownTrainImage = require("@/assets/unknown.png");
+
+import Train from "@/scripts/interfaces/Train";
+
+@Component
+export default class TrainTable extends Vue {
+  @Prop() readonly computedTrains!: Train[];
+
+  speedIcon: string = require("@/assets/icon-speed.svg");
+  massIcon: string = require("@/assets/icon-mass.svg");
+  lengthIcon: string = require("@/assets/icon-length.svg");
+
+  onImageError(e: Event) {
+    (e.target as HTMLImageElement).src = unknownTrainImage;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
+.list {
+  overflow: auto;
+
+  @include smallScreen() {
+    width: 100%;
+  }
+}
+
+.item {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+  font-size: calc(0.4rem + 0.5vw);
+
+  background-color: #444;
+  padding: 1rem;
+
+  margin: 1rem 0;
+
+  &:nth-child(even) {
+    background-color: #666;
+  }
+
+  @include smallScreen() {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 1fr);
+
+    font-size: 0.8rem;
+    gap: 0.4em 0;
+    // grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.info {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-category {
+    flex-grow: 2;
+    font-size: 1.05em;
+  }
+
+  &-route {
+    width: 100%;
+    font-size: 1.2em;
+  }
+
+  &-stations {
+    margin-top: 0.35em;
+    font-size: 0.75em;
+  }
+}
+
+.driver {
+  display: flex;
+  align-items: center;
+  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;
+  }
+
+  &-loco {
+    width: 100%;
+    text-align: center;
+  }
+
+  &-loco img {
+    width: 13em;
+    max-width: 190px;
+  }
+}
+
+.stats {
+  width: 100%;
+
+  &-general {
+    display: flex;
+
+    span {
+      display: flex;
+      justify-content: center;
+
+      width: 100%;
+
+      align-items: center;
+    }
+
+    img {
+      margin: 0 0.3em;
+      width: 1.8em;
+    }
+  }
+
+  &-position {
+    display: flex;
+
+    margin-top: 1em;
+    text-align: center;
+
+    span {
+      width: 100%;
+      font-size: 300;
+    }
+
+    p {
+      color: #00cff3;
+    }
+  }
+}
+
+.warning {
+  border-radius: 1em;
+  padding: 0.1em 1.2em;
+  margin: 0 0.2em;
+
+  color: black;
+  font-weight: bold;
+  font-size: 0.85em;
+
+  &.twr {
+    background-color: #ffc700;
+  }
+
+  &.skr {
+    background-color: #ff4646;
+  }
+}
+
+@include bigScreen() {
+  .item {
+    font-size: 1rem;
+  }
+}
+</style>

src/components/ui/Card.vue

@@ -132,7 +132,7 @@
 import Vue from "vue";
 export default Vue.extend({
   name: "Card",
-  props: ["stationInfo", "closeCard"]
+  props: ["stationInfo", "closeCard"],
 });
 </script>
 

src/scripts/interfaces/Train.ts

@@ -0,0 +1,22 @@
+export default interface Train {
+  mass: number;
+  length: number;
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  driverId: number;
+  trainNo: number;
+  driverName: string;
+  currentStationName: string;
+  route: string | null;
+  timetableId: number | null;
+  category: string | null;
+  sceneries: string | null;
+  TWR: boolean | null;
+  SKR: boolean | null;
+  noTimetable: boolean;
+  locoURL: string;
+  locoType: string;
+  routeDistance: number;
+}

src/styles/global.scss

@@ -29,7 +29,8 @@ body {
 }
 
 button,
-input {
+input,
+select {
   font-family: "Lato", sans-serif;
 }
 
@@ -43,6 +44,7 @@ input {
   margin: 0.2em;
 
   max-width: 55px;
+  outline: none;
 
   &::placeholder {
     color: #bebebe;

src/views/TrainsView.vue

@@ -3,98 +3,20 @@
     <Loading v-if="!listLoaded" message="Liczenie pociągów..." />
 
     <div class="body-wrapper" v-else>
-      <!-- <div class="train-sorter">
+      <div class="options-wrapper">
-        <select name="sort-type" class="sort-type">
+        <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-          <option>Masa składu</option>
+        <div class="search train">
-          <option>Długość składu</option>
+          <div class="search-title title">Szukaj składu</div>
-          <option>Numer pociągu</option>
+          <input class="search-input" v-model="searchedTrain" />
-          <option>Kilometraż</option>
+        </div>
-        </select>
 
-        <select name="sort-dir" class="sort-dir">
+        <div class="search driver">
-          <option>Rosnąco</option>
+          <div class="search-title title">Szukaj maszynisty</div>
-          <option>Malejąco</option>
+          <input class="search-input" v-model="searchedDriver" />
-        </select>
+        </div>
-      </div>-->
+      </div>
 
-      <ul class="list">
+      <TrainTable :computedTrains="computedTrains" />
-        <li class="item" v-for="train in computedTrains" :key="train.timetableId">
-          <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
-            <span class="info">
-              <div class="info-category">
-                <span>
-                  <strong>{{train.category}}</strong>
-                  {{train.trainNo}} |
-                </span>
-                <span style=" color: gold;">{{train.routeDistance}} km</span>
-              </div>
-
-              <div class="info-warnings">
-                <span class="warning twr" v-if="train.TWR">TWR</span>
-                <span class="warning skr" v-if="train.SKR">SKR</span>
-              </div>
-
-              <div class="info-route">
-                <strong>{{train.route && train.route.replace("|", " - ")}}</strong>
-              </div>
-
-              <div class="info-stations">
-                <i v-if="train.sceneries.length > 0">Przez: {{train.sceneries}}</i>
-              </div>
-            </span>
-          </a>
-
-          <span class="driver">
-            <span class="driver-name">
-              {{train.driverName}}
-              <span style="color: #bbb; margin-left: 1em;">{{train.locoType}}</span>
-            </span>
-            <span class="driver-loco">
-              <img :src="train.locoURL" @error="onImageError" />
-            </span>
-          </span>
-
-          <span class="stats">
-            <div class="stats-general">
-              <span class="mass">
-                <img :src="massIcon" alt="icon-mass" />
-                {{train.mass/1000}}t
-              </span>
-
-              <span class="speed">
-                <img :src="speedIcon" alt="icon-speed" />
-                {{train.speed}} km/h
-              </span>
-
-              <span class="length">
-                <img :src="lengthIcon" alt="icon-length" />
-                {{train.length}}m
-              </span>
-            </div>
-
-            <div class="stats-position">
-              <span class="station">
-                <p>
-                  <strong>SCENERIA</strong>
-                </p>
-                {{train.currentStationName}}
-              </span>
-              <span class="track">
-                <p>
-                  <strong>SZLAK</strong>
-                </p>
-                {{train.connectedTrack || "---"}}
-              </span>
-              <span class="signal">
-                <p>
-                  <strong>SEMAFOR</strong>
-                </p>
-                {{train.signal || "---"}}
-              </span>
-            </div>
-          </span>
-        </li>
-      </ul>
     </div>
   </section>
 </template>
@@ -105,50 +27,35 @@ import { Component } from "vue-property-decorator";
 import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
 
 import Loading from "@/components/states/Loading.vue";
+import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
+import TrainTable from "@/components/TrainsView/TrainTable.vue";
 
 import axios from "axios";
 
-const unknownTrainImage = require("@/assets/unknown.png");
-
 @Component({
   components: {
     Loading,
+    TrainSorter,
+    TrainTable,
   },
 })
 export default class TrainsView extends Vue {
-  speedIcon: string = require("@/assets/icon-speed.svg");
-  massIcon: string = require("@/assets/icon-mass.svg");
-  lengthIcon: string = require("@/assets/icon-length.svg");
-
   @Getter("getAllStations") stations!: Station[];
 
-  onlineTrainsList: {
+  sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
-    mass: number;
+  onlineTrainsList: Train[] = [];
-    length: number;
-    speed: number;
-    signal: string;
-    distance: number;
-    connectedTrack: string;
-    driverId: number;
-    trainNo: number;
-    driverName: string;
-    currentStationName: string;
-    route: string | null;
-    timetableId: number | null;
-    category: string | null;
-    sceneries: string | null;
-    TWR: boolean | null;
-    SKR: boolean | null;
-    noTimetable: boolean;
-    locoURL: string;
-    locoType: string;
-    routeDistance: number;
-  }[] = [];
-
   listLoaded: boolean = false;
 
+  searchedTrain: string = "";
+  searchedDriver: string = "";
+
+  changeSorter(sorter: { id: string; dir: number }) {
+    this.sorterActive = sorter;
+  }
+
   async getTrainData() {
     const response = await axios.get(
       "https://api.td2.info.pl:9640/?method=getTrainsOnline"
@@ -272,12 +179,64 @@ export default class TrainsView extends Vue {
     return text;
   }
 
-  onImageError(e: Event) {
-    (e.target as HTMLImageElement).src = unknownTrainImage;
-  }
-
   get computedTrains() {
-    return this.onlineTrainsList.filter((train) => !train.noTimetable);
+    // const trainDetected = this.onlineTrainsList.filter(
+    //   (train) =>
+    //     train.trainNo.toString().includes(this.searched) && this.searched != ""
+    // );
+    // const playerDetected = this.onlineTrainsList.filter(
+    //   (train) =>
+    //     // this.searched.toLowerCase().includes(train.driverName.toLowerCase())
+    //     train.driverName.toLowerCase().includes(this.searched.toLowerCase()) &&
+    //     this.searched != ""
+    // );
+
+    const computed = this.onlineTrainsList.filter(
+      (train) =>
+        !train.noTimetable &&
+        (this.searchedTrain.length > 0
+          ? train.trainNo.toString().includes(this.searchedTrain)
+          : true) &&
+        (this.searchedDriver.length > 0
+          ? train.driverName.includes(this.searchedDriver)
+          : true)
+    );
+
+    computed.sort((a, b) => {
+      switch (this.sorterActive.id) {
+        case "mass":
+          if (a.mass > b.mass) return this.sorterActive.dir;
+          else return -this.sorterActive.dir;
+          break;
+
+        case "distance":
+          if (a.routeDistance > b.routeDistance) return this.sorterActive.dir;
+          else return -this.sorterActive.dir;
+          break;
+
+        case "speed":
+          if (a.speed > b.speed) return this.sorterActive.dir;
+          else return -this.sorterActive.dir;
+          break;
+
+        case "timetable":
+          if (a.trainNo > b.trainNo) return this.sorterActive.dir;
+          else return -this.sorterActive.dir;
+          break;
+
+        case "length":
+          if (a.length > b.length) return this.sorterActive.dir;
+          else return -this.sorterActive.dir;
+          break;
+
+        default:
+          break;
+      }
+
+      return 0;
+    });
+
+    return computed;
   }
 
   mounted() {
@@ -297,146 +256,51 @@ export default class TrainsView extends Vue {
 }
 
 .body-wrapper {
-  margin: 0 auto;
+  margin: 1rem auto;
   max-width: 1250px;
-}
 
-.list {
+  padding: 0 0.5rem;
-  overflow: auto;
-
-  @include smallScreen() {
-    width: 100%;
-  }
-}
-
-.item {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
   font-size: calc(0.4rem + 0.5vw);
+}
 
-  background-color: #444;
+.options-wrapper {
-  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
 
-  margin: 1rem 0;
+  & > div {
-
+    margin-right: 1rem;
-  &:nth-child(even) {
-    background-color: #666;
   }
 
-  @include smallScreen() {
+  .search {
-    grid-template-columns: 1fr;
+    &-input {
-    grid-template-rows: repeat(3, 1fr);
+      background: #333;
+      border: none;
+      border-radius: 0.5em;
 
+      padding: 0.5rem 1rem;
+      margin: 0;
+
+      font-size: 1em;
+
+      min-width: 150px;
+    }
+  }
+}
+
+@include bigScreen() {
+  .body-wrapper {
+    font-size: 1rem;
+  }
+}
+
+@include smallScreen {
+  .body-wrapper {
     font-size: 0.8rem;
-    gap: 0.4em 0;
+  }
-    // grid-template-columns: repeat(3, 1fr);
+
+  .options-wrapper {
+    justify-content: center;
   }
 }
-
+</style>
-.info {
-  display: flex;
-  flex-wrap: wrap;
-
-  &-category {
-    flex-grow: 2;
-    font-size: 1.05em;
-  }
-
-  &-route {
-    width: 100%;
-    font-size: 1.2em;
-  }
-
-  &-stations {
-    margin-top: 0.35em;
-    font-size: 0.75em;
-  }
-}
-
-.driver {
-  display: flex;
-  align-items: center;
-  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;
-  }
-
-  &-loco {
-    width: 100%;
-    text-align: center;
-  }
-
-  &-loco img {
-    width: 13em;
-    max-width: 190px;
-  }
-}
-
-.stats {
-  width: 100%;
-
-  &-general {
-    display: flex;
-
-    span {
-      display: flex;
-      justify-content: center;
-
-      width: 100%;
-
-      align-items: center;
-    }
-
-    img {
-      margin: 0 0.3em;
-      width: 1.8em;
-    }
-  }
-
-  &-position {
-    display: flex;
-
-    margin-top: 1em;
-    text-align: center;
-
-    span {
-      width: 100%;
-      font-size: 300;
-    }
-
-    p {
-      color: #00cff3;
-    }
-  }
-}
-
-.warning {
-  border-radius: 1em;
-  padding: 0.1em 1.2em;
-  margin: 0 0.2em;
-
-  color: black;
-  font-weight: bold;
-  font-size: 0.85em;
-
-  &.twr {
-    background-color: #ffc700;
-  }
-
-  &.skr {
-    background-color: #ff4646;
-  }
-}
-</style>

vue.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+// module.exports = {
-  publicPath: process.env.NODE_ENV === "production" ? "/dist" : "/",
+//   publicPath: process.env.NODE_ENV === "production" ? "/dist" : "/",
-};
+// };