add tables for dynamic

1 files changed, 81 insertions, 0 deletions

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() {