Zmiany w tablicy rozkładów jazdy. (W.I.P.)

src/App.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="app">
-    <div class="container">
-      <header class="header">
-        <div class="header-body">
-          <span class="header-brand">
+    <div class="app_container">
+      <header class="app_header">
+        <div class="header_body">
+          <span class="header_brand">
             <span>Stacj</span>
             <img src="@/assets/trainlogo.png" alt="trainlogo" />
             <span>wnik</span>
           </span>
 
-          <span class="header-info">
+          <span class="header_info">
             <Clock />
-            <div class="counter">
+            <div class="info_counter">
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
               <span>{{ data.stationCount }}</span>
 
@@ -20,14 +20,14 @@
             </div>
           </span>
 
-          <span class="header-links">
+          <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>
           </span>
         </div>
       </header>
 
-      <main class="app-main">
+      <main class="app_main">
         <transition name="view-anim" mode="out-in">
           <keep-alive>
             <router-view />
@@ -35,16 +35,13 @@
         </transition>
       </main>
 
-      <footer class="app-footer flex">&copy; Spythere 2020</footer>
+      <footer class="app_footer flex">&copy; Spythere 2020</footer>
 
-      <transition name="message-anim" mode="out-in">
-        <span :key="data.dataConnectionStatus">
-          <div class="message loading" v-if="data.dataConnectionStatus == 0">Pobieranie danych...</div>
+      <transition name="warning-anim" mode="out-in" tag="div">
+        <span :key="data.dataConnectionStatus || -1" class="warning" :class="dataStatusClass">
+          <span v-if="data.dataConnectionStatus == 0">Pobieranie danych...</span>
 
-          <div class="message error" v-if="data.dataConnectionStatus == 1">
-            <img :src="ErrorIcon" alt="Error" />
-            Brak odpowiedzi ze strony serwera!
-          </div>
+          <span v-if="data.dataConnectionStatus == 1">Brak odpowiedzi ze strony serwera!</span>
         </span>
       </transition>
     </div>
@@ -59,31 +56,22 @@ import { mapGetters, mapActions } from "vuex";
 
 import Clock from "@/components/App/Clock.vue";
 
-// import stationData from "@/data/stations.json";
-
 @Component({
   components: { Clock },
 })
 export default class App extends Vue {
-  ErrorIcon = require("@/assets/icon-error.svg");
-
   @Action("synchronizeData") synchronizeData;
   @Getter("getAllData") data;
 
+  get dataStatusClass() {
+    if (this.data.dataConnectionStatus == 0) return "loading";
+    if (this.data.dataConnectionStatus == 1) return "error";
+
+    return "";
+  }
+
   mounted() {
     this.synchronizeData();
-
-    // stationData
-    //   .filter(data => data.stationName.length > 12 || (data.stops && data.stops.some(stop => stop.length > 12)))
-    //   .forEach(data => {
-    //     console.log(data.stationName, data.stationName.length);
-
-    //     data.stops?.forEach(stop => {
-    //       console.log(stop, stop.length);
-    //     })
-
-    //     console.log("-----");
-    //   });
   }
 }
 </script>
