poprawki miniatur

.gitignore

@@ -31,7 +31,11 @@ node_modules
 .firebase
 .firebaserc
 
+# Env
 .env
 
+# Mock data
+mockWebsocketData.json
+
 .fake
 .ionide

src/components/Global/TrainThumbnail.vue

@@ -1,22 +1,37 @@
 <template>
-  <div class="thumbnail-wrapper">
-    <img :src="placeholderUrl" v-if="!isLoaded || isNotFound" />
+  <img class="train-thumbnail" :src="placeholderUrl" v-if="!isLoaded || isNotFound" />
 
-    <img
-      v-show="isLoaded"
-      :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${stockType == 'loco-ezt' ? 'rb' : ''}.png`"
-      @error="onImageError"
-      @load="onImageLoad"
-      width="220"
-      height="60"
-    />
+  <img
+    class="train-thumbnail"
+    v-if="!isNotFound"
+    v-show="isLoaded"
+    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${stockType == 'loco-ezt' ? 'rb' : ''}.png`"
+    @error="onImageError"
+    @load="onImageLoad"
+    width="220"
+    height="60"
+  />
 
-    <!-- Handling członów EZT -->
-    <img v-if="!onlyFirstSegment && isLoaded && /^EN/.test(name)" :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}s.png`" />
-    <img v-if="!onlyFirstSegment && isLoaded && /^EN71/.test(name)" :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}s.png`" />
-    <img v-if="!onlyFirstSegment && isLoaded && /^EN/.test(name)" :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}ra.png`" />
-    <img v-if="!onlyFirstSegment && !isLoaded && /^2EN/.test(name)" :src="placeholderUrl" />
-  </div>
+  <!-- Handling członów EZT -->
+  <img
+    class="train-thumbnail"
+    v-if="!onlyFirstSegment && isLoaded && /^EN/.test(name)"
+    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}s.png`"
+  />
+
+  <img
+    class="train-thumbnail"
+    v-if="!onlyFirstSegment && isLoaded && /^EN71/.test(name)"
+    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}s.png`"
+  />
+
+  <img
+    class="train-thumbnail"
+    v-if="!onlyFirstSegment && isLoaded && /^EN/.test(name)"
+    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}ra.png`"
+  />
+
+  <img class="train-thumbnail" v-if="!onlyFirstSegment && !isLoaded && /^2EN/.test(name)" :src="placeholderUrl" />
 </template>
 
 <script lang="ts">
@@ -58,12 +73,12 @@ export default defineComponent({
     },
 
     stockType() {
-      if (!this.store.rollingStockData) return 'unknown';
+      if (!this.store.rollingStockData) return 'vehicle-unknown';
 
       return (
         Object.keys(this.store.rollingStockData.info).find((type) => {
           return this.store.rollingStockData?.info[type as keyof RollingStockInfo].find((v) => v[0] === this.name.split(':')[0]);
-        }) || 'unknown'
+        }) || 'vehicle-unknown'
       );
     },
   },
