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">
+              <span>
-                <strong>{{ row.train.timetableData!.category }}</strong>
+                <b
-                {{ row.train.trainNo }}
+                  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>
+          <b
-            <span v-if="train.timetableData" class="text--primary"
+            v-if="train.timetableData"
-              >{{ train.timetableData.category }}&nbsp;</span
+            data-tooltip-type="BaseTooltip"
-            >
+            :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
-            <span class="train-number">{{ train.trainNo }}</span>
+            class="text--primary tooltip-help"
-          </strong>
+          >
+            {{ 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: {

src/locales/en.json

@@ -48,7 +48,47 @@
   "footer": {
     "discord": "Stacjownik Discord server"
   },
+  "categories": {
+    "EI": "domestic express",
+    "EC": "international express",
+    "EN": "domestic night express",
 
+    "MP": "intervoivodeship bullet",
+    "MO": "intervoivodeship regio",
+    "MM": "international bullet",
+    "MH": "intervoivodeship night bullet",
+    
+    "RP": "voivodeship bullet",
+    "RM": "international voivodeship regio",
+    "RO": "voivodeship regio",
+    "RA": "voivodeship regio (urban)",
+
+    "PW": "empty passenger",
+    "PX": "empty passenger test drive",
+
+    "TC": "international freight (intermodal)",
+    "TG": "international freight (organized cargo)",
+    "TR": "international freight (unorganized cargo)",
+    "TD": "domestic freight (intermodal)",
+    "TM": "domestic freight (organized cargo)",
+    "TN": "domestic freight (unorganized cargo)",
+    "TK": "freight (for stations & sidings)",
+    "TS": "empty freight test drive",
+    "TH": "locomotive rolling stock (over 3 vehicles)",
+
+    "LT": "freight locomotive only",
+    "LP": "passenger locomotive only",
+    "LS": "shunting locomotive only",
+    "LZ": "shunting locomotive only",
+
+    "ZN": "inspection / diagnostic type",
+    "ZU": "other maintenance type",
+
+    "E": "electric loco",
+    "J": "EMU",
+    "S": "diesel loco",
+    "M": "DMU"
+  },
   "vehicle-preview": {
     "loading": "Loading preview...",
     "error": "Oops! The vehicle preview seems to be missing! :/"

src/locales/pl.json

@@ -45,6 +45,47 @@
   "footer": {
     "discord": "Serwer Discord Stacjownika"
   },
+  "categories": {
+    "EI": "ekspres krajowy",
+    "EC": "ekspres międzynarodowy",
+    "EN": "ekspres krajowy nocny",
+
+    "MP": "międzywojewódzki pospieszny",
+    "MO": "międzywojewódzki osobowy",
+    "MM": "międzynarodowy pospieszny",
+    "MH": "międzywojewódzki pospieszny (nocny)",
+    
+    "RP": "wojewódzki pospieszny",
+    "RO": "wojewódzki osobowy",
+    "RM": "wojewódzki osobowy międzynarodowy",
+    "RA": "wojewódzki osobowy algomeracyjny",
+
+    "PW": "pasażerski próżny - służbowy",
+    "PX": "pasażerski próżny próbny",
+
+    "TC": "towarowy międzynarodowy intermodalny",
+    "TG": "towarowy międzynarodowy masowy",
+    "TR": "towarowy międzynarodowy niemasowy",
+    "TD": "towarowy krajowy intermodalny",
+    "TM": "towarowy krajowy masowy",
+    "TN": "towarowy krajowy niemasowy",
+    "TK": "towarowy zdawczy",
+    "TS": "towarowy próżny próbny",
+    "TH": "skład lokomotyw (powyżej 3 pojazdów)",
+
+    "LT": "lokomotywa towarowa luzem",
+    "LP": "lokomotywa pasażerska luzem",
+    "LS": "lokomotywa manewrowa luzem",
+    "LZ": "lokomotywa dla poc. utrzymaniowo-naprawczych",
+
+    "ZN": "inspekcyjny / diagnostyczny",
+    "ZU": "inny utrzymaniowy",
+
+    "E": "elektrowóz",
+    "J": "EZT",
+    "S": "spalinowóz",
+    "M": "SZT"
+  },
   "vehicle-preview": {
     "loading": "Ładowanie podglądu...",
     "error": "Ups! Nie znaleziono podglądu pojazdu! :/"

src/mixins/trainCategoryMixin.ts

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    getCategoryExplanation(categoryCode: string) {
+      const categoryKey = categoryCode.slice(0, 2);
+      const vehicleTypeKey = categoryCode.slice(-1);
+
+      return `${this.$t('categories.' + categoryKey)}\n(${this.$t('categories.' + vehicleTypeKey)})`;
+    }
+  }
+});

src/styles/global.scss

@@ -308,6 +308,10 @@ a.a-button {
   z-index: 100;
 }
 
+.tooltip-help {
+  cursor: help;
+}
+
 @include smallScreen {
   ::-webkit-scrollbar {
     width: 0.5em;