From 91e82bd12c0c5240f2af9a6cfe0a76c28778d35e Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Sat, 28 Aug 2021 11:46:26 +0800
Subject: [PATCH] set default value for dns resolve type and code refactor

---
 src/pages/EditMonitor.vue | 114 ++++++++++++++++++++------------------
 1 file changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 18663ae57..552261735 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -47,50 +47,51 @@
                                 </div>
                             </div>
 
-                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3">
+                            <!-- TCP Port / Ping / DNS only -->
+                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' " class="my-3">
                                 <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                 <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
                             </div>
 
+                            <!-- For TCP Port Type -->
                             <div v-if="monitor.type === 'port' " 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>
 
-                            <div v-if="monitor.type === 'dns'" class="my-3">
-                                <label for="hostname" class="form-label">Hostname</label>
-                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
-                            </div>
-
-                            <div v-if="monitor.type === 'dns'" class="my-3">
-                                <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
-                                <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
-                                <div class="form-text">
-                                    {{ $t("resoverserverDescription") }}
+                            <!-- For DNS Type -->
+                            <template v-if="monitor.type === 'dns'">
+                                <div class="my-3">
+                                    <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
+                                    <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
+                                    <div class="form-text">
+                                        {{ $t("resoverserverDescription") }}
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div v-if="monitor.type === 'dns'" class="my-3">
-                                <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
+                                <div class="my-3">
+                                    <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
 
-                                <VueMultiselect
-                                    id="dns_resolve_type"
-                                    v-model="monitor.dns_resolve_type"
-                                    :options="dnsresolvetypeOptions"
-                                    :multiple="false"
-                                    :close-on-select="true"
-                                    :clear-on-select="false"
-                                    :preserve-search="false"
-                                    placeholder="Pick a RR-Type..."
-                                    :preselect-first="false"
-                                    :max-height="500"
-                                    :taggable="false"
-                                ></VueMultiselect>
+                                    <!-- :allow-empty="false" is not working, set a default value instead https://github.com/shentao/vue-multiselect/issues/336   -->
+                                    <VueMultiselect
+                                        id="dns_resolve_type"
+                                        v-model="monitor.dns_resolve_type"
+                                        :options="dnsresolvetypeOptions"
+                                        :multiple="false"
+                                        :close-on-select="true"
+                                        :clear-on-select="false"
+                                        :preserve-search="false"
+                                        placeholder="Pick a RR-Type..."
+                                        :preselect-first="false"
+                                        :max-height="500"
+                                        :taggable="false"
+                                    ></VueMultiselect>
 
-                                <div class="form-text">
-                                    {{ $t("rrtypeDescription") }}
+                                    <div class="form-text">
+                                        {{ $t("rrtypeDescription") }}
+                                    </div>
                                 </div>
-                            </div>
+                            </template>
 
                             <div class="my-3">
                                 <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
@@ -124,35 +125,38 @@
                                 </div>
                             </div>
 
-                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
-                                <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
-                                <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
-                                <div class="form-text">
-                                    {{ $t("maxRedirectDescription") }}
+                            <!-- HTTP / Keyword only -->
+                            <template v-if="monitor.type === 'http' || monitor.type === 'keyword' ">
+                                <div class="my-3">
+                                    <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
+                                    <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+                                    <div class="form-text">
+                                        {{ $t("maxRedirectDescription") }}
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
-                                <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
+                                <div class="my-3">
+                                    <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
 
-                                <VueMultiselect
-                                    id="acceptedStatusCodes"
-                                    v-model="monitor.accepted_statuscodes"
-                                    :options="acceptedStatusCodeOptions"
-                                    :multiple="true"
-                                    :close-on-select="false"
-                                    :clear-on-select="false"
-                                    :preserve-search="true"
-                                    placeholder="Pick Accepted Status Codes..."
-                                    :preselect-first="false"
-                                    :max-height="600"
-                                    :taggable="true"
-                                ></VueMultiselect>
+                                    <VueMultiselect
+                                        id="acceptedStatusCodes"
+                                        v-model="monitor.accepted_statuscodes"
+                                        :options="acceptedStatusCodeOptions"
+                                        :multiple="true"
+                                        :close-on-select="false"
+                                        :clear-on-select="false"
+                                        :preserve-search="true"
+                                        placeholder="Pick Accepted Status Codes..."
+                                        :preselect-first="false"
+                                        :max-height="600"
+                                        :taggable="true"
+                                    ></VueMultiselect>
 
-                                <div class="form-text">
-                                    {{ $t("acceptedStatusCodesDescription") }}
+                                    <div class="form-text">
+                                        {{ $t("acceptedStatusCodesDescription") }}
+                                    </div>
                                 </div>
-                            </div>
+                            </template>
 
                             <div class="mt-5 mb-1">
                                 <button class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
@@ -207,6 +211,7 @@ export default {
             processing: false,
             monitor: {
                 notificationIDList: {},
+                // Do not add default value here, please check init() method
             },
             acceptedStatusCodeOptions: [],
             dnsresolvetypeOptions: [],
@@ -288,6 +293,7 @@ export default {
                     upsideDown: false,
                     maxredirects: 10,
                     accepted_statuscodes: ["200-299"],
+                    dns_resolve_type: "A",
                     dns_resolve_server: "1.1.1.1",
                 }
             } else if (this.isEdit) {