From 42b60060a1c2c12d6297cdd68b6d7771cb013817 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sat, 18 Feb 2023 23:20:08 +0100
Subject: [PATCH] webapp: Change badge style and encapsulate it into component

---
 webapp/src/components/RadioInfo.vue       | 32 +++++------
 webapp/src/components/StatusBadge.vue     | 32 +++++++++++
 webapp/src/components/WifiApInfo.vue      | 10 ++--
 webapp/src/components/WifiStationInfo.vue | 10 ++--
 webapp/src/views/MqttInfoView.vue         | 67 ++++++-----------------
 webapp/src/views/NtpInfoView.vue          | 20 +++----
 6 files changed, 82 insertions(+), 89 deletions(-)
 create mode 100644 webapp/src/components/StatusBadge.vue

diff --git a/webapp/src/components/RadioInfo.vue b/webapp/src/components/RadioInfo.vue
index 2aae902b..8f16a212 100644
--- a/webapp/src/components/RadioInfo.vue
+++ b/webapp/src/components/RadioInfo.vue
@@ -5,26 +5,24 @@
                 <tbody>
                     <tr>
                         <th>{{ $t('radioinfo.ChipStatus') }}</th>
-                        <td class="badge" :class="{
-                            'text-bg-danger': !systemStatus.radio_connected,
-                            'text-bg-success': systemStatus.radio_connected,
-                        }">
-                            <span v-if="systemStatus.radio_connected">{{ $t('radioinfo.Connected') }}</span>
-                            <span v-else>{{ $t('radioinfo.NotConnected') }}</span>
+                        <td>
+                            <StatusBadge :status="systemStatus.radio_connected" true_text="radioinfo.Connected" false_text="radioinfo.NotConnected" />
                         </td>
                     </tr>
                     <tr>
                         <th>{{ $t('radioinfo.ChipType') }}</th>
-                        <td class="badge" :class="{
-                            'text-bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
-                            'text-bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
-                            'text-bg-secondary': !systemStatus.radio_connected,
-                        }">
-                            <span
-                                v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</span>
-                            <span
-                                v-else-if="systemStatus.radio_connected && !systemStatus.radio_pvariant">nRF24L01</span>
-                            <span v-else>{{ $t('radioinfo.Unknown') }}</span>
+                        <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
+                                'text-bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
+                                'text-bg-secondary': !systemStatus.radio_connected,
+                            }">
+                                <template
+                                    v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</template>
+                                <template
+                                    v-else-if="systemStatus.radio_connected && !systemStatus.radio_pvariant">nRF24L01</template>
+                                <template v-else>{{ $t('radioinfo.Unknown') }}</template>
+                            </span>
                         </td>
                     </tr>
                 </tbody>
@@ -35,12 +33,14 @@
 
 <script lang="ts">
 import CardElement from '@/components/CardElement.vue';
+import StatusBadge from './StatusBadge.vue';
 import type { SystemStatus } from '@/types/SystemStatus';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
     components: {
         CardElement,
+        StatusBadge,
     },
     props: {
         systemStatus: { type: Object as PropType<SystemStatus>, required: true },
diff --git a/webapp/src/components/StatusBadge.vue b/webapp/src/components/StatusBadge.vue
new file mode 100644
index 00000000..cce4a596
--- /dev/null
+++ b/webapp/src/components/StatusBadge.vue
@@ -0,0 +1,32 @@
+<template>
+    <span class="badge" :class="[status ? true_class : false_class]">
+        <template v-if="status">{{ $t(true_text) }}</template>
+        <template v-else>{{ $t(false_text) }}</template>
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    props: {
+        'status': Boolean,
+        'true_text': {
+            type: String,
+            required: true
+        },
+        'false_text': {
+            type: String,
+            required: true
+        },
+        'true_class': {
+            type: String,
+            default: 'text-bg-success'
+        },
+        'false_class': {
+            type: String,
+            default: 'text-bg-danger'
+        }
+    },
+});
+</script>
\ No newline at end of file
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index f00858ca..e2647dda 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -5,12 +5,8 @@
                 <tbody>
                     <tr>
                         <th>{{ $t('wifiapinfo.Status') }}</th>
-                        <td class="badge" :class="{
-                            'text-bg-danger': !networkStatus.ap_status,
-                            'text-bg-success': networkStatus.ap_status,
-                        }">
-                            <span v-if="networkStatus.ap_status">{{ $t('wifiapinfo.Enabled') }}</span>
-                            <span v-else>{{ $t('wifiapinfo.Disabled') }}</span>
+                        <td>
+                            <StatusBadge :status="networkStatus.ap_status" true_text="wifiapinfo.Enabled" false_text="wifiapinfo.Disabled" />
                         </td>
                     </tr>
                     <tr>
@@ -29,12 +25,14 @@
 
 <script lang="ts">
 import CardElement from '@/components/CardElement.vue';
+import StatusBadge from './StatusBadge.vue';
 import type { NetworkStatus } from '@/types/NetworkStatus';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
     components: {
         CardElement,
+        StatusBadge,
     },
     props: {
         networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index d60b914a..e1bd0dcd 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -5,12 +5,8 @@
                 <tbody>
                     <tr>
                         <th>{{ $t('wifistationinfo.Status') }}</th>
-                        <td class="badge" :class="{
-                            'text-bg-danger': !networkStatus.sta_status,
-                            'text-bg-success': networkStatus.sta_status,
-                        }">
-                            <span v-if="networkStatus.sta_status">{{ $t('wifistationinfo.Enabled') }}</span>
-                            <span v-else>{{ $t('wifistationinfo.Disabled') }}</span>
+                        <td>
+                            <StatusBadge :status="networkStatus.sta_status" true_text="wifistationinfo.Enabled" false_text="wifistationinfo.Disabled" />
                         </td>
                     </tr>
                     <tr>
