Dodano możliwość zmieniania posterunków w przeglądzie RJ

src/components/Global/SelectBox.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="select-box">
+    <div class="title">Sortuj według</div>
+
+    <div class="option-selected" @click="toggleOptionList">
+      <span>{{ selectedOption }}</span>
+      <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
+    </div>
+
+    <div class="option-container">
+      <ul class="option-list" :class="{ open: listOpen }">
+        <li
+          class="option-item"
+          v-for="(option, i) in sortOptionList"
+          :key="i"
+          @click="() => chooseOption(option)"
+        >
+          <input type="option-radio" name="sort" :id="option.id" />
+          <label :for="option.id">{{ option.content }}</label>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class SelectBox extends Vue {
+  @Prop() title!: string;
+  @Prop() optionList!: string[];
+
+  selectedOption: string = "";
+}
+</script>
+
+<style lang="scss" scoped>
+.option {
+  &-container {
+    position: relative;
+
+    input {
+      display: none;
+    }
+
+    label {
+      padding: 0.5rem 1rem;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+
+  &-item {
+    display: flex;
+
+    &:hover {
+      background-color: rgba(#868686, 0.85);
+    }
+
+    transition: background 150ms ease-in;
+  }
+
+  &-selected,
+  &-list {
+    background: #333;
+    border-radius: 0.5em;
+  }
+
+  &-selected {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.5rem 1rem;
+    min-width: 150px;
+    cursor: pointer;
+
+    span {
+      margin-right: 2rem;
+    }
+
+    img {
+      max-width: 0.75em;
+    }
+  }
+
+  &-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    z-index: 10;
+
+    width: 100%;
+    background-color: rgba(#222, 0.95);
+    overflow: hidden;
+
+    max-height: 0;
+
+    &.open {
+      max-height: 250px;
+      opacity: 1;
+    }
+
+    transition: all 150ms ease-in;
+  }
+}
+</style>

src/components/StationsView/StationTable.vue

@@ -202,7 +202,14 @@ export default class StationTable extends styleMixin {
   @Prop() readonly changeSorter!: () => void;
 
   setScenery(sceneryHash: string) {
-    this.$router.push({ name: "SceneryView", query: { hash: sceneryHash } })
+    if (
+      this.stations.findIndex(
+        (station) => station.stationHash === sceneryHash && station.online
+      ) == -1
+    )
+      return;
+
+    this.$router.push({ name: "SceneryView", query: { hash: sceneryHash } });
   }
 
   icons: { ascSVG; descSVG } = { ascSVG, descSVG };

src/data/stations.json

@@ -46,6 +46,7 @@
     },
     "default": false,
     "nonPublic": false,
+    "subStations": ["Borowe, podg.", "Wysoka, podg.", "Naprawa, podg.", "Borowe Towarowe"],
     "stops": ["Borowe, podg.", "Wysoka, podg.", "Naprawa, podg.", "Borowe Towarowe"]
   },
   {
@@ -71,7 +72,8 @@
     },
     "default": true,
     "nonPublic": false,
-    "stops": ["Gdańsk Główny", "Gdańsk Południowy"]
+    "subStations": ["Gdańsk Główny", "SKM Śródmieście", "Gdańsk Południowy"],
+    "stops": ["Gdańsk Główny"]
   },
   {
     "stationName": "Lębork",
@@ -143,7 +145,8 @@
       }
     },
     "default": true,
-    "nonPublic": false
+    "nonPublic": false,
+    "subStations": ["Parzęczewo", "Parzęczewo Miasto", "Parzęczewo gt"]
   },
   {
     "stationName": "Aleksandrów Kujawski",
@@ -264,7 +267,8 @@
     },
     "default": true,
     "nonPublic": false,
-    "stops": ["Głowno", "Domaniewice"]
+    "subStations": ["Głowno", "Domaniewice"],
+    "stops": ["Głowno"]
   },
   {
     "stationName": "LCS Ozorków",
@@ -289,6 +293,7 @@
     },
     "default": true,
     "nonPublic": false,