@@ -83,14 +98,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.thumbnail-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-}
-
-img {
+.train-thumbnail {
   width: auto;
   height: auto;
+  max-height: 60px;
 }
 </style>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -17,12 +17,18 @@
 
       <span class="badge">
         <span>{{ $t('journal.stock-length') }}</span>
-        <span> {{ currentHistoryIndex == 0 ? timetable.stockLength : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength }}m </span>
+        <span>
+          {{ currentHistoryIndex == 0 ? timetable.stockLength : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength }}m
+        </span>
       </span>
 
       <span class="badge">
         <span>{{ $t('journal.stock-mass') }}</span>
-        <span> {{ Math.floor((currentHistoryIndex == 0 ? timetable.stockMass! : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000) }}t </span>
+        <span>
+          {{
+            Math.floor((currentHistoryIndex == 0 ? timetable.stockMass! : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000)
+          }}t
+        </span>
       </span>
     </div>
 
@@ -34,9 +40,9 @@
     </div>
 
     <ul class="stock-list">
-      <li v-for="(car, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" :key="i">
-        <TrainThumbnail :name="car" />
-        <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+      <li v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" :key="i">
+        <TrainThumbnail :name="stockName" />
+        <div>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</div>
       </li>
     </ul>
   </div>
@@ -146,6 +152,5 @@ ul.stock-list {
     color: #aaa;
     font-size: 0.9em;
   }
-
 }
 </style>

src/components/SceneryView/SceneryInfo.vue

@@ -2,7 +2,7 @@
   <div class="scenery-info">
     <section v-if="!timetableOnly">
       <div class="scenery-info-general" v-if="station.generalInfo">
-        <scenery-info-icons :station="station" />
+        <SceneryInfoIcons :station="station" />
 
         <div class="scenery-general-list">
           <span>
@@ -26,28 +26,16 @@
           </span>
           <span v-if="station.generalInfo.project">
             &bull; <b>{{ $t('scenery.project-title') }}: </b>
-            <a
-              style="color: salmon; text-decoration: underline; font-weight: bold"
-              :href="station.generalInfo.projectUrl"
-              target="_blank"
-            >
+            <a style="color: salmon; text-decoration: underline; font-weight: bold" :href="station.generalInfo.projectUrl" target="_blank">
               {{ station.generalInfo.project }}
             </a>
           </span>
         </div>
 
-        <scenery-info-routes :station="station" />
+        <SceneryInfoRoutes :station="station" />
 
         <div class="scenery-authors" v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0">
-          <b>
-            {{
-              $t(
-                'scenery.authors-title',
-                { authors: station.generalInfo.authors.length },
-                station.generalInfo.authors.length
-              )
-            }}:
-          </b>
+          <b> {{ $t('scenery.authors-title', { authors: station.generalInfo.authors.length }, station.generalInfo.authors.length) }}: </b>
           {{ station.generalInfo.authors.join(', ') }}
         </div>
       </div>
@@ -55,14 +43,14 @@
       <div style="margin: 2em 0; height: 2px; background-color: white"></div>
 
       <!-- info dispatcher -->
-      <scenery-info-dispatcher :station="station" :onlineFrom="onlineFrom" />
+      <SceneryInfoDispatcher :station="station" :onlineFrom="onlineFrom" />
 
       <div class="info-lists">
         <!-- user list -->
-        <scenery-info-user-list :station="station" />
+        <SceneryInfoUserList :station="station" />
 
         <!-- spawn list -->
-        <scenery-info-spawn-list :station="station" />
+        <SceneryInfoSpawnList :station="station" />
       </div>
     </section>
   </div>

src/components/SceneryView/SceneryTimetable.vue

@@ -14,19 +14,11 @@
         </span>
 
         <span class="header_links">
-          <a
-            :href="`https://pragotron-td2.web.app/board?name=${station.name}`"
-            target="_blank"
-            :title="$t('scenery.pragotron-link')"
-          >
+          <a :href="`https://pragotron-td2.web.app/board?name=${station.name}`" target="_blank" :title="$t('scenery.pragotron-link')">
             <img :src="getIcon('pragotron')" alt="icon-pragotron" />
           </a>
 
-          <a
-            :href="`https://tablice-td2.web.app/?station=${station.name}`"
-            target="_blank"
-            :title="$t('scenery.tablice-link')"
-          >
+          <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
             <img :src="getIcon('tablice', 'ico')" alt="icon-tablice" />
           </a>
         </span>
@@ -39,8 +31,8 @@
           <button
             :key="cp.checkpointName"
             class="checkpoint_item"
-            :class="{ current: selectedCheckpoint === cp.checkpointName }"
-            @click="selectCheckpoint(cp)"
+            :class="{ current: chosenCheckpoint === cp.checkpointName }"
+            @click="setCheckpoint(cp)"
           >
             {{ cp.checkpointName }}
           </button>
@@ -106,15 +98,12 @@
                 </div>
                 <div v-else>
                   <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
-                    }}</s>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</s>
                   </div>
 
                   <span>
                     {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
                   </span>
                 </div>
               </span>
@@ -146,15 +135,12 @@
                 </div>
                 <div v-else>
                   <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(scheduledTrain.stopInfo.departureTimestamp)
-                    }}</s>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</s>
                   </div>
 
                   <span>
                     {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.departureDelay }})
                   </span>
                 </div>
               </span>
@@ -203,16 +189,22 @@ export default defineComponent({
     listOpen: false,
   }),
 
