optimization for dynamic

3 files changed, 47 insertions, 17 deletions

diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
index c24bc8d7..b4c5dfdd 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_FansCpu"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageFans.speed')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -153,6 +155,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -258,8 +261,8 @@ export default {
 
     allSensors() {
       return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
+        ? this.$store.getters['fan/fansCpuLastHour']
+        : this.$store.getters['fan/fansCpu'];
     },
 
     preFiltered() {
@@ -287,14 +290,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  created() {
-    this.loadData();
-  },
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -326,6 +329,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -334,11 +338,13 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('fan-cpu', true);
       this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+      this.$store.dispatch('fan/getFansCpu', payload).finally(() => {
         this.$store.dispatch('fan/getLimits').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('fan-cpu', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
index 2271ef5c..b86e1672 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_FansSystem"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageFans.speedSystem')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -153,6 +155,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -258,8 +261,8 @@ export default {
 
     allSensors() {
       return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
+        ? this.$store.getters['fan/fansSystemLastHour']
+        : this.$store.getters['fan/fansSystem'];
     },
 
     preFiltered() {
@@ -287,14 +290,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  created() {
-    this.loadData();
-  },
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -328,6 +331,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -336,11 +340,13 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('fan-system', true);
       this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+      this.$store.dispatch('fan/getFansSystem', payload).finally(() => {
         this.$store.dispatch('fan/getLimits').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('fan-system', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 3b5b0030..eaf3777c 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <table-date-picker
+      :class="{ disabledDiv: loading }"
+      :time-scale="timeScale"
+      @changePeriod="onChangePeriod"
+    />
     <fan-speed-cpu :time-scale="timeScale"></fan-speed-cpu>
     <fan-speed-system :time-scale="timeScale"></fan-speed-system>
   </b-container>
@@ -12,7 +16,9 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 import FanSpeedCpu from './FanSpeedCpu';
@@ -23,10 +29,13 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
-
+  created() {
+    this.startProgress();
+  },
   methods: {
     resetZoom() {
       const resetButton = document.querySelector('.highcharts-reset-zoom');
@@ -38,8 +47,17 @@ export default {
     },
     onChangePeriod(period) {
       this.timeScale = period;
+      this.startProgress();
       this.resetZoom();
     },
+    startProgress() {
+      this.startLoader();
+      this.$root.$on('fan-cpu', (loading) => this.onLoading(loading));
+      this.$root.$on('fan-system', (loading) => this.onLoading(loading));
+    },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>