Wyświetlanie statystyk dyżurnego w karcie

src/components/JournalView/DispatcherStats.vue

@@ -1,89 +1,93 @@
 <template>
-  <div class="card-dimmer"></div>
+  <div class="card-dimmer" @click="closeCard"></div>
 
   <div class="dispatcher-stats-card card">
-    <h2 class="card-title">STATYSTYKI DYŻURNEGO <span class="text--primary">SPYTHERE</span></h2>
+    <div>
+      <h2 class="card-title">
+        STATYSTYKI DYŻURNEGO <span class="text--primary">{{ store.dispatcherStatsName.toUpperCase() }}</span>
+      </h2>
 
-    <h3>Rozkłady jazdy dyżurnego</h3>
-    <div class="info-stats">
-      <span class="stat-badge">
-        <span>SUMA</span>
-        <span>15</span>
-      </span>
-      <span class="stat-badge">
-        <span>REKORD</span>
-        <span>322km</span>
-      </span>
-      <span class="stat-badge">
-        <span>ŚREDNIO</span>
-        <span>72km</span>
-      </span>
-      <span class="stat-badge">
-        <span>NAJKRÓTSZY</span>
-        <span>8.5km</span>
-      </span>
-    </div>
+      <div class="loading" v-if="!store.dispatcherStatsData">Ładowanie...</div>
+      <div v-else>
+        <h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
+        <div class="info-stats">
+          <span class="stat-badge">
+            <span>LICZBA</span>
+            <span>{{ store.dispatcherStatsData.count }}</span>
+          </span>
+          <span class="stat-badge">
+            <span>SUMA (KM)</span>
+            <span>{{ store.dispatcherStatsData.sumDistance.toFixed(2) }}km</span>
+          </span>
+          <span class="stat-badge">
+            <span>NAJDŁUŻSZY</span>
+            <span>{{ store.dispatcherStatsData.maxTimetableDistance }}km</span>
+          </span>
+          <span class="stat-badge">
+            <span>ŚREDNIO</span>
+            <span>{{ store.dispatcherStatsData.avgTimetableDistance }}km</span>
+          </span>
+        </div>
 
-    <h3>Historia wystawionych rozkładów</h3>
-    <div class="last-timetables">
-      <div class="timetable-row">
-        <span>213000&nbsp;<b>lolz12345</b></span>
-        <span>#333331</span>
-        <span>Grabów Miasto - Aleksandrów Kujawski</span>
-        <span>14/06 23:09</span>
+        <h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
+
+        <div class="last-timetables">
+          <div class="timetable-row" v-for="timetable in store.dispatcherStatsData.timetables">
+            <span>#{{ timetable.timetableId }}</span>
+            <span>{{ timetable.routeDistance }}km</span>
+            <span>
+              <b>{{ timetable.trainNo }}</b
+              >&nbsp;{{ timetable.driverName }}
+            </span>
+            <span>{{ timetable.route.replace('|', ' > ') }}</span>
+          </div>
+        </div>
       </div>
