Merge pull request #117 from Spythere/development

v1.28.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.28.4",
+  "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;
+    },
+
+    isChristmas() {
+      const date = new Date();
+
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
     }
-  },
+  }
-  components: { StatusIndicator, Clock, RegionDropdown }
 });
 </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,203 +1,183 @@
 <template>
   <div class="train-info" :data-extended="extended">
-    <section class="train-general">
+    <div class="general-top-bar">
-      <div class="general-top-bar">
+      <div class="top-bar-header">
-        <div class="top-bar-header">
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">
-          <span class="timetable-id" v-if="train.timetableData">
+          #{{ train.timetableData.timetableId }}
-            #{{ train.timetableData.timetableId }}
+        </span>
-          </span>
 
-          <span
+        <span
-            class="train-badge twr"
+          class="train-badge twr"
-            v-if="train.timetableData?.TWR"
+          v-if="train.timetableData?.TWR"
-            data-tooltip-type="BaseTooltip"
+          data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.TWR')"
+          :data-tooltip-content="$t('warnings.TWR')"
-          >
+        >
-            TWR
+          TWR
-          </span>
+        </span>
 
-          <span
+        <span
-            class="train-badge tn"
+          class="train-badge tn"
-            v-if="train.timetableData?.hasDangerousCargo"
+          v-if="train.timetableData?.hasDangerousCargo"
-            data-tooltip-type="BaseTooltip"
+          data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.TN')"
+          :data-tooltip-content="$t('warnings.TN')"
-          >
+        >
-            TN
+          TN
-          </span>
+        </span>
 
-          <span
+        <span
-            class="train-badge pn"
+          class="train-badge pn"
-            v-if="train.timetableData?.hasExtraDeliveries"
+          v-if="train.timetableData?.hasExtraDeliveries"
-            data-tooltip-type="BaseTooltip"
+          data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.PN')"
+          :data-tooltip-content="$t('warnings.PN')"
-          >
+        >
-            PN
+          PN
-          </span>
+        </span>
 
+        <b
+          v-if="train.timetableData"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
+          class="text--primary tooltip-help"
+        >
+          {{ train.timetableData.category }}
+        </b>
+
+        <b class="train-number">{{ train.trainNo }}</b>
+
+        <span>&bull;</span>
+
+        <div class="train-driver">
           <b
-            v-if="train.timetableData"
+            class="level-badge driver"
-            data-tooltip-type="BaseTooltip"
+            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-            :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
-            class="text--primary tooltip-help"
           >
-            {{ train.timetableData.category }}
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
           </b>
 
-          <b class="train-number">{{ train.trainNo }}</b>
+          <b
+            v-if="apiStore.donatorsData.includes(train.driverName)"
+            data-tooltip-type="DonatorTooltip"
+            :data-tooltip-content="$t('donations.driver-message')"
+          >
+            {{ train.driverName }}
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+          </b>
 
-          <span>&bull;</span>
+          <span v-else>{{ train.driverName }}</span>
-
-          <div class="train-driver">
-            <b
-              class="level-badge driver"
-              :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-            >
-              {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-            </b>
-
-            <b
-              v-if="apiStore.donatorsData.includes(train.driverName)"
-              data-tooltip-type="DonatorTooltip"
-              :data-tooltip-content="$t('donations.driver-message')"
-            >
-              {{ train.driverName }}
-              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </b>
-
-            <span v-else>{{ train.driverName }}</span>
-          </div>
         </div>
       </div>
+    </div>
 
-      <div class="general-timetable" v-if="train.timetableData">
+    <div class="general-timetable" v-if="train.timetableData">
-        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+      <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <span
+      <span
-          v-if="getSceneriesWithComments(train.timetableData).length > 0"
+        v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-tooltip-type="BaseTooltip"
+        data-tooltip-type="BaseTooltip"
-          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+        :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-            train.timetableData
+          train.timetableData
-          )})`"
+        )})`"
-        >
-          <img class="image-warning" src="/images/icon-warning.svg" />
-        </span>
-      </div>
-
-      <hr style="margin: 0.25em 0" />
-
-      <div class="general-stops" v-if="train.timetableData">
-        <span v-if="train.timetableData.followingStops.length > 2">
-          {{ $t('trains.via-title') }}
-          <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
-        </span>
-      </div>
-
-      <div class="general-status">
-        <div class="status-timetable-progress" v-if="train.timetableData">
-          <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
-
-          <span class="progress-distance">
-            <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
-            <span>/</span>
-            <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
-            <span>|</span>
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div class="status-badges">
-          <div v-if="!train.currentStationHash" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            {{ $t('trains.scenery-offline') }}
-          </div>
-
-          <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            Offline {{ lastSeenMessage(train.lastSeen) }}
-          </div>
-        </div>
-      </div>
-
-      <div class="general-stats" v-if="extended">
-        <div>
-          <img src="/images/icon-length.svg" alt="length icon" />
-          {{ train.length }}m
-        </div>
-
-        <div>
-          <img src="/images/icon-mass.svg" alt="mass icon" />
-          {{ (train.mass / 1000).toFixed(1) }}t
-        </div>
-
-        <div>
-          <img src="/images/icon-speed.svg" alt="speed icon" />
-          {{ train.speed }} km/h
-
-          <span v-if="stockSpeedLimit != Infinity">
-            &bull;
-            <em
-              class="text--grayed"
-              style="text-decoration: underline dotted"
-              tabindex="0"
-              :data-tooltip="$t('trains.vmax-tooltip')"
-            >
-              {{ stockSpeedLimit }} km/h
-            </em>
-          </span>
-        </div>
-      </div>
-
-      <div class="text--grayed" style="margin-top: 0.25em">
-        {{ displayTrainPosition(train) }}
-      </div>
-
-      <div
-        class="train-dangers"
-        v-if="extended && train.timetableData && train.timetableData.warningNotes"
       >
