220 lines
6.7 KiB
HTML
220 lines
6.7 KiB
HTML
<div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
|
|
|
|
<!-- Controls -->
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
|
|
<label style="display:flex;gap:6px;align-items:center;">
|
|
<span>Zeitraum</span>
|
|
<select id="range">
|
|
<option value="day">Tag</option>
|
|
<option value="week">Woche</option>
|
|
<option value="month">Monat</option>
|
|
<option value="year">Jahr</option>
|
|
<option value="total">Gesamt</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label style="display:flex;gap:6px;align-items:center;">
|
|
<span>Datum</span>
|
|
<input id="date" type="date" />
|
|
</label>
|
|
|
|
<button id="prev" type="button">◀</button>
|
|
<button id="today" type="button">Heute</button>
|
|
<button id="next" type="button">▶</button>
|
|
</div>
|
|
|
|
<div id="period" style="margin-top:10px;font-size:15px;font-weight:600;"></div>
|
|
<div id="hint" style="margin-top:6px;font-size:15px;font-weight:700;"></div>
|
|
|
|
<div id="grid"
|
|
style="margin-top:14px;
|
|
display:grid;
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
gap:14px;">
|
|
</div>
|
|
|
|
<div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
|
|
</div>
|
|
|
|
<style>
|
|
@media (max-width:720px){
|
|
#grid{grid-template-columns:1fr}
|
|
}
|
|
|
|
#wrap{
|
|
position:relative;
|
|
overflow:hidden;
|
|
min-height:100vh;
|
|
background:#121216;
|
|
}
|
|
|
|
#wrap::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:-35%;
|
|
background:
|
|
radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,.42), transparent 60%),
|
|
radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,.38), transparent 62%),
|
|
radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,.26), transparent 64%);
|
|
filter:blur(18px);
|
|
pointer-events:none;
|
|
}
|
|
|
|
#wrap>*{position:relative;z-index:1}
|
|
|
|
#hint .kv{margin-right:14px;white-space:nowrap}
|
|
#hint .kv b{font-weight:900}
|
|
</style>
|
|
|
|
<script>
|
|
(function(){
|
|
|
|
const elRange = document.getElementById('range');
|
|
const elDate = document.getElementById('date');
|
|
const elPrev = document.getElementById('prev');
|
|
const elToday = document.getElementById('today');
|
|
const elNext = document.getElementById('next');
|
|
const elPeriod = document.getElementById('period');
|
|
const elHint = document.getElementById('hint');
|
|
const elGrid = document.getElementById('grid');
|
|
const elErr = document.getElementById('err');
|
|
|
|
function showErr(e){
|
|
elErr.textContent = e?.message || e;
|
|
}
|
|
|
|
function ra(){
|
|
return window.requestAction || window.parent?.requestAction || null;
|
|
}
|
|
|
|
function send(id,val){
|
|
const f = ra();
|
|
if(f) try{f(id,val)}catch(e){showErr(e)}
|
|
}
|
|
|
|
function fmt(d){
|
|
const p=n=>String(n).padStart(2,'0');
|
|
return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()}`;
|
|
}
|
|
|
|
function monthName(m){
|
|
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m];
|
|
}
|
|
|
|
function isoWeek(d){
|
|
d=new Date(Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()));
|
|
d.setUTCDate(d.getUTCDate()+4-(d.getUTCDay()||7));
|
|
const y=d.getUTCFullYear();
|
|
const s=new Date(Date.UTC(y,0,1));
|
|
return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
|
|
}
|
|
|
|
function render(data){
|
|
if(!data) return;
|
|
|
|
elRange.value = data.range || 'day';
|
|
elDate.value = data.date || '';
|
|
|
|
elDate.disabled = (data.range === 'total');
|
|
|
|
// Zeitraum-Anzeige
|
|
if (data.range === 'total') {
|
|
// ✅ Wunsch: bei Gesamt nix anzeigen
|
|
elPeriod.textContent = '';
|
|
} else if (data.tStart && data.tEnd) {
|
|
const s = new Date(data.tStart * 1000);
|
|
const e = new Date(data.tEnd * 1000 - 1000);
|
|
|
|
if (data.range === 'day')
|
|
elPeriod.textContent = `Zeitraum: ${fmt(s)}`;
|
|
else if (data.range === 'week')
|
|
elPeriod.textContent = `Zeitraum: Woche ${isoWeek(s)}`;
|
|
else if (data.range === 'month')
|
|
elPeriod.textContent = `Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
|
|
else if (data.range === 'year')
|
|
elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
|
|
else
|
|
elPeriod.textContent = ''; // fallback: lieber leer als falsch
|
|
} else {
|
|
elPeriod.textContent = '';
|
|
}
|
|
|
|
// Keine Daten
|
|
if(data.hasData === false){
|
|
elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
|
|
elGrid.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
// Werte
|
|
const v = data.values || {};
|
|
elHint.innerHTML = `
|
|
<span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span>
|
|
<span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2) || 0} kWh</span>
|
|
<span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2) || 0} kWh</span>
|
|
<span class="kv"><b>Einspeisung:</b> ${v.Einspeisung?.toFixed(2) || (0)} kWh</span>
|
|
`;
|
|
|
|
const donut = (t, p, c) => {
|
|
const r = 56;
|
|
const C = 2 * Math.PI * r;
|
|
const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
|
|
|
|
return `
|
|
<div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;">
|
|
<div style="font-weight:800;margin-bottom:-6px;font-size:15px;">
|
|
${t}
|
|
</div>
|
|
|
|
<div style="position:relative;width:160px;height:160px;">
|
|
<svg width="160" height="160" viewBox="0 0 160 160">
|
|
<circle cx="80" cy="80" r="${r}"
|
|
stroke="rgba(255,255,255,0.18)"
|
|
stroke-width="18"
|
|
fill="none" />
|
|
|
|
<circle cx="80" cy="80" r="${r}"
|
|
stroke="${c}"
|
|
stroke-width="18"
|
|
fill="none"
|
|
stroke-linecap="butt"
|
|
stroke-dasharray="${dash} ${C}"
|
|
transform="rotate(-90 80 80)"
|
|
style="filter: drop-shadow(0 0 12px ${c});" />
|
|
</svg>
|
|
|
|
<div style="position:absolute;inset:0;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:24px;font-weight:900;">
|
|
${Number(p).toFixed(1)}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const prod = v.Produktion || 0;
|
|
const cons = v.Hausverbrauch || 0;
|
|
const grid = v.Netz || 0;
|
|
const feed = v.Einspeisung || 0;
|
|
const eigen = Math.max(cons - grid, 0);
|
|
|
|
elGrid.innerHTML =
|
|
donut('Eigenverbrauchsquote', prod ? (eigen / prod * 100) : 0, '#63B3FF') +
|
|
donut('Autarkiegrad', cons ? (eigen / cons * 100) : 0, '#A855F7');
|
|
}
|
|
|
|
window.handleMessage = d=>{
|
|
try{if(typeof d==='string')d=JSON.parse(d)}catch{}
|
|
render(d);
|
|
};
|
|
|
|
elRange.onchange = ()=>send('SetRange',elRange.value);
|
|
elDate.onchange = ()=>send('SetDate',elDate.value);
|
|
elPrev.onclick = ()=>send('Prev',1);
|
|
elNext.onclick = ()=>send('Next',1);
|
|
elToday.onclick = ()=>send('Today',1);
|
|
|
|
})();
|
|
</script>
|