From 69d9be0bb368ea6f039b7a2423ffe2a710537209 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Sep 2024 15:26:14 +0200
Subject: [PATCH 1/6] chore: minor thumbnail loading changes

---
 src/components/Global/StockList.vue           | 25 ++------------
 src/components/Global/VehicleThumbnail.vue    | 33 ++++++++++++-------
 .../Tooltip/VehiclePreviewTooltip.vue         |  5 ++-
 3 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/src/components/Global/StockList.vue b/src/components/Global/StockList.vue
index fe0a894..9534cda 100644
--- a/src/components/Global/StockList.vue
+++ b/src/components/Global/StockList.vue
@@ -1,21 +1,11 @@
 <template>
   <div class="stock-list">
     <ul>
-      <li
-        v-for="(
-          { vehicleName, vehicleCargo, images, imagesFallbacks, vehicleString }, i
-        ) in thumbnailNames"
-        :key="i"
-      >
-        <div class="stock-text">
-          <div>{{ vehicleName.replace(/_/g, ' ') }}</div>
-          <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
-        </div>
-
+      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames" :key="i">
         <span>
           <VehicleThumbnail
             v-for="(thumbnailImage, imageIndex) in images"
-            :vehicle-name="vehicleString"
+            :vehicle-string="vehicleString"
             :img-name="thumbnailImage"
             :fallback-name="imagesFallbacks[imageIndex]"
           />
