add tables for dynamic

4 files changed, 251 insertions, 60 deletions

diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 22374fa7..37e759bc 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -4,10 +4,46 @@
 
     <chart
       type="fans"
+      :colors="colors"
       :data="filteredSensors"
       :warning="fanSpeedWarninig"
       :shutdown="fanSpeedShutdown"
     ></chart>
+
+    <b-table
+      v-if="items && items.length > 0"
+      responsive="md"
+      show-empty
+      table-variant="accessory"
+      hover
+      :items="items"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="item-color"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        {{ value }}
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+    </b-table>
   </b-container>
 </template>
 
@@ -18,6 +54,7 @@ import Chart from '@/components/_sila/Global/Chart';
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+import { getItems } from '@/utilities/_sila/metricProperties';
 
 export default {
   components: { PageTitle, Chart },
@@ -27,6 +64,37 @@ export default {
       activeFilters: [],
       fanSpeedWarninig: 2450,
       fanSpeedShutdown: 3150,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageFans.table.name'),
+        },
+        {
+          key: 'current',
+          label: this.$t('pageFans.table.current'),
+        },
+        {
+          key: 'middle',
+          label: this.$t('pageFans.table.middle'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pageFans.table.min'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pageFans.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pageFans.table.max'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pageFans.table.maxDate'),
+        },
+      ],
+      items: [],
     };
   },
 
@@ -39,6 +107,20 @@ export default {
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
     },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+
+  watch: {
+    filteredSensors(data) {
+      this.items = getItems(data);
+    },
   },
 
   created() {
diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index 21e18fe1..db304d24 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -4,11 +4,46 @@
 
     <chart
       type="memory"
+      :colors="colors"
       :data="filteredSensors"
       :warning="temperatureWarning"
       :non-normal="temperatureNonNormal"
       :critical-start="temperatureCriticalStart"
     ></chart>
+    <b-table
+      v-if="items && items.length > 0"
+      responsive="md"
+      show-empty
+      table-variant="accessory"
+      hover
+      :items="items"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="item-color"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        {{ value }}
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+    </b-table>
   </b-container>
 </template>
 
@@ -19,6 +54,7 @@ import Chart from '@/components/_sila/Global/Chart';
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+import { getItems } from '@/utilities/_sila/metricProperties';
 
 export default {
   components: { PageTitle, Chart },
@@ -29,6 +65,37 @@ export default {
       temperatureWarning: 72,
       temperatureNonNormal: 44,
       temperatureCriticalStart: 55,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageMemory.table.name'),
+        },
+        {
+          key: 'current',
+          label: this.$t('pageMemory.table.currentTemperature'),
+        },
+        {
+          key: 'middle',
+          label: this.$t('pageMemory.table.middleTemperature'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pageMemory.table.minTemperature'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pageMemory.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pageMemory.table.maxTemperature'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pageMemory.table.maxDate'),
+        },
+      ],
+      items: [],
     };
   },
 
@@ -41,6 +108,20 @@ export default {
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
     },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+
+  watch: {
+    filteredSensors(data) {
+      this.items = getItems(data);
+    },
   },
 
   created() {
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index b4d13f3f..e08fab38 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -4,11 +4,46 @@
 
     <chart
       type="motherboard"
+      :colors="colors"
       :data="filteredSensors"
       :warning="temperatureWarning"
       :non-normal="temperatureNonNormal"
       :critical-start="temperatureCriticalStart"
     ></chart>
+    <b-table
+      v-if="items && items.length > 0"
+      responsive="md"
+      show-empty
+      table-variant="accessory"
+      hover
+      :items="items"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(name)="{ value, index }">
+        <div
+          class="item-color"
+          :style="`background-color: ${colors[index]}`"
+        ></div>
+        {{ value }}
+      </template>
+      <template #cell(minDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+      <template #cell(maxDate)="{ value }">
+        <span style="color: rgb(12, 28, 41)">
+          {{ value.time }}
+        </span>
+        <span>
+          {{ value.date }}
+        </span>
+      </template>
+    </b-table>
   </b-container>
 </template>
 
@@ -19,6 +54,7 @@ import Chart from '@/components/_sila/Global/Chart';
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+import { getItems } from '@/utilities/_sila/metricProperties';
 
 export default {
   components: { PageTitle, Chart },
@@ -29,6 +65,37 @@ export default {
       temperatureWarning: 72,
       temperatureNonNormal: 44,
       temperatureCriticalStart: 55,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageMemory.table.name'),
+        },
+        {
+          key: 'current',
+          label: this.$t('pageMemory.table.currentTemperature'),
+        },
+        {
+          key: 'middle',
+          label: this.$t('pageMemory.table.middleTemperature'),
+        },
+        {
+          key: 'min',
+          label: this.$t('pageMemory.table.minTemperature'),
+        },
+        {
+          key: 'minDate',
+          label: this.$t('pageMemory.table.minDate'),
+        },
+        {
+          key: 'max',
+          label: this.$t('pageMemory.table.maxTemperature'),
+        },
+        {
+          key: 'maxDate',
+          label: this.$t('pageMemory.table.maxDate'),
+        },
+      ],
+      items: [],
     };
   },
 
