Adds battery monitoring to frontend

1 files changed, 48 insertions, 0 deletions

diff --git a/hsm-web/Client/src/INA226.vue b/hsm-web/Client/src/INA226.vue
new file mode 100644
index 0000000..bf0141f
--- /dev/null
+++ b/hsm-web/Client/src/INA226.vue
@@ -0,0 +1,48 @@
+<template>
+  <h3>Battery Status</h3>
+  <table>
+    <tbody>
+      <tr>
+        <td>{{ ina226Reading.voltage.toFixed(2) }}V</td>
+        <td>{{ ina226Reading.current.toFixed(2) }}A</td>
+        <td>{{ ina226Reading.power.toFixed(2) }}W</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import axios from 'axios'
+import config from './config'
+
+export default {
+  data() {
+    return {
+      ina226Reading: {
+        voltage: 0,
+        current: 0,
+        power: 0
+      }
+    }
+  },
+  mounted() {
+    this.getINA226Reading()
+  },
+  methods: {
+    getINA226Reading() {
+      axios
+        .get(`${config.api}/ina226`)
+        .then(res => {
+          this.ina226Reading = res.data
+          setTimeout(this.getINA226Reading, 1000)
+        })
+    }
+  }
+}
+</script>
+
+<style>
+table {
+  width: 100%;
+}
+</style>