feat(candid): better UI for composite types

src/userlib/js/bootstrap/candid/candid.js

@@ -1,18 +1,16 @@
+import * as UI from './idl-ui';
 
 export function render(id, actor, canister) {
   document.getElementById('title').innerText = `Service ${id}`;
-  for (let [name, func] of Object.entries(actor._fields)) {
+  for (const [name, func] of Object.entries(actor._fields)) {
     renderMethod(name, func, canister[name]);
   }
   const console = document.createElement("div");
   console.className = 'console';
-  document.body.appendChild(console);  
+  document.body.appendChild(console);
 }
 
 function renderMethod(name, idl_func, f) {
-  const status = document.createElement("div");
-  status.className = 'status';
-
   const item = document.createElement("li");
 
   const sig = document.createElement("div");
@@ -28,39 +26,14 @@ function renderMethod(name, idl_func, f) {
     button.innerText = 'Call';
   }
 
-  const arg_length = idl_func.argTypes.length;
-  for (var i = 0; i < arg_length; i++) {
-    const t = idl_func.argTypes[i];
-    const arg = document.createElement("input");
-    arg.className = 'argument';
-    arg.id = `${name}_arg${i}`;
-    item.appendChild(arg);
-
-    arg.addEventListener("focus", function () {
-      arg.className = 'argument';
-    });
-    arg.addEventListener("blur", function() {
-      try {
-        if (arg.value === '') {
-          return;
-        }
-        const value = JSON.parse(arg.value);
-        if (!t.covariant(value)) {
-          throw new Error(`${arg.value} is not of type ${t.display()}`);
-        }
-        status.style.display = 'none';
-        button.disabled = false;
-      } catch(err) {
-        arg.className += ' reject';        
-        status.style.display = 'block';
-        button.disabled = true;        
-        status.innerHTML = 'ParseError: ' + err.message;
-      };
-    });
-  }
+  const inputs = [];
+  idl_func.argTypes.forEach((arg, i) => {
+    const inputbox = UI.renderInput(arg);
+    inputs.push(inputbox);
+    inputbox.render(item);
+  });
 
   item.appendChild(button);
-  item.appendChild(status);
 
   const result = document.createElement("div");
   result.className = 'result';
@@ -69,23 +42,24 @@ function renderMethod(name, idl_func, f) {
   const right = document.createElement("span");
   right.className = 'right';
   result.appendChild(left);
-  result.appendChild(right);  
+  result.appendChild(right);
   item.appendChild(result);
 
   const list = document.getElementById("methods");
   list.append(item);
 
   button.addEventListener("click", function() {
+    const args = inputs.map(arg => arg.parse());
+    const isReject = inputs.some(arg => arg.isRejected());
+    if (isReject) {
+      return;
+    }
+
     left.className = 'left';
     left.innerText = 'Waiting...';
     right.innerText = ''
     result.style.display = 'block';
     (async function () {
-      var args = [];
-      for (var i = 0; i < arg_length; i++) {
-        const arg = document.getElementById(`${name}_arg${i}`).value;
-        args.push(JSON.parse(arg));
-      }
       const t_before = Date.now();
       const result = await f.apply(null, args);
       const duration = (Date.now() - t_before)/1000;
@@ -103,7 +77,7 @@ function renderMethod(name, idl_func, f) {
       log(show_result);
     })().catch(err => {
       left.className += ' error';
-      left.innerText = err.name + ': ' + err.message;
+      left.innerText = err.stack;
     });
   });
 };