Poprawki w strukturze i optymalizacji

src/components/SceneryView/SceneryTimetable.vue

@@ -4,14 +4,14 @@
       <span>{{ $t("scenery.timetables") }}</span>
 
       <a
-        v-if="!timetableOnly"
         :href="currentURL + '&timetable_only=1'"
+        v-if="!timetableOnly"
         target="_blank"
       >
         <img
           :src="viewIcon"
           alt="icon-view"
-          title="Wyodrębnij rozkłady jazdy"
+          :title="$t('timetables.timetable-only')"
         />
       </a>
     </h3>
@@ -182,7 +182,7 @@ export default class SceneryTimetable extends Vue {
   }
 
   get currentURL() {
-    return `${location.origin}/scenery?hash=${this.stationInfo?.stationHash}`;
+    return `${location.origin}${this.$route.fullPath}`;
   }
 
   get computedScheduledTrains() {

src/components/StationsView/FilterCard.vue

@@ -226,7 +226,7 @@ $saveCol: #28a826;
 
     cursor: pointer;
 
-    padding: 0.3em 0.4em;
+    padding: 0.5em 0.55em;
 
     display: inline-block;
     position: relative;

src/components/TrainsView/TrainOptions.vue

@@ -48,7 +48,6 @@ import SelectBox from "../Global/SelectBox.vue";
 export default class TrainOptions extends Vue {
   // Passed as component parameters
   @Prop() readonly queryTrain!: string;
-  @Prop() readonly focusedTrain!: string;
 
   exitIcon = require("@/assets/icon-exit.svg");
 
@@ -127,9 +126,9 @@ export default class TrainOptions extends Vue {
   onQueryTrainChanged(train: string | undefined) {
     if (!train) return;
     if (train == "") return;
-    console.log("query train changed", train);
 
-    // this.chooseTrain(train);
+    this.searchedTrain = train;
+    this.searchedDriver = "";
   }
 }
 </script>

src/components/TrainsView/TrainSearch.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="train-search">
-    <span class="search train">
-      <div class="search-title title">Szukaj składu</div>
-      <div class="search-box">
-        <input class="search-input" v-model="searchedTrain" />
-        <img
-          class="search-exit"
-          :src="exitIcon"
-          alt="exit-icon"
-          @click="() => (searchedTrain = '')"
-        />
-      </div>
-    </span>
-
-    <span class="search driver">
-      <div class="search-title title">Szukaj maszynisty</div>
-      <div class="search-box">
-        <input class="search-input" v-model="searchedDriver" />
-        <img
-          class="search-exit"
-          :src="exitIcon"
-          alt="exit-icon"
-          @click="() => (searchedDriver = '')"
-        />
-      </div>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Watch, Prop } from "vue-property-decorator";
-
-@Component
-export default class extends Vue {
-  exitIcon = require("@/assets/icon-exit.svg");
-  searchedTrain = "";
-  searchedDriver = "";
-
-  @Prop() readonly passedSearchedTrain!: string;
-  @Prop() readonly focusedTrain!: string;
-  // @Prop() readonly passedSearchedDriver!: string;
-
-  @Watch("searchedTrain")
-  onSearchedTrainChanged(val: string, oldVal: string) {
-    this.$emit("changeSearchedTrain", val);
-  }
-
-  @Watch("searchedDriver")
-  onSearchedDriverChanged(val: string, oldVal: string) {
-    this.$emit("changeSearchedDriver", val);
-  }
-
-  @Watch("passedSearchedTrain")
-  onPassedSearchedTrainChanged(val: string, oldVal: string) {
-    if (val && val != "") {
-      this.searchedTrain = val;
-      this.searchedDriver = "";
-    }
-  }
-
-  @Watch("focusedTrain")
-  onFocusedTrainChanged(val: string, oldVal: string) {
-    console.log(val);
-
-    this.searchedTrain = val;
-    this.searchedDriver = "";
-  }
-
-  mounted() {
-    if (this.passedSearchedTrain && this.passedSearchedTrain != "") {
-      this.searchedTrain = this.passedSearchedTrain;
-      this.searchedDriver = "";
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-
-.train-search {
-  margin-bottom: 1rem;
-}
-
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 150px;
-  }
-
-  &-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/TrainSorter.vue

@@ -1,167 +0,0 @@
-<template>
-  <div class="train-sorter">
-    <div class="sorter-wrapper">
-      <div class="sorter-box">
-        <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>
-.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;
-}
-
-.selected {
-  padding: 0.5rem 1rem;
-  min-width: 150px;
-  cursor: pointer;
-}
-
-.options-container {
-  position: relative;
-}
-
-.options-list {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  z-index: 10;
-
-  width: 100%;
-  background-color: rgba(#222, 0.95);
-  overflow: hidden;
-
-  max-height: 0;
-
-  &.open {
-    max-height: 250px;
-    opacity: 1;
-  }
-
-  transition: all 150ms 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/lang/en.json

@@ -122,6 +122,7 @@
     "return-btn": "Return to main site"
   },
   "timetables": {
+    "timetable-only": "Switch to timetable-only view",
     "online": "At station",
     "departed": "Dispatched",
     "departed-away": "Departed",

src/lang/pl.json

@@ -122,6 +122,7 @@
     "return-btn": "Wróć na stronę główną"
   },
   "timetables": {
+    "timetable-only": "Wyodrębnij rozkłady jazdy",
     "online": "Na stacji",
     "departed": "Odprawiony",
     "departed-away": "Odjechał",

src/views/TrainsView.vue

@@ -1,43 +1,32 @@
 <template>
   <section class="trains-view">
     <div class="wrapper">
-      <!-- <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-        <TrainSearch
-          @changeSearchedTrain="changeSearchedTrain"
-          @changeSearchedDriver="changeSearchedDriver"
-          :passedSearchedTrain="passedSearchedTrain"
-          :focusedTrain="focusedTrain"
-        /> -->
-
       <div class="options-bar">
         <div class="stats">
           <action-button @click.native="toggleStats">
             <img :src="statsIcon" :alt="$t('trains.stats')" />
             {{ $t("trains.stats") }}
           </action-button>
+
           <TrainStats :trains="trains" :trainStatsOpen="trainStatsOpen" />
         </div>
 
         <TrainOptions
           :queryTrain="queryTrain"
-          :focusedTrain="focusedTrain"
           @change-sorter="changeSorter"
           @changeSearchedTrain="changeSearchedTrain"
           @changeSearchedDriver="changeSearchedDriver"
         />
       </div>
 
-      <TrainTable
+      <TrainTable :computedTrains="computedTrains" />
-        :computedTrains="computedTrains"
-        @changeFocusedTrain="changeFocusedTrain"
-      />
     </div>
   </section>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import { Component, Prop, Watch } from "vue-property-decorator";
+import { Component, Prop } from "vue-property-decorator";
 import { Getter } from "vuex-class";
 
 import Train from "@/scripts/interfaces/Train";
@@ -69,7 +58,6 @@ export default class TrainsView extends Vue {
 
   searchedTrain: string = "";
   searchedDriver: string = "";
-  focusedTrain: string = "";
 
   toggleStats() {
     this.trainStatsOpen = !this.trainStatsOpen;
@@ -77,29 +65,16 @@ export default class TrainsView extends Vue {
 
   changeSearchedTrain(trainNo: string) {
     this.searchedTrain = trainNo;
-
-    console.log("train", trainNo);
   }
 
   changeSearchedDriver(name: string) {
     this.searchedDriver = name;
   }
 
-  changeFocusedTrain(trainNo: string) {
-    this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
-  }
-
   changeSorter(sorter: { id: string; dir: number }) {
     this.sorterActive = sorter;
   }
 
-  // @Watch("queryTrain")
-  // onQueryTrainChanged(train: string) {
-  //   // this.searchedTrain = train;
-  //   this.changeSearchedTrain(train);
-  //   console.log(train);
-  // }
-
   get computedTrains() {
     return this.trains
       .filter(