chore: added SBL icon & route tooltips

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="/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;
   }
 }
 

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