From 83aa054a704f609bfbc44f7c2bbd6333dbb9724b Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 16 Oct 2022 20:01:44 +0200
Subject: [PATCH] v0.4

---
 .firebase/hosting.ZGlzdA.cache                |   8 +-
 package.json                                  |  11 +-
 src/App.vue                                   | 100 +---
 src/components/Pragotron.vue                  | 541 ------------------
 src/main.ts                                   |   8 +-
 src/router.ts                                 |  23 +
 .../{IStationData.ts => ISceneryData.ts}      |   2 +-
 src/types/ITableRow.ts                        |   1 +
 src/views/HomeView.vue                        |  72 +++
 src/views/PragotronView.vue                   | 511 +++++++++++++++++
 yarn.lock                                     | 195 ++++---
 11 files changed, 766 insertions(+), 706 deletions(-)
 delete mode 100644 src/components/Pragotron.vue
 create mode 100644 src/router.ts
 rename src/types/{IStationData.ts => ISceneryData.ts} (67%)
 create mode 100644 src/views/HomeView.vue
 create mode 100644 src/views/PragotronView.vue

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 7f49412..17ccd4c 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,4 +1,4 @@
-vite.svg,1665228976584,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
-assets/index.694f84f0.css,1665604158056,07c0ac3ec502686b9c25bd54b4db96e1923049ecdd45f0c223d6a9165734aac0
-index.html,1665604158056,e72c5dec31089b141e62f438da34ad4af037ad20e9edc3fcd4041e1143a278cd
-assets/index.2d867ca1.js,1665604158056,2bc5e40da1c762576b1c14113f33b21203eaa404a74184f941fd171f8b9298bc
+index.html,1665605211157,71f3e676d9ddbcafd2a6e4773a9c2a757a0bd51e884f632dbe7351c16b2f9674
+logo.svg,1665605133131,6441e7d33cf714ef1cb9dc7fbb816cf2f5340d343ef518f7856619002f1ab48e
+assets/index.cbb2a49f.css,1665605211157,f02460bf3d64c35cf17b4c9e9c46a7d9d32680d22b006d76bfda4e0abb31b5be
+assets/index.83548fb0.js,1665605211157,c2fb42de2fa35be75163458fd213617b9c60e168a32bb524d42ff3d7ceb72e25
diff --git a/package.json b/package.json
index 56f573c..a7cf226 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pragotron-td2",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,15 +10,16 @@
     "deploy": "yarn build && firebase deploy --only hosting"
   },
   "dependencies": {
-    "@types/vue-router": "^2.0.0",
     "sass": "^1.55.0",
-    "vue": "^3.2.37",
+    "vue": "^3.2.41",
     "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",
+    "@types/vue-router": "^2.0.0",
     "typescript": "^4.6.4",
-    "vite": "^3.1.0",
-    "vue-tsc": "^1.0.6"
+    "vite": "^3.1.8",
+    "vue-tsc": "^1.0.8"
   }
 }
+
diff --git a/src/App.vue b/src/App.vue
index 0e7addd..ae3209f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,26 @@
 <template>
   <div class="app_content">
     <nav class="navbar">
-      <div v-if="!selectedStation">
+      <router-link to="/">
         Pragotron TD2 <span class="text--accent">v{{ VERSION }}</span> <sup>by Spythere</sup>
-      </div>
-      <button v-else class="back-btn btn--text" @click="selectedStation = null">&lt; powrót</button>
+      </router-link>
+      <!-- <button v-else class="back-btn btn--text" @click="selectedStation = null">&lt; powrót</button> -->
     </nav>
 
     <main>
-      <div class="scenery-selector" v-if="!selectedStation">
-        <h1>Scenerie <span class="text--accent">online</span></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 />
+      <router-view v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component" :key="$route.path"></component>
+        </keep-alive>
+      </router-view>
     </main>
   </div>
 </template>
 
 <script lang="ts">
-import { provide, Ref, ref } from 'vue';
 import { defineComponent } from '@vue/runtime-core';