@@ -59,13 +49,12 @@ export default defineComponent({
       return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
         .filter((v) => v.length != 0)
         .map((vehicleString) => {
-          const [vehicleName, vehicleCargo] = vehicleString.split(':');
+          const [vehicleName] = vehicleString.split(':');
 
           const vehicleThumbnailData = {
             images: [] as string[],
             imagesFallbacks: [] as string[],
             vehicleName,
-            vehicleCargo,
             vehicleString
           };
 
@@ -187,12 +176,4 @@ ul > li > span {
   align-items: flex-end;
   cursor: crosshair;
 }
-
-.stock-text {
-  text-align: center;
-  color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
-  padding: 0.25em 0;
-}
 </style>
diff --git a/src/components/Global/VehicleThumbnail.vue b/src/components/Global/VehicleThumbnail.vue
index e5c6c1b..68fad4b 100644
--- a/src/components/Global/VehicleThumbnail.vue
+++ b/src/components/Global/VehicleThumbnail.vue
@@ -1,12 +1,16 @@
 <template>
-  <div class="vehicle-thumbnail" :data-load-status="imgStatus">
+  <div class="vehicle-thumbnail" :data-load-status="imgStatus" ref="thumbRef">
+    <div class="stock-text">
+      <div>{{ vehicleName }}</div>
+      <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
+    </div>
+
     <img
-      ref="imgRef"
       :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
       height="60"
       loading="lazy"
       data-tooltip-type="VehiclePreviewTooltip"
-      :data-tooltip-content="vehicleName"
+      :data-tooltip-content="vehicleString"
       @error="onImageError"
       @load="onImageLoad"
     />
@@ -14,19 +18,21 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from 'vue';
+import { computed, Ref, ref } from 'vue';
 
 const props = defineProps({
-  vehicleName: { type: String, required: true },
+  vehicleString: { type: String, required: true },
   imgName: { type: String, required: true },
   fallbackName: { type: String, required: true },
   placeholderName: String
 });
 
-const imgRef = ref(null) as Ref<HTMLElement | null>;
-
+const thumbRef = ref(null) as Ref<HTMLElement | null>;
 const imgStatus = ref('loading');
 
+const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
+const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
+
 function onImageError(event: Event) {
   (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
   imgStatus.value = 'error';
@@ -37,13 +43,15 @@ function onImageLoad() {
     imgStatus.value = 'loaded';
   }
 
-  if (imgRef.value) imgRef.value.style.opacity = '1';
+  if (thumbRef.value) thumbRef.value.style.opacity = '1';
 }
 </script>
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
   position: relative;
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
 
   &[data-load-status='loading'] {
     min-height: 60px;
@@ -51,8 +59,11 @@ function onImageLoad() {
   }
 }
 
-img {
-  opacity: 0;
-  transition: opacity 100ms ease-in-out;
+.stock-text {
+  text-align: center;
+  color: #aaa;
+  font-size: 0.9em;
+  margin-bottom: 0.25em;
+  padding: 0.25em 0;
 }
 </style>
diff --git a/src/components/Tooltip/VehiclePreviewTooltip.vue b/src/components/Tooltip/VehiclePreviewTooltip.vue
index 2d1e929..1dc190d 100644
--- a/src/components/Tooltip/VehiclePreviewTooltip.vue
+++ b/src/components/Tooltip/VehiclePreviewTooltip.vue
@@ -77,9 +77,12 @@ export default defineComponent({
     },
 
     vehicleCargo() {
-      return this.vehicleData?.group.cargoTypes?.find(
+      const x = this.vehicleData?.group.cargoTypes?.find(
         (c) => c.id == this.tooltipStore.content.split(':')[1]
       );
+      console.log(this.vehicleData, x);
+
+      return x;
     }
   }
 });

From 3daf800a896549803f09447da8501dce5e3b58e1 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Sep 2024 15:55:33 +0200
Subject: [PATCH 2/6] chore: added SBL icon & route tooltips

---
 public/images/icon-catenary.svg             |  3 +
 public/images/icon-sbl-transparent.svg      |  5 ++
 src/App.vue                                 |  1 +
 src/components/TrainsView/StopLabel.vue     |  2 +-
 src/components/TrainsView/TrainSchedule.vue | 87 ++++++++++-----------
 src/components/TrainsView/typings.ts        | 39 +++++++++
 src/locales/en.json                         |  5 +-
 src/locales/pl.json                         |  5 +-
 8 files changed, 99 insertions(+), 48 deletions(-)
 create mode 100644 public/images/icon-catenary.svg
 create mode 100644 public/images/icon-sbl-transparent.svg

diff --git a/public/images/icon-catenary.svg b/public/images/icon-catenary.svg
new file mode 100644
index 0000000..ad22474
--- /dev/null
+++ b/public/images/icon-catenary.svg
@@ -0,0 +1,3 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M82.7143 61.3284L118.429 7L22 74.9104H68.4286L36.2857 137L122 61.3284H82.7143Z" fill="#FFF500"/>
+</svg>
diff --git a/public/images/icon-sbl-transparent.svg b/public/images/icon-sbl-transparent.svg
new file mode 100644
index 0000000..b83b040
--- /dev/null
+++ b/public/images/icon-sbl-transparent.svg
@@ -0,0 +1,5 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 50.006 87.4256)" stroke="white" stroke-width="13.3959"/>
+<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 14.9599 29.6039)" stroke="white" stroke-width="13.3959"/>
+<path d="M65.1133 58.145L79.8524 84.3103" stroke="white" stroke-width="10.0469" stroke-linecap="round" stroke-linejoin="bevel"/>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 7602452..d10d875 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -81,6 +81,7 @@ export default defineComponent({
 
   async mounted() {
     window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
+    window.addEventListener('mousedown', () => this.tooltipStore.hide());
   },
 
   methods: {
diff --git a/src/components/TrainsView/StopLabel.vue b/src/components/TrainsView/StopLabel.vue
index 4730f65..8ad10cf 100644
--- a/src/components/TrainsView/StopLabel.vue
+++ b/src/components/TrainsView/StopLabel.vue
@@ -70,7 +70,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import { TrainScheduleStop } from './TrainSchedule.vue';
+import { TrainScheduleStop } from './typings';
 
 export default defineComponent({
   mixins: [dateMixin],
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 57d4dca..8921c28 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -55,12 +55,28 @@
                   <span>{{ stop.departureLine }}</span>
                   <span v-if="stop.departureLineInfo">
                     | {{ stop.departureLineInfo.routeSpeed }}
-                    <span v-if="stop.departureLineInfo.isElectric">⚡</span>
+
                     <img
-                      v-else
-                      src="/images/icon-we4a.png"
-                      :title="$t('trains.we4a-tooltip')"
+                      :src="
+                        stop.departureLineInfo.isElectric
+                          ? '/images/icon-catenary.svg'
+                          : '/images/icon-we4a.png'
+                      "
                       width="10"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="
+                        $t(
+                          `trains.${!stop.departureLineInfo.isElectric ? 'no-' : ''}catenary-tooltip`
+                        )
+                      "
+                    />
+
+                    <img
+                      v-if="stop.departureLineInfo.isRouteSBL"
+                      src="/images/icon-sbl-transparent.svg"
+                      width="10"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="$t('trains.sbl-tooltip')"
                     />
                   </span>
                 </div>
@@ -79,13 +95,29 @@
 
                   <span v-if="scheduleStops[i + 1].arrivalLineInfo">
                     | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }}
-                    <span v-if="scheduleStops[i + 1].arrivalLineInfo!.isElectric">⚡</span>
+
                     <img
-                      v-else
-                      src="/images/icon-we4a.png"
-                      :title="$t('trains.we4a-tooltip')"
+                      :src="
+                        scheduleStops[i + 1].arrivalLineInfo!.isElectric
+                          ? '/images/icon-catenary.svg'
+                          : '/images/icon-we4a.png'
+                      "
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="
+                        $t(
+                          `trains.${!scheduleStops[i + 1].arrivalLineInfo!.isElectric ? 'no-' : ''}catenary-tooltip`
+                        )
+                      "
                       width="10"
                     />
+
+                    <img
+                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
+                      src="/images/icon-sbl-transparent.svg"
+                      width="10"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="$t('trains.sbl-tooltip')"
+                    />
                   </span>
                 </div>
               </span>
@@ -105,43 +137,7 @@ import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import { StationRoutesInfo, Train } from '../../typings/common';
-
-export interface TrainScheduleStop {
-  nameHtml: string;
-  nameRaw: string;
-
-  status: 'confirmed' | 'unconfirmed' | 'stopped';
-  type: string;
-  position: 'begin' | 'end' | 'en-route';
-
-  arrivalScheduled: number;
-  arrivalReal: number;
-
-  departureScheduled: number;
-  departureReal: number;
-
-  departureDelay: number;
-  arrivalDelay: number;
-
-  duration: number | null;
-
-  isActive: boolean;
-  isLastConfirmed: boolean;
-  isSBL: boolean;
-
-  sceneryName: string | null;
-  distance: number;
-
-  arrivalLine: string | null;
-  departureLine: string | null;
-
-  arrivalLineInfo?: StationRoutesInfo;
-  departureLineInfo?: StationRoutesInfo;
-
-  isExternal: boolean;
-
-  comments: string | null;
-}
+import { TrainScheduleStop } from './typings';
 
 export default defineComponent({
   components: { StopLabel, StockList },
@@ -534,6 +530,7 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 
   img {
     width: 1em;
+    cursor: help;
   }
 }
 
diff --git a/src/components/TrainsView/typings.ts b/src/components/TrainsView/typings.ts
index cf47be5..865bb76 100644
--- a/src/components/TrainsView/typings.ts
+++ b/src/components/TrainsView/typings.ts
@@ -1,3 +1,5 @@
+import { StationRoutesInfo } from "../../typings/common";
+
 export enum TrainFilterSection {
   TRAIN_TYPE = 'TRAIN_TYPE',
   TIMETABLE_TYPE = 'TIMETABLE_TYPE',
@@ -117,3 +119,40 @@ export const sorterOptions: TrainSorter[] = [
     value: 'długość'
   }
 ];
+
+export interface TrainScheduleStop {
+  nameHtml: string;
+  nameRaw: string;
+
+  status: 'confirmed' | 'unconfirmed' | 'stopped';
+  type: string;
+  position: 'begin' | 'end' | 'en-route';
+
+  arrivalScheduled: number;
+  arrivalReal: number;
+
+  departureScheduled: number;
+  departureReal: number;
+
+  departureDelay: number;
+  arrivalDelay: number;
+
+  duration: number | null;
+
+  isActive: boolean;
+  isLastConfirmed: boolean;
+  isSBL: boolean;
+
+  sceneryName: string | null;
+  distance: number;
+
+  arrivalLine: string | null;
+  departureLine: string | null;
+
+  arrivalLineInfo?: StationRoutesInfo;
+  departureLineInfo?: StationRoutesInfo;
+
+  isExternal: boolean;
+
+  comments: string | null;
+}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 68f3c50..8b646d3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -377,7 +377,10 @@
     "current-track": "on track",
 
     "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
-    "we4a-tooltip": "Non-electrified track",
+   
+    "catenary-tooltip": "Electrified route",
+    "no-catenary-tooltip": "Non-electrified route",
+    "sbl-tooltip": "Route with SBL\n(automatic block signalling)",
 
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 2842955..2063a7f 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -364,7 +364,10 @@
     "current-track": "na szlaku",
 
     "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
-    "we4a-tooltip": "Szlak niezelektryfikowany",
+    
+    "catenary-tooltip": "Szlak zelektryfikowany",
+    "no-catenary-tooltip": "Szlak niezelektryfikowany",
+    "sbl-tooltip": "Szlak posiadający\nsamoczynną blokadę liniową",
 
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",

From c8ec28292b8d8fb488dfad91c6eeed244c890edc Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Sep 2024 15:57:45 +0200
Subject: [PATCH 3/6] chore: removed obsolete console logs

---
 .../JournalView/JournalTimetables/JournalTimetablesList.vue   | 4 ----
 src/components/Tooltip/VehiclePreviewTooltip.vue              | 1 -
 2 files changed, 5 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
index f82a881..56ddccd 100644
--- a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
@@ -91,10 +91,6 @@ export default defineComponent({
       deep: true,
       handler() {
         this.extraInfoIndexes.length = 0;
-
-        this.$nextTick(() => {
-          console.log(this.$el.querySelector('ul'));
-        });
       }
     }
   },
diff --git a/src/components/Tooltip/VehiclePreviewTooltip.vue b/src/components/Tooltip/VehiclePreviewTooltip.vue
index 1dc190d..7b30091 100644
--- a/src/components/Tooltip/VehiclePreviewTooltip.vue
+++ b/src/components/Tooltip/VehiclePreviewTooltip.vue
@@ -80,7 +80,6 @@ export default defineComponent({
       const x = this.vehicleData?.group.cargoTypes?.find(
         (c) => c.id == this.tooltipStore.content.split(':')[1]
       );
-      console.log(this.vehicleData, x);
 
       return x;
     }

From e1b9b37ac85755b12f0487238c842ece0b4e8d71 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Sep 2024 15:57:56 +0200
Subject: [PATCH 4/6] bump: v1.28.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e7b806e..cd67176 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "private": true,
   "type": "module",
   "scripts": {

From 547248b47827bb5b2114b1e8f5e424799454ecf2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Sep 2024 16:08:54 +0200
Subject: [PATCH 5/6] chore: updown arrow fix

---
 src/components/TrainsView/TrainSchedule.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 8921c28..1a8b009 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -87,7 +87,7 @@
                 >
                   <span>{{ scheduleStops[i + 1].sceneryName }}</span>
                   <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
-                  <span v-else> &UpArrowDownArrow;</span>
+                  <span v-else> &DownArrowUpArrow;</span>
                 </div>
 
                 <div class="scenery-route">

From 8285d5c5798532ccba4a7f8d1eaea3bf0c38283b Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Sep 2024 20:04:53 +0200
Subject: [PATCH 6/6] fix: tooltips width

---
 src/components/Tooltip/SpawnsTooltip.vue | 3 +--
 src/components/Tooltip/UsersTooltip.vue  | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Tooltip/SpawnsTooltip.vue b/src/components/Tooltip/SpawnsTooltip.vue
index 62f9ac8..f3e631e 100644
--- a/src/components/Tooltip/SpawnsTooltip.vue
+++ b/src/components/Tooltip/SpawnsTooltip.vue
@@ -32,12 +32,11 @@ export default defineComponent({
 
 <style scoped>
 .tooltip-content {
-  width: 300px;
+  width: 200px;
 
   padding: 0.25em 0.5em;
   border-radius: 0.25em;
 
-  width: 100%;
   background-color: #1b1b1b;
   box-shadow: 0 0 5px 2px #aaa;
 }
diff --git a/src/components/Tooltip/UsersTooltip.vue b/src/components/Tooltip/UsersTooltip.vue
index 544aebe..e49d52f 100644
--- a/src/components/Tooltip/UsersTooltip.vue
+++ b/src/components/Tooltip/UsersTooltip.vue
@@ -32,12 +32,11 @@ export default defineComponent({
 
 <style scoped>
 .tooltip-content {
-  width: 300px;
+  width: 200px;
 
   padding: 0.25em 0.5em;
   border-radius: 0.25em;
 
-  width: 100%;
   background-color: #1b1b1b;
   box-shadow: 0 0 5px 2px #aaa;
 }