webapp: Added live view

webapp/src/components/HomeView.vue

@@ -1,17 +1,101 @@
 <template>
   <div class="container" role="main">
     <div class="page-header">
-      <h1>Home</h1>
+      <h1>Live Data</h1>
+      <template v-if="waitForData == true">Waiting for data... </template>
+      <template v-else>
+        <div class="d-flex align-items-start">
+          <div
+            class="nav flex-column nav-pills me-3"
+            id="v-pills-tab"
+            role="tablist"
+            aria-orientation="vertical"
+          >
+            <button
+              v-for="inverter in inverterData"
+              :key="inverter.serial"
+              class="nav-link"
+              :id="'v-pills-' + inverter.serial + '-tab'"
+              data-bs-toggle="pill"
+              :data-bs-target="'#v-pills-' + inverter.serial"
+              type="button"
+              role="tab"
+              aria-controls="'v-pills-' + inverter.serial"
+              aria-selected="true"
+            >
+              {{ inverter.name }}
+            </button>
           </div>
-    <div class="bg-light p-5 rounded">
+
+          <div class="tab-content" id="v-pills-tabContent">
+            <div
+              v-for="inverter in inverterData"
+              :key="inverter.serial"
+              class="tab-pane fade show"
+              :id="'v-pills-' + inverter.serial"
+              role="tabpanel"
+              :aria-labelledby="'v-pills-' + inverter.serial + '-tab'"
+              tabindex="0"
+            >
+              <div class="card">
+                <div class="card-header text-white bg-primary">
+                  {{ inverter.name }} ({{ inverter.serial }})
+                </div>
+                <div class="card-body">
+                  <div class="row row-cols-1 row-cols-md-3 g-4">
+                    <div v-for="channel in 5" :key="channel">
+                      <InverterChannelInfo
+                        v-if="inverter[channel - 1]"
+                        :channelData="inverter[channel - 1]"
+                        :channelNumber="channel - 1"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
+import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
 
 export default {
   components: {
+    InverterChannelInfo,
+  },
+  data() {
+    return {
+      connection: null,
+      waitForData: true,
+      inverterData: [],
+    };
+  },
+  created() {
+    console.log("Starting connection to WebSocket Server");
+
+    const socketProtocol =
+      window.location.protocol === "https:" ? "wss:" : "ws:";
+    const port = window.location.port;
+    const host = window.location.hostname;
+    const webSocketUrl = socketProtocol + "//" + host + ":" + port + "/ws";
+
+    this.connection = new WebSocket(webSocketUrl);
+
+    this.connection.onmessage = function (event) {
+      console.log(event);
+      this.inverterData = JSON.parse(event.data);
+      this.waitForData = false;
+    }.bind(this);
+
+    this.connection.onopen = function (event) {
+      console.log(event);
+      console.log("Successfully connected to the echo websocket server...");
+    };
   },
 };
 </script>

webapp/src/components/NavBar.vue

@@ -16,7 +16,7 @@
       <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
         <div class="navbar-nav">
           <li class="nav-item">
-            <router-link class="nav-link" to="/">Home</router-link>
+            <router-link class="nav-link" to="/">Live Data</router-link>
           </li>
           <li class="nav-item dropdown">
             <a

webapp/src/components/partials/InverterChannelInfo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="col">
+    <div class="card">
+      <div class="card-header">Channel {{ channelNumber }}</div>
+      <div class="card-body">
+        <table class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th scope="col">Property</th>
+              <th scope="col">Value</th>
+              <th scope="col">Unit</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
+              <th scope="row">{{ key }}</th>
+              <td style="text-align: right">{{ formatNumber(property.v) }}</td>
+              <td>{{ property.u }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    channelData: Object,
+    channelNumber: Number,
+  },
+  methods: {
+    formatNumber(num) {
+      return parseFloat(num).toFixed(2);
+    },
+  },
+};
+</script>