Poprawki w działaniu, zmiany estetyczne

src/components/StationsView/StationTimetable.vue

@@ -14,7 +14,7 @@
                 :to="{ name: 'TrainsView', params: { passedSearchedTrain: scheduledTrain.trainNo.toString()}}"
               >
                 <span>
-                  {{scheduledTrain.category}}
+                  <strong>{{scheduledTrain.category}}</strong>
                   {{scheduledTrain.trainNo}}
                 </span>
               </router-link>|
@@ -185,6 +185,7 @@ export default class StationTimetable extends Vue {
     border: 1px solid white;
 
     display: flex;
+    align-items: center;
     justify-content: space-between;
 
     @include smallScreen() {

src/components/TrainsView/TrainStats.vue

@@ -11,41 +11,47 @@
     <transition name="stats-anim">
       <div class="stats-body" v-if="statsOpen">
         <h2 class="stats-header">STATYSTYKI RUCHU</h2>
+
         <div class="stats-speed">
-          <div class="title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
-          <div class="content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
+          <div class="title stats-title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
+          <div class="stats-content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
         </div>
 
         <div class="stats-length">
-          <div class="title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
+          <div class="title stats-title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
           <div
-            class="content"
+            class="stats-content"
           >{{timetableStats.min}} | {{timetableStats.avg}} | {{timetableStats.max}}</div>
         </div>
 
         <div class="stats-categories">
-          <div class="title">KATEGORIE RJ</div>
+          <div class="title stats-title">KATEGORIE RJ</div>
+
           <div class="category-list">
             <span class="category" v-for="[key, value] of categoryList" :key="key">
               <span class="category-type">{{key}}</span>
               <span class="category-count">{{value}}</span>
             </span>
           </div>
-          <div class="warning twr">
-            Wysokiego ryzyka
-            [{{specialTrainCount[0]}}]
-          </div>
 
-          <div class="warning skr">
-            Przekroczona skrajnia
-            [{{specialTrainCount[1]}}]
+          <div class="special-list">
+            <span class="special twr">
+              <span class="special-type">WYSOKIEGO RYZYKA</span>
+              <span class="special-count">{{specialTrainCount[0]}}</span>
+            </span>
+
+            <span class="special skr">
+              <span class="special-type">PRZEKROCZONA SKRAJNIA</span>
+              <span class="special-count">{{specialTrainCount[1]}}</span>
+            </span>
           </div>
         </div>
 
         <div class="stats-locos">
-          <div class="title">NAJCZĘSTSZE JEDNOSTKI</div>
-          <div class="loco-list content">
-            <div class="loco" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
+          <div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
+
+          <div class="loco-list stats-content">
+            <div class="loco-item" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
           </div>
         </div>
       </div>
@@ -161,6 +167,7 @@ export default class TrainStats extends Vue {
 
 <style lang="scss" scoped>
 @import "../../styles/responsive";
+@import "../../styles/variables";
 
 .stats-anim {
   &-enter-active,
@@ -182,38 +189,40 @@ export default class TrainStats extends Vue {
   position: relative;
 }
 
-.button {
-  font-size: 1em;
-  padding: 0.5em;
+.stats {
+  &-btn {
+    font-size: 1em;
+    padding: 0.5em;
+  }
+
+  &-header {
+    margin-bottom: 1rem;
+  }
+
+  &-body {
+    position: absolute;
+    display: inline-block;
+    max-width: 700px;
+
+    background: rgba(black, 0.85);
+    border-radius: 0 1em 1em 1em;
+
+    padding: 1rem;
+  }
+
+  &-content {
+    font-size: 1.1em;
+    color: #ddd;
+  }
 }
 
-.content {
-  font-size: 1.1em;
-  color: #ddd;
-}
-
-.stats-header {
-  margin-bottom: 1rem;
-}
-
-.stats-body {
-  position: absolute;
-  display: inline-block;
-  max-width: 700px;
-
-  background: rgba(black, 0.85);
-  border-radius: 0 1em 1em 1em;
-
-  padding: 1rem;
-}
-
-.category-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.category {
-  font-size: 0.9em;
+.category,
+.special {
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.85em;
+  }
 
   margin-right: 0.4em;
   margin-bottom: 0.4em;
@@ -234,6 +243,27 @@ export default class TrainStats extends Vue {
   }
 }
 
+.special {
+  &-list {
+    font-size: 0.85em;
+  }
+
+  &-count {
+    background: gray;
+    color: white;
+  }
+
+  &.twr > &-type {
+    background-color: $twr;
+    color: black;
+  }
+
+  &.skr > &-type {
+    background-color: $skr;
+    color: white;
+  }
+}
+
 .warning {
   display: inline-block;
   margin-right: 0.4em;
@@ -248,30 +278,24 @@ export default class TrainStats extends Vue {
   }
 
   &.skr {
-    background-color: #ff4646;
+    background-color: #f00000;
   }
 }
 
-.loco {
-  padding-bottom: 0.4em;
-}
-
 @include smallScreen {
   .button {
     font-size: 0.85rem;
   }
+
   .stats-body {
     display: block;
     font-size: 0.9em;
-    // position: fixed;
-    // top: 0;
-    // left: 0;
 
     width: 100%;
-    // height: 100%;
 
     border-radius: 0 0 1em 1em;
   }
+
   .btn-wrapper {
     display: flex;
     justify-content: center;

src/components/TrainsView/TrainTable.vue

@@ -10,13 +10,15 @@
               <span>
                 <strong>{{ train.timetableData.category }}</strong>
                 {{ train.trainNo }} |
+                <span
+                  style=" color: gold;"
+                >{{ train.timetableData.routeDistance }} km</span>
               </span>
-              <span style=" color: gold;">{{ train.timetableData.routeDistance }} km</span>
-            </div>
 
-            <div class="info-warnings">
-              <span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
-              <span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
+              <span>
+                <span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
+                <span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
+              </span>
             </div>
 
             <div class="info-route">
@@ -152,6 +154,7 @@ export default class TrainTable extends Vue {
 
 <style lang="scss" scoped>
 @import "../../styles/responsive.scss";
+@import "../../styles/variables.scss";
 
 .train-table {
   font-size: calc(0.4rem + 0.5vw);
@@ -206,6 +209,9 @@ export default class TrainTable extends Vue {
   &-category {
     flex-grow: 2;
     font-size: 1.05em;
+
+    display: flex;
+    justify-content: space-between;
   }
 
   &-route {
@@ -315,11 +321,12 @@ export default class TrainTable extends Vue {
   font-size: 0.85em;
 
   &.twr {
-    background-color: #ffc700;
+    background-color: $twr;
   }
 
   &.skr {
-    background-color: #ff4646;
+    background-color: $skr;
+    color: white;
   }
 }
 

src/store/store.ts

@@ -295,8 +295,15 @@ export default class Store extends VuexModule {
   private updateOnlineStations(updatedStationList: any[]) {
     this.stationList = this.stationList.reduce((acc, station) => {
       const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);
+      const isRegistered = JSONStationData.some(data => data.stationName === station.stationName);
 
-      if (!onlineStationData) {
+      if (onlineStationData)
+        acc.push({
+          ...station,
+          ...onlineStationData,
+          online: true,
+        });
+      else if (isRegistered)
         acc.push({
           ...station,
           stationProject: '',
@@ -312,12 +319,6 @@ export default class Store extends VuexModule {
           statusTimestamp: -3,
           online: false,
         });
-      } else
-        acc.push({
-          ...station,
-          ...onlineStationData,
-          online: true,
-        });
 
       return acc;
     }, [] as Station[]);

src/styles/variables.scss

@@ -9,5 +9,8 @@ $warningCol: #ff975b;
 $accentCol: #ffc014;
 $accent2Col: #ff3d5d;
 
+$skr: #ff5100;
+$twr: #ffbb00;
+
 $animDuration: 100ms;
-$animType: ease-out;
+$animType: ease-out;