From 5eb3356c6cf5f12e48479f303fc05c4795530f83 Mon Sep 17 00:00:00 2001
From: JCornelison <gitter@VashonDesign.com>
Date: Sun, 29 Sep 2024 12:15:26 -0700
Subject: [PATCH] chaos state of arctree, for the record!

---
 .../eoconline/layouts/OrgChart/arc-tree.css   |   5 +
 .../eoconline/layouts/OrgChart/arc-tree.html  |   6 +-
 themes/eoconline/layouts/OrgChart/arc-tree.js | 158 +++++++++++++++++-
 themes/eoconline/layouts/OrgChart/other.json  |  96 +----------
 .../eoconline/layouts/OrgChart/sample2.json   | 122 ++++++++++++++
 .../eoconline/layouts/OrgChart/sample3.json   |  48 ++++++
 6 files changed, 336 insertions(+), 99 deletions(-)
 create mode 100644 themes/eoconline/layouts/OrgChart/sample2.json
 create mode 100644 themes/eoconline/layouts/OrgChart/sample3.json

diff --git a/themes/eoconline/layouts/OrgChart/arc-tree.css b/themes/eoconline/layouts/OrgChart/arc-tree.css
index a840dfd..ff0f052 100644
--- 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
index ffb88ab..6a725d3 100644
--- 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
index ee6dbea..6830f27 100644
--- 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
index cb3ffab..bd50430 100644
--- 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
\ No newline at end of file
diff --git a/themes/eoconline/layouts/OrgChart/sample2.json b/themes/eoconline/layouts/OrgChart/sample2.json
new file mode 100644
index 0000000..dd9de6a
--- /dev/null
+++ b/themes/eoconline/layouts/OrgChart/sample2.json
@@ -0,0 +1,122 @@
+{
+  "name": "FEMA.Gov Home",
+  "URL": "/",
+  "meta": "FEMa info",
+  "children": [
+    {
+      "name": "ES",
+      "URL": "/es",
+      "meta": "Spanish",
+      "children": [
+        {
+          "name": "Emergency Managers",
+          "URL": "/es/emergency-managers",
+          "meta": "Emergency Manager information in Spanish",
+          "children": [
+            {
+              "name": "Tools for Practitioners",
+              "URL": "/es/emergency-managers/practitioners",
+              "meta": "Tools for Practitioners in Spanish"
+            },
+            {
+              "name": "Tools for Politicians",
+              "URL": "/es/emergency-managers/Politicians",
+              "meta": "Tools for Politicians in Spanish"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Emergency Managers",
+      "URL": "/emergency-managers",
+      "meta": "Emergency Manager information",
+      "children": [
+        {
+          "name": "Tools for Practitioners",
+          "URL": "/emergency-managers/practitioners",
+          "meta": "Tools for Practitioners"
+        },
+        {
+          "name": "Tools for Politicians",
+          "URL": "/emergency-managers/Politicians",
+          "meta": "Tools for Politicians"
+        }
+      ]
+    }
+  ]
+}
+/*
+
+<ul class="tree">
+      <li>
+        <input type="checkbox" id="c1" />
+        <label class="tree_label" for="c1">Level 0</label>
+        <ul>
+          <li>
+            <input type="checkbox" checked="checked" id="c2" />
+            <label for="c2" class="tree_label">Level 1</label>
+            <ul>
+              <li><span class="tree_label">Level 2</span></li>
+              <li><span class="tree_label">Level 2</span></li>
+            </ul>
+          </li>
+          <li>
+            <input type="checkbox" id="c3" />
+            <label for="c3" class="tree_label">Ll 1 <br />label text <br />with line-breaks</label>
+            <ul>
+              <li><span class="tree_label">Level 2</span></li>
+              <li>
+                <input type="checkbox" id="c4" />
+                <label for="c4" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
+                <ul>
+                  <li><span class="tree_label">Level 3</span></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+
+      <li>
+        <input type="checkbox" id="c5" />
+        <label class="tree_label" for="c5">Level 0</label>
+        <ul>
+          <li>
+            <input type="checkbox" id="c6" />
+            <label for="c6" class="tree_label">Level 1</label>
+            <ul>
+              <li><span class="tree_label">Level 2</span></li>
+            </ul>
+          </li>
+          <li>
+            <input type="checkbox" id="c7" />
+            <label for="c7" class="tree_label">Level 1</label>
+            <ul>
+              <li><span class="tree_label">Level 2</span></li>
+              <li>
+                <input type="checkbox" id="c8" />
+                <label for="c8" class="tree_label">Level 2</label>
+                <ul>
+                  <li><span class="tree_label">Level 3</span></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+*/
+/*
+Parent Page ID;
+Page ID;
+Page title;
+Block title;
+Block content;
+Page link;
+SEO title;
+SEO slug;
+SEO description;
+SEO H1;
+SEO additional
+*/
\ No newline at end of file
diff --git a/themes/eoconline/layouts/OrgChart/sample3.json b/themes/eoconline/layouts/OrgChart/sample3.json
new file mode 100644
index 0000000..87ca6ca
--- /dev/null
+++ b/themes/eoconline/layouts/OrgChart/sample3.json
@@ -0,0 +1,48 @@
+{
+    "name": "FEMA.Gov Home",
+    "URL": "/",
+    "meta": "FEMa info",
+    "children": [
+        {
+            "name": "ES",
+            "URL": "/es",
+            "meta": "Spanish",
+            "children": [
+                {
+                    "name": "Emergency Managers",
+                    "URL": "/es/emergency-managers",
+                    "meta": "Emergency Manager information in Spanish",
+                    "children": [
+                        {
+                            "name": "Tools for Practitioners",
+                            "URL": "/es/emergency-managers/practitioners",
+                            "meta": "Tools for Practitioners in Spanish"
+                        },
+                        {
+                            "name": "Tools for Politicians",
+                            "URL": "/es/emergency-managers/Politicians",
+                            "meta": "Tools for Politicians in Spanish"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Emergency Managers",
+            "URL": "/emergency-managers",
+            "meta": "Emergency Manager information",
+            "children": [
+                {
+                    "name": "Tools for Practitioners",
+                    "URL": "/emergency-managers/practitioners",
+                    "meta": "Tools for Practitioners"
+                },
+                {
+                    "name": "Tools for Politicians",
+                    "URL": "/emergency-managers/Politicians",
+                    "meta": "Tools for Politicians"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file