-        <div class="dangers-badges">
+        <img class="image-warning" src="/images/icon-warning.svg" />
-          <div v-if="train.timetableData?.TWR">
+      </span>
-            <div class="train-badge twr">TWR</div>
+    </div>
-            - {{ $t('warnings.TWR') }}
-          </div>
 
-          <div v-if="train.timetableData?.hasDangerousCargo">
+    <hr style="margin: 0.25em 0" />
-            <div class="train-badge tn">TN</div>
-            - {{ $t('warnings.TN') }}
-          </div>
 
-          <div v-if="train.timetableData?.hasExtraDeliveries">
+    <div class="general-stops" v-if="train.timetableData">
-            <div class="train-badge pn">PN</div>
+      <span v-if="train.timetableData.followingStops.length > 2">
-            - {{ $t('warnings.PN') }}
+        {{ $t('trains.via-title') }}
-          </div>
+        <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
+      </span>
+    </div>
+
+    <div class="general-status">
+      <div class="status-timetable-progress" v-if="train.timetableData">
+        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
+
+        <span class="progress-distance">
+          <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
+          <span>/</span>
+          <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
+          <span>|</span>
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+        </span>
+      </div>
+
+      <div class="status-badges">
+        <div v-if="!train.currentStationHash" class="train-badge offline">
+          <img src="/images/icon-offline.svg" alt="offline train icon" />
+          {{ $t('trains.scenery-offline') }}
         </div>
 
-        <div class="dangers-notes">
+        <div v-if="!train.online" class="train-badge offline">
-          <h4>{{ $t('warnings.header-title') }}</h4>
+          <img src="/images/icon-offline.svg" alt="offline train icon" />
-          <p>
+          Offline {{ lastSeenMessage(train.lastSeen) }}
-            <i>{{ train.timetableData?.warningNotes }}</i>
-          </p>
         </div>
       </div>
-    </section>
+    </div>
 
-    <section class="train-stats" v-if="!extended">
+    <div class="general-stats" v-if="extended">
-      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+      <div>
+        <img src="/images/icon-length.svg" alt="length icon" />
+        {{ train.length }}m
+      </div>
 
       <div>
-        <span>{{ train.speed }}km/h</span>
+        <img src="/images/icon-mass.svg" alt="mass icon" />
+        {{ (train.mass / 1000).toFixed(1) }}t
+      </div>
 
-        <div>
+      <div>
-          <span> {{ train.length }}m</span>
+        <img src="/images/icon-speed.svg" alt="speed icon" />
+        {{ train.speed }} km/h
+
+        <span v-if="stockSpeedLimit != Infinity">
           &bull;
-          <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+          <em
-          <span v-if="train.stockList.length > 1">
+            class="text--grayed"
-            &bull;
+            style="text-decoration: underline dotted"
-            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+            tabindex="0"
-          </span>
+            :data-tooltip="$t('trains.vmax-tooltip')"
+          >
+            {{ stockSpeedLimit }} km/h
+          </em>
+        </span>
+      </div>
+    </div>
+
+    <div class="text--grayed" style="margin-top: 0.25em">
+      {{ displayTrainPosition(train) }}
+    </div>
+
+    <div
+      class="train-dangers"
+      v-if="extended && train.timetableData && train.timetableData.warningNotes"
+    >
+      <div class="dangers-badges">
+        <div v-if="train.timetableData?.TWR">
+          <div class="train-badge twr">TWR</div>
+          - {{ $t('warnings.TWR') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasDangerousCargo">
+          <div class="train-badge tn">TN</div>
+          - {{ $t('warnings.TN') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasExtraDeliveries">
+          <div class="train-badge pn">PN</div>
+          - {{ $t('warnings.PN') }}
         </div>
       </div>
-    </section>
+
+      <div class="dangers-notes">
+        <h4>{{ $t('warnings.header-title') }}</h4>
+        <p>
+          <i>{{ train.timetableData?.warningNotes }}</i>
+        </p>
+      </div>
+    </div>
   </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/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>