fix dymamic collapse

7 files changed, 106 insertions, 19 deletions

diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue
index d95d8e80..f3db0c75 100644
--- a/src/views/_sila/Power/Dynamic/CurrentInput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_InputCur"
-    default-open
     :title="$t('pagePowerSup.InputCurrent')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/current.svg" />
@@ -169,15 +169,21 @@ export default {
     this.loadData();
   },
   methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
     loadData() {
       let payload = { metricsName: 'psu_current', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
-
+      this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$root.$emit('psu-current');
         this.isBusy = false;
+        this.endLoader();
       });
     },
   },
diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
index 74c26d1b..bd353eb7 100644
--- a/src/views/_sila/Power/Dynamic/CurrentOutput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_OutputCur"
-    default-open
     :title="$t('pagePowerSup.OutputCurrent')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/current.svg" />
@@ -166,5 +166,24 @@ export default {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
   },
+  methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+    loadData() {
+      let payload = { metricsName: 'psu_current', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+      this.startLoader();
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-current');
+        this.isBusy = false;
+        this.endLoader();
+      });
+    },
+  },
 };
 </script>
diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue
index 14ec8a35..ee634731 100644
--- a/src/views/_sila/Power/Dynamic/PowerInput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerInput.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_InputPower"
-    default-open
     :title="$t('pagePowerSup.InputPower')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/power.svg" />
@@ -25,7 +25,7 @@
               v-model="shutdown"
               type="number"
               :min="warning"
-              :max="100"
+              :max="125"
             >
             </b-form-input>
           </b-form-group>
@@ -37,7 +37,7 @@
         </b-col>
       </b-row> -->
       <chart
-        type="power"
+        type="psu-power"
         :time-scale="timeScale"
         :data="filteredItems"
         :colors="colors"
@@ -104,8 +104,8 @@ export default {
   },
   data() {
     return {
-      warning: 72,
-      shutdown: 95,
+      warning: 95,
+      shutdown: 110,
       isBusy: true,
       fields: [
         {
@@ -169,15 +169,22 @@ export default {
     this.loadData();
   },
   methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+
     loadData() {
       let payload = { metricsName: 'psu_power', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
-
+      this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$root.$emit('psu-power');
         this.isBusy = false;
+        this.endLoader();
       });
     },
   },
diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue
index 77e90e87..6580eb9e 100644
--- a/src/views/_sila/Power/Dynamic/PowerOutput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_OutputPower"
-    default-open
     :title="$t('pagePowerSup.OutputPower')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/power.svg" />
@@ -25,7 +25,7 @@
               v-model="shutdown"
               type="number"
               :min="warning"
-              :max="100"
+              :max="126"
             >
             </b-form-input>
           </b-form-group>
@@ -37,7 +37,7 @@
         </b-col>
       </b-row> -->
       <chart
-        type="power"
+        type="psu-power"
         :time-scale="timeScale"
         :data="filteredItems"
         :colors="colors"
@@ -104,8 +104,8 @@ export default {
   },
   data() {
     return {
-      warning: 72,
-      shutdown: 95,
+      warning: 95,
+      shutdown: 110,
       isBusy: true,
       fields: [
         {
@@ -165,5 +165,26 @@ export default {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
   },
+  methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+
+    loadData() {
+      let payload = { metricsName: 'psu_power', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+
+      this.startLoader();
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-power');
+        this.isBusy = false;
+        this.endLoader();
+      });
+    },
+  },
 };
 </script>
diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue
index e253b28a..a58c7eaf 100644
--- a/src/views/_sila/Power/Dynamic/PowerTemp.vue
+++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_psuTempp"
-    default-open
     :title="$t('pagePowerSup.temperature')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/temperature.svg" />
@@ -89,13 +89,14 @@ import PageSection from '@/components/Global/PageSection';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import Collapse from '@/components/_sila/Global/Collapse';
 
 import { getItems } from '@/utilities/_sila/metricProperties';
 
 export default {
   components: { PageSection, Chart, Collapse },
-  mixins: [DataFormatterMixin, TableFilterMixin],
+  mixins: [DataFormatterMixin, TableFilterMixin, LoadingBarMixin],
   props: {
     timeScale: {
       type: String,
@@ -170,15 +171,21 @@ export default {
     this.loadData();
   },
   methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
     loadData() {
       let payload = { metricsName: 'psu_temp', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
-
+      this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$root.$emit('psu-temp');
         this.isBusy = false;
+        this.endLoader();
       });
     },
   },
diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue
index d7f1ea8c..e6071830 100644
--- a/src/views/_sila/Power/Dynamic/VoltInput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltInput.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_InputVolt"
-    default-open
     :title="$t('pagePowerSup.InputVolt')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/voltage.svg" />
@@ -168,15 +168,22 @@ export default {
     this.loadData();
   },
   methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
     loadData() {
       let payload = { metricsName: 'psu_voltage', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
 
+      this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$root.$emit('psu-volt');
         this.isBusy = false;
+        this.endLoader();
       });
     },
   },
diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue
index d75a56b9..3f3eecb0 100644
--- a/src/views/_sila/Power/Dynamic/VoltOutput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue
@@ -1,8 +1,8 @@
 <template>
   <collapse
     id="collapse_OutputVolt"
-    default-open
     :title="$t('pagePowerSup.OutputVolt')"
+    @opened="onOpened"
   >
     <template #image>
       <img src="@/assets/images/_sila/collapsed/voltage.svg" />
@@ -165,5 +165,25 @@ export default {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
   },
+  methods: {
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+    loadData() {
+      let payload = { metricsName: 'psu_voltage', lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload.lastHour = true;
+      }
+
+      this.startLoader();
+      this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
+        this.$root.$emit('psu-volt');
+        this.isBusy = false;
+        this.endLoader();
+      });
+    },
+  },
 };
 </script>