From e22115844a73f923b9eeaf4b5b03f76ce5e1f155 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 4 Aug 2020 18:10:23 +0200
Subject: [PATCH] =?UTF-8?q?Wygl=C4=85d=20i=20podstawowe=20funkcjonalno?=
 =?UTF-8?q?=C5=9Bci=20widoku=20sk=C5=82ad=C3=B3w=20online?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |   4 +-
 src/assets/icon-length.svg |   4 +
 src/assets/icon-mass.svg   |   4 +
 src/assets/icon-speed.svg  |  18 +++
 src/components/ui/List.vue |   2 +-
 src/store/modules/store.ts |   4 +
 src/views/TrainsView.vue   | 298 ++++++++++++++++++++++++++++++++-----
 7 files changed, 297 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/icon-length.svg
 create mode 100644 src/assets/icon-mass.svg
 create mode 100644 src/assets/icon-speed.svg

diff --git a/src/App.vue b/src/App.vue
index 6043bb4..aec2a2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,9 @@
       <main class="app-main">
         <Loading v-if="connectionState == 0" />
         <Error v-else-if="connectionState == 1" :error="errorMessage" />
-        <router-view v-else />
+        <keep-alive v-else>
+          <router-view />
+        </keep-alive>
       </main>
 
       <footer class="app-footer flex">&copy; Spythere 2020</footer>