-
-      <div class="timetable-row">
-        <span>213000&nbsp;<b>Waffel</b></span>
-        <span>#333327</span>
-        <span>STARE LIPOWO - Testowo</span>
-        <span>14/06 22:57</span>
-      </div>
-
-      <div class="timetable-row">
-        <span>213000&nbsp;<b>Waffel</b></span>
-        <span>#333327</span>
-        <span>STARE LIPOWO - Testowo</span>
-        <span>14/06 22:57</span>
-      </div>
-
-      <div class="timetable-row">
-        <span>213000&nbsp;<b>Waffel</b></span>
-        <span>#333327</span>
-        <span>STARE LIPOWO - Testowo</span>
-        <span>14/06 22:57</span>
-      </div>
-
-      <div class="timetable-row">
-        <span>213000&nbsp;<b>Waffel</b></span>
-        <span>#333327</span>
-        <span>STARE LIPOWO - Testowo</span>
-        <span>14/06 22:57</span>
-      </div>
-
-      <div class="timetable-row">
-        <span>213000&nbsp;<b>Waffel</b></span>
-        <span>#333327</span>
-        <span>STARE LIPOWO - Testowo</span>
-        <span>14/06 22:57</span>
-      </div>
-
-      <!-- <div class="timetable-row">
-        <span>21370</span>
-        <span>nwm12345t6</span>
-        <span>Grabów Miasto - Aleksandrów Kujawski</span>
-        <span>23:09</span>
-      </div> -->
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
+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() {
-    return {};
+    const store = useStore();
+    return {
+      store,
+    };
+  },
+
+  data() {
+    return {
+      lastDispatcherName: ''
+    }
+  },
+
+  activated() {
+    this.fetchDispatcherStats();
+  },
+
+  methods: {
+    async fetchDispatcherStats() {
+      this.store.dispatcherStatsData = undefined;
+
+      const statsData: DispatcherStatsAPIData = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getDispatcherInfo?name=${this.store.dispatcherStatsName}`)
+      ).data;
+
+      this.store.dispatcherStatsData = statsData.response;
+    },
+
+    closeCard() {      
+      this.$emit('closeCard');
+    }
   },
 });
 </script>
@@ -95,25 +99,45 @@ export default defineComponent({
 
 .dispatcher-stats-card {
   padding: 1em;
-  max-width: 800px;
+  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 {
-  text-align: center;
   font-size: 1.8em;
 }
 
 h3 {
-  margin: 0.5em 0;
+  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;
@@ -135,15 +159,15 @@ h3 {
 
 .timetable-row {
   display: grid;
-  grid-template-columns: 2fr 1fr 3fr 1fr;
+  grid-template-columns: 1fr 1fr 3fr 4fr;
   gap: 0.2em;
   margin: 0.5em 0;
   text-align: center;
 
   span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    min-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     background-color: #4d4d4d;
     padding: 0.5em 0.2em;
@@ -153,15 +177,15 @@ h3 {
 @include smallScreen() {
   .dispatcher-stats-card {
     text-align: center;
-  }
-  .info-stats {
-    justify-content: center;
+    font-size: 1.2em;
   }
 
   .timetable-row {
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 0;
+    // display: flex;
+    // flex-wrap: wrap;
+    // justify-content: center;
+    grid-template-columns: 1fr 1fr;
+    background-color: #4d4d4d;
   }
 }
 </style>

src/components/JournalView/JournalDispatchers.vue

@@ -1,18 +1,33 @@
 <template>
   <section class="journal-timetables">
+    <keep-alive>
+      <DispatcherStats v-if="statsCardOpen" @close-card="closeDispatcherStatsCard" />
+    </keep-alive>
+
     <div class="journal-wrapper">
-      <journal-options
-        @on-filter-change="search"
-        @on-input-change="search"
-        @on-sorter-change="search"
-        :sorter-option-ids="['timestampFrom', 'duration']"
-      />
+      <div class="journal_top-bar">
+        <journal-options
+          @on-filter-change="search"
+          @on-input-change="search"
+          @on-sorter-change="search"
+          :sorter-option-ids="['timestampFrom', 'duration']"
+        />
 
-      <DispatcherStats />
+        <button
+          class="btn btn--option"
+          :disabled="store.dispatcherStatsName == ''"
+          @click="() => (statsCardOpen = !statsCardOpen)"
+        >
+          <span v-if="store.dispatcherStatsName">
+            Statystyki dyżurnego <b>{{ store.dispatcherStatsName }}</b>
+          </span>
+          <span v-else>Statystyki dyżurnego niedostępne</span>
+        </button>
+      </div>
 
-      <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
+      <!-- <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
         <img :src="icons.arrow" alt="return arrow" />
-      </button>
+      </button> -->
 
       <div class="journal-list">
         <div class="list-wrapper" ref="scrollElement">
@@ -68,12 +83,6 @@
                         </span>
                       </span>
                     </div>
-
-                    <!-- <div>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</div> -->
-
-                    <!-- <div v-if="doc.timestampTo && doc.currentDuration && doc.currentDuration <= 30*60*1000">
-                      Wpis zostanie usunięty za {{ ~~((Date.now() - doc.currentDuration)) }} min.
-                    </div> -->
                   </li>
                 </transition-group>
               </ul>
@@ -101,6 +110,8 @@ import JournalOptions from '@/components/JournalView/JournalOptions.vue';
 import DispatcherStats from '@/components/JournalView/DispatcherStats.vue';
 
 import { URLs } from '@/scripts/utils/apiURLs';
+import { useStore } from '@/store/store';
+import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
 
 const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -156,6 +167,7 @@ export default defineComponent({
     scrollNoMoreData: false,
 
     showReturnButton: false,
+    statsCardOpen: false,
   }),
 
   setup() {
@@ -181,6 +193,8 @@ export default defineComponent({
     const scrollElement: Ref<HTMLElement | null> = ref(null);
 
     return {
+      store: useStore(),
+
       historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
       historyDataStatus,
 
@@ -210,8 +224,6 @@ export default defineComponent({
   mounted() {
     const query = this.$route.query;
 
-    console.log('Mounted');
-
     if (query.sceneryName || query.dispatcherName) {
       this.searchersValues[1].value = query.sceneryName?.toString() || '';
       this.searchersValues[0].value = query.dispatcherName?.toString() || '';
@@ -233,6 +245,10 @@ export default defineComponent({
   },
 
   methods: {
+    closeDispatcherStatsCard() {
+      this.statsCardOpen = false;
+    },
+    
     navigateToScenery(name: string, isOnline: boolean) {
       if (!isOnline) return;
 
@@ -261,8 +277,6 @@ export default defineComponent({
     handleScroll() {
       this.showReturnButton = window.scrollY > window.innerHeight;
 
-      console.log(window.scrollY > window.innerHeight);
-
       const element = this.$refs.scrollElement as HTMLElement;
 
       if (
@@ -355,6 +369,10 @@ export default defineComponent({
         // Response data exists
         this.historyList = responseData.response;
 
+        // Stats display
+        this.store.dispatcherStatsName =
+          this.historyList.length > 0 && this.searchersValues[0].value.trim() ? this.historyList[0].dispatcherName : '';
+
         this.historyDataStatus.status = DataStatus.Loaded;
       } catch (error) {
         this.historyDataStatus.status = DataStatus.Error;
@@ -440,6 +458,7 @@ export default defineComponent({
 
     span {
       margin-top: 0.25em;
+      text-align: center;
     }
   }
 }

src/scripts/interfaces/api/DispatcherStatsAPIData.ts

@@ -0,0 +1,40 @@
+export interface DispatcherTimetable {
+  timetableId: number;
+  trainNo: number;
+  trainCategoryCode: string;
+  driverId: number;
+  driverName: string;
+  route: string;
+  twr: boolean;
+  skr: boolean;
+  sceneriesString: string;
+  routeDistance: number;
+  currentDistance: number;
+  confirmedStopsCount: number;
+  allStopsCount: number;
+  beginDate: Date;
+  endDate: Date;
+  scheduledBeginDate: Date;
+  scheduledEndDate: Date;
+  terminated: boolean;
+  fulfilled: boolean;
+  authorName?: string;
+  authorId?: number;
+}
+
+export interface Response {
+  dispatcherName?: string;
+  lastSceneryName?: string;
+  maxTimetableDistance: number;
+  minTimetableDistance: number;
+  avgTimetableDistance: number;
+  count: number;
+  sumDistance: number;
+  timetables?: DispatcherTimetable[];
+}
+
+export interface DispatcherStatsAPIData {
+  response: Response;
+  errorMessage?: string;
+}
+

src/store/store.ts

@@ -1,4 +1,5 @@
 import { DataStatus } from '@/scripts/enums/DataStatus';
+import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
 import StationAPIData from '@/scripts/interfaces/api/StationAPIData';
 import TrainAPIData from '@/scripts/interfaces/api/TrainAPIData';
 import ScheduledTrain from '@/scripts/interfaces/ScheduledTrain';
@@ -36,6 +37,9 @@ export const useStore = defineStore('store', {
       stationCount: 0,
 
       webSocket: undefined,
+      
+      dispatcherStatsName: '',
+      dispatcherStatsData: undefined,
 
       dataStatuses: {
         connection: DataStatus.Loading,

src/store/storeTypes.ts

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

src/styles/JournalSection.scss

@@ -49,7 +49,7 @@
 
 .journal_item,
 .journal_warning,
-.journal_loading  {
+.journal_loading {
   background: #202020;
   padding: 1em;
   margin: 1em 0;
@@ -58,6 +58,17 @@
 .journal_loading {
   text-align: center;
   font-size: 1.35em;
+}
+
+.journal_top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+button.btn {
+  padding: 0.5em 0.7em;
 
 }
 
@@ -65,4 +76,8 @@
   .journal-wrapper {
     font-size: 1.25em;
   }
+
+  .journal_top-bar {
+    justify-content: center;
+  }
 }

src/styles/global.scss

@@ -206,8 +206,8 @@ ul {
     color: white;
     transition: color 0.3s;
 
-    &:hover,
-    &:focus {
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
       color: $accentCol;
     }
 
@@ -231,7 +231,7 @@ ul {
     border-radius: 0.25em;
     padding: 0.25em 0.5em;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-color: #3c3c3c;
     }
 
@@ -242,6 +242,10 @@ ul {
       background-color: #3c3c3c;
     }
   }
+
+  &:disabled {
+    opacity: 0.65;
+  }
 }
 
 .return-btn {