From 4c165d81070a0f9de9cea9c0fa5702e0b8496d09 Mon Sep 17 00:00:00 2001 From: Daniel S Date: Sat, 8 Aug 2026 23:50:07 +0200 Subject: [PATCH] feat(admin-editor): add per-section UIComponent management with inline editing, deletion and re-ordering --- src/pages/admin/editor.astro | 160 +++++++++++++++++++++++++++++------ 1 file changed, 133 insertions(+), 27 deletions(-) diff --git a/src/pages/admin/editor.astro b/src/pages/admin/editor.astro index ad869a2..0b92b1f 100644 --- a/src/pages/admin/editor.astro +++ b/src/pages/admin/editor.astro @@ -107,19 +107,32 @@ const { siteConfig, themeConfig } = loadWaasConfigs(); - +

- UIKomponente Hinzufuegen + UI-Komponente Hinzufuegen & Verwaltungsverzeichnis

+
+ + +
+
@@ -143,24 +156,47 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
- +
-

- Element-Container ({siteConfig.hero.elements?.length || 0}) +

+ Sektions-Komponenten ({(siteConfig.hero.elements || []).length})

-
- {((siteConfig.hero.elements || [])).map((el) => ( -
-
- {el.type} (Platz: {el.slotId}) - {el.content} + + +
+ + +
+ +
+ {((siteConfig.hero.elements || [])).map((el, idx) => ( +
+
+
+ {el.type} (Slot: {el.slotId}) + {el.content} +
+
+ + + +
+
+ +
+ +
- ID: {el.id}
))}
@@ -236,6 +272,8 @@ const { siteConfig, themeConfig } = loadWaasConfigs(); let siteConfigState = JSON.parse(siteConfigJSON); let themeConfigState = JSON.parse(themeConfigJSON); + if (!siteConfigState.hero.elements) siteConfigState.hero.elements = []; + function reloadIframe() { const iframe = document.getElementById('preview-iframe'); if (iframe) iframe.src = iframe.src; @@ -290,6 +328,7 @@ const { siteConfig, themeConfig } = loadWaasConfigs(); if (!siteConfigState.sectionsOrder.includes(newSec)) { siteConfigState.sectionsOrder.push(newSec); renderSectionsList(); + updateSectionSelectors(); } else { alert('Sektion ist bereits im Layout enthalten!'); } @@ -299,6 +338,7 @@ const { siteConfig, themeConfig } = loadWaasConfigs(); window.deleteSection = function(secName) { siteConfigState.sectionsOrder = siteConfigState.sectionsOrder.filter(s => s !== secName); renderSectionsList(); + updateSectionSelectors(); }; window.moveSection = function(secName, dir) { @@ -333,43 +373,109 @@ const { siteConfig, themeConfig } = loadWaasConfigs(); )).join(''); } + function updateSectionSelectors() { + const newElSec = document.getElementById('new-el-section'); + const filterSec = document.getElementById('filter-section-select'); + if (newElSec) { + newElSec.innerHTML = siteConfigState.sectionsOrder.map(s => '').join(''); + } + if (filterSec) { + const current = filterSec.value; + filterSec.innerHTML = '' + siteConfigState.sectionsOrder.map(s => '').join(''); + filterSec.value = current; + } + } + + // --- UIComponent Management: Add, Edit, Delete, Position --- + const addBtn = document.getElementById('add-el-btn'); if (addBtn) { addBtn.addEventListener('click', () => { + const section = document.getElementById('new-el-section').value; const slotId = document.getElementById('new-el-slot').value; const type = document.getElementById('new-el-type').value; const content = document.getElementById('new-el-content').value || 'Neues Element'; - if (!siteConfigState.hero.elements) { - siteConfigState.hero.elements = []; - } - - siteConfigState.hero.elements.push({ + const newComp = { id: 'el-' + Date.now(), - slotId, + slotId: section + '-' + slotId, type, content, style: 'primary' - }); + }; + siteConfigState.hero.elements.push(newComp); document.getElementById('new-el-content').value = ''; renderElementsContainer(); }); } + window.deleteElement = function(elId) { + siteConfigState.hero.elements = siteConfigState.hero.elements.filter(e => e.id !== elId); + renderElementsContainer(); + }; + + window.moveElement = function(elId, dir) { + const arr = siteConfigState.hero.elements; + const idx = arr.findIndex(e => e.id === elId); + if (idx === -1) return; + const targetIdx = idx + dir; + if (targetIdx < 0 || targetIdx >= arr.length) return; + + const temp = arr[idx]; + arr[idx] = arr[targetIdx]; + arr[targetIdx] = temp; + + renderElementsContainer(); + }; + + window.updateElementContent = function(elId) { + const input = document.getElementById('edit-input-' + elId); + if (!input) return; + const el = siteConfigState.hero.elements.find(e => e.id === elId); + if (el) { + el.content = input.value; + const label = document.getElementById('el-label-' + elId); + if (label) label.textContent = input.value; + } + }; + + const filterSecSelect = document.getElementById('filter-section-select'); + if (filterSecSelect) { + filterSecSelect.addEventListener('change', renderElementsContainer); + } + function renderElementsContainer() { const container = document.getElementById('elements-container'); const countEl = document.getElementById('elements-count'); if (!container) return; - const els = siteConfigState.hero.elements || []; + + const filterSec = filterSecSelect ? filterSecSelect.value : 'all'; + let els = siteConfigState.hero.elements || []; + + if (filterSec !== 'all') { + els = els.filter(e => e.slotId && e.slotId.startsWith(filterSec)); + } + if (countEl) countEl.textContent = els.length; - container.innerHTML = els.map(el => ( - '
' + - '
' + - '' + el.type + ' (Platz: ' + el.slotId + ')' + - '' + el.content + '' + + + container.innerHTML = els.map((el, idx) => ( + '
' + + '
' + + '
' + + '' + el.type + ' (Slot: ' + el.slotId + ')' + + '' + el.content + '' + + '
' + + '
' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '' + '
' + - '' + 'ID: ' + el.id + '' + '
' )).join(''); }