chore: displaying warning notes in driver view & journal timetables

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -17,23 +17,24 @@
     </div>
 
     <div class="details-body" v-if="showExtraInfo">
-      <hr />
+      <div class="g-separator"></div>
+
       <EntryStops :timetable="timetable" />
 
-      <div class="stock-specs" v-if="timetable.authorName">
-        <span class="badge">
+      <div class="g-separator"></div>
+
+      <div class="stock-specs">
+        <span class="badge" v-if="timetable.authorName">
           <span>{{ $t('journal.dispatcher-name') }}</span>
           <span>{{ timetable.authorName }}</span>
         </span>
-      </div>
 
-      <div class="stock-specs" v-if="timetable.stockMass && timetable.stockHistory.length > 0">
-        <span class="badge">
+        <span class="badge" v-if="timetable.maxSpeed">
           <span>{{ $t('journal.stock-max-speed') }}</span>
           <span>{{ timetable.maxSpeed }}km/h</span>
         </span>
 
-        <span class="badge">
+        <span class="badge" v-if="timetable.stockLength">
           <span>{{ $t('journal.stock-length') }}</span>
           <span>
             {{
@@ -44,13 +45,13 @@
           </span>
         </span>
 
-        <span class="badge">
+        <span class="badge" v-if="timetable.stockMass">
           <span>{{ $t('journal.stock-mass') }}</span>
           <span>
             {{
               Math.floor(
                 (currentHistoryIndex == 0
-                  ? timetable.stockMass!
+                  ? timetable.stockMass
                   : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
               )
             }}t
@@ -58,32 +59,56 @@
         </span>
       </div>
 
-      <!-- Historia zmian w składzie -->
-      <div class="stock-history" v-if="stockHistory.length > 1">
-        <button
-          v-for="(sh, i) in stockHistory"
-          :key="i"
-          class="btn--action"
-          :data-checked="i == currentHistoryIndex"
-          @click.stop="currentHistoryIndex = i"
-        >
-          {{ sh.updatedAt }}
-        </button>
+      <div class="stock-dangers" v-if="timetable.twr || timetable.skr">
+        <div class="g-separator"></div>
+
+        <b>{{ $t('journal.stock-dangers') }}:</b>
+
+        <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>
+          </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>
+          </li>
+        </ul>
       </div>
 
-      <div v-if="timetable.stockString">
-        <StockList
-          :trainStockList="
-            (currentHistoryIndex == 0
-              ? timetable.stockString
-              : stockHistory[currentHistoryIndex].stockString
-            ).split(';')
-          "
-        />
+      <!-- Historia zmian w składzie -->
+      <div v-if="timetable.stockString || stockHistory.length != 0">
+        <div class="g-separator"></div>
+        <b>{{ $t('journal.stock-preview') }}:</b>
+        <div class="stock-history" v-if="stockHistory.length > 1">
+          <button
+            v-for="(sh, i) in stockHistory"
+            :key="i"
+            class="btn--action"
+            :data-checked="i == currentHistoryIndex"
+            @click.stop="currentHistoryIndex = i"
+          >
+            {{ sh.updatedAt }}
+          </button>
+        </div>
+
+        <div v-if="timetable.stockString">
+          <StockList
+            :trainStockList="
+              (currentHistoryIndex == 0
+                ? timetable.stockString
+                : stockHistory[currentHistoryIndex].stockString
+              ).split(';')
+            "
+          />
+        </div>
       </div>
     </div>
-
-    <div v-if="timetable.twr">TWR: {{ timetable.warningNotes }}</div>
   </div>
 </template>
 
@@ -189,7 +214,6 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
-  margin-top: 0.5em;
 
   .badge {
     margin: 0;
@@ -201,6 +225,16 @@ export default defineComponent({
   }
 }
 
+hr {
+  margin: 0.5em 0;
+}
+
+.stock-dangers ul {
+  list-style: disc;
+  padding-left: 1em;
+  padding-top: 0.5em;
+}
+
 ul.stock-list {
   display: flex;
   align-items: flex-end;