- {((siteConfig.hero.elements || [])).map((el) => (
-
-
-
{el.type} (Platz: {el.slotId})
-
{el.content}
+
+
+
+
+
+
+
+
@@ -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('');
}