From f06d13aee32baff21b7044a836a47f876b1e2251 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 12 Oct 2022 21:47:12 +0200
Subject: [PATCH] Pragotron (v0.3)

---
 package.json                 |   8 +-
 src/App.vue                  | 111 +++++----
 src/components/Pragotron.vue | 459 ++++++++++++++++++++++-------------
 src/data/stationAbbrevs.json |   1 -
 src/styles.scss              |  40 +++
 src/theme.scss               |   7 +
 src/types/IDeparture.ts      |  21 --
 src/types/IStationData.ts    |  21 --
 src/types/ITableRow.ts       |  28 +++
 yarn.lock                    | 128 +++++-----
 10 files changed, 501 insertions(+), 323 deletions(-)
 create mode 100644 src/styles.scss
 create mode 100644 src/theme.scss
 delete mode 100644 src/types/IDeparture.ts
 create mode 100644 src/types/ITableRow.ts

diff --git a/package.json b/package.json
index 5c8587d..9a6fe84 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pragotron-td2",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,13 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/vue-router": "^2.0.0",
     "sass": "^1.55.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.0",
-    "vue-tsc": "^1.0.0"
+    "vue-tsc": "^1.0.6"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index a86abc0..1c8bf57 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,27 @@
 <template>
-  <div class="scenery-selector" v-if="!selectedStation">
-    <select name="scenery" id="select-scenery" v-model="selectedStation">
-      <option :value="null" disabled>Wybierz scenerię</option>
-      <option v-for="s in onlineStations" :value="s">{{ s.stationName }}</option>
-    </select>
-  </div>
+  <div class="app_content">
+    <nav class="navbar">
+      <div v-if="!selectedStation">Pragotron TD2</div>
+      <button v-else class="back-btn btn--text" @click="selectedStation = null">&lt; powrót</button>
+    </nav>
 
-  <PragotronVue v-else />
+    <main>
+      <div class="scenery-selector" v-if="!selectedStation">
+        <h1>Scenerie online</h1>
+
+        <ul class="scenery-list">
+          <li v-for="(station, i) in onlineStations">
+            <span v-if="i > 0">&bull;</span>
+            <button class="btn--text" @click="handleClick(station)">
+              {{ station.stationName }}
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <PragotronVue v-else />
+    </main>
+  </div>
 </template>
 
 <script lang="ts">
