Poprawiono kartę ze statystykami dyżurnego

src/components/JournalView/DispatcherStats.vue

@@ -1,46 +1,45 @@
 <template>
-  <div class="card-dimmer" @click="closeCard"></div>
+  <div class="stats_container" v-click-outside="() => (cardVisible = false)">
+    <button class="stats_button btn btn--option" @click="toggleCard">
+      Statystyki dyżurnego {{ store.dispatcherStatsName }}
+    </button>
 
-  <div class="stats-card card">
-    <div>
-      <h2 class="card-title">
-        STATYSTYKI DYŻURNEGO <span class="text--primary">{{ store.dispatcherStatsName.toUpperCase() }}</span>
-      </h2>
+    <div class="stats_card" v-if="store.dispatcherStatsName && cardVisible">
+      <div>
+        <Loading v-if="!store.dispatcherStatsData" />
 
-      <div class="loading" v-if="!store.dispatcherStatsData">Ładowanie...</div>
-      <div class="loading" v-else-if="!store.dispatcherStatsData._count._all">Ten dyżurny nie ma jeszcze szczegółowych statystyk!</div>
-      <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>
-            <span>{{ store.dispatcherStatsData._count._all }}</span>
-          </span>
-          <span class="stat-badge">
-            <span>SUMA (KM)</span>
-            <span>{{ store.dispatcherStatsData._sum.routeDistance.toFixed(2) }}km</span>
-          </span>
-          <span class="stat-badge">
-            <span>NAJDŁUŻSZY</span>
-            <span>{{ store.dispatcherStatsData._max.routeDistance.toFixed(2) }}km</span>
-          </span>
-          <span class="stat-badge">
-            <span>ŚREDNIO</span>
-            <span>{{ store.dispatcherStatsData._avg.routeDistance.toFixed(2) }}km</span>
-          </span>
+        <div class="loading" v-else-if="!store.dispatcherStatsData._count._all">
+          Ten dyżurny nie ma jeszcze szczegółowych statystyk!
         </div>
 
-        <h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
-
-        <div class="last-timetables">
-          <div class="timetable-row" v-for="timetable in timetables">
-            <span>#{{ timetable.timetableId }}</span>
-            <span>{{ timetable.routeDistance }}km</span>
-            <span>
-              <b>{{ timetable.trainNo }}</b
-              >&nbsp;{{ timetable.driverName }}
+        <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>
+              <span>{{ store.dispatcherStatsData._count._all }}</span>
             </span>
-            <span>{{ timetable.route.replace('|', ' > ') }}</span>
+            <span class="stat-badge">
+              <span>SUMA (KM)</span>
+              <span>{{ store.dispatcherStatsData._sum.routeDistance.toFixed(2) }}km</span>
+            </span>
+            <span class="stat-badge">
+              <span>NAJDŁUŻSZY</span>
+              <span>{{ store.dispatcherStatsData._max.routeDistance.toFixed(2) }}km</span>
+            </span>
+            <span class="stat-badge">
+              <span>ŚREDNIO</span>
+              <span>{{ store.dispatcherStatsData._avg.routeDistance.toFixed(2) }}km</span>
+            </span>
+          </div>
+
+          <h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
+          <div class="last-timetables">
+            <div class="timetable-row" v-for="timetable in timetables">
+              #{{ timetable.timetableId }} | <b>{{ timetable.trainCategoryCode }} {{ timetable.trainNo }}</b> |
+              {{ timetable.driverName }} ({{ timetable.routeDistance }}km)
+              <div>{{ timetable.route.replace('|', ' > ') }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -55,9 +54,10 @@ import { URLs } from '@/scripts/utils/apiURLs';
 import { useStore } from '@/store/store';
 import axios from 'axios';
 import { defineComponent } from 'vue';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
-  emits: ['closeCard'],
+  components: { Loading },
 
   setup() {
     const store = useStore();
@@ -65,21 +65,25 @@ export default defineComponent({
       store,
     };
   },
-
   data() {
     return {
+      cardVisible: false,
       lastDispatcherName: '',
       timetables: [] as TimetableHistory[],
     };
   },
-
-  activated() {
-    this.fetchDispatcherStats();
-  },
-
   methods: {
+    toggleCard() {
+      if (!this.store.dispatcherStatsName) return;
+
+      this.cardVisible = !this.cardVisible;
+      if (this.cardVisible) this.fetchDispatcherStats();
+    },
+
     async fetchDispatcherStats() {
-      this.store.dispatcherStatsData = undefined;
+      if (this.lastDispatcherName != this.store.dispatcherStatsName) {
+        this.store.dispatcherStatsData = undefined;
+      }
 
       const statsData: DispatcherStatsAPIData = await (
         await axios.get(`${URLs.stacjownikAPI}/api/getDispatcherInfo?name=${this.store.dispatcherStatsName}`)
@@ -91,10 +95,7 @@ export default defineComponent({
 
       this.timetables = timetables;
       this.store.dispatcherStatsData = statsData;
-    },
-
-    closeCard() {
-      this.$emit('closeCard');
+      this.lastDispatcherName = this.store.dispatcherStatsName;
     },
   },
 });
@@ -102,26 +103,90 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
+@import '../../styles/variables.scss';
+
+.stats_container {
+  position: relative;
+}
+
+.stats_card {
+  position: absolute;
+  z-index: 999;
+  top: 120%;
+  right: 0;
+  width: 500px;
+  max-width: 97vw;
+  min-height: 100px;
+  overflow: auto;
+
+  border-radius: 1em 0 1em 1em;
+  background-color: #222222f1;
+  box-shadow: 0 3px 10px 5px #131313;
+  padding: 1em 0.5em;
+}
+
+.last-timetables {
+  max-height: 400px;
+  margin: 0.5em 0;
+}
 
 .timetable-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 3fr 4fr;
-  gap: 0.2em;
-  margin: 0.5em 0;
+  width: 95%;
+  margin: 0.5em auto;
+  padding: 0.5em;
+
+  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 {
-    min-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    background-color: #4d4d4d;
-    padding: 0.5em 0.2em;
+    padding: 0.25em 0.3em;
   }
 
-  @include smallScreen() {
-    grid-template-columns: 1fr 1fr;
+  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/JournalDispatchers.vue

@@ -1,19 +1,17 @@
 <template>
   <section class="journal-timetables">
-    <keep-alive>
-      <DispatcherStats v-if="statsCardOpen" @close-card="closeDispatcherStatsCard" />
-    </keep-alive>
-
     <div class="journal-wrapper">
       <div class="journal_top-bar">
-        <journal-options
+        <JournalOptions
           @on-filter-change="search"
           @on-input-change="search"
           @on-sorter-change="search"
           :sorter-option-ids="['timestampFrom', 'duration']"
         />
 
-        <button
+        <DispatcherStats />
+
+        <!-- <button
           class="btn btn--option"
           :disabled="store.dispatcherStatsName == ''"
           @click="() => (statsCardOpen = !statsCardOpen)"
@@ -22,7 +20,7 @@
             Statystyki dyżurnego <b>{{ store.dispatcherStatsName }}</b>
           </span>
           <span v-else>Statystyki dyżurnego niedostępne</span>
-        </button>
+        </button> -->
       </div>
 
       <!-- <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
@@ -221,7 +219,7 @@ export default defineComponent({
     },
   },
 
-activated() {
+  activated() {
     if (this.sceneryName || this.dispatcherName) {
       this.searchersValues[1].value = this.sceneryName?.toString() || '';
       this.searchersValues[0].value = this.dispatcherName?.toString() || '';