webapp: added first version of mqtt info page

webapp/src/components/MqttInfoView.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>MqTT Info</h1>
+    </div>
+    <div class="bg-light p-5 rounded">
+      <div class="card">
+        <div class="card-header text-white bg-primary">
+          Configuration Summary
+        </div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <table class="table table-hover table-condensed">
+              <tbody>
+                <tr>
+                  <th>Status</th>
+                  <td
+                    class="badge"
+                    :class="{
+                      'bg-danger': !mqttDataList.mqtt_enabled,
+                      'bg-success': mqttDataList.mqtt_enabled,
+                    }"
+                  >
+                    <span v-if="mqttDataList.mqtt_enabled">enabled</span>
+                    <span v-else>disabled</span>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Server</th>
+                  <td>{{ mqttDataList.mqtt_hostname }}</td>
+                </tr>
+                <tr>
+                  <th>Port</th>
+                  <td>{{ mqttDataList.mqtt_port }}</td>
+                </tr>
+                <tr>
+                  <th>Username</th>
+                  <td>{{ mqttDataList.mqtt_username }}</td>
+                </tr>
+                <tr>
+                  <th>Base Topic</th>
+                  <td>{{ mqttDataList.mqtt_topic }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      mqttDataList: [],
+    };
+  },
+  created() {
+    this.getNtpInfo();
+  },
+  methods: {
+    getNtpInfo() {
+      fetch("/api/mqtt/status")
+        .then((response) => response.json())
+        .then((data) => (this.mqttDataList = data));
+    },
+  },
+};
+</script>

webapp/src/components/NavBar.vue

@@ -74,6 +74,11 @@
                   >NTP</router-link
                 >
               </li>
+              <li>
+                <router-link class="dropdown-item" to="/info/mqtt"
+                  >MqTT</router-link
+                >
+              </li>
             </ul>
           </li>
           <li class="nav-item">

webapp/src/router/index.js

@@ -7,6 +7,7 @@ import NtpInfoView from '@/components/NtpInfoView'
 import NetworkAdminView from '@/components/NetworkAdminView'
 import NtpAdminView from '@/components/NtpAdminView'
 import MqttAdminView from '@/components/MqttAdminView'
+import MqttInfoView from '@/components/MqttInfoView'
 
 const routes = [{
         path: '/',
@@ -33,6 +34,11 @@ const routes = [{
         name: 'NTP',
         component: NtpInfoView
     },
+    {
+        path: '/info/mqtt',
+        name: 'MqTT',
+        component: MqttInfoView
+    },
     {
         path: '/settings/network',
         name: 'Network Settings',