chore: load vue on `DOMContentLoaded`

cmd/doggo/api/assets/main.js

@@ -1,92 +1,95 @@
-var app = new Vue({
+var app;
-    el: '#app',
+window.addEventListener('DOMContentLoaded', (event) => {
-    data: {
+    app = new Vue({
-        apiURL: "/api/lookup/",
+        el: '#app',
-        results: [],
+        data: {
-        noRecordsFound: false,
+            apiURL: "/api/lookup/",
-        emptyNameError: false,
+            results: [],
-        apiErrorMessage: "",
+            noRecordsFound: false,
-        queryName: "",
+            emptyNameError: false,
-        queryType: "A",
+            apiErrorMessage: "",
-        nameserverName: "google",
+            queryName: "",
-        customNSAddr: "",
+            queryType: "A",
-        nsAddrMap: {
+            nameserverName: "google",
-            "google": "8.8.8.8",
+            customNSAddr: "",
-            "cloudflare": "1.1.1.1",
+            nsAddrMap: {
-            "quad9": "9.9.9.9",
+                "google": "8.8.8.8",
-        }
+                "cloudflare": "1.1.1.1",
-    },
+                "quad9": "9.9.9.9",
-    created: function () {
-    },
-    computed: {
-        getNSAddrValue() {
-            return this.nsAddrMap[this.nameserverName]
-        },
-        isCustomNS() {
-            if (this.nameserverName == "custom") {
-                return true
-            }
-            return false
-        }
-    },
-    methods: {
-        prepareNS() {
-            switch (this.nameserverName) {
-                case "google":
-                    return "tcp://8.8.8.8:53"
-                case "cloudflare":
-                    return "tcp://1.1.1.1:53"
-                case "quad9":
-                    return "tcp://9.9.9.9:53"
-                case "custom":
-                    return this.customNSAddr
-                default:
-                    return ""
             }
         },
-        lookupRecords() {
+        created: function () {
-            // reset variables.
+        },
-            this.results = []
+        computed: {
-            this.noRecordsFound = false
+            getNSAddrValue() {
-            this.emptyNameError = false
+                return this.nsAddrMap[this.nameserverName]
-            this.apiErrorMessage = ""
+            },
-
+            isCustomNS() {
-            if (this.queryName == "") {
+                if (this.nameserverName == "custom") {
-                this.emptyNameError = true
+                    return true
-                return
+                }
+                return false
             }
+        },
+        methods: {
+            prepareNS() {
+                switch (this.nameserverName) {
+                    case "google":
+                        return "tcp://8.8.8.8:53"
+                    case "cloudflare":
+                        return "tcp://1.1.1.1:53"
+                    case "quad9":
+                        return "tcp://9.9.9.9:53"
+                    case "custom":
+                        return this.customNSAddr
+                    default:
+                        return ""
+                }
+            },
+            lookupRecords() {
+                // reset variables.
+                this.results = []
+                this.noRecordsFound = false
+                this.emptyNameError = false
+                this.apiErrorMessage = ""
 
-            // GET request using fetch with error handling
+                if (this.queryName == "") {
-            fetch(this.apiURL, {
+                    this.emptyNameError = true
-                method: 'POST',
+                    return
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    query: [this.queryName,],
-                    type: [this.queryType,],
-                    nameservers: [this.prepareNS(),],
-                }),
-            }).then(async response => {
-                const res = await response.json();
-
-                // check for error response
-                if (!response.ok) {
-                    // get error message from body or default to response statusText
-                    const error = (res && res.message) || response.statusText;
-                    return Promise.reject(error);
                 }
 
-                if (res.data[0].answers == null) {
+                // GET request using fetch with error handling
-                    this.noRecordsFound = true
+                fetch(this.apiURL, {
-                } else {
+                    method: 'POST',
-                    // Set the answers in the results list.
+                    headers: {
-                    this.results = res.data[0].answers
+                        'Content-Type': 'application/json'
-                }
+                    },
+                    body: JSON.stringify({
+                        query: [this.queryName,],
+                        type: [this.queryType,],
+                        nameservers: [this.prepareNS(),],
+                    }),
+                }).then(async response => {
+                    const res = await response.json();
 
-            }).catch(error => {
+                    // check for error response
-                this.apiErrorMessage = error
+                    if (!response.ok) {
-            });
+                        // get error message from body or default to response statusText
+                        const error = (res && res.message) || response.statusText;
+                        return Promise.reject(error);
+                    }
+
+                    if (res.data[0].answers == null) {
+                        this.noRecordsFound = true
+                    } else {
+                        // Set the answers in the results list.
+                        this.results = res.data[0].answers
+                    }
+
+                }).catch(error => {
+                    this.apiErrorMessage = error
+                });
+            }
         }
-    }
+    })
 })