CCCPaste

570d66b4e5ab2

<?php
// Zpracování požadavku na přepnutí relé
if (isset($_GET['rele']) && isset($_GET['kanal']) && isset($_GET['stav'])) {
$rele = $_GET['rele'];
$kanal = $_GET['kanal'];
$stav = strtoupper($_GET['stav']);

// Speciální případ pro zásuvku (nemá kanál, jen stav)
if ($rele === 'zasuvka_sekacka') {
exec("sudo /home/leo/skripty/muj_web/zasuvka_kurnik_sekacka.sh $stav");
} else {
// Běžné relé s kanálem
exec("sudo /home/leo/skripty/muj_web/rele_{$rele}.sh $kanal $stav");
}

// Vrátit JSON odpověď
header('Content-Type: application/json');
echo json_encode(['success' => true, 'rele' => $rele, 'kanal' => $kanal, 'stav' => $stav]);
exit;
}
?>




<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT Dashboard</title>
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
font-family: Arial, sans-serif;
}

.dashboard {
max-width: 1200px;
margin: 0 auto;
}

.dashboard-title {
text-align: center;
color: white;
font-size: 32px;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.teplomery-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-bottom: 30px;
min-height: 200px;
width: 100%;
max-width: 800px;
margin: 0 auto 30px auto;
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 20px;
}

.rele-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
min-height: 150px;
width: 100%;
max-width: 800px;
margin: 0 auto 30px auto;
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 20px;
}

.power-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
min-height: 150px;
width: 100%;
max-width: 800px;
margin: 0 auto;
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 20px;
}

.widget {
background: #1e293b;
color: #e2e8f0;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 170px;
height: auto;
flex-shrink: 0;
}

.widget-rele {
background: #1e293b;
color: #e2e8f0;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 220px;
height: auto;
flex-shrink: 0;
}

.widget-power {
background: #1e293b;
color: #e2e8f0;
padding: 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 250px;
height: auto;
flex-shrink: 0;
overflow: hidden;
}

.widget h2 {
text-align: center;
margin: 0 0 10px 0;
font-size: 16px;
color: white;
padding: 5px 0;
}

.widget-rele h2 {
text-align: center;
margin: 0 0 10px 0;
font-size: 16px;
color: white;
padding: 5px 0;
}

.widget-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #444;
}

.widget-row:last-child {
border-bottom: none;
}

.widget-row span:first-child {
font-weight: bold;
}

.status {
text-align: center;
color: white;
font-size: 14px;
margin-bottom: 20px;
padding: 10px;
background: transparent;
border-radius: 5px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}

.status.connected {
background: transparent;
color: white;
}

.status.error {
background: transparent;
color: white;
}

.rele-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #374151;
}

.rele-row:last-child {
border-bottom: none;
}

.rele-row span {
display: flex;
align-items: center;
font-size: 13px;
}

.image-switch {
cursor: pointer;
width: 50px;
height: auto;
vertical-align: middle;
transition: transform 0.1s;
}

.image-switch:active {
transform: scale(0.95);
}

.image-switch.disabled {
opacity: 0.5;
cursor: wait;
}

.power-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
background: #1e293b;
border-bottom: none;
}

.power-device-info {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}

.power-device-icon {
width: 28px;
height: 28px;
background: #e8e8e8;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}

.power-device-name {
color: #ffffff;
font-size: 16px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
width: 100%;
}

.power-metrics {
padding: 0;
background: #1e293b;
}

.power-metric-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 15px;
border-bottom: none;
transition: background 0.15s ease;
}

.power-metric-row:hover {
background: #2d3e52;
}

.power-metric-label {
display: flex;
align-items: center;
gap: 8px;
color: #e2e8f0;
font-size: 13px;
font-weight: 400;
}

.power-metric-label span {
color: #e2e8f0;
}

.power-metric-icon {
font-size: 16px;
width: 20px;
text-align: center;
}

.power-metric-value {
display: flex;
align-items: baseline;
gap: 3px;
color: #ffffff;
font-size: 15px;
font-weight: 500;
}

.power-metric-unit {
color: #e2e8f0;
font-size: 12px;
font-weight: 400;
}

