From 4686458926bb1fd6d3ffb3e25f671a26a4934c51 Mon Sep 17 00:00:00 2001 From: Richard Sauer Date: Wed, 8 Apr 2026 16:40:47 +1000 Subject: [PATCH] Card properties editor: name, type, color, font size, width, setpoints --- templates/editor.html | 108 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 98 insertions(+), 10 deletions(-) diff --git a/templates/editor.html b/templates/editor.html index fdac786..49d788e 100644 --- a/templates/editor.html +++ b/templates/editor.html @@ -184,6 +184,16 @@ body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var( .auto-btns button{padding:10px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer} .auto-btns .save-btn{background:var(--green);color:#000} .auto-btns .cancel-btn{background:var(--card);color:var(--text);border:1px solid var(--border)} + +/* Card properties editor */ +.props-editor{width:420px;max-width:95vw} +.props-editor h3{font-size:20px;margin-bottom:16px} +.prop-row{display:flex;align-items:center;gap:12px;margin-bottom:12px} +.prop-row label{width:100px;font-size:13px;color:var(--text2);flex-shrink:0;text-align:right} +.prop-row input,.prop-row select{flex:1;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:14px} +.prop-row input[type=color]{width:50px;height:38px;padding:2px;cursor:pointer;flex:0} +.prop-row input[type=range]{flex:1} +.prop-preview{display:inline-block;width:24px;height:24px;border-radius:4px;border:1px solid var(--border);vertical-align:middle;margin-left:8px} @@ -470,27 +480,28 @@ function createCardEl(c) { const commentCount = (layout.comments || []).filter(x => x.target === c.id).length; el.innerHTML += `
${commentCount}
`; + const cfs = c.fontSize || 18; if (c.type === 'temp') { const color = c.color || '#ff8844'; - el.innerHTML += `
${c.label}
`; + el.innerHTML += `
${c.label}
`; el.innerHTML += `
${Math.round(s.value)} °C
`; el.innerHTML += `
`; el.innerHTML += `
SP: ${c.sp_default || 70} °C
`; el.onclick = () => { if (mode === 'preview') openTempPopup(c); }; } else if (c.type === 'motor') { el.innerHTML += `
- ${c.label} + ${c.label} ${c.sp_default || 50}%
`; el.innerHTML += `
${s.on ? 'ON' : 'OFF'}
`; el.onclick = () => { if (mode === 'preview') toggleSim(c.id); }; } else if (c.type === 'burner') { - el.innerHTML += `
${c.label}
`; + el.innerHTML += `
${c.label}
`; el.innerHTML += `
${s.on ? 'ON' : 'OFF'}
`; el.onclick = () => { if (mode === 'preview') toggleSim(c.id); }; } else if (c.type === 'automation') { // Automation card — combines outputs, speeds, temp setpoints - el.innerHTML += `
${c.label}
`; + el.innerHTML += `
${c.label}
`; const rules = c.rules || []; if (rules.length === 0) { el.innerHTML += `
No rules configured
Click to edit in edit mode
`; @@ -508,7 +519,7 @@ function createCardEl(c) { else if (mode === 'preview') toggleSim(c.id); }; } else { // output - el.innerHTML += `
${c.label}
`; + el.innerHTML += `
${c.label}
`; el.innerHTML += `
${s.on ? 'ON' : 'OFF'}
`; el.onclick = () => { if (mode === 'preview') toggleSim(c.id); }; } @@ -728,12 +739,89 @@ function deleteCard(id) { renderCards(); } -function renameCard(id) { - const page = layout.pages[currentPage]; - const card = page.cards.find(c => c.id === id); +function editCardProps(id) { + const card = findCard(id); if (!card) return; - const name = prompt('New name:', card.label); - if (name) { card.label = name; renderCards(); } + + const p = document.getElementById('popup'); + p.style.borderColor = 'transparent'; + + let typeOpts = ['temp','motor','output','burner','automation'].map(t => + `` + ).join(''); + + let extraFields = ''; + if (card.type === 'temp') { + extraFields = ` +
°C
`; + } else if (card.type === 'motor') { + extraFields = ` +
%
`; + } + + p.innerHTML = ` +
+

Edit Card

+
+ + +
+
+ + +
+
+ + +
+
+ + + + +
+
+ + + ${card.fontSize||18}px +
+ ${extraFields} +
+ + +
+
`; + + // Live preview for color picker + document.getElementById('prop-color').addEventListener('input', e => { + document.getElementById('prop-color-preview').style.background = e.target.value; + }); + document.getElementById('prop-fontsize').addEventListener('input', e => { + document.getElementById('prop-fontsize-val').textContent = e.target.value + 'px'; + }); + + document.getElementById('popup-overlay').classList.add('active'); +} + +function saveCardProps(id) { + const card = findCard(id); + if (!card) return; + + card.label = document.getElementById('prop-name').value || card.label; + card.type = document.getElementById('prop-type').value; + card.width = document.getElementById('prop-width').value; + const color = document.getElementById('prop-color').value; + card.color = color || null; + card.fontSize = parseInt(document.getElementById('prop-fontsize').value) || 18; + + const spEl = document.getElementById('prop-sp'); + if (spEl) card.sp_default = parseInt(spEl.value) || 0; + + closePopup(); + renderCards(); } function toggleCardSize(id) {