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,14 +127,7 @@
       });
     });
   }
-  function fetchRecords(zone) {
+  function renderRecords() {
-    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;
-
     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()];
+    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 }));