From 8d604826ff864a3f5fdc747d8ade13f86705df90 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 6 Dec 2020 19:50:24 +0100
Subject: [PATCH] Poprawki w tabeli scenerii

---
 src/App.vue                                  |  7 ----
 src/components/StationsView/StationTable.vue | 31 ++++++++++-----
 src/views/StationsView.vue                   | 42 ++++++++++++++++++--
 3 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d0aca88..bb7649e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,13 +61,6 @@ export default class App extends Vue {
 
   private VERSION = "1.3.4";
 
-  get dataStatusClass() {
-    if (this.data.dataConnectionStatus == 0) return "loading";
-    if (this.data.dataConnectionStatus == 1) return "error";
-
-    return "";
-  }
-
   mounted() {
     this.synchronizeData();
   }
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index d204fda..22fcfed 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -33,7 +33,7 @@
             class="station"
             v-for="(station, i) in stations"
             :key="i + station.stationHash"
-            @click="setScenery(station.stationHash)"
+            @click="() => setScenery(station.stationName)"
           >
             <td
               class="station_name"
@@ -131,7 +131,7 @@
               />
             </td>
 
-            <td class="station_users">
+            <td class="station_users" :class="{inactive: !station.online }">
               <span>
                 <span class="highlight">{{ station.currentUsers }}</span>
                 /
@@ -139,11 +139,11 @@
               </span>
             </td>
 
-            <td class="station_spawns">
+            <td class="station_spawns" :class="{inactive: !station.online }">
               <span class="highlight">{{ station.spawns.length }}</span>
             </td>
 
-            <td class="station_schedules">
+            <td class="station_schedules" :class="{inactive: !station.online }">
               <span class="highlight">{{station.scheduledTrains.length}} &nbsp;</span>
               /
               <span
@@ -205,19 +205,22 @@ export default class StationTable extends styleMixin {
     [this.timetableIcon, "Aktywne RJ"],
   ];
 
-  setScenery(sceneryHash: string) {
+  setScenery(name: string) {
     const station = this.stations.find(
-      (station) => station.stationHash === sceneryHash
+      (station) => station.stationName === name
     );
 
     if (!station) return;
 
     if (!station.online) {
-      location.href = station.stationURL;
+      window.location.href = station.stationURL;
       return;
     }
 
-    this.$router.push({ name: "SceneryView", query: { hash: sceneryHash } });
+    this.$router.push({
+      name: "SceneryView",
+      query: { hash: station.stationHash },
+    });
   }
 }
 </script>
@@ -263,13 +266,15 @@ table {
   white-space: nowrap;
   border-collapse: collapse;
 
+  min-width: 1000px;
+
   thead th {
     position: sticky;
     top: 0;
 
     min-width: 85px;
 
-    padding: 0.3rem;
+    padding: 0.5em;
     background-color: $primaryCol;
 
     cursor: pointer;
@@ -359,6 +364,14 @@ td.station {
       padding: 0.5em;
     }
   }
+
+  &_users,
+  &_spawns,
+  &_schedules {
+    &.inactive {
+      opacity: 0.2;
+    }
+  }
 }
 
 .separator {
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 3b4ad75..3e6f529 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -16,13 +16,21 @@
 
           <div class="bar_indicators">
             <transition name="indicator-anim">
-              <span class="indicator_scenery-data" v-if="data.dataConnectionStatus < 2">
+              <span
+                class="indicator_scenery-data"
+                v-if="data.dataConnectionStatus < 2"
+                :class="dataStatusClass"
+              >
                 <img :src="trainIcon" alt="icon-train" />
               </span>
             </transition>
 
             <transition name="indicator-anim">
-              <span class="indicator_timetable-data" v-if="data.timetableDataStatus < 2">
+              <span
+                class="indicator_timetable-data"
+                v-if="data.timetableDataStatus < 2"
+                :class="timetableDataStatusClass"
+              >
                 <img :src="timetableIcon" alt="icon-timetable" />
               </span>
             </transition>
@@ -115,6 +123,20 @@ export default class StationsView extends Vue {
   @Getter("getStationList") stationList!: Station[];
   @Getter("getAllData") data;
 
+  get dataStatusClass() {
+    if (this.data.dataConnectionStatus == 0) return "loading";
+    if (this.data.dataConnectionStatus == 1) return "error";
+
+    return "success";
+  }
+
+  get timetableDataStatusClass() {
+    if (this.data.timetableDataStatus == 0) return "loading";
+    if (this.data.timetableDataStatus == 1) return "error";
+
+    return "success";
+  }
+
   mounted() {
     const storage = window.localStorage;
 
@@ -368,7 +390,7 @@ export default class StationsView extends Vue {
   display: flex;
   align-items: flex-end;
 
-  & > span {
+  > span {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -378,9 +400,21 @@ export default class StationsView extends Vue {
 
     margin-left: 0.5em;
 
-    background-color: #e68e00;
+    // background-color: #e68e00;
     border-radius: 0.5em 0.5em 0 0;
 
+    &.loading {
+      background-color: $accentCol;
+    }
+
+    &.error {
+      background-color: $errorCol;
+    }
+
+    &.success {
+      background-color: $secondaryCol;
+    }
+
     & > img {
       width: 0.9em;
       animation: blinkAnim 2s ease-in-out infinite forwards;