Merge pull request #117 from Spythere/development

v1.28.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.28.3",
+  "version": "1.28.5",
   "private": true,
   "type": "module",
   "scripts": {

src/components/App/AppHeader.vue

@@ -18,7 +18,12 @@
 
         <span class="header_brand">
           <router-link to="/">
-            <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
+            <img
+              v-if="isChristmas"
+              src="/images/stacjownik-header-logo-christmas.svg"
+              alt="Stacjownik logo (christmas)"
+            />
+            <img v-else src="/images/stacjownik-header-logo.svg" alt="Stacjownik logo" />
           </router-link>
         </span>
 
@@ -69,7 +74,10 @@ import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';
 
 export default defineComponent({
+  components: { StatusIndicator, Clock, RegionDropdown },
+
   emits: ['changeLang'],
+
   props: {
     currentLang: {
       type: String,
@@ -98,9 +106,14 @@ export default defineComponent({
       return this.store.activeSceneryList.filter(
         (scenery) => scenery.region == this.store.region.id && scenery.dispatcherId != -1
       ).length;
-    }
     },
-  components: { StatusIndicator, Clock, RegionDropdown }
+
+    isChristmas() {
+      const date = new Date();
+
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
+    }
+  }
 });
 </script>
 <style lang="scss" scoped>

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="tooltip-content">
     <div class="image-box">
-      <div v-if="imageState == 'loading'" class="loading-info">
+      <Loading v-if="imageState == 'loading'" class="loading-info" />
-        {{ $t('vehicle-preview.loading') }}
-      </div>
-
-      <div v-if="imageState == 'error'" class="loading-info">{{ $t('vehicle-preview.error') }}</div>
 
       <img
         v-if="tooltipStore.type"
@@ -34,8 +30,11 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
+  components: { Loading },
+
   data() {
     return {
       tooltipStore: useTooltipStore(),
@@ -60,9 +59,12 @@ export default defineComponent({
     },
 
     onImageError(e: Event) {
+      if (!e.target || !(e.target instanceof HTMLImageElement) || this.imageState == 'error')
+        return;
+
       this.imageState = 'error';
 
-      (e.target as HTMLElement).style.display = 'none';
+      e.target.src = '/images/no-vehicle-image.png';
     }
   },
 
@@ -99,14 +101,13 @@ export default defineComponent({
 
 .image-box {
   position: relative;
-  min-height: 150px;
+  min-height: 170px;
 }
 
 .loading-info {
   position: absolute;
   left: 50%;
-  top: 50%;
+  top: 35%;
-  font-size: 1.15em;
   transform: translate(-50%, -50%);
 }
 

src/components/TrainsView/TrainInfo.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="train-info" :data-extended="extended">
-    <section class="train-general">
     <div class="general-top-bar">
       <div class="top-bar-header">
         <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
@@ -179,25 +178,6 @@
         </p>
       </div>
     </div>
-    </section>
-
-    <section class="train-stats" v-if="!extended">
-      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
-
-      <div>
-        <span>{{ train.speed }}km/h</span>
-
-        <div>
-          <span> {{ train.length }}m</span>
-          &bull;
-          <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-          <span v-if="train.stockList.length > 1">
-            &bull;
-            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-          </span>
-        </div>
-      </div>
-    </section>
   </div>
 </template>
 
@@ -256,7 +236,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 
 .image-warning {
@@ -265,17 +244,6 @@ export default defineComponent({
   vertical-align: middle;
 }
 
-.train-stats {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  flex-direction: column;
-  text-align: center;
-
-  line-height: 1.5em;
-}
-
 .train-dangers {
   margin-top: 0.5em;
 }
@@ -299,15 +267,9 @@ export default defineComponent({
 }
 
 .train-info {
-  display: grid;
+  display: flex;
-  grid-template-columns: 2fr 1fr;
+  flex-direction: column;
-  grid-template-rows: 1fr;
+  gap: 0.25em;
-
-  &[data-extended='true'] {
-    grid-template-columns: 1fr;
-  }
-
-  padding: 1em;
 
   background-color: #1a1a1a;
   gap: 0.5em;
@@ -337,12 +299,6 @@ export default defineComponent({
   padding: 0 0.25em;
 }
 
-.train-general {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-}
-
 .general-stops {
   font-size: 0.8em;
 }
@@ -419,11 +375,4 @@ export default defineComponent({
   display: flex;
   gap: 0.25em;
 }
-
-@include smallScreen() {
-  .train-info {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-  }
-}
 </style>

src/components/TrainsView/TrainSchedule.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="train-schedule" @click="toggleShowState">
+  <div class="train-schedule">
-    <StockList :trainStockList="train.stockList" />
-
     <div class="schedule-wrapper" v-if="train.timetableData">
       <div class="stops">
         <div
@@ -252,12 +250,6 @@ export default defineComponent({
 
       return activeMinorStopList;
     }
-  },
-
-  methods: {
-    toggleShowState() {
-      this.$emit('click');
-    }
   }
 });
 </script>
@@ -281,10 +273,6 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
   }
 }
 
-.train-schedule {
-  padding: 1em;
-}
-
 .schedule-wrapper {
   overflow-y: auto;
   width: 100%;

src/components/TrainsView/TrainStats.vue

@@ -249,7 +249,6 @@ h3 {
 }
 
 @include smallScreen {
-  h1,
   .no-data {
     text-align: center;
   }

src/components/TrainsView/TrainTable.vue

@@ -13,15 +13,7 @@
       </div>
 
       <transition-group name="list-anim" tag="ul">
-        <li
+        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
-          class="train-row"
-          v-for="train in trains"
-          :key="train.id"
-        >
-          <router-link class="a-block" :to="train.driverRouteLocation">
-            <TrainInfo :train="train" :extended="false" />
-          </router-link>
-        </li>
       </transition-group>
     </div>
   </transition>
@@ -30,13 +22,15 @@
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import TrainInfo from './TrainInfo.vue';
-import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { Status, Train } from '../../typings/common';
+
+import Loading from '../Global/Loading.vue';
+import TrainTableItem from './TrainTableItem.vue';
+import TrainInfo from './TrainInfo.vue';
 
 export default defineComponent({
-  components: { Loading, TrainInfo },
+  components: { Loading, TrainInfo, TrainTableItem },
 
   props: {
     trains: {
@@ -99,9 +93,5 @@ export default defineComponent({
   background: #1a1a1a;
 }
 
-li.train-row {
+
-  background-color: var(--clr-secondary);
-  margin-bottom: 1em;
-  width: 100%;
-}
 </style>

src/components/TrainsView/TrainTableItem.vue

@@ -0,0 +1,76 @@
+<template>
+  <li class="train-item">
+    <router-link class="a-block" :to="train.driverRouteLocation">
+      <div class="item-wrapper">
+        <TrainInfo :train="train" />
+
+        <div class="train-stats">
+          <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+          <div>
+            <span>{{ train.speed }}km/h</span>
+
+            <div>
+              <span> {{ train.length }}m</span>
+              &bull;
+              <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+              <span v-if="train.stockList.length > 1">
+                &bull;
+                {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { Train } from '../../typings/common';
+import TrainInfo from './TrainInfo.vue';
+import StockList from '../Global/StockList.vue';
+
+defineProps({
+  train: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.train-item {
+  background-color: #1a1a1a;
+  margin-bottom: 1em;
+  width: 100%;
+  padding: 1em;
+}
+
+.item-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+}
+
+.train-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+  text-align: center;
+
+  line-height: 1.5em;
+}
+
+@include smallScreen() {
+  .item-wrapper {
+    grid-template-columns: 1fr;
+    gap: 1em 0;
+  }
+}
+</style>

src/store/mainStore.ts

@@ -216,17 +216,21 @@ export const useMainStore = defineStore('mainStore', {
         return acc;
       }, [] as ActiveScenery[]);
 
+
+      const referenceTimestamp = Date.now();
+
       const onlineActiveSceneries = apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
         if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return list;
         if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return list;
 
         const dispatcherTimestamp =
           scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
-            ? Date.now() + 25500000
+            ? referenceTimestamp + 25500000
             : scenery.dispatcherStatus > 5
               ? scenery.dispatcherStatus
               : null;
               
+
         list.push({
           name: scenery.stationName,
           hash: scenery.stationHash,

src/views/DriverView.vue

@@ -17,12 +17,16 @@
             <span class="hidable">
               {{ $t('trains.driver-journal-link') }}
             </span>
+            
             <img src="/images/icon-train.svg" alt="train icon" />
           </router-link>
         </div>
 
         <div class="train-card">
-          <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
+          <TrainInfo :train="chosenTrain" :extended="true" />
+          <div style="margin-top: 1em">
+            <StockList :trainStockList="chosenTrain.stockList" />
+          </div>
           <TrainSchedule :train="chosenTrain" />
         </div>
       </div>
@@ -69,6 +73,7 @@
 import { computed } from 'vue';
 import TrainInfo from '../components/TrainsView/TrainInfo.vue';
 import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
+import StockList from '../components/Global/StockList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
@@ -131,6 +136,7 @@ $viewBgCol: #1a1a1a;
 }
 
 .train-card {
+  padding: 1em;
   background-color: $viewBgCol;
   border-radius: 0 0 0.5em 0.5em;
 }

src/views/TrainsView.vue

@@ -133,4 +133,10 @@ export default defineComponent({
   position: relative;
   margin-bottom: 0.5em;
 }
+
+@include smallScreen {
+  .trains_topbar {
+    justify-content: space-between;
+  }
+}
 </style>