From d247d0160361eea27223a080a572c15029d6fc10 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Thu, 21 Apr 2022 23:24:03 +0200
Subject: [PATCH] webapp: Show additional mqtt parameters

---
 webapp/src/components/MqttAdminView.vue | 24 +++++++++++----
 webapp/src/components/MqttInfoView.vue  | 40 +++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue
index 7b7e0be..918de6c 100644
--- a/webapp/src/components/MqttAdminView.vue
+++ b/webapp/src/components/MqttAdminView.vue
@@ -22,9 +22,10 @@
         </div>
       </div>
       <div class="card" v-show="mqttConfigList.mqtt_enabled">
-        <div class="card-header text-white bg-primary">MqTT Broker Parameter</div>
+        <div class="card-header text-white bg-primary">
+          MqTT Broker Parameter
+        </div>
         <div class="card-body">
-
           <div class="row mb-3">
             <label for="inputHostname" class="col-sm-2 col-form-label"
               >Hostname:</label
@@ -42,9 +43,7 @@
           </div>
 
           <div class="row mb-3">
-            <label for="inputPort" class="col-sm-2 col-form-label"
-              >Port:</label
-            >
+            <label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
             <div class="col-sm-10">
               <input
                 type="number"
@@ -106,6 +105,21 @@
             </div>
           </div>
 
+          <div class="row mb-3">
+            <label class="col-sm-2 form-check-label" for="inputRetain"
+              >Enable Retain Flag</label
+            >
+            <div class="col-sm-10">
+              <div class="form-check form-switch">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  id="inputRetain"
+                  v-model="mqttConfigList.mqtt_retain"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <button type="submit" class="btn btn-primary mb-3">Save</button>
diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue
index 5782866..e0d0c6e 100644
--- a/webapp/src/components/MqttInfoView.vue
+++ b/webapp/src/components/MqttInfoView.vue
@@ -41,10 +41,50 @@
                   <th>Base Topic</th>
                   <td>{{ mqttDataList.mqtt_topic }}</td>
                 </tr>
+                <tr>
+                  <th>Retain</th>
+                  <td
+                    class="badge"
+                    :class="{
+                      'bg-danger': !mqttDataList.mqtt_retain,
+                      'bg-success': mqttDataList.mqtt_retain,
+                    }"
+                  >
+                    <span v-if="mqttDataList.mqtt_retain">enabled</span>
+                    <span v-else>disabled</span>
+                  </td>
+                </tr>
               </tbody>
             </table>
           </div>
         </div>
+
+        <div class="card">
+          <div class="card-header text-white bg-primary">
+            Runtime Summary
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table table-hover table-condensed">
+                <tbody>
+                  <tr>
+                    <th>Connection Status</th>
+                    <td
+                      class="badge"
+                      :class="{
+                        'bg-danger': !mqttDataList.mqtt_connected,
+                        'bg-success': mqttDataList.mqtt_connected,
+                      }"
+                    >
+                      <span v-if="mqttDataList.mqtt_connected">connected</span>
+                      <span v-else>disconnected</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>