1 files changed, 209 insertions, 0 deletions
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
new file mode 100644
index 00000000..cd148f7d
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
@@ -0,0 +1,209 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="notification__container">
+      <span class="semi-bold-12px">{{
+        $t('global.ariaLabel.notificationTime')
+      }}</span>
+      <div class="form-control notification">
+        <b-form-input
+          v-model="notificationInput"
+          type="number"
+          class="notification__input"
+        >
+        </b-form-input>
+        <button class="notification_button">
+          <img class="notification__icon" src="@/assets/images/refresh.svg" />
+        </button>
+      </div>
+    </div>
+    <div class="main-container">
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <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="updateTemperatureLimits"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+      <!-- Temperature Table -->
+      <temperature-table
+        :time-scale="timeScale"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      />
+      <accessory-table-drivers :records="accessoryData.table" />
+      <accessory-table :records="accessoryData.temperatureTable" />
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTable';
+import AccessoryTableDrivers from '@/components/Global/SilaComponents/Tables/AccessoryTableDrivers';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    DateSwitch,
+    TemperatureTable,
+    AccessoryTable,
+    AccessoryTableDrivers,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      temperatureNonNormal: 44,
+      temperatureNonNormalInput: 44,
+      temperatureCriticalStart: 55,
+      temperatureCritical: 55,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperatureLimits() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCriticalStart = +this.temperatureCritical;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.notification__container {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notification {
+  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__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.notification__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;
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+</style>