zmiana wyglądu statystyk dzienników

src/components/JournalView/JournalDailyStats.vue

@@ -1,18 +1,27 @@
 <template>
   <section class="daily-stats">
     <span :data-active="statsStatus">
-      <b v-if="statsStatus == Status.Data.Loading">
+      <span class="stats-list">
-        {{ $t('app.loading') }}
-      </b>
-
-      <span class="stats-list" v-else>
         <h3>
           {{ $t('journal.daily-stats-title') }}
           <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
         </h3>
 
-        <hr style="margin-bottom: 0.5em" />
+        <hr class="header-separator" />
 
+        <b v-if="statsStatus == Status.Data.Loading">
+          {{ $t('app.loading') }}
+        </b>
+
+        <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+          {{ $t('journal.stats-error') }}
+        </b>
+
+        <b v-else-if="topDispatchers.length == 0">
+          {{ $t('journal.daily-stats-info') }}
+        </b>
+
+        <div v-else>
           <div v-if="stats.totalTimetables">
             &bull;
             <i18n-t keypath="journal.timetable-stats-total">
@@ -124,6 +133,7 @@
               </template>
             </i18n-t>
           </div>
+        </div>
       </span>
     </span>
   </section>
@@ -203,6 +213,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
+@import '../../styles/JournalStats.scss';
 
 .daily-stats {
   text-align: left;

src/components/JournalView/JournalDispatcherStats.vue

@@ -57,6 +57,7 @@ import { API } from '../../typings/api';
 import http from '../../http';
 
 export default defineComponent({
+  name: 'journal-dispatcher-stats',
   components: { Loading },
 
   setup() {

src/components/JournalView/JournalDriverStats.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="journal-stats">
+  <div class="journal-stats" v-if="store.driverStatsData">
-    <span v-if="store.driverStatsData">
+    <span>
       <h3>
         {{ $t('journal.stats-title') }}
         <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
       </h3>
 
+      <hr class="header-separator" />
+
       <div class="info-stats">
         <span class="stat-badge">
           <span>{{ $t('journal.stats-timetables') }}</span>
@@ -43,13 +45,13 @@
       </div>
     </span>
 
-    <b v-else-if="store.driverStatsStatus == Status.Data.Loading">{{
+    <!-- <b v-else-if="store.driverStatsStatus == Status.Data.Loading">{{
       $t('journal.stats-loading')
     }}</b>
     <b v-else-if="store.driverStatsStatus == Status.Data.Error">
       {{ $t('journal.stats-error ') }}
     </b>
-    <b v-else>{{ $t('journal.driver-stats-info') }}</b>
+    <b v-else>{{ $t('journal.driver-stats-info') }}</b> -->
   </div>
 </template>
 

src/components/JournalView/JournalStats.vue

@@ -1,12 +1,24 @@
 <template>
-  <div class="journal-stats" v-if="!store.isOffline">
+  <div
-    <div class="stats-buttons">
+    class="journal-stats dropdown"
+    v-if="!mainStore.isOffline"
+    @keydown.esc="currentStatsTab = null"
+  >
+    <div
+      class="dropdown_background"
+      v-if="currentStatsTab !== null"
+      @click="currentStatsTab = null"
+    ></div>
+
+    <div class="actions-bar">
       <button
-        v-for="button in data.statsButtons"
+        v-for="button in statsButtons"
-        :key="button.name"
+        :key="button.tab"
         class="btn--filled btn--image"
-        :data-selected="button.name == currentStatsTab"
+        :data-selected="button.tab == currentStatsTab"
-        @click="onTabButtonClick(button.name)"
+        :data-disabled="button.disabled"
+        :disabled="button.disabled"
+        @click="onTabButtonClick(button.tab)"
       >
         <img
           v-if="button.iconName"
@@ -17,87 +29,69 @@
       </button>
     </div>
 
-    <div class="stats-tab" v-show="currentStatsTab !== null">
+    <transition name="dropdown-anim">
+      <div class="dropdown_wrapper" v-if="currentStatsTab !== null">
         <keep-alive>
-        <JournalDailyStats v-if="currentStatsTab == 'journal-daily-stats'" />
+          <component :is="currentStatsTab" :key="currentStatsTab"></component>
-        <JournalDriverStats v-else-if="currentStatsTab == 'journal-driver-stats'" />
         </keep-alive>
       </div>
+    </transition>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
-import { computed, onMounted, reactive, Ref, ref, watch } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import JournalDailyStats from './JournalDailyStats.vue';
-import JournalDriverStats from './JournalDriverStats.vue';
 import StorageManager from '../../managers/storageManager';
+import { Journal } from './typings';
+import JournalDailyStats from './JournalDailyStats.vue';
+import JournalDispatcherStats from './JournalDispatcherStats.vue';
+import JournalDriverStats from './JournalDriverStats.vue';
 
-export type JournalStatsTab = 'journal-driver-stats' | 'journal-daily-stats';
+export default defineComponent({
-
+  components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
-const store = useMainStore();
+  props: {
-const currentStatsTab: Ref<JournalStatsTab | null> = ref(null);
+    statsButtons: {
-
+      type: Array as PropType<Journal.StatsButton[]>,
-let data = reactive({
+      required: true
-  statsButtons: [
+    }
-    {
-      name: 'journal-daily-stats',
-      localeKey: 'journal.daily-stats-title',
-      iconName: 'stats'
   },
-    {
+  data() {
-      name: 'journal-driver-stats',
+    return {
-      localeKey: 'journal.driver-stats-title',
+      Journal,
-      iconName: 'user'
+      mainStore: useMainStore(),
+      currentStatsTab: null as Journal.StatsTab | null
+    };
+  },
+  mounted() {
+    // const storedTab = StorageManager.getStringValue('journalStatsTab');
+    // if (storedTab && storedTab !== '' && this.statsButtons.some((b) => b.tab == storedTab))
+    //   this.currentStatsTab = storedTab as Journal.StatsTab;
+  },
+  // watch: {
+  //   'mainStore.driverStatsData'(newData, prevData) {
+  //     this.currentStatsTab =
+  //       JSON.stringify(prevData) !== JSON.stringify(newData) && newData !== undefined
+  //         ? Journal.StatsTab.DRIVER_STATS
+  //         : this.currentStatsTab;
+  //   }
+  // },
+  methods: {
+    onTabButtonClick(tab: Journal.StatsTab) {
+      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
+
+      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
     }
-  ] as { name: JournalStatsTab; localeKey: string; iconName?: string }[]
-});
-
-function onTabButtonClick(tab: JournalStatsTab) {
-  currentStatsTab.value = tab == currentStatsTab.value ? null : tab;
-  StorageManager.setStringValue('journalStatsTab', currentStatsTab.value ?? '');
   }
-
-watch(
-  computed(() => store.driverStatsData),
-  (newData, prevData) => {
-    currentStatsTab.value =
-      JSON.stringify(prevData) !== JSON.stringify(newData) && newData !== undefined
-        ? 'journal-driver-stats'
-        : currentStatsTab.value;
-  }
-);
-
-onMounted(() => {
-  const storedTab = StorageManager.getStringValue('journalStatsTab');
-
-  if (storedTab && storedTab !== '') currentStatsTab.value = storedTab as JournalStatsTab;
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
+@import '../../styles/dropdown.scss';
+@import '../../styles/dropdown_filters.scss';
 @import '../../styles/variables.scss';
 
-.stats-buttons {
+.dropdown_wrapper {
-  position: relative;
+  max-width: 100%;
-
-  display: flex;
-  gap: 0.5em;
-
-  margin-bottom: 0.5em;
-
-  button {
-    font-weight: bold;
-    padding: 0.5em 0.75em;
-
-    &[data-inactive='true'] {
-      color: gray;
-    }
-
-    &[data-selected='true'] {
-      color: $accentCol;
-    }
-  }
 }
 </style>

src/components/JournalView/typings.ts

@@ -46,4 +46,17 @@ export namespace Journal {
     id: TimetableSorterKey;
     dir: 'asc' | 'desc';
   }
+
+  export enum StatsTab {
+    DRIVER_STATS = 'journal-driver-stats',
+    DISPATCHER_STATS = 'journal-dispatcher-stats',
+    DAILY_STATS = 'journal-daily-stats'
+  }
+
+  export interface StatsButton {
+    tab: StatsTab;
+    localeKey: string;
+    iconName: string;
+    disabled: boolean;
+  }
 }

src/locales/en.json

@@ -371,6 +371,9 @@
     "driver-stats-title": "DRIVER STATS",
     "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
 
+    "dispatcher-stats-title": "DISPATCHER STATS",
+    "dispatcher-stats-info": "Enter a proper nickname into filters [F] to see user's dispatcher statistics!",
+
     "stats-loading": "Fetching statistics...",
     "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
 

src/locales/pl.json

@@ -349,9 +349,12 @@
     "daily-stats-title": "STATYSTYKI DNIA",
     "daily-stats-info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
 
-    "driver-stats-title": "STATYSTYKI GRACZA",
+    "driver-stats-title": "STAT. MASZYNISTY",
     "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
 
+    "dispatcher-stats-title": "STATYSTYKI DYŻURNEGO",
+    "dispatcher-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki dyżurnego!",
+
     "stats-loading": "Pobieranie statystyk...",
     "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk!",
 

src/store/mainStore.ts

@@ -19,6 +19,7 @@ export const useMainStore = defineStore('store', {
 
       dispatcherStatsName: '',
       dispatcherStatsData: undefined,
+      dispatcherStatsStatus: Status.Data.Initialized,
 
       driverStatsName: '',
       driverStatsData: undefined,

src/styles/JournalSection.scss

@@ -53,9 +53,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 0.5em;
-
   position: relative;
-  margin-bottom: 0.5em;
 }
 
 .btn--load-data {

src/styles/JournalStats.scss

@@ -2,24 +2,30 @@
 @import 'responsive.scss';
 
 .stats-tab {
+  position: absolute;
+  right: 0;
+  z-index: 99;
+
+  transform: translateY(1em);
+
+  width: 100%;
+
   background-color: #1a1a1a;
   box-shadow: 0 0 5px 1px $accentCol;
 
   padding: 1em;
   display: flex;
   align-items: flex-end;
+}
 
-  margin-bottom: 0.5em;
+hr.header-separator {
-
+  margin-bottom: 1em;
-  width: 100%;
 }
 
 .info-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
-
-  margin-top: 1em;
 }
 
 .stat-badge {

src/styles/dropdown.scss

@@ -30,7 +30,8 @@
   top: calc(100% + 0.5em);
 
   background-color: $bgCol;
-  box-shadow: 0 5px 10px 2px #0f0f0f;
+  // box-shadow: 0 5px 10px 2px #0f0f0f;
+  box-shadow: 0 0 5px 1px $accentCol;
 
   width: 100%;
   max-width: 550px;

src/styles/dropdown_filters.scss

@@ -5,11 +5,6 @@
 .actions-bar {
   display: flex;
   gap: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.filters-options {
-  position: relative;
 }
 
 h1.option-title {

src/styles/global.scss

@@ -11,7 +11,7 @@
   --clr-skr: #ff5100;
   --clr-twr: #ffbb00;
 
-  --clr-error: #df3e3e;
+  --clr-error: #fa3636;
   --clr-warning: #c59429;
 
   --clr-donator: #f7a4ff;
@@ -158,6 +158,10 @@ ul {
     color: #ccc;
   }
 
+  &--error {
+    color: var(--clr-error);
+  }
+
   &--donator {
     color: var(--clr-donator);
     text-shadow: var(--clr-donator) 0 0 10px;
@@ -183,7 +187,7 @@ a.a-button {
   &[data-disabled='true'] {
     user-select: none;
     pointer-events: none;
-    opacity: 0.85;
+    opacity: 0.7;
   }
 
   &.btn--filled {

src/views/JournalDispatchers.vue

@@ -3,6 +3,7 @@
     <JournalHeader />
 
     <div class="journal_wrapper">
+      <div class="journal_top-bar">
         <JournalOptions
           @on-search-confirm="fetchHistoryData"
           @on-options-reset="resetOptions"
@@ -13,6 +14,9 @@
           optionsType="dispatchers"
         />
 
+        <JournalStats :statsButtons="statsButtons" />
+      </div>
+
       <div class="journal_refreshed-date" v-if="dataRefreshedAt">
         {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
       </div>
@@ -33,22 +37,33 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 
-import JournalOptions from '../components/JournalView/JournalOptions.vue';
+import http from '../http';
 import { useMainStore } from '../store/mainStore';
-import JournalDispatchersList from '../components/JournalView/JournalDispatchersList.vue';
-
-import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import { LocationQuery } from 'vue-router';
 import { Journal } from '../components/JournalView/typings';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
-import http from '../http';
+
+import JournalOptions from '../components/JournalView/JournalOptions.vue';
+import JournalDispatchersList from '../components/JournalView/JournalDispatchersList.vue';
+import JournalHeader from '../components/JournalView/JournalHeader.vue';
+import JournalStats from '../components/JournalView/JournalStats.vue';
+
+const statsButtons: Journal.StatsButton[] = [
+  {
+    tab: Journal.StatsTab.DISPATCHER_STATS,
+    localeKey: 'journal.dispatcher-stats-title',
+    iconName: 'user',
+    disabled: false
+  }
+];
 
 export default defineComponent({
   components: {
     JournalOptions,
     JournalDispatchersList,
-    JournalHeader
+    JournalHeader,
+    JournalStats
   },
   name: 'JournalDispatchers',
 
@@ -65,6 +80,8 @@ export default defineComponent({
   },
 
   data: () => ({
+    statsButtons,
+
     currentQuery: '',
     currentQueryArray: [] as string[],
     dataRefreshedAt: null as Date | null,
@@ -102,7 +119,7 @@ export default defineComponent({
     const scrollElement: Ref<HTMLElement | null> = ref(null);
 
     return {
-      store: useMainStore(),
+      mainStore: useMainStore(),
 
       sorterActive,
       searchersValues,
@@ -120,6 +137,12 @@ export default defineComponent({
       this.currentOptionsActive =
         q.length > 2 ||
         q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timestampFrom');
+    },
+
+    'mainStore.dispatcherStatsData'(stats) {
+      // console.log(stats);
+      // this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DRIVER_STATS)!.disabled =
+      //   driverStats === undefined;
     }
   },
 
@@ -241,7 +264,7 @@ export default defineComponent({
         this.historyList = responseData;
 
         // Stats display
-        this.store.dispatcherStatsName =
+        this.mainStore.dispatcherStatsName =
           this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
             ? this.historyList[0].dispatcherName
             : '';

src/views/JournalTimetables.vue

@@ -3,6 +3,7 @@
     <JournalHeader />
 
     <div class="journal_wrapper">
+      <div class="journal_top-bar">
         <JournalOptions
           @on-search-confirm="fetchHistoryData"
           @on-options-reset="resetOptions"
@@ -14,7 +15,8 @@
           optionsType="timetables"
         />
 
-      <JournalStats />
+        <JournalStats :statsButtons="statsButtons" />
+      </div>
 
       <div class="journal_refreshed-date" v-if="dataRefreshedAt">
         {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
@@ -138,6 +140,24 @@ export default defineComponent({
   },
 
   data: () => ({
+    journalTimetableFilters,
+    mainStore: useMainStore(),
+
+    statsButtons: [
+      {
+        tab: Journal.StatsTab.DAILY_STATS,
+        localeKey: 'journal.daily-stats-title',
+        iconName: 'stats',
+        disabled: false
+      },
+      {
+        tab: Journal.StatsTab.DRIVER_STATS,
+        localeKey: 'journal.driver-stats-title',
+        iconName: 'user',
+        disabled: true
+      }
+    ],
+
     currentQueryParams: {} as TimetablesQueryParams,
     dataRefreshedAt: null as Date | null,
 
@@ -149,7 +169,6 @@ export default defineComponent({
     currentOptionsActive: false,
 
     timetableHistory: [] as API.TimetableHistory.Response,
-    journalTimetableFilters,
 
     dataStatus: Status.Data.Loading,
     dataErrorMessage: ''
@@ -189,15 +208,18 @@ export default defineComponent({
       countFromIndex,
       countLimit,
 
-      scrollElement,
+      scrollElement
-
-      store: useMainStore()
     };
   },
 
   watch: {
     currentQueryParams(q: TimetablesQueryParams) {
       this.currentOptionsActive = Object.values(q).some((v) => v !== undefined);
+    },
+
+    'mainStore.driverStatsData'(driverStats) {
+      this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DRIVER_STATS)!.disabled =
+        driverStats === undefined;
     }
   },