@@ -41,6 +108,20 @@ export default {
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
     },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+
+  watch: {
+    filteredSensors(data) {
+      this.items = getItems(data);
+    },
   },
 
   created() {
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 54f8e284..fa98e951 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -35,11 +35,13 @@
         <chart
           type="processors"
           :data="filteredSensors"
+          :colors="colors"
           :warning="temperatureWarning"
           :non-normal="temperatureNonNormal"
           :critical-start="temperatureCriticalStart"
         ></chart>
         <b-table
+          v-if="items && items.length > 0"
           responsive="md"
           show-empty
           table-variant="accessory"
@@ -103,15 +105,15 @@ export default {
           label: this.$t('pageProcessors.table.name'),
         },
         {
-          key: 'currentTemperature',
+          key: 'current',
           label: this.$t('pageProcessors.table.currentTemperature'),
         },
         {
-          key: 'middleTemperature',
+          key: 'middle',
           label: this.$t('pageProcessors.table.middleTemperature'),
         },
         {
-          key: 'minTemperature',
+          key: 'min',
           label: this.$t('pageProcessors.table.minTemperature'),
         },
         {
@@ -119,7 +121,7 @@ export default {
           label: this.$t('pageProcessors.table.minDate'),
         },
         {
-          key: 'maxTemperature',
+          key: 'max',
           label: this.$t('pageProcessors.table.maxTemperature'),
         },
         {
@@ -127,62 +129,7 @@ export default {
           label: this.$t('pageProcessors.table.maxDate'),
         },
       ],
-      items: [
-        {
-          name: 'Процессор 1',
-          currentTemperature: 19,
-          middleTemperature: 40,
-          minTemperature: 31,
-          minDate: { time: '15:15', date: '11.11.2021' },
-          maxTemperature: 88,
-          maxDate: { time: '10:26', date: '15.11.2021' },
-        },
-        {
-          name: 'Процессор 2',
-          currentTemperature: 29,
-          middleTemperature: 40,
-          minTemperature: 20,
-          minDate: { time: '15:45', date: '11.11.2021' },
-          maxTemperature: 76,
-          maxDate: { time: '16:59', date: '16.11.2021' },
-        },
-        {
-          name: 'Процессор 3',
-          currentTemperature: 48,
-          middleTemperature: 46,
-          minTemperature: 31,
-          minDate: { time: '15:23', date: '11.11.2021' },
-          maxTemperature: 69,
-          maxDate: { time: '15:26', date: '15.11.2021' },
-        },
-        {
-          name: 'Процессор 4',
-          currentTemperature: 48,
-          middleTemperature: 45,
-          minTemperature: 5,
-          minDate: { time: '16:45', date: '25.11.2021' },
-          maxTemperature: 75,
-          maxDate: { time: '11:26', date: '16.11.2021' },
-        },
-        {
-          name: 'Процессор 5',
-          currentTemperature: 39,
-          middleTemperature: 44,
-          minTemperature: 30,
-          minDate: { time: '15:23', date: '11.11.2021' },
-          maxTemperature: 80,
-          maxDate: { time: '15:26', date: '17.11.2021' },
-        },
-        {
-          name: 'Процессор 6',
-          currentTemperature: 39,
-          middleTemperature: 44,
-          minTemperature: 5,
-          minDate: { time: '16:45', date: '25.11.2021' },
-          maxTemperature: 80,
-          maxDate: { time: '15:26', date: '15.11.2021' },
-        },
-      ],
+      items: [],
     };
   },