Dodano szukanie tabliczek

src/App.vue

@@ -17,8 +17,6 @@ import PragotronVue from './components/Pragotron.vue';
 import { StationResponse } from '@/interfaces/StationAPI';
 import StationData from '@/interfaces/StationData';
 
-import stationNameAbbrevs from '@/data/stationAbbrevs.json';
-
 export default defineComponent({
   components: {
     PragotronVue,
@@ -26,7 +24,7 @@ export default defineComponent({
 
   setup() {
     const mockStation: StationData = {
-      stationName: 'Lisków',
+      stationName: 'Czermin',
       nameAbbreviation: '',
       stationCheckpoints: [],
     };
@@ -71,7 +69,7 @@ export default defineComponent({
     const stationDataJSON = stationDataArray.map((stationData) => ({
       stationName: stationData[0] as string,
       stationCheckpoints: stationData[14] ? (stationData[14] as string).split(';') : [],
-      nameAbbreviation: stationNameAbbrevs.find((name) => (stationData[0] as string).includes(name[0]))?.[0] || '',
+      nameAbbreviation: '',
     }));
 
     const stationsAPIResponse: StationResponse = await (

src/components/Pragotron.vue

@@ -15,24 +15,61 @@
 
       <div class="table">
         <div class="row" v-for="(departure, i) in departureList" :key="i">
-          <div class="row-content" v-if="!departure"></div>
-          <div class="row-content" v-else>
-            <span class="destination">
-              <div class="station-slider-slot">{{ departure.routeTo.toUpperCase() }}</div>
+          <div class="row-content">
+            <span class="route-to">
+              <transition name="slot-anim" mode="out-in">
+                <div class="slider-slot" :key="departure.routeTo">
+                  {{ departure.routeTo.toUpperCase() }}
+                </div>
+              </transition>
             </span>
-            <span class="via-station">
-              <div class="station-slider-slot">{{ departure.routeVia.toUpperCase() }}</div>
+
+            <span class="route-via">
+              <transition name="slot-anim" mode="out-in">
+                <div class="slider-slot" :key="departure.routeVia">{{ departure.routeVia.toUpperCase() }}</div>
+              </transition>
             </span>
+
             <span class="train-class">
-              <div class="train-slider-slot">{{ departure.trainType }} {{ departure.trainNo }}</div>
+              <transition name="slot-anim" mode="out-in">
+                <div class="slider-slot" :key="departure.trainNumber">{{ departure.trainNumber }}</div>
+              </transition>
             </span>
+
             <span class="departure-date">
-              <span class="hours-slot"></span>
-              <span class="minutes-slot"></span>
-              <span class="seconds-slot"></span>
+              <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>
+              </transition>
             </span>
+
             <span class="delay">
-              <div class="delay-slider-slot" v-if="departure.delayMinutes > 0">{{ departure.delayMinutes }} min</div>
+              <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>
@@ -46,6 +83,9 @@
 
 import { defineComponent, inject, Ref } from 'vue';
 
+import stationAbbrevs from '@/data/stationAbbrevs.json';
+import routeValues from '@/data/routeValues.json';
+
 import { TrainResponse, TrainInfo } from '@/interfaces/TrainAPI';
 import { TimetableResponse, TimetableInfo, TimetableStopInfo } from '@/interfaces/TimetableAPI';
 import StationData from '@/interfaces/StationData';
@@ -56,16 +96,26 @@ interface DepartureInfo {
   routeTo: string;
   routeVia: string;
 
-  trainNo: number;
-  trainType: string;
+  trainNumber: string;
+
   departureDate: Date;
+  departureDigits: string[];
+
   delayMinutes: number;
+
+  currentRouteTo: string;
+  currentRouteVia?: string;
 }
 
 export default defineComponent({
   data: () => ({
     currentStationName: '',
-    departureList: new Array(8).fill(null) as (DepartureInfo | null)[],
+
+    seekingTable: [],
+
+    departureList: [] as DepartureInfo[],
+
+    stationAbbrevs: stationAbbrevs as { [key: string]: string },
   }),
 
   setup() {
@@ -78,7 +128,90 @@ export default defineComponent({
     };
   },
 
+  methods: {
+    addSeekedValue(desiredValue: string, sourceCollection: string[], startIndex: number = 0) {
+      let currentIndex = startIndex - 1;
+      let collection = [...sourceCollection];
+
+      if (!collection.includes(desiredValue)) collection.push(desiredValue);
+
+      let tempSwap, randIndex;
+      for (let i = 1; i < collection.length; i++) {
+        randIndex = Math.floor(Math.random() * collection.length);
+
+        if (randIndex == 0) randIndex++;
+
+        tempSwap = collection[i];
+
+        collection[i] = collection[randIndex];
+        collection[randIndex] = tempSwap;
+      }
+
+      console.log('Desired value:', desiredValue);
+
+      const intv = setInterval(() => {
+        const currentValue = collection[++currentIndex];
+
+        if (currentIndex > collection.length - 1) {
+          console.log('Value not found!');
+
+          clearInterval(intv);
+          return;
+        }
+
+        if (currentValue == desiredValue) {
+          console.log('Value found:', currentValue);
+
+          clearInterval(intv);
+          return;
+        }
+
+        console.log('Seeking value...', currentValue, currentIndex);
+      }, 100);
+    },
+    fillTable(responseArray: DepartureInfo[] = []) {
+      if (this.departureList.length == 0)
+        this.departureList = new Array(7).fill({
+          timetableId: -1,
+
+          routeTo: '',
+          routeVia: '',
+
+          trainNumber: '',
+
+          departureDate: new Date(0),
+          departureDigits: [],
+
+          delayMinutes: 0,
+          currentRouteTo: '',
+        });
+
+      for (let i = 0; i < this.departureList.length; i++) {
+        if (i > responseArray.length - 1)
+          this.departureList[i] = {
+            timetableId: -1,
+
+            routeTo: '',
+            routeVia: '',
+
+            trainNumber: '',
+
+            departureDate: new Date(0),
+            departureDigits: [],
+
+            delayMinutes: 0,
+            currentRouteTo: '',
+          };
+        else this.departureList[i] = { ...responseArray[i] };
+      }
+    },
+  },
+
   async mounted() {
+    this.fillTable();
+
+    this.addSeekedValue('Test', routeValues, 0);
+
     const trainsAPIResponse: TrainResponse = await (
       await fetch('https://api.td2.info.pl:9640/?method=getTrainsOnline')
     ).json();
@@ -120,31 +253,94 @@ export default defineComponent({
             return false;
           })?.pointNameRAW || '';
 
+        const departureDate = new Date(departureTime);
+
+        // [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 = route.split('|')[1];
+        const routeToAbbrev = this.stationAbbrevs[routeTo] || null;
+
         (await acc).push({
           timetableId,
-          routeTo: route.split('|')[1],
+          routeTo: routeToAbbrev || routeTo,
           routeVia,
-          trainNo,
-          trainType: trainCategoryCode,
-          departureDate: departureTime,
+          trainNumber: `${trainCategoryCode} ${trainNo}`,
+          departureDate: new Date(departureTime),
+          departureDigits,
           delayMinutes: departureDelay,
+          currentRouteTo: routeValues[0],
         });
 
         return acc;
       }, Promise.resolve([]))
     ).sort((d1, d2) => (d1.departureDate > d2.departureDate ? 1 : -1));
 
-    const sortedList = new Array(8).fill(0).map((v, i) => (i > departureList.length ? null : departureList[i]));
+    this.fillTable(departureList);
 
-    this.departureList = sortedList;
+    // const sortedList: DepartureInfo[] = new Array(8)
+    //   .fill({
+    //     timetableId: -1,
+
+    //     routeTo: '',
+    //     routeVia: '',
+
+    //     trainNumber: '',
+
+    //     departureDate: new Date(0),
+    //     departureDigits: [],
+
+    //     delayMinutes: 0,
+    //     currentRouteTo: '',
+    //   })
+    //   .map((v, i) => (i > departureList.length - 1 ? v : departureList[i]));
+
+    // setInterval(() => {
+    //   sortedList.forEach(d => {
+    //     if(d.currentRouteTo == d.routeTo)
+    //       return;
+
+    //   })
+    // }, 500);
   },
 });
 </script>
 
 <style lang="scss" scoped>
+/* ****** ANIMATION ****** */
+
+.slot-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 80ms ease-in;
+  }
+
+  &-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;
+  }
+}
+
+/* ************** */
+
 .pragotron {
   width: 1200px;
-  height: 600px;
+  height: 650px;
 
   background: black;
 }
@@ -196,7 +392,35 @@ export default defineComponent({
     color: white;
     font-size: 1.2em;
 
-    background: #333;
+    background: #1a1a1a;
+
+    span {
+      display: flex;
+      justify-content: center;
+    }
   }
 }
+
+.departure-date {
+  display: flex;
+  background: black;
+
+  .dot {
+    flex-grow: 1;
+  }
+
+  span {
+    background: black;
+    height: 2em;
+    line-height: 2em;
+    flex-grow: 2;
+  }
+}
+
+.slider-slot {
+  background: #010101;
+  width: 80%;
+  height: 2em;
+  line-height: 2em;
+}
 </style>

src/data/routeValues.json

@@ -0,0 +1 @@
+["", "Aleksandrów Kujawski","Arkadia Zdrój","Babimost","Bargowice","Bargowice Zachód","Horz Zdrój","Bełchów","Blaszki","Borki","Brakowice","Buczek","Buk","Bystra Woda","Cenorzyce Nowe","Chełmik Wołowski","Chlorkowice","Cis","Czerepy","Czermin","Dobrzyca DTA","Dobrzyca DTB","Dobrzyca DTC","Dobrzyniec","Dobrzyniec Mącice","Drzewko","Dziewoszyce","Falewo","Glinnik","Grabów Miasto","Grabów Wieś","Góra Włodowska","Głogowo","Głębce","Głęboszów","Imielin","Jordanowo","Karszynek","Kcynia","Kieły","Kolsko","Kowalewo","Krzemienice","Krzęcz","Kszęty","Kudowa Zdrój","Głowno","Domaniewice","Ozorków","Chociszew","Skrzynki","Wykno","Żywiec","Węgierska Górka","Łodygowice","Wilkowice Bystra","BB Leszczyny","Legno","Lewków","Ligota Grabowska","Ligota Trzeszcze","Lisiczki","Lisków","TEFAMA","Lisków Miasto","Lublinek","Lutol Suchy","Luzino","Lębork","Milówka","Modlinków","Motławy","Naterki","Okoń Główny","Orniki","Otwocko","Parów","Piaskowo","Pilichowice","Poreńsk","Radostowice","Radowice","Radzikowo","Rajcza","Razemsko","Rebrowo Dolne","Redlin Sudecki","Santok Zdrój","Sieniawka","Skawce","Sowi Bór","Sroka","Stare Lipowo","Przęsy","Starzynki","Stefanowo","Stryków","Strączki","Sulechów","Szadek","Sól","Tarkowo","Tartakowo","Testowo","Trawniczki","Tłoki","Wełtawa","Wielichowo Główne","Wielichowo Główne gt","Wielichowo Wieś","Wijewo","Wilczyca","Witaszyczki","Witonia","Wodnica","Wola","Wola Nowska","Wschodna","Zgierz","Zgierz Kontrewers","Zwardoń","Łask","Łaskarzew","Łebnino","Łęczyca","Żerniki","Żory"]

src/data/stationAbbrevs.json

@@ -1 +1,3 @@
-[["Aleksandrów Kujawski","Aleksandrów Kuj."],["Arkadia Zdrój","Arkadia Zdr."],["Babimost","Babimost"],["Bargowice","Bargowice"],["Bełchów","Bełchów"],["Blaszki","Blaszki"],["Borki","Borki"],["Brakowice","Brakowice"],["Buczek","Buczek"],["Buk","Buk"],["Bystra Woda","Bystra Woda"],["Cenorzyce Nowe","Cenorzyce Nowe"],["Chełmik Wołowski","Chełmik Woł."],["Chlorkowice","Chlorkowice"],["Cis","Cis"],["Czerepy","Czerepy"],["Czermin","Czermin"],["Dobrzyca Towarowa","Dobrzyca Tow."],["Dobrzyniec","Dobrzyniec"],["Drzewko","Drzewko"],["Dziewoszyce","Dziewoszyce"],["Falewo","Falewo"],["Glinnik","Glinnik"],["Grabów Miasto","Grabów Miasto"],["Góra Włodowska","Góra Włodowska"],["Głogowo","Głogowo"],["Głębce","Głębce"],["Głęboszów","Głęboszów"],["Imielin","Imielin"],["Jordanowo","Jordanowo"],["Karszynek","Karszynek"],["Kcynia","Kcynia"],["Kieły","Kieły"],["Kolsko","Kolsko"],["Kowalewo","Kowalewo"],["Krzemienice","Krzemienice"],["Krzęcz","Krzęcz"],["Kszęty","Kszęty"],["Kudowa Zdrój","Kudowa Zdrój"],["Głowno","Głowno"],["Ozorków","Ozorków"],["Skrzynki","Skrzynki"],["Żywiec","Żywiec"],["Legno","Legno"],["Lewków","Lewków"],["Ligota Grabowska","Ligota Grab."],["Lisiczki","Lisiczki"],["Lisków","Lisków"],["Lisków Miasto","Lisków Miasto"],["Lublinek","Lublinek"],["Lutol Suchy","Lutol Suchy"],["Luzino","Luzino"],["Lębork","Lębork"],["Milówka","Milówka"],["Modlinków","Modlinków"],["Motławy","Motławy"],["Naterki","Naterki"],["Okoń Główny","Okoń Gł."],["Orniki","Orniki"],["Otwocko","Otwocko"],["Parów","Parów"],["Piaskowo","Piaskowo"],["Pilichowice","Pilichowice"],["Poreńsk","Poreńsk"],["Radostowice","Radostowice"],["Radowice","Radowice"],["Radzikowo","Radzikowo"],["Rajcza","Rajcza"],["Razemsko","Razemsko"],["Rebrowo Dolne","Rebrowo Dol."],["Redlin Sudecki","Redlin Sudecki"],["Santok Zdrój","Santok Zdr."],["Sieniawka","Sieniawka"],["Skawce","Skawce"],["Sowi Bór","Sowi Bór"],["Sroka","Sroka"],["Stare Lipowo","Stare Lipowo"],["Starzynki","Starzynki"],["Stefanowo","Stefanowo"],["Stryków","Stryków"],["Strączki","Strączki"],["Sulechów","Sulechów"],["Szadek","Szadek"],["Sól","Sól"],["Tarkowo","Tarkowo"],["Tartakowo","Tartakowo"],["Testowo","Testowo"],["Trawniczki","Trawniczki"],["Tłoki","Tłoki"],["Wełtawa","Wełtawa"],["Wielichowo","Wielichowo"],["Wijewo","Wijewo"],["Wilczyca","Wilczyca"],["Witaszyczki","Witaszyczki"],["Witonia","Witonia"],["Wodnica","Wodnica"],["Wola","Wola"],["Wola Nowska","Wola Nowska"],["Wschodna","Wschodna"],["Zgierz","Zgierz"],["Zgierz Kontrewers","Zgierz Kontr."],["Zwardoń","Zwardoń"],["Łask","Łask"],["Łaskarzew","Łaskarzew"],["Łebnino","Łebnino"],["Łęczyca","Łęczyca"],["Żerniki","Żerniki"],["Żory","Żory"]]
+{
+    "Aleksandrów Kujawski": "Aleksandrów Kuj."
+}

src/interfaces/StationData.ts

@@ -13,14 +13,14 @@
   11: 0
   12: 0
   13: 0
-  14: "Węgierska Górka;Żywiec;Łodygowice;Wilkowice Bystra;BB Leszczyny;BB Lipnik, podg."
+  14: "Żywiec;Węgierska Górka;Łodygowice;Wilkowice Bystra;BB Leszczyny;BB Lipnik, podg."
   15: true
   16: false
   17: false
 */
 
 export default interface StationData {
-    stationName: string;
-    nameAbbreviation: string;
-    stationCheckpoints: string[];
+  stationName: string;
+  nameAbbreviation: string;
+  stationCheckpoints: string[];
 }