michael/prompt_template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: JSON-Editor Round-Trip für verschachtelte Objekte/Arrays

Browse source 
- Rendering: innere Felder werden innerhalb der Objekt/Array-Container gerendert
- Speichern: data-key-Pfade mit [index] werden korrekt zu Arrays rekonstruiert

Fixes beide Symptome aus dem uncommitted Refactor.
This commit is contained in:
Michael 2026-04-24 16:55:11 +02:00
parent 3f35cff338
commit 79c3bb3a3e
1 changed files with 121 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
web/index.html
View file

@ -597,45 +597,103 @@ $ python web/serve.py</div>
const formDiv = document.createElement('div'); const formDiv = document.createElement('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
function buildJsonForm(data, prefix = '', level = 0) { function buildJsonForm(data, prefix = '', level = 0) {
if (typeof data !== 'object' || data === null) 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];
const isObject = typeof value === 'object' && value !== null; const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
const isArray = Array.isArray(value); const isArray = Array.isArray(value);
if (isObject && !isArray) { // Für Objekte: Rekursiv alle inneren Properties anzeigen
if (isObject) {
const fieldContainer = document.createElement('div');
fieldContainer.style.cssText = 'background: #1a1a1a; padding: 12px; border-radius: 4px; border-left: 3px solid #4CAF50;';
const label = document.createElement('label'); const label = document.createElement('label');
label.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`; label.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`;
label.textContent = fullKey + ' (Objekt) ♦'; label.textContent = fullKey + ' (Objekt)';
label.style.cssText = 'font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-size: 14px; margin-top: 8px;'; label.style.cssText = 'font-weight: 600; color: #4CAF50; margin-bottom: 8px; display: block; font-size: 14px;';
formDiv.appendChild(label); fieldContainer.appendChild(label);
const input = document.createElement('textarea'); // Rekursiv innere Properties in den Container einfügen
input.value = JSON.stringify(value, null, 2); const innerContainer = document.createElement('div');
input.dataset.key = fullKey; innerContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;';
input.rows = Object.keys(value).length > 10 ? 10 : Object.keys(value).length; buildJsonForm(value, fullKey, level + 1);
input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; font-family: var(--mono); font-size: 13px; resize: vertical;'; const existingChildren = Array.from(innerContainer.children);
formDiv.appendChild(input); while (innerContainer.firstChild) innerContainer.removeChild(innerContainer.firstChild);
existingChildren.forEach(ch => innerContainer.appendChild(ch));
fieldContainer.appendChild(innerContainer);
formDiv.appendChild(fieldContainer);
return; return;
} }
// Für Arrays: Rekursiv jedes Element als eigenes Feld anzeigen
if (isArray) { if (isArray) {
const label = document.createElement('label'); const arrayContainer = document.createElement('div');
label.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`; arrayContainer.style.cssText = 'background: #1a1a1a; padding: 12px; border-radius: 4px; border-left: 3px solid #2196F3;';
label.textContent = fullKey + ' (Array) ♦';
label.style.cssText = 'font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-size: 14px; margin-top: 8px;';
formDiv.appendChild(label);
const input = document.createElement('textarea'); const arrayLabel = document.createElement('label');
input.value = JSON.stringify(value); arrayLabel.htmlFor = `edit-${fullKey.replace(/[.\s]/g, '-')}`;
input.dataset.key = fullKey; arrayLabel.textContent = fullKey + ' (Array) - ' + value.length + ' Elemente';
input.rows = Math.min(value.length, 5); arrayLabel.style.cssText = 'font-weight: 600; color: #2196F3; margin-bottom: 8px; display: block; font-size: 14px;';
input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; font-family: var(--mono); font-size: 13px; resize: vertical;'; arrayContainer.appendChild(arrayLabel);
formDiv.appendChild(input);
// Für jedes Array-Element ein separates Eingabefeld
const arrayItemsContainer = document.createElement('div');
arrayItemsContainer.style.cssText = 'margin-top: 4px; padding-left: 12px;';
value.forEach((item, index) => {
const itemKey = `${fullKey}[${index}]`;
const itemContainer = document.createElement('div');
itemContainer.style.cssText = 'background: #2a2a2a; padding: 8px; margin: 4px 0; border-radius: 3px; border-left: 2px solid #FF9800;';
const itemLabel = document.createElement('label');
itemLabel.htmlFor = `edit-${itemKey.replace(/[.\s]/g, '-')}`;
itemLabel.textContent = `Element [${index}]`;
itemLabel.style.cssText = 'font-weight: 500; color: #FF9800; margin-bottom: 4px; display: block; font-size: 13px;';
itemContainer.appendChild(itemLabel);
// Prüfen, ob das Array-Element selbst ein Objekt ist
if (typeof item === 'object' && item !== null) {
const innerObjContainer = document.createElement('div');
innerObjContainer.style.cssText = 'padding-left: 12px; margin-top: 4px;';
buildJsonForm(item, itemKey, level + 1);
const existingObjChildren = Array.from(innerObjContainer.children);
while (innerObjContainer.firstChild) innerObjContainer.removeChild(innerObjContainer.firstChild);
existingObjChildren.forEach(ch => innerObjContainer.appendChild(ch));
itemContainer.appendChild(innerObjContainer);
} else {
const itemFieldContainer = document.createElement('div');
itemFieldContainer.style.cssText = 'background: var(--bg-input); padding: 8px; border-radius: 3px; margin-bottom: 4px;';
const input = document.createElement('input');
const type = typeof item === 'boolean' ? 'checkbox' : typeof item === 'number' ? 'number' : 'text';
input.type = type;
input.value = item !== null && item !== undefined ? item : '';
input.dataset.key = itemKey;
input.dataset.type = typeof item;
input.dataset.arrayIndex = index;
if (type === 'checkbox') input.checked = item;
else input.value = String(item !== null && item !== undefined ? item : '');
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;';
itemFieldContainer.appendChild(input);
itemContainer.appendChild(itemFieldContainer);
}
arrayItemsContainer.appendChild(itemContainer);
});
arrayContainer.appendChild(arrayItemsContainer);
formDiv.appendChild(arrayContainer);
return; return;
} }
// Für primitive Werte: Standard-Eingabefeld erstellen
const fieldContainer = document.createElement('div'); const fieldContainer = document.createElement('div');
fieldContainer.style.cssText = 'background: var(--bg-input); padding: 8px; border-radius: 4px; border: 1px solid transparent;'; fieldContainer.style.cssText = 'background: var(--bg-input); padding: 8px; border-radius: 4px; border: 1px solid transparent;';
@ -648,13 +706,14 @@ $ python web/serve.py</div>
const type = typeof value === 'boolean' ? 'checkbox' : typeof value === 'number' ? 'number' : 'text'; const type = typeof value === 'boolean' ? 'checkbox' : typeof value === 'number' ? 'number' : 'text';
const input = document.createElement('input'); const input = document.createElement('input');
input.type = type; input.type = type;
input.value = value; input.value = value !== null && value !== undefined ? value : '';
input.dataset.key = fullKey; input.dataset.key = fullKey;
input.dataset.type = typeof value; input.dataset.type = typeof value;
const displayValue = typeof value === 'boolean' ? value : String(value);
if (type === 'checkbox') input.checked = value; if (type === 'checkbox') input.checked = value;
else input.value = displayValue; else input.value = String(value !== null && value !== undefined ? value : '');
input.style.cssText = 'width: 100%; padding: 8px; background: #222222; color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; 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); formDiv.appendChild(fieldContainer);
}); });
@ -686,26 +745,45 @@ $ python web/serve.py</div>
} }
function extractJsonFromForm(formDiv) { function extractJsonFromForm(formDiv) {
const result = {}; // Map: full key -> { value, type }
const inputEntries = [];
const inputs = formDiv.querySelectorAll('[data-key]'); const inputs = formDiv.querySelectorAll('[data-key]');
inputs.forEach(input => { inputs.forEach(input => {
const keyPath = input.dataset.key; const key = input.dataset.key || '';
const value = extractInputValue(input); inputEntries.push({ key, value: extractInputValue(input) });
});
const keys = keyPath.split('.');
let current = result; // Sort by key to ensure stable parent-first construction
inputEntries.sort((a,b) => a.key.localeCompare(b.key));
keys.forEach((key, i) => {
if (i === keys.length - 1) { const result = {};
current[key] = value; inputEntries.forEach(({ key, value }) => {
} else { const parts = key.split('.');
if (!current[key]) current[key] = {}; let cur = result;
current = current[key]; for (let i = 0; i < parts.length; i++) {
} const part = parts[i];
}); const isLast = i === parts.length - 1;
const m = part.match(/^([^\[\]]+)\[(\d+)\]$/);
if (m && !isLast) {
const base = m[1];
const idx = Number(m[2]);
if (!cur[base]) cur[base] = [];
if (!cur[base][idx]) cur[base][idx] = {};
cur = cur[base][idx];
} else if (m && isLast) {
// Array leaf
const base = m[1];
const idx = Number(m[2]);
if (!cur[base]) cur[base] = [];
cur[base][idx] = value;
} else if (isLast) {
cur[part] = value;
} else {
if (!cur[part]) cur[part] = {};
cur = cur[part];
}
}
}); });
return result; return result;
} }