Statystyki maszynistów

src/components/JournalView/DispatcherStats.vue

@@ -14,6 +14,7 @@
 
         <div v-else>
           <h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
+          
           <div class="info-stats" v-if="store.dispatcherStatsData._count._all">
             <span class="stat-badge">
               <span>LICZBA</span>
@@ -162,42 +163,11 @@ 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;
-    left: 50%;
-    transform: translateX(-50%);
-    border-radius: 0 0 1em 1em;
-  }
-}
 </style>

src/components/JournalView/DriverStats.vue

@@ -1,51 +1,40 @@
 <template>
-  <div class="card-dimmer" @click="closeCard"></div>
+  <div class="journal-stats" v-if="store.driverStatsData?._sum.routeDistance != null">
+    <h1>
+      STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+    </h1>
 
-  <div class="stats-card card">
-    <div>
-      <h2 class="card-title">
-        STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-      </h2>
+    <div class="info-stats">
+      <span class="stat-badge">
+        <span>ROZKŁADY JAZDY</span>
+        <span>{{ store.driverStatsData._count.fulfilled }} / {{ store.driverStatsData._count._all }}</span>
+      </span>
 
-      <div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
+      <span class="stat-badge">
+        <span>NAJDŁUŻSZY RJ</span>
+        <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
+      </span>
 
-      <div v-else>
-        <div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
-          <span class="stat-badge">
-            <span>PRZEBYTO</span>
-            <span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
-          </span>
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
-            </span>
-          </span>
+      <span class="stat-badge">
+        <span>ŚREDNIA DŁUGOŚĆ RJ</span>
+        <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
+      </span>
 
-          <span class="stat-badge">
-            <span>WYPEŁNIONO</span>
-            <span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
+      <span class="stat-badge">
+        <span>DYSTANS</span>
+        <span>
+          {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
+          {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+        </span>
+      </span>
 
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>ZATWIERDZONO</span>
-            <span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
-              stacji
-            </span>
-          </span>
-        </div>
-      </div>
+      <span class="stat-badge">
+        <span>STACJE</span>
+        <span>
+          {{ store.driverStatsData._sum.confirmedStopsCount }} /
+          {{ store.driverStatsData._sum.allStopsCount }}
+        </span>
+      </span>
     </div>
   </div>
 </template>
@@ -78,13 +67,9 @@ export default defineComponent({
     };
   },
 
-  activated() {
-    this.fetchDispatcherStats();
-  },
-
   watch: {
-    driverStatsName(value: any) {
-      console.log(value);
+    driverStatsName(value: string) {
+      this.fetchDispatcherStats();
     },
   },
 
@@ -92,57 +77,18 @@ export default defineComponent({
     async fetchDispatcherStats() {
       this.store.driverStatsData = undefined;
 
+      if (!this.store.driverStatsName) return;
+
       const statsData: DriverStatsAPIData = await (
         await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
       ).data;
 
-      const recentTimetablesData: TimetableHistory[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
-      ).data;
-
       this.store.driverStatsData = statsData;
-      this.lastTimetables = recentTimetablesData || [];
-    },
-
-    closeCard() {
-      this.$emit('closeCard');
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/card.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;
-  }
-}
+@import '../../styles/JournalStats.scss';
 </style>

src/components/JournalView/JournalTimetables.vue

@@ -1,28 +1,22 @@
 <template>
   <section class="journal-timetables">
-    <keep-alive>
-      <DriverStats v-if="statsCardOpen" @close-card="statsCardOpen = false" />
-    </keep-alive>
-
+    
     <div class="journal_wrapper">
       <JournalOptions
-        @on-search-confirm="searchHistory"
-        @on-options-reset="resetOptions"
-        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-        :filters="journalTimetableFilters"
-        :data-status="dataStatus"
+      @on-search-confirm="searchHistory"
+      @on-options-reset="resetOptions"
+      :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+      :filters="journalTimetableFilters"
+      :data-status="dataStatus"
       />
-
+      
+      <DriverStats />
       <!-- <button @click="statsCardOpen = true">Stats</button> -->
 
       <div class="list_wrapper" @scroll="handleScroll">
         <!-- <transition name="warning" mode="out-in"> -->
         <!-- <div :key="dataStatus"> -->
-        <Loading
-          v-if="
-            dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading )
-          "
-        />
+        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
 
         <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
           {{ $t('app.error') }}
@@ -221,7 +215,8 @@ export default defineComponent({
       const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       if (driverName) queries.push(`driverName=${driverName}`);
-      if (trainNo) queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
+      if (trainNo)
+        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
       if (authorName) queries.push(`authorName=${authorName}`);
       if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
 

src/styles/JournalStats.scss

@@ -0,0 +1,42 @@
+@import 'variables.scss';
+@import 'responsive.scss';
+
+.journal-stats {
+  background-color: #1a1a1a;
+  padding: 1em;
+  margin-bottom: 1em;
+}
+
+.info-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin-top: 1em;
+}
+
+.stat-badge {
+  display: flex;
+
+  span {
+    background-color: $accentCol;
+    color: black;
+    font-weight: bold;
+    padding: 0.2em 0.5em;
+  }
+
+  span:first-child {
+    background-color: #333;
+    color: white;
+  }
+}
+
+@include smallScreen {
+  .journal-stats {
+    text-align: center;
+  }
+
+  .info-stats {
+    justify-content: center;
+  }
+}