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>
-            <span v-if="timetable.warningNotes">
-              | <i>{{ timetable.warningNotes }}</i>
-            </span>
+            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
           </li>
 
           <li v-if="timetable.skr">
-            <b class="text--primary">{{ $t('general.SKR') }}</b>
-            <span v-if="timetable.warningNotes">
-              | Komentarze: <i>{{ timetable.warningNotes }}</i>
-            </span>
+            <b class="text--primary">{{ $t('warnings.SKR') }}</b>
+          </li>
+
+          <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() {