From 1c8407a433f305a4d325667302285e27d7d4428a Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Thu, 13 Jan 2022 11:36:55 +0800
Subject: [PATCH] [MQTT] Use existing fields instead of creating new ones (UI)

---
 db/patch-added-mqtt-monitor.sql |  3 ---
 src/pages/EditMonitor.vue       | 24 +++++++-----------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/db/patch-added-mqtt-monitor.sql b/db/patch-added-mqtt-monitor.sql
index 2da67240..b6cc6c57 100644
--- a/db/patch-added-mqtt-monitor.sql
+++ b/db/patch-added-mqtt-monitor.sql
@@ -7,9 +7,6 @@ ALTER TABLE monitor
 ALTER TABLE monitor
 	ADD mqtt_success_message VARCHAR(255);
 
-ALTER TABLE monitor
-	ADD mqtt_port NUMBER(10);
-
 ALTER TABLE monitor
 	ADD mqtt_username VARCHAR(255);
 
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 2269eaae..13ed84ca 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -70,15 +70,15 @@
                             </div>
 
                             <!-- Hostname -->
-                            <!-- TCP Port / Ping / DNS / Steam only -->
-                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam'" class="my-3">
+                            <!-- TCP Port / Ping / DNS / Steam / MQTT only -->
+                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
                                 <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                 <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required>
                             </div>
 
                             <!-- Port -->
-                            <!-- For TCP Port / Steam Type -->
-                            <div v-if="monitor.type === 'port' || monitor.type === 'steam'" class="my-3">
+                            <!-- For TCP Port / Steam / MQTT Type -->
+                            <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
                                 <label for="port" class="form-label">{{ $t("Port") }}</label>
                                 <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                             </div>
@@ -122,27 +122,17 @@
                             <!-- For MQTT Type -->
                             <template v-if="monitor.type === 'mqtt'">
                                 <div class="my-3">
-                                    <label for="url" class="form-label">{{ $t("hostname") }}</label>
-                                    <input id="url" v-model="monitor.url" type="text" class="form-control" required>
-                                </div>
-
-                                <div class="my-3">
-                                    <label for="mqttPort" class="form-label">{{ $t("port") }}</label>
-                                    <input id="mqttPort" v-model="monitor.mqttPort" type="text" class="form-control">
-                                </div>
-
-                                <div class="my-3">
-                                    <label for="mqttUsername" class="form-label">{{ $t("username") }}</label>
+                                    <label for="mqttUsername" class="form-label">{{ $t("Username") }}</label>
                                     <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
                                 </div>
 
                                 <div class="my-3">
-                                    <label for="mqttPassword" class="form-label">{{ $t("password") }}</label>
+                                    <label for="mqttPassword" class="form-label">{{ $t("Password") }}</label>
                                     <input id="mqttPassword" v-model="monitor.mqttPassword" type="text" class="form-control">
                                 </div>
 
                                 <div class="my-3">
-                                    <label for="mqttTopic" class="form-label">{{ $t("topic") }}</label>
+                                    <label for="mqttTopic" class="form-label">{{ $t("Topic") }}</label>
                                     <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
                                     <div class="form-text">
                                         {{ $t("topicExplanation") }}