TKK_E32231388/monitoring.php

<!-- HEADER -->
<div class="mb-6 flex justify-between items-center">
    <div>
        <h2 class="text-2xl font-bold text-gray-700">Dashboard Monitoring</h2>
        <p class="text-gray-500 text-sm">Realtime IoT Fish Dryer System</p>
    </div>
</div>

<!-- KPI -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">

    <!-- Suhu -->
    <div class="bg-white p-5 rounded-2xl shadow hover:shadow-xl hover:-translate-y-1 transition">
        <div class="flex items-center justify-between">
            <p class="text-gray-500">Suhu</p>
            <i class="fas fa-thermometer-half text-red-400"></i>
        </div>
        <h2 id="suhu" class="text-3xl font-bold text-gray-700 mt-2">-- °C</h2>
    </div>

    <!-- Kelembaban -->
    <div class="bg-white p-5 rounded-2xl shadow hover:shadow-xl hover:-translate-y-1 transition">
        <div class="flex items-center justify-between">
            <p class="text-gray-500">Kelembaban</p>
            <i class="fas fa-tint text-blue-400"></i>
        </div>
        <h2 id="kelembaban" class="text-3xl font-bold text-gray-700 mt-2">-- %</h2>
    </div>

</div>

<!-- GRAFIK -->
<div class="grid grid-cols-1 gap-6">

    <!-- GRAFIK -->
    <div class="bg-white p-6 rounded-2xl shadow h-[320px] flex flex-col">
        <h3 class="text-lg font-semibold mb-2 text-gray-700">
            Grafik Suhu & Kelembaban
        </h3>

        <div class="flex-1">
            <canvas id="chart"></canvas>
        </div>
    </div>
</div>
<!-- STATUS DEVICE -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 mb-6">

    <!-- Heater -->
    <div class="bg-white border rounded-lg p-4 flex justify-between items-center">
        <p class="text-gray-600">Heater</p>
        <span id="heaterStatus" class="font-semibold text-gray-400">OFF</span>
    </div>

    <!-- Fan -->
    <div class="bg-white border rounded-lg p-4 flex justify-between items-center">
        <p class="text-gray-600">Fan</p>
        <span id="fanStatus" class="font-semibold text-gray-400">OFF</span>
    </div>

</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";

const firebaseConfig = {
  apiKey: "AIzaSyC-Wdu6vNC0dRyF33S3_C2wpVt9I6wnp0w",
  authDomain: "smartoven-f9fdd.firebaseapp.com",
  databaseURL: "https://smartoven-f9fdd-default-rtdb.firebaseio.com/",
  projectId: "smartoven-f9fdd",
  appId: "1:1005261996032:web:1bcb483b922275f08f98e5"
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// ELEMENT
const suhuEl = document.getElementById("suhu");
const humEl = document.getElementById("kelembaban");
const heaterEl = document.getElementById("heaterStatus");
const fanEl = document.getElementById("fanStatus");

// ==========================
// 📊 CHART FIX
// ==========================
const chart = new Chart(document.getElementById("chart"), {
    type: 'line',
    data: {
        labels: [],
        datasets: [
            {
                label: "Suhu (°C)",
                data: [],
                borderColor: "#ef4444",
                backgroundColor: "rgba(239,68,68,0.1)",
                tension: 0.4,
                fill: true
            },
            {
                label: "Kelembaban (%)",
                data: [],
                borderColor: "#3b82f6",
                backgroundColor: "rgba(59,130,246,0.1)",
                tension: 0.4,
                fill: true
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// ==========================
// 🔥 SENSOR REALTIME
// ==========================
onValue(ref(db, 'sensor'), (snapshot) => {
    const data = snapshot.val();
    if (!data) return;

    const time = new Date().toLocaleTimeString();

    // 🔥 SESUAIKAN FIELD FIREBASE
    const suhu = data.temperature ?? data.suhu ?? 0;
    const hum  = data.humidity ?? data.kelembaban ?? 0;
    

    // tampil ke card
    suhuEl.innerText = suhu + " °C";
    humEl.innerText = hum + " %";

    // masuk ke chart
    chart.data.labels.push(time);
    chart.data.datasets[0].data.push(suhu);
    chart.data.datasets[1].data.push(hum);

    // batasi data (biar ga numpuk)
    if (chart.data.labels.length > 10) {
        chart.data.labels.shift();
        chart.data.datasets.forEach(ds => ds.data.shift());
    }

    chart.update();
});
onValue(ref(db, 'manual'), (snapshot) => {
    const data = snapshot.val();
    if (!data) return;

    // HEATER
    if (data.heater == 1) {
        heaterEl.innerText = "🔥 ON";
        heaterEl.classList.remove("text-gray-400");
        heaterEl.classList.add("text-red-500");
    } else {
        heaterEl.innerText = "OFF";
        heaterEl.classList.remove("text-red-500");
        heaterEl.classList.add("text-gray-400");
    }

    // FAN
    if (data.fan == 1) {
        fanEl.innerText = "🌀 ON";
        fanEl.classList.remove("text-gray-400");
        fanEl.classList.add("text-blue-500");
    } else {
        fanEl.innerText = "OFF";
        fanEl.classList.remove("text-blue-500");
        fanEl.classList.add("text-gray-400");
    }
});
</script>