WIP explore records
This commit is contained in:
		
							parent
							
								
									72e920c1dd
								
							
						
					
					
						commit
						8d329b93b2
					
				@ -21,8 +21,17 @@
 | 
			
		||||
      <input class="js-name"
 | 
			
		||||
        type="text" placeholder="example.com"/></p>
 | 
			
		||||
 | 
			
		||||
    <ul class="js-zones">
 | 
			
		||||
      <li class="js-zone">blah</li>
 | 
			
		||||
    <h3>Peers:</h3>
 | 
			
		||||
    <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>
 | 
			
		||||
 | 
			
		||||
@ -4,8 +4,8 @@
 | 
			
		||||
  if (!Element.prototype.matches) {
 | 
			
		||||
    Element.prototype.matches = Element.prototype.msMatchesSelector;
 | 
			
		||||
  }
 | 
			
		||||
  function $qs(qs) {
 | 
			
		||||
    return document.querySelector(qs);
 | 
			
		||||
  function $qs(qs, el) {
 | 
			
		||||
    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');
 | 
			
		||||
 | 
			
		||||
  $qs('input.js-jwt').value = auth || '';
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  $on('button.js-jwt', 'click', function (/*ev*/) {
 | 
			
		||||
  function verifyAuth(/*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 () {
 | 
			
		||||
    });*/
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
}());
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user