WIP explore records

lib/public/index.html

@@ -21,8 +21,17 @@
       <input class="js-name"
         type="text" placeholder="example.com"/></p>
 
-    <ul class="js-zones">
+    <h3>Peers:</h3>
-      <li class="js-zone">blah</li>
+    <ul class="js-peer-tpl">
+      <li class="js-peer-name">peer-name</li>
+    </ul>
+
+    <ul class="js-zone-tpl">
+      <li><button type="button" class="js-zone-name">zone-name</button></li>
+    </ul>
+
+    <ul class="js-record-tpl">
+      <li><span class="js-record-type">record-type</span> <span class="js-record-name">record-name</span></li>
     </ul>
 
     <script src="/js/app.js"></script>

lib/public/js/app.js

@@ -4,8 +4,8 @@
   if (!Element.prototype.matches) {
     Element.prototype.matches = Element.prototype.msMatchesSelector;
   }
-  function $qs(qs) {
+  function $qs(qs, el) {
-    return document.querySelector(qs);
+    return (el||document).querySelector(qs);
   }
   function $on(selector, eventname, cb) {
     if (!$on._events[eventname]) {
@@ -35,21 +35,13 @@
           return true;
         }
       });
-      if (!matches) {
+      if (matches) {
         console.warn("no handlers for selector");
       }
     };
   };
-  $on('body', 'click', function () {
-    console.log('woo-hoo, that tickles my body!');
-  });
 
-  var auth = localStorage.getItem('auth');
+  function verifyAuth(/*ev*/) {
-
-  $qs('input.js-jwt').value = auth || '';
-
-
-  $on('button.js-jwt', 'click', function (/*ev*/) {
     auth = $qs('input.js-jwt').value;
     return window.fetch(
       '/api/verify-auth'
@@ -59,18 +51,119 @@
     ).then(function (resp) {
       return resp.json().then(function (data) {
         if (data.error) {
+          localStorage.removeItem('auth');
           console.error(data.error);
           window.alert('Bad HTTP Response: ' + data.error.message);
           throw new Error('Bad HTTP Response: ' + data.error.message);
         }
 
+        console.log('verify-auth:');
         console.log(data);
 
         localStorage.setItem('auth', auth);
+
+        return fetchPeers(auth).then(function () {
+          return fetchZones(auth);
+        });
       });
     });
+  }
+  function fetchPeers(auth) {
+    return window.fetch('/api/peers', {
+      method: 'GET'
+    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
+    }).then(function (resp) {
+      return resp.json().then(function (data) {
+        var tpl = '';
+        var el;
+        if (!tpls.peer) {
+          tpls.peer = $qs('.js-peer-tpl').innerHTML;
+        }
+        data.peers.forEach(function (peer) {
+          el = document.createElement('div');
+          el.innerHTML = tpls.peer;
+          console.log(el);
+          console.log($qs('.js-peer-name', el));
+          $qs('.js-peer-name', el).innerText = peer.name;
+          $qs('.js-peer-name', el).dataset.id = peer.name;
+          console.log(el.innerHTML);
+          tpl += el.innerHTML;
+          console.log(tpl);
+        });
+        $qs('.js-peer-tpl').innerHTML = tpl;
+        console.log($qs('.js-peer-tpl').innerHTML);
+      });
+    });
+  }
+  function fetchZones(auth) {
+    return window.fetch('/api/zones', {
+      method: 'GET'
+    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
+    }).then(function (resp) {
+      return resp.json().then(function (data) {
+        var tpl = '';
+        var el;
+        if (!tpls.zone) {
+          tpls.zone = $qs('.js-zone-tpl').innerHTML;
+        }
+        data.zones.forEach(function (zone) {
+          el = document.createElement('div');
+          el.innerHTML = tpls.zone;
+          console.log(el);
+          console.log($qs('.js-zone-name', el));
+          $qs('.js-zone-name', el).innerText = zone.id;
+          $qs('.js-zone-name', el).dataset.id = zone.id;
+          console.log(el.innerHTML);
+          tpl += el.innerHTML;
+          console.log(tpl);
+        });
+        $qs('.js-zone-tpl').innerHTML = tpl;
+        console.log($qs('.js-zone-tpl').innerHTML);
+      });
+    });
+  }
+  function fetchRecords(zone) {
+    return window.fetch('/api/zones/' + zone + '/records', {
+      method: 'GET'
+    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
+    }).then(function (resp) {
+      return resp.json().then(function (data) {
+        var tpl = '';
+        var el;
+        if (!tpls.record) {
+          tpls.record = $qs('.js-record-tpl').innerHTML;
+        }
+        data.records.forEach(function (record) {
+          el = document.createElement('div');
+          el.innerHTML = tpls.record;
+          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;
+          console.log(el.innerHTML);
+          tpl += el.innerHTML;
+          console.log(tpl);
+        });
+        $qs('.js-record-tpl').innerHTML = tpl;
+        console.log($qs('.js-record-tpl').innerHTML);
+      });
+    });
+  }
+
+  // BEGIN
+  var tpls = {};
+  var auth = localStorage.getItem('auth');
+  if (auth) {
+    $qs('input.js-jwt').value = auth;
+    verifyAuth();
+  }
+
+  $on('body', 'click', function () {
+    console.log('woo-hoo, that tickles my body!');
   });
 
+  $on('button.js-jwt', 'click', verifyAuth);
+
   $on('input.js-zone', 'keyup', function (ev) {
     $qs('code.js-zone').innerHTML = ev.target.value || ':zone';
     // $qs('a.js-zone').setAttribute('data-href', ...)
@@ -84,4 +177,10 @@
       $qs('a.js-name').dataset.href.replace(/:name/, ev.target.value || ':name');
   });
 
+  $on('button.js-zone-name', 'click', function (ev) {
+    var zone = ev.target.dataset.id;
+    return fetchRecords(zone);/*.then(function () {
+    });*/
+  });
+
 }());