chore: added TN/PN freight types

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -66,19 +66,28 @@
 
         <ul>
           <li v-if="timetable.twr">
-            <b class="text--primary">{{ $t('general.TWR') }} (TWR)</b>
+            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
-            <span v-if="timetable.warningNotes">
-              | <i>{{ timetable.warningNotes }}</i>
-            </span>
           </li>
 
           <li v-if="timetable.skr">
-            <b class="text--primary">{{ $t('general.SKR') }}</b>
+            <b class="text--primary">{{ $t('warnings.SKR') }}</b>
-            <span v-if="timetable.warningNotes">
+          </li>
-              | Komentarze: <i>{{ timetable.warningNotes }}</i>
+
-            </span>
+          <li v-if="timetable.hasDangerousCargo">
+            <b class="text--primary">{{ $t('warnings.TN') }}</b>
+          </li>
+
+          <li v-if="timetable.hasExtraDeliveries">
+            <b class="text--primary">{{ $t('warnings.PN') }}</b>
           </li>
         </ul>
+
+        <div class="dangers-notes" v-if="timetable.warningNotes">
+          <h4>{{ $t('warnings.header-title') }}</h4>
+          <p>
+            <i>{{ timetable.warningNotes }}</i>
+          </p>
+        </div>
       </div>
 
       <!-- Historia zmian w składzie -->
