WIP create new zone

lib/public/index.html

@@ -58,10 +58,11 @@
         <input type="text" class="js-record-refresh" placeholder="[retry] 7200 (how often to check for updates)">
         <input type="text" class="js-record-ttl" placeholder="[default record ttl] 86400">
       </form>
+      <span class="js-record-type">Vanity Nameservers:</span>
+      <label><input type="checkbox" class="js-zone-form-vanityns" value=""> use vanity nameservers (requires glue records to be set at your domain reseller/registrar)</label>
       <div class="js-zone-form-vns-tpl">
         <form class="js-zone-form-vns">
           <input type="hidden" class="js-record-id" />
-          <span class="js-record-type">Vanity Nameservers</span>
           <input type="text" class="js-record-host" placeholder="nsx">.<span class="js-record-zone">example.com</span>
           <input type="text" class="js-record-address" placeholder="aname, ipv4, or ipv6 address">
           <input type="text" class="js-record-ttl" placeholder="86400">

lib/public/js/app.js

@@ -105,31 +105,35 @@
       });
     });
   }
+  function renderZones() {
+    var tpl = '';
+    var el;
+    cache.zones.forEach(function (zone) {
+      el = document.createElement('div');
+      el.innerHTML = tpls.zone;
+      console.log(el);
+      console.log($qs('.js-zone', el));
+      $qs('.js-zone-name', el).innerText = zone.name;
+      $qs('.js-zone', el).dataset.id = zone.id;
+      $qs('.js-zone', el).dataset.name = zone.name;
+      console.log(el.innerHTML);
+      tpl += el.innerHTML;
+      console.log(tpl);
+    });
+    $qs('.js-zone-tpl').innerHTML = tpl;
+    console.log($qs('.js-zone-tpl').innerHTML);
+  }
   function fetchZones(auth) {
     return window.fetch('/api/zones', {
       method: 'GET'
     , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
     }).then(function (resp) {
       return resp.json().then(function (data) {
-        var tpl = '';
-        var el;
         if (!tpls.zone) {
           tpls.zone = $qs('.js-zone-tpl').innerHTML;
         }
-        data.zones.forEach(function (zone) {
+        cache.zones = data.zones;
-          el = document.createElement('div');
+        renderZones();
-          el.innerHTML = tpls.zone;
-          console.log(el);
-          console.log($qs('.js-zone', el));
-          $qs('.js-zone-name', el).innerText = zone.name;
-          $qs('.js-zone', el).dataset.id = zone.id;
-          $qs('.js-zone', el).dataset.name = zone.name;
-          console.log(el.innerHTML);
-          tpl += el.innerHTML;
-          console.log(tpl);
-        });
-        $qs('.js-zone-tpl').innerHTML = tpl;
-        console.log($qs('.js-zone-tpl').innerHTML);
       });
     });
   }
@@ -228,6 +232,16 @@
     return fetchRecords(zone);/*.then(function () {
     });*/
   });
+  function setZoneNs(zone) {
+    cache.peers.forEach(function (p, i) {
+      var $vns = $qsa('.js-zone-form-tpl .js-zone-form-vns')[i];
+      $qs('.js-record-zone', $vns).innerText = zone;
+      if (p.address) {
+        $qs('.js-record-address', $vns).value = p.address;
+      }
+    });
+    $qs('.js-zone-form-tpl .js-recordx-primary').value = 'nsx.' + zone;
+  }
   function openZoneForm() {
     var d = new Date();
     myZone = $qs('.js-zone-form-name').value;
@@ -240,12 +254,14 @@
       var $vns = $qsa('.js-zone-form-tpl .js-zone-form-vns')[i];
       $qs('.js-record-host', $vns).value = 'ns' + (i + 1);
       //$qs('.js-record-name', $vns).value = 'ns' + (i + 1) + '.' + myZone;
-      $qs('.js-record-zone', $vns).value = myZone;
+      $qs('.js-record-zone', $vns).innerText = myZone;
+      if (p.address) {
+        $qs('.js-record-address', $vns).value = p.address;
+      }
       $qs('.js-record-ttl', $vns).value = 7200;
     });
 
     $qs('.js-zone-form-tpl .js-record-name').value = myZone;
-    $qs('.js-zone-form-tpl .js-recordx-primary').value = 'nsx.' + myZone;
     $qs('.js-zone-form-tpl .js-record-admin').value = 'admin.' + myZone;
     $qs('.js-zone-form-tpl .js-record-expiration').value = 2419200; // 4 weeks
     $qs('.js-zone-form-tpl .js-record-minimum').value = 5;
@@ -257,10 +273,21 @@
     $qs('.js-zone-form-tpl .js-record-retry').value = 1800;
     $qs('.js-zone-form-tpl .js-record-refresh').value = 7200;
     $qs('.js-zone-form-tpl .js-record-ttl').value = 300;
+
+    $qs('input.js-zone-form-vanityns').dispatchEvent(new Event('change', { bubbles: true }));
+
     console.log('val:', $qs('.js-zone-form-tpl .js-record-ttl').value);
     console.log('x', $qs('.js-zone-form-tpl'));
     console.log('val:', $qs('.js-zone-form-tpl .js-record-ttl').value);
   }
+  $on('input.js-zone-form-vanityns', 'change', function (ev) {
+    console.log('checked:', ev.target.checked);
+    if (ev.target.checked) {
+      setZoneNs(myZone);
+    } else {
+      setZoneNs(cache.peers[0].name.split('.').slice(1).join('.'));
+    }
+  });
   $on('form.js-zone-form-create', 'submit', function (ev) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -295,7 +322,35 @@
     console.log(zone);
     console.log('nss:');
     console.log(nss);
+
+    if (!$qs('input.js-zone-form-vanityns').checked) {
+      zone.vanityNs = nss;
+    }
     $qs('.js-zone-form-tpl').innerHTML = '';
+
+    return window.fetch(
+      '/api/zones/' //+ zone.name
+    , { method: 'POST'
+      , headers: new window.Headers({
+          'Authorization': 'Bearer ' + auth
+        , 'Content-Type': 'application/json;charset=UTF-8'
+        })
+      , body: JSON.stringify(zone)
+      }
+    ).then(function (resp) {
+      return resp.json().then(function (data) {
+        if (data.error) {
+          console.error(data);
+          window.alert(data.error.message);
+          return;
+        }
+        console.log('result:', data);
+        if (!zone.id) {
+          zone.id = data.id;
+          renderRecords();
+        }
+      });
+    });
   });
 
   $on('select.js-record-form-type', 'change', function (ev) {