+  mounted() {
+    this.loadSelectedOption();
+  },
+
+  activated() {
+    this.loadSelectedOption();
+  },
+
   setup(props) {
     const route = useRoute();
     const currentURL = computed(() => `${location.origin}${route.fullPath}`);
 
     const store = useStore();
 
-    const selectedCheckpoint = ref(
-      props.station?.generalInfo?.checkpoints?.length == 0
-        ? ''
-        : props.station?.generalInfo?.checkpoints[0].checkpointName || ''
+    const chosenCheckpoint = ref(
+      props.station?.generalInfo?.checkpoints?.length == 0 ? '' : props.station?.generalInfo?.checkpoints[0].checkpointName || null
     );
 
     const computedScheduledTrains = computed(() => {
@@ -221,8 +213,7 @@ export default defineComponent({
       const station = props.station as Station;
 
       let scheduledTrains =
-        station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === selectedCheckpoint.value)
-          ?.scheduledTrains ||
+        station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === chosenCheckpoint.value)?.scheduledTrains ||
         station.onlineInfo?.scheduledTrains ||
         [];
 
@@ -243,12 +234,21 @@ export default defineComponent({
 
     return {
       currentURL,
-      selectedCheckpoint,
+      chosenCheckpoint,
       computedScheduledTrains,
       store,
     };
   },
 
+  computed: {
+    tabliceZbiorczeHref() {
+      let url = `https://tablice-td2.web.app/?station=${this.station.name}`;
+      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
+
+      return url;
+    },
+  },
+
   methods: {
     loadSelectedOption() {
       if (!this.station) return;
@@ -256,27 +256,19 @@ export default defineComponent({
       if (!this.station.generalInfo.checkpoints) return;
       if (this.station.generalInfo.checkpoints.length == 0) return;
 
-      if (this.selectedCheckpoint != '') return;
+      if (this.chosenCheckpoint != '') return;
 
-      this.selectedCheckpoint = this.station.generalInfo.checkpoints[0].checkpointName;
+      this.chosenCheckpoint = this.station.generalInfo.checkpoints[0].checkpointName;
     },
 
-    selectCheckpoint(cp: { checkpointName: string }) {
-      this.selectedCheckpoint = cp.checkpointName;
+    setCheckpoint(cp: { checkpointName: string }) {
+      this.chosenCheckpoint = cp.checkpointName;
     },
 
     showTimetableOnlyView() {
       this.$router.push(`${this.$route.fullPath}&timetableOnly=1`);
     },
   },
-
-  mounted() {
-    this.loadSelectedOption();
-  },
-
-  activated() {
-    this.loadSelectedOption();
-  },
 });
 </script>
 

src/components/TrainsView/TrainInfo.vue

@@ -107,7 +107,14 @@ export default defineComponent({
 });
 </script>
 
+<!-- Global style for TrainThumbnail -->
 <style lang="scss">
+.train-stats .train-thumbnail {
+  max-width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 
@@ -120,15 +127,12 @@ export default defineComponent({
 .train-stats {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   flex-direction: column;
   text-align: center;
 
   gap: 0.25em;
-
-  img {
-    max-width: 100%;
-  }
 }
 
 .train-info {

src/components/TrainsView/TrainSchedule.vue

@@ -2,35 +2,9 @@
   <div class="train-schedule" @click="toggleShowState">
     <div class="train-stock">
       <ul class="stock-list">
-        <!-- <li>
-          <img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" />
-          <div>{{ train.locoType }}</div>
-        </li> -->
-
-        <!-- <li v-if="train.locoType.startsWith('EN')">
-          <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
-          <div>{{ train.locoType }}S</div>
-        </li>
-
-        <li v-if="train.locoType.startsWith('EN71')">
-          <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
-          <div>{{ train.locoType }}S</div>
-        </li>
-
-        <li v-if="train.locoType.startsWith('EN')">
-          <img :src="train.locoURL.replace('rb', 'ra')" @error="onImageError" alt="" />
-          <div>{{ train.locoType }}RA</div>
-        </li> -->
-
         <li v-for="(stockName, i) in train.stockList" :key="i">
-          <!-- <img
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-            @error="onImageError"
-            alt="car"
-          /> -->
-
           <TrainThumbnail :name="stockName" />
-          <div>{{ stockName.replace(/_/g, ' ').split(':')[0] }}</div>
+          <p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
         </li>
       </ul>
     </div>
@@ -61,9 +35,7 @@
               <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
             </div>
 
-            <span
-              v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)"
-            >
+            <span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)">
               {{ stop.departureLine }}
             </span>
 
@@ -147,8 +119,7 @@ export default defineComponent({
         end: stop.terminatesHere,
         delayed: stop.departureDelay > 0,
         sbl: /sbl/gi.test(stop.stopName),
-        [stop.stopType.replaceAll(', ', '-')]:
-          stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
+        [stop.stopType.replaceAll(', ', '-')]: stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
         'minor-stop-active': this.activeMinorStops.includes(index),
         'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere,
       };
@@ -194,16 +165,18 @@ ul.stock-list {
   display: flex;
   align-items: flex-end;
   overflow: auto;
+
   padding-bottom: 1em;
 
-  li > div {
+  li > p {
     text-align: center;
     color: #aaa;
     font-size: 0.9em;
+    margin-top: 0.5em;
   }
 
   img {
-    max-height: 60px;
+    height: 60px;
   }
 }
 

src/views/SceneryView.vue

@@ -45,6 +45,7 @@ import { computed, defineComponent, PropType } from 'vue';
 import { useRoute } from 'vue-router';
 import routerMixin from '../mixins/routerMixin';
 import { useStore } from '../store/store';
+
 import SceneryInfo from '../components/SceneryView/SceneryInfo.vue';
 import SceneryHeader from '../components/SceneryView/SceneryHeader.vue';
 import SceneryTimetable from '../components/SceneryView/SceneryTimetable.vue';