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();

src/mixins/driverViewMixin.ts

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    driverMixin_showDriverView(id: string) {
+      this.$router.push({
+        name: 'DriverView',
+        query: {
+          trainId: id
+        }
+      });
+    }
+  }
+});

src/router/index.ts

@@ -20,6 +20,14 @@ const routes: Array<RouteRecordRaw> = [
       region: route.query.region
     })
   },
+  {
+    path: '/driver',
+    name: 'DriverView',
+    component: () => import('../views/DriverView.vue'),
+    props: (route) => ({
+      trainId: route.query.trainId
+    })
+  },
   {
     path: '/scenery',
     name: 'SceneryView',
@@ -57,7 +65,11 @@ const routes: Array<RouteRecordRaw> = [
 
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
-    if (to.name == 'SceneryView' && from.name !== to.name && from.query['view'] === undefined)
+    if (
+      (to.name == 'SceneryView' || to.name == 'DriverView') &&
+      from.name !== to.name &&
+      from.query['view'] === undefined
+    )
       return { el: `.app_main`, top: -15 };
 
     if (savedPosition) return savedPosition;

src/views/DriverView.vue

@@ -0,0 +1,46 @@
+<template>
+  <section class="driver-view">
+    <div class="content">
+      <div v-if="chosenTrain">
+        <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
+        <TrainSchedule :train="chosenTrain" tabindex="0" />
+      </div>
+
+      <Loading v-else-if="apiStore.dataStatuses.connection == Status.Data.Loading" />
+
+      <div v-else>Ups! Nie ma takiego pociągu</div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+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';
+
+const props = defineProps({
+  trainId: {
+    required: true
+  }
+});
+
+const mainStore = useMainStore();
+const apiStore = useApiStore();
+const chosenTrain = computed(() => mainStore.trainList.find((train) => train.id == props.trainId));
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/variables.scss';
+
+.driver-view {
+  padding: 1em 0;
+}
+
+.content {
+  background-color: #1a1a1a;
+}
+</style>

src/views/JournalTimetables.vue

@@ -40,7 +40,6 @@ import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 
 import dateMixin from '../mixins/dateMixin';
 import routerMixin from '../mixins/routerMixin';
-import modalTrainMixin from '../mixins/modalTrainMixin';
 
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
@@ -148,7 +147,7 @@ export default defineComponent({
     JournalHeader,
     JournalTimetablesList
   },
-  mixins: [dateMixin, routerMixin, modalTrainMixin],
+  mixins: [dateMixin, routerMixin],
 
   name: 'JournalTimetables',
 
@@ -462,7 +461,7 @@ export default defineComponent({
         this.timetableHistory = responseData;
 
         // Stats display
-        this.store.driverStatsName =
+        this.mainStore.driverStatsName =
           this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
             ? this.timetableHistory[0].driverName
             : '';

src/views/TrainsView.vue

@@ -19,7 +19,6 @@
 import { computed, ComputedRef, defineComponent, provide, reactive, ref, watch } from 'vue';
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
-import modalTrainMixin from '../mixins/modalTrainMixin';
 import { useMainStore } from '../store/mainStore';
 import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
@@ -33,8 +32,6 @@ export default defineComponent({
     TrainStats
   },
 
-  mixins: [modalTrainMixin],
-
   props: {
     train: {
       type: String,
@@ -106,12 +103,6 @@ export default defineComponent({
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';
     }
-
-    this.$nextTick(() => {
-      if (this.trainId) {
-        this.selectModalTrainById(this.trainId);
-      }
-    });
   }
 });
 </script>