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;

src/components/JournalView/JournalTimetables/EntryStops.vue

@@ -70,23 +70,20 @@
       </li>
     </ul>
 
-    <div class="g-separator" />
-
-    <div class="entry-path-details" v-if="timetablePathDetails">
-      <span
+    <ul class="timetable-path-list" v-if="timetablePathDetails">
+      <li
         v-for="(pathData, i) in timetablePathDetails"
         :data-visited="pathData.isVisited"
         :data-next-visited="
           i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
         "
       >
-        <span class="path-arrival" v-if="pathData.arrival"> / {{ pathData.arrival }} &gt; </span>
+        <span v-if="i > 0" class="path-arrow">&gt;</span>
+        <span class="path-arrival" v-if="pathData.arrival">{{ pathData.arrival }}</span>
         <b class="path-scenery">{{ pathData.sceneryName }}</b>
-        <span class="path-departure" v-if="pathData.departure">
-          &gt; {{ pathData.departure }}&nbsp;
-        </span>
-      </span>
-    </div>
+        <span class="path-departure" v-if="pathData.departure">{{ pathData.departure }}</span>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -193,7 +190,6 @@ export default defineComponent({
   word-wrap: break-word;
   gap: 0.25em;
   font-size: 0.95em;
-  color: #adadad;
 }
 
 .stop-list {
@@ -251,13 +247,45 @@ export default defineComponent({
   }
 }
 
-.entry-path-details {
+.timetable-path-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em 0;
   padding: 0.5em 0;
+  color: #ccc;
+
+  li > .path-scenery:first-child,
+  li > .path-arrival:nth-child(2) {
+    border-radius: 0.5em 0 0 0.5em;
+  }
+
+  li > :last-child {
+    border-radius: 0 0.5em 0.5em 0;
+  }
 }
 
-.entry-path-details > span[data-visited='true'] {
+.path-scenery {
+  padding: 0.25em 0.5em;
+  background-color: #303030;
+}
+
+.path-arrival,
+.path-departure {
+  padding: 0.25em;
+  display: inline-block;
+  background-color: #4e4e4e;
+  min-width: 25px;
+  text-align: center;
+}
+
+.path-arrow {
+  padding: 0 0.5em;
+}
+
+.timetable-path-list > li[data-visited='true'] {
   .path-arrival,
-  .path-scenery {
+  .path-scenery,
+  .path-arrow {
     color: lightgreen;
   }
 

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -5,9 +5,9 @@
 
     <div @click="toggleExtraInfo" style="cursor: pointer">
       <!-- Route -->
-      <span class="entry-route">
+      <div class="entry-route">
         <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
-      </span>
+      </div>
 
       <hr />
 
@@ -134,8 +134,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+
 .timetable-history-entry {
   background-color: #1a1a1a;
   padding: 1em;
 }
+
+@include smallScreen {
+  .entry-route {
+    text-align: center;
+  }
+}
 </style>