From ff01827eca7c0cdc7c1b4242483b766035587ad6 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Tue, 16 Aug 2022 12:55:15 +0300
Subject: add second table to Fans, fix dynamic pages layouts

---
 src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue | 248 ++++++++++++++++++++++++
 1 file changed, 248 insertions(+)
 create mode 100644 src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue

(limited to 'src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue')

diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
new file mode 100644
index 00000000..06f4dd14
--- /dev/null
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
@@ -0,0 +1,248 @@
+<template>
+  <collapse
+    id="collapse_FansSystem"
+    :title="$t('pageFans.speedSystem')"
+    @opened="onOpened"
+  >
+    <template #image>
+      <img src="@/assets/images/_sila/collapsed/fan.svg" />
+    </template>
+    <page-section>
+      <!-- <b-row class="align-items-end limit-container">
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageFans.labels.warning')">
+            <b-form-input
+              v-model="warning"
+              type="number"
+              :min="0"
+              :max="shutdown"
+            >
+            </b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-form-group :label="$t('pageFans.labels.shutdown')">
+            <b-form-input
+              v-model="shutdown"
+              :min="warning"
+              :max="10000"
+              type="number"
+            ></b-form-input>
+          </b-form-group>
+        </b-col>
+        <b-col xs="12" md="6" xl="3" class="pt-4">
+          <b-button variant="primary" style="height: 35px">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </b-col>
+      </b-row> -->
+      <chart
+        type="fans"
+        :colors="colors"
+        :time-scale="timeScale"
+        :data="filteredForChart"
+        :warning="warning"
+        :shutdown="shutdown"
+      ></chart>
+
+      <b-table
+        responsive="md"
+        show-empty
+        table-variant="accessory"
+        hover
+        :items="items"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+        :bisy="isBusy"
+      >
+        <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>
+        <template #cell(pwm)="{ value }">
+          <span>
+            {{ `${value}%` }}
+          </span>
+        </template>
+      </b-table>
+    </page-section>
+  </collapse>
+</template>
+<script>
+import Chart from '@/components/_sila/Global/Chart';
+import PageSection from '@/components/Global/PageSection';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+import Collapse from '@/components/_sila/Global/Collapse';
+
+import { getItems } from '@/utilities/_sila/metricProperties';
+import { fanFilter } from '@/utilities/_sila/psuFilter';
+
+export default {
+  components: { PageSection, Chart, Collapse },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  data() {
+    return {
+      warning: 8900,
+      shutdown: 9500,
+      isBusy: true,
+      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: 'pwm',
+          label: this.$t('pageFans.table.pwm'),
+        },
+        {
+          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'),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      const allArr = getItems(this.filteredSensors);
+
+      let pwmArr = allArr.filter((item) => {
+        return item.name.toLowerCase().includes('pwm');
+      });
+
+      let cpuArr = allArr.filter((item) => {
+        return !item.name.toLowerCase().includes('pwm');
+      });
+
+      return cpuArr.map((cpu) => {
+        let pwm = pwmArr.find((pwm) => pwm.name === this.getPwmByCpu(cpu.name))
+          .middle;
+        return {
+          pwm,
+          ...cpu,
+        };
+      });
+    },
+
+    allSensors() {
+      return this.timeScale === 'hour'
+        ? this.$store.getters['fan/fansLastHour']
+        : this.$store.getters['fan/fans'];
+    },
+
+    preFiltered() {
+      return fanFilter(this.allSensors, 'System').concat(
+        fanFilter(this.allSensors, 'pwm')
+      );
+    },
+
+    filteredForChart() {
+      return fanFilter(this.allSensors, 'System');
+    },
+
+    filteredSensors() {
+      return this.getFilteredTableData(this.preFiltered, this.activeFilters);
+    },
+
+    colors() {
+      return this.$randomColor({
+        count: this.items?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
+  },
+
+  watch: {
+    timeScale() {
+      this.loadData();
+    },
+  },
+
+  created() {
+    this.loadData();
+  },
+
+  methods: {
+    getPwmByCpu(cpu) {
+      switch (cpu) {
+        case 'System_Fan_1':
+          return 'Pwm_1';
+        case 'System_Fan_2':
+          return 'Pwm_5';
+        case 'System_Fan_3':
+          return 'Pwm_6';
+        default:
+          return null;
+      }
+    },
+
+    onOpened(state) {
+      if (state) {
+        this.loadData();
+      }
+    },
+
+    loadData() {
+      let payload = { lastHour: false };
+      if (this.timeScale === 'hour') {
+        payload = { lastHour: true };
+      }
+
+      this.startLoader();
+      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+        this.endLoader();
+        this.isBusy = false;
+      });
+    },
+  },
+};
+</script>
-- 
cgit v1.2.3