Zmiana wyglądu widoków i rozłożenia elementów na stronie (1.6.0a)

src/components/SceneryView/SceneryHistory.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="scenery-history">
-    <h2>{{ $t('journal.title') }}</h2>
+    <div class="history-title">
+      <img :src="icons.history" alt="icon history" />
+      <h2>{{ $t('journal.title') }}</h2>
+    </div>
 
     <transition name="history-list-anim" mode="out-in">
       <ul :key="dispatcherTimeline.length">
@@ -19,25 +22,24 @@
             @keydown.space="toggleTimeline(i)"
             tabindex="0"
           >
-            {{ timeline.date }} <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" />
+            {{ timeline.date }}
+            <!-- <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" /> -->
           </h3>
 
-          <transition name="unfold-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave">
-            <div class="dispatcher-list" v-if="timeline.showTimeline">
-              <div class="dispatcher-item" v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom">
-                <span>
-                  <span class="dispatcher-from text--primary">
-                    {{ timestampToString(dispatcher.dispatcherFrom, true) }}
-                  </span>
-                  >
-                  <span class="dispatcher-to text--primary">
-                    {{ timestampToString(dispatcher.dispatcherTo, true) }}</span
-                  >
-                </span>
-                <b>{{ dispatcher.dispatcherName }}</b>
-              </div>
-            </div>
-          </transition>
+          <!-- <transition name="unfold-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave"> -->
+          <!-- <div class="dispatcher-list" v-if="timeline.showTimeline"> -->
+          <div class="dispatcher-item" v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom">
+            <b>{{ dispatcher.dispatcherName }}</b>
+            <span>
+              <span class="dispatcher-from text--primary">
+                {{ timestampToString(dispatcher.dispatcherFrom, true) }}
+              </span>
+              &gt;
+              <span class="dispatcher-to text--primary"> {{ timestampToString(dispatcher.dispatcherTo, true) }}</span>
+            </span>
+          </div>
+          <!-- </div> -->
+          <!-- </transition> -->
         </li>
       </ul>
     </transition>
