/*

behavioural layer for the `configure_dns.html.tera` template,
corresponding to the web route `/settings/network/dns`

 - intercept button click for save (form submission of dns settings)
 - perform json api call
 - update the dom

*/

var PEACH_DNS = {};

// catch click of 'Add' button and make POST request
PEACH_DNS.configureDns = function() {
    document.addEventListener('DOMContentLoaded', function() {
        document.body.addEventListener('submit', function(e) {
            // prevent redirect on button press (default behavior)
            e.preventDefault();
            // capture form data
            var formElement = document.querySelector("form");
            // create form data object from the configureDNS form element
            var formData = new FormData(formElement);
            var object = {};
            // set checkbox to false (the value is only passed to formData if it is "on")
            object["enable_dyndns"] = false;
            // assign values from form
            formData.forEach(function(value, key){
                // convert checkbox to bool
                if (key === "enable_dyndns") {
                    value = (value === "on");
                }
                object[key] = value;
            });
            // perform json serialization
            console.log(object);
            var jsonData = JSON.stringify(object);
            // write in-progress status message to ui
            PEACH.flashMsg("info", "Saving new DNS configurations");
            // send add_wifi POST request
            fetch("/api/v1/network/dns/configure", {
                method: "post",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: jsonData
            })
            .then( (response) => {
                return response.json()
            })
            .then( (jsonData) => {
                // write json response message to ui
                PEACH.flashMsg(jsonData.status, jsonData.msg);
                let statusIndicator = document.getElementById("dyndns-status-indicator");
                // only remove the "dyndns-status-indicator" element if it exists
                if (statusIndicator != null ) statusIndicator.remove();
            })
        }, false);
    });
}

var configureDnsInstance = PEACH_DNS;
configureDnsInstance.configureDns();