add time tabs

4 files changed, 119 insertions, 26 deletions

diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index ccb0a0d1..f223abec 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 style="margin: -2rem 0 0 -2rem" />
+    <table-date-picker
+      :switch-time-scale="switchTimeScale"
+      :time-scale="timeScale"
+      style="margin: -2rem 0 0 -2rem"
+    />
     <div class="custom-divider" style="margin-top: 0">
       <b-button
         variant="collapse"
@@ -13,12 +17,23 @@
       <b-row class="align-items-end p-2">
         <b-col xs="12" md="3" class="pt-2">
           <b-form-group :label="$t('pageFans.labels.warning')">
-            <b-form-input> </b-form-input>
+            <b-form-input
+              v-model="fanSpeedWarninigInput"
+              type="number"
+              :min="0"
+              :max="fanSpeedShutdownInput"
+            >
+            </b-form-input>
           </b-form-group>
         </b-col>
         <b-col xs="12" md="3" class="pt-2">
           <b-form-group :label="$t('pageFans.labels.shutdown')">
-            <b-form-input> </b-form-input>
+            <b-form-input
+              v-model="fanSpeedShutdownInput"
+              :min="fanSpeedWarninigInput"
+              :max="4000"
+              type="number"
+            ></b-form-input>
           </b-form-group>
         </b-col>
         <b-col xs="12" md="3" class="pt-2">
@@ -89,6 +104,9 @@ export default {
   data() {
     return {
       activeFilters: [],
+      timeScale: 'hour',
+      fanSpeedWarninigInput: 2450,
+      fanSpeedShutdownInput: 3150,
       fanSpeedWarninig: 2450,
       fanSpeedShutdown: 3150,
       fields: [
@@ -151,10 +169,27 @@ export default {
   },
 
   created() {
-    this.startLoader();
-    this.$store.dispatch('fan/getFansDynamic').finally(() => {
-      this.endLoader();
-    });
+    this.loadData();
+  },
+
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+      this.loadData();
+    },
+
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCritical = +this.temperatureCriticalInput;
+    },
+
+    loadData() {
+      this.startLoader();
+      this.$store.dispatch('fan/getFansDynamic').finally(() => {
+        this.endLoader();
+      });
+    },
   },
 };
 </script>
diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index 78dbc98f..4c1a3dc8 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker style="margin: -2rem 0 0 -2rem" />
+    <table-date-picker
+      :switch-time-scale="switchTimeScale"
+      :time-scale="timeScale"
+      style="margin: -2rem 0 0 -2rem"
+    />
     <div class="custom-divider" style="margin-top: 0">
       <b-button
         variant="collapse"
@@ -111,9 +115,15 @@ export default {
   data() {
     return {
       activeFilters: [],
+      timeScale: 'hour',
       temperatureWarning: 72,
+      temperatureWarningInput: 72,
       temperatureNonNormal: 44,
+      temperatureNonNormalInput: 44,
       temperatureCriticalStart: 55,
+      temperatureCritical: 55,
+      temperatureCriticalInput: 55,
+      notificationInput: 42,
       fields: [
         {
           key: 'name',
@@ -174,10 +184,27 @@ export default {
   },
 
   created() {
-    this.startLoader();
-    this.$store.dispatch('memory/getMemoryDynamic').finally(() => {
-      this.endLoader();
-    });
+    this.loadData();
+  },
+
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+      this.loadData();
+    },
+
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCritical = +this.temperatureCriticalInput;
+    },
+
+    loadData() {
+      this.startLoader();
+      this.$store.dispatch('memory/getMemoryDynamic').finally(() => {
+        this.endLoader();
+      });
+    },
   },
 };
 </script>
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index 628cb92f..f4d41901 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker style="margin: -2rem 0 0 -2rem" />
+    <table-date-picker
+      :switch-time-scale="switchTimeScale"
+      :time-scale="timeScale"
+      style="margin: -2rem 0 0 -2rem"
+    />
     <div class="custom-divider" style="margin-top: 0">
       <b-button
         variant="collapse"
@@ -13,7 +17,12 @@
       <b-row class="align-items-end p-2">
         <b-col xs="12" md="3" class="pt-2">
           <b-form-group :label="$t('pageMotherboard.labels.warning')">
-            <b-form-input> </b-form-input>
+            <b-form-input
+              v-model="temperatureWarningInput"
+              type="number"
+              :min="0"
+              :max="100"
+            ></b-form-input>
           </b-form-group>
         </b-col>
         <b-col xs="12" md="6" class="pt-2">
@@ -64,13 +73,6 @@
           </span>
         </template>
       </b-table>
-      <chart
-        type="motherboard"
-        :data="filteredSensors"
-        :warning="temperatureWarning"
-        :non-normal="temperatureNonNormal"
-        :critical-start="temperatureCriticalStart"
-      ></chart>
     </div>
   </b-container>
 </template>
@@ -92,8 +94,11 @@ export default {
     return {
       activeFilters: [],
       temperatureWarning: 72,
+      temperatureWarningInput: 72,
       temperatureNonNormal: 44,
+      temperatureNonNormalInput: 44,
       temperatureCriticalStart: 55,
+      temperatureCriticalInput: 55,
       fields: [
         {
           key: 'name',
@@ -154,10 +159,27 @@ export default {
   },
 
   created() {
-    this.startLoader();
-    this.$store.dispatch('motherboard/getMotherboardDynamic').finally(() => {
-      this.endLoader();
-    });
+    this.loadData();
+  },
+
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+      this.loadData();
+    },
+
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCritical = +this.temperatureCriticalInput;
+    },
+
+    loadData() {
+      this.startLoader();
+      this.$store.dispatch('motherboard/getMotherboardDynamic').finally(() => {
+        this.endLoader();
+      });
+    },
   },
 };
 </script>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 63133249..cd083412 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker style="margin: -2rem 0 0 -2rem" />
+    <table-date-picker
+      :switch-time-scale="switchTimeScale"
+      :time-scale="timeScale"
+      style="margin: -2rem 0 0 -2rem"
+    />
     <collapse
       id="collapse_1"
       :title="$t('pageProcessors.temperature')"
@@ -195,6 +199,11 @@ export default {
   },
 
   methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+      this.loadData();
+    },
+
     updateTemperature() {
       this.temperatureWarning = +this.temperatureWarningInput;
       this.temperatureNonNormal = +this.temperatureNonNormalInput;