dns_service_c/web/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();
    })
    .catch((e) => alert(e));
};

const setSettings = () => {
  fetch(window.location.origin + "/api/settings", {
    method: "POST",
    body: JSON.stringify(settings),
  })
    .then((data) => data.json())
    .then((jsondata) => {
      if (jsondata.error) {
        alert(jsondata.error);
        return;
      }
      settings = jsondata;
      updateInterface();
      alert("Success set settings");
    })
    .catch((e) => alert(e));
};

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

const write_cache_size = (value) => {
  settings.cache_size = parseInt(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))
    .catch((e) => alert(e));
};

getConfigFile();

save_config_file_button.addEventListener("click", async () => {
  if (confirm("Save Config file?")) {
    var response = await fetch(window.location.origin + "/api/settings/file", {
      method: "POST",
      body: edit_file_input.value,
    });
    if (!response.ok) {
      const result = await response.json();
      alert(result.error || "Failed to save config file");
      return;
    }
    const result = await response.json();
    if (result.error) {
      alert(result.error);
    } else {
      edit_file_input.value = result.data;
      alert("Success write settings file");
    }
  }
});