feat(misc): attach debugger for further debug

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html

@@ -5,6 +5,45 @@
   <button class="btn w-1/2" (click)="addRow()">Add</button>
   <button class="btn w-1/2" (click)="removeRow()">Remove</button>
 </div>
+<details class="hidden">
+  <summary>Console</summary>
+  <div class="m-2 p-2 !rounded-md bg-gray-400">
+    <!-- other -->
+    <div class="p-2 bg-gray-200 space-x-2" id="command">
+      <div class="flex flex-row p-2 space-x-2">
+        <input type="checkbox" id="command-enable" />
+        <p>Command</p>
+      </div>
+
+      <!-- <input class="w-56" type="text"> -->
+      <div class="flex flex-row">
+        <div class="mockup-code">
+          <code class="">
+            <textarea
+              class="p-2 resize-none bg-black text-white text-sm textarea-xs"
+              id="command-code"
+              cols="100"
+              rows="10"
+            >
+//"!tb help" for more info.</textarea
+            >
+            <div class="divider divider-vertical"></div>
+            <textarea
+              class="p-2 bg-black text-green-600 text-sm textarea-xs resize-none"
+              id="command-output"
+              cols="100"
+              rows="10"
+              disabled
+            ></textarea>
+          </code>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end">
+      <button class="m-2 btn btn-warning right-2" (click)="eval()">OK</button>
+    </div>
+  </div>
+</details>
 <table class="table" [formGroup]="recipeListForm">
   <thead>
     <tr class="bg-gray-200">

client/src/app/shared/helpers/debugger.ts

@@ -35,6 +35,28 @@ export class Debugger {
     "!tb get::<name> - get value of variable in angular",
     "!tb fn::<name> <...args> - execute the function with args",
   ];
+
+  exposeVarsToJs = (var_map: any) => {
+    let varMap = var_map as any;
+
+    Object.keys(varMap).forEach((key: string) => {
+      let value = "";
+      try {
+        value = JSON.stringify(varMap[key] as any);
+      } catch(e) {
+        this.output.push(e);
+        return;
+      }
+      console.log("exporting", value);
+      if(value != ""){
+        let evalCmd = "window."+key+" = "+value+";";
+        let evalResult = eval(evalCmd);
+        //
+        // this.output.push(evalResult);
+      }
+    });
+  }
+
   // evaluate
   eval(comp: any) {
     let enableCommand = document.getElementById('command-enable') as any;
@@ -52,6 +74,8 @@ export class Debugger {
           declPrefixFlag = true;
         } else if(line == "tbs;"){
           declPrefixFlag = false;
+          // export all stored
+          this.exposeVarsToJs(holdon);
         }
 
         // this.output.push(line);
@@ -91,32 +115,69 @@ export class Debugger {
 
               if(cmd.startsWith("fn::")){
                 let execFn = cmd.substring(4);
+                if(cmd.includes("!tb")){
+                  execFn = cmd;
+                }
 
                 // get some args
                 let args = execFn.split(' ');
                 execFn = args[0];
-                if(args[1].includes("Var::") || args[1].includes("var::")){
+                if(args.length > 1){
-                  args[1] = holdon[args[1].split("::")[1]]
+                  if(args[1].includes("Var::") || args[1].includes("var::")){
-                }
+                    args[1] = holdon[args[1].split("::")[1]]
-                if(args[1].includes(',')){
+                  }
-                  args = args[1].split(',');
+                  if(args[1].includes(',')){
-                } else {
+                    args = args[1].split(',');
-                  args = [args[1]];
+                  } else {
+                    args = [args[1]];
+                  }
                 }
                 console.log("args>", args);
 
                 // try exec class function
                 try{
-
+                  if(args.length > 1){
-                  let res = (comp as any)[execFn].apply("", args);
+                    let res = (comp as any)[execFn].apply("", args);
-                  console.log("res>",res);
+                    console.log("res>",res);
-                  this.output.push(res);
+                    this.output.push(res);
+                  } else {
+                    let res = (comp as any)[execFn];
+                    console.log("res>",res);
+                    this.output.push(res);
+                  }
                 } catch (e) {
                   this.output.push(e);
                 }
               } else if(cmd.startsWith("get::")){
                 let getter = cmd.substring(5);
-                this.output.push(JSON.stringify(comp[getter]));
+
+                if(cmd.includes("->")){
+                  let arrowSpl = cmd.split("->");
+                  getter = arrowSpl[0].trim().substring(5);
+                  console.log(arrowSpl);
+                  try {
+                    let test_val = JSON.stringify(comp[getter]);
+                  } catch(e){
+                    this.output.push(e);
+                    this.output.push("\nSee console log for actual value");
+                    console.log(comp[getter]);
+                  }
+
+                  let assignTo = arrowSpl[1].trim();
+                  holdon[assignTo] = comp[getter];
+                  console.log("getter",getter,"assign",comp[getter],"to",assignTo);
+
+                } else {
+                  try {
+                    this.output.push(JSON.stringify(comp[getter]));
+                  } catch(e){
+                    this.output.push(e);
+                    this.output.push("\nSee console log for actual value");
+                    console.log(comp[getter]);
+                  }
+                }
+
+
               } else if(cmd.startsWith("var::")){
                 let varname = cmd.substring(5);
                 this.output.push(JSON.stringify(holdon[varname]));
@@ -125,6 +186,12 @@ export class Debugger {
               break;
           }
 
+          if(line.startsWith("!tb")){
+            let varMap = holdon as Map<string, any>;
+            if(varMap.size > 0){
+              this.exposeVarsToJs(holdon);
+            }
+          }
         } else if (!line.startsWith("//") && line != ""){
 
           if(!line.startsWith("window") && !line.startsWith("let") && !line.startsWith("var")){