1 files changed, 592 insertions, 0 deletions
diff --git a/src/views/_sila/PowerSupplies/DynamicInfo/PowerDynamicPage.vue b/src/views/_sila/PowerSupplies/DynamicInfo/PowerDynamicPage.vue
new file mode 100644
index 00000000..223570bf
--- /dev/null
+++ b/src/views/_sila/PowerSupplies/DynamicInfo/PowerDynamicPage.vue
@@ -0,0 +1,592 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title :description="$t('appNavigation.analyticalPanel')" />
+    <div class="notification-time__container">
+      <span class="semi-bold-12px">{{
+        $t('global.ariaLabel.notificationTime')
+      }}</span>
+      <div class="form-control notification-time">
+        <b-form-input
+          v-model="notificationInput"
+          type="number"
+          class="notification-time__input"
+        >
+        </b-form-input>
+        <button class="notification-button">
+          <img
+            class="notification-time__icon"
+            src="@/assets/images/refresh.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <date-switch :switch-time-scale="switchTimeScale" :time-scale="timeScale" />
+    <!-- Temperature Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_1
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/temperature-icon.svg" />
+        <span class="bold-16px">{{ $t('subHeader.temperature') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+        <!-- Temperature Limit Inputs -->
+        <div class="limit-container">
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/non-normal.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.nonNormalMode')
+            }}</span>
+            <b-form-input
+              v-model="temperatureNonNormalInput"
+              type="number"
+              :min="0"
+              :max="temperatureCritical"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/critical.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.criticalMode')
+            }}</span>
+            <b-form-input
+              v-model="temperatureCritical"
+              type="number"
+              :min="temperatureNonNormalInput"
+              :max="temperatureWarningInput"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.temperatureWarning')
+            }}</span>
+            <b-form-input
+              v-model="temperatureWarningInput"
+              type="number"
+              :min="temperatureCritical"
+              :max="100"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button
+            class="save-button"
+            variant="primary"
+            @click="updateTemperature"
+          >
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Temperature Tables -->
+        <temperature-table
+          :time-scale="timeScale"
+          :warning="temperatureWarning"
+          :non-normal="temperatureNonNormal"
+          :critical="temperatureCritical"
+        />
+        <accessory-table :records="accessoryData.temperatureTable" />
+      </b-collapse>
+    </div>
+    <!-- using Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_2
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/usage-icon.svg" />
+        <span class="bold-16px">{{ $t('pagePower.usingPercent') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+        <!-- using Limit Inputs -->
+        <div class="limit-container">
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.warningPercent')
+            }}</span>
+            <b-form-input
+              v-model="usingNonNormalInput"
+              type="number"
+              :min="0"
+              :max="usingCritical"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/non-normal.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.nonNormalModePercent')
+            }}</span>
+            <b-form-input
+              v-model="usingCritical"
+              type="number"
+              :min="usingNonNormalInput"
+              :max="usingWarningInput"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="trmperature-limt">
+            <img src="@/assets/images/labels/critical.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.criticalModePercent')
+            }}</span>
+            <b-form-input
+              v-model="usingWarningInput"
+              type="number"
+              :min="usingCritical"
+              :max="100"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updateUsage">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- using Tables -->
+        <using-table
+          :time-scale="timeScale"
+          :warning="usingWarning"
+          :non-normal="usingNonNormal"
+          :critical-start="usingCritical"
+        />
+        <accessory-table :records="accessoryData.usingTable" />
+      </b-collapse>
+    </div>
+    <!-- Input Voltage Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_3
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/voltage-icon.svg" />
+        <span class="bold-16px">{{
+          $t('tablesDescription.inputVoltage')
+        }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_3" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.voltageWarning')
+            }}</span>
+            <b-form-input
+              v-model="powerWarningInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/shutdown.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.voltageShutdown')
+            }}</span>
+            <b-form-input
+              v-model="powerShutdownInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updatePower">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Input Voltage Tables -->
+        <voltage-table :time-scale="timeScale" :warning="frequencyWarning" />
+        <accessory-table :records="accessoryData.voltageTable" />
+      </b-collapse>
+    </div>
+    <!-- Input Power Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_4
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/power-icon.svg" />
+        <span class="bold-16px">{{ $t('tablesDescription.inputPower') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_4" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.powerWarning')
+            }}</span>
+            <b-form-input
+              v-model="powerWarningInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/shutdown.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.powerShutdown')
+            }}</span>
+            <b-form-input
+              v-model="powerShutdownInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updatePower">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Input Power Table -->
+        <power-table
+          :time-scale="timeScale"
+          :warning="powerWarning"
+          :shutdown="powerShutdown"
+        />
+        <accessory-table :records="accessoryData.powerTable" />
+      </b-collapse>
+    </div>
+    <!-- Output Voltage Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_5
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/voltage-icon.svg" />
+        <span class="bold-16px">{{
+          $t('tablesDescription.outputVoltage')
+        }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_5" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.voltageWarning')
+            }}</span>
+            <b-form-input
+              v-model="powerWarningInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/shutdown.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.voltageShutdown')
+            }}</span>
+            <b-form-input
+              v-model="powerShutdownInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updatePower">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Output Voltage Tables -->
+        <voltage-table :time-scale="timeScale" :warning="frequencyWarning" />
+        <accessory-table :records="accessoryData.voltageTable" />
+      </b-collapse>
+    </div>
+    <!-- Output Power Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_6
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/power-icon.svg" />
+        <span class="bold-16px">{{ $t('tablesDescription.outputPower') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_6" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.powerWarning')
+            }}</span>
+            <b-form-input
+              v-model="powerWarningInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/shutdown.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.powerShutdown')
+            }}</span>
+            <b-form-input
+              v-model="powerShutdownInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updatePower">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Output Power Table -->
+        <power-table
+          :time-scale="timeScale"
+          :warning="powerWarning"
+          :shutdown="powerShutdown"
+        />
+        <accessory-table :records="accessoryData.powerTable" />
+      </b-collapse>
+    </div>
+    <!-- Amperage Section -->
+    <div class="page-collapse-decorator">
+      <b-button
+        v-b-toggle.toggle-collapse_7
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <img src="@/assets/images/amperage-icon.svg" />
+        <span class="bold-16px">{{ $t('tablesDescription.amperage') }}</span>
+        <component :is="iconChevronUp" class="icon-expand" />
+      </b-button>
+      <b-collapse id="toggle-collapse_7" class="nav-item__nav">
+        <div class="limit-container">
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/warning.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.voltageWarning')
+            }}</span>
+            <b-form-input
+              v-model="powerWarningInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <div class="frequency-limt">
+            <img src="@/assets/images/labels/shutdown.svg" />
+            <span class="semi-bold-12px">{{
+              $t('tablesDescription.voltageShutdown')
+            }}</span>
+            <b-form-input
+              v-model="powerShutdownInput"
+              type="number"
+              class="form-control medium-12px"
+            >
+            </b-form-input>
+          </div>
+          <b-button class="save-button" variant="primary" @click="updatePower">
+            {{ $t('global.action.save') }}
+          </b-button>
+        </div>
+        <!-- Amperage Table -->
+        <voltage-table :time-scale="timeScale" :warning="frequencyWarning" />
+        <accessory-table :records="accessoryData.voltageTable" />
+      </b-collapse>
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+
+import TemperatureTable from './TemperatureTable';
+import UsingTable from './UsingTable';
+import PowerTable from './PowerTable';
+import VoltageTable from './VoltageTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTablePower';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DateSwitch,
+    TemperatureTable,
+    UsingTable,
+    PowerTable,
+    VoltageTable,
+    AccessoryTable,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureNonNormalInput: 44,
+      temperatureNonNormal: 44,
+      temperatureCriticalInput: 55,
+      temperatureCritical: 55,
+      temperatureWarningInput: 72,
+      temperatureWarning: 72,
+      usingNonNormalInput: 50,
+      usingNonNormal: 50,
+      usingCriticalInput: 55,
+      usingCritical: 55,
+      usingWarningInput: 72,
+      usingWarning: 72,
+      // frequencyWarning: 660,
+      // frequencyWarningInput: 660,
+      powerWarning: 66,
+      powerWarningInput: 66,
+      powerShutdown: 88,
+      powerShutdownInput: 88,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperature() {
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCritical = +this.temperatureCriticalInput;
+      this.temperatureWarning = +this.temperatureWarningInput;
+    },
+    updateUsage() {
+      this.usingNonNormal = +this.usingNonNormalInput;
+      this.usingCritical = +this.usingCriticalInput;
+      this.usingWarning = +this.usingWarningInput;
+    },
+    updateFrequency() {
+      this.frequencyWarning = +this.frequencyWarningInput;
+    },
+    updatePower() {
+      this.powerWarning = +this.powerWarningInput;
+      this.powerShutdown = +this.powerShutdownInput;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+
+.notification-time__container {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notification-time {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  box-shadow: none;
+  border-radius: 8px;
+  margin: 12px 32px 12px 8px;
+  width: 236px;
+  height: 40px;
+  z-index: 1001;
+}
+
+.notification-time__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.notification-time__input {
+  border: none;
+  background: none;
+  box-shadow: none;
+}
+
+.notification-button {
+  border: none;
+  background: none;
+}
+
+.semi-bold-12px {
+  z-index: 1001;
+}
+// temperature limit comtainer
+.limit-container {
+  height: 85px;
+  width: 100%;
+  padding: 0 32px 10px 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 24px;
+}
+
+.trmperature-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+
+.form-control {
+  height: 36px;
+  &.non-normal {
+    width: 125px;
+  }
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+
+.frequency-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 288px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+</style>