WIP save records

lib/public/index.html

@@ -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>
 

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;
-
+        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).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);
       });
     });
   }
@@ -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()];
+    formTpl = tpls.formsMap[(record.type||'typex').toLowerCase()];
-    $qs('select.js-record-form-type').value = record.typex || record.type.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 }));