chore: displaying other driver's trains in the driver view

src/locales/en.json

@@ -407,9 +407,10 @@
     "driver-return-link": "GO BACK",
 
     "driver-not-found-header": "Train not found! :/",
-    "driver-not-found-desc-1": "This train has already been terminated or it's offline.",
+    "driver-not-found-desc-1": "This train has already been terminated, changed its number or is offline.",
     "driver-not-found-desc-2": "You can browse timetable history in the",
     "driver-not-found-journal": "TIMETABLES JOURNAL",
+    "driver-not-found-others": "Player {driver} is online with the train number | Player {driver} is online with the train numbers",
     "driver-not-found-return": "GO BACK TO THE MAIN SITE"
   },
   "train-stats": {

src/locales/pl.json

@@ -393,9 +393,10 @@
     "driver-return-link": "POWRÓT",
 
     "driver-not-found-header": "Nie znaleziono pociągu! :/",
-    "driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg lub jest offline.",
+    "driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg, zmienił numer lub jest offline.",
     "driver-not-found-desc-2": "Historię rozkładów jazdy możesz przejrzeć w",
     "driver-not-found-journal": "DZIENNIKU RJ",
+    "driver-not-found-others": "Gracz {driver} jest online pod numerem | Gracz {driver} jest online pod numerami",
     "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
   },
   "train-stats": {

src/views/DriverView.vue

@@ -31,7 +31,8 @@
 
       <div v-else class="driver-not-found">
         <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
-        <p>
+
+        <p class="text--grayed">
           {{ $t('trains.driver-not-found-desc-1') }} <br />
           {{ $t('trains.driver-not-found-desc-2') }}
           <router-link to="/journal/timetables"
@@ -39,25 +40,47 @@
           >!
         </p>
 
-        <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+        <p v-if="props.trainId && otherDriverTrains.length > 0">
+          {{
+            $t(
+              'trains.driver-not-found-others',
+              { driver: otherDriverTrains[0].driverName },
+              otherDriverTrains.length
+            )
+          }}:
+          <!-- Użytkownik <b>{{ otherDriverTrains[0].driverName }}</b> jest online pod numerem: -->
+        </p>
+
+        <div class="other-driver-trains">
+          <template v-for="(train, i) in otherDriverTrains">
+            <router-link :to="`/driver?trainId=${train.id}`">
+              {{ train.trainNo }}
+              | {{ regionsJSON.find((r) => r.id == train.region)?.name ?? 'PL1' }}
+            </router-link>
+          </template>
+        </div>
+
+        <div style="margin-top: 1em">
+          <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed, onActivated, onMounted, useAttrs } from 'vue';
+import { computed } from 'vue';
 import TrainInfo from '../components/TrainsView/TrainInfo.vue';
 import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
+import { regions as regionsJSON } from '../data/options.json';
 
 const props = defineProps({
   trainId: {
-    type: String,
-    required: true
+    type: String
   },
 
   modalId: {
@@ -72,8 +95,12 @@ const chosenTrain = computed(() =>
   mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
 );
 
-onActivated(() => {
-  console.log();
+const otherDriverTrains = computed(() => {
+  return mainStore.trainList.filter(
+    (train) =>
+      train.driverId == Number(props.trainId?.split('|')[0]) &&
+      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
+  );
 });
 </script>
 
@@ -86,7 +113,7 @@ $viewBgCol: #1a1a1a;
   margin: 0 auto;
   padding: 1em 0;
   max-width: 2000px;
-  min-height: 95vh;
+  min-height: calc(100vh - 7em);
 }
 
 .actions {
@@ -115,10 +142,10 @@ $viewBgCol: #1a1a1a;
   background-color: $viewBgCol;
   text-align: center;
   padding: 1em;
+  border-radius: 0.5em 0.5em;
 
   p {
-    padding: 1em 0;
-    color: #aaa;
+    padding: 0.5em 0;
   }
 
   a {
@@ -127,6 +154,13 @@ $viewBgCol: #1a1a1a;
   }
 }
 
+.other-driver-trains {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 @include smallScreen {
   .actions > a > span.hidable {
     display: none;