+    "subStations": ["Ozorków", "Chociszew"],
     "stops": ["Ozorków"]
   },
   {
@@ -314,6 +319,7 @@
     },
     "default": true,
     "nonPublic": false,
+    "subStations": ["Skrzynki", "Wykno"],
     "stops": ["Skrzynki"]
   },
   {
@@ -2049,5 +2055,28 @@
     },
     "default": true,
     "nonPublic": false
+  },
+  {
+     "stationName": "Strączki",
+    "stationURL": "https://td2.info.pl/scenerie/straczki/",
+    "stationLines": "",
+    "reqLevel": "4",
+    "supportersOnly": "NIE",
+    "signalType": "współczesna",
+    "controlType": "mechaniczne",
+    "SBL": "",
+    "twoWayBlock": "",
+    "routes": {
+      "oneWay": {
+        "catenary": 1,
+        "noCatenary": 0
+      },
+      "twoWay": {
+        "catenary": 1,
+        "noCatenary": 0
+      }
+    },
+    "default": false,
+    "nonPublic": false
   }
 ]

src/scripts/interfaces/Station.ts

@@ -24,9 +24,10 @@ export default interface Station {
     oneWay: { catenary: number; noCatenary: number };
     twoWay: { catenary: number; noCatenary: number };
   };
-  subStations: {
+  checkpoints: {
+    checkpointName: string;
     scheduledTrains: ScheduledTrain[],
-  }[];
+  }[] | null;
   online: boolean;
   occupiedTo: string;
   statusTimestamp: number;

src/store/store.ts