-import PragotronVue from './components/Pragotron.vue';
-import IStationData from './types/IStationData';
-import { ISceneryResponse } from './types/ISceneryReponse';
-import { IOnlineStationsResponse } from './types/IOnlineStationsResponse';
+import PragotronVue from './views/PragotronView.vue';
+import IStationData from './types/ISceneryData';
 
 import packageInfo from '../package.json';
 
@@ -41,22 +29,6 @@ export default defineComponent({
     PragotronVue,
   },
 
-  setup() {
-    const mockStation: IStationData = {
-      stationName: 'Czermin',
-      nameAbbreviation: '',
-      stationCheckpoints: [],
-    };
-
-    const selectedStation = ref(null) as Ref<null | IStationData>;
-
-    provide('selectedStation', selectedStation);
-
-    return {
-      selectedStation,
-    };
-  },
-
   data: () => ({
     onlineStations: [] as IStationData[],
     dataLoaded: false,
@@ -65,47 +37,8 @@ export default defineComponent({
   }),
 
   async mounted() {
-    const stationDataArray: ISceneryResponse[] = await (
-      await fetch(`${import.meta.env.VITE_STACJOWNIK_API_URL}/api/getSceneries`)
-    ).json();
-
-    const stationDataJSON = stationDataArray.map((stationData) => ({
-      stationName: stationData.name,
-      stationCheckpoints: stationData.checkpoints?.length > 0 ? stationData.checkpoints.split(';') : [stationData.name],
-      nameAbbreviation: '',
-    }));
-
-    const stationsAPIResponse: IOnlineStationsResponse = await (
-      await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')
-    ).json();
-
-    this.onlineStations = stationsAPIResponse.message
-      .reduce((acc, station) => {
-        if (station.region != 'eu') return acc;
-        if (!station.isOnline) return acc;
-
-        const savedStationData = stationDataJSON.find((data) => data.stationName == station.stationName);
-
-        if (savedStationData) acc.push(savedStationData);
-        else
-          acc.push({
-            stationName: station.stationName,
-            nameAbbreviation: '',
-            stationCheckpoints: [],
-          });
-
-        return acc;
-      }, [] as IStationData[])
-      .sort((s1, s2) => (s1.stationName > s2.stationName ? 1 : -1));
-
     this.dataLoaded = true;
   },
-
-  methods: {
-    handleClick(station: IStationData) {
-      this.selectedStation = station;
-    },
-  },
 });
 </script>
 
@@ -150,16 +83,9 @@ main {
   align-items: center;
 }
 
-ul.scenery-list {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  padding: 1em;
-  margin: 0 auto;
-
-  font-size: 1.3em;
-  max-width: 1000px;
+a {
+  text-decoration: none;
+  color: white;
 }
 </style>
 
diff --git a/src/components/Pragotron.vue b/src/components/Pragotron.vue
deleted file mode 100644
index fe184a8..0000000
--- a/src/components/Pragotron.vue
+++ /dev/null
@@ -1,541 +0,0 @@
-<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>{{ selectedCheckpointName.toUpperCase() }}</div>
-        </span>
-
-        <div class="headers">
-          <span>GODZ.</span>
-          <span>POCIĄG</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 filledTable" :key="i">
-          <div class="row-content">
-            <span class="departure-date">
-              <transition name="slot-anim" mode="out-in">
-                <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>
-
-            <span class="route-via">
-              <transition name="slot-anim" mode="out-in">
-                <div class="slider-slot" :key="departure.tableValues.routeVia">
-                  {{ abbrevStationName(departure.tableValues.routeVia) }}
-                </div>
-              </transition>
-            </span>
-
-            <span class="route-to">
-              <transition name="slot-anim" mode="out-in">
-                <div class="slider-slot" :key="departure.tableValues.routeTo">
-                  {{ abbrevStationName(departure.tableValues.routeTo) }}
-                </div>
-              </transition>
-            </span>
-
-            <span class="delay">
-              <transition name="slot-anim" mode="out-in">
-                <div class="slider-slot" :key="departure.delayMinutes">
-                  {{ departure.delayMinutes > 0 ? departure.delayMinutes + ' min' : '' }}
-                </div>
-              </transition>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-/* eslint-disable */
-
-import { defineComponent, inject, reactive, Ref } from 'vue';
-
-import stationAbbrevsJSON from '../data/stationAbbrevs.json';
-import routeValues from '../data/routeValues.json';
-
-import StationData from '../types/IStationData';
-import { ITimetableStop, ITrainResponse } from '../types/ITrainResponse';
-import { ITableRow } from '../types/ITableRow';
-
-const stationAbbrevs: { [key: string]: string } = stationAbbrevsJSON;
-
-const departureInfoEmptyObj: ITableRow = {
-  timetableId: -1,
-
-  routeTo: '',
-  routeVia: '',
-
-  trainNumber: '',
-
-  date: new Date(0),
-  dateDigits: [' ', ' ', ' ', ' '],
-
-  arrivalTimestamp: 0,
-  departureTimestamp: 0,
-  checkpointName: '',
-
-  delayMinutes: 0,
-
-  tableValues: {
-    routeTo: '',
-    routeVia: '',
-
-    currentRouteToIndex: 0,
-    currentRouteViaIndex: 0,
-
-    dateDigits: [' ', ' ', ' ', ' '],
-  },
-};
-
-export default defineComponent({
-  data: () => ({
-    currentStationName: '',
-
-    includeNonPassenger: true,
-    includeArrivals: true,
-
-    apiTrainData: [] as ITrainResponse[],
-
-    lastRefreshTime: 0,
-    updatedDepartureList: [] as ITableRow[],
-
-    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() {
-    const selectedStation = inject('selectedStation') as Ref<StationData>;
-
-    return {
-      selectedStation,
-    };
-  },
-
-  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();
-    },
-
-    update(time: number) {
-      if (time >= this.lastRefreshTime + 125) {
-        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[(dep.tableValues.currentRouteToIndex) % this.departureRoutes.length];
-        }
-
-        if (dep.tableValues.routeVia.toLowerCase() != dep.routeVia.toLowerCase()) {
-          dep.tableValues.routeVia =
-            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];
-        });
-      });
-    },
-
-    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.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`)
-      ).json();
-
-      if (!trainsAPIResponse) return;
-
-      this.apiTrainData = trainsAPIResponse;
-      // this.refreshTable(trainsAPIResponse);
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-/* ****** ANIMATION ****** */
-
-.slot-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 50ms ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: rotateX(90deg) perspective(200px);
-  }
-}
-
-.digit-slot-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-/* ************** */
-
-.filters {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.25em 0;
-  gap: 0.5em;
-}
-
-.wrapper {
-  width: 1200px;
-  height: 650px;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.top-pane {
-  background-color: white;
-  color: black;
-  height: 180px;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  .title {
-    padding: 0;
-
-    font-size: 3.5em;
-  }
-
-  .headers {
-    display: grid;
-    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
-    gap: 0 10px;
-    padding: 0 10px;
-
-    text-align: center;
-
-    font-size: 1.35em;
-  }
-}
-
-.table {
-  background: white;
-  flex-grow: 1;
-
-  display: grid;
-  grid-template-rows: repeat(7, 1fr);
-  gap: 5px 0;
-}
-
-.row {
-  &-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
-    gap: 0 10px;
-    padding: 0 10px;
-
-    height: 100%;
-
-    align-items: center;
-    color: white;
-    font-size: 1.2em;
-
-    background: #1a1a1a;
-
-    span {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-.departure-date {
-  background: black;
-
-  span {
-    background: black;
-    height: 2em;
-    line-height: 2em;
-    flex-grow: 2;
-    width: 100%;
-  }
-}
-
-.slider-slot {
-  background: #010101;
-  width: 100%;
-  height: 2em;
-  line-height: 2em;
-}
-</style>
diff --git a/src/main.ts b/src/main.ts
index 01433bc..8bda916 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,6 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+createApp(App).use(router).mount('#app');
 
-createApp(App).mount('#app')
diff --git a/src/router.ts b/src/router.ts
new file mode 100644
index 0000000..f797d35
--- /dev/null
+++ b/src/router.ts
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+
+import HomeView from './views/HomeView.vue';
+import PragotronView from './views/PragotronView.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: HomeView,
+  },
+  {
+    path: '/board',
+    component: PragotronView,
+    props: (route) => ({ stationName: route.query.name }),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/types/IStationData.ts b/src/types/ISceneryData.ts
similarity index 67%
rename from src/types/IStationData.ts
rename to src/types/ISceneryData.ts
index 149b3d8..915508b 100644
--- a/src/types/IStationData.ts
+++ b/src/types/ISceneryData.ts
@@ -1,4 +1,4 @@
-export default interface IStationData {
+export default interface ISceneryData {
   stationName: string;
   nameAbbreviation: string;
   stationCheckpoints: string[];
diff --git a/src/types/ITableRow.ts b/src/types/ITableRow.ts
index 38729c4..0f8da1f 100644
--- a/src/types/ITableRow.ts
+++ b/src/types/ITableRow.ts
@@ -4,6 +4,7 @@ interface ITableRowValues {
 
     currentRouteToIndex: number;
     currentRouteViaIndex: number;
+    currentDateDigitIndex: number;
 
     dateDigits: string[],
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..29f82fd
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="home-view">
+    <div class="scenery-selector">
+      <h1>Scenerie <span class="text--accent">online</span></h1>
+
+      <ul class="scenery-list" v-if="dataLoaded">
+        <li v-for="(stationName, i) in onlineStations">
+          <span v-if="i > 0">&bull;</span>
+          <button class="btn--text" @click="handleClick(stationName)">
+            {{ stationName }}
+          </button>
+        </li>
+      </ul>
+
+      <div v-else>Ładowanie listy aktywnych scenerii...</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IOnlineStationsResponse } from '../types/IOnlineStationsResponse';
+
+export default defineComponent({
+  data() {
+    return {
+      onlineStations: [] as string[],
+      dataLoaded: false,
+    };
+  },
+
+  async mounted() {
+    const stationsAPIResponse: IOnlineStationsResponse = await (
+      await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')
+    ).json();
+
+    this.dataLoaded = true;
+
+    this.onlineStations = stationsAPIResponse.message
+      .reduce((acc, station) => {
+        if (station.region != 'eu') return acc;
+        if (!station.isOnline) return acc;
+
+        acc.push(station.stationName);
+
+        return acc;
+      }, [] as string[])
+      .sort((s1, s2) => (s1 > s2 ? 1 : -1));
+  },
+
+  methods: {
+    handleClick(stationName: string) {
+      this.$router.push(`/board?name=${stationName.replace(/ /g, '_')}`);
+      // this.selectedStation = station;
+    },
+  },
+});
+</script>
+
+<style ;ang="scss" scoped>
+ul.scenery-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  padding: 1em;
+  margin: 0 auto;
+
+  font-size: 1.3em;
+  max-width: 1000px;
+}
+</style>
diff --git a/src/views/PragotronView.vue b/src/views/PragotronView.vue
new file mode 100644
index 0000000..ef8b8e6
--- /dev/null
+++ b/src/views/PragotronView.vue
@@ -0,0 +1,511 @@
+<template>
+  <div class="pragotron">
+    <div class="pragotron_content">
+      <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>{{ selectedCheckpointName.toUpperCase() }}</div>
+          </span>
+          <div class="headers">
+            <span>GODZ.</span>
+            <span>POCIĄG</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 filledTable" :key="i">
+            <div class="row-content">
+              <span class="departure-date">
+                <transition name="slot-anim" mode="out-in">
+                  <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>
+              <span class="route-via">
+                <transition name="slot-anim" mode="out-in">
+                  <div class="slider-slot" :key="departure.tableValues.routeVia">
+                    {{ abbrevStationName(departure.tableValues.routeVia) }}
+                  </div>
+                </transition>
+              </span>
+              <span class="route-to">
+                <transition name="slot-anim" mode="out-in">
+                  <div class="slider-slot" :key="departure.tableValues.routeTo">
+                    {{ abbrevStationName(departure.tableValues.routeTo) }}
+                  </div>
+                </transition>
+              </span>
+              <span class="delay">
+                <transition name="slot-anim" mode="out-in">
+                  <div class="slider-slot" :key="departure.delayMinutes">
+                    {{ departure.delayMinutes > 0 ? departure.delayMinutes + ' min' : '' }}
+                  </div>
+                </transition>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import stationAbbrevsJSON from '../data/stationAbbrevs.json';
+import routeValues from '../data/routeValues.json';
+
+import { ITimetableStop, ITrainResponse } from '../types/ITrainResponse';
+import { ITableRow } from '../types/ITableRow';
+import { ISceneryResponse } from '../types/ISceneryReponse';
+import ISceneryData from '../types/ISceneryData';
+
+const stationAbbrevs: { [key: string]: string } = stationAbbrevsJSON;
+
+const departureInfoEmptyObj: ITableRow = {
+  timetableId: -1,
+
+  routeTo: '',
+  routeVia: '',
+
+  trainNumber: '',
+
+  date: new Date(0),
+  dateDigits: [' ', ' ', ' ', ' '],
+
+  arrivalTimestamp: 0,
+  departureTimestamp: 0,
+  checkpointName: '',
+
+  delayMinutes: 0,
+
+  tableValues: {
+    routeTo: ' ',
+    routeVia: ' ',
+
+    currentRouteToIndex: 0,
+    currentRouteViaIndex: 0,
+    currentDateDigitIndex: 0,
+
+    dateDigits: [' ', ' ', ' ', ' '],
+  },
+};
+
+export default defineComponent({
+  props: {
+    stationName: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    currentStationName: '',
+    sceneriesInfo: [] as ISceneryData[],
+
+    includeNonPassenger: true,
+    includeArrivals: true,
+
+    apiTrainData: [] as ITrainResponse[],
+
+    animationFrameIndex: 0,
+    intervalIndex: 0,
+
+    lastRefreshTime: 0,
+
+    departureTable: 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: '',
+  }),
+
+  async created() {
+    await this.fetchSceneryInfo();
+    this.selectDefaultCheckpoint();
+  },
+
+  activated() {
+    this.selectDefaultCheckpoint();
+    this.shuffleRoutes();
+    this.fetchDepartureList();
+
+    this.intervalIndex = setInterval(() => {
+      this.fetchDepartureList();
+    }, 30000);
+
+    this.animationFrameIndex = requestAnimationFrame(this.update);
+  },
+
+  deactivated() {
+    cancelAnimationFrame(this.animationFrameIndex);
+    clearInterval(this.intervalIndex);
+  },
+
+  computed: {
+    selectedStation() {
+      return this.sceneriesInfo.find(({ stationName }) => stationName == this.stationName.replace(/_/g, ' '));
+    },
+
+    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,
+              currentDateDigitIndex: 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.departureTable.length; i++) {
+        if (i <= filteredData.length - 1) {
+          const updateInfo = filteredData[i];
+          const existingInfo = this.departureTable[i];
+
+          this.departureTable[i] = { ...updateInfo };
+          this.departureTable[i].tableValues.routeTo = existingInfo.routeTo;
+          this.departureTable[i].tableValues.routeVia = existingInfo.routeVia;
+          this.departureTable[i].tableValues.dateDigits = [...existingInfo.tableValues.dateDigits];
+        } else {
+          this.departureTable[i] = {
+            ...this.departureTable[i],
+            timetableId: -1,
+
+            routeTo: '',
+            routeVia: '',
+
+            trainNumber: '',
+
+            date: new Date(0),
+            dateDigits: [' ', ' ', ' ', ' '],
+
+            arrivalTimestamp: 0,
+            departureTimestamp: 0,
+            checkpointName: '',
+
+            delayMinutes: 0,
+          };
+        }
+      }
+
+      return this.departureTable;
+    },
+  },
+
+  methods: {
+    async fetchSceneryInfo() {
+      const sceneryInfoRes: ISceneryResponse[] = await (
+        await fetch(`${import.meta.env.VITE_STACJOWNIK_API_URL}/api/getSceneries`)
+      ).json();
+
+      this.sceneriesInfo = sceneryInfoRes.map((stationData) => ({
+        stationName: stationData.name,
+        stationCheckpoints:
+          stationData.checkpoints?.length > 0 ? stationData.checkpoints.split(';') : [stationData.name],
+        nameAbbreviation: '',
+      }));
+    },
+
+    selectDefaultCheckpoint() {
+      this.selectedCheckpointName = this.selectedStation?.stationCheckpoints[0] || this.stationName;
+    },
+
+    abbrevStationName(name: string) {
+      return (name in stationAbbrevs ? stationAbbrevs[name] : name).toUpperCase();
+    },
+
+    update(time: number) {
+      if (time >= this.lastRefreshTime + 125) {
+        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.departureTable.forEach((dep, i) => {
+        if (dep.tableValues.routeTo.toLowerCase() != dep.routeTo.toLowerCase()) {
+          dep.tableValues.routeTo = this.departureRoutes[dep.tableValues.currentRouteToIndex];
+
+          dep.tableValues.currentRouteToIndex = (dep.tableValues.currentRouteToIndex + 1) % this.departureRoutes.length;
+        }
+
+        if (dep.tableValues.routeVia.toLowerCase() != dep.routeVia.toLowerCase()) {
+          dep.tableValues.routeVia = this.departureRoutes[dep.tableValues.currentRouteViaIndex];
+
+          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[dep.tableValues.currentDateDigitIndex];
+        });
+
+        // Poprawić do wszystkich
+        dep.tableValues.currentDateDigitIndex = (dep.tableValues.currentDateDigitIndex + 1) % this.dateDigits.length;
+      });
+    },
+
+    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.sort(() => Math.random() - 0.5);
+    },
+
+    async fetchDepartureList() {
+      const trainsAPIResponse: ITrainResponse[] = await (
+        await fetch(`${import.meta.env.VITE_STACJOWNIK_API_URL}/api/getActiveTrainList`)
+      ).json();
+
+      if (!trainsAPIResponse) return;
+
+      this.apiTrainData = trainsAPIResponse;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+/* ****** ANIMATION ****** */
+
+.slot-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 50ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: rotateX(90deg) perspective(200px);
+  }
+}
+
+.digit-slot-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+/* ************** */
+
+.filters {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25em 0;
+  gap: 0.5em;
+}
+
+.wrapper {
+  width: 1200px;
+  height: 650px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.top-pane {
+  background-color: white;
+  color: black;
+  height: 180px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .title {
+    padding: 0;
+
+    font-size: 3.5em;
+  }
+
+  .headers {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
+    gap: 0 10px;
+    padding: 0 10px;
+
+    text-align: center;
+
+    font-size: 1.35em;
+  }
+}
+
+.table {
+  background: white;
+  flex-grow: 1;
+
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  gap: 5px 0;
+}
+
+.row {
+  &-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
+    gap: 0 10px;
+    padding: 0 10px;
+
+    height: 100%;
+
+    align-items: center;
+    color: white;
+    font-size: 1.2em;
+
+    background: #1a1a1a;
+
+    span {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.departure-date {
+  background: black;
+
+  span {
+    background: black;
+    height: 2em;
+    line-height: 2em;
+    flex-grow: 2;
+    width: 100%;
+  }
+}
+
+.slider-slot {
+  background: #010101;
+  width: 100%;
+  height: 2em;
+  line-height: 2em;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index e0ca425..86292a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,36 +29,36 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.1.2.tgz#3cd52114e8871a0b5e7bd7d837469c032e503036"
   integrity sha512-3zxKNlvA3oNaKDYX0NBclgxTQ1xaFdL7PzwF6zj9tGFziKwmBa3Q/6XcJQxudlT81WxDjEhHmevvIC4Orc1LhQ==
 
-"@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==
+"@volar/language-core@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.0.8.tgz#ed923e13d626102db6f82be03cfad22b0e5fdeae"
+  integrity sha512-uxYSOqBk8ZFSzGjUIPOBEFPOg8F3CE6cLO5meK95DODGIlUlPytGiy9sy8QZ9w7RpUH4XMOX3MH/G48SLgP07A==
   dependencies:
-    "@volar/source-map" "1.0.6"
+    "@volar/source-map" "1.0.8"
     "@vue/reactivity" "^3.2.40"
     muggle-string "^0.1.0"
 
-"@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==
+"@volar/source-map@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.0.8.tgz#3e1a6f9ae652b665e6f3eef7c6291b48ac1aa6e6"
+  integrity sha512-uKMe+alyfl1Abs5SviKejFoe7x9g6jDPVpVt63Tet4qn1Ziy7tFsvtCpM2Y1Ko5qw2nLIeloLslPqm9/gmbBLQ==
   dependencies:
     muggle-string "^0.1.0"
 
-"@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==
+"@volar/typescript@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.0.8.tgz#45674506471c3ee8cfabb0d98f75f8e2b2f18936"
+  integrity sha512-2oY1Apvzcs/5tAn7p1tRlDxNgal5ezaK0h9cutcWALeimsaQBAEE2NAirCrLMHl8DneuDce0tzJqHaQeHw9RmQ==
   dependencies:
-    "@volar/language-core" "1.0.6"
+    "@volar/language-core" "1.0.8"
 
-"@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==
+"@volar/vue-language-core@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.0.8.tgz#2f888309aee80b6853ba5181f82b772e21f3b13e"
+  integrity sha512-cXb7oTybxcm1vpz003agdYQHyxij7UAaSub60d7W1aMWpqb2iaCbVaq9izgQFlrpC4/JnVs+cJPb/Q6fAUVxBg==
   dependencies:
-    "@volar/language-core" "1.0.6"
-    "@volar/source-map" "1.0.6"
+    "@volar/language-core" "1.0.8"
+    "@volar/source-map" "1.0.8"
     "@vue/compiler-dom" "^3.2.40"
     "@vue/compiler-sfc" "^3.2.40"
     "@vue/reactivity" "^3.2.40"
@@ -66,13 +66,13 @@
     minimatch "^5.1.0"
     vue-template-compiler "^2.7.10"
 
-"@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==
+"@volar/vue-typescript@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-1.0.8.tgz#34cc253b65d5992cb411d110db56c55037c49956"
+  integrity sha512-6jBvA7iwBkRqS2VQx2gLJgfLcF3hcODyJ6Lmiw2tN8D/LVfFCovvzJgPvIQb9Y4i+rha1Y0cpsYOUt9XW2Z7ZA==
   dependencies:
-    "@volar/typescript" "1.0.6"
-    "@volar/vue-language-core" "1.0.6"
+    "@volar/typescript" "1.0.8"
+    "@volar/vue-language-core" "1.0.8"
 
 "@vue/compiler-core@3.2.40":
   version "3.2.40"
@@ -84,6 +84,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.41.tgz#fb5b25f23817400f44377d878a0cdead808453ef"
+  integrity sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@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"
@@ -92,7 +102,31 @@
     "@vue/compiler-core" "3.2.40"
     "@vue/shared" "3.2.40"
 
-"@vue/compiler-sfc@3.2.40", "@vue/compiler-sfc@^3.2.40":
+"@vue/compiler-dom@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
+  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
+  dependencies:
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
+
+"@vue/compiler-sfc@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
+  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/reactivity-transform" "3.2.41"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@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==
@@ -116,6 +150,14 @@
     "@vue/compiler-dom" "3.2.40"
     "@vue/shared" "3.2.40"
 
+"@vue/compiler-ssr@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz#344f564d68584b33367731c04ffc949784611fcb"
+  integrity sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==
+  dependencies:
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/shared" "3.2.41"
+
 "@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"
@@ -132,43 +174,66 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.2.40", "@vue/reactivity@^3.2.40":
+"@vue/reactivity-transform@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz#9ff938877600c97f646e09ac1959b5150fb11a0c"
+  integrity sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/reactivity@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.41.tgz#0ad3bdf76d76822da1502dc9f394dafd02642963"
+  integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==
+  dependencies:
+    "@vue/shared" "3.2.41"
+
+"@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==
   dependencies:
     "@vue/shared" "3.2.40"
 
-"@vue/runtime-core@3.2.40":
-  version "3.2.40"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.40.tgz#e814358bf1b0ff6d4a6b4f8f62d9f341964fb275"
-  integrity sha512-U1+rWf0H8xK8aBUZhnrN97yoZfHbjgw/bGUzfgKPJl69/mXDuSg8CbdBYBn6VVQdR947vWneQBFzdhasyzMUKg==
+"@vue/runtime-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.41.tgz#775bfc00b3fadbaddab77138f23322aee3517a76"
+  integrity sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==
   dependencies:
-    "@vue/reactivity" "3.2.40"
-    "@vue/shared" "3.2.40"
+    "@vue/reactivity" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/runtime-dom@3.2.40":
-  version "3.2.40"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.40.tgz#975119feac5ab703aa9bbbf37c9cc966602c8eab"
-  integrity sha512-AO2HMQ+0s2+MCec8hXAhxMgWhFhOPJ/CyRXnmTJ6XIOnJFLrH5Iq3TNwvVcODGR295jy77I6dWPj+wvFoSYaww==
+"@vue/runtime-dom@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz#cdf86be7410f7b15c29632a96ce879e5b4c9ab92"
+  integrity sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==
   dependencies:
-    "@vue/runtime-core" "3.2.40"
-    "@vue/shared" "3.2.40"
+    "@vue/runtime-core" "3.2.41"
+    "@vue/shared" "3.2.41"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.40":
-  version "3.2.40"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.40.tgz#55eaac31f7105c3907e1895129bf4efb6b0ce393"
-  integrity sha512-gtUcpRwrXOJPJ4qyBpU3EyxQa4EkV8I4f8VrDePcGCPe4O/hd0BPS7v9OgjIQob6Ap8VDz9G+mGTKazE45/95w==
+"@vue/server-renderer@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.41.tgz#ca64552c05878f94e8d191ac439141c06c0fb2ad"
+  integrity sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==
   dependencies:
-    "@vue/compiler-ssr" "3.2.40"
-    "@vue/shared" "3.2.40"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/shared" "3.2.41"
 
 "@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==
 
+"@vue/shared@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
+  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -548,10 +613,10 @@ typescript@^4.6.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-vite@^3.1.0:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.6.tgz#4c6db3000326342c918204a42a130fb3ffed2414"
-  integrity sha512-qMXIwnehvvcK5XfJiXQUiTxoYAEMKhM+jqCY6ZSTKFBKu1hJnAKEzP3AOcnTerI0cMZYAaJ4wpW1wiXLMDt4mA==
+vite@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.8.tgz#fa29144167d19b773baffd65b3972ea4c12359c9"
+  integrity sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==
   dependencies:
     esbuild "^0.15.9"
     postcss "^8.4.16"
@@ -575,21 +640,21 @@ vue-template-compiler@^2.7.10:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-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==
+vue-tsc@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.0.8.tgz#6f24e082878d1f4960dd89fe66fe3b70f6cc2ed5"
+  integrity sha512-+0sJ+QVH7SHLt8mV/uIw4xlHDk1mWigZkMFugfZTv8rlHpM3S2tCVZ0BWEGclT/0rKdO8j+St+mljpvhWPN/eQ==
   dependencies:
-    "@volar/vue-language-core" "1.0.6"
-    "@volar/vue-typescript" "1.0.6"
+    "@volar/vue-language-core" "1.0.8"
+    "@volar/vue-typescript" "1.0.8"
 
-vue@^3.2.37:
-  version "3.2.40"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.40.tgz#23f387f6f9b3a0767938db6751e4fb5900f0ee34"
-  integrity sha512-1mGHulzUbl2Nk3pfvI5aXYYyJUs1nm4kyvuz38u4xlQkLUn1i2R7nDbI4TufECmY8v1qNBHYy62bCaM+3cHP2A==
+vue@^3.2.41:
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.41.tgz#ed452b8a0f7f2b962f055c8955139c28b1c06806"
+  integrity sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.40"
-    "@vue/compiler-sfc" "3.2.40"
-    "@vue/runtime-dom" "3.2.40"
-    "@vue/server-renderer" "3.2.40"
-    "@vue/shared" "3.2.40"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-sfc" "3.2.41"
+    "@vue/runtime-dom" "3.2.41"
+    "@vue/server-renderer" "3.2.41"
+    "@vue/shared" "3.2.41"