From 8ecd7a8ebfa0d67867b2a84a63f26ae0d74ac559 Mon Sep 17 00:00:00 2001 From: AJ ONeal Date: Sun, 21 Jan 2018 01:04:29 -0700 Subject: [PATCH] WIP save records --- lib/public/index.html | 11 ++- lib/public/js/app.js | 188 +++++++++++++++++++++++++++++------------- 2 files changed, 142 insertions(+), 57 deletions(-) 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 @@ +
@@ -151,6 +152,7 @@ .example.com +
@@ -158,6 +160,7 @@ .example.com +
@@ -166,6 +169,7 @@ +
@@ -174,12 +178,14 @@ +
PTR .example.com +
@@ -188,6 +194,7 @@ +
@@ -195,14 +202,16 @@ .example.com +
- + .example.com +
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 }));