Live conversion and conversion to cbor

server.js

@@ -8,11 +8,18 @@ const tmp = require("tmp-file");
 const TIMEOUT = 1000 * 10; // in ms
 const PORT = 3000;
 
+function toHexString(byteArray) {
+  return Array.from(byteArray, function(byte) {
+    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+  }).join('')
+}
+
+
 const app = express();
 app.use(express.json());
 app.use("/", express.static(path.join(__dirname, "static")));
 
-app.post("/api/convert", (req, res) => {
+app.post("/api/toJSON", (req, res) => {
   cbor.decodeFirst(req.body.hex, (error, result) => {
     if (error) {
       res.statusMessage = `${error}`;
@@ -23,6 +30,18 @@ app.post("/api/convert", (req, res) => {
   });
 });
 
+app.post("/api/toCBOR", (req, res, next) => {
+  try {
+    const data = JSON.parse(req.body.json);
+    let encoded = cbor.encode(data);
+    let result = toHexString(encoded);
+    res.json({ result })
+  } catch(error) {
+    res.statusMessage = `${error}`;
+    res.status(400).end();
+  }
+});
+
 app.post("/api/validate", async (req, res) => {
   const { hex, cddl } = req.body;
 

static/app.js

@@ -22,8 +22,8 @@ const load = () => {
 
 const elements = [
   "input-cddl",
-  "input-hex",
-  "output-json",
+  "value-hex",
+  "value-json",
   "output-validation",
   "run-convert",
   "run-validate",
@@ -43,62 +43,87 @@ const request = async (path, data) => {
     })
     .then((result) => {
       if (result.status !== 200) {
-        throw Error(`${result.status} "${result.statusText}"`);
+        throw Error(result.statusText);
       }
       return result.json();
     })
     .catch((error) => {
-      window.alert(`Something went wrong! ${error}`);
       return Promise.reject(error);
     });
 };
 
-const convert = async (hex) => {
-  elements["output-json"].value = "";
+const toJSON = debounce(async (hex) => {
+  elements["value-json"].value = "";
 
-  return request(["api", "convert"], { hex })
+  return request(["api", "toJSON"], { hex })
     .then(({ result }) => {
-      elements["output-json"].value = JSON.stringify(result, null, 2);
+      elements["value-json"].value = JSON.stringify(result, null, 2);
     })
-    .catch(() => {
-      // Do nothing
+    .catch((error) => {
+      elements["value-json"].value = `Something went wrong! ${error}`;
     });
-};
+});
+
+const toCBOR = debounce(async (json) => {
+  elements["value-hex"].value = "";
+
+  return request(["api", "toCBOR"], { json })
+    .then(({ result }) => {
+      elements["value-hex"].value = result;
+    })
+    .catch((error) => {
+      elements["value-hex"].value = `Something went wrong!\n\n${error.message}`;
+    });
+});
 
-const validate = async (hex, cddl) => {
+const validate = debounce(async (hex, cddl) => {
   elements["output-validation"].value = "";
 
   return request(["api", "validate"], { hex, cddl })
     .then(({ result }) => {
       elements["output-validation"].value = result;
     })
-    .catch(() => {
-      // Do nothing
+    .catch((error) => {
+      elements["output-validation"].value = `Something went wrong! ${error}`;
     });
-};
+});
 
-elements["run-convert"].addEventListener("click", async () => {
-  const hex = elements["input-hex"].value;
+elements["value-hex"].addEventListener("keyup", () => {
+  const hex = elements["value-hex"].value;
 
   if (!hex) {
-    window.alert("CBOR (HEX) input is empty.");
+    elements["value-json"].value = ""
     return;
   }
 
-  await convert(hex);
-});
+  elements["value-json"].value = "Testing CBOR ..."
+  toJSON(hex);
+})
+
+elements["value-json"].addEventListener("keyup", () => {
+  const json = elements["value-json"].value;
 
-elements["run-validate"].addEventListener("click", async () => {
-  const hex = elements["input-hex"].value;
+  if (!json) {
+    elements["value-hex"].value = ""
+    return;
+  }
+
+  elements["value-hex"].value = "Testing JSON ..."
+  toCBOR(json);
+})
+
+elements["input-cddl"].addEventListener("keyup", async () => {
+  const hex = elements["value-hex"].value;
   const cddl = elements["input-cddl"].value;
 
   if (!hex || !cddl) {
-    window.alert("CBOR (HEX) or CDDL input is empty.");
+    elements["output-validation"].value = "CBOR (HEX) or CDDL input is empty.";
     return;
   }
 
-  await validate(hex, cddl);
-});
+  elements["output-validation"].value = "Validating ..."
+  validate(hex, cddl);
+})
 
 elements["input-cddl"].addEventListener("input", store);
 

static/index.html

@@ -12,20 +12,16 @@
     <div class="container">
       <header class="header">
         <h1 class="title">CBOR & CDDL Tool</h1>
-        <div class="buttons">
-          <button id="run-convert">☛ HEX TO JSON</button>
-          <button id="run-validate">☛ VALIDATE</button>
-        </div>
       </header>
       <main class="main">
         <div class="main-top box">
-          <label for="input-hex">☀ [IN] CBOR (HEX)</label>
-          <textarea class="input-hex" id="input-hex"></textarea>
+          <label for="value-hex">☀ [IN] CBOR (HEX)</label>
+          <textarea class="value-hex" id="value-hex"></textarea>
         </div>
         <div class="main-inner">
           <div class="main-left box">
-            <label for="output-json">☀ [OUT] JSON</label>
-            <textarea class="output-json" id="output-json" readonly></textarea>
+            <label for="value-json">☀ [OUT] JSON</label>
+            <textarea class="value-json" id="value-json"></textarea>
           </div>
           <div class="main-right box">
             <label for="input-cddl">☀ [IN] CDDL</label>

static/styles.css

@@ -24,14 +24,6 @@ label {
   padding: 5px;
 }
 
-button {
-  border: 0;
-  outline: 0;
-  background-color: #999;
-  cursor: pointer;
-  padding: 5px;
-}
-
 .title {
   font-size: 20px;
 }