chore: added SBL icon & route tooltips

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>

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>

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: {

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],

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="
-                      src="/images/icon-we4a.png"
+                        stop.departureLineInfo.isElectric
-                      :title="$t('trains.we4a-tooltip')"
+                          ? '/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="
-                      src="/images/icon-we4a.png"
+                        scheduleStops[i + 1].arrivalLineInfo!.isElectric
-                      :title="$t('trains.we4a-tooltip')"
+                          ? '/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';
-
+import { TrainScheduleStop } from './typings';
-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;
-}
 
 export default defineComponent({
   components: { StopLabel, StockList },
@@ -534,6 +530,7 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 
   img {
     width: 1em;
+    cursor: help;
   }
 }
 

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;
+}

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: ",

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: ",