WIP save records
This commit is contained in:
AJ ONeal
parent
2aa57739ed
commit
8ecd7a8ebf
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }));
|
||||
|
|
|
|||
Loading…
Reference in New Issue