diff --git a/lib/public/index.html b/lib/public/index.html
index 4705516..3b635ba 100644
--- a/lib/public/index.html
+++ b/lib/public/index.html
@@ -144,6 +144,7 @@
+
diff --git a/lib/public/js/app.js b/lib/public/js/app.js
index ba6a326..478578e 100644
--- a/lib/public/js/app.js
+++ b/lib/public/js/app.js
@@ -10,7 +10,7 @@
return (el||document).querySelector(qs);
}
function $qsa(qs, el) {
- return (el||document).querySelectorAll(qs);
+ return Array.prototype.slice.call((el||document).querySelectorAll(qs));
}
function $on(selector, eventname, cb) {
if (!$on._events[eventname]) {
@@ -127,6 +127,60 @@
});
});
}
+ function renderRecords() {
+ var tpl = '';
+ var el;
+ 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.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;
+ //tpls.recordsMap.typex = $qs('.js-record-typex').outerHTML;
+ }
+ console.log('tpls.recordsMap:');
+ console.log(tpls.recordsMap);
+ cache.records.forEach(function (record) {
+ el = document.createElement('div');
+ 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));
+ var xid = '';
+ Object.keys(record).sort().forEach(function (key) {
+ if ('id' === key) { return; }
+ var x = $qs('.js-record-' + key, el);
+ if (x) {
+ xid += record[key];
+ x.innerText = record[key];
+ }
+ });
+ record.id = record.id || xid;
+ el.dataset.recordId = record.id;
+ $qs('input.js-record-id', el).value = record.id;
+ cache.recordsMap[record.id] = record;
+
+ //$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);
+ });
+ $qs('.js-record-tpl').innerHTML = tpl;
+ console.log($qs('.js-record-tpl').innerHTML);
+ }
function fetchRecords(zone) {
return window.fetch('/api/zones/' + zone + '/records', {
method: 'GET'
@@ -134,58 +188,7 @@
}).then(function (resp) {
return resp.json().then(function (data) {
cache.records = data.records;
-
- var tpl = '';
- var el;
- 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.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;
- //tpls.recordsMap.typex = $qs('.js-record-typex').outerHTML;
- }
- console.log('tpls.recordsMap:');
- console.log(tpls.recordsMap);
- cache.records.forEach(function (record) {
- el = document.createElement('div');
- 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));
- var xid = '';
- Object.keys(record).forEach(function (key) {
- var x = $qs('.js-record-' + key, el);
- if (x) {
- xid += record[key];
- x.innerText = record[key];
- }
- });
- record.id = record.id || xid;
- el.dataset.recordId = record.id;
- $qs('input.js-record-id', el).value = record.id;
- cache.recordsMap[record.id] = record;
-
- //$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);
- });
- $qs('.js-record-tpl').innerHTML = tpl;
- console.log($qs('.js-record-tpl').innerHTML);
+ renderRecords();
});
});
}
@@ -249,7 +252,6 @@
var record = cache.recordsMap[id];
var formTpl = tpls.formsMap[record.type.toLowerCase()];
if (!formTpl) {
- record.typex = 'typex';
formTpl = tpls.formsMap.typex;
}
@@ -257,8 +259,8 @@
console.log(id);
console.log(record);
- formTpl = tpls.formsMap[record.typex || record.type.toLowerCase()];
- $qs('select.js-record-form-type').value = record.typex || record.type.toLowerCase();
+ formTpl = tpls.formsMap[(record.type||'typex').toLowerCase()];
+ $qs('select.js-record-form-type').value = (record.type||'typex').toLowerCase();
$qs('select.js-record-form-type').dispatchEvent(new Event('change', { bubbles: true }));
$qs('.js-record-form-tpl').innerHTML = formTpl || '';
@@ -278,6 +280,80 @@
$qs('.js-record-type', $qs('.js-record-form-tpl')).innerHTML = record.type;
});
+ $on('button.js-record-save', 'click', function (ev) {
+ console.log('save');
+ var $pel = ev.target.parentElement;
+ var id = $qs('.js-record-id', $pel).value;
+ var existingRecord = cache.recordsMap[id];
+ var record = existingRecord ? {} : { _new: true };
+ var change;
+
+ $qsa('input[class*="js-record-"]', $pel).forEach(function ($el) {
+ var key;
+ Array.prototype.some.call($el.classList, function (str) {
+ if (/^js-record-/.test(str)) {
+ key = str.replace(/^js-record-(.*)/, '$1');
+ return true;
+ }
+ });
+ if (!key) { return; }
+ if ('undefined' === typeof $el.value || 'INPUT' !== $el.tagName) { return; }
+ record[key] = $el.value;
+ });
+
+ if (record._new) {
+ var xid = '';
+ Object.keys(record).sort().forEach(function (key) {
+ if ('id' === key) { return; }
+ var x = $qs('.js-record-' + key, $pel);
+ if (x) {
+ xid += record[key];
+ x.innerText = record[key];
+ }
+ });
+ record.id = record.id || xid;
+ }
+
+ record.type = record.type || $qs('.js-record-type', $pel).innerHTML || $qs('.js-record-type', $pel).value;
+ console.log('record.type:', record.type);
+ /*
+ if (!tpls.recordsMap[record.type.toLowerCase()]) {
+ record.typex = 'typex';
+ }
+ */
+
+ if (!existingRecord) {
+ change = true;
+ cache.recordsMap[record.id] = record;
+ cache.records.push(record);
+ } else {
+ console.log('keys:', Object.keys(record));
+ Object.keys(record).forEach(function (key) {
+ console.log(key);
+ if (existingRecord[key].toString() !== record[key].toString()) {
+ change = true;
+ existingRecord[key] = record[key];
+ }
+ });
+ }
+
+ if (change) {
+ renderRecords();
+
+ return window.fetch(
+ '/api/records/' + record.id
+ , { method: 'POST'
+ , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
+ , body: JSON.stringify(record)
+ }
+ ).then(function (resp) {
+ return resp.json().then(function (data) {
+ console.log('result:', data);
+ });
+ });
+ }
+ });
+
$qs('select.js-record-form-type').value = '';
// Create a new 'change' event and dispatch it.
$qs('select.js-record-form-type').dispatchEvent(new Event('change', { bubbles: true }));