@@ -234,6 +243,19 @@ hr {
   list-style: disc;
   padding-left: 1em;
   padding-top: 0.5em;
+  white-space: pre-wrap;
+}
+
+.dangers-notes {
+  margin-top: 0.5em;
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0.25em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
+  }
 }
 
 @include smallScreen() {

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -7,21 +7,38 @@
         class="train-badge twr"
         v-if="timetable.twr"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="
+        :data-tooltip-content="$t('warnings.TWR')"
-          $t('general.TWR') + `${timetable.warningNotes ? ':\n' + timetable.warningNotes : ''}`
-        "
       >
         TWR
       </span>
+
       <span
         class="train-badge skr"
         v-if="timetable.skr"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="$t('general.SKR')"
+        :data-tooltip-content="$t('warnings.SKR')"
       >
         SKR
       </span>
 
+      <span
+        class="train-badge tn"
+        v-if="timetable.hasDangerousCargo"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.TN')"
+      >
+        TN
+      </span>
+
+      <span
+        class="train-badge pn"
+        v-if="timetable.hasExtraDeliveries"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.PN')"
+      >
+        PN
+      </span>
+
       <span>
         <strong
           data-tooltip-type="BaseTooltip"

src/components/TrainsView/TrainInfo.vue

@@ -12,18 +12,27 @@
             class="train-badge twr"
             v-if="train.timetableData?.TWR"
             data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('general.TWR') + `:\n${train.timetableData.warningNotes}`"
+            :data-tooltip-content="$t('warnings.TWR')"
           >
             TWR
           </span>
 
           <span
-            class="train-badge skr"
+            class="train-badge tn"
-            v-if="train.timetableData?.SKR"
+            v-if="train.timetableData?.hasDangerousCargo"
             data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('general.SKR')"
+            :data-tooltip-content="$t('warnings.TN')"
           >
-            SKR
+            TN
+          </span>
+
+          <span
+            class="train-badge pn"
+            v-if="train.timetableData?.hasExtraDeliveries"
+            data-tooltip-type="BaseTooltip"
+            :data-tooltip-content="$t('warnings.PN')"
+          >
+            PN
           </span>
 
           <b
@@ -34,7 +43,9 @@
           >
             {{ train.timetableData.category }}
           </b>
+
           <b class="train-number">{{ train.trainNo }}</b>
+
           <span>&bull;</span>
 
           <div class="train-driver">
@@ -142,15 +153,30 @@
 
       <div
         class="train-dangers"
-        v-if="extended && (train.timetableData?.TWR || train.timetableData?.SKR)"
+        v-if="extended && train.timetableData && train.timetableData.warningNotes"
       >
-        <div v-if="train.timetableData.TWR">
+        <div class="dangers-badges">
-          <b style="color: var(--clr-twr)">TWR</b> - {{ $t('general.TWR') }}
+          <div v-if="train.timetableData?.TWR">
-          <i>({{ train.timetableData?.warningNotes }})</i>
+            <div class="train-badge twr">TWR</div>
+            - {{ $t('warnings.TWR') }}
+          </div>
+
+          <div v-if="train.timetableData?.hasDangerousCargo">
+            <div class="train-badge tn">TN</div>
+            - {{ $t('warnings.TN') }}
+          </div>
+
+          <div v-if="train.timetableData?.hasExtraDeliveries">
+            <div class="train-badge pn">PN</div>
+            - {{ $t('warnings.PN') }}
+          </div>
         </div>
 
-        <div v-if="train.timetableData.SKR">
+        <div class="dangers-notes">
-          <b style="color: var(--clr-skr)">SKR</b> - {{ $t('general.SKR') }}
+          <h4>{{ $t('warnings.header-title') }}</h4>
+          <p>
+            <i>{{ train.timetableData?.warningNotes }}</i>
+          </p>
         </div>
       </div>
     </section>
@@ -254,6 +280,24 @@ export default defineComponent({
   margin-top: 0.5em;
 }
 
+.dangers-badges {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.dangers-notes {
+  margin-top: 0.5em;
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0.25em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
+  }
+}
+
 .train-info {
   display: grid;
   grid-template-columns: 2fr 1fr;

src/locales/en.json

@@ -20,11 +20,16 @@
     "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
     "driver-message": "Driver supporting the Stacjownik project!"
   },
+  "warnings": {
+    "TWR": "Train with high risk cargo",
+    "SKR": "Train with exceeded gauge",
+    "PN": "Train with extra deliveries", 
+    "TN": "Train with dangerous cargo",
+    "header-title": "Freight notes:"
+  },
   "general": {
     "and": " and ",
-    "refresh": "REFRESH",
+    "refresh": "REFRESH"
-    "TWR": "High risk freight train",
-    "SKR": "Train with exceeded gauge"
   },
   "update": {
     "title": "Stacjownik update!",

src/locales/pl.json

@@ -20,11 +20,16 @@
     "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
     "driver-message": "Maszynista wspierający projekt Stacjownika!"
   },
+  "warnings": {
+    "TWR": "Pociąg z towarami niebezpiecznie wysokiego ryzyka",
+    "SKR": "Pociąg z przekroczoną skrajnią",
+    "PN": "Pociąg z przesyłkami nadzwyczajnymi",
+    "TN": "Pociąg z towarami niebezpiecznymi",
+    "header-title": "Uwagi przewozowe:"
+  },
   "general": {
     "and": " oraz ",
-    "refresh": "ODŚWIEŻ",
+    "refresh": "ODŚWIEŻ"
-    "TWR": "Towar niebezpieczny wysokiego ryzyka",
-    "SKR": "Przekroczona skrajnia"
   },
   "update": {
     "title": "Aktualizacja Stacjownika!",
@@ -364,7 +369,7 @@
     "current-track": "na szlaku",
 
     "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
-    
+
     "catenary-tooltip": "Szlak zelektryfikowany",
     "no-catenary-tooltip": "Szlak niezelektryfikowany",
     "sbl-tooltip": "Szlak posiadający\nsamoczynną blokadę liniową",

src/store/mainStore.ts

@@ -87,14 +87,16 @@ export const useMainStore = defineStore('mainStore', {
             timetableData: timetable
               ? {
                   timetableId: timetable.timetableId,
-                  SKR: timetable.SKR,
-                  TWR: timetable.TWR,
                   route: timetable.route,
                   category: timetable.category,
                   followingStops: timetable.stopList,
                   routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
                   sceneries: timetable.sceneries,
+                  TWR: timetable.TWR,
+                  SKR: timetable.SKR,
                   warningNotes: timetable.warningNotes,
+                  hasDangerousCargo: timetable.hasDangerousCargo,
+                  hasExtraDeliveries: timetable.hasExtraDeliveries,
 
                   timetablePath: timetable.path.split(';').map((pathElementString) => {
                     const [arrival, station, departure] = pathElementString.split(',');

src/styles/badge.scss

@@ -79,18 +79,17 @@
 }
 
 .train-badge {
-  display: flex;
+  display: inline-block;
-  align-items: center;
   gap: 0.3em;
 
   padding: 0.1em 0.3em;
   border-radius: 0.2em;
   font-weight: bold;
+  user-select: none;
 
   &.twr {
     background-color: var(--clr-twr);
     box-shadow: 0 0 5px 1px var(--clr-twr);
-    color: black;
   }
 
   &.skr {
@@ -98,6 +97,17 @@
     box-shadow: 0 0 5px 1px var(--clr-skr);
   }
 
+  &.tn {
+    background-color: var(--clr-tn);
+    box-shadow: 0 0 5px 1px var(--clr-tn);
+  }
+
+  &.pn {
+    background-color: var(--clr-pn);
+    box-shadow: 0 0 5px 1px var(--clr-pn);
+    color: black;
+  }
+
   &.offline {
     background-color: #be3728;
   }

src/styles/global.scss

@@ -13,7 +13,9 @@
   --clr-accent2: #ff3d5d;
 
   --clr-skr: #ff5100;
-  --clr-twr: #ffbb00;
+  --clr-twr: #ee503e;
+  --clr-tn: #cb4dcf;
+  --clr-pn: #ffd000;
 
   --clr-error: #fa3636;
   --clr-warning: #c59429;

src/styles/variables.scss

@@ -9,6 +9,3 @@ $warningCol: #ffe15b;
 
 $accentCol: #ffc014;
 $accent2Col: #ff3d5d;
-
-$skr: #ff5100;
-$twr: #ffbb00;

src/typings/api.ts

@@ -201,10 +201,11 @@ export namespace API {
 
       TWR: boolean;
       SKR: boolean;
-      sceneries: string[];
+      hasDangerousCargo: boolean;
-
+      hasExtraDeliveries: boolean;
-      path: string;
       warningNotes: string | null;
+      sceneries: string[];
+      path: string;
     }
   }
 
@@ -266,6 +267,8 @@ export namespace API {
       sceneryNames: string[];
       path: string;
       warningNotes: string | null;
+      hasDangerousCargo: boolean;
+      hasExtraDeliveries: boolean;
     }
 
     export type Response = Data[];

src/typings/common.ts

@@ -84,10 +84,12 @@ export interface TrainTimetableData {
   followingStops: TrainStop[];
   TWR: boolean;
   SKR: boolean;
+  hasDangerousCargo: boolean;
+  hasExtraDeliveries: boolean;
+  warningNotes: string | null;
   routeDistance: number;
   sceneries: string[];
   timetablePath: TimetablePathElement[];
-  warningNotes: string | null;
 }
 
 export interface Station {