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…
Reference in New Issue