37 lines
8.3 KiB
JavaScript
37 lines
8.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded',()=>{
|
||
const q=new URLSearchParams(location.search);
|
||
document.documentElement.dataset.theme='dark';
|
||
const view=q.get('view')||'dashboard';
|
||
document.querySelectorAll('.view').forEach(v=>v.classList.toggle('active',v.dataset.view===view));
|
||
if(view==='dashboard'){
|
||
document.querySelector('#summaryText').textContent='3 urządzenia online · 2 aktywne termostaty';
|
||
document.querySelector('#metrics').innerHTML='<span>Online <b>3/3</b></span><span>Aktywne <b>2</b></span>';
|
||
document.querySelector('#heroTemperature').innerHTML='21.4<small>°C</small>';
|
||
document.querySelector('#houseClimate').innerHTML='<div class="house-climate-head"><div><h3>Tryb domu</h3><p>Wspólne ustawienia dla stref.</p></div><span class="outside-pill">Na zewnątrz 12.8°C</span></div><div class="house-mode-row"><button class="active">Grzanie</button><button>Chłodzenie</button></div><div class="house-preset-row"><button>Auto</button><button class="active">Komfort</button><button>Sen</button><button>Poza domem</button></div>';
|
||
document.querySelector('#controlPlan').innerHTML='<article class="list-card"><div class="list-card-head"><div><h3>Salon</h3><p>Utrzymuj 21.5°C do 22:30</p></div><span class="badge">Aktywne</span></div></article><article class="list-card"><div class="list-card-head"><div><h3>Sypialnia</h3><p>Tryb nocny od 22:30</p></div><span class="badge">za 2h</span></div></article>';
|
||
}
|
||
if(view==='simulation'){
|
||
document.querySelector('#simulationTarget').innerHTML='<option>Cały dom</option><option>Salon</option><option>Sypialnia</option>';
|
||
document.querySelector('#simulationSummary').innerHTML='<article class="panel simulation-summary-card"><small>Tryb domu</small><strong>Grzanie</strong><span>Strategia: temperatura zadana</span></article><article class="panel simulation-summary-card"><small>Tryb nocny</small><strong>Wyłączony</strong><span>22:00 → 06:00</span></article><article class="panel simulation-summary-card"><small>Na zewnątrz</small><strong>12.8°C</strong><span>Aktualizacja 08:30</span></article><article class="panel simulation-summary-card"><small>Aktywne strefy</small><strong>2</strong><span>1 strefa zgłasza zapotrzebowanie</span></article>';
|
||
const board=document.querySelector('#simulationFlowBoard'); board.style.width='1325px'; board.style.height='390px';
|
||
board.innerHTML='<div class="flow-lane-label" style="top:128px"><strong>Salon</strong><span>GREE Salon</span></div><article class="flow-node input" style="left:45px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Temperatura</span><b class="flow-node-badge active">●</b></div><h3>Salon</h3><strong>20.8°C</strong><p>Home Assistant</p></article><article class="flow-node logic" style="left:305px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Termostat</span></div><h3>Salon</h3><strong>21.5°C</strong><p>Komfort</p></article><article class="flow-node logic decision demand" style="left:565px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Decyzja</span><b class="flow-node-badge active">▶</b></div><h3>Grzanie</h3><strong>Potrzeba ciepła</strong><p>Poniżej celu</p></article><article class="flow-node action" style="left:825px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Polecenie</span></div><h3>GREE Salon</h3><strong>22.0°C · Auto</strong><p>Quiet: wył.</p></article>';
|
||
document.querySelector('#simulationTimeline').innerHTML='<article class="simulation-timeline-item"><time>08:45</time><div><strong>Salon</strong><p>Komfort · 21.5°C · GREE Salon</p></div></article><article class="simulation-timeline-item"><time>22:00</time><div><strong>Cały dom</strong><p>Tryb nocny</p></div></article><article class="simulation-timeline-item"><time>06:00 jutro</time><div><strong>Sypialnia</strong><p>Komfort · 20.5°C · GREE Sypialnia</p></div></article>';
|
||
document.querySelector('#simulationRules').innerHTML='<article class="simulation-rule-card"><div class="simulation-rule-head"><div><span class="eyebrow">Automatyzacja</span><h3>Otwarte okno</h3></div><span class="badge active">Stan</span></div><p>Urządzenie: GREE Salon</p><div class="simulation-rule-action">Wyłącz termostat, gdy okno pozostaje otwarte.</div><div class="simulation-rule-meta"><small>Ostatnio: 07:12</small><small>Gotowa: teraz</small></div></article><article class="simulation-rule-card"><div class="simulation-rule-head"><div><span class="eyebrow">Automatyzacja</span><h3>Tani prąd</h3></div><span class="badge active">Próg</span></div><p>Urządzenie: GREE Sypialnia</p><div class="simulation-rule-action">Podnieś temperaturę docelową o 0.5°C.</div><div class="simulation-rule-meta"><small>Ostatnio: wczoraj</small><small>Gotowa: teraz</small></div></article>';
|
||
}
|
||
if(view==='flows'){
|
||
document.querySelector('#flowListCount').textContent='3 flow';
|
||
document.querySelector('#flowList').innerHTML=`<article class="list-card flow-card"><div class="list-card-head"><div><h3>Okno w salonie</h3><p>Wyłącza grzanie, gdy okno jest otwarte.</p></div><button class="zone-enable-toggle active"><span>✓</span>Włączone</button></div><div class="card-stats"><div class="card-stat"><small>Bloki</small><strong>5</strong></div><div class="card-stat"><small>Harmonogramy</small><strong>0</strong></div><div class="card-stat"><small>Automatyzacje</small><strong>1</strong></div></div><div class="card-footer"><small>1 automatyzacja</small><div class="card-menu"><button>Otwórz edytor</button><button class="danger">Usuń</button></div></div></article><article class="list-card flow-card is-disabled"><div class="list-card-head"><div><h3>Tani prąd</h3><p>Podbija temperaturę przy niskiej cenie energii.</p></div><button class="zone-enable-toggle"><span>○</span>Wyłączone</button></div><div class="card-stats"><div class="card-stat"><small>Bloki</small><strong>7</strong></div><div class="card-stat"><small>Harmonogramy</small><strong>1</strong></div><div class="card-stat"><small>Automatyzacje</small><strong>2</strong></div></div><div class="card-footer"><small>1 harmonogram · 2 automatyzacje</small><div class="card-menu"><button>Otwórz edytor</button><button class="danger">Usuń</button></div></div></article>`;
|
||
}
|
||
if(q.get('editor')==='1'){
|
||
document.querySelector('#flowEditor').hidden=false; document.body.classList.add('flow-editor-open');
|
||
document.querySelector('#flowName').hidden=true; document.querySelector('#flowNameView').hidden=false; document.querySelector('#flowNameText').textContent='Okno w salonie';
|
||
document.querySelector('#flowCompileStatus').textContent='0 harm. · 1 autom.'; document.querySelector('#flowSaveStatus').textContent='Zapisano';
|
||
document.querySelector('#flowInterpretation').textContent='Jeśli okno w salonie jest otwarte przez 30 s, wyłącz termostat Salon.';
|
||
document.querySelector('#flowRuntimeSummary').textContent='Ostatnie wykonanie: 07:12 · wynik: prawda';
|
||
document.querySelector('#flowEmptyHint').style.display='none';
|
||
document.querySelector('#flowNodes').innerHTML=`<div class="flow-node flow-node-sensor selected" style="left:60px;top:80px"><div class="flow-node-head">Wspólne wejście <button>×</button></div><div class="flow-node-body">Okno w salonie<br><div class="flow-node-current"><span>Teraz</span><strong>otwarte</strong></div></div><button class="flow-port flow-port-out"></button></div><div class="flow-node flow-node-timeop" style="left:300px;top:160px"><button class="flow-port flow-port-in"></button><div class="flow-node-head">Utrzymuje się przez… <button>×</button></div><div class="flow-node-body">30 sekund</div><button class="flow-port flow-port-out"></button></div><div class="flow-node flow-node-action" style="left:550px;top:95px"><button class="flow-port flow-port-in"></button><div class="flow-node-head">Termostat <button>×</button></div><div class="flow-node-body">Salon · wyłącz</div></div>`;
|
||
document.querySelector('#flowInspector').classList.add('has-selection');
|
||
document.querySelector('#flowInspector').innerHTML='<div class="flow-inspector-head"><div><span class="eyebrow">Ustawienia bloku</span><h3>Wspólne wejście</h3></div><div class="flow-inspector-head-actions"><button class="flow-inspector-close">×</button></div></div><label><span>Źródło</span><select><option>Okno w salonie</option></select></label><p class="field-note">Czujnik używany tylko we Flow. Nie jest zapisywany do metryk.</p>';
|
||
}
|
||
});
|