chaos state of arctree, for the record!

EOCOnline · Sep 29, 2024 · 5eb3356 · 5eb3356
1 parent 8b0216e
commit 5eb3356
Show file tree

Hide file tree

Showing 6 changed files with 336 additions and 99 deletions.
diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.css b/themes/eoconline/layouts/OrgChart/arc-tree.css
@@ -3,6 +3,11 @@ body {
   font-family: sans-serif;
 }
 
+.arrayOrObject {
+  /*font-weight: bold;*/
+  color: #0000ff;
+}
+
 /* Tree Options */
 #TreeOptions {
   margin: 15px 0;

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.html b/themes/eoconline/layouts/OrgChart/arc-tree.html
@@ -36,13 +36,15 @@
       </div>
     </div>
 
-    <label
-      >Select a JSON file to view:
+    <label>
+      Select a JSON file to view:
       <input type="file" onChange="fileChange(this.files[0])" />
     </label>
 
     <ul id="JSONunorderedList"></ul>
 
+    <ul id="unorderedList" class="tree"></ul>
+
     <ul class="tree">
       <li>
         <input type="checkbox" id="c1" />

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.js b/themes/eoconline/layouts/OrgChart/arc-tree.js
@@ -1,5 +1,6 @@
 let fontSize = document.querySelector(".tree").style.fontSize;
 setFontSize(fontSize);
