Rework statystyk RJ

src/components/JournalView/DriverStats.vue

@@ -48,44 +48,15 @@ import { URLs } from '../../scripts/utils/apiURLs';
 import { useStore } from '../../store/store';
 
 export default defineComponent({
-  emits: ['closeCard'],
-
-  setup() {
-    const store = useStore();
-    return {
-      store,
-      driverStatsName: computed(() => store.driverStatsName),
-    };
-  },
-
   data() {
     return {
       test: Math.random(),
       lastDispatcherName: '',
+      store: useStore(),
 
       lastTimetables: [] as TimetableHistory[],
     };
   },
-
-  watch: {
-    driverStatsName(value: string) {
-      this.fetchDispatcherStats();
-    },
-  },
-
-  methods: {
-    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;
-
-      this.store.driverStatsData = statsData;
-    },
-  },
 });
 </script>
 

src/components/JournalView/JournalOptions.vue

@@ -89,7 +89,9 @@ import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
+import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
 import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
@@ -124,6 +126,7 @@ export default defineComponent({
       dispatcherSuggestions: [] as string[],
 
       searchTimeout: 0,
+      store: useStore(),
 
       DataStatus,
     };
@@ -138,6 +141,10 @@ export default defineComponent({
   },
 
   computed: {
+    driverStatsName() {
+      return this.store.driverStatsName;
+    },
+
     translatedSorterOptions() {
       return this.$props.sorterOptionIds.map((id) => ({
         id,
@@ -147,6 +154,11 @@ export default defineComponent({
   },
 
   watch: {
+    async driverStatsName(value: string) {
+      await this.fetchDispatcherStats();
+      this.store.currentStatsTab = value ? 'driver' : 'daily';
+    },
+
     async 'searchersValues.search-driver'(value: string | undefined) {
       clearTimeout(this.searchTimeout);
 
@@ -192,6 +204,18 @@ export default defineComponent({
   },
 
   methods: {
+    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;
+
+      this.store.driverStatsData = statsData;
+    },
+
     // Override keyMixin function
     onKeyDownFunction() {
       this.showOptions = !this.showOptions;

src/components/JournalView/JournalTimetables.vue

@@ -1,6 +1,8 @@
 <template>
   <section class="journal-timetables">
     <div class="journal_wrapper">
+      <TimetablesStats />
+
       <JournalOptions
         @on-search-confirm="searchHistory"
         @on-options-reset="resetOptions"
@@ -9,7 +11,7 @@
         :data-status="dataStatus"
       />
 
-      <DriverStats />
+      <!-- <DriverStats /> -->
       <!-- <button @click="statsCardOpen = true">Stats</button> -->
 
       <div class="list_wrapper" @scroll="handleScroll">
@@ -66,11 +68,12 @@ import modalTrainMixin from '../../mixins/modalTrainMixin';
 import imageMixin from '../../mixins/imageMixin';
 import JournalTimetablesList from './JournalTimetablesList.vue';
 import { journalTimetableFilters } from '../../constants/Journal/JournalTimetablesConsts';
+import TimetablesStats from './TimetablesStats.vue';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList },
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, TimetablesStats },
   mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
 
   name: 'JournalTimetables',

src/components/SceneryView/SceneryInfo.vue

@@ -9,7 +9,7 @@
             <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
 
             <span v-if="station.generalInfo.reqLevel > -1">
-              - {{ $tc('scenery.req-level', station.generalInfo.reqLevel, { lvl: station.generalInfo.reqLevel }) }}
+              - {{ $t('scenery.req-level', { lvl: station.generalInfo.reqLevel }, station.generalInfo.reqLevel) }}
             </span>
           </span>
 
@@ -33,7 +33,7 @@
         <scenery-info-routes :station="station" />
 
         <div class="scenery-authors" v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0">
-          <b> {{ $tc('scenery.authors-title', station.generalInfo.authors.length) }}: </b>
+          <b> {{ $t('scenery.authors-title', { authors: station.generalInfo.authors.length }, station.generalInfo.authors.length) }}: </b>
           {{ station.generalInfo.authors.join(', ') }}
         </div>
 
@@ -72,7 +72,6 @@ import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import Station from '../../scripts/interfaces/Station';
 
-
 export default defineComponent({
   components: {
     SceneryInfoDispatcher,

src/locales/en.json

@@ -252,7 +252,7 @@
     "stock-max-speed": "Maximum registered speed",
 
     "load-data": "Load further data...",
-    
+
     "last-seen-at": "Last seen at",
     "currently-at": "Currently at",
 
@@ -262,7 +262,11 @@
     "stats-longest-timetable": "LONGEST TIMETABLE",
     "stats-avg-timetable": "AVERAGE TIMETABLE LENGTH",
     "stats-distance": "DISTANCE",
-    "stats-stations": "STATIONS"
+    "stats-stations": "STATIONS",
+
+    "timetables-stats-total": "Today, dispatchers made so far <b class='text--primary'>{count}</b> timetables with total distance of <b class='text--primary'>{distance}km</b>.",
+    "timetable-stats-longest": "Today's the longest timetable is <b>#{id}</b> made by <b>{author}</b> for <b>{driver}</b> - <b class='text--primary'>{distance}km</b>!",
+    "timetable-stats-most-active": "The most active dispatcher is <b>{dispatcher}</b> who created <b class='text--primary'>{count}</b> timetables."
   },
   "scenery": {
     "users": "PLAYERS ONLINE",

src/locales/pl.json

@@ -266,7 +266,11 @@
     "stats-longest-timetable": "NAJDŁUŻSZY RJ",
     "stats-avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
     "stats-distance": "DYSTANS",
-    "stats-stations": "STACJE"
+    "stats-stations": "STACJE",
+
+    "timetables-stats-total": "Dyżurni stworzyli dziś <b class='text--primary'>{count}</b> rozkładów jazdy o łącznym dystansie <b class='text--primary'>{distance}km</b>.",
+    "timetable-stats-longest": "Najdłuższym rozkładem jazdy jest dzisiaj <b>#{id}</b> stworzony przez dyżurnego <b>{author}</b> dla maszynisty <b>{driver}</b> - <b class='text--primary'>{distance}km</b>!",
+    "timetable-stats-most-active": "Dzisiejszym najaktywniejszym dyżurnym jest <b>{dispatcher}</b>, który stworzył <b class='text--primary'>{count}</b> RJ."
   },
   "scenery": {
     "users": "GRACZE ONLINE",

src/main.ts

@@ -10,6 +10,7 @@ import { createPinia } from 'pinia';
 
 const i18n = createI18n({
   locale: 'pl',
+  legacy: false,
   fallbackLocale: 'pl',
   messages: {
     en: enLang,

src/store/store.ts

@@ -52,6 +52,8 @@ export const useStore = defineStore('store', {
         trains: DataStatus.Loading,
       },
 
+      currentStatsTab: 'daily',
+
       blockScroll: false,
       listenerLaunched: false,
 

src/store/storeTypes.ts

@@ -32,6 +32,8 @@ export interface StoreState {
 
   chosenModalTrainId?: string;
 
+  currentStatsTab: 'daily' | 'driver';
+
   dataStatuses: {
     connection: DataStatus;
     sceneries: DataStatus;

src/styles/global.scss

@@ -210,7 +210,7 @@ button {
 }
 
 button.btn--filled {
-  background-color: #333;
+  background-color: #1a1a1a;
   border-radius: 0.25em;
 
   &:hover {