chore: displaying warning notes in driver view & journal timetables

src/components/Global/StockList.vue

@@ -180,7 +180,6 @@ export default defineComponent({
   align-items: flex-end;
   overflow: auto;
   margin: 0 auto;
-  padding: 1em 0;
 }
 
 ul > li > span {

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>

src/components/TrainsView/TrainInfo.vue

@@ -8,11 +8,21 @@
             #{{ train.timetableData.timetableId }}
           </span>
 
-          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
+          <span
+            class="train-badge twr"
+            v-if="train.timetableData?.TWR"
+            data-tooltip-type="BaseTooltip"
+            :data-tooltip-content="$t('general.TWR') + `:\n${train.timetableData.warningNotes}`"
+          >
             TWR
           </span>
 
-          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
+          <span
+            class="train-badge skr"
+            v-if="train.timetableData?.SKR"
+            data-tooltip-type="BaseTooltip"
+            :data-tooltip-content="$t('general.SKR')"
+          >
             SKR
           </span>
 
@@ -129,6 +139,20 @@
       <div class="text--grayed" style="margin-top: 0.25em">
         {{ displayTrainPosition(train) }}
       </div>
+
+      <div
+        class="train-dangers"
+        v-if="extended && (train.timetableData?.TWR || train.timetableData?.SKR)"
+      >
+        <div v-if="train.timetableData.TWR">
+          <b style="color: var(--clr-twr)">TWR</b> - {{ $t('general.TWR') }}
+          <i>({{ train.timetableData?.warningNotes }})</i>
+        </div>
+
+        <div v-if="train.timetableData.SKR">
+          <b style="color: var(--clr-skr)">SKR</b> - {{ $t('general.SKR') }}
+        </div>
+      </div>
     </section>
 
     <section class="train-stats" v-if="!extended">
@@ -199,7 +223,7 @@ export default defineComponent({
         query: {
           'search-driver': this.train.driverName
         }
-      }
+      };
     }
   }
 });
@@ -226,6 +250,10 @@ export default defineComponent({
   line-height: 1.5em;
 }
 
+.train-dangers {
+  margin-top: 0.5em;
+}
+
 .train-info {
   display: grid;
   grid-template-columns: 2fr 1fr;

src/locales/en.json

@@ -441,6 +441,7 @@
 
     "no-further-data": "No further data for current parameters",
     "loading-further-data": "Loading...",
+    
 
     "route-length": "Route length:",
     "station-count": "Stations:",
@@ -460,10 +461,14 @@
 
     "entry-details": "DETAILS",
     "no-entry-details": "NO DETAILS AVAILABLE",
+
     "stock-length": "Length",
     "stock-mass": "Mass",
     "stock-max-speed": "Max. speed",
 
+    "stock-dangers": "ADDITIONAL NOTES",
+    "stock-preview": "STOCK PREVIEW",
+
     "load-data": "Load further data...",
 
     "last-seen-at": "Last seen at",

src/locales/pl.json

@@ -450,6 +450,9 @@
     "stock-mass": "Masa",
     "stock-max-speed": "Prędkość maks.",
 
+    "stock-dangers": "DODATKOWE UWAGI",
+    "stock-preview": "PODGLĄD SKŁADU",
+
     "load-data": "Pobierz dalszą historię...",
 
     "last-seen-at": "Ostatnio widziany na: ",

src/store/mainStore.ts

@@ -94,7 +94,8 @@ export const useMainStore = defineStore('mainStore', {
                   followingStops: timetable.stopList,
                   routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
                   sceneries: timetable.sceneries,
-                  // sceneryNames: sceneryNames.reverse(),
+                  warningNotes: timetable.warningNotes,
+
                   timetablePath: timetable.path.split(';').map((pathElementString) => {
                     const [arrival, station, departure] = pathElementString.split(',');
 

src/styles/global.scss

@@ -355,4 +355,5 @@ a.a-button {
   width: 100%;
   height: 2px;
   background-color: #aaa;
+  margin: 0.5em 0;
 }

src/typings/api.ts

@@ -204,6 +204,7 @@ export namespace API {
       sceneries: string[];
 
       path: string;
+      warningNotes: string | null;
     }
   }
 

src/typings/common.ts

@@ -72,19 +72,22 @@ export interface Train {
   isTimeout: boolean;
   isSupporter: boolean;
 
-  driverRouteLocation: RouteLocationRaw,
+  driverRouteLocation: RouteLocationRaw;
 
-  timetableData?: {
-    timetableId: number;
-    category: string;
-    route: string;
-    followingStops: TrainStop[];
-    TWR: boolean;
-    SKR: boolean;
-    routeDistance: number;
-    sceneries: string[];
-    timetablePath: TimetablePathElement[];
-  };
+  timetableData?: TrainTimetableData;
+}
+
+export interface TrainTimetableData {
+  timetableId: number;
+  category: string;
+  route: string;
+  followingStops: TrainStop[];
+  TWR: boolean;
+  SKR: boolean;
+  routeDistance: number;
+  sceneries: string[];
+  timetablePath: TimetablePathElement[];
+  warningNotes: string | null;
 }
 
 export interface Station {