Małe zmiany w wyglądzie, widok pociągów online (W.I.P.)

src/App.vue

@@ -19,6 +19,11 @@
               <img src="@/assets/icon-train.svg" alt="icon train" />
             </div>
           </span>
+
+          <span class="header-links">
+            <router-link class="route" active-class="route-active" to="/" exact>SCENERIE</router-link>*
+            <router-link class="route" active-class="route-active" to="/trains">POCIĄGI</router-link>
+          </span>
         </div>
       </header>
 
@@ -79,6 +84,15 @@ export default class App extends Vue {
 @import "./styles/variables.scss";
 @import "./styles/global.scss";
 
+.route {
+  margin: 0 0.2em;
+
+  &-active {
+    color: $accentCol;
+    font-weight: bold;
+  }
+}
+
 .app {
   background: $bgCol;
   color: white;
@@ -118,7 +132,19 @@ export default class App extends Vue {
     justify-content: space-between;
 
     margin: 0 0.3em;
-    font-size: 0.4em;
+    padding: 0.2em;
+    font-size: 0.35em;
+  }
+
+  &-links {
+    display: flex;
+    justify-content: center;
+
+    background-color: #222;
+    border-radius: 0.7em;
+
+    padding: 0.2em;
+    font-size: 0.35em;
   }
 }
 

src/components/ui/AppBar.vue

@@ -15,7 +15,7 @@ import Options from "@/components/ui/Options.vue";
 export default class AppBar extends Vue {}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../../styles/responsive.scss";
 
 .app-bar {

src/components/ui/List.vue

@@ -315,7 +315,7 @@ export default class List extends styleMixin {
   font-size: calc(0.6rem + 0.3vw);
 
   @include smallScreen() {
-    font-size: 0.7rem;
+    font-size: 0.6rem;
   }
 
   &-head th {

src/styles/global.scss

@@ -112,7 +112,7 @@ input {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 2;
+    z-index: 4;
 
     overflow: auto;
     // background: #474747;

src/views/TrainsView.vue

@@ -1,14 +1,111 @@
 <template>
-  <section class="trains-view"></section>
+  <section class="trains-view">
+    <div class="list" v-if="listLoaded">
+      <div v-for="train in onlineTrainsList" :key="train.timetableId">{{ train.route }}</div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
 
+import axios from "axios";
+
 @Component
-export default class TrainsView extends Vue {}
+export default class TrainsView extends Vue {
+  onlineTrainsList: {
+    mass: number;
+    length: number;
+    speed: number;
+    signal: string;
+    distance: number;
+    connectedTrack: string;
+    route?: string;
+    driverId: number;
+    trainNo: number;
+    timetableId?: number;
+    driverName: string;
+    currentStationName: string;
+    category: string;
+    sceneries: string[];
+    TWR: boolean;
+    SKR: boolean;
+  }[] = [];
+
+  listLoaded: boolean = false;
+
+  async getTrainData() {
+    const response = await axios.get(
+      "https://api.td2.info.pl:9640/?method=getTrainsOnline"
+    );
+
+    let onlineTrainsData: {
+      driverId: number;
+      driverName: string;
+      trainNo: number;
+      station: { stationName: string };
+      dataMass: number;
+      dataLength: number;
+      dataSpeed: number;
+      dataDistance: number;
+      dataSignal: string;
+      dataSceneryConnection: string;
+      isOnline: boolean;
+    }[] = response.data.message;
+
+    onlineTrainsData = onlineTrainsData.filter((train) => train.isOnline);
+
+    onlineTrainsData.forEach(async (train) => {
+      const timetableData = await this.getTimetableData(train.trainNo);
+
+      if (timetableData)
+        this.onlineTrainsList.push({
+          driverId: train.driverId,
+          driverName: train.driverName,
+          trainNo: train.trainNo,
+          currentStationName: train.station.stationName,
+          mass: train.dataMass,
+          length: train.dataLength,
+          speed: train.dataSpeed,
+          distance: train.dataDistance,
+          signal: train.dataSignal,
+          connectedTrack: train.dataSceneryConnection,
+          route: timetableData.route || "",
+          timetableId: timetableData.timetableId,
+          category: timetableData.trainCategoryCode,
+          sceneries: timetableData.sceneries,
+          TWR: timetableData.twr,
+          SKR: timetableData.skr,
+        });
+    });
+  }
+
+  async getTimetableData(trainNo: number) {
+    const response = await axios.get(
+      `https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${trainNo}%3Beu`
+    );
+
+    const timetableData: {
+      timetableId: number;
+      trainCategoryCode: string;
+      route: string;
+      twr: boolean;
+      skr: boolean;
+      sceneries: string[];
+    } | null = response.data.message.trainInfo;
+
+    return timetableData;
+  }
+
+  mounted() {
+    this.getTrainData().then(() => (this.listLoaded = true));
+  }
+}
 </script>
 
-<style>
+<style scoped>
+.list {
+  font-size: 1.2rem;
+}
 </style>