@@ -94,6 +82,7 @@ export default class App extends Vue {
 @import "./styles/global.scss";
 @import "./styles/scenery_status.scss";
 
+// VUE ROUTE CHANGE ANIMATION
 .view-anim {
   &-enter {
     opacity: 0.02;
@@ -110,22 +99,8 @@ export default class App extends Vue {
   }
 }
 
-.message {
-  &-anim {
-    &-enter-active,
-    &-leave-active {
-      transition: all $animDuration $animType;
-    }
-
-    &-enter {
-      transform: translateY(100%);
-    }
-
-    &-leave-to {
-      transform: translateY(0);
-    }
-  }
-
+// WARNING MESSAGE
+.warning {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -135,13 +110,9 @@ export default class App extends Vue {
 
   width: 100%;
 
-  font-size: calc(0.5rem + 0.5vw);
-  padding: 0.5rem;
+  font-size: calc(0.7rem + 0.5vw);
 
-  img {
-    width: 1.5em;
-    margin: 0 0.5em;
-  }
+  padding: 0.5em;
 
   &.loading {
     background: #cc8b21;
@@ -150,6 +121,19 @@ export default class App extends Vue {
   &.error {
     background: firebrick;
   }
+
+  // WARNING SHOW & HIDE ANIMATION
+  &-anim {
+    &-enter-active,
+    &-leave-active {
+      transition: all $animDuration * 3 $animType;
+    }
+
+    &-enter,
+    &-leave-to {
+      opacity: 0;
+    }
+  }
 }
 
 .route {
@@ -161,6 +145,7 @@ export default class App extends Vue {
   }
 }
 
+// APP
 .app {
   background: $bgCol;
   color: white;
@@ -174,7 +159,8 @@ export default class App extends Vue {
   }
 }
 
-.container {
+// CONTAINER
+.app_container {
   display: grid;
   grid-template-rows: auto 1fr auto;
   grid-template-columns: minmax(0, 1fr);
@@ -183,7 +169,8 @@ export default class App extends Vue {
   min-height: 100vh;
 }
 
-.header {
+// HEADER
+.app_header {
   background: $primaryCol;
   padding: 0.15em;
 
@@ -191,39 +178,44 @@ export default class App extends Vue {
 
   display: flex;
   justify-content: center;
+}
 
-  &-brand {
-    width: 100%;
-    font-size: 1.1em;
+.header_brand {
+  width: 100%;
+  font-size: 1.1em;
 
-    text-align: center;
+  text-align: center;
 
-    img {
-      width: 0.8em;
-    }
-  }
-
-  &-info {
-    display: flex;
-    justify-content: space-between;
-
-    margin: 0 0.3em;
-    padding: 0.2em;
-    font-size: 0.35em;
-  }
-
-  &-links {
-    display: flex;
-    justify-content: center;
-
-    border-radius: 0.7em;
-
-    padding: 0.2em;
-    font-size: 0.35em;
+  img {
+    width: 0.8em;
   }
 }
 
-.counter {
+.header_info {
+  display: flex;
+  justify-content: space-between;
+
+  margin: 0 0.3em;
+  padding: 0.2em;
+  font-size: 0.35em;
+}
+
+.header_links {
+  display: flex;
+  justify-content: center;
+
+  border-radius: 0.7em;
+
+  padding: 0.2em;
+  font-size: 0.35em;
+}
+
+// MAIN
+.app_main {
+}
+
+// COUNTER
+.info_counter {
   display: flex;
   align-items: center;
   color: $accentCol;
@@ -239,7 +231,8 @@ export default class App extends Vue {
   }
 }
 
-footer {
+// FOOTER
+.app_footer {
   background: #111;
   padding: 0.3rem;
   color: white;

src/store/store.ts

@@ -8,6 +8,7 @@ import Train from '@/scripts/interfaces/Train';
 import TrainStop from '@/scripts/interfaces/TrainStop';
 
 enum Status {
+  Initialized = -1,
   Loading = 0,
   Error = 1,
   Loaded = 2,
@@ -26,6 +27,7 @@ interface TimetableData {
   SKR: boolean;
   routeDistance: number;
   followingStops: TrainStop[];
+  followingSceneries: string[];
 }
 
 const URLs = {
@@ -106,10 +108,6 @@ export default class Store extends VuexModule {
   private trainCount: number = 0;
   private stationCount: number = 0;
 
-  //   private stationsConnectionStatus: Status = Status.Loading;
-  //   private trainsConnectionStatus: Status = Status.Loading;
-  //   private dataConnectionStatus: Status = Status.Loading;
-
   private dataConnectionStatus: Status = Status.Loading;
   private timetableLoaded: Status = Status.Loading;
 
@@ -211,6 +209,7 @@ export default class Store extends VuexModule {
         SKR: trainInfo.skr,
         routeDistance: timetable.stopPoints[timetable.stopPoints.length - 1].pointDistance,
         followingStops,
+        followingSceneries: trainInfo.sceneries,
       });
 
       return acc;
@@ -395,6 +394,8 @@ export default class Store extends VuexModule {
     this.stationList = this.stationList.map(station => {
       const stationName = station.stationName.toLowerCase();
       const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: TimetableData, index) => {
+        if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
+
         const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
           const stopName = stop.stopNameRAW.toLowerCase();
 

src/views/TimetableView.vue

@@ -1,87 +1,103 @@
 <template>
   <div class="timetable-view" v-if="stationInfo">
-    <div class="timetable-wrapper">
-      <div class="timetable-title">
-        <b>ODJAZDY</b>
+    <div class="view-content">
+      <div class="timetable-options">
+        <div
+          class="option"
+          v-for="(option, key) in options"
+          :key="key"
+          :class="{ checked: option.state }"
+          @click="setOption(key, !option.state)"
+        >{{ option.name }}</div>
       </div>
 
-      <div class="timetable-header">
-        <span>DO STACJI</span>
-        <span>PRZEZ</span>
-        <span>POCIĄG</span>
-        <span>PLAN. ODJAZD</span>
-        <span>OPÓŹNIENIE</span>
-      </div>
+      <div class="timetable-wrapper">
+        <div class="timetable-title">
+          <b>{{ stationInfo.stationName.toUpperCase() }}</b>
+        </div>
 
-      <div class="timetable-body">
-        <div class="timetable-item" v-for="(timetable, i) in computedRows" :key="i">
-          <div class="row-bar"></div>
-          <div class="timetable-row">
-            <span class="row-destination">
-              <div class="letter-wrapper">
-                <div v-for="(letter, j) in timetable.destinationTable" :key="j" class="letter">
+        <div class="timetable-header">
+          <span>DO STACJI</span>
+          <span>PRZEZ</span>
+          <span>POCIĄG</span>
+          <span>PLAN. ODJAZD</span>
+          <span>OPÓŹNIENIE</span>
+        </div>
+
+        <div class="timetable-body">
+          <div
+            class="timetable-item"
+            v-for="(timetable, i) in computedRows"
+            :key="timetable.trainNo"
+          >
+            <div class="row-bar"></div>
+            <div class="timetable-row">
+              <span class="row-destination">
+                <div class="letter-wrapper">
+                  <div v-for="(letter, j) in timetable.destinationTable" :key="j" class="letter">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="letter">{{ letter }}</span>
+                    </transition>
+                  </div>
+                </div>
+              </span>
+
+              <span class="row-next" ref="next">
+                <div v-for="(letter, j) in timetable.nearestStopTable" :key="j" class="letter">
                   <transition name="roll-anim" mode="out-in">
                     <span :key="letter">{{ letter }}</span>
                   </transition>
                 </div>
-              </div>
-            </span>
+              </span>
 
-            <span class="row-next" ref="next">
-              <div v-for="(letter, j) in timetable.nearestStopTable" :key="j" class="letter">
+              <span class="row-type">
+                <div class="letter-wrapper">
+                  <span class="letter" v-for="(letter, j) in timetable.trainCategoryTable" :key="j">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="letter">{{ letter }}</span>
+                    </transition>
+                  </span>
+                </div>
+
+                <div class="letter-wrapper">
+                  <span class="letter" v-for="(num, j) in timetable.trainNumberTable" :key="j+3">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="num">{{ num }}</span>
+                    </transition>
+                  </span>
+                </div>
+              </span>
+
+              <span class="row-time">
+                <div class="letter-wrapper">
+                  <span class="letter" v-for="(num, h) in timetable.departureHoursTable" :key="h">
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="num">{{ num }}</span>
+                    </transition>
+                  </span>
+
+                  <span>:</span>
+
+                  <span
+                    class="letter"
+                    v-for="(num, i) in timetable.departureMinutesTable"
+                    :key="i + 5"
+                  >
+                    <transition name="roll-anim" mode="out-in">
+                      <span :key="num">{{ num }}</span>
+                    </transition>
+                  </span>
+                </div>
+              </span>
+
+              <span class="row-delay">
                 <transition name="roll-anim" mode="out-in">
-                  <span :key="letter">{{ letter }}</span>
+                  <span
+                    :key="timetable.delay"
+                  >{{ timetable.delay > 0 ? `${timetable.delay} min` : "" }}</span>
                 </transition>
-              </div>
-            </span>
-
-            <span class="row-type">
-              <div class="letter-wrapper">
-                <span class="letter" v-for="(letter, j) in timetable.trainCategoryTable" :key="j">
-                  <transition name="roll-anim" mode="out-in">
-                    <span :key="letter">{{ letter }}</span>
-                  </transition>
-                </span>
-              </div>
-
-              <div class="letter-wrapper">
-                <span class="letter" v-for="(num, j) in timetable.trainNumberTable" :key="j+3">
-                  <transition name="roll-anim" mode="out-in">
-                    <span :key="num">{{ num }}</span>
-                  </transition>
-                </span>
-              </div>
-            </span>
-
-            <span class="row-time">
-              <div class="letter-wrapper">
-                <span class="letter" v-for="(num, h) in timetable.departureHoursTable" :key="h">
-                  <transition name="roll-anim" mode="out-in">
-                    <span :key="num">{{ num }}</span>
-                  </transition>
-                </span>
-
-                <span>:</span>
-
-                <span
-                  class="letter"
-                  v-for="(num, i) in timetable.departureMinutesTable"
-                  :key="i + 5"
-                >
-                  <transition name="roll-anim" mode="out-in">
-                    <span :key="num">{{ num }}</span>
-                  </transition>
-                </span>
-              </div>
-            </span>
-
-            <span class="row-delay">
-              <transition name="roll-anim" mode="out-in">
-                <span
-                  :key="timetable.delay"
-                >{{ timetable.delay > 0 ? `${timetable.delay} min` : "" }}</span>
-              </transition>
-            </span>
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -102,12 +118,43 @@ import { Howl } from "howler";
 import Station from "@/scripts/interfaces/Station";
 import Timetable from "@/scripts/interfaces/Timetable";
 
+interface TimetableRow {
+  destinationTable: string[];
+  destinationString: string;
+
+  nearestStopTable: string[];
+  nearestStopString: string;
+
+  departureHoursTable: string[];
+  departureHoursString: string;
+
+  departureMinutesTable: string[];
+  departureMinutesString: string;
+
+  trainNumberTable: string[];
+  trainNumberString: string;
+
+  trainCategoryTable: string[];
+  trainCategoryString: string;
+
+  category: string;
+  number: number;
+
+  delay: number;
+  delayPlate: string;
+
+  departureTimestamp: number;
+  arrivalTimestamp: number;
+}
+
 const sound = new Howl({
   src: require("@/assets/sound.wav"),
   loop: true,
   autoplay: false,
 });
 
+let soundPlaying = false;
+
 const filteredNames = [
   ["ALEKSANDRÓW KUJAWSKI", "ALEKSDR KUJ."],
   ["GDAŃSK GŁÓWNY", "GDAŃSK GŁ."],
@@ -121,8 +168,6 @@ const filteredNames = [
   ["BARGOWICE ZACHÓD", "BARGOWICE Z."],
 ];
 
-let soundPlaying = false;
-
 const letterSet: string[] = Array.from(
   " -.,/AĄBCĆDEĘFGHIJKLŁMNŃOÓPRSŚTUWXYZŹŻ"
 );
@@ -168,6 +213,109 @@ let nextRefreshTime = 0;
 export default class TimetableView extends Vue {
   @Getter("getStationList") stationList!: Station[];
 
+  options = {
+    excludeCargo: { name: "Tylko pasażerskie", state: false },
+    playSounds: { name: "Dźwięki", state: false },
+  };
+
+  timetableRows: TimetableRow[] = new Array(6).fill(0).map((row) => ({
+    origin: new Array(13).fill(" "),
+
+    destinationTable: new Array(13).fill(" "),
+    destinationString: "",
+
+    nearestStopTable: new Array(13).fill(" "),
+    nearestStopString: "",
+
+    departureHoursTable: new Array(2).fill(" "),
+    departureHoursString: "",
+
+    departureMinutesTable: new Array(2).fill(" "),
+    departureMinutesString: "",
+
+    trainNumberTable: new Array(6).fill(" "),
+    trainNumberString: "",
+
+    trainCategoryTable: new Array(3).fill(" "),
+    trainCategoryString: "",
+
+    category: "",
+    number: 0,
+
+    delay: 0,
+    delayPlate: "",
+
+    departureTimestamp: 0,
+    arrivalTimestamp: 0,
+  }));
+
+  mounted() {
+    window.requestAnimationFrame(this.findNextLetters);
+  }
+
+  deactivated() {
+    this.resetTimetable();
+    letterSeekArray.length = 0;
+  }
+
+  /* Options */
+  setOption(optionKey: string, optionValue: any) {
+    this.$set(this.options[optionKey], "state", optionValue);
+    // this.options[optionKey].state = optionValue;
+  }
+
+  /* ===== */
+
+  resetTimetable(indexFrom: number = 0) {
+    for (let i = indexFrom; i < this.timetableRows.length; i++) {
+      const currentRow = this.timetableRows[i];
+
+      for (let propName in currentRow) {
+        let currentProp = currentRow[propName];
+
+        switch (typeof currentProp) {
+          case "object":
+            currentProp = currentProp.map((v) => " ");
+            break;
+
+          case "string":
+            currentProp = "";
+            break;
+
+          case "number":
+            currentProp = 0;
+            break;
+        }
+
+        this.$set(this.timetableRows[i], propName, currentProp);
+      }
+    }
+  }
+
+  addToSeek(
+    currentRow: TimetableRow,
+    currentRowIndex: number,
+    arrayName: string,
+    next: string,
+    numeric: boolean
+  ) {
+    globalID++;
+
+    console.log(arrayName, currentRow[arrayName]);
+
+    currentRow[arrayName].forEach((char, i) => {
+      letterSeekArray.push({
+        currentRowIndex,
+        letterIndex: i,
+        currentChar: char,
+        finalChar: next[i] || (numeric ? "0" : " "),
+        arrayName,
+        numeric,
+        id: globalID,
+      });
+    });
+  }
+
   get stationInfo(): Station | null {
     if (!this.$route.query.station) return null;
 
@@ -180,127 +328,30 @@ export default class TimetableView extends Vue {
     return info || null;
   }
 
-  timetableRows: {
-    destinationTable: string[];
-    destinationString: string;
-
-    nearestStopTable: string[];
-    nearestStopString: string;
-
-    departureHoursTable: string[];
-    departureHoursString: string;
-
-    departureMinutesTable: string[];
-    departureMinutesString: string;
-
-    trainNumberTable: string[];
-    trainNumberString: string;
-
-    trainCategoryTable: string[];
-    trainCategoryString: string;
-
-    category: string;
-    number: number;
-
-    delay: number;
-    delayPlate: string;
-
-    departureTimestamp: number;
-    arrivalTimestamp: number;
-  }[] = [];
-
-  deactivated() {
-    for (let i = 0; i < this.timetableRows.length; i++) {
-      const currentRow = this.timetableRows[i];
-
-      currentRow.destinationTable = currentRow.destinationTable.map((v) => " ");
-      currentRow.nearestStopTable = currentRow.nearestStopTable.map((v) => " ");
-      currentRow.departureHoursTable = currentRow.departureHoursTable.map(
-        (v) => "0"
-      );
-      currentRow.departureMinutesTable = currentRow.departureMinutesTable.map(
-        (v) => "0"
-      );
-
-      currentRow.trainNumberTable = currentRow.trainNumberTable.map((v) => "");
-
-      currentRow.destinationString = "";
-      currentRow.nearestStopString = "";
-      currentRow.departureHoursString = "";
-      currentRow.departureMinutesString = "";
-      currentRow.trainNumberString = "";
-
-      currentRow.category = "";
-      currentRow.number = 0;
-      currentRow.arrivalTimestamp = 0;
-      currentRow.departureTimestamp = 0;
-      currentRow.delay = 0;
-    }
-
-    letterSeekArray.length = 0;
-  }
-
-  mounted() {
-    this.timetableRows = new Array(7).fill(0).map((row) => ({
-      origin: new Array(13).fill(" "),
-
-      destinationTable: new Array(13).fill(" "),
-      destinationString: "",
-
-      nearestStopTable: new Array(13).fill(" "),
-      nearestStopString: "",
-
-      departureHoursTable: new Array(2).fill("0"),
-      departureHoursString: "",
-
-      departureMinutesTable: new Array(2).fill("0"),
-      departureMinutesString: "",
-
-      trainNumberTable: new Array(6).fill(" "),
-      trainNumberString: "",
-
-      trainCategoryTable: new Array(3).fill(" "),
-      trainCategoryString: "",
-
-      category: "",
-      number: 0,
-
-      delay: 0,
-      delayPlate: "",
-
-      departureTimestamp: 0,
-      arrivalTimestamp: 0,
-    }));
-
-    window.requestAnimationFrame(this.findNextLetters);
-  }
-
-  addToSeek(
-    currentRowIndex: number,
-    letterIndex: number,
-    currentChar: string,
-    finalChar: string,
-    arrayName: string,
-    numeric: boolean
-  ) {
-    globalID++;
-
-    letterSeekArray.push({
-      currentRowIndex,
-      letterIndex,
-      currentChar,
-      finalChar,
-      arrayName,
-      numeric,
-      id: globalID,
-    });
-  }
-
-  get computedRows(): any[] {
+  get computedRows(): TimetableRow[] {
     if (!this.stationInfo) return this.timetableRows;
+    if (
+      !this.stationInfo.scheduledTrains ||
+      this.stationInfo.scheduledTrains.length == 0
+    )
+      return this.timetableRows;
 
     const scheduledTrains = this.stationInfo.scheduledTrains
-      .filter((train) => train.stopInfo.departureTimestamp !== 0)
+      .filter(
+        (train) => {
+          if (train.stopInfo.departureTimestamp == 0) return false;
+
+          if (!this.options.excludeCargo.state) return true;
+
+          const trainNumberLength = train.trainNo.toString().length;
+
+          if (trainNumberLength === 4 || trainNumberLength === 5) return true;
+
+          return false;
+        }
+
+        // includesLetters(train.category.split("")[1], ["P", "I", "O"])
+      )
       .sort((a, b) => {
         if (a.stopInfo.departureTimestamp >= b.stopInfo.departureTimestamp)
           return 1;
@@ -334,81 +385,129 @@ export default class TimetableView extends Vue {
       }
 
       if (currentRow.destinationString !== destination) {
-        currentRow.destinationTable.forEach((letter, i) => {
-          this.addToSeek(
-            currentRowIndex,
-            i,
-            letter,
-            destination[i] ? destination[i].toUpperCase() : " ",
-            "destinationTable",
-            false
-          );
-        });
+        this.addToSeek(
+          currentRow,
+          currentRowIndex,
+          "destinationTable",
+          destination,
+          false
+        );
+
+        // currentRow.destinationTable.forEach((letter, i) => {
+        //   this.addToSeek(
+        //     currentRowIndex,
+        //     i,
+        //     letter,
+        //     destination[i] ? destination[i].toUpperCase() : " ",
+        //     "destinationTable",
+        //     false
+        //   );
+        // });
       }
 
       if (currentRow.nearestStopString !== nearestStop) {
-        currentRow.nearestStopTable.forEach((letter, i) => {
-          this.addToSeek(
-            currentRowIndex,
-            i,
-            letter,
-            nearestStop[i] ? nearestStop[i].toUpperCase() : " ",
-            "nearestStopTable",
-            false
-          );
-        });
+        this.addToSeek(
+          currentRow,
+          currentRowIndex,
+          "nearestStopTable",
+          nearestStop,
+          false
+        );
+
+        // currentRow.nearestStopTable.forEach((letter, i) => {
+        //   this.addToSeek(
+        //     currentRowIndex,
+        //     i,
+        //     letter,
+        //     nearestStop[i] ? nearestStop[i].toUpperCase() : " ",
+        //     "nearestStopTable",
+        //     false
+        //   );
+        // });
       }
 
       if (currentRow.departureHoursString != departureHours.toString()) {
-        currentRow.departureHoursTable.forEach((num, i) => {
-          this.addToSeek(
-            currentRowIndex,
-            i,
-            num,
-            departureHours[i] ? departureHours[i] : "0",
-            "departureHoursTable",
-            true
-          );
-        });
+        this.addToSeek(
+          currentRow,
+          currentRowIndex,
+          "departureHoursTable",
+          departureHours.toString(),
+          true
+        );
+
+        // currentRow.departureHoursTable.forEach((num, i) => {
+        //   this.addToSeek(
+        //     currentRowIndex,
+        //     i,
+        //     num,
+        //     departureHours[i] ? departureHours[i] : "0",
+        //     "departureHoursTable",
+        //     true
+        //   );
+        // });
       }
 
       if (currentRow.departureMinutesString != departureMinutes.toString()) {
-        currentRow.departureMinutesTable.forEach((num, i) => {
-          this.addToSeek(
-            currentRowIndex,
-            i,
-            num,
-            departureMinutes[i] ? departureMinutes[i] : "0",
-            "departureMinutesTable",
-            true
-          );
-        });
+        this.addToSeek(
+          currentRow,
+          currentRowIndex,
+          "departureMinutesTable",
+          departureMinutes.toString(),
+          true
+        );
+
+        // currentRow.departureMinutesTable.forEach((num, i) => {
+        //   this.addToSeek(
+        //     currentRowIndex,
+        //     i,
+        //     num,
+        //     departureMinutes[i] ? departureMinutes[i] : "0",
+        //     "departureMinutesTable",
+        //     true
+        //   );
+        // });
       }
 
       if (currentRow.trainNumberString != train.trainNo.toString()) {
-        currentRow.trainNumberTable.forEach((num, i) => {
-          this.addToSeek(
-            currentRowIndex,
-            i,
-            num,
-            trainNumberString[i] ? trainNumberString[i] : " ",
-            "trainNumberTable",
-            true
-          );
-        });
+        this.addToSeek(
+          currentRow,
+          currentRowIndex,
+          "trainNumberTable",
+          trainNumberString,
+          true
+        );
+
+        // currentRow.trainNumberTable.forEach((num, i) => {
+        //   this.addToSeek(
+        //     currentRowIndex,
+        //     i,
+        //     num,
+        //     trainNumberString[i] ? trainNumberString[i] : " ",
+        //     "trainNumberTable",
+        //     true
+        //   );
+        // });
       }
 
       if (currentRow.trainCategoryString != train.category) {
-        currentRow.trainCategoryTable.forEach((letter, i) => {
-          this.addToSeek(
-            currentRowIndex,
-            i,
-            letter,
-            train.category[i] ? train.category[i] : " ",
-            "trainCategoryTable",
-            false
-          );
-        });
+        this.addToSeek(
+          currentRow,
+          currentRowIndex,
+          "trainCategoryTable",
+          train.category,
+          false
+        );
+
+        // currentRow.trainCategoryTable.forEach((letter, i) => {
+        //   this.addToSeek(
+        //     currentRowIndex,
+        //     i,
+        //     letter,
+        //     train.category[i] ? train.category[i] : " ",
+        //     "trainCategoryTable",
+        //     false
+        //   );
+        // });
       }
 
       if (currentRow.delayPlate != currentRow.delay.toString()) {
@@ -440,32 +539,14 @@ export default class TimetableView extends Vue {
       currentRowIndex++;
     }
 
-    for (let i = currentRowIndex; i < this.timetableRows.length; i++) {
-      const currentRow = this.timetableRows[i];
-
-      for (let propName in currentRow) {
-        let currentProp = currentRow[propName];
-
-        switch (typeof currentProp) {
-          case "object":
-            currentProp = currentProp.map((v) => " ");
-            break;
-
-          case "string":
-            currentProp = "";
-            break;
-
-          case "number":
-            currentProp = 0;
-            break;
-        }
-      }
-    }
+    this.resetTimetable(currentRowIndex);
 
     return this.timetableRows;
   }
 
   seekMainLetters() {
+    if (letterSeekArray.length == 0) return;
+
     for (let i = 0; i < letterSeekArray.length; i++) {
       const wanted = letterSeekArray[i];
       const currentSet = wanted.numeric ? numberSet : letterSet;
@@ -496,8 +577,6 @@ export default class TimetableView extends Vue {
           (letter) => letter.id !== wanted.id
         );
 
-        // console.log("Found!", letterSeekArray.length);
-
         continue;
       }
 
@@ -506,6 +585,8 @@ export default class TimetableView extends Vue {
   }
 
   seekDelayPlate() {
+    if (plateSeekArray.length == 0) return;
+
     for (let i = 0; i < plateSeekArray.length; i++) {
       const plate = plateSeekArray[i];
 
@@ -543,21 +624,26 @@ export default class TimetableView extends Vue {
       this.seekDelayPlate();
       // this.seekSideLetters(time);
 
-      nextRefreshTime = time + 100;
+      nextRefreshTime = time + 200;
     }
 
     // console.log(
     //   letterSeekArray.length < 10 ? letterSeekArray : letterSeekArray.length
     // );
 
-    if (letterSeekArray.length > 0 && !soundPlaying) {
-      sound.play();
-      soundPlaying = true;
-    } else if (letterSeekArray.length == 0) {
-      setTimeout(() => {
-        sound.stop();
-        soundPlaying = false;
-      }, 200);
+    if (this.options.playSounds.state) {
+      if (letterSeekArray.length > 0 && !soundPlaying) {
+        sound.play();
+        soundPlaying = true;
+      } else if (letterSeekArray.length == 0) {
+        setTimeout(() => {
+          sound.stop();
+          soundPlaying = false;
+        }, 200);
+      }
+    } else {
+      sound.stop();
+      soundPlaying = false;
     }
 
     requestAnimationFrame(this.findNextLetters);
@@ -570,7 +656,6 @@ $bg: #111;
 
 .timetable-view {
   height: 100%;
-
   display: flex;
   justify-content: center;
   align-items: center;
@@ -587,6 +672,59 @@ $bg: #111;
   background: $bg;
 }
 
+.timetable-options {
+  margin-bottom: 0.5rem;
+
+  width: 100%;
+
+  font-size: 0.4em;
+
+  display: flex;
+}
+
+.option {
+  position: relative;
+
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  margin: 0.3em;
+  padding: 0.35em 0.7em;
+  border-radius: 0.4em;
+
+  transition: all 0.2s ease-in;
+
+  &:not(.checked) {
+    background-color: #585858;
+
+    &::before {
+      box-shadow: none;
+    }
+  }
+
+  &.checked {
+    background-color: #05b702;
+
+    &::before {
+      box-shadow: 0 0 6px 1px #05b702;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: inherit;
+    transition: inherit;
+  }
+}
+
 .timetable {
   &-title {
     text-align: center;
@@ -691,11 +829,13 @@ $bg: #111;
 
 .roll-anim-enter-active,
 .roll-anim-leave-active {
-  transition: all 75ms;
+  transition: transform 90ms;
+  will-change: transform;
+
   // opacity: 0;
 }
 .roll-anim-enter, .roll-anim-leave-to /* .list-leave-active below version 2.1.8 */ {
-  transform: rotateX(-90deg);
-  perspective: 600px;
+  transform: rotate3d(1, 0, 0, -90deg);
+  // opacity: 0;
 }
 </style>