.icon-state { color: #f4d03f; }
.icon-power { color: #5fb878; }
.icon-current { color: #ff9f43; }
.icon-voltage { color: #5eb3f6; }
.icon-energy { color: #26c6da; }

@media (max-width: 768px) {
.teplomery-container,
.rele-container,
.power-container {
flex-direction: column;
align-items: center;
}

.widget, .widget-rele, .widget-power {
width: 100%;
max-width: 300px;
}
}
</style>
</head>
<body>


<div class="dashboard">
<h1 class="dashboard-title">🏠 Domácí Dashboard</h1>

<div id="status" class="status">Načítám data...</div>

<!-- TEPLOMĚRY -->
<div class="teplomery-container">

<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměry sklep --------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměry sklep</h2>
<div class="widget-row">
<span>🔥 Kotel:</span>
<span id="temp_kotel">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Voda:</span>
<span id="temp_voda">-- °C</span>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměr venku ---------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměr venku</h2>
<div class="widget-row">
<span>🌡️ Teplota:</span>
<span id="temp_venku">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Vlhkost:</span>
<span id="hum_venku">-- %</span>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměry zahrada ------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměr zahrada</h2>
<div class="widget-row">
<span>🌡️ Teplota:</span>
<span id="temp_zahrada">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Vlhkost:</span>
<span id="hum_zahrada">-- %</span>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměry koupelna ------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměr koupelna</h2>
<div class="widget-row">
<span>🌡️ Teplota:</span>
<span id="temp_koupelna">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Vlhkost:</span>
<span id="hum_koupelna">-- %</span>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměry loznice ------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměr ložnice</h2>
<div class="widget-row">
<span>🌡️ Teplota:</span>
<span id="temp1">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Vlhkost:</span>
<span id="hum1">-- %</span>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměry pokoj --------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměr pokoj</h2>
<div class="widget-row">
<span>🌡️ Teplota:</span>
<span id="temp2">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Vlhkost:</span>
<span id="hum2">-- %</span>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- teploměry obyvak --------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="widget">
<h2>Teploměr obývák</h2>
<div class="widget-row">
<span>🌡️ Teplota:</span>
<span id="temp3">-- °C</span>
</div>
<div class="widget-row">
<span>💧 Vlhkost:</span>
<span id="hum3">-- %</span>
</div>
</div>

</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele -------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- RELÉ -->
<div class="rele-container">
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele světla ------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Světla -->
<div class="widget-rele">
<h2>Relé světla</h2>

<div class="rele-row">
<span>⭐ Kanál L1</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_l1" data-state="OFF" data-rele="svetla" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_l2" data-state="OFF" data-rele="svetla" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ Kanál L3</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_l3" data-state="OFF" data-rele="svetla" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_l4" data-state="OFF" data-rele="svetla" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele půda --------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Půda -->
<div class="widget-rele">
<h2>Relé půda</h2>

<div class="rele-row">
<span>⭐ Kanál L1</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_puda_l1" data-state="OFF" data-rele="puda" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_puda_l2" data-state="OFF" data-rele="puda" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ Kanál L3</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_puda_l3" data-state="OFF" data-rele="puda" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_puda_l4" data-state="OFF" data-rele="puda" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele garáž -------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Garáž -->
<div class="widget-rele">
<h2>Relé garáž</h2>

<div class="rele-row">
<span>⭐ Kanál L1</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_garaz_l1" data-state="OFF" data-rele="garaz" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_garaz_l2" data-state="OFF" data-rele="garaz" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ Kanál L3</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_garaz_l3" data-state="OFF" data-rele="garaz" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_garaz_l4" data-state="OFF" data-rele="garaz" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele dveře pravé -------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Dveře pravé -->
<div class="widget-rele">
<h2>Relé dveře P</h2>

<div class="rele-row">
<span>⭐ Kanál L1</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_p_l1" data-state="OFF" data-rele="dvere_p" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_p_l2" data-state="OFF" data-rele="dvere_p" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ Kanál L3</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_p_l3" data-state="OFF" data-rele="dvere_p" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_p_l4" data-state="OFF" data-rele="dvere_p" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele dveře levé --------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Dveře levé -->
<div class="widget-rele">
<h2>Relé dveře L</h2>

<div class="rele-row">
<span>⭐ Kanál L1</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_l_l1" data-state="OFF" data-rele="dvere_l" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_l_l2" data-state="OFF" data-rele="dvere_l" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ Reprak AirAux</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_l_l3" data-state="OFF" data-rele="dvere_l" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_dvere_l_l4" data-state="OFF" data-rele="dvere_l" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele venku před dveřmi -------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Venku před dveřmi -->
<div class="widget-rele">
<h2>Relé venku</h2>

<div class="rele-row">
<span>⭐ Kamera Hiseeu</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_venku_l1" data-state="OFF" data-rele="venku" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_venku_l2" data-state="OFF" data-rele="venku" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ TP-Link router</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_venku_l3" data-state="OFF" data-rele="venku" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="state_venku_l4" data-state="OFF" data-rele="venku" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- rele Slepice ------------------------------------------------------------------------------------------------------------------------>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- Slepice -->
<div class="widget-rele">
<h2>Relé slepice</h2>

<div class="rele-row">
<span>⭐ Kamera</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="rele_slepice_l1" data-state="OFF" data-rele="slepice" data-kanal="l1">
</div>

<div class="rele-row">
<span>⭐ Kanál L2</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="rele_slepice_l2" data-state="OFF" data-rele="slepice" data-kanal="l2">
</div>

<div class="rele-row">
<span>⭐ Kanál L3</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="rele_slepice_l3" data-state="OFF" data-rele="slepice" data-kanal="l3">
</div>

<div class="rele-row">
<span>⭐ Kanál L4</span>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="rele_slepice_l4" data-state="OFF" data-rele="slepice" data-kanal="l4">
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

</div>

<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!------------- Power Monitoring -------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------------------------------------------->

<!-- POWER MONITORING -->
<div class="power-container">

<!-- Zásuvka sekačka -->
<div class="widget-power">
<div class="power-header">
<div class="power-device-info">
<div class="power-device-name">Zásuvka sekačka</div>
</div>
</div>

<div class="power-metrics">
<div class="power-metric-row">
<div class="power-metric-label">
<span class="power-metric-icon icon-state">⭐</span>
<span>Stav</span>
</div>
<img src="Switch_off.png" alt="Switch OFF" class="image-switch" id="zasuvka_sekacka_switch" data-state="OFF" data-rele="zasuvka_sekacka" data-kanal="dummy">
</div>

<div class="power-metric-row">
<div class="power-metric-label">
<span class="power-metric-icon icon-power">🔋</span>
<span>Napájení</span>
</div>
<div class="power-metric-value">
<span id="power_napajeni">0</span>
<span class="power-metric-unit">W</span>
</div>
</div>

<div class="power-metric-row">
<div class="power-metric-label">
<span class="power-metric-icon icon-current">🟡</span>
<span>Aktuální</span>
</div>
<div class="power-metric-value">
<span id="power_aktualni">0.00</span>
<span class="power-metric-unit">A</span>
</div>
</div>

<div class="power-metric-row">
<div class="power-metric-label">
<span class="power-metric-icon icon-voltage">⚡</span>
<span>Napětí</span>
</div>
<div class="power-metric-value">
<span id="power_napeti">0</span>
<span class="power-metric-unit">V</span>
</div>
</div>

<div class="power-metric-row">
<div class="power-metric-label">
<span class="power-metric-icon icon-energy">🔌</span>
<span>Energie</span>
</div>
<div class="power-metric-value">
<span id="power_energie">0.00</span>
<span class="power-metric-unit">kWh</span>
</div>
</div>
</div>
</div>

</div>
</div>


<script>
// KONFIGURAČNÍ PROMĚNNÉ
// =====================
const API_URL = "http://192.168.1.5:1880/api/teplomery";
const REFRESH_INTERVAL = 1000;
const SWITCH_OFF_IMG = "Switch_off.png";
const SWITCH_ON_IMG = "Switch_on.png";

let lastClickTime = 0;

/**
* HLAVNÍ FUNKCE PRO NAČÍTÁNÍ DAT
*/
async function nacistData() {
try {
const now = Date.now();
if (now - lastClickTime < 500) {
return;
}

const response = await fetch(API_URL);

if (!response.ok) {
throw new Error("Chyba při načítání dat");
}

const data = await response.json();

//------------------------------------------------------------------------------------------------------
//----- AKTUALIZACE TEPLOMĚRŮ --------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------

// Teploměry ve sklepě
if (data.sklep) {
if (data.sklep.kotel !== null) {
document.getElementById("temp_kotel").innerText = data.sklep.kotel.toFixed(1) + " °C";
} else {
document.getElementById("temp_kotel").innerText = "-- °C";
}

if (data.sklep.voda !== null) {
document.getElementById("temp_voda").innerText = data.sklep.voda.toFixed(1) + " °C";
} else {
document.getElementById("temp_voda").innerText = "-- °C";
}
} else {
document.getElementById("temp_kotel").innerText = "-- °C";
document.getElementById("temp_voda").innerText = "-- °C";
}

// Venkovní teploměr
if (data.venku && data.venku.temperature !== null) {
document.getElementById("temp_venku").innerText = data.venku.temperature.toFixed(1) + " °C";
document.getElementById("hum_venku").innerText = data.venku.humidity.toFixed(1) + " %";
} else {
document.getElementById("temp_venku").innerText = "-- °C";
document.getElementById("hum_venku").innerText = "-- %";
}

// Teploměr zahrada
if (data.teplomer_zahrada && data.teplomer_zahrada.temperature !== null) {
document.getElementById("temp_zahrada").innerText = data.teplomer_zahrada.temperature.toFixed(1) + " °C";
document.getElementById("hum_zahrada").innerText = data.teplomer_zahrada.humidity.toFixed(1) + " %";
} else {
document.getElementById("temp_zahrada").innerText = "-- °C";
document.getElementById("hum_zahrada").innerText = "-- %";
}

// Teploměr koupelna
if (data.koupelna && data.koupelna.temperature !== null) {
document.getElementById("temp_koupelna").innerText = data.koupelna.temperature.toFixed(1) + " °C";
document.getElementById("hum_koupelna").innerText = data.koupelna.humidity.toFixed(1) + " %";
} else {
document.getElementById("temp_koupelna").innerText = "-- °C";
document.getElementById("hum_koupelna").innerText = "-- %";
}

// Teploměr ložnice
if (data.loznice && data.loznice.temperature !== null) {
document.getElementById("temp1").innerText = data.loznice.temperature.toFixed(1) + " °C";
document.getElementById("hum1").innerText = data.loznice.humidity.toFixed(1) + " %";
} else {
document.getElementById("temp1").innerText = "-- °C";
document.getElementById("hum1").innerText = "-- %";
}

// Teploměr pokoj
if (data.pokoj && data.pokoj.temperature !== null) {
document.getElementById("temp2").innerText = data.pokoj.temperature.toFixed(1) + " °C";
document.getElementById("hum2").innerText = data.pokoj.humidity.toFixed(1) + " %";
} else {
document.getElementById("temp2").innerText = "-- °C";
document.getElementById("hum2").innerText = "-- %";
}

// Teploměr obývák
if (data.obyvak && data.obyvak.temperature !== null) {
document.getElementById("temp3").innerText = data.obyvak.temperature.toFixed(1) + " °C";
document.getElementById("hum3").innerText = data.obyvak.humidity.toFixed(1) + " %";
} else {
document.getElementById("temp3").innerText = "-- °C";
document.getElementById("hum3").innerText = "-- %";
}

//------------------------------------------------------------------------------------------------------
//----- AKTUALIZACE STAVU RELÉ -------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------

if (data.rele) {
const updateSwitchImage = (elementId, newState) => {
const imgElement = document.getElementById(elementId);
if (imgElement) {
const isON = newState === "ON";
imgElement.src = isON ? SWITCH_ON_IMG : SWITCH_OFF_IMG;
imgElement.alt = isON ? "Switch ON" : "Switch OFF";
imgElement.dataset.state = newState;
}
};

// Světla
updateSwitchImage("state_l1", data.rele.state_l1);
updateSwitchImage("state_l2", data.rele.state_l2);
updateSwitchImage("state_l3", data.rele.state_l3);
updateSwitchImage("state_l4", data.rele.state_l4);

// Půda
updateSwitchImage("state_puda_l1", data.rele.state_puda_l1);
updateSwitchImage("state_puda_l2", data.rele.state_puda_l2);
updateSwitchImage("state_puda_l3", data.rele.state_puda_l3);
updateSwitchImage("state_puda_l4", data.rele.state_puda_l4);

// Garáž
updateSwitchImage("state_garaz_l1", data.rele.state_garaz_l1);
updateSwitchImage("state_garaz_l2", data.rele.state_garaz_l2);
updateSwitchImage("state_garaz_l3", data.rele.state_garaz_l3);
updateSwitchImage("state_garaz_l4", data.rele.state_garaz_l4);

// Dveře pravé
updateSwitchImage("state_dvere_p_l1", data.rele.state_dvere_p_l1);
updateSwitchImage("state_dvere_p_l2", data.rele.state_dvere_p_l2);
updateSwitchImage("state_dvere_p_l3", data.rele.state_dvere_p_l3);
updateSwitchImage("state_dvere_p_l4", data.rele.state_dvere_p_l4);

// Dveře levé
updateSwitchImage("state_dvere_l_l1", data.rele.state_dvere_l_l1);
updateSwitchImage("state_dvere_l_l2", data.rele.state_dvere_l_l2);
updateSwitchImage("state_dvere_l_l3", data.rele.state_dvere_l_l3);
updateSwitchImage("state_dvere_l_l4", data.rele.state_dvere_l_l4);

// Venku
updateSwitchImage("state_venku_l1", data.rele.state_venku_l1);
updateSwitchImage("state_venku_l2", data.rele.state_venku_l2);
updateSwitchImage("state_venku_l3", data.rele.state_venku_l3);
updateSwitchImage("state_venku_l4", data.rele.state_venku_l4);

// Slepice
updateSwitchImage("rele_slepice_l1", data.rele.rele_slepice_l1);
updateSwitchImage("rele_slepice_l2", data.rele.rele_slepice_l2);
updateSwitchImage("rele_slepice_l3", data.rele.rele_slepice_l3);
updateSwitchImage("rele_slepice_l4", data.rele.rele_slepice_l4);
}

//------------------------------------------------------------------------------------------------------
//----- AKTUALIZACE ZÁSUVKY SEKAČKY -------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------

if (data.zasuvka_sekacka) {
// Aktualizace přepínače
const imgElement = document.getElementById("zasuvka_sekacka_switch");
if (imgElement) {
const isON = data.zasuvka_sekacka.state === "ON";
imgElement.src = isON ? SWITCH_ON_IMG : SWITCH_OFF_IMG;
imgElement.alt = isON ? "Switch ON" : "Switch OFF";
imgElement.dataset.state = data.zasuvka_sekacka.state;
}

// Aktualizace hodnot
document.getElementById("power_napajeni").innerText = data.zasuvka_sekacka.power || 0;
document.getElementById("power_aktualni").innerText = (data.zasuvka_sekacka.current || 0).toFixed(2);
document.getElementById("power_napeti").innerText = data.zasuvka_sekacka.voltage || 0;
document.getElementById("power_energie").innerText = (data.zasuvka_sekacka.energy || 0).toFixed(2);
}

// Aktualizace stavového řádku
const statusElement = document.getElementById("status");
statusElement.innerText = "✓ Připojeno - " + new Date().toLocaleTimeString();
statusElement.className = "status connected";

} catch (error) {
console.error("Chyba:", error);
const statusElement = document.getElementById("status");
statusElement.innerText = "✗ Chyba připojení";
statusElement.className = "status error";
}
}

/**
* FUNKCE PRO OVLÁDÁNÍ RELÉ
*/
async function ovladatRele(imgElement) {
const rele = imgElement.dataset.rele;
const kanal = imgElement.dataset.kanal;
const currentState = imgElement.dataset.state;
const newState = currentState === "ON" ? "OFF" : "ON";

imgElement.classList.add('disabled');

try {
lastClickTime = Date.now();

const statusElement = document.getElementById("status");
statusElement.innerText = `Přepínám ${rele}...`;
statusElement.className = "status";

const response = await fetch(`?rele=${rele}&kanal=${kanal}&stav=${newState.toLowerCase()}`);

if (!response.ok) {
throw new Error("Chyba při ovládání");
}

const result = await response.json();

if (result.success) {
imgElement.src = newState === "ON" ? SWITCH_ON_IMG : SWITCH_OFF_IMG;
imgElement.alt = newState === "ON" ? "Switch ON" : "Switch OFF";
imgElement.dataset.state = newState;

statusElement.innerText = `✓ ${rele} přepnuto na ${newState}`;
statusElement.className = "status connected";
} else {
throw new Error("Přepnutí selhalo");
}

setTimeout(() => {
lastClickTime = 0;
nacistData();
}, 200);

} catch (error) {
console.error("Chyba:", error);
const statusElement = document.getElementById("status");
statusElement.innerText = "✗ Chyba při přepínání";
statusElement.className = "status error";

imgElement.src = currentState === "ON" ? SWITCH_ON_IMG : SWITCH_OFF_IMG;
imgElement.dataset.state = currentState;
lastClickTime = 0;
} finally {
imgElement.classList.remove('disabled');
}
}

// INICIALIZACE DASHBOARDU
document.querySelectorAll('.image-switch').forEach(img => {
img.addEventListener('click', function() {
ovladatRele(this);
});
});

nacistData();
setInterval(nacistData, REFRESH_INTERVAL);

console.log("Dashboard s 7 relé, 7 teploměrů a 1 zásuvkou spuštěn");
</script>

</body>
</html>