retr0/Shinebridge
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Energie-Dashboard Nodes größer (R=56), Labels aus API, Abrechnungsperiode konfig. (v1.7.1)

Browse Source 
- SVG-Nodes: Radius 44 → 56, Icon 22 → 26px, Abstände neu berechnet
- Segment-Pfade an neue Positionen angepasst (40px Abstand Kante→Kante)
- period.monthly.label / yearly.label statt hardcoded "Diesen Monat" / "Dieses Jahr"
- billing_day/billing_month: history.period_key(), /api/period-energy, Settings-UI

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
retr0
2026-04-29 07:35:48 +02:00
parent e9ca2fcc7d
commit 13de5ff976
4 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
haos-addon/src/web/index.html
+35 -24
View File
@@ -213,7 +213,16 @@
<input type="number" id="cfg-price-import" step="0.001" placeholder="0.300"></div>
<div class="field"><label>Einspeisevergütung (€/kWh)</label>
<input type="number" id="cfg-price-export" step="0.001" placeholder="0.080"></div>
<button class="btn btn-primary" onclick="savePrices()">Preise speichern</button>
<div class="field"><label>Abrechnungsjahr beginnt am</label>
<div style="display:flex;gap:8px;align-items:center">
<input type="number" id="cfg-billing-day" min="1" max="28" placeholder="1" style="width:72px">
<span style="color:var(--text-dim)">.</span>
<input type="number" id="cfg-billing-month" min="1" max="12" placeholder="1" style="width:72px">
<span style="color:var(--text-dim);font-size:11px">(Tag . Monat)</span>
</div>
<div style="font-size:11px;color:var(--text-dim);margin-top:4px">z.B. 1 . 4 = 01. April</div>
</div>
<button class="btn btn-primary" onclick="savePrices()">Speichern</button>
</div>
<div class="settings-section">
@@ -424,22 +433,22 @@ function renderEnergy(inverters, aggregates, period) {
};
function icon(name, cx, cy, col, sz) {
sz = sz || 22;
sz = sz || 26;
const s = (sz / 20).toFixed(4);
return `<g transform="translate(${(cx-sz/2).toFixed(1)},${(cy-sz/2).toFixed(1)}) scale(${s})" stroke="${col}" fill="none">${ICONS[name]}</g>`;
}
// Circle node — HA style
const R = 44;
const R = 56;
function node(cx, cy, iconName, topLabel, valW, col, active, sub) {
const c = active ? col : C.dim;
const sw = active ? 2 : 1;
const fi = active ? '0.08' : '0.03';
return `<g>
<circle cx="${cx}" cy="${cy}" r="${R}" fill="${col}" fill-opacity="${fi}" stroke="${c}" stroke-width="${sw}"/>
${icon(iconName, cx, cy - 11, c, 22)}
<text x="${cx}" y="${cy+7}" text-anchor="middle" font-size="12" font-weight="700" fill="${active?col:C.txt}" dominant-baseline="middle">${fW(valW)}</text>
<text x="${cx}" y="${cy+21}" text-anchor="middle" font-size="9" fill="${C.dim}" dominant-baseline="middle" letter-spacing=".06em">${topLabel}${sub?' · '+sub:''}</text>
${icon(iconName, cx, cy - 15, c, 26)}
<text x="${cx}" y="${cy+7}" text-anchor="middle" font-size="14" font-weight="700" fill="${active?col:C.txt}" dominant-baseline="middle">${fW(valW)}</text>
<text x="${cx}" y="${cy+24}" text-anchor="middle" font-size="10" fill="${C.dim}" dominant-baseline="middle" letter-spacing=".06em">${topLabel}${sub?' · '+sub:''}</text>
</g>`;
}
@@ -457,15 +466,13 @@ function renderEnergy(inverters, aggregates, period) {
).join('');
}
// Path segments (bezier from node-edge to node-edge)
// Solar(145,75) bottom→ House(260,180) top; Grid(375,75) bottom→ House top
// House bottom → Battery(145,292) top; House bottom → EV(375,292) top
// Kreuz-Layout: Solar oben, Grid links, Haus Mitte, Batterie rechts, Wallbox unten (optional)
// Kreuz-Layout: Solar(260,72) oben, Grid(108,224) links, Haus(260,224) Mitte,
// Batterie(412,224) rechts, Wallbox(260,376) unten (optional). R=56, Abstand=40px.
const SEG = [
{ id:'ep-pv', d:`M 260,121 C 258,138 262,146 260,158`, col:C.pv, on:pvOn, rev:false },
{ id:'ep-grid', d:`M 140,200 C 162,197 192,203 214,200`, col:impOn?C.imp:C.exp, on:impOn||expOn, rev:expOn },
{ id:'ep-bat', d:`M 306,200 C 330,197 356,203 380,200`, col:C.bat, on:chOn||dchOn, rev:dchOn },
...(hasEV ? [{ id:'ep-ev', d:`M 260,244 C 258,261 262,269 260,279`, col:C.ev, on:evOn, rev:false }] : []),
{ id:'ep-pv', d:`M 260,128 C 258,148 262,152 260,168`, col:C.pv, on:pvOn, rev:false },
{ id:'ep-grid', d:`M 164,224 C 183,220 185,228 204,224`, col:impOn?C.imp:C.exp, on:impOn||expOn, rev:expOn },
{ id:'ep-bat', d:`M 316,224 C 335,220 337,228 356,224`, col:C.bat, on:chOn||dchOn, rev:dchOn },
...(hasEV ? [{ id:'ep-ev', d:`M 260,280 C 258,300 262,304 260,320`, col:C.ev, on:evOn, rev:false }] : []),
];
const defs = SEG.map(s => `<path id="${s.id}" d="${s.d}" fill="none"/>`).join('');
@@ -481,16 +488,16 @@ function renderEnergy(inverters, aggregates, period) {
const batLbl = chOn ? 'LADEN' : dchOn ? 'ENTLADEN' : 'BATTERIE';
const batSub = batSoc != null ? Math.round(batSoc) + '%' : '';
const svgH = hasEV ? 410 : 278;
const svgH = hasEV ? 460 : 310;
const svg = `<svg viewBox="0 0 520 ${svgH}" width="100%" style="display:block" xmlns="http://www.w3.org/2000/svg">
<defs>${defs}</defs>
${lines}
${dotsSvg}
${node(260, 77, 'solar', 'SOLAR', pvW, C.pv, pvOn, '')}
${node( 95, 200, 'grid', gridLbl, gridVal, gridCol, impOn||expOn, '')}
${node(260, 200, 'house', 'HAUS', houseW, C.txt, true, '')}
${node(425, 200, 'bat', batLbl, batVal, C.bat, chOn||dchOn, batSub)}
${hasEV ? node(260, 323, 'ev', 'WALLBOX', evW, C.ev, evOn, '') : ''}
${node(260, 72, 'solar', 'SOLAR', pvW, C.pv, pvOn, '')}
${node(108, 224, 'grid', gridLbl, gridVal, gridCol, impOn||expOn, '')}
${node(260, 224, 'house', 'HAUS', houseW, C.txt, true, '')}
${node(412, 224, 'bat', batLbl, batVal, C.bat, chOn||dchOn, batSub)}
${hasEV ? node(260, 376, 'ev', 'WALLBOX', evW, C.ev, evOn, '') : ''}
</svg>`;
period = period || {};
@@ -525,8 +532,8 @@ function renderEnergy(inverters, aggregates, period) {
<div class="energy-kwh" style="margin-bottom:16px">${imp}${exp}</div>`;
}
const cards = sectionCards('Diesen Monat', mon, C.imp) +
sectionCards('Dieses Jahr', yr, C.imp);
const cards = sectionCards(mon.label || 'Diesen Monat', mon, C.imp) +
sectionCards(yr.label || 'Dieses Jahr', yr, C.imp);
el.innerHTML = `<div class="energy-wrap">
<div class="energy-svg-wrap">${svg}</div>
@@ -768,12 +775,16 @@ async function loadSettings() {
document.getElementById("cfg-mqtt-user").value = globalConfig.mqtt_user || "";
document.getElementById("cfg-price-import").value = globalConfig.price_import ?? 0.30;
document.getElementById("cfg-price-export").value = globalConfig.price_export ?? 0.08;
document.getElementById("cfg-billing-day").value = globalConfig.billing_day ?? 1;
document.getElementById("cfg-billing-month").value = globalConfig.billing_month ?? 1;
}
async function savePrices() {
const body = {
price_import: parseFloat(document.getElementById("cfg-price-import").value),
price_export: parseFloat(document.getElementById("cfg-price-export").value),
price_import: parseFloat(document.getElementById("cfg-price-import").value),
price_export: parseFloat(document.getElementById("cfg-price-export").value),
billing_day: parseInt(document.getElementById("cfg-billing-day").value),
billing_month: parseInt(document.getElementById("cfg-billing-month").value),
};
try {
await fetchJSON(api("api/config"), {