diff --git a/src/assets/icon-length.svg b/src/assets/icon-length.svg
new file mode 100644
index 0000000..31bc059
--- /dev/null
+++ b/src/assets/icon-length.svg
@@ -0,0 +1,4 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30.3072" height="30" rx="6" fill="#7B7B7B"/>
+<path d="M26.7965 15.5303C27.0894 15.2374 27.0894 14.7626 26.7965 14.4697L22.0236 9.6967C21.7307 9.40381 21.2558 9.40381 20.9629 9.6967C20.67 9.98959 20.67 10.4645 20.9629 10.7574L25.2056 15L20.9629 19.2426C20.67 19.5355 20.67 20.0104 20.9629 20.3033C21.2558 20.5962 21.7307 20.5962 22.0236 20.3033L26.7965 15.5303ZM3.51062 14.4697C3.21773 14.7626 3.21773 15.2374 3.51062 15.5303L8.2836 20.3033C8.57649 20.5962 9.05136 20.5962 9.34426 20.3033C9.63715 20.0104 9.63715 19.5355 9.34426 19.2426L5.10161 15L9.34426 10.7574C9.63715 10.4645 9.63715 9.98959 9.34426 9.6967C9.05136 9.40381 8.57649 9.40381 8.2836 9.6967L3.51062 14.4697ZM4.92996 15.75H25.3772V14.25H4.92996V15.75ZM25.3772 15.75H26.2662V14.25H25.3772V15.75ZM4.92996 14.25H4.04095V15.75H4.92996V14.25Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon-mass.svg b/src/assets/icon-mass.svg
new file mode 100644
index 0000000..c003b14
--- /dev/null
+++ b/src/assets/icon-mass.svg
@@ -0,0 +1,4 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30.3072" height="30" rx="6" fill="#7B7B7B"/>
+<path d="M11.8852 9.32496C12.5388 3.65327 17.7683 3.4642 18.422 9.32496M21.9331 9.70309L26.2662 24.0714H4.04095L8.54741 9.70309H15.1536H21.9331Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon-speed.svg b/src/assets/icon-speed.svg
new file mode 100644
index 0000000..a98433a
--- /dev/null
+++ b/src/assets/icon-speed.svg
@@ -0,0 +1,18 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30.3072" height="30" rx="6" fill="#7B7B7B"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="8" width="21" height="12">
+<rect x="5.05118" y="8" width="20.2048" height="11.5" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<ellipse cx="15.1536" cy="19" rx="10.1024" ry="10" fill="white"/>
+<rect width="3.02307" height="1.00257" transform="matrix(0.868217 -0.496185 -0.503825 -0.863806 21.5304 15.933)" fill="#4A4A4A"/>
+<rect x="5.05118" y="18.5" width="3.03072" height="1" fill="#4A4A4A"/>
+<rect width="3.03072" height="1" transform="matrix(1 0 0 -1 22.2253 19.5)" fill="#4A4A4A"/>
+<rect width="3.00771" height="1.00769" transform="matrix(-0.503825 -0.863806 -0.868217 0.496185 12.0552 12.6879)" fill="#4A4A4A"/>
+<rect width="3.00771" height="1.00769" transform="matrix(-0.503825 0.863806 -0.868217 -0.496185 20.6422 10.5897)" fill="#4A4A4A"/>
+<rect width="3" height="1.01024" transform="matrix(-4.41589e-08 -1 -1 4.32684e-08 15.6587 12)" fill="#4A4A4A"/>
+<rect width="3.02307" height="1.00257" transform="matrix(0.868217 0.496185 -0.503825 0.863806 6.6572 13.567)" fill="#4A4A4A"/>
+<ellipse cx="15.1536" cy="19.5" rx="1.01024" ry="1" fill="#474747"/>
+<path d="M18.4254 13.9298C18.3862 13.798 18.2465 13.7226 18.1134 13.7614L15.9439 14.393C15.8107 14.4318 15.7345 14.57 15.7737 14.7018C15.8129 14.8336 15.9525 14.909 16.0857 14.8702L18.0141 14.3088L18.5813 16.2177C18.6205 16.3495 18.7602 16.4249 18.8933 16.3862C19.0264 16.3474 19.1026 16.2092 19.0635 16.0774L18.4254 13.9298ZM15.3742 19.6191L18.4049 14.1191L17.9637 13.8809L14.933 19.3809L15.3742 19.6191Z" fill="#474747"/>
+</g>
+</svg>
diff --git a/src/components/ui/List.vue b/src/components/ui/List.vue
index 92cc8f8..4140589 100644
--- a/src/components/ui/List.vue
+++ b/src/components/ui/List.vue
@@ -297,7 +297,7 @@ export default class List extends styleMixin {
 }
 
 .list-body {
-  max-height: calc(100vh - 4em);
+  max-height: calc(100vh - 4.5em);
   overflow: auto;
   display: flex;
   flex-direction: column;
diff --git a/src/store/modules/store.ts b/src/store/modules/store.ts
index 3ae0eb4..0a89d93 100644
--- a/src/store/modules/store.ts
+++ b/src/store/modules/store.ts
@@ -65,6 +65,10 @@ class Store extends VuexModule {
         return this.filteredStations;
     }
 
+    get getAllStations() {
+        return this.stations;
+    }
+
     get getFilters() {
         return this.filters;
     }
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 8fbd0a8..da9d488 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -1,36 +1,113 @@
 <template>
   <section class="trains-view">
-    <div class="list" v-if="listLoaded">
-      <div v-for="train in onlineTrainsList" :key="train.timetableId">{{ train.route }}</div>
-    </div>
+    <ul class="list" v-if="listLoaded">
+      <li class="item" v-for="train in computedTrains" :key="train.timetableId">
+        <span class="info">
+          <div class="info-category">
+            <strong>{{train.category}}</strong>
+            {{train.trainNo}}
+          </div>
+
+          <div class="info-warnings">
+            <span class="warning twr" v-if="train.TWR">TWR</span>
+            <span class="warning skr" v-if="train.SKR">SKR</span>
+          </div>
+
+          <div class="info-route">
+            <strong>{{train.route && train.route.replace("|", " -> ")}}</strong>
+          </div>
+
+          <div class="info-stations">
+            <i v-if="train.sceneries.length > 0">Przez: {{train.sceneries}}</i>
+          </div>
+        </span>
+
+        <span class="driver">
+          <span class="driver-name">{{train.driverName}}</span>
+          <span class="driver-loco">
+            <img src="https://rj.td2.info.pl/dist/img/thumbnails/ET41-144.png" alt="icon-train" />
+          </span>
+        </span>
+        <span class="stats">
+          <div class="stats-general">
+            <span class="mass">
+              <img :src="massIcon" alt="icon-mass" />
+              {{train.mass/1000}}t
+            </span>
+
+            <span class="speed">
+              <img :src="speedIcon" alt="icon-speed" />
+              {{train.speed}} km/h
+            </span>
+
+            <span class="length">
+              <img :src="lengthIcon" alt="icon-length" />
+              {{train.length}}m
+            </span>
+          </div>
+
+          <div class="stats-position">
+            <span class="station">
+              <p>
+                <strong>SCENERIA</strong>
+              </p>
+              {{train.currentStationName}}
+            </span>
+            <span class="track">
+              <p>
+                <strong>SZLAK</strong>
+              </p>
+              {{train.connectedTrack || "---"}}
+            </span>
+            <span class="signal">
+              <p>
+                <strong>SEMAFOR</strong>
+              </p>
+              {{train.signal || "---"}}
+            </span>
+          </div>
+        </span>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
+import { Getter } from "vuex-class";
+
+import Station from "@/scripts/interfaces/Station";
 
 import axios from "axios";
 
 @Component
 export default class TrainsView extends Vue {
+  speedIcon: string = require("@/assets/icon-speed.svg");
+  massIcon: string = require("@/assets/icon-mass.svg");
+  lengthIcon: string = require("@/assets/icon-length.svg");
+
+  @Getter("getAllStations") stations!: Station[];
+
   onlineTrainsList: {
     mass: number;
     length: number;
     speed: number;
     signal: string;
     distance: number;
+    imageURL: string;
     connectedTrack: string;
-    route?: string;
     driverId: number;
     trainNo: number;
-    timetableId?: number;
     driverName: string;
     currentStationName: string;
-    category: string;
-    sceneries: string[];
-    TWR: boolean;
-    SKR: boolean;
+    route: string | null;
+    timetableId: number | null;
+    category: string | null;
+    sceneries: string | null;
+    TWR: boolean | null;
+    SKR: boolean | null;
+    noTimetable: boolean;
   }[] = [];
 
   listLoaded: boolean = false;
@@ -50,35 +127,43 @@ export default class TrainsView extends Vue {
       dataSpeed: number;
       dataDistance: number;
       dataSignal: string;
+      dataCon: string;
       dataSceneryConnection: string;
       isOnline: boolean;
     }[] = response.data.message;
 
-    onlineTrainsData = onlineTrainsData.filter((train) => train.isOnline);
+    this.onlineTrainsList = await Promise.all(
+      onlineTrainsData
+        .filter((train) => train.isOnline)
+        .map(async (train) => {
+          const timetableData = await this.getTimetableData(train.trainNo);
 
-    onlineTrainsData.forEach(async (train) => {
-      const timetableData = await this.getTimetableData(train.trainNo);
+          return {
+            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,
+            imageURL: train.dataCon,
+            connectedTrack: train.dataSceneryConnection,
+            noTimetable: timetableData == null,
+            route: timetableData && timetableData.route,
+            timetableId: timetableData && timetableData.timetableId,
+            category: timetableData && timetableData.trainCategoryCode,
+            sceneries:
+              timetableData &&
+              (await this.mapSceneries(timetableData.sceneries)),
+            TWR: timetableData && timetableData.twr,
+            SKR: timetableData && timetableData.skr,
+          };
+        })
+    );
 
-      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,
-        });
-    });
+    this.listLoaded = true;
   }
 
   async getTimetableData(trainNo: number) {
@@ -98,14 +183,157 @@ export default class TrainsView extends Vue {
     return timetableData;
   }
 
+  mapSceneries(sceneries: string[]): string {
+    let text = "";
+
+    for (let i = sceneries.length - 1; i >= 0; i--) {
+      const station = this.stations.find(
+        (station) => station.stationHash == sceneries[i]
+      );
+
+      if (!station) continue;
+      if (i == sceneries.length - 1 || i == 0) continue;
+
+      text += `${station.stationName}${i > 1 ? ", " : ""}`;
+    }
+
+    return text;
+  }
+
+  get computedTrains() {
+    return this.onlineTrainsList.filter((train) => !train.noTimetable);
+  }
+
   mounted() {
-    this.getTrainData().then(() => (this.listLoaded = true));
+    this.getTrainData();
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.trains-view {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
 .list {
-  font-size: 1.2rem;
+  font-size: calc(0.5rem + 0.5vw);
+
+  margin-top: 2rem;
+  max-height: calc(100vh - 14em);
+  overflow: auto;
+
+  max-width: 1300px;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  background-color: #444;
+  padding: 1rem;
+
+  &:nth-child(even) {
+    background-color: #666;
+  }
+}
+
+.info {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-category {
+    flex-grow: 2;
+    font-size: 1.05em;
+  }
+
+  &-route {
+    width: 100%;
+    font-size: 1.2em;
+  }
+
+  &-stations {
+    margin-top: 0.35em;
+    font-size: 0.75em;
+  }
+}
+
+.driver {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  &-exp {
+    font-size: 1.4em;
+    padding: 0.3em 0.6em;
+
+    border-radius: 0.4em;
+
+    background-color: red;
+  }
+
+  &-name {
+    margin: 0 0.3em;
+  }
+
+  &-loco {
+    width: 100%;
+    text-align: center;
+  }
+
+  &-loco img {
+    max-width: 15em;
+  }
+}
+
+.stats {
+  &-general {
+    display: flex;
+
+    span {
+      display: flex;
+      width: 100%;
+
+      align-items: center;
+    }
+
+    img {
+      margin: 0 0.3em;
+    }
+  }
+
+  &-position {
+    display: flex;
+    margin-top: 1em;
+
+    span {
+      width: 100%;
+      font-size: 300;
+    }
+
+    p {
+      color: #00cff3;
+    }
+  }
+}
+
+.warning {
+  border-radius: 1em;
+  padding: 0.1em 1.2em;
+  margin: 0 0.2em;
+
+  color: black;
+  font-weight: bold;
+  font-size: 0.85em;
+
+  &.twr {
+    background-color: #ffc700;
+  }
+
+  &.skr {
+    background-color: #ff4646;
+  }
 }
 </style>
\ No newline at end of file