@@ -29,7 +44,7 @@ export default defineComponent({
       stationCheckpoints: [],
     };
 
-    const selectedStation = ref(mockStation) as Ref<null | IStationData>;
+    const selectedStation = ref(null) as Ref<null | IStationData>;
 
     provide('selectedStation', selectedStation);
 
@@ -40,16 +55,17 @@ export default defineComponent({
 
   data: () => ({
     onlineStations: [] as IStationData[],
+    dataLoaded: false,
   }),
 
   async mounted() {
     const stationDataArray: ISceneryResponse[] = await (
-      await fetch('https://spythere.github.io/api/stationData.json')
+      await fetch(`${import.meta.env.VITE_STACJOWNIK_API_URL}/api/getSceneries`)
     ).json();
 
     const stationDataJSON = stationDataArray.map((stationData) => ({
       stationName: stationData.name,
-      stationCheckpoints: stationData.checkpoints?.split(';') || [],
+      stationCheckpoints: stationData.checkpoints?.length > 0 ? stationData.checkpoints.split(';') : [stationData.name],
       nameAbbreviation: '',
     }));
 
@@ -75,51 +91,64 @@ export default defineComponent({
         return acc;
       }, [] as IStationData[])
       .sort((s1, s2) => (s1.stationName > s2.stationName ? 1 : -1));
+
+    this.dataLoaded = true;
+  },
+
+  methods: {
+    handleClick(station: IStationData) {
+      this.selectedStation = station;
+    },
   },
 });
 </script>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Monda:wght@400;700&display=swap');
+@import './styles.scss';
 
-body,
-html {
-  background: #333;
-  min-height: 100vh;
-
-  padding: 0;
-  margin: 0;
-
-  font-family: 'Monda', sans-serif;
-}
-
-input,
-button,
-select,
-option {
-  font-family: 'Monda', sans-serif;
-  font-size: 1em;
-}
-
-#app {
+.app_content {
   text-align: center;
 
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100vh;
+}
+
+nav {
+  flex: 0 1 auto;
+  font-size: 1.35em;
+
+  padding: 0.25em;
+
+  display: flex;
+  align-items: center;
+
+  background-color: $accentBg;
+
+  button {
+    padding: 0;
+  }
+}
+
+main {
+  flex: 1 1 auto;
+
   display: flex;
   justify-content: center;
   align-items: center;
-
-  min-height: 100vh;
 }
 
-.scenery-selector {
+ul.scenery-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  padding: 1em;
+  margin: 0 auto;
+
   font-size: 1.3em;
-  color: white;
-
-  select {
-    margin-top: 1em;
-
-    width: 14em;
-  }
+  max-width: 1000px;
 }
 </style>
 
diff --git a/src/components/Pragotron.vue b/src/components/Pragotron.vue
index 3dcdfe6..fe184a8 100644
--- a/src/components/Pragotron.vue
+++ b/src/components/Pragotron.vue
@@ -1,28 +1,78 @@
 <template>
   <div class="pragotron">
+    <div class="filters">
+      <div>
+        <label>
+          <input type="checkbox" v-model="includeNonPassenger" />
+          Relacje niepasażerskie
+        </label>
+
+        <label>
+          <input type="checkbox" v-model="includeArrivals" />
+          Relacje kończące bieg
+        </label>
+      </div>
+
+      <div>
+        <label for="checkpoint">
+          Posterunek:
+
+          <select id="checkpoint" v-model="selectedCheckpointName">
+            <option v-for="cp in selectedStation.stationCheckpoints" :value="cp">{{ cp }}</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
     <div class="wrapper">
       <div class="top-pane">
         <span class="title">
-          <div>{{ selectedStation.stationName.toUpperCase() }}</div>
+          <div>{{ selectedCheckpointName.toUpperCase() }}</div>
         </span>
 
         <div class="headers">
-          <span>DO STACJI</span>
-          <span>PRZEZ</span>
+          <span>GODZ.</span>
           <span>POCIĄG</span>
-          <span>PLAN. ODJ.</span>
-          <span>OPÓŹN.</span>
+          <span>PRZEZ</span>
+          <span>DO STACJI</span>
+          <span>OPÓŹNIONY</span>
         </div>
       </div>
 
       <div class="table">
-        <div class="row" v-for="(departure, i) in departureList" :key="i">
+        <div class="row" v-for="(departure, i) in filledTable" :key="i">
           <div class="row-content">
-            <span class="route-to">
+            <span class="departure-date">
               <transition name="slot-anim" mode="out-in">
-                <div class="slider-slot" :key="departure.tableValues.routeTo">
-                  {{ abbrevStationName(departure.tableValues.routeTo) }}
-                </div>
+                <span class="slider-slot-digit" :key="departure.tableValues.dateDigits[0]">{{
+                  departure.tableValues.dateDigits[0]
+                }}</span>
+              </transition>
+
+              <transition name="slot-anim" mode="out-in">
+                <span class="slider-slot-digit" :key="departure.tableValues.dateDigits[1]">
+                  {{ departure.tableValues.dateDigits[1] }}</span
+                >
+              </transition>
+
+              <span :key="departure.tableValues.dateDigits[1]"> : </span>
+
+              <transition name="slot-anim" mode="out-in">
+                <span class="slider-slot-digit" :key="departure.tableValues.dateDigits[2]">
+                  {{ departure.tableValues.dateDigits[2] }}
+                </span>
+              </transition>
+
+              <transition name="slot-anim" mode="out-in">
+                <span class="slider-slot-digit" :key="departure.tableValues.dateDigits[3]">
+                  {{ departure.tableValues.dateDigits[3] }}
+                </span>
+              </transition>
+            </span>
+
+            <span class="train-class">
+              <transition name="slot-anim" mode="out-in">
+                <div class="slider-slot" :key="departure.trainNumber">{{ departure.trainNumber }}</div>
               </transition>
             </span>
 
@@ -34,37 +84,11 @@
               </transition>
             </span>
 
-            <span class="train-class">
+            <span class="route-to">
               <transition name="slot-anim" mode="out-in">
-                <div class="slider-slot" :key="departure.trainNumber">{{ departure.trainNumber }}</div>
-              </transition>
-            </span>
-
-            <span class="departure-date">
-              <transition name="slot-anim" mode="out-in">
-                <span class="slider-slot-digit" :key="departure.departureDigits[0]">{{
-                  departure.departureDigits[0]
-                }}</span>
-              </transition>
-
-              <transition name="slot-anim" mode="out-in">
-                <span class="slider-slot-digit" :key="departure.departureDigits[1]">
-                  {{ departure.departureDigits[1] }}</span
-                >
-              </transition>
-
-              <span :key="departure.departureDigits[1]"> : </span>
-
-              <transition name="slot-anim" mode="out-in">
-                <span class="slider-slot-digit" :key="departure.departureDigits[2]">
-                  {{ departure.departureDigits[2] }}
-                </span>
-              </transition>
-
-              <transition name="slot-anim" mode="out-in">
-                <span class="slider-slot-digit" :key="departure.departureDigits[3]">
-                  {{ departure.departureDigits[3] }}
-                </span>
+                <div class="slider-slot" :key="departure.tableValues.routeTo">
+                  {{ abbrevStationName(departure.tableValues.routeTo) }}
+                </div>
               </transition>
             </span>
 
@@ -90,13 +114,13 @@ import { defineComponent, inject, reactive, Ref } from 'vue';
 import stationAbbrevsJSON from '../data/stationAbbrevs.json';
 import routeValues from '../data/routeValues.json';
 
-import { IDeparture } from '../types/IDeparture';
 import StationData from '../types/IStationData';
 import { ITimetableStop, ITrainResponse } from '../types/ITrainResponse';
+import { ITableRow } from '../types/ITableRow';
 
 const stationAbbrevs: { [key: string]: string } = stationAbbrevsJSON;
 
-const departureInfoEmptyObj: IDeparture = {
+const departureInfoEmptyObj: ITableRow = {
   timetableId: -1,
 
   routeTo: '',
@@ -104,34 +128,47 @@ const departureInfoEmptyObj: IDeparture = {
 
   trainNumber: '',
 
-  departureDate: new Date(0),
-  departureDigits: [],
+  date: new Date(0),
+  dateDigits: [' ', ' ', ' ', ' '],
 
   arrivalTimestamp: 0,
   departureTimestamp: 0,
+  checkpointName: '',
 
   delayMinutes: 0,
 
-  tableValues: reactive({
+  tableValues: {
     routeTo: '',
     routeVia: '',
-  }),
+
+    currentRouteToIndex: 0,
+    currentRouteViaIndex: 0,
+
+    dateDigits: [' ', ' ', ' ', ' '],
+  },
 };
 
 export default defineComponent({
   data: () => ({
     currentStationName: '',
 
-    // seekingTable: [] as { collection: string[]; currentIndex: number }[][],
+    includeNonPassenger: true,
+    includeArrivals: true,
+
+    apiTrainData: [] as ITrainResponse[],
 
     lastRefreshTime: 0,
+    updatedDepartureList: [] as ITableRow[],
 
-    departureList: new Array(7).fill(0).map(() => ({ ...departureInfoEmptyObj })) as IDeparture[],
+    departureList: new Array(7).fill(0).map(() => ({ ...departureInfoEmptyObj })) as ITableRow[],
     departureRoutes: [''],
+    dateDigits: [' ', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
 
     currentRouteIndex: 0,
+    currentDateDigitIndex: 0,
 
     stationAbbrevs: stationAbbrevs as { [key: string]: string },
+    selectedCheckpointName: '',
   }),
 
   setup() {
@@ -142,7 +179,114 @@ export default defineComponent({
     };
   },
 
+  async mounted() {
+    this.selectDefaultCheckpoint();
+
+    this.shuffleRoutes();
+    await this.fetchDepartureList();
+
+    setInterval(() => {
+      this.fetchDepartureList();
+    }, 10000);
+
+    requestAnimationFrame(this.update);
+  },
+
+  computed: {
+    filledTable() {
+      const filteredData = this.apiTrainData
+        .reduce((list, train) => {
+          if (!train.timetable) return list;
+
+          const timetable = train.timetable;
+
+          const stopInfo: ITimetableStop | undefined = timetable.stopList.find(
+            (sp) => sp.stopNameRAW.toLowerCase() == this.selectedCheckpointName.toLowerCase()
+          );
+
+          if (!stopInfo || stopInfo.confirmed) return list;
+
+          const stopInfoIndex = timetable.stopList.indexOf(stopInfo);
+          const { departureTimestamp, departureDelay, arrivalTimestamp, departureLine } = stopInfo;
+
+          const routeVia =
+            timetable.stopList.find((stop, i) => {
+              return (
+                i > stopInfoIndex &&
+                // i < timetable.stopList.length - 1,
+                stop.stopName.includes('strong') &&
+                stop.stopTime &&
+                stop.stopTime > 0
+              );
+            })?.stopNameRAW || '';
+
+          const date = departureLine ? new Date(departureTimestamp) : new Date(arrivalTimestamp);
+
+          // [HH, MM, SS] - nienawidzę dat w JavaScripcie
+          const dateArray = date.toLocaleString('pl-PL').split(', ')[1].split(':') || ['', '', '', ''];
+
+          // [H,H,M,M] - ZABIJCIE MNIE BŁAGAM
+          const dateDigits = [...dateArray[0].split(''), ...dateArray[1].split('')];
+
+          const routeTo = timetable.route.split('|')[1];
+
+          list.push({
+            trainNumber: `${timetable.category} ${train.trainNo}`,
+            timetableId: timetable.timetableId,
+            routeTo: routeTo,
+            routeVia: routeVia,
+            date,
+            dateDigits,
+            delayMinutes: departureDelay,
+            checkpointName: this.selectedCheckpointName.toLowerCase(),
+
+            arrivalTimestamp,
+            departureTimestamp,
+
+            tableValues: {
+              routeTo: '',
+              routeVia: '',
+              dateDigits: [' ', ' ', ' ', ' '],
+              currentRouteToIndex: 0,
+              currentRouteViaIndex: 0
+            },
+          });
+
+          if (!this.departureRoutes.includes(routeVia)) this.departureRoutes.push(routeVia);
+          if (!this.departureRoutes.includes(routeTo)) this.departureRoutes.push(routeTo);
+
+          return list;
+        }, [] as ITableRow[])
+        .filter(
+          (dep) =>
+            (this.includeNonPassenger || !/^[T|L|Z|P]/g.test(dep.trainNumber)) &&
+            (this.includeArrivals || dep.departureTimestamp)
+        )
+        .sort((dep1, dep2) => (dep1.date?.getTime() || 0) - (dep2.date?.getTime() || 0));
+
+      for (let i = 0; i < this.departureList.length; i++) {
+        if (i <= filteredData.length - 1) {
+          const updateInfo = filteredData[i];
+          const existingInfo = this.departureList[i];
+
+          this.departureList[i] = { ...updateInfo };
+          this.departureList[i].tableValues.routeTo = existingInfo.routeTo;
+          this.departureList[i].tableValues.routeVia = existingInfo.routeVia;
+          this.departureList[i].tableValues.dateDigits = [...existingInfo.tableValues.dateDigits];
+        } else {
+          this.departureList[i] = departureInfoEmptyObj;
+        }
+      }
+
+      return this.departureList;
+    },
+  },
+
   methods: {
+    selectDefaultCheckpoint() {
+      this.selectedCheckpointName = this.selectedStation.stationCheckpoints[0] || this.selectedStation.stationName;
+    },
+
     abbrevStationName(name: string) {
       return (name in stationAbbrevs ? stationAbbrevs[name] : name).toUpperCase();
     },
@@ -152,64 +296,114 @@ export default defineComponent({
         this.updateTableRows();
 
         this.currentRouteIndex = (this.currentRouteIndex + 1) % this.departureRoutes.length;
+        // this.currentDateDigitIndex = (this.currentDateDigitIndex + 1) % this.dateDigits.length;
         this.lastRefreshTime = time;
       }
+
       requestAnimationFrame(this.update);
     },
 
     // d = 0 -> time = time
     // d = time -> time2 = time2-time
     updateTableRows() {
+      
       this.departureList.forEach((dep, i) => {
         if (dep.tableValues.routeTo.toLowerCase() != dep.routeTo.toLowerCase()) {
-          dep.tableValues.routeTo = this.departureRoutes[(this.currentRouteIndex + i) % this.departureRoutes.length];
+          dep.tableValues.routeTo = this.departureRoutes[(dep.tableValues.currentRouteToIndex) % this.departureRoutes.length];
         }
 
         if (dep.tableValues.routeVia.toLowerCase() != dep.routeVia.toLowerCase()) {
           dep.tableValues.routeVia =
-            this.departureRoutes[(this.currentRouteIndex + i + 1) % this.departureRoutes.length];
+            this.departureRoutes[(dep.tableValues.currentRouteViaIndex) % this.departureRoutes.length];
         }
+
+        dep.tableValues.currentRouteToIndex = (dep.tableValues.currentRouteToIndex + 1) % this.departureRoutes.length;
+        dep.tableValues.currentRouteViaIndex = (dep.tableValues.currentRouteViaIndex + 1) % this.departureRoutes.length;
+        
+
+        dep.tableValues.dateDigits.forEach((digit, j) => {
+          if (dep.dateDigits[j] != digit)
+            dep.tableValues.dateDigits[j] =
+              this.dateDigits[(Number(digit) + 1) % this.dateDigits.length];
+        });
       });
     },
 
-    fillTable(departureUpdateList: IDeparture[] = []) {
-      for (let i = 0; i < this.departureList.length; i++) {
-        if (i <= departureUpdateList.length - 1) {
-          const updateInfo = departureUpdateList[i];
-          const existingInfo = this.departureList[i];
-
-          // if (updateInfo.delayMinutes != existingInfo.delayMinutes) {
-          //   this.sortedDepartureList[i].delayMinutes = updateInfo.delayMinutes;
-          //   continue;
-          // }
-
-          // // Podmień jeśli
-          // if (updateInfo.timetableId != existingInfo.timetableId) {
-          //   this.sortedDepartureList[i] = updateInfo;
-          // }
-
-          this.departureList[i] = { ...updateInfo };
-          this.departureList[i].tableValues.routeTo = existingInfo.routeTo;
-          this.departureList[i].tableValues.routeVia = existingInfo.routeVia;
-        } else {
-          this.departureList[i] = departureInfoEmptyObj;
-        }
-      }
-
-      console.log(departureUpdateList);
-    },
-
     shuffleRoutes() {
       for (let i = 0; i < 25; i++) {
         const randIndex = Math.floor(Math.random() * routeValues.length);
         const randRoute = routeValues[randIndex];
 
-        this.departureRoutes.push(randRoute);
+        // this.departureRoutes.push(randRoute);
       }
 
       this.departureRoutes.sort(() => Math.random() - 0.5);
     },
 
+    // refreshTable(apiData: ITrainResponse[]) {
+    //   const updatedDepartureList = apiData.reduce((list, train) => {
+    //     if (!train.timetable) return list;
+
+    //     const timetable = train.timetable;
+
+    //     const stopInfo: ITimetableStop | undefined = timetable.stopList.find(
+    //       (sp) => sp.stopNameRAW.toLowerCase() == this.selectedCheckpointName.toLowerCase()
+    //     );
+
+    //     if (!stopInfo || stopInfo.confirmed) return list;
+
+    //     const stopInfoIndex = timetable.stopList.indexOf(stopInfo);
+    //     const { departureTimestamp, departureDelay, arrivalTimestamp, departureLine } = stopInfo;
+
+    //     const routeVia =
+    //       timetable.stopList.find((stop, i) => {
+    //         return (
+    //           i > stopInfoIndex &&
+    //           // i < timetable.stopList.length - 1,
+    //           stop.stopName.includes('strong') &&
+    //           stop.stopTime &&
+    //           stop.stopTime > 0
+    //         );
+    //       })?.stopNameRAW || '';
+
+    //     const date = departureLine ? new Date(departureTimestamp) : new Date(arrivalTimestamp);
+
+    //     // [HH, MM, SS] - nienawidzę dat w JavaScripcie
+    //     const dateArray = date.toLocaleString('pl-PL').split(', ')[1].split(':') || [' ', ' ', ' ', ' '];
+
+    //     // [H,H,M,M] - ZABIJCIE MNIE BŁAGAM
+    //     const dateDigits = [...dateArray[0].split(''), ...dateArray[1].split('')];
+
+    //     const routeTo = timetable.route.split('|')[1];
+
+    //     list.push({
+    //       trainNumber: `${timetable.category} ${train.trainNo}`,
+    //       timetableId: timetable.timetableId,
+    //       routeTo: routeTo,
+    //       routeVia: routeVia,
+    //       date,
+    //       dateDigits,
+    //       delayMinutes: departureDelay,
+    //       checkpointName: this.selectedCheckpointName.toLowerCase(),
+
+    //       arrivalTimestamp,
+    //       departureTimestamp,
+
+    //       tableValues: {
+    //         routeTo: '',
+    //         routeVia: '',
+    //       },
+    //     });
+
+    //     if (!this.departureRoutes.includes(routeVia)) this.departureRoutes.push(routeVia);
+    //     if (!this.departureRoutes.includes(routeTo)) this.departureRoutes.push(routeTo);
+
+    //     return list;
+    //   }, [] as ITableRow[]);
+
+    //   this.updatedDepartureList = updatedDepartureList;
+    // },
+
     async fetchDepartureList() {
       const trainsAPIResponse: ITrainResponse[] = await (
         await fetch(`${import.meta.env.VITE_STACJOWNIK_API_URL}/api/getActiveTrainList`)
@@ -217,83 +411,10 @@ export default defineComponent({
 
       if (!trainsAPIResponse) return;
 
-      const updatedDepartureList = trainsAPIResponse.reduce((list, train) => {
-        if (!train.timetable) return list;
-
-        const timetable = train.timetable;
-
-        const stopInfo: ITimetableStop | undefined = timetable.stopList.find(
-          (sp) => sp.stopNameRAW.toLowerCase() == this.selectedStation.stationName.toLowerCase()
-        );
-
-        if (!stopInfo || stopInfo.confirmed) return list;
-
-        const stopInfoIndex = timetable.stopList.indexOf(stopInfo);
-        const { departureTimestamp, departureDelay, arrivalTimestamp, departureLine } = stopInfo;
-
-        const routeVia =
-          timetable.stopList.find((stop, i) => {
-            return (
-              i > stopInfoIndex &&
-              // i < timetable.stopList.length - 1,
-              stop.stopName.includes('strong') &&
-              stop.stopTime &&
-              stop.stopTime > 0
-            );
-          })?.stopNameRAW || '';
-
-        const departureDate = departureLine ? new Date(departureTimestamp) : undefined;
-
-        // [HH, MM, SS] - nienawidzę dat w JavaScripcie
-        const dateArray = departureDate?.toLocaleString('pl-PL').split(', ')[1].split(':') || [' ', ' ', ' ', ' '];
-
-        // [H,H,M,M] - ZABIJCIE MNIE BŁAGAM
-        const departureDigits = [...dateArray[0].split(''), ...dateArray[1].split('')];
-
-        const routeTo = timetable.route.split('|')[1];
-
-        list.push({
-          trainNumber: `${timetable.category} ${train.trainNo}`,
-          timetableId: timetable.timetableId,
-          routeTo: routeTo,
-          routeVia: routeVia,
-          departureDate: departureDate,
-          departureDigits: departureDigits,
-          delayMinutes: departureDelay,
-
-          arrivalTimestamp,
-          departureTimestamp,
-
-          tableValues: reactive({
-            routeTo: '',
-            routeVia: '',
-          }),
-        });
-
-        if (!this.departureRoutes.includes(routeVia)) this.departureRoutes.push(routeVia);
-        if (!this.departureRoutes.includes(routeTo)) this.departureRoutes.push(routeTo);
-
-        return list;
-      }, [] as IDeparture[]);
-
-      this.fillTable(
-        updatedDepartureList
-          // .filter((dep) => dep.departureDate)
-          .sort((dep1, dep2) => (dep1.departureDate?.getTime() || 0) - (dep2.departureDate?.getTime() || 0))
-      );
+      this.apiTrainData = trainsAPIResponse;
+      // this.refreshTable(trainsAPIResponse);
     },
   },
-
-  async mounted() {
-    this.shuffleRoutes();
-    await this.fetchDepartureList();
-
-    setInterval(() => {
-      this.fetchDepartureList();
-    }, 10000);
-
-    requestAnimationFrame(this.update);
-  },
 });
 </script>
 
@@ -326,22 +447,24 @@ export default defineComponent({
 
 /* ************** */
 
-.pragotron {
-  width: 1200px;
-  height: 650px;
-
-  background: black;
+.filters {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25em 0;
+  gap: 0.5em;
 }
 
 .wrapper {
-  height: 100%;
+  width: 1200px;
+  height: 650px;
 
   display: flex;
   flex-direction: column;
 }
 
 .top-pane {
-  background: white;
+  background-color: white;
+  color: black;
   height: 180px;
 
   display: flex;
@@ -356,8 +479,9 @@ export default defineComponent({
 
   .headers {
     display: grid;
-    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
     gap: 0 10px;
+    padding: 0 10px;
 
     text-align: center;
 
@@ -377,7 +501,10 @@ export default defineComponent({
 .row {
   &-content {
     display: grid;
-    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
+    gap: 0 10px;
+    padding: 0 10px;
+
     height: 100%;
 
     align-items: center;
@@ -394,24 +521,20 @@ export default defineComponent({
 }
 
 .departure-date {
-  display: flex;
   background: black;
 
-  .dot {
-    flex-grow: 1;
-  }
-
   span {
     background: black;
     height: 2em;
     line-height: 2em;
     flex-grow: 2;
+    width: 100%;
   }
 }
 
 .slider-slot {
   background: #010101;
-  width: 85%;
+  width: 100%;
   height: 2em;
   line-height: 2em;
 }
diff --git a/src/data/stationAbbrevs.json b/src/data/stationAbbrevs.json
index d7d5ead..7a73a41 100644
--- a/src/data/stationAbbrevs.json
+++ b/src/data/stationAbbrevs.json
@@ -1,3 +1,2 @@
 {
-    "Aleksandrów Kujawski": "Aleksandrów Kuj."
 }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
new file mode 100644
index 0000000..5e16a75
--- /dev/null
+++ b/src/styles.scss
@@ -0,0 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Monda:wght@400;700&display=swap');
+@import 'theme.scss';
+
+
+body,
+html {
+  background: $primaryBg;
+  min-height: 100vh;
+  color: $primaryText;
+
+
+  padding: 0;
+  margin: 0;
+}
+
+*,
+*::before,
+*::after {
+  font-family: 'Monda', sans-serif;
+}
+
+ul {
+  list-style: none;
+}
+
+button {
+  cursor: pointer;
+  color: white;
+  font-size: 1em;
+
+  &.btn--text {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  &:focus-visible {
+    color: $accentText;
+  }
+}
diff --git a/src/theme.scss b/src/theme.scss
new file mode 100644
index 0000000..b3547f2
--- /dev/null
+++ b/src/theme.scss
@@ -0,0 +1,7 @@
+$primaryText: white;
+$accentText: gold;
+
+$primaryBg: #333;
+$secondaryBg: #aaa;
+
+$accentBg: #327ea5;
\ No newline at end of file
diff --git a/src/types/IDeparture.ts b/src/types/IDeparture.ts
deleted file mode 100644
index 4cad195..0000000
--- a/src/types/IDeparture.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-interface IDepartureTableValues {
-    routeTo: string;
-    routeVia: string;
-}
-
-export interface IDeparture {
-    trainNumber: string;
-    timetableId: number;
-
-    routeTo: string;
-    routeVia: string;
-
-    arrivalTimestamp: number;
-    departureTimestamp: number;
-
-    delayMinutes: number,
-    departureDate?: Date,
-    departureDigits: string[],
-
-    tableValues: IDepartureTableValues;
-}
\ No newline at end of file
diff --git a/src/types/IStationData.ts b/src/types/IStationData.ts
index ae8c736..149b3d8 100644
--- a/src/types/IStationData.ts
+++ b/src/types/IStationData.ts
@@ -1,24 +1,3 @@
-/*
-  0: "LCS Żywiec"
-  1: "https://td2.info.pl/scenerie/lcs-zywiec/"
-  2: "97, 139"
-  3: null
-  4: "10"
-  5: "NIE"
-  6: "współczesna"
-  7: "SCS"
-  8: "" - sbl
-  9: "" - blokady
-  10: 3
-  11: 0
-  12: 0
-  13: 0
-  14: "Żywiec;Węgierska Górka;Łodygowice;Wilkowice Bystra;BB Leszczyny;BB Lipnik, podg."
-  15: true
-  16: false
-  17: false
-*/
-
 export default interface IStationData {
   stationName: string;
   nameAbbreviation: string;
diff --git a/src/types/ITableRow.ts b/src/types/ITableRow.ts
new file mode 100644
index 0000000..38729c4
--- /dev/null
+++ b/src/types/ITableRow.ts
@@ -0,0 +1,28 @@
+interface ITableRowValues {
+    routeTo: string;
+    routeVia: string;
+
+    currentRouteToIndex: number;
+    currentRouteViaIndex: number;
+
+    dateDigits: string[],
+}
+
+export interface ITableRow {
+    trainNumber: string;
+    timetableId: number;
+
+    routeTo: string;
+    routeVia: string;
+
+    checkpointName: string;
+
+    arrivalTimestamp: number;
+    departureTimestamp: number;
+
+    delayMinutes: number,
+    date?: Date,
+    dateDigits: string[],
+
+    tableValues: ITableRowValues;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e08da1e..e0ca425 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17,63 +17,62 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.10.tgz#78a42897c2cf8db9fd5f1811f7590393b77774c7"
   integrity sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==
 
+"@types/vue-router@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/vue-router/-/vue-router-2.0.0.tgz#81094f2107e766a11b20af7fa0f34bec1f321e28"
+  integrity sha512-E454lQ6tp9ftVWdZ8VGZpRcIV4YeqVAcx/uifl3P1GGwscYsxOFdYfgIuKasKO0Fm6Np2JM/L378D3bcRQE9hg==
+  dependencies:
+    vue-router "*"
+
 "@vitejs/plugin-vue@^3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.1.2.tgz#3cd52114e8871a0b5e7bd7d837469c032e503036"
   integrity sha512-3zxKNlvA3oNaKDYX0NBclgxTQ1xaFdL7PzwF6zj9tGFziKwmBa3Q/6XcJQxudlT81WxDjEhHmevvIC4Orc1LhQ==
 
-"@volar/language-core@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.0.0.tgz#57fea42d061793f39f7231ed41f2533cf9ce2d5b"
-  integrity sha512-gUeIyRmPD9dtCAADK+ZCr0n4n1lbwsGJ+ulQn//phfD+p9B1E9B4o2WRoeOOAkcqXZTEFmCxtg+S6Pa0pwUVHA==
+"@volar/language-core@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.0.6.tgz#8780d42f7d5a4190c95e83325428d20fd1c08ab2"
+  integrity sha512-4PLbEpOWR9xoqlJTddnU/uOKc6Dh3G9lstTSob4BBvpso0pqGa2eN5eYKshwO2B/gNbyMOzL0nNNxgnm0mgFlg==
   dependencies:
-    "@volar/source-map" "1.0.0"
-    "@vue/reactivity" "^3.2.38"
+    "@volar/source-map" "1.0.6"
+    "@vue/reactivity" "^3.2.40"
     muggle-string "^0.1.0"
 
-"@volar/source-map@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.0.0.tgz#963d281d4e4bcba32592bc77b2b1f1f4c0b8ea43"
-  integrity sha512-EyIauGZmii2d4FicOw9eUnjq5nX/lqxKoPDPAZSGfkYOI/zfhhRydjLWR/BTbtPEV+Pqu6p5QjV3ts2/jQtKPw==
+"@volar/source-map@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.0.6.tgz#9879e9a66ace715aca8d1d68d468cac6e08f229d"
+  integrity sha512-RnsfanjHQlLR0BXPUPW8UXDU647yISnuywtJthkKlgCAoBDoJIA5LnUb6QqgPo9uImtMU1VZC8D8Cpx/EpaO6g==
   dependencies:
     muggle-string "^0.1.0"
 
-"@volar/typescript-faster@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@volar/typescript-faster/-/typescript-faster-1.0.0.tgz#5ab4315148baec2feb5eb4a1efabb8b79de1c5b0"
-  integrity sha512-QsKMB2bEfWMKaPKW5HDmvBsusIgGx0WG1U30EaHwpnME25XZSJh1a5BZh9uUQcZteLkjtEfAmCI2PkfDgz1zew==
+"@volar/typescript@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.0.6.tgz#b7f7fec94d48249c12f106634843ba5309ffca9f"
+  integrity sha512-qfeqQZ2fCRnk8JUlIbpUlypdfm1D6uLSi8e4DtVHYlg7hWU5diZypyZdQX32CBrZ7mYzMmYe3C2czkrRCGoO3g==
   dependencies:
-    semver "^7.3.7"
+    "@volar/language-core" "1.0.6"
 
-"@volar/typescript@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.0.0.tgz#281567d955285cdddd9bd8f396e88acdb7d7ac03"
-  integrity sha512-0BsNJnN/VuQ3WQ3RmdJo7Xf8pwT0JCV0xdtgH9okEMeuXBLPZjg7tKwDHT3TY8ord1mVk0tjNnzyQJAhaQ8t0w==
+"@volar/vue-language-core@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.0.6.tgz#538612b4ee05c80c8933f848213ba00ae9ae4f83"
+  integrity sha512-JFG8bOI448pArxCBMRH7Q6rw9/rtRggz/YwaGiewkftg3a04BKF0zwVe8SUg9XEdcdTwQdAcmdBxIlSPTl0LEA==
   dependencies:
-    "@volar/language-core" "1.0.0"
-    "@volar/typescript-faster" "1.0.0"
-
-"@volar/vue-language-core@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.0.0.tgz#fae737411063c55d83169581c6882e93bb50629c"
-  integrity sha512-BYJvROEGNMDxTbyT7j9B9i8VDeLzEwDijNy2WactsK4mhruYRp911BwI9UNia4dD6RgMhyIShExRNoCwtCNMtw==
-  dependencies:
-    "@volar/language-core" "1.0.0"
-    "@volar/source-map" "1.0.0"
-    "@vue/compiler-dom" "^3.2.38"
-    "@vue/compiler-sfc" "^3.2.38"
-    "@vue/reactivity" "^3.2.38"
-    "@vue/shared" "^3.2.38"
+    "@volar/language-core" "1.0.6"
+    "@volar/source-map" "1.0.6"
+    "@vue/compiler-dom" "^3.2.40"
+    "@vue/compiler-sfc" "^3.2.40"
+    "@vue/reactivity" "^3.2.40"
+    "@vue/shared" "^3.2.40"
     minimatch "^5.1.0"
     vue-template-compiler "^2.7.10"
 
-"@volar/vue-typescript@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-1.0.0.tgz#322bc9b354d08a92bd51e64a42594aa3f97e62ba"
-  integrity sha512-W9qU96gdApnEgHZf6i9BKQVDJqreYKVsXDRdJPtJEeykSwi6an0LYwgkpCfDjW3pyeVYSYAxVegYE8rSo9k4IA==
+"@volar/vue-typescript@1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-1.0.6.tgz#9d8cf7ac989c98f8ab945b32937a1dae50e4150c"
+  integrity sha512-1ct4Nc3fzCfwUorkx2NiJ07kB65ZKms3VKTHsH4OXWhy5wlGCd8Oq09KLYu3zz3eOd0WfjkNTrRmOnf6dfTO8A==
   dependencies:
-    "@volar/typescript" "1.0.0"
-    "@volar/vue-language-core" "1.0.0"
+    "@volar/typescript" "1.0.6"
+    "@volar/vue-language-core" "1.0.6"
 
 "@vue/compiler-core@3.2.40":
   version "3.2.40"
@@ -85,7 +84,7 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.40", "@vue/compiler-dom@^3.2.38":
+"@vue/compiler-dom@3.2.40", "@vue/compiler-dom@^3.2.40":
   version "3.2.40"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.40.tgz#c225418773774db536174d30d3f25ba42a33e7e4"
   integrity sha512-OZCNyYVC2LQJy4H7h0o28rtk+4v+HMQygRTpmibGoG9wZyomQiS5otU7qo3Wlq5UfHDw2RFwxb9BJgKjVpjrQw==
@@ -93,7 +92,7 @@
     "@vue/compiler-core" "3.2.40"
     "@vue/shared" "3.2.40"
 
-"@vue/compiler-sfc@3.2.40", "@vue/compiler-sfc@^3.2.38":
+"@vue/compiler-sfc@3.2.40", "@vue/compiler-sfc@^3.2.40":
   version "3.2.40"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.40.tgz#61823283efc84d25d9d2989458f305d32a2ed141"
   integrity sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==
@@ -117,6 +116,11 @@
     "@vue/compiler-dom" "3.2.40"
     "@vue/shared" "3.2.40"
 
+"@vue/devtools-api@^6.1.4":
+  version "6.4.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.4.tgz#0b024fc8ca91bb4b6035abaf53c5aecc17119b3b"
+  integrity sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw==
+
 "@vue/reactivity-transform@3.2.40":
   version "3.2.40"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.40.tgz#dc24b9074b26f0d9dd2034c6349f5bb2a51c86ac"
@@ -128,7 +132,7 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.2.40", "@vue/reactivity@^3.2.38":
+"@vue/reactivity@3.2.40", "@vue/reactivity@^3.2.40":
   version "3.2.40"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.40.tgz#ae65496f5b364e4e481c426f391568ed7d133cca"
   integrity sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==
@@ -160,7 +164,7 @@
     "@vue/compiler-ssr" "3.2.40"
     "@vue/shared" "3.2.40"
 
-"@vue/shared@3.2.40", "@vue/shared@^3.2.38":
+"@vue/shared@3.2.40", "@vue/shared@^3.2.40":
   version "3.2.40"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.40.tgz#e57799da2a930b975321981fcee3d1e90ed257ae"
   integrity sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==
@@ -427,13 +431,6 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
 magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -519,13 +516,6 @@ sass@^1.55.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-semver@^7.3.7:
-  version "7.3.8"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
-  dependencies:
-    lru-cache "^6.0.0"
-
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -570,6 +560,13 @@ vite@^3.1.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-router@*, vue-router@4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
+  integrity sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==
+  dependencies:
+    "@vue/devtools-api" "^6.1.4"
+
 vue-template-compiler@^2.7.10:
   version "2.7.10"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz#9e20f35b2fdccacacf732dd7dedb49bf65f4556b"
@@ -578,13 +575,13 @@ vue-template-compiler@^2.7.10:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-vue-tsc@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.0.0.tgz#adb844b08f55e962c43f33e453f8185090ac7570"
-  integrity sha512-QtQunVlF8SLs75s9FTCOOLXx6Fb5ccN6r3xDT4rUzznPzP6xfRC/iWhrJImEBRz74fhqXWPUMfujcmibnwYyXw==
+vue-tsc@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.0.6.tgz#8a0956dbf558b269f1f024b1e014be7cd10bd28c"
+  integrity sha512-iOoGwia1k51CifMVk5QOMTctQxubwV+32l+V3j+p2RhssRLmMTNGrl7ioXINcvpe1/M7LcUBnO/96im/BdxWCg==
   dependencies:
-    "@volar/vue-language-core" "1.0.0"
-    "@volar/vue-typescript" "1.0.0"
+    "@volar/vue-language-core" "1.0.6"
+    "@volar/vue-typescript" "1.0.6"
 
 vue@^3.2.37:
   version "3.2.40"
@@ -596,8 +593,3 @@ vue@^3.2.37:
     "@vue/runtime-dom" "3.2.40"
     "@vue/server-renderer" "3.2.40"
     "@vue/shared" "3.2.40"
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==