Zmiany w wyglądzie aplikacji (1.6.0)

src/components/SceneryView/SceneryHistory.vue

@@ -49,7 +49,7 @@
 <script lang="ts">
 import { URLs } from '@/scripts/utils/apiURLs';
 import axios from 'axios';
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 
 interface DispatcherTimeline {
   date: string;
@@ -99,34 +99,41 @@ export default defineComponent({
     },
   },
 
-  async mounted() {
+  setup() {
+    return {
+      savedSceneryHistory: inject('savedSceneryHistory'),
+    };
+  },
+
+  async mounted() {    
     try {
       const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}&historyCount=100`)).data;
 
       if (!apiResult || !apiResult.response) return;
       this.isLoaded = true;
 
-      if (!apiResult.errorMessage) {
-        this.dispatcherHistory = apiResult.response.dispatcherHistory;
+      if (apiResult.errorMessage) return;
 
-        this.dispatcherTimeline = this.dispatcherHistory
-          .reduce((acc, dispatcher) => {
-            const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
+      this.dispatcherHistory = apiResult.response.dispatcherHistory;
+      this.savedSceneryHistory = this.dispatcherHistory;
 
-            const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
-              date: dateStr,
-              dispatchers: [],
-              showTimeline: false,
-            };
+      this.dispatcherTimeline = this.dispatcherHistory
+        .reduce((acc, dispatcher) => {
+          const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
 
-            timelineDay.dispatchers.unshift(dispatcher);
+          const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
+            date: dateStr,
+            dispatchers: [],
+            showTimeline: false,
+          };
 
-            if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
+          timelineDay.dispatchers.unshift(dispatcher);
 
-            return acc;
-          }, [] as DispatcherTimeline[])
-          .reverse();
-      }
+          if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
+
+          return acc;
+        }, [] as DispatcherTimeline[])
+        .reverse();
     } catch (error) {
       console.error(error);
     }
@@ -216,7 +223,6 @@ export default defineComponent({
   }
 }
 
-
 ul {
   height: 600px;
   overflow-y: scroll;

src/components/SceneryView/SceneryInfo.vue

@@ -81,8 +81,8 @@ h3.section-header {
 
 .info-lists {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 550px));
-  justify-content: center;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
+  justify-content: space-around;
 }
 
 .badge {

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -3,7 +3,7 @@
     <h3 class="user-header section-header">
       <img :src="icons.user" alt="icon-user" />
       &nbsp;{{ $t('scenery.users') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}/{{ station.onlineInfo?.maxUsers || '0' }}</span>
+      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span>&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
     </h3>
 
     <div
@@ -80,7 +80,7 @@ $no-timetable: #aaa;
 $departed: springgreen;
 $stopped: #ffa600;
 $online: gold;
-$terminated: red;
+$terminated: salmon;
 $disconnected: slategray;
 
 .info-user-list {

src/components/SceneryView/SceneryTimetable.vue

@@ -62,19 +62,21 @@
               <span style="color: white">
                 {{ scheduledTrain.driverName }}
               </span>
+              |
+              <span class="general-status">
+                <span :class="scheduledTrain.stopStatus">
+                  {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
+                  <span v-if="scheduledTrain.stopStatus == 'arriving'"> {{ scheduledTrain.prevStationName }}</span>
+                  <span v-if="scheduledTrain.stopStatus.startsWith('departed')">{{
+                    scheduledTrain.nextStationName
+                  }}</span>
+                </span>
+              </span>
 
               <div class="info-route">
                 <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
               </div>
             </span>
-
-            <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">
-                {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
-                <span v-if="scheduledTrain.stopStatus == 'arriving'">z: {{ scheduledTrain.prevStationName }}</span>
-                <span v-if="scheduledTrain.stopStatus.startsWith('departed')">do: {{ scheduledTrain.nextStationName }}</span>
-              </span>
-            </span>
           </span>
 
           <span class="timetable-schedule">
@@ -255,15 +257,24 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/variables.scss';
 
-h3 {
+h3.timetable-header {
   margin: 0.5em 0;
   padding: 0.3em;
 
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 
   font-size: 1.5em;
+
+  a {
+    display: flex;
+  }
+
+  img {
+    width: 1.2em;
+  }
 }
 
 .timetable-only {
@@ -294,18 +305,13 @@ h3 {
 }
 
 .timetable {
-  &-header {
-    a {
-      display: flex;
-    }
-  }
-
   &-count {
     margin-left: 0.5em;
   }
 
   &-item {
     margin: 1em auto;
+    max-width: 1100px;
 
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -433,11 +439,10 @@ h3 {
 }
 
 .general-status {
-  margin-left: 1em;
   text-align: right;
 
   span.arriving {
-    color: #aaa;
+    color: #ccc;
   }
 
   span.departed {
@@ -446,7 +451,7 @@ h3 {
 
     &-away {
       font-weight: bold;
-      color: rgb(0, 155, 0);
+      color: #5ecc5e;
     }
   }
 
@@ -460,7 +465,7 @@ h3 {
   }
 
   span.terminated {
-    color: #e00000;
+    color: salmon;
     font-weight: bold;
   }
 }
@@ -477,12 +482,14 @@ h3 {
   }
 
   &-stop {
+    position: relative;
     display: flex;
     flex-direction: column;
 
     .stop-time {
       font-size: 0.85em;
-      margin: 0.5em 0;
+      // position: absolute;
+      transform: translateY(-0.25em);
     }
   }
 }