diff options
Diffstat (limited to '_www/hosts.d/index.html')
| -rw-r--r-- | _www/hosts.d/index.html | 415 |
1 files changed, 213 insertions, 202 deletions
diff --git a/_www/hosts.d/index.html b/_www/hosts.d/index.html index 6709801..c8f4b41 100644 --- a/_www/hosts.d/index.html +++ b/_www/hosts.d/index.html @@ -2,195 +2,205 @@ <!-- SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info --> <!-- SPDX-License-Identifier: GPL-3.0-or-later --> <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - <link rel="icon" type="image/png" href="/favicon.png" /> - <link rel="stylesheet" href="/index.css" /> - <title>rescached | hosts.d</title> - <style> - .nav-left { - padding: 0px; - width: 16em; - float: left; - } - .nav-left .item { - margin: 4px 0px; - } - #activeHostsFile { - float: left; - width: calc(100% - 17em); - } - .host { - font-family: monospace; - width: 100%; - } - .host.header { - margin: 1em 0px; - font-weight: bold; - border-bottom: 1px solid silver; - } - .host_name { - display: inline-block; - width: 18em; - word-wrap: break-word; - } - .host_value { - display: inline-block; - width: 10em; - } - </style> - </head> - <body onload="onLoad()"> - <nav class="menu"> - <a href="/"> rescached </a> - / - <a href="/environment/"> Environment </a> - / - <a href="/block.d/"> block.d </a> - / - <a href="/hosts.d/" class="active"> hosts.d </a> - / - <a href="/zone.d/"> zone.d </a> - </nav> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> + <link rel="icon" type="image/png" href="/favicon.png" /> + <link rel="stylesheet" href="/index.css" /> + <title>rescached | hosts.d</title> - <div id="notif"></div> + <style> + .nav-left { + padding: 0px; + width: 16em; + float: left; + } - <div class="hosts_d"> - <div class="nav-left"> - <h3>Hosts files</h3> - <div id="HostsFiles"></div> + .nav-left .item { + margin: 4px 0px; + } - <br /> + #activeHostsFile { + float: left; + width: calc(100% - 17em); + } - <label> - <span>New hosts file:</span> - <br /> - <input id="newHostsFile" oninput="onInputNewHostsFile(this.value)" /> - </label> - <button onclick="onCreateHostsFile()">Create</button> - </div> + .host { + font-family: monospace; + width: 100%; + } - <div id="activeHostsFile"> - <p>Select one of the hosts file to manage.</p> - </div> - </div> + .host.header { + margin: 1em 0px; + font-weight: bold; + border-bottom: 1px solid silver; + } - <script src="/index.js"></script> - <script src="/rescached.js"></script> - <script> - let resc = null - let activeHostsFile = null - let newHostsFile = "" - let newRecord = { - Name: "", - Value: "", - } + .host_name { + display: inline-block; + width: 18em; + word-wrap: break-word; + } - async function getHostsFile(name) { - activeHostsFile = resc.env.HostsFiles[name] - if (typeof activeHostsFile.Records === "undefined") { - activeHostsFile.Records = [] - } - if (activeHostsFile.Records === null) { - activeHostsFile.Records = [] - } - if (activeHostsFile.Records.length === 0) { - const res = await resc.HostsFileGet(name) - activeHostsFile.Records = res.data - } - renderHostsFile(activeHostsFile) - newRecord.Name = "" - newRecord.Value = "" - } + .host_value { + display: inline-block; + width: 10em; + } + </style> +</head> - async function onCreateHostsFile() { - if (newHostsFile === "") { - notifError("Please fill the hosts file name first") - return - } +<body onload="onLoad()"> + <nav class="menu"> + <a href="/"> rescached </a> + / + <a href="/environment/"> Environment </a> + / + <a href="/block.d/"> block.d </a> + / + <a href="/hosts.d/" class="active"> hosts.d </a> + / + <a href="/zone.d/"> zone.d </a> + / + <a href="/doc/"> Documentation </a> + </nav> - let res = await resc.HostsFileCreate(newHostsFile) + <div id="notif"></div> - if (res.code >= 400) { - notifError("ERROR: HostsFileCreate: " + res.message) - return - } - renderHostsFiles(resc.env.HostsFiles) - notifInfo(res.message) - resetInputs() - } + <div class="hosts_d"> + <div class="nav-left"> + <h3>Hosts files</h3> + <div id="HostsFiles"></div> - async function onDeleteActiveHostsFile() { - const res = await resc.HostsFileDelete(activeHostsFile.Name) - if (res.code != 200) { - notifError(res.message) - return - } - renderHostsFiles(resc.env.HostsFiles) - document.getElementById( - "activeHostsFile", - ).innerHTML = `<p>Select one of the hosts file to manage.</p>` - notifInfo(`Hosts file "${activeHostsFile.Name}" has been deleted`) - activeHostsFile = null - } + <br /> - async function onCreateRecord(hostsFile) { - if (hostsFile === "") { - notifError("invalid or empty hosts file name: " + hostsFile) - return - } - if (newRecord.Name === "") { - notifError("invalid or empty domain name") - return - } - if (newRecord.Value === "") { - notifError("invalid or empty IP address") - return - } - let res = await resc.HostsdRecordAdd(hostsFile, newRecord.Name, newRecord.Value) - if (res.code >= 400) { - notifError("failed to add record for " + hostsFile + ": " + res.message) - return - } - renderNewRecord(res.data) - } + <label> + <span>New hosts file:</span> + <br /> + <input id="newHostsFile" oninput="onInputNewHostsFile(this.value)" /> + </label> + <button onclick="onCreateHostsFile()">Create</button> + </div> - async function onDeleteRecord(domain) { - let res = await resc.HostsdRecordDelete(activeHostsFile.Name, domain) - if (res.code !== 200) { - notifError("Failed to delete record " + domain) - return - } - activeHostsFile = resc.env.HostsFiles[activeHostsFile.Name] - renderHostsFile(activeHostsFile) - } + <div id="activeHostsFile"> + <p>Select one of the hosts file to manage.</p> + </div> + </div> - function onInputNewHostsFile(v) { - newHostsFile = v - } + <script src="/index.js"></script> + <script src="/rescached.js"></script> + <script> + let resc = null + let activeHostsFile = null + let newHostsFile = "" + let newRecord = { + Name: "", + Value: "", + } - function onInputNewRecord(k, v) { - newRecord[k] = v - } + async function getHostsFile(name) { + activeHostsFile = resc.env.HostsFiles[name] + if (typeof activeHostsFile.Records === "undefined") { + activeHostsFile.Records = [] + } + if (activeHostsFile.Records === null) { + activeHostsFile.Records = [] + } + if (activeHostsFile.Records.length === 0) { + const res = await resc.HostsFileGet(name) + activeHostsFile.Records = res.data + } + renderHostsFile(activeHostsFile) + newRecord.Name = "" + newRecord.Value = "" + } - async function onLoad() { - resc = new Rescached("") + async function onCreateHostsFile() { + if (newHostsFile === "") { + notifError("Please fill the hosts file name first") + return + } - let res = await resc.getEnvironment() - if (res.code != 200) { - notifError(res.message) - return - } + let res = await resc.HostsFileCreate(newHostsFile) - renderHostsFiles(res.data.HostsFiles) - resetInputs() - } + if (res.code >= 400) { + notifError("ERROR: HostsFileCreate: " + res.message) + return + } + renderHostsFiles(resc.env.HostsFiles) + notifInfo(res.message) + resetInputs() + } - function renderHostsFile(hf) { - let content = document.getElementById("activeHostsFile") - let innerHTML = ` + async function onDeleteActiveHostsFile() { + const res = await resc.HostsFileDelete(activeHostsFile.Name) + if (res.code != 200) { + notifError(res.message) + return + } + renderHostsFiles(resc.env.HostsFiles) + document.getElementById( + "activeHostsFile", + ).innerHTML = `<p>Select one of the hosts file to manage.</p>` + notifInfo(`Hosts file "${activeHostsFile.Name}" has been deleted`) + activeHostsFile = null + } + + async function onCreateRecord(hostsFile) { + if (hostsFile === "") { + notifError("invalid or empty hosts file name: " + hostsFile) + return + } + if (newRecord.Name === "") { + notifError("invalid or empty domain name") + return + } + if (newRecord.Value === "") { + notifError("invalid or empty IP address") + return + } + let res = await resc.HostsdRecordAdd(hostsFile, newRecord.Name, newRecord.Value) + if (res.code >= 400) { + notifError("failed to add record for " + hostsFile + ": " + res.message) + return + } + renderNewRecord(res.data) + } + + async function onDeleteRecord(domain) { + let res = await resc.HostsdRecordDelete(activeHostsFile.Name, domain) + if (res.code !== 200) { + notifError("Failed to delete record " + domain) + return + } + activeHostsFile = resc.env.HostsFiles[activeHostsFile.Name] + renderHostsFile(activeHostsFile) + } + + function onInputNewHostsFile(v) { + newHostsFile = v + } + + function onInputNewRecord(k, v) { + newRecord[k] = v + } + + async function onLoad() { + resc = new Rescached("") + + let res = await resc.getEnvironment() + if (res.code != 200) { + notifError(res.message) + return + } + + renderHostsFiles(res.data.HostsFiles) + resetInputs() + } + + function renderHostsFile(hf) { + let content = document.getElementById("activeHostsFile") + let innerHTML = ` <p> ${hf.Name} (${hf.Records.length} records) <button onclick="onDeleteActiveHostsFile()">Delete</button> @@ -210,51 +220,52 @@ </div> <div id="records"> ` - for (let x = 0; x < hf.Records.length; x++) { - let rr = hf.Records[x] - innerHTML += ` + for (let x = 0; x < hf.Records.length; x++) { + let rr = hf.Records[x] + innerHTML += ` <div class="host"> <span class="host_name"> ${rr.Name} </span> <span class="host_value"> ${rr.Value} </span> <button onclick="onDeleteRecord('${rr.Name}')">X</button> </div>` - } - innerHTML += "</div>" - content.innerHTML = innerHTML - } + } + innerHTML += "</div>" + content.innerHTML = innerHTML + } - function renderHostsFiles(hostsFiles) { - let parent = document.getElementById("HostsFiles") - parent.innerHTML = "" + function renderHostsFiles(hostsFiles) { + let parent = document.getElementById("HostsFiles") + parent.innerHTML = "" - for (let k in hostsFiles) { - if (!hostsFiles.hasOwnProperty(k)) { - continue - } - let hf = hostsFiles[k] - let item = document.createElement("div") - item.classList.add("item") - item.innerHTML = `<a href="#" onclick="getHostsFile('${k}')"> ${hf.Name} </a>` - parent.appendChild(item) - } - } + for (let k in hostsFiles) { + if (!hostsFiles.hasOwnProperty(k)) { + continue + } + let hf = hostsFiles[k] + let item = document.createElement("div") + item.classList.add("item") + item.innerHTML = `<a href="#" onclick="getHostsFile('${k}')"> ${hf.Name} </a>` + parent.appendChild(item) + } + } - // renderNewRecord prepend the new record on top of the list. - function renderNewRecord(rr) { - let div = document.getElementById("records") - innerHTML = ` + // renderNewRecord prepend the new record on top of the list. + function renderNewRecord(rr) { + let div = document.getElementById("records") + innerHTML = ` <div class="host"> <span class="host_name"> ${rr.Name} </span> <span class="host_value"> ${rr.Value} </span> <button onclick="onDeleteRecord('${rr.Name}')">X</button> </div>` - div.innerHTML = innerHTML + div.innerHTML - } + div.innerHTML = innerHTML + div.innerHTML + } + + function resetInputs() { + document.getElementById("newHostsFile").value = "" + newHostsFile = "" + } + </script> +</body> - function resetInputs() { - document.getElementById("newHostsFile").value = "" - newHostsFile = "" - } - </script> - </body> </html> |