diff --git a/web/index.html b/web/index.html
index e34e41a..0125b6a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -434,9 +434,7 @@
Template bearbeiten
-
-
-
+
@@ -514,142 +512,93 @@ $ python web/serve.py
const title = path.split('/').pop();
document.getElementById('edit-title').textContent = `Template bearbeiten: ${title}`;
- // Inhalt laden und je nach Dateityp bearbeiten
- fetch(path).then(r => r.text()).then(content => {
- if (path.endsWith('.json')) {
- // JSON parsen und Formular für Key-Value-Paare erstellen
- try {
- const jsonData = JSON.parse(content);
- renderJsonEditForm(jsonData);
- } catch (e) {
- // Falls JSON ungültig, trotzdem als Text bearbeiten
- renderTextEditForm(content);
+ // Inhalt laden und editierbare Formulare abhängig vom Dateityp erstellen
+ fetch(path)
+ .then(r => r.text())
+ .then(content => {
+ const editContainer = document.getElementById('edit-content-content');
+ editContainer.innerHTML = '';
+
+ if (path.endsWith('.json')) {
+ try {
+ const jsonData = JSON.parse(content);
+ createJsonEditUI(editContainer, jsonData, path);
+ } catch (e) {
+ // Falls JSON ungültig, als Text bearbeiten
+ createTextEditUI(editContainer, content);
+ }
+ } else {
+ // Markdown als einfaches Textfeld
+ createTextEditUI(editContainer, content);
}
- } else {
- // Markdown als Text bearbeiten
- renderTextEditForm(content);
- }
- document.getElementById('edit-modal').classList.add('active');
- }).catch(e => {
- showToast(`✗ Fehler beim Laden: ${e.message}`);
- });
+
+ document.getElementById('edit-modal').classList.add('active');
+ })
+ .catch(e => showToast(`✗ Fehler beim Laden: ${e.message}`));
}
- function renderTextEditForm(content) {
- document.getElementById('edit-content').innerHTML = '';
+ function createTextEditUI(container, content) {
+ const textarea = document.createElement('textarea');
+ textarea.id = 'edit-textarea';
+ textarea.value = content;
+ textarea.style.cssText = 'width: 100%; min-height: 300px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-family: var(--mono); font-size: 13px;';
+ textarea.spellcheck = false;
+ container.appendChild(textarea);
}
- function renderJsonEditForm(jsonData) {
- let html = '';
- html += '';
-
- for (const key in jsonData) {
- if (jsonData.hasOwnProperty(key)) {
- html += createJsonField(key, jsonData[key]);
- }
- }
-
- html += '
';
- document.getElementById('edit-content').innerHTML = html;
- }
-
- function createJsonField(key, value) {
- if (typeof value === 'object' && value !== null) {
- let inner = '';
- return '' +
- '
' + key + '
' + inner +
- '' +
- '';
- } else {
- return '' +
- '
' +
- '
' +
- '' +
- '';
- }
- }
-
- function addJsonField() {
- const container = document.getElementById('json-edit-fields');
- container.innerHTML += createJsonField('newField', '');
- }
-
- function removeJsonField(button) {
- button.parentElement.remove();
- }
-
- function escapeHtml(unsafe) {
- return unsafe
- .replace(/&/g, "&")
- .replace(//g, ">")
- .replace(/"/g, """)
- .replace(/'/g, "'");
- }
-
- function unescapeHtml(html) {
- const txt = document.createElement("textarea");
- txt.innerHTML = html;
- return txt.value;
+ function createJsonEditUI(container, jsonData, editPathHint = '') {
+ const textarea = document.createElement('textarea');
+ textarea.value = JSON.stringify(jsonData, null, 2);
+ textarea.style.cssText = 'width: 100%; min-height: 300px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-family: var(--mono); font-size: 13px;';
+ textarea.spellcheck = false;
+ container.appendChild(textarea);
}
async function saveEditedContent() {
if (!currentEditTemplate) return;
-
+
try {
if (currentEditTemplate.endsWith('.json')) {
- // JSON aus Formular extrahieren
- const fields = document.querySelectorAll('.json-field');
- const result = {};
-
- for (const field of fields) {
- const title = field.querySelector('h4 input[type="text"]:first-of-type');
- const key = title ? title.value.trim() : '';
- const value = field.querySelector('h4 input[type="text"]:last-of-type') ? field.querySelector('h4 input[type="text"]:last-of-type').value : '';
-
- if (key) {
- result[key] = value;
- }
+ const textarea = document.getElementById('edit-textarea');
+ const finalJsonString = textarea.value.trim();
+
+ // Valid JSON prüfen
+ try {
+ JSON.parse(finalJsonString);
+ } catch (e) {
+ showToast('✗ Ungültiges JSON. Bitte korrigiere den Inhalt.');
+ return;
}
-
- const jsonString = JSON.stringify(result, null, 2);
-
+
const response = await fetch(currentEditTemplate, {
method: 'PUT',
headers: {'Content-Type': 'text/plain'},
- body: jsonString
+ body: finalJsonString
});
-
+
if (response.ok) {
showToast('✓ Änderungen gespeichert');
closeEditModal();
closeModal();
- showModal(currentEditTemplate.split('/').pop(), jsonString);
+ viewTemplate(currentEditTemplate);
} else {
throw new Error(`HTTP ${response.status}`);
}
} else {
- // Textinhalt direkt speichern
const textarea = document.getElementById('edit-textarea');
- const content = textarea ? textarea.value : document.getElementById('edit-content').innerText;
+ const content = textarea.value;
const response = await fetch(currentEditTemplate, {
method: 'PUT',
headers: {'Content-Type': 'text/plain'},
body: content
});
-
+
if (response.ok) {
showToast('✓ Änderungen gespeichert');
closeEditModal();
closeModal();
- showModal(currentEditTemplate.split('/').pop(), content);
+ viewTemplate(currentEditTemplate);
} else {
throw new Error(`HTTP ${response.status}`);
}