From 2682ca8dece016a4b4cba6ced64ba46bed911b89 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 17 Oct 2022 20:46:35 +0200
Subject: [PATCH] webapp: create interface for MqttStatus

---
 webapp/src/types/MqttStatus.ts    | 17 +++++++++++++++++
 webapp/src/views/MqttInfoView.vue | 23 ++++-------------------
 2 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 webapp/src/types/MqttStatus.ts

diff --git a/webapp/src/types/MqttStatus.ts b/webapp/src/types/MqttStatus.ts
new file mode 100644
index 00000000..f8bc2ce0
--- /dev/null
+++ b/webapp/src/types/MqttStatus.ts
@@ -0,0 +1,17 @@
+export interface MqttStatus {
+    mqtt_enabled: boolean,
+    mqtt_hostname: string,
+    mqtt_port: number,
+    mqtt_username: string,
+    mqtt_topic: string,
+    mqtt_publish_interval: number,
+    mqtt_retain: boolean,
+    mqtt_tls: boolean,
+    mqtt_root_ca_cert_info: string,
+    mqtt_connected: boolean,
+    mqtt_hass_enabled: boolean,
+    mqtt_hass_expire: boolean,
+    mqtt_hass_retain: boolean,
+    mqtt_hass_topic: string,
+    mqtt_hass_individualpanels: boolean
+}
\ No newline at end of file
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index 15231a03..f819c225 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -159,36 +159,21 @@
 </template>
 
 <script lang="ts">
+import type { MqttStatus } from '@/types/MqttStatus';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
             dataLoading: true,
-            mqttDataList: {
-                mqtt_enabled: false,
-                mqtt_hostname: "",
-                mqtt_port: 0,
-                mqtt_username: "",
-                mqtt_topic: "",
-                mqtt_publish_interval: 0,
-                mqtt_retain: false,
-                mqtt_tls: false,
-                mqtt_root_ca_cert_info: "",
-                mqtt_connected: false,
-                mqtt_hass_enabled: false,
-                mqtt_hass_expire: false,
-                mqtt_hass_retain: false,
-                mqtt_hass_topic: "",
-                mqtt_hass_individualpanels: false
-            },
+            mqttDataList: {} as MqttStatus,
         };
     },
     created() {
-        this.getNtpInfo();
+        this.getMqttInfo();
     },
     methods: {
-        getNtpInfo() {
+        getMqttInfo() {
             this.dataLoading = true;
             fetch("/api/mqtt/status")
                 .then((response) => response.json())