SILABMC-N206 add power supply page

3 files changed, 203 insertions, 0 deletions

diff --git a/src/views/_sila/Power/Static/PowerStaticPage.vue b/src/views/_sila/Power/Static/PowerStaticPage.vue
new file mode 100644
index 00000000..8021b1d8
--- /dev/null
+++ b/src/views/_sila/Power/Static/PowerStaticPage.vue
@@ -0,0 +1,131 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('appPageTitle.specification')" />
+    <supply-tabs
+      :slots="supplies"
+      :current-slot="currentSlot"
+      :switch-tab="switchTab"
+    ></supply-tabs>
+    <page-section :section-title="$t('pagePowerSup.supplies')" class="pt-3">
+      <b-table
+        responsive="md"
+        show-empty
+        hover
+        :items="items"
+        :busy="isBusy"
+        :fields="fields"
+        :empty-text="$t('global.table.emptyMessage')"
+      >
+        <template #cell(value)="{ index, value }">
+          <status-icon v-if="index === 1" :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 SupplyTabs from './SupplyTabs';
+
+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, SupplyTabs, StatusIcon },
+  mixins: [DataFormatterMixin, LoadingBarMixin],
+  data() {
+    return {
+      currentSlot: null,
+      isBusy: true,
+      fields: [
+        {
+          key: 'param',
+          label: this.$t('pagePowerSup.table.param'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '50%' },
+        },
+        {
+          key: 'value',
+          label: this.$t('pagePowerSup.table.value'),
+          formatter: this.dataFormatter,
+          thStyle: { width: '50%' },
+          tdClass: 'text-nowrap',
+        },
+      ],
+    };
+  },
+  computed: {
+    supplies() {
+      return this.$store.getters['powerSupply/powerSupplies'];
+    },
+    currentItem() {
+      return this.supplies?.find((el) => {
+        if (el.id === this.currentSlot) return el;
+      });
+    },
+    items() {
+      return [
+        {
+          param: this.$t('pagePowerSup.table.name'),
+          value: this.currentItem?.name,
+        },
+        {
+          param: this.$t('pagePowerSup.table.health'),
+          value: this.currentItem?.health,
+        },
+        {
+          param: this.$t('pagePowerSup.table.statusState'),
+          value: this.currentItem?.statusState,
+        },
+        {
+          param: this.$t('pagePowerSup.table.serialNumber'),
+          value: this.currentItem?.serialNumber,
+        },
+        {
+          param: this.$t('pagePowerSup.table.manufacturer'),
+          value: this.currentItem?.manufacturer,
+        },
+        {
+          param: this.$t('pagePowerSup.table.model'),
+          value: this.currentItem?.model,
+        },
+        {
+          param: this.$t('pagePowerSup.table.efficiencyPercent'),
+          value: this.currentItem?.efficiencyPercent,
+        },
+        {
+          param: this.$t('pagePowerSup.table.powerInputWatts'),
+          value: this.currentItem?.powerInputWatts,
+        },
+      ];
+    },
+  },
+
+  watch: {
+    supplies() {
+      if (this.currentSlot === null) {
+        this.currentSlot = this.supplies[0]?.id;
+      }
+    },
+  },
+
+  created() {
+    this.startLoader();
+    this.$store.dispatch('powerSupply/getAllPowerSupplies').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+
+  methods: {
+    switchTab(id) {
+      this.currentSlot = id;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Power/Static/SupplyTabs.vue b/src/views/_sila/Power/Static/SupplyTabs.vue
new file mode 100644
index 00000000..7a1ea20d
--- /dev/null
+++ b/src/views/_sila/Power/Static/SupplyTabs.vue
@@ -0,0 +1,70 @@
+<template>
+  <b-col
+    ref="content"
+    class="d-flex align-items-center data-tab"
+    @wheel.prevent="wheelItBetter($event)"
+  >
+    <span
+      v-for="item in slots"
+      :key="item.id"
+      :class="{ 'tab-active': currentSlot === item.id }"
+      @click="switchTab(item.id)"
+      >{{ item.id }}</span
+    >
+  </b-col>
+</template>
+
+<script>
+export default {
+  props: {
+    slots: {
+      type: Array,
+      default: null,
+    },
+    currentSlot: {
+      type: String,
+      default: null,
+    },
+    switchTab: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      container: this.$refs.content,
+    };
+  },
+  methods: {
+    wheelItBetter(event) {
+      if (event.deltaY < 0) {
+        this.$refs.content.scrollLeft -= 25;
+      } else {
+        this.$refs.content.scrollLeft += 25;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.data-tab {
+  height: 48px;
+  max-width: 150%;
+  width: auto;
+  margin: -2rem -1.95rem 0px -2rem;
+  padding-left: 2rem;
+  overflow-x: auto;
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
+  border-bottom: 1px solid $gray-10;
+  gap: 24px;
+}
+
+.tab-active {
+  color: $primary;
+  transition: ease-in 0.15s;
+}
+</style>
diff --git a/src/views/_sila/Power/Static/index.js b/src/views/_sila/Power/Static/index.js
new file mode 100644
index 00000000..14c4ef64
--- /dev/null
+++ b/src/views/_sila/Power/Static/index.js
@@ -0,0 +1,2 @@
+import PowerStaticPage from './PowerStaticPage.vue';
+export default PowerStaticPage;