@@ -33,12 +29,14 @@
 
 <script lang="ts">
 import CardElement from '@/components/CardElement.vue';
+import StatusBadge from './StatusBadge.vue';
 import type { NetworkStatus } from '@/types/NetworkStatus';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
     components: {
         CardElement,
+        StatusBadge
     },
     props: {
         networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index b17c3b38..8f51f7a5 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -6,12 +6,8 @@
                     <tbody>
                         <tr>
                             <th>{{ $t('mqttinfo.Status') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_enabled,
-                                'text-bg-success': mqttDataList.mqtt_enabled,
-                            }">
-                                <span v-if="mqttDataList.mqtt_enabled">{{ $t('mqttinfo.Enabled') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                         <tr>
@@ -36,22 +32,14 @@
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Retain') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_retain,
-                                'text-bg-success': mqttDataList.mqtt_retain,
-                            }">
-                                <span v-if="mqttDataList.mqtt_retain">{{ $t('mqttinfo.Enabled') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Tls') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_tls,
-                                'text-bg-success': mqttDataList.mqtt_tls,
-                            }">
-                                <span v-if="mqttDataList.mqtt_tls">{{ $t('mqttinfo.Enabled') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_tls" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                         <tr v-show="mqttDataList.mqtt_tls">
@@ -69,12 +57,8 @@
                     <tbody>
                         <tr>
                             <th>{{ $t('mqttinfo.Status') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_hass_enabled,
-                                'text-bg-success': mqttDataList.mqtt_hass_enabled,
-                            }">
-                                <span v-if="mqttDataList.mqtt_hass_enabled">{{ $t('mqttinfo.Enabled') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_hass_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                         <tr>
@@ -83,33 +67,20 @@
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Retain') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_hass_retain,
-                                'text-bg-success': mqttDataList.mqtt_hass_retain,
-                            }">
-                                <span v-if="mqttDataList.mqtt_hass_retain">{{ $t('mqttinfo.Enabled') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_hass_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Expire') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_hass_expire,
-                                'text-bg-success': mqttDataList.mqtt_hass_expire,
-                            }">
-                                <span v-if="mqttDataList.mqtt_hass_expire">{{ $t('mqttinfo.Enabled') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_hass_expire" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.IndividualPanels') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_hass_individualpanels,
-                                'text-bg-success': mqttDataList.mqtt_hass_individualpanels,
-                            }">
-                                <span v-if="mqttDataList.mqtt_hass_individualpanels">{{ $t('mqttinfo.Enabled')
-                                }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_hass_individualpanels" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
                             </td>
                         </tr>
                     </tbody>
@@ -123,12 +94,8 @@
                     <tbody>
                         <tr>
                             <th>{{ $t('mqttinfo.ConnectionStatus') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !mqttDataList.mqtt_connected,
-                                'text-bg-success': mqttDataList.mqtt_connected,
-                            }">
-                                <span v-if="mqttDataList.mqtt_connected">{{ $t('mqttinfo.Connected') }}</span>
-                                <span v-else>{{ $t('mqttinfo.Disconnected') }}</span>
+                            <td>
+                                <StatusBadge :status="mqttDataList.mqtt_connected" true_text="mqttinfo.Connected" false_text="mqttinfo.Disconnected" />
                             </td>
                         </tr>
                     </tbody>
@@ -141,6 +108,7 @@
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
 import CardElement from '@/components/CardElement.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
 import type { MqttStatus } from '@/types/MqttStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -149,6 +117,7 @@ export default defineComponent({
     components: {
         BasePage,
         CardElement,
+        StatusBadge
     },
     data() {
         return {
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index 71cc8f20..006f43a3 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -27,12 +27,8 @@
                     <tbody>
                         <tr>
                             <th>{{ $t('ntpinfo.Status') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-danger': !ntpDataList.ntp_status,
-                                'text-bg-success': ntpDataList.ntp_status,
-                            }">
-                                <span v-if="ntpDataList.ntp_status">{{ $t('ntpinfo.Synced') }}</span>
-                                <span v-else>{{ $t('ntpinfo.NotSynced') }}</span>
+                            <td>
+                                <StatusBadge :status="ntpDataList.ntp_status" true_text="ntpinfo.Synced" false_text="ntpinfo.NotSynced" />
                             </td>
                         </tr>
                         <tr>
@@ -50,12 +46,10 @@
                         </tr>
                         <tr>
                             <th>{{ $t('ntpinfo.Mode') }}</th>
-                            <td class="badge" :class="{
-                                'text-bg-dark': !ntpDataList.sun_isDayPeriod,
-                                'text-bg-warning': ntpDataList.sun_isDayPeriod,
-                            }">
-                                <span v-if="ntpDataList.sun_isDayPeriod">{{ $t('ntpinfo.Day') }}</span>
-                                <span v-else>{{ $t('ntpinfo.Night') }}</span>
+                            <td>
+                                <StatusBadge :status="ntpDataList.sun_isDayPeriod"
+                                    true_text="ntpinfo.Day" true_class="text-bg-warning"
+                                    false_text="ntpinfo.Night" false_class="text-bg-dark" />
                             </td>
                         </tr>
                     </tbody>
@@ -68,6 +62,7 @@
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
 import CardElement from '@/components/CardElement.vue';
+import StatusBadge from '@/components/StatusBadge.vue';
 import type { NtpStatus } from "@/types/NtpStatus";
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -76,6 +71,7 @@ export default defineComponent({
     components: {
         BasePage,
         CardElement,
+        StatusBadge,
     },
     data() {
         return {