fix: Render-Pfad — rekursiv erzeugte Kinder werden nun direkt in die Container innerContainer und innerObjContainer geschrieben, indem buildJsonForm(targetElement) die Kinder in das übergebene Element einfügt.

Konkret werden die Kinder in web/index.html Zeilen 628 bzw. 666 via buildJsonForm(..., innerContainer) bzw. buildJsonForm(..., innerObjContainer) an diese Container angehängt.
This commit is contained in:
Michael 2026-04-24 17:12:51 +02:00
parent 79c3bb3a3e
commit a44220c793

View file

@ -598,9 +598,12 @@ $ python web/serve.py</div>
formDiv.style.cssText = 'display: flex; flex-direction: column; gap: 16px; padding: 8px; background: var(--bg-card); border-radius: 4px; margin: 0; min-height: 300px; overflow-y: auto;'; formDiv.style.cssText = 'display: flex; flex-direction: column; gap: 16px; padding: 8px; background: var(--bg-card); border-radius: 4px; margin: 0; min-height: 300px; overflow-y: auto;';
// Rekursive Funktion zum Erstellen von Eingabefeldern für alle Properties // Rekursive Funktion zum Erstellen von Eingabefeldern für alle Properties
function buildJsonForm(data, prefix = '', level = 0) { function buildJsonForm(data, prefix = '', level = 0, targetElement = null) {
if (typeof data !== 'object' || data === null) return; if (typeof data !== 'object' || data === null) return;
const container = targetElement || document.getElementById('edit-content-content');
if (!container) return;
Object.keys(data).forEach(key => { Object.keys(data).forEach(key => {
const fullKey = prefix ? `${prefix}.${key}` : key; const fullKey = prefix ? `${prefix}.${key}` : key;
const value = data[key]; const value = data[key];
@ -621,13 +624,12 @@ $ python web/serve.py</div>
// Rekursiv innere Properties in den Container einfügen // Rekursiv innere Properties in den Container einfügen
const innerContainer = document.createElement('div'); const innerContainer = document.createElement('div');
innerContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;'; innerContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;';
buildJsonForm(value, fullKey, level + 1);
const existingChildren = Array.from(innerContainer.children); buildJsonForm(value, fullKey, level + 1, innerContainer);
while (innerContainer.firstChild) innerContainer.removeChild(innerContainer.firstChild);
existingChildren.forEach(ch => innerContainer.appendChild(ch));
fieldContainer.appendChild(innerContainer); fieldContainer.appendChild(innerContainer);
formDiv.appendChild(fieldContainer); container.appendChild(fieldContainer);
return; return;
} }
@ -661,10 +663,9 @@ $ python web/serve.py</div>
if (typeof item === 'object' && item !== null) { if (typeof item === 'object' && item !== null) {
const innerObjContainer = document.createElement('div'); const innerObjContainer = document.createElement('div');
innerObjContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;'; innerObjContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;';
buildJsonForm(item, itemKey, level + 1);
const existingObjChildren = Array.from(innerObjContainer.children); buildJsonForm(item, itemKey, level + 1, innerObjContainer);
while (innerObjContainer.firstChild) innerObjContainer.removeChild(innerObjContainer.firstChild);
existingObjChildren.forEach(ch => innerObjContainer.appendChild(ch));
itemContainer.appendChild(innerObjContainer); itemContainer.appendChild(innerObjContainer);
} else { } else {
const itemFieldContainer = document.createElement('div'); const itemFieldContainer = document.createElement('div');
@ -689,7 +690,7 @@ $ python web/serve.py</div>
arrayItemsContainer.appendChild(itemContainer); arrayItemsContainer.appendChild(itemContainer);
}); });
arrayContainer.appendChild(arrayItemsContainer); arrayContainer.appendChild(arrayItemsContainer);
formDiv.appendChild(arrayContainer); container.appendChild(arrayContainer);
return; return;
} }
@ -715,11 +716,11 @@ $ python web/serve.py</div>
input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #555; border-radius: 3px; font-family: var(--mono); font-size: 13px;'; input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #555; border-radius: 3px; font-family: var(--mono); font-size: 13px;';
fieldContainer.appendChild(input); fieldContainer.appendChild(input);
formDiv.appendChild(fieldContainer); container.appendChild(fieldContainer);
}); });
} }
buildJsonForm(jsonData); buildJsonForm(jsonData, '', 0, formDiv);
container.appendChild(formDiv); container.appendChild(formDiv);
} }