From 7a36e5f685d1ddb227066d83b29ca9387e6325cc Mon Sep 17 00:00:00 2001
From: AJ ONeal <aj@daplie.com>
Date: Wed, 17 Jan 2018 02:17:39 -0700
Subject: [PATCH] show multiple record types

---
 lib/public/index.html | 73 ++++++++++++++++++++++++++++++++++++++++++-
 lib/public/js/app.js  | 39 ++++++++++++++++++++---
 2 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/lib/public/index.html b/lib/public/index.html
index dcffca6..1e459fe 100644
--- a/lib/public/index.html
+++ b/lib/public/index.html
@@ -31,7 +31,78 @@
     </ul>
 
     <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>
 
     <script src="/js/app.js"></script>
diff --git a/lib/public/js/app.js b/lib/public/js/app.js
index b6b2c0b..9c7e2b1 100644
--- a/lib/public/js/app.js
+++ b/lib/public/js/app.js
@@ -7,6 +7,9 @@
   function $qs(qs, el) {
     return (el||document).querySelector(qs);
   }
+  function $qsa(qs, el) {
+    return (el||document).querySelectorAll(qs);
+  }
   function $on(selector, eventname, cb) {
     if (!$on._events[eventname]) {
       $on._events[eventname] = $on._dispatcher(eventname);
@@ -130,16 +133,42 @@
       return resp.json().then(function (data) {
         var tpl = '';
         var el;
-        if (!tpls.record) {
-          tpls.record = $qs('.js-record-tpl').innerHTML;
+        if (!tpls.recordsMap) {
+          //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) {
           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($qs('.js-record-name', el));
-          $qs('.js-record-type', el).innerText = record.type;
-          $qs('.js-record-name', el).innerText = record.name;
+          Object.keys(record).forEach(function (key) {
+            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);
           tpl += el.innerHTML;
           console.log(tpl);