@@ -154,74 +154,67 @@ export default class Store extends VuexModule {
 
   @Action({ commit: 'updateTimetableData' })
   async fetchTimetableData() {
-    return await Promise.all(
+    return this.trainList.reduce(async (acc: Promise<TimetableData[]>, train) => {
-      this.trainList.map(async train => {
+      const timetable = await (await axios.get(timetableURL(train.trainNo))).data.message;
-        const timetable = await (await axios.get(timetableURL(train.trainNo))).data.message;
+      const trainInfo = timetable.trainInfo;
-        const trainInfo = timetable.trainInfo;
 
+      if (!timetable || !trainInfo) return acc;
     
-        if (timetable && trainInfo) {
+      const followingStops: TrainStop[] = timetable.stopPoints.reduce((stopsAcc: TrainStop[], point) => {
-          let timetableData!: TimetableData;
+        const arrivalTimestamp = getTimestamp(point.arrivalTime);
+        const arrivalRealTimestamp = getTimestamp(point.arrivalRealTime);
 
-          const followingStops: TrainStop[] = timetable.stopPoints.reduce((acc: TrainStop[], point) => {
+        const departureTimestamp = getTimestamp(point.departureTime);
-            const arrivalTimestamp = getTimestamp(point.arrivalTime);
+        const departureRealTimestamp = getTimestamp(point.departureRealTime);
-            const arrivalRealTimestamp = getTimestamp(point.arrivalRealTime);
 
-            const departureTimestamp = getTimestamp(point.departureTime);
+        stopsAcc.push({
-            const departureRealTimestamp = getTimestamp(point.departureRealTime);
+          stopName: point.pointName,
+          stopNameRAW: point.pointNameRAW,
+          stopType: point.pointStopType,
+          mainStop: point.pointName.includes('strong'),
 
-            acc.push({
+          arrivalLine: point.arrivalLine,
-              stopName: point.pointName,
+          arrivalTimeString: timestampToTime(point.arrivalTime),
-              stopNameRAW: point.pointNameRAW,
+          arrivalTimestamp: arrivalTimestamp,
-              stopType: point.pointStopType,
+          arrivalRealTimeString: timestampToTime(point.arrivalRealTime),
-              mainStop: point.pointName.includes('strong'),
+          arrivalRealTimestamp: arrivalRealTimestamp,
+          arrivalDelay: point.arrivalDelay,
 
-              arrivalLine: point.arrivalLine,
+          departureLine: point.departureLine,
-              arrivalTimeString: timestampToTime(point.arrivalTime),
+          departureTimeString: timestampToTime(point.departureTime),
-              arrivalTimestamp: arrivalTimestamp,
+          departureTimestamp: departureTimestamp,
-              arrivalRealTimeString: timestampToTime(point.arrivalRealTime),
+          departureRealTimeString: timestampToTime(point.departureRealTime),
-              arrivalRealTimestamp: arrivalRealTimestamp,
+          departureRealTimestamp: departureRealTimestamp,
-              arrivalDelay: point.arrivalDelay,
+          departureDelay: point.departureDelay,
 
-              departureLine: point.departureLine,
+          beginsHere: arrivalTimestamp == 0,
-              departureTimeString: timestampToTime(point.departureTime),
+          terminatesHere: departureTimestamp == 0,
-              departureTimestamp: departureTimestamp,
-              departureRealTimeString: timestampToTime(point.departureRealTime),
-              departureRealTimestamp: departureRealTimestamp,
-              departureDelay: point.departureDelay,
 
-              beginsHere: arrivalTimestamp == 0,
+          confirmed: point.confirmed,
-              terminatesHere: departureTimestamp == 0,
+          stopped: point.isStopped,
+          stopTime: point.pointStopTime,
+        });
 
-              confirmed: point.confirmed,
+        return stopsAcc;
-              stopped: point.isStopped,
+      }, []);
-              stopTime: point.pointStopTime,
-            });
 
-            return acc;
+      (await acc).push({
-          }, []);
+        trainNo: train.trainNo,
+        driverName: train.driverName,
+        driverId: train.driverId,
+        currentStationName: train.currentStationName,
+        currentStationHash: train.currentStationHash,
+        timetableId: trainInfo.timetableId,
+        category: trainInfo.trainCategoryCode,
+        route: trainInfo.route,
+        TWR: trainInfo.twr,
+        SKR: trainInfo.skr,
+        routeDistance: timetable.stopPoints[timetable.stopPoints.length - 1].pointDistance,
+        followingStops,
+      });
 
-          timetableData = {
+      return acc; 
-            trainNo: train.trainNo,
+    }, Promise.resolve([]))
-            driverName: train.driverName,
-            driverId: train.driverId,
-            currentStationName: train.currentStationName,
-            currentStationHash: train.currentStationHash,
-            timetableId: trainInfo.timetableId,
-            category: trainInfo.trainCategoryCode,
-            route: trainInfo.route,
-            TWR: trainInfo.twr,
-            SKR: trainInfo.skr,
-            routeDistance: timetable.stopPoints[timetable.stopPoints.length - 1].pointDistance,
-            followingStops,
-          };
-
-          return timetableData;
-        }
-
-        return null;
-      })
-    );
   }
 
   @Action
@@ -305,6 +298,7 @@ export default class Store extends VuexModule {
 
   @Mutation setJSONData() {
     this.stationList = JSONStationData.map(stationData => ({
+      ...stationData,
       stationProject: '',
       spawnString: '',
       stationHash: '',
@@ -320,8 +314,7 @@ export default class Store extends VuexModule {
       statusTimestamp: -3,
       stationTrains: [],
       scheduledTrains: [],
-      subStations: [],
+      checkpoints: stationData.subStations ? stationData.subStations.map(sub => ({ checkpointName: sub, scheduledTrains: []})) : null,
-      ...stationData,
     }));
   }
 
@@ -330,13 +323,11 @@ export default class Store extends VuexModule {
     this.stationList = this.stationList.reduce((acc, station) => {
       const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);
       const registeredStation = JSONStationData.find(data => data.stationName === station.stationName);
-      const subStations = registeredStation?.stops && registeredStation.stops;
 
       if (onlineStationData)
         acc.push({
           ...station,
           ...onlineStationData,
-          subStations,
           online: true,
         });
       else if (registeredStation)
@@ -357,7 +348,7 @@ export default class Store extends VuexModule {
           statusTimestamp: -3,
           stationTrains: [],
           scheduledTrains: [],
-          subStations: []
+          checkpoints: null,
         });
 
       return acc;
@@ -372,6 +363,7 @@ export default class Store extends VuexModule {
           ...updatedStation,
           scheduledTrains: [],
           stationTrains: [],
+          subStations: [],
           online: true,
           reqLevel: '-1',
           nonPublic: true,
@@ -401,68 +393,179 @@ export default class Store extends VuexModule {
   @Mutation
   private updateTimetableData(timetableList: TimetableData[]) {
     this.stationList = this.stationList.map(station => {
-      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: any, index) => {
-        const scheduledIndex = timetableData
-          ? timetableData.followingStops.findIndex((stop: any) => {
-              const stationName = station.stationName.toLowerCase();
-              const stopName = stop.stopNameRAW.toLowerCase();
-//stationName.includes('lcs') && 
-            return (
-              stationName.includes(stopName) ||
-              stopName.includes(stationName) ||
-                (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName.includes(stopName.split(', podg.')[0])) ||
-                (JSONStationData.some(data => data.stationName.includes(station.stationName) && data.stops && data.stops.includes(stop.stopNameRAW)))
-              );
-            })
-          : -1;
       
+      const stationName = station.stationName.toLowerCase();        
+      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: TimetableData, index) => {
 
-        if (scheduledIndex >= 0) {
+        const stopInfoIndex = timetableData.followingStops.findIndex((stop) => {
+          const stopName = stop.stopNameRAW.toLowerCase();  
           
-          const stopInfo = timetableData.followingStops[scheduledIndex];
+          if (stationName === stopName) return true;
+          if (stopName.includes(stationName)) return true;
+          if (stationName.includes(stopName)) return true;
 
-          let stopStatus = "";
+          if (stopName.includes("podg.") && stopName.split(", podg.")[0] && stationName.includes(stopName.split(", podg.")[0])) return true;
-          let stopLabel = "";
-          let nearestStop = "";
 
-          if (stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+          if (JSONStationData.some(data => data.stationName.includes(station.stationName) && data.stops && data.stops.includes(stop.stopNameRAW))) return true;
-          else if (!stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
-          // else if (timetableData.currentStationName == station.stationName && stopInfo.beginsHere ) { stopStatus = "online"; stopLabel = "Podstawia się" }
-          else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
-          else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
-          else if (timetableData.currentStationName != station.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }          
             
-          for (let i = scheduledIndex + 1; i < timetableData.followingStops.length - 1; i++){    
+          return false;
-            const stop = timetableData.followingStops[i];
+        });             
         
-            if (stop.mainStop && stop.stopType.includes("ph")) {
+        if (stopInfoIndex == -1) 
-              nearestStop = stop.stopNameRAW;
+          return acc;
-              break;
+        
-            }
+        const stopInfo = timetableData.followingStops[stopInfoIndex];
+        
+        let stopStatus = "";
+        let stopLabel = "";
+        let nearestStop = "";
+
+        if (stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+        else if (!stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
+        // else if (timetableData.currentStationName == station.stationName && stopInfo.beginsHere ) { stopStatus = "online"; stopLabel = "Podstawia się" }
+        else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
+        else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
+        else if (timetableData.currentStationName != station.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }          
+          
+        for (let i = stopInfoIndex; i < timetableData.followingStops.length - 1; i++){    
+          const stop = timetableData.followingStops[i];
+          
+          if (stop.mainStop && stop.stopType.includes("ph")) {
+            nearestStop = stop.stopNameRAW;
+            break;
           }
-
-          acc.push({
-            trainNo: timetableData.trainNo,
-            driverName: timetableData.driverName,
-            driverId: timetableData.driverId,
-            currentStationName: timetableData.currentStationName,
-            currentStationHash: timetableData.currentStationHash,
-            category: timetableData.category,
-            beginsAt: timetableData.followingStops[0].stopNameRAW,
-            terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
-            nearestStop,
-            stopInfo,
-            stopLabel,
-            stopStatus
-          });
         }
 
+        acc.push({
+          trainNo: timetableData.trainNo,
+          driverName: timetableData.driverName,
+          driverId: timetableData.driverId,
+          currentStationName: timetableData.currentStationName,
+          currentStationHash: timetableData.currentStationHash,
+          category: timetableData.category,
+          beginsAt: timetableData.followingStops[0].stopNameRAW,
+          terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
+          nearestStop,
+          stopInfo,
+          stopLabel,
+          stopStatus
+        });
+
         return acc;
       }, []);
 
+      if (station.checkpoints) {
+        station.checkpoints.forEach(cp => cp.scheduledTrains.length = 0)
+
+        for (let checkpoint of station.checkpoints) {
+          timetableList.reduce((acc, data) => {
+            const foundStops = data.followingStops.filter(stop => stop.stopNameRAW === checkpoint.checkpointName).forEach(stopInfo => {
+                // const stopInfo = data.followingStops[stopInfoIndex];
+            
+                let stopStatus = "";
+                let stopLabel = "";
+                let nearestStop = "";
+    
+                if (stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+                else if (!stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
+                else if (data.currentStationName == station.stationName && !stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
+                else if (data.currentStationName == station.stationName && stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
+                else if (data.currentStationName != station.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }          
+                  
+                // for (let i = stopInfoIndex; i < data.followingStops.length - 1; i++){    
+                //   const stop = data.followingStops[i];
+                  
+                //   if (stop.mainStop && stop.stopType.includes("ph")) {
+                //     nearestStop = stop.stopNameRAW;
+                //     break;
+                //   }
+                // }
+    
+                checkpoint.scheduledTrains.push({
+                  trainNo: data.trainNo,
+                  driverName: data.driverName,
+                  driverId: data.driverId,
+                  currentStationName: data.currentStationName,
+                  currentStationHash: data.currentStationHash,
+                  category: data.category,
+                  beginsAt: data.followingStops[0].stopNameRAW,
+                  terminatesAt: data.followingStops[data.followingStops.length - 1].stopNameRAW,
+                  stopInfo,
+                  stopLabel,
+                  stopStatus,
+                  nearestStop
+                });
+            })
+
+            return acc;
+          }, []);
+        }
+
+
+        // const checkpoints: Station['scheduledTrains'] = timetableList.reduce((acc: any, timetableData: TimetableData, index) => {
+        //   const stopInfoIndex = timetableData.followingStops.findIndex((stop) => {
+        //     const stopName = stop.stopNameRAW.toLowerCase();
+
+        //     if (station.checkpoints?.some(cp => cp.checkpointName.includes(stopName))) return true;
+        //     if (stopName.includes("podg.") && stopName.split(", podg.")[0] && station.checkpoints?.filter(cp => cp.checkpointName.includes(stopName.split(", podg.")[0]))) return true;
+            
+        //     return false;
+        //   });
+
+        //   if (stopInfoIndex == -1) return acc;
+
+        //   const stopInfo = timetableData.followingStops[stopInfoIndex];
+        
+        //   let stopStatus = "";
+        //   let stopLabel = "";
+        //   let nearestStop = "";
+
+        //   if (stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+        //   else if (!stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
+        //   // else if (timetableData.currentStationName == station.stationName && stopInfo.beginsHere ) { stopStatus = "online"; stopLabel = "Podstawia się" }
+        //   else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
+        //   else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
+        //   else if (timetableData.currentStationName != station.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }          
+            
+        //   for (let i = stopInfoIndex; i < timetableData.followingStops.length - 1; i++){    
+        //     const stop = timetableData.followingStops[i];
+            
+        //     if (stop.mainStop && stop.stopType.includes("ph")) {
+        //       nearestStop = stop.stopNameRAW;
+        //       break;
+        //     }
+        //   }
+
+
+            
+        //   acc.push({
+        //     checkpointName: stopInfo.stopNameRAW,
+        //     scheduledTrains: {
+        //       trainNo: timetableData.trainNo,
+        //       driverName: timetableData.driverName,
+        //       driverId: timetableData.driverId,
+        //       currentStationName: timetableData.currentStationName,
+        //       currentStationHash: timetableData.currentStationHash,
+        //       category: timetableData.category,
+        //       beginsAt: timetableData.followingStops[0].stopNameRAW,
+        //       terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
+        //       nearestStop,
+        //       stopInfo,
+        //       stopLabel,
+        //       stopStatus
+        //     }
+        //   });
+     
+        //   return acc;
+        // }, []);
+      }
+
       return { ...station, scheduledTrains };
     });
 
+    
+
+
     this.trainList = this.trainList.reduce((acc, train) => {
       const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
 

src/views/SceneryView.vue

@@ -6,12 +6,21 @@
     >
       Ups! Nie znaleziono danej stacji bądź jest ona offline!
       <button class="button">
-        <a href="https://stacjownik-td2.web.app">Wróć na stronę główną</a>
+        <router-link to="/">Wróć na stronę główną</router-link>
       </button>
     </div>
     <div class="scenery-wrapper" v-if="stationInfo">
       <div class="scenery-header">
-        <div class="station-name">{{ stationInfo.stationName }}</div>
+        <div class="station-name">
+          <a
+            v-if="stationInfo.stationURL"
+            :href="stationInfo.stationURL"
+            target="_blank"
+            rel="noopener noreferrer"
+          >{{ stationInfo.stationName }}</a>
+
+          <span v-else>{{ stationInfo.stationName }}</span>
+        </div>
         <div class="station-hash">#{{ stationInfo.stationHash }}</div>
       </div>
 
@@ -163,6 +172,27 @@
           </a>
         </h3>
 
+        <div class="select-box" v-if="stationInfo.checkpoints">
+          <div class="option-container">
+            <div class="option-selected" @click="toggleOptionList">
+              <span>{{ selectedOption }}</span>
+              <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
+            </div>
+
+            <ul class="option-list" :class="{ open: listOpen }">
+              <li
+                class="option-item"
+                v-for="(cp, i) in stationInfo.checkpoints"
+                :key="i"
+                @click="() => chooseOption(cp.checkpointName)"
+              >
+                <input type="option-radio" name="sort" />
+                <label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
+              </li>
+            </ul>
+          </div>
+        </div>
+
         <span class="timetable-item loading" v-if="timetableDataStatus == 0">Ładowanie...</span>
 
         <span
@@ -254,25 +284,44 @@ import Station from "@/scripts/interfaces/Station";
 import Train from "@/scripts/interfaces/Train";
 
 import StationTimetable from "@/components/StationsView/StationTimetable.vue";
-
+import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
 
 @Component
 export default class SceneryView extends styleMixin {
-  @Getter('getStationList') storeStationList!: Station[];
+  @Getter("getStationList") storeStationList!: Station[];
-  @Getter('getTimetableDataStatus') timetableDataStatus!: number;
+  @Getter("getTimetableDataStatus") timetableDataStatus!: number;
-  @Getter('getDataStatus') dataStatus!: number;
+  @Getter("getDataStatus") dataStatus!: number;
 
-  likeIcon: string = require('@/assets/icon-like.svg');
+  likeIcon: string = require("@/assets/icon-like.svg");
-  spawnIcon: string = require("@/assets/icon-spawn.svg")
+  spawnIcon: string = require("@/assets/icon-spawn.svg");
-  timetableIcon: string = require("@/assets/icon-timetable.svg")
+  timetableIcon: string = require("@/assets/icon-timetable.svg");
-  userIcon: string = require("@/assets/icon-user.svg")
+  userIcon: string = require("@/assets/icon-user.svg");
 
   viewIcon: string = require("@/assets/icon-view.svg");
 
+  listOpen: boolean = false;
+  selectedOption: string = "";
+
   timetableOnly: boolean = false;
 
   activated() {
-    this.timetableOnly = this.$route.query['timetable_only'] == "1" ? true : false;
+    this.timetableOnly =
+      this.$route.query["timetable_only"] == "1" ? true : false;
+
+    this.selectedOption = "";
+  }
+
+  toggleOptionList() {
+    this.listOpen = !this.listOpen;
+  }
+
+  closeOptionList() {
+    this.listOpen = false;
+  }
+
+  chooseOption(name: string) {
+    this.selectedOption = name;
+    this.closeOptionList();
   }
 
   get currentPath() {
@@ -290,13 +339,24 @@ export default class SceneryView extends styleMixin {
   get stationInfo(): Station | null {
     if (!this.$route.query.hash || !this.storeStationList) return null;
 
-    return this.storeStationList.find(station => station.stationHash === this.$route.query.hash.toString()) || null;
+    const info =
+      this.storeStationList.find(
+        (station) => station.stationHash === this.$route.query.hash.toString()
+      ) || null;
+
+    if (!info) return null;
+
+    if (!info.checkpoints) return info;
+
+    if (this.selectedOption == "")
+      this.selectedOption = info.checkpoints[0].checkpointName;
+
+    return info;
   }
 
   get computedDispatcherExp(): string {
     if (!this.stationInfo) return "";
 
-
     return this.stationInfo.dispatcherExp < 2
       ? "L"
       : `${this.stationInfo.dispatcherExp}`;
@@ -305,23 +365,40 @@ export default class SceneryView extends styleMixin {
   get computedStationTrains() {
     if (!this.stationInfo) return null;
 
-    return this.stationInfo.stationTrains.map(stationTrain => {
+    return this.stationInfo.stationTrains.map((stationTrain) => {
-      const scheduledData = this.stationInfo?.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
+      const scheduledData = this.stationInfo?.scheduledTrains.find(
+        (scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
+      );
 
       return {
         ...stationTrain,
-        stopStatus: scheduledData?.stopStatus || "no-timetable"
+        stopStatus: scheduledData?.stopStatus || "no-timetable",
-      }
+      };
-    })
+    });
   }
 
   get computedScheduledTrains() {
-    return this.stationInfo?.scheduledTrains.sort((a, b) => {
+    if (!this.stationInfo) return [];
-      if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
-      else if ((a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)) return -1;
 
-      return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
+    let scheduledTrains: ScheduledTrain[] | undefined;
-    })
+
+    if (this.stationInfo.checkpoints)
+      scheduledTrains = this.stationInfo.checkpoints.find(
+        (cp) => cp.checkpointName === this.selectedOption
+      )?.scheduledTrains;
+    else scheduledTrains = this.stationInfo.scheduledTrains;
+
+    return (
+      scheduledTrains?.sort((a, b) => {
+        if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
+        else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
+          return -1;
+
+        return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
+          ? 1
+          : -1;
+      }) || []
+    );
   }
 }
 </script>
@@ -347,16 +424,97 @@ h3 {
   }
 }
 
+.select-box {
+  display: flex;
+  justify-content: center;
+}
+
+.option {
+  &-container {
+    position: relative;
+
+    input {
+      display: none;
+    }
+
+    label {
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+    }
+  }
+
+  &-item {
+    display: flex;
+    justify-content: center;
+
+    &:hover {
+      background-color: rgba(#868686, 0.85);
+    }
+
+    transition: background 150ms ease-in;
+  }
+
+  &-selected,
+  &-list {
+    background: #444;
+    border-radius: 0.5em;
+  }
+
+  &-selected {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.5rem 1rem;
+    min-width: 10em;
+    cursor: pointer;
+
+    span {
+      margin-right: 2rem;
+    }
+
+    img {
+      max-width: 0.75em;
+    }
+  }
+
+  &-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    width: 100%;
+
+    z-index: 10;
+
+    background-color: rgba(#222, 0.95);
+    overflow: hidden;
+
+    max-height: 0;
+
+    &.open {
+      max-height: 250px;
+      opacity: 1;
+    }
+
+    transition: all 150ms ease-in;
+  }
+}
+
 .scenery {
   &-offline {
     align-self: center;
     font-size: 2em;
     text-align: center;
+    padding: 0 1em;
 
     color: $warningCol;
 
-    button {
+    display: inline-block;
-      margin: 1em auto;
+
+    .button {
+      margin: 1rem auto;
+      font-size: 0.85em;
     }
   }
 
@@ -674,6 +832,7 @@ h3 {
 
     .stop-time {
       font-size: 0.7em;
+      margin: 5px 0;
     }
   }
 }

src/views/TimetableView.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="timetable-view" v-if="stationInfo">
     <div class="timetable-wrapper">
-      <div class="timetable-title"><b>ODJAZDY</b></div>
+      <div class="timetable-title">
+        <b>ODJAZDY</b>
+      </div>
       <div class="timetable-header">
         <span>DO STACJI</span>
         <span>PRZEZ</span>
@@ -10,20 +12,12 @@
         <span>OPÓŹNIENIE</span>
       </div>
       <div class="timetable-body">
-        <div
+        <div class="timetable-item" v-for="(timetable, i) in computedRows" :key="i">
-          class="timetable-item"
-          v-for="(timetable, i) in computedRows"
-          :key="i"
-        >
           <div class="row-bar"></div>
           <div class="timetable-row">
             <span class="row-destination">
               <div class="letter-wrapper">
-                <div
+                <div v-for="(letter, j) in timetable.destinationTable" :key="j" class="letter">
-                  v-for="(letter, j) in timetable.destinationTable"
-                  :key="j"
-                  class="letter"
-                >
                   <transition name="roll-anim" mode="out-in">
                     <span :key="letter">{{ letter }}</span>
                   </transition>
@@ -31,11 +25,7 @@
               </div>
             </span>
             <span class="row-next" ref="next">
-              <div
+              <div v-for="(letter, j) in timetable.nearestStopTable" :key="j" class="letter">
-                v-for="(letter, j) in timetable.nearestStopTable"
-                :key="j"
-                class="letter"
-              >
                 <transition name="roll-anim" mode="out-in">
                   <span :key="letter">{{ letter }}</span>
                 </transition>
@@ -45,20 +35,16 @@
               <transition name="roll-anim" mode="out-in">
                 <span :key="timetable.number">
                   {{
-                    timetable.number
+                  timetable.number
-                      ? `${timetable.category} ${timetable.number}`
+                  ? `${timetable.category} ${timetable.number}`
-                      : ""
+                  : ""
                   }}
                 </span>
               </transition>
             </span>
             <span class="row-time">
               <div class="letter-wrapper">
-                <span
+                <span class="letter" v-for="(num, i) in timetable.departureHoursTable" :key="i">
-                  class="letter"
-                  v-for="(num, i) in timetable.departureHoursTable"
-                  :key="i"
-                >
                   <transition name="roll-anim" mode="out-in">
                     <span :key="num">{{ num }}</span>
                   </transition>
@@ -79,9 +65,9 @@
             </span>
             <span class="row-delay">
               <transition name="roll-anim" mode="out-in">
-                <span :key="timetable.delay">
+                <span
-                  {{ timetable.delay > 0 ? `${timetable.delay} min` : "" }}
+                  :key="timetable.delay"
-                </span>
+                >{{ timetable.delay > 0 ? `${timetable.delay} min` : "" }}</span>
               </transition>
             </span>
           </div>
@@ -92,7 +78,7 @@
     <!-- <div v-if="stationInfo.online">
       {{ stationInfo.stationName }}
     </div>
-    <div v-else>Stacja offline!</div> -->
+    <div v-else>Stacja offline!</div>-->
   </div>
 </template>
 
@@ -257,8 +243,6 @@ export default class TimetableView extends Vue {
       let nearestStop = train.nearestStop.toUpperCase();
 
 
-
-
       for (let name of filteredNames) {
         if (name[0] === destination)
           destination = name[1];