1 files changed, 81 insertions, 0 deletions
diff --git a/src/views/_sila/Fans/Static/FansStaticPage.vue b/src/views/_sila/Fans/Static/FansStaticPage.vue
new file mode 100644
index 00000000..810aeb4b
--- /dev/null
+++ b/src/views/_sila/Fans/Static/FansStaticPage.vue
@@ -0,0 +1,81 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('appPageTitle.specification')" />
+    <page-section :section-small-title="$t('pageFans.installedFans')">
+      <b-table
+        responsive="md"
+        show-empty
+        :items="fans"
+        :busy="isBusy"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+      >
+        <template #cell(status)="{ value }">
+          <status-icon :status="statusIcon(value)" />
+          {{ value }}
+        </template>
+      </b-table>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+import PageSection from '@/components/_sila/Global/PageSection';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+
+import StatusIcon from '@/components/_sila//Global/StatusIcon';
+
+export default {
+  components: { PageTitle, PageSection, StatusIcon },
+  mixins: [DataFormatterMixin, LoadingBarMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('pageFans.table.name'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'health',
+          label: this.$t('pageFans.table.health'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '25%' },
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'type',
+          label: this.$t('pageFans.table.type'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'speedRPM',
+          label: this.$t('pageFans.table.currentValue'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '25%' },
+        },
+      ],
+    };
+  },
+
+  computed: {
+    fans() {
+      return this.$store.getters['fan/fans'];
+    },
+  },
+
+  created() {
+    this.startLoader();
+    this.$store.dispatch('fan/getFanInfo').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+};
+</script>