119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
|
|
import { getDatabase, ref, onValue, set, push } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
|
|
|
|
// 🔥 CONFIG
|
|
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 logEl = document.getElementById("log");
|
|
const heaterEl = document.getElementById("heater");
|
|
const fanEl = document.getElementById("fan");
|
|
const historyTable = document.getElementById("historyTable");
|
|
|
|
// =======================
|
|
// 🔥 REALTIME SENSOR
|
|
// =======================
|
|
onValue(ref(db, 'sensor'), (snapshot) => {
|
|
const data = snapshot.val();
|
|
if (!data) return;
|
|
|
|
const time = new Date().toLocaleTimeString();
|
|
|
|
if (suhuEl) suhuEl.innerText = data.suhu + " °C";
|
|
if (humEl) humEl.innerText = data.kelembaban + " %";
|
|
|
|
if (logEl) {
|
|
logEl.innerHTML += `
|
|
<tr>
|
|
<td>${time}</td>
|
|
<td>${data.suhu}</td>
|
|
<td>${data.kelembaban}</td>
|
|
</tr>`;
|
|
}
|
|
|
|
// simpan ke history
|
|
push(ref(db, 'history'), {
|
|
suhu: data.suhu,
|
|
kelembaban: data.kelembaban,
|
|
waktu: time
|
|
});
|
|
});
|
|
|
|
// =======================
|
|
// 🔥 STATUS CONTROL
|
|
// =======================
|
|
onValue(ref(db, 'control'), (snap) => {
|
|
const d = snap.val();
|
|
if (!d) return;
|
|
|
|
if (heaterEl) {
|
|
heaterEl.innerText = d.heater ? "ON" : "OFF";
|
|
heaterEl.className = d.heater ? "text-green-500" : "text-red-500";
|
|
}
|
|
|
|
if (fanEl) {
|
|
fanEl.innerText = d.fan ? "ON" : "OFF";
|
|
fanEl.className = d.fan ? "text-green-500" : "text-red-500";
|
|
}
|
|
});
|
|
|
|
// =======================
|
|
// 🔥 KONTROL
|
|
// =======================
|
|
window.setHeater = (val) => {
|
|
set(ref(db, 'control/heater'), val);
|
|
};
|
|
|
|
window.setFan = (val) => {
|
|
set(ref(db, 'control/fan'), val);
|
|
};
|
|
|
|
window.setTarget = () => {
|
|
const suhu = document.getElementById("targetSuhu").value;
|
|
if (!suhu) return alert("Isi suhu!");
|
|
set(ref(db, 'control/target_suhu'), parseInt(suhu));
|
|
};
|
|
|
|
// =======================
|
|
// 🔥 HISTORY TABLE
|
|
// =======================
|
|
onValue(ref(db, 'history'), (snap) => {
|
|
const data = snap.val();
|
|
if (!data || !historyTable) return;
|
|
|
|
historyTable.innerHTML = "";
|
|
|
|
Object.values(data).reverse().forEach(d => {
|
|
|
|
let status = "Normal";
|
|
let color = "text-green-500";
|
|
|
|
if (d.suhu > 50) {
|
|
status = "Panas";
|
|
color = "text-red-500";
|
|
} else if (d.suhu < 30) {
|
|
status = "Dingin";
|
|
color = "text-blue-500";
|
|
}
|
|
|
|
historyTable.innerHTML += `
|
|
<tr class="hover:bg-gray-50 transition">
|
|
<td class="px-4 py-3">${d.waktu}</td>
|
|
<td class="px-4 py-3 font-semibold">${d.suhu} °C</td>
|
|
<td class="px-4 py-3">${d.kelembaban} %</td>
|
|
<td class="px-4 py-3 ${color} font-semibold">${status}</td>
|
|
</tr>`;
|
|
});
|
|
});
|