WIP save records

This commit is contained in:
AJ ONeal 2018-01-21 01:04:29 -07:00
parent 2aa57739ed
commit 8ecd7a8ebf
2 changed files with 142 additions and 57 deletions

View File

@ -144,6 +144,7 @@
<input type="text" class="js-record-retry">
<input type="text" class="js-record-refresh">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-a js-record-form-aaaa">
<input type="hidden" class="js-record-id" />
@ -151,6 +152,7 @@
<input type="text" class="js-record-host">.<span class="js-record-zone">example.com</span>
<input type="text" class="js-record-address">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-aname js-record-form-cname js-record-form-ns">
<input type="hidden" class="js-record-id" />
@ -158,6 +160,7 @@
<input type="text" class="js-record-host">.<span class="js-record-zone">example.com</span>
<input type="text" class="js-record-data">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-caa">
<input type="hidden" class="js-record-id" />
@ -166,6 +169,7 @@
<input type="text" class="js-record-flag">
<input type="text" class="js-record-value">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-mx">
<input type="hidden" class="js-record-id" />
@ -174,12 +178,14 @@
<input type="text" class="js-record-exchange">
<input type="text" class="js-record-priority">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-ptr">
<input type="hidden" class="js-record-id" />
<span class="js-record-type">PTR</span>
<input type="text" class="js-record-host">.<span class="js-record-zone">example.com</span>
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-srv">
<input type="hidden" class="js-record-id" />
@ -188,6 +194,7 @@
<input type="text" class="js-record-port">
<input type="text" class="js-record-priority">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-txt">
<input type="hidden" class="js-record-id" />
@ -195,14 +202,16 @@
<input type="text" class="js-record-host">.<span class="js-record-zone">example.com</span>
<input type="text" class="js-record-data">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
<form class="js-record-form-typex">
<input type="hidden" class="js-record-id" />
<label>typeX</label>
<input type="number" class="js-record-type" value="0x0000" />
<input type="number" class="js-record-type" value="0" />
<input type="text" class="js-record-host">.<span class="js-record-zone">example.com</span>
<input type="text" class="js-record-rr">
<input type="text" class="js-record-ttl">
<button type="button" class="js-record-save">save</button>
</form>
</div>

View File

@ -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,14 +127,7 @@
});
});
}
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) {
cache.records = data.records;
function renderRecords() {
var tpl = '';
var el;
if (!tpls.recordsMap) {
@ -164,7 +157,8 @@
console.log(el);
console.log($qs('.js-record-name', el));
var xid = '';
Object.keys(record).forEach(function (key) {
Object.keys(record).sort().forEach(function (key) {
if ('id' === key) { return; }
var x = $qs('.js-record-' + key, el);
if (x) {
xid += record[key];
@ -186,6 +180,15 @@
});
$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'
, headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
}).then(function (resp) {
return resp.json().then(function (data) {
cache.records = data.records;
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 }));