From 6849bd8f6d1be499ea4967b8d488878f24bffd77 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Thu, 16 Jun 2022 00:01:17 +0200
Subject: [PATCH] Webapp: Beautify different views

---
 webapp/src/components/MqttAdminView.vue   |   5 +-
 webapp/src/components/MqttInfoView.vue    | 155 +++++++++++-----------
 webapp/src/components/NetworkInfoView.vue |  14 +-
 webapp/src/components/NtpInfoView.vue     |  97 +++++++-------
 webapp/src/components/SystemInfoView.vue  |  11 +-
 5 files changed, 139 insertions(+), 143 deletions(-)

diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue
index 3480c4ad..455c3242 100644
--- a/webapp/src/components/MqttAdminView.vue
+++ b/webapp/src/components/MqttAdminView.vue
@@ -21,7 +21,8 @@
           </div>
         </div>
       </div>
-      <div class="card" v-show="mqttConfigList.mqtt_enabled">
+
+      <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
         <div class="card-header text-white bg-primary">
           MqTT Broker Parameter
         </div>
@@ -123,7 +124,7 @@
         </div>
       </div>
 
-      <div class="card" v-show="mqttConfigList.mqtt_enabled">
+      <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
         <div class="card-header text-white bg-primary">LWT Parameters</div>
         <div class="card-body">
           <div class="row mb-3">
diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue
index e0d0c6ed..36be1a3e 100644
--- a/webapp/src/components/MqttInfoView.vue
+++ b/webapp/src/components/MqttInfoView.vue
@@ -3,87 +3,82 @@
     <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>
-                <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 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>
+              <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>
+
+    <div class="card mt-5">
+      <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>
diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue
index 863c2a77..e3bf2a0a 100644
--- a/webapp/src/components/NetworkInfoView.vue
+++ b/webapp/src/components/NetworkInfoView.vue
@@ -3,12 +3,14 @@
     <div class="page-header">
       <h1>Network Info</h1>
     </div>
-    <div class="bg-light p-5 rounded">
-      <WifiStationInfo />
-      <WifiApInfo />
-      <InterfaceStationInfo />
-      <InterfaceApInfo />
-    </div>
+    <WifiStationInfo />
+    <div class="mt-5"></div>
+    <WifiApInfo />
+    <div class="mt-5"></div>
+    <InterfaceStationInfo />
+    <div class="mt-5"></div>
+    <InterfaceApInfo />
+    <div class="mt-5"></div>
   </div>
 </template>
 
diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue
index 4ff870de..49e714e7 100644
--- a/webapp/src/components/NtpInfoView.vue
+++ b/webapp/src/components/NtpInfoView.vue
@@ -3,59 +3,56 @@
     <div class="page-header">
       <h1>NTP 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>Server</th>
-                  <td>{{ ntpDataList.ntp_server }}</td>
-                </tr>
-                <tr>
-                  <th>Timezone</th>
-                  <td>{{ ntpDataList.ntp_timezone }}</td>
-                </tr>
-                <tr>
-                  <th>Timezone Description</th>
-                  <td>{{ ntpDataList.ntp_timezone_descr }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+
+    <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>Server</th>
+                <td>{{ ntpDataList.ntp_server }}</td>
+              </tr>
+              <tr>
+                <th>Timezone</th>
+                <td>{{ ntpDataList.ntp_timezone }}</td>
+              </tr>
+              <tr>
+                <th>Timezone Description</th>
+                <td>{{ ntpDataList.ntp_timezone_descr }}</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
+    </div>
 
-      <div class="card">
-        <div class="card-header text-white bg-primary">Current Time</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': !ntpDataList.ntp_status,
-                      'bg-success': ntpDataList.ntp_status,
-                    }"
-                  >
-                    <span v-if="ntpDataList.ntp_status">synced</span>
-                    <span v-else>not synced</span>
-                  </td>
-                </tr>
-                <tr>
-                  <th>Local Time</th>
-                  <td>{{ ntpDataList.ntp_localtime }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+    <div class="card mt-5">
+      <div class="card-header text-white bg-primary">Current Time</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': !ntpDataList.ntp_status,
+                    'bg-success': ntpDataList.ntp_status,
+                  }"
+                >
+                  <span v-if="ntpDataList.ntp_status">synced</span>
+                  <span v-else>not synced</span>
+                </td>
+              </tr>
+              <tr>
+                <th>Local Time</th>
+                <td>{{ ntpDataList.ntp_localtime }}</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue
index b7ab4dfe..ea7ef64a 100644
--- a/webapp/src/components/SystemInfoView.vue
+++ b/webapp/src/components/SystemInfoView.vue
@@ -3,11 +3,12 @@
     <div class="page-header">
       <h1>System Info</h1>
     </div>
-    <div class="bg-light p-5 rounded">
-      <FirmwareInfo />
-      <HardwareInfo />
-      <MemoryInfo />
-    </div>
+    <FirmwareInfo />
+    <div class="mt-5"></div>
+    <HardwareInfo />
+    <div class="mt-5"></div>
+    <MemoryInfo />
+    <div class="mt-5"></div>
   </div>
 </template>