Feature: statystyki maszynisty

src/components/JournalView/DispatcherStats.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card-dimmer" @click="closeCard"></div>
 
-  <div class="dispatcher-stats-card card">
+  <div class="stats-card card">
     <div>
       <h2 class="card-title">
         STATYSTYKI DYŻURNEGO <span class="text--primary">{{ store.dispatcherStatsName.toUpperCase() }}</span>
@@ -66,8 +66,8 @@ export default defineComponent({
 
   data() {
     return {
-      lastDispatcherName: ''
+      lastDispatcherName: '',
-    }
+    };
   },
 
   activated() {
@@ -87,76 +87,14 @@ export default defineComponent({
 
     closeCard() {
       this.$emit('closeCard');
-    }
+    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/card.scss';
-@import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 
-.dispatcher-stats-card {
-  padding: 1em;
-  max-width: 850px;
-  width: 100vw;
-  max-height: 750px;
-  min-height: 600px;
-}
-
-.loading {
-  font-size: 1.4em;
-  padding: 0.6em;
-  text-align: center;
-  margin: 1em 0 400px 0;
-
-  background-color: #4d4d4d;
-}
-
-h2.card-title {
-  font-size: 1.8em;
-}
-
-h3 {
-  margin-top: 1em;
-}
-
-h2,
-h3 {
-  text-align: center;
-}
-
-.info-stats {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 1em;
-}
-
-.last-timetables {
-  overflow-y: scroll;
-}
-
-.stat-badge {
-  margin-right: 0.5em;
-  padding-bottom: 1em;
-
-  span {
-    padding: 0.25em 0.3em;
-  }
-
-  span:first-child {
-    background-color: #4d4d4d;
-  }
-
-  span:last-child {
-    background-color: $accentCol;
-    color: black;
-    font-weight: bold;
-  }
-}
-
 .timetable-row {
   display: grid;
   grid-template-columns: 1fr 1fr 3fr 4fr;
@@ -172,18 +110,8 @@ h3 {
     background-color: #4d4d4d;
     padding: 0.5em 0.2em;
   }
-}
 
-@include smallScreen() {
+  @include smallScreen() {
-  .dispatcher-stats-card {
-    text-align: center;
-    font-size: 1.2em;
-  }
-
-  .timetable-row {
-    // display: flex;
-    // flex-wrap: wrap;
-    // justify-content: center;
     grid-template-columns: 1fr 1fr;
     background-color: #4d4d4d;
   }

src/components/JournalView/DriverStats.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="card-dimmer" @click="closeCard"></div>
+
+  <div class="stats-card card">
+    <div>
+      <h2 class="card-title">
+        STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+      </h2>
+
+      <div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
+
+      <div v-else>
+        <div class="info-stats">
+          <span class="stat-badge">
+            <span>PRZEBYTO</span>
+            <span>{{ store.driverStatsData.confirmedDistance.toFixed(2) }}km</span>
+          </span>
+          <span class="stat-badge">
+            <span>PORZUCONO</span>
+            <span>
+              {{ (store.driverStatsData.totalDistance - store.driverStatsData.confirmedDistance).toFixed(2) }}km
+            </span>
+          </span>
+
+          <span class="stat-badge">
+            <span>WYPEŁNIONO</span>
+            <span>{{ store.driverStatsData.fulfilled }} RJ</span>
+          </span>
+
+          <span class="stat-badge">
+            <span>PORZUCONO</span>
+            <span>{{ store.driverStatsData.abandoned }} RJ</span>
+          </span>
+
+          <span class="stat-badge">
+            <span>ZATWIERDZONO</span>
+            <span>{{ store.driverStatsData.confirmedStops }} stacji</span>
+          </span>
+
+          <span class="stat-badge">
+            <span>PORZUCONO</span>
+            <span>{{ store.driverStatsData.totalStops - store.driverStatsData.confirmedStops }} stacji</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { DriverStatsAPIData } from '@/scripts/interfaces/api/DriverStatsAPIData';
+import { TimetableHistory, TimetablesAPIData } from '@/scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '@/scripts/utils/apiURLs';
+import { useStore } from '@/store/store';
+import axios from 'axios';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  emits: ['closeCard'],
+
+  setup() {
+    const store = useStore();
+    return {
+      store,
+    };
+  },
+
+  data() {
+    return {
+      test: Math.random(),
+      lastDispatcherName: '',
+
+      lastTimetables: [] as TimetableHistory[],
+    };
+  },
+
+  activated() {
+    this.fetchDispatcherStats();
+  },
+
+  methods: {
+    async fetchDispatcherStats() {
+      this.store.driverStatsData = undefined;
+
+      const statsData: DriverStatsAPIData = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
+      ).data;
+
+      const recentTimetablesData: TimetablesAPIData = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driver=${this.store.driverStatsName}`)
+      ).data;
+
+      this.store.driverStatsData = statsData.response;
+      this.lastTimetables = recentTimetablesData.response || [];
+    },
+
+    closeCard() {
+      this.$emit('closeCard');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.timetable-row {
+  display: grid;
+  grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
+  gap: 0.2em;
+  margin: 0.5em 0;
+  text-align: center;
+
+  span {
+    min-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    background-color: #4d4d4d;
+    padding: 0.5em 0.2em;
+  }
+
+  @include smallScreen() {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      padding: 0.2em 0.3em;
+    }
+
+    grid-template-columns: 1fr;
+    background-color: #4d4d4d;
+  }
+}
+</style>

src/components/JournalView/JournalDispatchers.vue

@@ -144,6 +144,7 @@ interface DispatcherHistoryItem {
 export default defineComponent({
   components: { SearchBox, ActionButton, JournalOptions, DispatcherStats },
   mixins: [dateMixin],
+  name: 'JournalDispatchers',
 
   props: {
     sceneryName: {

src/components/JournalView/JournalTimetables.vue

@@ -1,6 +1,11 @@
 <template>
   <section class="journal-timetables">
+    <keep-alive>
+      <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
+    </keep-alive>
+
     <div class="journal-wrapper">
+      <div class="journal_top-bar">
         <JournalOptions
           @on-input-change="search"
           @on-filter-change="search"
@@ -9,9 +14,17 @@
           :filters="journalTimetableFilters"
         />
 
-      <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
+        <button
-        <img :src="icons.arrow" alt="return arrow" />
+          class="btn btn--option"
+          :disabled="store.driverStatsName == ''"
+          @click="() => (statsCardOpen = !statsCardOpen)"
+        >
+          <span v-if="store.driverStatsName">
+            Statystyki maszynisty <b>{{ store.driverStatsName }}</b>
+          </span>
+          <span v-else>Statystyki maszynisty niedostępne</span>
         </button>
+      </div>
 
       <div class="journal-list">
         <div class="list-wrapper" ref="scrollElement">
@@ -161,6 +174,9 @@ import { URLs } from '@/scripts/utils/apiURLs';
 import { journalTimetableFilters } from '@/data/journalFilters';
 import { JournalFilterType } from '@/scripts/enums/JournalFilterType';
 import routerMixin from '@/mixins/routerMixin';
+import { useStore } from '@/store/store';
+import DriverStats from './DriverStats.vue';
+import { TimetableHistory, TimetablesAPIData } from '@/scripts/interfaces/api/TimetablesAPIData';
 
 const PROD_MODE = process.env.VUE_APP_JOURNAL_TIMETABLES_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -168,45 +184,12 @@ const TIMETABLES_API_URL = PROD_MODE
   ? `${URLs.stacjownikAPI}/api/getTimetables`
   : 'http://localhost:3001/api/getTimetables';
 
-interface APIResponse {
-  errorMessage: string | null;
-  response: TimetableHistory[] | null;
-}
-
-interface TimetableHistory {
-  timetableId: number;
-  trainNo: number;
-  trainCategoryCode: string;
-  driverId: number;
-  driverName: string;
-  route: string;
-  twr: number;
-  skr: number;
-  sceneriesString: string;
-
-  routeDistance: number;
-  currentDistance: number;
-
-  confirmedStopsCount: number;
-  allStopsCount: number;
-
-  beginDate: string;
-  endDate: string;
-
-  scheduledBeginDate: string;
-  scheduledEndDate: string;
-
-  terminated: boolean;
-  fulfilled: boolean;
-
-  authorName?: string;
-  authorId?: number;
-}
-
 export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions },
+  components: { SearchBox, ActionButton, JournalOptions, DriverStats },
   mixins: [dateMixin, routerMixin],
 
+  name: 'JournalTimetables',
+
   data: () => ({
     icons: {
       arrow: require('@/assets/icon-arrow-asc.svg'),
@@ -217,6 +200,7 @@ export default defineComponent({
     scrollNoMoreData: false,
 
     showReturnButton: false,
+    statsCardOpen: false,
 
     journalTimetableFilters,
   }),
@@ -260,6 +244,7 @@ export default defineComponent({
 
       scrollElement,
       maxCount: ref(15),
+      store: useStore(),
     };
   },
 
@@ -282,6 +267,10 @@ export default defineComponent({
       this.navigateToTrain(historyItem.trainNo, historyItem.driverName);
     },
 
+    closeCard() {
+      this.statsCardOpen = false;
+    },
+
     getSceneryList(historyItem: TimetableHistory) {
       return historyItem.sceneriesString
         .split('%')
@@ -321,7 +310,7 @@ export default defineComponent({
 
       const countFrom = this.historyList.length;
 
-      const responseData: APIResponse | null = await (
+      const responseData: TimetablesAPIData | null = await (
         await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
       ).data;
 
@@ -380,7 +369,7 @@ export default defineComponent({
       this.currentQuery = queries.join('&');
 
       try {
-        const responseData: APIResponse | null = await (
+        const responseData: TimetablesAPIData = await (
           await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
         ).data;
 
@@ -402,6 +391,10 @@ export default defineComponent({
         // Response data exists
         this.historyList = responseData.response;
 
+        // Stats display
+        this.store.driverStatsName =
+          this.historyList.length > 0 && this.searchersValues[1].value.trim() ? this.historyList[1].driverName : '';
+
         this.historyDataStatus.status = DataStatus.Loaded;
       } catch (error) {
         this.historyDataStatus.status = DataStatus.Error;

src/scripts/interfaces/api/DispatcherStatsAPIData.ts

@@ -22,7 +22,7 @@ export interface DispatcherTimetable {
   authorId?: number;
 }
 
-export interface Response {
+export interface DispatcherStatsResponse {
   dispatcherName?: string;
   lastSceneryName?: string;
   maxTimetableDistance: number;
@@ -34,7 +34,7 @@ export interface Response {
 }
 
 export interface DispatcherStatsAPIData {
-  response: Response;
+  response: DispatcherStatsResponse;
   errorMessage?: string;
 }
 

src/scripts/interfaces/api/DriverStatsAPIData.ts

@@ -0,0 +1,14 @@
+export interface DriverStatsResponse {
+  driverName: string;
+  fulfilled: number;
+  abandoned: number;
+  totalDistance: number;
+  confirmedDistance: number;
+  totalStops: number;
+  confirmedStops: number;
+}
+
+export interface DriverStatsAPIData {
+  response?: DriverStatsResponse;
+  errorMessage?: string;
+}

src/scripts/interfaces/api/TimetableAPIData.ts

@@ -1,34 +0,0 @@
-export default interface TimetableAPIData {
-  trainInfo: {
-    timetableId: number;
-    trainNo: number;
-    trainCategoryCode: string;
-    driverId: number;
-    driverName: string;
-    route: string;
-    twr: boolean;
-    skr: boolean;
-    sceneries: string[];
-  };
-
-  stopPoints: {
-    arrivalLine: string | null;
-    arrivalTime: string | null;
-    arrivalDelay: number;
-    arrivalRealTime: string | null;
-    pointDistance: number;
-    pointName: string;
-    pointNameRAW: string;
-    entryId: number;
-    pointId: string;
-    comments: string | null;
-    confirmed: boolean;
-    isStopped: boolean;
-    pointStopTime: number | null;
-    pointStopType: string;
-    departureLine: string | null;
-    departureTime: string | null;
-    departureDelay: number;
-    departureRealTime: string | null;
-  }[];
-}

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -0,0 +1,34 @@
+export interface TimetablesAPIData {
+  errorMessage: string | null;
+  response: TimetableHistory[] | null;
+}
+
+export interface TimetableHistory {
+  timetableId: number;
+  trainNo: number;
+  trainCategoryCode: string;
+  driverId: number;
+  driverName: string;
+  route: string;
+  twr: number;
+  skr: number;
+  sceneriesString: string;
+
+  routeDistance: number;
+  currentDistance: number;
+
+  confirmedStopsCount: number;
+  allStopsCount: number;
+
+  beginDate: string;
+  endDate: string;
+
+  scheduledBeginDate: string;
+  scheduledEndDate: string;
+
+  terminated: boolean;
+  fulfilled: boolean;
+
+  authorName?: string;
+  authorId?: number;
+}

src/store/store.ts

@@ -41,6 +41,9 @@ export const useStore = defineStore('store', {
       dispatcherStatsName: '',
       dispatcherStatsData: undefined,
 
+      driverStatsName: '',
+      driverStatsData: undefined,
+
       dataStatuses: {
         connection: DataStatus.Loading,
         sceneries: DataStatus.Loading,

src/store/storeTypes.ts

@@ -1,5 +1,6 @@
 import { DataStatus } from '@/scripts/enums/DataStatus';
-import { Response } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
+import { DispatcherStatsResponse } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
+import { DriverStatsResponse } from '@/scripts/interfaces/api/DriverStatsAPIData';
 import StationAPIData from '@/scripts/interfaces/api/StationAPIData';
 import TrainAPIData from '@/scripts/interfaces/api/TrainAPIData';
 import Station from '@/scripts/interfaces/Station';
@@ -22,8 +23,12 @@ export interface StoreState {
   stationCount: number;
 
   webSocket?: Socket;
+
   dispatcherStatsName: string;
-  dispatcherStatsData?: Response; 
+  dispatcherStatsData?: DispatcherStatsResponse;
+
+  driverStatsName: string;
+  driverStatsData?: DriverStatsResponse;
 
   dataStatuses: {
     connection: DataStatus;

src/views/JournalView.vue

@@ -3,16 +3,16 @@
     <div class="journal-type-options">
       <router-link
         class="router-link"
-        :class="{ active: journalTypeChosen == 'timetables' }"
         to="/journal?view=timetables"
+        :class="{ active: activeJournalComponent == 'journalTimetables' }"
       >
         {{ $t('journal.section-timetables') }}
       </router-link>
       &nbsp;&bull;&nbsp;
       <router-link
         class="router-link"
-        :class="{ active: journalTypeChosen == 'dispatchers' }"
         to="/journal?view=dispatchers"
+        :class="{ active: activeJournalComponent == 'journalDispatchers' }"
       >
         {{ $t('journal.section-dispatchers') }}
       </router-link>
@@ -20,13 +20,14 @@
 
     <div class="journal-section">
       <keep-alive>
-        <JournalTimetables v-if="journalTypeChosen == 'timetables'" />
+        <component :is="activeJournalComponent"></component>
+      </keep-alive>
+    </div>
+    <!-- <JournalTimetables v-if="journalTypeChosen == 'timetables'" />
         <JournalDispatchers
           v-else-if="journalTypeChosen == 'dispatchers'"
           :sceneryName="$route.query.sceneryName?.toString()"
-        />
+        /> -->
-      </keep-alive>
-    </div>
   </section>
 </template>
 
@@ -39,28 +40,32 @@ export default defineComponent({
   components: { JournalTimetables, JournalDispatchers },
 
   setup() {
-    const journalTypeChosen = ref('timetables');
+    const journalTypeChosen = ref('journalTimetables');
 
     return {
-      journalTypeChosen,
+      activeJournalComponent: journalTypeChosen,
     };
   },
 
   methods: {
     changeJournalType(type: string) {
-      this.journalTypeChosen = type;
+      this.activeJournalComponent = type;
     },
   },
 
   activated() {
     const query = this.$route.query;
 
-    if (query.view == 'dispatchers') this.journalTypeChosen = 'dispatchers';
+    if (query.view == 'dispatchers') this.activeJournalComponent = 'journalDispatchers';
   },
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import '../styles/card.scss';
+@import '../styles/variables.scss';
+@import '../styles/responsive.scss';
+
 .journal-type-options {
   display: flex;
   justify-content: center;
@@ -85,4 +90,72 @@ export default defineComponent({
 .router-link.active {
   color: gold;
 }
+
+// Stats cards
+.stats-card {
+  padding: 1em;
+  max-width: 850px;
+  width: 100vw;
+  max-height: 750px;
+  min-height: 600px;
+}
+
+.loading {
+  font-size: 1.4em;
+  padding: 0.6em;
+  text-align: center;
+  margin: 1em 0 400px 0;
+
+  background-color: #4d4d4d;
+}
+
+h2.card-title {
+  font-size: 1.8em;
+}
+
+h3 {
+  margin-top: 1em;
+}
+
+h2,
+h3 {
+  text-align: center;
+}
+
+.info-stats {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 1em;
+}
+
+.last-timetables {
+  overflow-y: auto;
+}
+
+.stat-badge {
+  margin-right: 0.5em;
+  padding-bottom: 1em;
+
+  span {
+    padding: 0.25em 0.3em;
+  }
+
+  span:first-child {
+    background-color: #4d4d4d;
+  }
+
+  span:last-child {
+    background-color: $accentCol;
+    color: black;
+    font-weight: bold;
+  }
+}
+
+@include smallScreen() {
+  .stats-card {
+    text-align: center;
+    font-size: 1.2em;
+  }
+}
 </style>