dns_service/api/frontend/js/settings/settings.js

const upstream_dns_servers_table_body = document.querySelector('#upstream-dns-servers-table-body')
const local_domains_table_body = document.querySelector('#local-domains-table-body')
const cache_size_input = document.querySelector('#cache-size-input')
const save_settings_button = document.querySelector('#save-settings-button')
const add_dns_server_button = document.querySelector('#add_dns_server_button')
const add_local_domain_button = document.querySelector('#add_local_domain_button')
const edit_file_input = document.querySelector('#edit_file_input')
const save_config_file_button = document.querySelector('#save_config_file_button')

var settings = {}
var configFile = ""

const updateDnsServersTable = () => {
    upstream_dns_servers_table_body.innerHTML = ""
    for (var i = 0; i < settings.resolv.length; i++) {
        upstream_dns_servers_table_body.innerHTML += `<tr>
                            <th class="d-flex align-items-center justify-content-between">
                                ${settings.resolv[i]}
                                <button id="${i}" class="delete-table-button btn btn-danger">Del</button>
                            </th>
                        </tr>`
    }
}

const updateLocalDomainsTable = () => {
    local_domains_table_body.innerHTML = ""
    for (const [key, value] of Object.entries(settings.hosts)) {
        if (Array.isArray(value)) {
            for (var i = 0; i < value.length; i++) {
                local_domains_table_body.innerHTML += `<tr>
                                <th>${key}</th>
                                <th>${value[i]}</th>
                                <th><button class="deldomain btn btn-danger" id="${key}|${value[i]}">Del</button>
                                </th>
                            </tr>`
            }
        } else {
            local_domains_table_body.innerHTML += `<tr>
                                    <th>${key}</th>
                                    <th>${value}</th>
                                    <th><button class="deldomain btn btn-danger" id="${key}|${value}">Del</button>
                                    </th>
                                </tr>`
        }
    }
}

const updateInterface = () => {
    updateDnsServersTable()
    updateLocalDomainsTable()
    cache_size_input.value = settings.cache_size
}

const getSettings = () => {
    fetch(window.location.origin + "/api/settings")
    .then(data => data.json())
    .then(jsondata => {
        settings = jsondata
        updateInterface()
    })
}

const setSettings = () => {
    fetch(window.location.origin + "/api/settings", {
        method: 'POST',
        body: JSON.stringify(settings)
    }).then(data => data.json())
    .then(jsondata => {
        settings = jsondata
        updateInterface()
    })
}

save_settings_button.addEventListener('click', () => {
    setSettings()
})

const write_cache_size = (value) => {
    settings.cache_size = value
}

cache_size_input.addEventListener('change', (e) => {
    write_cache_size(e.target.value)
})

cache_size_input.addEventListener('input', (e) => {
    write_cache_size(e.target.value)
})

getSettings()

add_dns_server_button.addEventListener('click', () => {
    const dns_server = prompt("Input your DNS server:")
    if (dns_server === null) return
    if (confirm("Confirm DNS settings? (add DNS server)")) {
        if (Array.isArray(settings.resolv)) {
            if (!settings.resolv.includes(dns_server)) {
                settings.resolv.push(dns_server)
                updateDnsServersTable()
            }
        }
    }
})

upstream_dns_servers_table_body.addEventListener('click', (e) => {
    if (e.target.classList.contains("delete-table-button")) {
        if (confirm(`Confirm DNS settings? (delete DNS server: ${e.target.id})`)) {
            if (Array.isArray(settings.resolv)) {
                settings.resolv.splice(e.target.id, 1)
                updateDnsServersTable()
            }
        }
    }
})

add_local_domain_button.addEventListener('click', () => {
    const domainip = prompt('Input localdomain IP:')
    if (domainip === null) return
    const domain = prompt('Input domain:')
    if (domainip === null || domain === null) return
    if (confirm(`Confirm DNS settings? (Add Local Domain: ${domainip} ${domain})`)) {
        for (const [key, value] of Object.entries(settings.hosts)) {
            if (key === domainip) {
                if (Array.isArray(value)) {
                    if (!value.includes(domain)) {
                        value.push(domain)
                        updateLocalDomainsTable()
                        return
                    }
                    return
                }
                const domainsarray = [value, domain]
                settings.hosts[key] = domainsarray
                updateLocalDomainsTable()
                return
            }
        }
        settings.hosts[domainip] = domain
        updateLocalDomainsTable()
    }
})

local_domains_table_body.addEventListener('click', (e) => {
    if (e.target.classList.contains('deldomain')) {
        if (confirm(`Confirm DNS settings? (delete domain: ${e.target.id})`)) {
            const domainip = e.target.id.split("|")[0]
            const domain = e.target.id.split("|")[1]
            for (const [key, value] of Object.entries(settings.hosts)) {
                if (key === domainip) {
                    if (Array.isArray(value)) {
                        if (value.includes(domain)) {
                            value.splice(value.indexOf(domain), 1)
                            updateLocalDomainsTable()
                            return
                        }
                        return
                    }
                    delete settings.hosts[key]
                    updateLocalDomainsTable()
                    return
                }
            }
        }
    }
})

const getConfigFile = () => {
    fetch(window.location.origin + "/api/settings/file")
    .then(data => data.text())
    .then(textdata => edit_file_input.value = textdata)
}

getConfigFile()

save_config_file_button.addEventListener('click', () => {
    if (confirm("Save Config file?")) {
        fetch(window.location.origin + "/api/settings/file", {
            method: 'POST',
            body: edit_file_input.value
        }).then(data => data.text())
        .then(textdata => edit_file_input.value = textdata)
    }
})