1 files changed, 87 insertions, 0 deletions
diff --git a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
new file mode 100644
index 00000000..45e7eaf9
--- /dev/null
+++ b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
@@ -0,0 +1,87 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('appPageTitle.dynamicInformation')" />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <power-temp :time-scale="timeScale"></power-temp>
+    <volt-input :time-scale="timeScale"></volt-input>
+    <volt-output :time-scale="timeScale"></volt-output>
+    <power-input :time-scale="timeScale"></power-input>
+    <power-output :time-scale="timeScale"></power-output>
+    <current-input :time-scale="timeScale"></current-input>
+    <current-output :time-scale="timeScale"></current-output>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+
+import PowerTemp from './PowerTemp';
+import VoltInput from './VoltInput';
+import VoltOutput from './VoltOutput';
+import PowerInput from './PowerInput';
+import PowerOutput from './PowerOutput';
+import CurrentInput from './CurrentInput';
+import CurrentOutput from './CurrentOutput';
+
+export default {
+  components: {
+    PowerTemp,
+    VoltInput,
+    VoltOutput,
+    PowerInput,
+    PowerOutput,
+    CurrentInput,
+    CurrentOutput,
+    PageTitle,
+    TableDatePicker,
+  },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  data() {
+    return {
+      timeScale: 'hour',
+    };
+  },
+
+  created() {
+    this.startProgress();
+  },
+  methods: {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+      resetButton.dispatchEvent(new Event('click'));
+    },
+
+    onChangePeriod(period) {
+      this.timeScale = period;
+      this.startProgress();
+      this.resetZoom();
+    },
+    startProgress() {
+      this.startLoader();
+      const psuTemp = new Promise((resolve) => {
+        this.$root.$on('psu-temp', () => resolve());
+      });
+      const psuVolt = new Promise((resolve) => {
+        this.$root.$on('psu-volt', () => resolve());
+      });
+      const psuPower = new Promise((resolve) => {
+        this.$root.$on('psu-power', () => resolve());
+      });
+      const psuCurrent = new Promise((resolve) => {
+        this.$root.$on('psu-current', () => resolve());
+      });
+
+      Promise.all([psuTemp, psuVolt, psuPower, psuCurrent]).finally(() =>
+        this.endLoader()
+      );
+    },
+  },
+};
+</script>