@@ -87,8 +89,7 @@ export default defineComponent({
     isLoaded: false,
 
     icons: {
-      ascArrow: require('@/assets/icon-arrow-asc.svg'),
-      descArrow: require('@/assets/icon-arrow-desc.svg'),
+      history: require('@/assets/icon-history.svg'),
     },
   }),
   props: {
@@ -100,7 +101,7 @@ export default defineComponent({
 
   async mounted() {
     try {
-      const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}&historyCount=100`)).data;      
+      const apiResult: HistoryResultAPI = (await axios.get(`${API_URL}?name=${this.name}&historyCount=100`)).data;
 
       if (!apiResult || !apiResult.response) return;
       this.isLoaded = true;
@@ -118,7 +119,7 @@ export default defineComponent({
               showTimeline: false,
             };
 
-            timelineDay.dispatchers.push(dispatcher);
+            timelineDay.dispatchers.unshift(dispatcher);
 
             if (!acc.find((timeline) => timeline.date == dateStr)) acc.push(timelineDay);
 
@@ -202,6 +203,20 @@ export default defineComponent({
   padding-top: 1em;
 }
 
+.history-title {
+  display: flex;
+  justify-content: center;
+
+  margin-bottom: 0.5em;
+  font-size: 1.2em;
+
+  img {
+    margin-right: 0.5em;
+    width: 1.3em;
+  }
+}
+
+
 ul {
   height: 600px;
   overflow-y: scroll;
@@ -218,12 +233,15 @@ li {
     justify-content: center;
     align-items: center;
 
-    background: #444;
+    background: #2a2a2a;
     padding: 0.5em;
     margin: 0 auto 0.5em auto;
 
     max-width: 700px;
 
+    position: sticky;
+    top: 0;
+
     img {
       width: 1.3em;
       vertical-align: middle;
@@ -246,13 +264,12 @@ li {
     margin: 0.5em auto;
 
     background-color: #444;
-    border-radius: 0.5em;
 
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 
     width: 90%;
-    max-width: 400px;
+    max-width: 600px;
   }
 }
 </style>

src/components/SceneryView/SceneryInfo.vue

@@ -2,7 +2,7 @@
   <div class="scenery-info">
     <section v-if="!timetableOnly">
       <!-- info stats -->
-      <scenery-info-stats :station="station" />
+      <!-- <scenery-info-stats :station="station" /> -->
 
       <!-- info icons -->
       <scenery-info-icons :station="station" />
@@ -32,7 +32,7 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoStats from './SceneryInfo/SceneryInfoStats.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
-import SceneryInfoRoutes from "./SceneryInfo/SceneryInfoRoutes.vue";
+import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 
 import Station from '@/scripts/interfaces/Station';
 
@@ -43,7 +43,7 @@ export default defineComponent({
     SceneryInfoStats,
     SceneryInfoUserList,
     SceneryInfoSpawnList,
-    SceneryInfoRoutes
+    SceneryInfoRoutes,
   },
   props: {
     station: {
@@ -51,11 +51,11 @@ export default defineComponent({
       default: {},
     },
 
-    timetableOnly: Boolean
+    timetableOnly: Boolean,
   },
 
   data: () => ({
-    onlineFrom: -1
+    onlineFrom: -1,
   }),
 });
 </script>
@@ -80,10 +80,9 @@ h3.section-header {
 }
 
 .info-lists {
-  display: flex;
-
-  align-items: center;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 550px));
+  justify-content: center;
 }
 
 .badge {

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,23 +1,25 @@
 <template>
   <section class="info-dispatcher">
     <div class="dispatcher" v-if="station.onlineInfo">
-      <span
-        class="dispatcher_level"
-        :style="calculateExpStyle(station.onlineInfo.dispatcherExp)"
-      >
+      <span class="dispatcher_level" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>
 
       <span class="dispatcher_name">{{ station.onlineInfo.dispatcherName }}</span>
+
+      <span class="dispatcher_likes text--primary">
+        <img :src="icons.like" alt="icon-like" />
+        <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
+      </span>
     </div>
 
     <span class="status-badge" v-if="station.onlineInfo && onlineFrom > 0">
-      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: "2-digit", minute: "2-digit" }) }}
+      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
     </span>
 
     <span class="status-badge" v-if="station.onlineInfo" :class="station.onlineInfo.statusID">
       {{ $t(`status.${station.onlineInfo.statusID}`) }}
-      {{ station.onlineInfo.statusID == 'online' ?  timestampToString(station.onlineInfo.statusTimestamp) : '' }}
+      {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }}
     </span>
 
     <span class="status-badge free" v-else>
@@ -34,7 +36,7 @@ import Station from '@/scripts/interfaces/Station';
 import dateMixin from '@/mixins/dateMixin';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin ],
+  mixins: [styleMixin, dateMixin],
   props: {
     station: {
       type: Object as () => Station,
@@ -43,15 +45,15 @@ export default defineComponent({
 
     onlineFrom: {
       type: Number,
-      default: -1
-    }
+      default: -1,
+    },
   },
 
-
   data: () => ({
     icons: {
       spawn: require('@/assets/icon-spawn.svg'),
-    }
+      like: require('@/assets/icon-like.svg'),
+    },
   }),
 });
 </script>
@@ -81,12 +83,21 @@ export default defineComponent({
     }
 
     &_name {
-      margin-right: 1em;
+      margin-right: 0.4em;
+    }
+
+    &_likes {
+      img {
+        height: 0.7em;
+        margin-right: 0.25em;
+      }
+
+      margin-right: 1.5em;
     }
   }
 
   .status-badge {
-    font-size: 1.2em;
+    font-size: 1.25em;
     margin: 0.5em 0.25em;
   }
 }

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -78,7 +78,7 @@ export default defineComponent({
 .info-icons {
   img {
     width: 3.5em;
-    margin: 0 0.5em;
+    margin: 1em 0.5em;
 
     border: 2px solid #4e4e4e;
     border-radius: 0.5em;

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -21,8 +21,8 @@
 
       <span class="track-specs">
         {{ route.tracks }}tor
-        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary"  />
-        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" >
+        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary" />
+        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" />
 
         <img v-if="route.TWB" :src="icons.trackTWB" alt="icon track twb" />
         <img v-if="route.SBL" :src="icons.trackSBL" alt="icon track sbl" />
@@ -46,12 +46,12 @@ export default defineComponent({
   data() {
     return {
       icons: {
-        trackTWB: require("@/assets/icon-track-twb.svg"),
-        trackSBL: require("@/assets/icon-track-sbl.svg"),
-        trackCatenary: require("@/assets/icon-track-catenary.svg"),
-        trackNoCatenary: require("@/assets/icon-track-nocatenary.svg"),
-      }
-    }
+        trackTWB: require('@/assets/icon-track-twb.svg'),
+        trackSBL: require('@/assets/icon-track-sbl.svg'),
+        trackCatenary: require('@/assets/icon-track-catenary.svg'),
+        trackNoCatenary: require('@/assets/icon-track-nocatenary.svg'),
+      },
+    };
   },
 });
 </script>
@@ -90,5 +90,4 @@ export default defineComponent({
     vertical-align: text-bottom;
   }
 }
-
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -1,8 +1,9 @@
 <template>
   <section class="info-spawn-list">
     <h3 class="spawn-header section-header">
-      {{ $t('scenery.spawns') }}
       <img :src="icons.spawn" alt="icon-spawn" />
+      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
     </h3>
 
     <span v-if="station.onlineInfo">

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

@@ -83,7 +83,7 @@ export default defineComponent({
   }
 
   span > img {
-    width: 1.2em;
+    width: 1.2em; 
     margin-right: 0.5em;
   }
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,8 +1,9 @@
 <template>
   <section class="info-user-list">
     <h3 class="user-header section-header">
-      {{ $t('scenery.users') }}
       <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>
     </h3>
 
     <div
@@ -83,6 +84,8 @@ $terminated: red;
 $disconnected: slategray;
 
 .info-user-list {
+  padding: 0.5em;
+
   ul {
     display: flex;
     flex-wrap: wrap;

src/components/SceneryView/SceneryTimetable.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="scenery-timetable">
     <h3 class="timetable-header">
+      <img :src="icons.timetable" alt="icon-timetable" />&nbsp;
       <span>{{ $t('scenery.timetables') }}</span>
 
+      <span class="timetable-count">
+        <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
+        /
+        <span class="text--grayed">
+          {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+        </span>
+      </span>
+
       <a :href="currentURL + '&timetable_only=1'" v-if="!timetableOnly" target="_blank" class="timetable-only">
         <img :src="viewIcon" alt="icon-view" :title="$t('timetables.timetable-only')" />
       </a>
@@ -60,7 +69,11 @@
             </span>
 
             <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
+              <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>
 
@@ -90,7 +103,7 @@
             <span class="schedule-stop">
               <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
                 {{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType }}
+                {{ scheduledTrain.stopInfo.stopType || 'pt' }}
               </span>
               <span class="stop-arrow arrow"></span>
             </span>
@@ -134,6 +147,7 @@ import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { ComputedRef } from 'vue';
 import dateMixin from '@/mixins/dateMixin';
+import TrainStop from '@/scripts/interfaces/TrainStop';
 
 export default defineComponent({
   components: { SelectBox },
@@ -143,6 +157,7 @@ export default defineComponent({
   props: {
     station: {
       type: Object as () => Station,
+      required: true,
     },
     timetableOnly: {
       type: Boolean,
@@ -154,6 +169,7 @@ export default defineComponent({
     listOpen: false,
     icons: {
       warning: require('@/assets/icon-warning.svg'),
+      timetable: require('@/assets/icon-timetable.svg'),
     },
   }),
 
@@ -282,10 +298,10 @@ h3 {
     a {
       display: flex;
     }
+  }
 
-    img {
-      cursor: pointer;
-    }
+  &-count {
+    margin-left: 0.5em;
   }
 
   &-item {
@@ -356,7 +372,7 @@ h3 {
 
   font-size: 1.2em;
 
-  > .checkpoint_item {
+  .checkpoint_item {
     &.current {
       font-weight: bold;
       color: $accentCol;
@@ -417,7 +433,8 @@ h3 {
 }
 
 .general-status {
-  margin-left: 0.5em;
+  margin-left: 1em;
+  text-align: right;
 
   span.arriving {
     color: #aaa;
@@ -464,8 +481,8 @@ h3 {
     flex-direction: column;
 
     .stop-time {
-      font-size: 0.7em;
-      margin: 5px 0;
+      font-size: 0.85em;
+      margin: 0.5em 0;
     }
   }
 }