From 73c09458d108a25b9ee69f12cda99b2c9402446e Mon Sep 17 00:00:00 2001
From: jusax23 <jusax23@gmail.com>
Date: Sat, 18 Mar 2023 13:40:54 +0100
Subject: [PATCH] better json in log html api

---
 src/html/log.ts | 109 ++++++++++++++++++++++++++++++++++++++++++++----
 src/sys/log.ts  |   2 +-
 2 files changed, 103 insertions(+), 8 deletions(-)

diff --git a/src/html/log.ts b/src/html/log.ts
index c590464..0f40f00 100644
--- a/src/html/log.ts
+++ b/src/html/log.ts
@@ -18,31 +18,49 @@ export default /*html*/ `
         }
 
         .date {
-            color: rgb(187, 187, 0)
+            color: rgb(187, 187, 0);
         }
 
         .log {
             font-weight: bold;
-            color: rgb(0, 187, 187)
+            color: rgb(0, 187, 187);
         }
 
         .warn {
             font-weight: bold;
-            color: rgb(0, 187, 187)
+            color: rgb(0, 187, 187);
         }
 
         .debug {
             font-weight: bold;
-            color: rgb(0, 187, 0)
+            color: rgb(0, 187, 0);
         }
 
         .error {
             font-weight: bold;
-            background-color: rgb(187, 0, 0)
+            background-color: rgb(187, 0, 0);
         }
 
         .errorText {
-            background-color: rgb(187, 0, 0)
+            background-color: rgb(187, 0, 0);
+        }
+
+        .string {
+            color: rgb(0, 187, 0);
+        }
+
+        .number {
+            color: rgb(187, 187, 0);
+        }
+
+        .boolean {
+            /*font-weight: bold;*/
+            color: rgb(187, 0, 187);
+        }
+
+        .object {
+            color: rgb(0, 0, 187);
+            font-weight: bold;
         }
     </style>
 </head>
@@ -54,6 +72,75 @@ export default /*html*/ `
 
         let loaded = [];
 
+        function parseJSON(json, depth = 0){
+            let elems = [];
+            function addSpaces(num, text = "") {
+                let space = document.createElement("span");
+                space.innerText = new Array(num).fill(" ").join("")+text;
+                elems.push(space);
+            }
+
+            function addBreak() {
+                elems.push(document.createElement("br"));
+            }
+
+            function addData(data){
+                if(typeof data == "object" && data != null){
+                    elems.push(...parseJSON(data, depth+2));
+                }else{
+                    let line = document.createElement("span");
+                    if(typeof data == "string") line.innerText = "'"+data+"'";
+                    else line.innerText = data == null ? "null" : data;
+                    line.className = typeof data;
+                    elems.push(line);
+                }                
+            }
+
+            if(Array.isArray(json)){
+                addSpaces(depth, "[");
+                
+                json.forEach((e,i) => {
+                    if(i == 0) addBreak();
+                    addSpaces(depth+2);
+
+                    addData(e);
+                    
+                    if(i+1 < json.length){
+                        let k = document.createElement("span");
+                        k.innerText = ",";
+                        elems.push(k);
+                    }
+
+                    addBreak();
+                });
+                addSpaces(depth, "]");
+            }else{
+                addSpaces(depth, "{");
+                let keys = Object.keys(json);
+                for(let i = 0; i < keys.length; i++){
+                    if(i == 0) addBreak();
+                    let key = keys[i];
+
+                    addSpaces(depth+2);
+                    let keyElem = document.createElement("span");
+                    keyElem.innerText = key + ": ";
+                    elems.push(keyElem);
+
+                    addData(json[key]);
+
+                    if(i+1 < json.length){
+                        let k = document.createElement("span");
+                        k.innerText = ",";
+                        elems.push(k);
+                    }
+
+                    addBreak();
+                }
+                addSpaces(depth, "}");
+            }
+            return elems;
+        }
+
         function parse([id, type, date, name, args ]){
             let dateSpan = document.createElement("span");
             dateSpan.className = "date";
@@ -67,7 +154,15 @@ export default /*html*/ `
 
             let argsSpan = document.createElement("span");
             if(type=="error") argsSpan.className = "errorText";
-            argsSpan.innerText = args.map(a => typeof a == 'object' ? JSON.stringify(a, null, 2) : a).join(" ");
+            args.forEach(a => {
+                if(typeof a != 'object' || a == null){
+                    argsSpan.appendChild(document.createTextNode(a));
+                }else{
+                    argsSpan.append(...parseJSON(a));
+                }
+                argsSpan.appendChild(document.createTextNode(" "));
+            });
+            //argsSpan.innerText = args.map(a => typeof a == 'object' ? parseJSON(a) : a).join(" ");
             pre.appendChild(argsSpan);
 
             pre.appendChild(document.createElement("br"));
diff --git a/src/sys/log.ts b/src/sys/log.ts
index a682758..2838410 100644
--- a/src/sys/log.ts
+++ b/src/sys/log.ts
@@ -19,7 +19,7 @@ export const debug = (name: string, ...args: any[]) => {
     if (global.provideLog != 0) logList.push([logID++, "debug", dateString, name, args]);
 };
 
-export const log = (name: string, ...args: string[]) => {
+export const log = (name: string, ...args: any[]) => {
     args = consorArgs(args);
     let dateString = (new Date()).toLocaleString();
     console.log(