Implement client side enable, disable, edit

public/css/water.css

@@ -10,19 +10,15 @@ tbody tr:nth-child(2n+1) {
    background-color: #161f27;
 }
 
-#upserts {
+#upsert {
    width: 100%;
 }
 
-#upserts > textarea {
+#upsert > textarea {
    width: 100%;
    resize: vertical;
 }
 
-#upserts > input[name="id"] {
-   display: none;
-}
-
 #jobs > tbody > tr > td {
    padding: 0;
 }

public/index.html

@@ -8,8 +8,9 @@
       </h1>
       <details>
          <summary>Upsert Job</summary>
-         <form id="upserts" action="#" method="get" onsubmit="upserts(); return false;">
+         <form id="upsert" action="#" method="get" onsubmit="upsert(); return false;">
             <input type="text" name="id" placeholder="id"/>
+            <label><input type="checkbox" name="disabled"/> Disabled</label>
             <select name="language" required>
                <option value="bash" selected>bash</option>
             </select>

public/js/js.js

@@ -12,11 +12,11 @@ function http(method, remote, callback, body) {
    xmlhttp.send(body);
 }
 
-function upserts() {
+function upsert() {
    function cb(body, status) {
       console.log(status, body)
    }
-   http("POST", "/upserts", cb, jsonifyForm("upserts"))
+   http("POST", "/api/job/upsert", cb, jsonifyForm("upsert"))
 }
 
 function jsonifyForm(id) {
@@ -33,8 +33,6 @@ function init() {
       jobs.forEach(function(job) {
          var s = format(job)
          inject(s)
-         console.log("job=", job)
-         console.log("s=", s)
       })
    }
    function format(job) {
@@ -55,12 +53,12 @@ function init() {
       btns.forEach(function(e) {
          buttons += `
             <span>
-               <input type="button" onclick="${e.name}(this);" value="&#${e.icon};" alt="${e.name}" title="${e.name}"/>
+               <input type="button" onclick="job${e.name}(this);" value="&#${e.icon};" alt="${e.name}" title="${e.name}" job="${btoa(JSON.stringify(job))}"/>
             </span>
          `
       })
       return `<tr><td><details>
-         <summary name="${job.id}"}">
+         <summary name="${job.id}">
             <span>${job.title}</span>
             <span>${passing}</span>
             ${buttons}
@@ -87,7 +85,50 @@ function init() {
       var table = document.getElementById("jobs").getElementsByTagName("tbody")[0]
       table.innerHTML += s
    }
-   http("GET", "/list", cb, null)
+   http("GET", "/api/job/list", cb, null)
 }
 
 init()
+
+function jobdisable(input) {
+   jobmodify(input)
+   getField("disabled").checked = true
+}
+
+function jobenable(input) {
+   jobmodify(input)
+   getField("disabled").checked = false
+}
+
+function jobmodify(input) {
+   var form = getForm()
+   var job = jobFromInput(input)
+   var fields = ["id", "language", "cron", "script", "disabled"]
+   fields.forEach(function(field) {
+      var e = getField(field)
+      e.checked = job[field]
+      e.value = job[field]
+   })
+   var details = form.parentElement
+   details.setAttribute("open", "")
+}
+
+function jobdelete(input) {
+   http("DELETE", "/api/job/delete", cb, null)
+}
+
+function jobFromInput(input) {
+   var b64 = input.getAttribute("job")
+   var json = atob(b64)
+   return JSON.parse(json)
+}
+
+function getForm() {
+   return document.getElementById("upsert")
+}
+
+function getField(name) {
+   var form = getForm()
+   var matches = form.elements[name]
+   return matches
+}