0
0

👽 adapt to api changes #7

Merged
thetek42 merged 4 commits from ui-test into main 2021-04-04 15:39:33 +02:00
6 changed files with 81 additions and 78 deletions

2
ui/html/index.html vendored
View File

@ -6,4 +6,4 @@
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<script src="index.js"></script> <script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.com", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div><script src="feather.js"></script> <div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div><script src="feather.js"></script>

51
ui/html/index.js vendored
View File

@ -26,46 +26,47 @@ function dnswatch_search() {
request.onload = function() { request.onload = function() {
if (request.status >= 200 && request.status < 400) { if (request.status >= 200 && request.status < 400) {
var response = JSON.parse(this.response); var response = JSON.parse(this.response);
//console.log(response);
// TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE // TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE
if (response['type'] == 'success') { // success if (response['type'] == 'success') { // success
var table = '<table>\n'; var table = '<table>\n';
//// reference dns
// status
table += '<tr>\n';
table += '<td class="status ref">\n';
table += `<i data-feather="${ response["data"]["reference"]["found"] ? "check" : "x" }"></i>\n`;
table += '</td>\n';
// provider
table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="../svg/${ response["data"]["reference"]["nameserver"] }.svg">\n`;
table += '</td>\n'
// name and address
table += `<td class="name">${ response["data"]["reference"]["name"] }<small>${ response["data"]["reference"]["address"] }</small></td>\n`;
// reference info
table += '<td class="desc ref">reference</td>\n';
// help button
table += '<td class="help">\n';
table += '<button><i data-feather="help-circle"></i></button>\n';
table += '</td>\n';
table += '</tr>\n'
if (response['data']['reference']['found']) { // only if reference confirms //// reference dns
response['data']['reference'].forEach(i => {
// status
table += '<tr>\n';
table += '<td class="status ref">\n';
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
table += '</td>\n';
// provider
table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
table += '</td>\n'
// name and address
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
// reference info
table += '<td class="desc ref">reference</td>\n';
// help button
table += '<td class="help">\n';
table += '<button><i data-feather="help-circle"></i></button>\n';
table += '</td>\n';
table += '</tr>\n'
});
if (response['data']['found']) { // only if reference confirms
table += '<tr></tr>\n'; // spacer table += '<tr></tr>\n'; // spacer
//// search rows //// search rows
response['data']['search'].forEach(i => { response['data']['search'].forEach(i => {
//console.log(i);
table += '<tr>\n'; table += '<tr>\n';
// status // status
table += `<td class="status ${ i["matching"] ? "check" : "cross" }">\n`; table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
table += `<i data-feather="${ i["matching"] ? "check" : "x" }"></i>\n`; table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
table += '</td>\n'; table += '</td>\n';
// provider icon // provider icon
table += '<td class="icon">\n'; table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="../svg/${ i["nameserver"] }.svg">\n`; table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
table += '</td>\n'; table += '</td>\n';
// name and address // name and address
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`; table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;

View File

@ -27,46 +27,47 @@ function dnswatch_search() {
request.onload = function() { request.onload = function() {
if (request.status >= 200 && request.status < 400) { if (request.status >= 200 && request.status < 400) {
var response = JSON.parse(this.response); var response = JSON.parse(this.response);
//console.log(response);
// TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE // TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE
if (response['type'] == 'success') { // success if (response['type'] == 'success') { // success
var table = '<table>\n'; var table = '<table>\n';
//// reference dns
// status
table += '<tr>\n';
table += '<td class="status ref">\n';
table += `<i data-feather="${ response["data"]["reference"]["found"] ? "check" : "x" }"></i>\n`;
table += '</td>\n';
// provider
table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="../svg/${ response["data"]["reference"]["nameserver"] }.svg">\n`;
table += '</td>\n'
// name and address
table += `<td class="name">${ response["data"]["reference"]["name"] }<small>${ response["data"]["reference"]["address"] }</small></td>\n`;
// reference info
table += '<td class="desc ref">reference</td>\n';
// help button
table += '<td class="help">\n';
table += '<button><i data-feather="help-circle"></i></button>\n';
table += '</td>\n';
table += '</tr>\n'
if (response['data']['reference']['found']) { // only if reference confirms //// reference dns
response['data']['reference'].forEach(i => {
// status
table += '<tr>\n';
table += '<td class="status ref">\n';
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
table += '</td>\n';
// provider
table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
table += '</td>\n'
// name and address
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
// reference info
table += '<td class="desc ref">reference</td>\n';
// help button
table += '<td class="help">\n';
table += '<button><i data-feather="help-circle"></i></button>\n';
table += '</td>\n';
table += '</tr>\n'
});
if (response['data']['found']) { // only if reference confirms
table += '<tr></tr>\n'; // spacer table += '<tr></tr>\n'; // spacer
//// search rows //// search rows
response['data']['search'].forEach(i => { response['data']['search'].forEach(i => {
//console.log(i);
table += '<tr>\n'; table += '<tr>\n';
// status // status
table += `<td class="status ${ i["matching"] ? "check" : "cross" }">\n`; table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
table += `<i data-feather="${ i["matching"] ? "check" : "x" }"></i>\n`; table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
table += '</td>\n'; table += '</td>\n';
// provider icon // provider icon
table += '<td class="icon">\n'; table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="../svg/${ i["nameserver"] }.svg">\n`; table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
table += '</td>\n'; table += '</td>\n';
// name and address // name and address
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`; table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;

View File

@ -5,4 +5,4 @@
*js("///index.js") *js("///index.js")
*js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js") *js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js")
*postjs("///feather.js") *postjs("///feather.js")
<div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.com", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div> <div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div>

View File

@ -26,46 +26,47 @@ function dnswatch_search() {
request.onload = function() { request.onload = function() {
if (request.status >= 200 && request.status < 400) { if (request.status >= 200 && request.status < 400) {
var response = JSON.parse(this.response); var response = JSON.parse(this.response);
//console.log(response);
// TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE // TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE
if (response['type'] == 'success') { // success if (response['type'] == 'success') { // success
var table = '<table>\n'; var table = '<table>\n';
//// reference dns
// status
table += '<tr>\n';
table += '<td class="status ref">\n';
table += `<i data-feather="${ response["data"]["reference"]["found"] ? "check" : "x" }"></i>\n`;
table += '</td>\n';
// provider
table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="../svg/${ response["data"]["reference"]["nameserver"] }.svg">\n`;
table += '</td>\n'
// name and address
table += `<td class="name">${ response["data"]["reference"]["name"] }<small>${ response["data"]["reference"]["address"] }</small></td>\n`;
// reference info
table += '<td class="desc ref">reference</td>\n';
// help button
table += '<td class="help">\n';
table += '<button><i data-feather="help-circle"></i></button>\n';
table += '</td>\n';
table += '</tr>\n'
if (response['data']['reference']['found']) { // only if reference confirms //// reference dns
response['data']['reference'].forEach(i => {
// status
table += '<tr>\n';
table += '<td class="status ref">\n';
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
table += '</td>\n';
// provider
table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
table += '</td>\n'
// name and address
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
// reference info
table += '<td class="desc ref">reference</td>\n';
// help button
table += '<td class="help">\n';
table += '<button><i data-feather="help-circle"></i></button>\n';
table += '</td>\n';
table += '</tr>\n'
});
if (response['data']['found']) { // only if reference confirms
table += '<tr></tr>\n'; // spacer table += '<tr></tr>\n'; // spacer
//// search rows //// search rows
response['data']['search'].forEach(i => { response['data']['search'].forEach(i => {
//console.log(i);
table += '<tr>\n'; table += '<tr>\n';
// status // status
table += `<td class="status ${ i["matching"] ? "check" : "cross" }">\n`; table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
table += `<i data-feather="${ i["matching"] ? "check" : "x" }"></i>\n`; table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
table += '</td>\n'; table += '</td>\n';
// provider icon // provider icon
table += '<td class="icon">\n'; table += '<td class="icon">\n';
table += `<img class="uncolored-svg" src="../svg/${ i["nameserver"] }.svg">\n`; table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
table += '</td>\n'; table += '</td>\n';
// name and address // name and address
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`; table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;

View File

@ -11,7 +11,7 @@
input#dnswatch-search( type='text' placeholder='Search...' autofocus ) input#dnswatch-search( type='text' placeholder='Search...' autofocus )
button#dnswatch-search-submit: i( data-feather='search' ) button#dnswatch-search-submit: i( data-feather='search' )
button#help: i( data-feather='help-circle' ) button#help: i( data-feather='help-circle' )
small Try "gnu.org", "wikipedia.com", "s.to" or your own website! small Try "gnu.org", "wikipedia.org", "s.to" or your own website!
#loadani #loadani
#spinner #spinner
span loading... span loading...