feat: driver train view

src/components/JournalView/JournalTimetables/TimetableDetails.vue

@@ -86,12 +86,12 @@
 import { PropType, defineComponent } from 'vue';
 import StockList from '../../Global/StockList.vue';
 import { API } from '../../../typings/api';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import driverViewMixin from '../../../mixins/driverViewMixin';
 
 export default defineComponent({
   components: { StockList },
 
-  mixins: [modalTrainMixin],
+  mixins: [driverViewMixin],
 
   emits: ['toggleExtraInfo'],
 
@@ -138,7 +138,7 @@ export default defineComponent({
     showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
       if (timetable?.terminated) return;
 
-      this.selectModalTrainById(`${timetable.driverName}${timetable.trainNo}`, target);
+      this.driverMixin_showDriverView(`${timetable.driverId}|${timetable.trainNo}|eu`);
     },
 
     toggleExtraInfo() {

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -74,13 +74,12 @@ import { PropType, defineComponent } from 'vue';
 
 import { API } from '../../../typings/api';
 import dateMixin from '../../../mixins/dateMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin, trainCategoryMixin],
+  mixins: [dateMixin, styleMixin, trainCategoryMixin],
 
   data() {
     return {

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -18,8 +18,8 @@
         tabindex="0"
         :key="train.id"
         :data-status="status"
-        @click.prevent="selectModalTrain(train, $event.currentTarget)"
-        @keydown.enter="selectModalTrain(train, $event.currentTarget)"
+        @click.prevent="driverMixin_showDriverView(train.id)"
+        @keydown.enter="driverMixin_showDriverView(train.id)"
       >
         <span class="user_train">{{ train.trainNo }}</span>
         <span class="user_name">{{ train.driverName }}</span>
@@ -30,14 +30,14 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import { ActiveScenery, Station, StopStatus } from '../../../typings/common';
 import { getTrainStopStatus } from '../utils';
 import { useMainStore } from '../../../store/mainStore';
+import driverViewMixin from '../../../mixins/driverViewMixin';
 
 export default defineComponent({
-  mixins: [routerMixin, modalTrainMixin],
+  mixins: [routerMixin, driverViewMixin],
 
   props: {
     onlineScenery: {

src/components/SceneryView/SceneryTimetable.vue

@@ -69,8 +69,8 @@
           v-for="(row, i) in sceneryTimetables"
           :key="row.train.id + i"
           tabindex="0"
-          @click.prevent.stop="selectModalTrain(row.train, $event.currentTarget)"
-          @keydown.enter.prevent="selectModalTrain(row.train, $event.currentTarget)"
+          @click.prevent.stop="driverMixin_showDriverView(row.train.id)"
+          @keydown.enter.prevent="driverMixin_showDriverView(row.train.id)"
         >
           <span class="timetable-general">
             <span class="general-info">
@@ -182,21 +182,21 @@ import { useRoute } from 'vue-router';
 import Loading from '../Global/Loading.vue';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
-import { useMainStore } from '../../store/mainStore';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { useApiStore } from '../../store/apiStore';
-import { ActiveScenery, Station } from '../../typings/common';
-import { SceneryTimetableRow } from './typings';
-import { getTrainStopStatus, stopStatusPriority } from './utils';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import driverViewMixin from '../../mixins/driverViewMixin';
+import { useMainStore } from '../../store/mainStore';
+import { useApiStore } from '../../store/apiStore';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import { SceneryTimetableRow } from './typings';
+import { ActiveScenery, Station } from '../../typings/common';
+import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, modalTrainMixin, trainCategoryMixin],
+  mixins: [dateMixin, routerMixin, trainCategoryMixin, driverViewMixin],
 
   props: {
     station: {
@@ -252,7 +252,7 @@ export default defineComponent({
     },
 
     pragotronHref() {
-      let url = `https://pragotron-td2.web.app/board?name=${this.station!.name}&region=${this.store.region.id}`;
+      let url = `https://pragotron-td2.web.app/board?name=${this.station!.name}&region=${this.mainStore.region.id}`;
       if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
 
       return url;

src/components/TrainsView/StopLabel.vue

@@ -3,11 +3,7 @@
     class="stop-label"
     :data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po') && !stop.duration)"
   >
-    <router-link
-      v-if="/(, podg|<strong>)/.test(stop.nameHtml)"
-      :to="sceneryHref"
-      @click="closeModal"
-    >
+    <router-link v-if="/(, podg|<strong>)/.test(stop.nameHtml)" :to="sceneryHref">
       <span class="name" v-html="stop.nameHtml"></span>
     </router-link>
 
@@ -75,10 +71,9 @@
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { TrainScheduleStop } from './TrainSchedule.vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin],
+  mixins: [dateMixin],
 
   props: {
     stop: {

src/components/TrainsView/TrainInfo.vue

@@ -55,10 +55,6 @@
               {{ $t('trains.journal-button') }}
             </span>
           </button>
-
-          <button class="btn-exit btn--image btn--action" @click="closeModal">
-            <img src="/images/icon-exit.svg" alt="modal exit icon" />
-          </button>
         </div>
       </div>
 
@@ -171,12 +167,11 @@ import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
 import { Train } from '../../typings/common';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin, modalTrainMixin, trainCategoryMixin],
+  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
   components: { ProgressBar, StockList },
 
   props: {
@@ -216,8 +211,6 @@ export default defineComponent({
           'search-driver': this.train.driverName
         }
       });
-
-      this.closeModal();
     }
   }
 });

src/components/TrainsView/TrainTable.vue

@@ -18,8 +18,8 @@
           v-for="train in trains"
           :key="train.id"
           tabindex="0"
-          @click.stop="selectModalTrain(train, $event.currentTarget)"
-          @keydown.enter="selectModalTrain(train, $event.currentTarget)"
+          @click.stop="driverMixin_showDriverView(train.id)"
+          @keydown.enter="driverMixin_showDriverView(train.id)"
         >
           <TrainInfo :train="train" :extended="false" />
         </li>
@@ -30,16 +30,18 @@
 
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
 import { useMainStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import TrainInfo from './TrainInfo.vue';
 import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import driverViewMixin from '../../mixins/driverViewMixin';
 
 export default defineComponent({
   components: { Loading, TrainInfo },
 
+  mixins: [driverViewMixin],
+
   props: {
     trains: {
       type: Array as PropType<Train[]>,
@@ -47,8 +49,6 @@ export default defineComponent({
     }
   },
 
-  mixins: [modalTrainMixin],
-
   setup() {
     const store = useMainStore();
     const apiStore = useApiStore();