+let uniqueID = 0;
 
 document.querySelector("#fontSize").addEventListener("input", (e) => { setFontSize(e.target); });
 document.querySelector("#fontSize").addEventListener('keyup', (event) => {
@@ -46,23 +47,108 @@ function collapseTree() {
 
 // {{ now.UnixNano }} to create a unique ID
 
+function makeList(jsonObject, listElement) {
 
+  traverse(jsonObject);
+
+}
+
+function traverse2(o) {
+  for (var i in o) {
+    if (!!o[i] && typeof (o[i]) == "object") {
+      console.log(i, o[i]);
+      traverse(o[i]);
+    } else {
+      console.log(i, o[i]);
+    }
+  }
+}
+
+
+function traverse(jsonObj) {
+  if (jsonObj !== null && typeof jsonObj == "object") {
+    Object.entries(jsonObj).forEach(([key, value]) => {
+      // key is either an array index or object key
+      console.log("traversing: " + key + " : " + value.toString());
+      traverse(value);
+    });
+  }
+  else {
+    // jsonObj is a number or string
+    console.log("    Got # or $: " + jsonObj.toString());
+  }
+}
+
+
+function makeList2(jsonObject, listElement) {
 
-function makeList(jsonObject, listElement) {
   for (var i in jsonObject) {
+
     console.log("processing: " + i.toString());
-    // iterate through the array or object
-    // insert the next child into the list as a <li>
+
+    let name = "";
+    let url = "";
+    let meta = "";
+    let children = false;
+
+    if (jsonObject[i] instanceof Array) {
+      console.log("Array: " + i.toString());
+      name = i.toString();
+      children = true;
+    }
+
+
+
+
+
+
     var newLI = document.createElement('li');
 
     if (jsonObject[i] instanceof Array) {
+
       newLI.innerHTML = i + ": ARRAY";
       newLI.className = "arrayOrObject"; //add a class tag so we can style differently
     }
     else if (jsonObject[i] instanceof Object) {
+
       newLI.innerHTML = i + ": OBJECT";
       newLI.className = "arrayOrObject"; //add a class tag so we can style differently
     }
+    else {
+      newLI.innerHTML = i + ': ' + jsonObject[i];
+    }
+
+    listElement.appendChild(newLI);
+
+
+    //insert a <ul> for nested nodes
+    if (jsonObject[i] instanceof Array || jsonObject[i] instanceof Object) {
+      var newUL = document.createElement('ul');
+      //newUL.innerHTML=i;
+      listElement.appendChild(newUL);
+      makeList(jsonObject[i], newUL);
+    }
+  }
+}
+
+
+
+
+function makeListOrig(jsonObject, listElement) {
+  for (var i in jsonObject) {
+
+    // console.log("processing: " + i.toString());
+
+    var newLI = document.createElement('li');
+
+    if (jsonObject[i] instanceof Array) {
+      newLI.innerHTML = i + ": ARRAY";
+      newLI.className = "arrayOrObject";
+    }
+    else if (jsonObject[i] instanceof Object) {
+      newLI.innerHTML = i + ": OBJECT";
+      newLI.className = "arrayOrObject";
+    }
     else
       newLI.innerHTML = i + ': ' + jsonObject[i];
 
@@ -90,5 +176,69 @@ async function readJSONFile(file) {
 }
 
 async function fileChange(file) {
-  readJSONFile(file).then(json => makeList(json, document.getElementById('JSONunorderedList')));
+  readJSONFile(file).then(
+    json => {
+      console.log(json);
+      makeList(json, document.getElementById('unorderedList'));
+      makeListOrig(json, document.getElementById('JSONunorderedList'));
+    }
+  );
 }
+/*
+
+function validateJson(jsonFile) {
+  try {
+    JSON.parse(jsonFile);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+function downloadJson() {
+  var json = document.getElementById('JSONunorderedList').innerHTML;
+  var blob = new Blob([json], { type: "text/plain;charset=utf-8" });
+  saveAs(blob, "orgchart.json");
+}
+
+function uploadJson() {
+  var file = document.getElementById('file').files[0];
+  if (file) {
+    fileChange(file);
+  }
+}
+
+function clearJson() {
+  document.getElementById('JSONunorderedList').innerHTML = '';
+}
+
+// https://ajv.js.org/guide/getting-started.html#basic-data-validation
+// https://www.npmjs.com/package/ajv
+
+// or ESM/TypeScript import
+import Ajv from "ajv"
+// Node.js require:
+const Ajv = require("ajv")
+
+const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
+
+const schema = {
+  type: "object",
+  properties: {
+    foo: { type: "integer" },
+    bar: { type: "string" },
+  },
+  required: ["foo"],
+  additionalProperties: false,
+}
+
+const data = {
+  foo: 1,
+  bar: "abc",
+}
+
+const validate = ajv.compile(schema)
+const valid = validate(data)
+if (!valid) console.log(validate.errors)
+
+*/
diff --git a/themes/eoconline/layouts/OrgChart/other.json b/themes/eoconline/layouts/OrgChart/other.json
@@ -1,72 +1,4 @@
-/*
-window.onload = () => {
-  createList(data);
-  markupArray.push("</ul>");
-  $("#list").html(markupArray.join(""));
-};
-*/
-/*
-
-https://ajv.js.org/guide/getting-started.html#basic-data-validation
-https://www.npmjs.com/package/ajv
-
-// or ESM/TypeScript import
-import Ajv from "ajv"
-// Node.js require:
-const Ajv = require("ajv")
-
-const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
-
-const schema = {
-  type: "object",
-  properties: {
-    foo: { type: "integer" },
-    bar: { type: "string" },
-  },
-  required: ["foo"],
-  additionalProperties: false,
-}
-
-const data = {
-  foo: 1,
-  bar: "abc",
-}
-
-const validate = ajv.compile(schema)
-const valid = validate(data)
-if (!valid) console.log(validate.errors)
-
-
-*/
-
-dataSource = {
-  title: "",
-  url: "emergency-managers",
-  summary: "Emergency Managers",
-  children: [
-    { title: "Tools for Practitioners", url: "emergency-managers/practitioners"
-    },
-  ]
-};
-
-/*
-Parent Page ID;
-Page ID;
-Page title;
-Block title;
-Block content;
-Page link;
-SEO title;
-SEO slug;
-SEO description;
-SEO H1;
-SEO additional
-*/
-
-
-
-
-dataSource3 = {
+{
   id: 1,
   name: "Lao Lao",
   title: "general manager",
@@ -104,28 +36,6 @@ dataSource3 = {
     { id: 12, name: "Yu Tie", title: "department manager"
     },
   ],
-};
-
+}
 // See https://jsonlint.com/ for JSON formatting rules.
-// https://stackoverflow.com/questions/6692538/generate-unordered-list-from-json-data
-
-var jsonObj = {
-  "labels": [
-    {
-      "labelFont": "35pt Calibri",
-      "labelLocation": {
-        "x": 0.1483,
-        "y": 0.75
-      },
-      "labelText": "fluffer"
-    },
-    {
-      "labelFont": "35pt Calibri",
-      "labelLocation": {
-        "x": 0.666,
-        "y": 0.666
-      },
-      "labelText": "nutter"
-    }
-  ]
-}; //some json to display
+// https://stackoverflow.com/questions/6692538/generate-unordered-list-from-json-data