Skip to content

Commit

Permalink
arc-tree interim save, coalescing to a direction!
Browse files Browse the repository at this point in the history
  • Loading branch information
@VashJuan
VashJuan committed Oct 2, 2024
1 parent 5eb3356 commit 828ae47
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 108 deletions.
5 changes: 3 additions & 2 deletions themes/eoconline/layouts/OrgChart/arc-tree.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ body {
#TreeOptions {
margin: 15px 0;
padding: 15px;
width: 675px;
width: 370px;
min-width: 200px;
background-color: #eee;
border-radius: 0.3em;
border: #505050 1px solid;
Expand Down Expand Up @@ -83,7 +84,7 @@ body {
}

#fontSize {
width: 235px;
width: 225px;
}

#fontSizeValue {
Expand Down
8 changes: 3 additions & 5 deletions themes/eoconline/layouts/OrgChart/arc-tree.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<!-- link rel="icon" type="image/x-icon" href="./logo.jpg" / -->
<link rel="stylesheet" href="./arc-tree.css" />
<script defer src="./arc-tree.js"></script>
<script type="text/javascript" src="purify.min.js"></script>
</head>
<body>
<div id="TreeOptions">
Expand All @@ -22,7 +23,7 @@

<div>
<label title="Font size in em's" id="fontSizeLabel">
Font size: <span id="fontSizeValue">2</span>
Font size: <span id="fontSizeValue">2</span> &nbsp;
<input type="range" value="2.5" id="fontSize" step="0.5" min="0.5" max="5" list="steplist" oninput="document.querySelector('#fontSizeValue').textContent = this.value" />
<datalist id="steplist">
<option>0.5</option>
Expand All @@ -36,10 +37,7 @@
</div>
</div>

<label>
Select a JSON file to view:
<input type="file" onChange="fileChange(this.files[0])" />
</label>
<label> Select a JSON file to view: //<input type="file" onChange="fileChange(this.files[0])" /> </label>

<ul id="JSONunorderedList"></ul>

Expand Down
162 changes: 101 additions & 61 deletions themes/eoconline/layouts/OrgChart/arc-tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,96 +45,135 @@ function collapseTree() {
console.log("Collapsed all " + checkboxes.length + " nodes.");
}

// {{ now.UnixNano }} to create a unique ID
[{
"SponsorID": 382,
"SponsorName": "Test Name",
"MonthEndReport": true,
"AccountingManager": "Me",
"UnboundProperties": [], "State": 16
}]

jsonObj =
{
name: "FEMA.Gov_Home",
url: "/",
meta: "FEMa _meta",
children: [
{
name: "ES",
url: "/es",
meta: "Spanish_meta",
children: []
},
{
name: "Emergency Managers",
url: "/emergency-managers",
meta: "Emergency Manager information",
children: []
}
]
};


buildTree(jsonObj, document.getElementById('unorderedList'));
var listItemHTML = "";
var listLog = "";
var expandedByDefault = false;

/// <summary>
/// Create an HTML unordered list of items from a JSON object
/// Recurse through the JSON object, building up an HTML string to display, appending them to the treeElement.
/// </summary>
function buildTree(o, treeElement) {

for (var i in o) {
if (Boolean(o[i]) && typeof (o[i]) == "object") {

if (listItemHTML != "") {
// Output list item we've been building up before processing children
console.log(listLog);
listLog = "";

var uniqueID = Math.floor(Math.random() * 1000000).toString();
var newLI = document.createElement('li');

function makeList(jsonObject, listElement) {
var newInput = document.createElement('input');
newInput.type = "checkbox";
newInput.id = "c" + uniqueID;
newInput.checked = expandedByDefault;

traverse(jsonObject);
var newLabel = document.createElement('label');
newLabel.className = "tree_label";
newLabel.htmlFor = "c" + uniqueID;
newLabel.innerHTML = DOMPurify.sanitize(listItemHTML); //NOTE: Needed?!
listItemHTML = "";

treeElement.appendChild(newLI);
treeElement.appendChild(newLabel);
treeElement.appendChild(newInput);
}

var newUL = document.createElement('ul');
treeElement.appendChild(newUL);
console.group("children of " + i.name)
buildTree(i.children, newUL);
console.groupEnd()

} else {
listLog += i + ': ' + o[i] + "; ";
listItemHTML += i + ': ' + o[i] + "; ";
}
}
}

function traverse2(o) {
for (var i in o) {
if (!!o[i] && typeof (o[i]) == "object") {
console.log(i, o[i]);
traverse(o[i]);
if (Boolean(o[i]) && typeof (o[i]) == "object") {
console.log(i + " (object) is " + o[i]);
console.group(i.toString());
traverse2(o[i]);
console.groupEnd();
} else {
console.log(i, o[i]);
console.log(i + ": " + o[i]);
}
}
}

//const object = {a: 1, b: 2, c: 3 };
//for (const property in object) {console.log(`${property}: ${object[property]}`);}

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());
console.group(value.toString());
traverse(value);
console.groupEnd();
});
}
else {
// jsonObj is a number or string
console.log(" Got # or $: " + jsonObj.toString());
console.log("Got # or $: " + jsonObj.toString());
}
}


function makeList2(jsonObject, listElement) {

for (var i in jsonObject) {

console.log("processing: " + i.toString());

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 traverse0(o) {
debugger;
for (var i in o) {
//console.log("processing: " + i, o[i]);
if (!!o[i] && typeof (o[i]) == "object") {
console.log("Obj:" + i, o[i]);
traverse(o[i]);
} else {
console.log(i, o[i]);
}
}
}




function makeListOrig(jsonObject, listElement) {
function makeListOrig(jsonObject, treeElement) {
for (var i in jsonObject) {

// console.log("processing: " + i.toString());
Expand All @@ -152,13 +191,13 @@ function makeListOrig(jsonObject, listElement) {
else
newLI.innerHTML = i + ': ' + jsonObject[i];

listElement.appendChild(newLI);
treeElement.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);
treeElement.appendChild(newUL);
makeList(jsonObject[i], newUL);
}
}
Expand All @@ -179,11 +218,12 @@ async function fileChange(file) {
readJSONFile(file).then(
json => {
console.log(json);
makeList(json, document.getElementById('unorderedList'));
buildTree(json, document.getElementById('unorderedList'));
makeListOrig(json, document.getElementById('JSONunorderedList'));
}
);
}

/*
function validateJson(jsonFile) {
Expand Down
Loading

0 comments on commit 828ae47

Please sign in to comment.