catch errors and redesign

src/components/ChannelsStat.vue

@@ -7,6 +7,7 @@ import {ChartDateSeries} from "@/interface/ChartDateSeries";
 import {ChannelsDayStat, useChannelStore} from "@/store/channel";
 import {useLocale} from "vuetify";
 import {useLogStore} from "@/store/log";
+import {AxiosError} from "axios";
 const channelStore = useChannelStore();
 const { t } = useLocale()
 const channelEntities = ref<ChannelEntity[]>( []);
@@ -91,13 +92,16 @@ function load(){
     channelEntities.value = channels;
     makeChannelChart(channelChartKey.value);
     loading.value = false;
-  })
+  }).catch((error: AxiosError)=>{
+    console.dir(error);
+    loading.value = false;
+  });
 
 }
 channelStore.init({enabled: true});
 defineExpose({load})
 
-
+load();
 </script>
 
 <template>

src/components/DeviceStat.vue

@@ -4,6 +4,7 @@ import {useDeviceStore} from "@/store/device";
 import DeviceEntity from "@/model/DeviceEntity";
 import dayjs from "dayjs";
 import {useLocale} from "vuetify";
+import {AxiosError} from "axios";
 const { t } = useLocale()
 const deviceStore = useDeviceStore();
 
@@ -25,13 +26,14 @@ function load(){
   console.dir(props);
   deviceStore.getDeviceStat(props.range, props.provider).then((devices: DeviceEntity[])=>{
     deviceEntities.value = devices;
-    console.dir(devices);
+    loading.value = false;
+  }).catch((error: AxiosError)=>{
+    console.dir(error);
     loading.value = false;
   })
 }
 defineExpose({load})
-
-
+load();
 </script>
 
 <template>

src/components/Stat.vue

@@ -26,16 +26,25 @@ const deviceStat = ref();
 
 
 function update(){
-  channelStat.value.load();
-  deviceStat.value.load();
+  switch (tab.value){
+    case 'channel':
+      channelStat.value.load();
+      break;
+    case 'device':
+      deviceStat.value.load();
+      break;
+  }
 }
 
 
 </script>
 
 <template>
 
-  <v-card>
+  <v-card class="ma-2">
+    <v-card-title>
+      {{$t('app.query.title')}}
+    </v-card-title>
     <v-card-text>
   <v-autocomplete v-model="provider" :label="$t('app.query.provider')" item-title="provider_name"  :items="providerStore.getProviders()" :return-object="true" :clearable="true"/>
 
@@ -61,10 +70,10 @@ function update(){
     </v-card-text>
     <v-card-actions>
       <v-spacer></v-spacer>
-        <v-btn @click="update" prepend-icon="mdi-refresh" color="primary">{{$t('app.query.do')}}</v-btn>
+        <v-btn variant="flat"  @click="update" prepend-icon="mdi-refresh" color="red">{{$t('app.query.do')}}</v-btn>
     </v-card-actions>
   </v-card>
-  <v-card>
+  <v-card class="ma-2">
     <v-tabs
       v-model="tab"
       bg-color="primary"

src/locale/en-US.json

@@ -13,12 +13,13 @@
     "unique_devices": "Maximum unique devices"
   },
   "query": {
+    "title": "Report options",
     "range": "Period",
     "from": "From",
     "to": "To",
     "provider": "Only for",
     "threshold": "View time threshold, min",
-    "do": "Do query",
+    "do": "Refresh",
     "showMinutes": "Show duration in minutes instead formatted duration",
     "showHours":  "Show duration in hours instead formatted duration"
   },

src/store/channel.ts

@@ -1,5 +1,5 @@
 import {defineStore} from "pinia";
-import {AxiosResponse} from "axios";
+import {AxiosError, AxiosResponse} from "axios";
 import {Channel} from "@/dto/provider/Channel";
 import channelService from "@/service/provider/ChannelService";
 import ChannelEntity from "@/model/ChannelEntity";
@@ -86,7 +86,7 @@ export const useChannelStore = defineStore('channelStore',{
       })
     },
     async fillStat(dateRange: Date[], provider: Provider|null = null):Promise<ChannelEntity[]>{
-      return new Promise<ChannelEntity[]>((resolve) => {
+      return new Promise<ChannelEntity[]>((resolve, reject) => {
         let count:number = 0;
         if(dateRange.length ==0){
           resolve(this.channels);
@@ -97,14 +97,16 @@ export const useChannelStore = defineStore('channelStore',{
             if(count == dateRange.length){
               resolve(this.channels);
             }
+          }).catch((error: AxiosError)=>{
+            reject(error);
           })
         }
       });
      },
     async fillDay(value:Date, provider: Provider|null = null):Promise<number>{
       this.getChannelsDayStat(value).audience = 0;
 
-      return new Promise((resolve)=>{
+      return new Promise((resolve,reject)=>{
         accountStatService.query(
           {
             from: dayjs(value).format('YYYY-MM-DD'),
@@ -153,6 +155,8 @@ export const useChannelStore = defineStore('channelStore',{
 
           }
 
+        }).catch((error: AxiosError)=>{
+          reject(error);
         })
       })
 

src/store/device.ts

@@ -2,7 +2,7 @@ import DeviceEntity from "@/model/DeviceEntity";
 import {defineStore} from "pinia";
 import {Provider} from "@/dto/provider/Provider";
 import dayjs from "dayjs";
-import {AxiosResponse} from "axios";
+import {AxiosError, AxiosResponse} from "axios";
 import deviceStatService from "@/service/stat/DeviceStatService";
 import {DeviceStatResponse} from "@/dto/stat/DeviceStatResponse";
 
@@ -36,7 +36,7 @@ export const useDeviceStore = defineStore('deviceStore', {
 
     async getDeviceStat(dateRange: Date[], provider: Provider|null = null):Promise<DeviceEntity[]>{
       this.eraseStat();
-      return new Promise<DeviceEntity[]>((resolve) => {
+      return new Promise<DeviceEntity[]>((resolve,reject) => {
         let count:number = 0;
         if(dateRange.length ==0){
           resolve(this.devices);
@@ -61,6 +61,8 @@ export const useDeviceStore = defineStore('deviceStore', {
             if(count == dateRange.length){
               resolve(this.devices);
             }
+          }).catch((error: AxiosError)=>{
+            reject(error);
           })
         }