show multiple record types

This commit is contained in:
AJ ONeal 2018-01-17 02:17:39 -07:00
parent fa45842f9f
commit 7a36e5f685
2 changed files with 106 additions and 6 deletions

View File

@ -31,7 +31,78 @@
</ul> </ul>
<ul class="js-record-tpl"> <ul class="js-record-tpl">
<li><span class="js-record-type">record-type</span> <span class="js-record-name">record-name</span></li> <li class="js-record-soa">
<span class="js-record-type">SOA</span>
<span class="js-record-name">example.com</span>
<span class="js-record-primary">{{ primary }}</span>
<span class="js-record-admin">admin.example.com</span>
<span class="js-record-expiration">{{ seconds until expiration }}</span>
<span class="js-record-minimum">{{ minimum }}</span>
<span class="js-record-serial">{{ serial }}</span>
<span class="js-record-retry">{{ retry }}</span>
<span class="js-record-refresh">{{ refresh }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-custom">
<span class="js-record-type">type000</span>
<span class="js-record-name">example.com</span>
<span class="js-record-rr">{{ hex }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="">
<span class="js-record-type">NS</span>
<span class="js-record-name">example.com</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-any">
<span class="js-record-type">ANY</span>
<span class="js-record-name">example.com</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-a js-record-aaaa">
<span class="js-record-type">A / AAAA</span>
<span class="js-record-name">example.com</span>
<span class="js-record-address">{{ addr }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-aname js-record-cname js-record-ns">
<span class="js-record-type">ANAME / CNAME</span>
<span class="js-record-name">example.com</span>
<span class="js-record-data">{{ target }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-caa">
<span class="js-record-type">CAA</span>
<span class="js-record-name">example.com</span>
<span class="js-record-flag">{{ flag }}</span>
<span class="js-record-value">{{ value }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-mx">
<span class="js-record-type">MX</span>
<span class="js-record-name">example.com</span>
<span class="js-record-exchange">{{ target }}</span>
<span class="js-record-priority">{{ priority }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-ptr">
<span class="js-record-type">PTR</span>
<span class="js-record-name">example.com</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-srv">
<span class="js-record-type">SRV</span>
<span class="js-record-name">example.com</span>
<span class="js-record-port">{{ port }}</span>
<span class="js-record-priority">{{ priority }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
<li class="js-record-txt">
<span class="js-record-type">TXT</span>
<span class="js-record-name">example.com</span>
<span class="js-record-data">{{ text data }}</span>
<span class="js-record-ttl">{{ ttl }}</span>
</li>
</ul> </ul>
<script src="/js/app.js"></script> <script src="/js/app.js"></script>

View File

@ -7,6 +7,9 @@
function $qs(qs, el) { function $qs(qs, el) {
return (el||document).querySelector(qs); return (el||document).querySelector(qs);
} }
function $qsa(qs, el) {
return (el||document).querySelectorAll(qs);
}
function $on(selector, eventname, cb) { function $on(selector, eventname, cb) {
if (!$on._events[eventname]) { if (!$on._events[eventname]) {
$on._events[eventname] = $on._dispatcher(eventname); $on._events[eventname] = $on._dispatcher(eventname);
@ -130,16 +133,42 @@
return resp.json().then(function (data) { return resp.json().then(function (data) {
var tpl = ''; var tpl = '';
var el; var el;
if (!tpls.record) { if (!tpls.recordsMap) {
tpls.record = $qs('.js-record-tpl').innerHTML; //tpls.recordTypes = Array.prototype.slice.call($qsa('.js-record-tpl li'));
//.innerHTML;
tpls.recordsMap = {};
tpls.recordsMap.soa = $qs('.js-record-soa').outerHTML;
tpls.recordsMap.any = $qs('.js-record-any').outerHTML;
tpls.recordsMap.ns = $qs('.js-record-ns').outerHTML;
tpls.recordsMap.a = $qs('.js-record-a').outerHTML;
tpls.recordsMap.aaaa = $qs('.js-record-aaaa').outerHTML;
tpls.recordsMap.aname = $qs('.js-record-aname').outerHTML;
tpls.recordsMap.cname = $qs('.js-record-cname').outerHTML;
tpls.recordsMap.caa = $qs('.js-record-caa').outerHTML;
tpls.recordsMap.ptr = $qs('.js-record-ptr').outerHTML;
tpls.recordsMap.mx = $qs('.js-record-mx').outerHTML;
tpls.recordsMap.txt = $qs('.js-record-txt').outerHTML;
tpls.recordsMap.srv = $qs('.js-record-srv').outerHTML;
} }
console.log('tpls.recordsMap:');
console.log(tpls.recordsMap);
data.records.forEach(function (record) { data.records.forEach(function (record) {
el = document.createElement('div'); el = document.createElement('div');
el.innerHTML = tpls.record; console.log('record.type:');
console.log(record.type);
el.innerHTML = tpls.recordsMap[record.type.toLowerCase()];
console.log(el); console.log(el);
console.log($qs('.js-record-name', el)); console.log($qs('.js-record-name', el));
$qs('.js-record-type', el).innerText = record.type; Object.keys(record).forEach(function (key) {
$qs('.js-record-name', el).innerText = record.name; var x = $qs('.js-record-' + key, el);
if (x) {
x.innerText = record[key];
}
});
//$qs('.js-record-type', el).innerText = record.type;
//$qs('.js-record-name', el).innerText = record.name;
//$qs('.js-record-address', el).innerText = record.address;
console.log('el.innerHTML:');
console.log(el.innerHTML); console.log(el.innerHTML);
tpl += el.innerHTML; tpl += el.innerHTML;
console.log(tpl); console.log(tpl);