feat: category codes explanation tooltips

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -9,7 +9,11 @@
       </span>
 
       <span>
-        <strong class="text--primary">
+        <strong
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(timetable.trainCategoryCode)"
+          class="text--primary tooltip-help"
+        >
           {{ timetable.trainCategoryCode }}
         </strong>
         <strong>&nbsp;{{ timetable.trainNo }}</strong>
@@ -83,9 +87,10 @@ import dateMixin from '../../../mixins/dateMixin';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
+import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin],
+  mixins: [dateMixin, modalTrainMixin, styleMixin, trainCategoryMixin],
 
   data() {
     return {

src/components/SceneryView/SceneryTimetable.vue

@@ -73,15 +73,20 @@
         >
           <span class="timetable-general">
             <span class="general-info">
-              <span class="info-number">
-                <strong>{{ row.train.timetableData!.category }}</strong>
-                {{ row.train.trainNo }}
-
+              <span>
+                <b
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="getCategoryExplanation(row.train.timetableData!.category)"
+                  class="text--primary tooltip-help"
+                >
+                  {{ row.train.timetableData!.category }}
+                </b>
+                <b>&nbsp;{{ row.train.trainNo }}</b>
                 <span v-if="row.checkpointStop.comments" :title="row.checkpointStop.comments">
                   <img src="/images/icon-warning.svg" />
                 </span>
               </span>
-              &nbsp;|&nbsp;
+              &nbsp;&bull;&nbsp;
               <span>
                 {{ row.train.driverName }}
               </span>
@@ -180,13 +185,14 @@ import { useApiStore } from '../../store/apiStore';
 import { ActiveScenery, Station } from '../../typings/common';
 import { SceneryTimetableRow } from './typings';
 import { getTrainStopStatus, stopStatusPriority } from './utils';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, modalTrainMixin],
+  mixins: [dateMixin, routerMixin, modalTrainMixin, trainCategoryMixin],
 
   props: {
     station: {

src/components/Tooltip/BaseTooltip.vue

@@ -23,6 +23,7 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   gap: 0.5em;
+  white-space: pre-line;
 
   padding: 0.25em 0.5em;
   border-radius: 0.25em;

src/components/TrainsView/TrainInfo.vue

@@ -28,12 +28,15 @@
             </span>
           </span>
 
-          <strong>
-            <span v-if="train.timetableData" class="text--primary"
-              >{{ train.timetableData.category }}&nbsp;</span
-            >
-            <span class="train-number">{{ train.trainNo }}</span>
-          </strong>
+          <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>
           <b
             class="level-badge driver"
@@ -181,9 +184,10 @@ import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import { Train } from '../../typings/common';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
+  mixins: [trainInfoMixin, styleMixin, modalTrainMixin, trainCategoryMixin],
   components: { ProgressBar, StockList },
 
   props: {