Zmiany w wyglądzie aplikacji (1.6.0)

src/App.scss

@@ -164,7 +164,7 @@
       
       left: 0;
       right: auto;
-      bottom: 0;
+      bottom: 0.5em;
       top: auto;
 
 

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) {
+      if (apiResult.errorMessage) return;
-        this.dispatcherHistory = apiResult.response.dispatcherHistory;
 
-        this.dispatcherTimeline = this.dispatcherHistory
+      this.dispatcherHistory = apiResult.response.dispatcherHistory;
-          .reduce((acc, dispatcher) => {
+      this.savedSceneryHistory = this.dispatcherHistory;
-            const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
 
-            const timelineDay = acc.find((timeline) => timeline.date == dateStr) || {
+      this.dispatcherTimeline = this.dispatcherHistory
-              date: dateStr,
+        .reduce((acc, dispatcher) => {
-              dispatchers: [],
+          const dateStr = new Date(dispatcher.dispatcherFrom).toLocaleDateString('pl-PL').replace(/\./g, '/');
-              showTimeline: false,
-            };
 
-            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;
+          if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
-          }, [] as DispatcherTimeline[])
+
-          .reverse();
+          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));
+  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
-  justify-content: center;
+  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);
     }
   }
 }

src/components/TrainsView/TrainInfoSimple.vue

@@ -3,17 +3,17 @@
     <section>
       <span>
         <div>
-          <span class="timetable_warnings">
+          <span>
-            <span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
+            <span class="timetable_warnings">
-
+              <span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
-            <span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
+              <span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
+            </span>
+            <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
+            <strong>{{ train.trainNo }}</strong>
+            <span>&nbsp;| {{ train.driverName }}</span>
           </span>
 
-          <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
+          <img class="image-offline" style="height: 1em" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" 
-          <strong>{{ train.trainNo }}</strong>
-          <span>&nbsp;| {{ train.driverName }}</span>
-
-          <img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" 
             :title="$t('trains.offline')"
           >
         </div>
@@ -117,10 +117,9 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 
 .image-warning, .image-offline {
-  width: 1em;
   height: 1em;
 
-  margin-left: 0.25em;
+  margin-left: 0.5em;
 }
 
 .train-image {

src/locales/en.json

@@ -208,9 +208,9 @@
   "timetables": {
     "timetable-only": "Switch to timetable-only view",
     "online": "At station",
-    "departed": "Dispatched",
+    "departed": "Dispatched to:",
-    "departed-away": "Departed",
+    "departed-away": "Departed to:",
-    "arriving": "En route",
+    "arriving": "Arriving from:",
     "stopped": "Stopped",
     "terminated": "Terminated",
     "begins": "BEGINS HERE",

src/locales/pl.json

@@ -210,9 +210,9 @@
   "timetables": {
     "timetable-only": "Wyodrębnij rozkłady jazdy",
     "online": "Na stacji",
-    "departed": "Odprawiony",
+    "departed": "Odprawiony do:",
-    "departed-away": "Odjechał",
+    "departed-away": "Odjechał do:",
-    "arriving": "W drodze",
+    "arriving": "W drodze z:",
     "stopped": "Postój",
     "terminated": "Skończył bieg",
     "begins": "ROZPOCZYNA\nBIEG",

src/views/SceneryView.vue

@@ -47,7 +47,6 @@
 
 <script lang="ts">
 import { StoreData } from '@/scripts/interfaces/StoreData';
-import { DataStatus } from '@/scripts/enums/DataStatus';
 
 import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
 import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
@@ -56,7 +55,7 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
 
-import { computed, ComputedRef, defineComponent, onMounted } from '@vue/runtime-core';
+import { computed, ComputedRef, defineComponent, provide, reactive } from '@vue/runtime-core';
 import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';
 import { useRoute } from 'vue-router';
@@ -85,6 +84,7 @@ export default defineComponent({
     const route = useRoute();
     const store = useStore();
 
+    const savedSceneryHistory = reactive({});
     const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
 
     const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
@@ -97,6 +97,8 @@ export default defineComponent({
       );
     });
 
+    provide('savedSceneryHistory', savedSceneryHistory);
+
     // const onlineFrom = computed(async () => {
     //   return await (await axios.get(`${URLs.stacjownikAPI}?name=${route.query.station}&historyCount=0`)).data;
     // });