function http(method, remote, callback, body) {
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
         callback(xmlhttp.responseText, xmlhttp.status)
      }
   };
   xmlhttp.open(method, remote, true);
   if (typeof body == "undefined") {
      body = null
   }
   xmlhttp.send(body);
}

function upserts() {
   function cb(body, status) {
      console.log(status, body)
   }
   http("POST", "/upserts", cb, jsonifyForm("upserts"))
}

function jsonifyForm(id) {
   var form = document.getElementById(id)
   var entries = new FormData(form).entries();
   var json = Object.assign(...Array.from(entries, ([x,y]) => ({[x]:y})));
   var s = JSON.stringify(json)
   return s
}

function init() {
   function cb(body, status) {
      var jobs = JSON.parse(body)
      jobs.forEach(function(job) {
         var s = format(job)
         inject(s)
         console.log("job=", job)
         console.log("s=", s)
      })
   }
   function format(job) {
      var pause = "&#9208"
      var passing = "9711"
      if (job.last.status != 0) {
         passing = "129314"
         passing = "129324"
      }
      passing = `&#${passing};`
      var buttons = ""
      var btns = [
         {"name":"disable", "icon":"11035"}, 
         {"name":"enable", "icon":"9654"}, 
         {"name":"modify", "icon":"9999"}, 
         {"name":"delete", "icon":"10006"}
      ]
      btns.forEach(function(e) {
         buttons += `
            <span>
               <input type="button" onclick="${e.name}(this);" value="&#${e.icon};" alt="${e.name}" title="${e.name}"/>
            </span>
         `
      })
      return `<tr><td><details>
         <summary name="${job.id}"}">
            <span>${job.title}</span>
            <span>${passing}</span>
            ${buttons}
         </summary>
         <table>
            <tr><td>
               <code>${job.cron}</code>
               <code>${job.language}</code>
            </td></tr>
            <tr><td>
               <code>${job.last.run}</code>
               <code>${job.last.runtime}</code>
            </td></tr>
            <tr><td>
               <code>${job.script}</code>
            </td></tr>
            <tr><td>
               <code>${job.last.output}</code>
            </td></tr>
         </table>
      </details></td></tr>`
   }
   function inject(s) {
      var table = document.getElementById("jobs").getElementsByTagName("tbody")[0]
      table.innerHTML += s
   }
   http("GET", "/list", cb, null)
}

init()