138 lines
5.0 KiB
PHP
138 lines
5.0 KiB
PHP
<?php
|
|
require_once 'functions/auth.php';
|
|
|
|
$currentPage = basename($_SERVER['PHP_SELF']);
|
|
|
|
if(!isLoggedIn()) {
|
|
header("Location: login.php");
|
|
exit;
|
|
}
|
|
|
|
if (!defined('NODERED_URL')) {
|
|
define('NODERED_URL', 'https://node-red.aquamonn.online');
|
|
}
|
|
|
|
require_once 'partials/header.php';
|
|
?>
|
|
|
|
<div class="dashboard-layout">
|
|
<?php require_once 'partials/sidebar.php'; ?>
|
|
|
|
<div class="main-content page-enter">
|
|
|
|
<!-- Header -->
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px;">
|
|
<h2 style="color: white; font-weight:800; text-transform: uppercase;">DASHBOARD</h2>
|
|
<div class="topbar-icons">
|
|
|
|
<!-- NOTIFIKASI -->
|
|
<div class="notif" id="notifBtn">
|
|
<i class="fas fa-bell"></i>
|
|
<span class="notif-badge" id="notifCount">0</span>
|
|
<div class="notif-dropdown" id="notifDropdown">
|
|
<p><b>Notifikasi</b></p>
|
|
<ul id="notifList"><li>Memuat…</li></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USER -->
|
|
<div class="user" id="userBtn">
|
|
<i class="fas fa-user"></i>
|
|
<div class="user-dropdown" id="userDropdown">
|
|
<div class="user-info">
|
|
<p class="user-email"><?= htmlspecialchars($_SESSION['email'] ?? 'User') ?></p>
|
|
</div>
|
|
<a href="logout.php">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Cards -->
|
|
<div class="menu-cards-grid">
|
|
<a href="monitoring.php" class="menu-card-link">
|
|
<div class="icon-box">🌡️</div>
|
|
<span>Monitoring<br>Parameter</span>
|
|
</a>
|
|
<a href="catatan.php" class="menu-card-link">
|
|
<div class="icon-box">📝</div>
|
|
<span>Catatan</span>
|
|
</a>
|
|
<a href="kontrol.php" class="menu-card-link">
|
|
<div class="icon-box">⚙️</div>
|
|
<span>Sistem Kontrol</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Grafik -->
|
|
<div class="chart-container" style="max-width:600px; margin-top:30px; position:relative; height:280px;">
|
|
<canvas id="phChart"></canvas>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kirim NODERED_URL ke JS -->
|
|
<script>
|
|
window.NODERED_URL = "<?= rtrim(NODERED_URL, '/') ?>";
|
|
</script>
|
|
<script src="assets/js/chart.js"></script>
|
|
|
|
<script>
|
|
// Sidebar toggle
|
|
const toggleBtn = document.getElementById("toggleSidebar");
|
|
if (toggleBtn) {
|
|
toggleBtn.onclick = function() {
|
|
document.querySelector(".sidebar").classList.toggle("hide");
|
|
};
|
|
}
|
|
|
|
// Dropdown notif & user
|
|
const notifBtn = document.getElementById("notifBtn");
|
|
const notifDropdown = document.getElementById("notifDropdown");
|
|
const userBtn = document.getElementById("userBtn");
|
|
const userDropdown = document.getElementById("userDropdown");
|
|
|
|
notifBtn.onclick = e => { e.stopPropagation(); notifDropdown.classList.toggle("show"); userDropdown.classList.remove("show"); };
|
|
userBtn.onclick = e => { e.stopPropagation(); userDropdown.classList.toggle("show"); notifDropdown.classList.remove("show"); };
|
|
document.onclick = () => { notifDropdown.classList.remove("show"); userDropdown.classList.remove("show"); };
|
|
|
|
// ── Notifikasi otomatis dari data sensor ─────────────────
|
|
async function cekNotifikasi() {
|
|
try {
|
|
const res = await fetch(window.NODERED_URL + '/get_history', { cache: 'no-store' });
|
|
if (!res.ok) return;
|
|
const arr = await res.json();
|
|
if (!Array.isArray(arr) || arr.length === 0) return;
|
|
|
|
const latest = arr[0]; // data terbaru
|
|
const notifs = [];
|
|
|
|
const suhu = parseFloat(latest.suhu ?? 0);
|
|
const ph = parseFloat(latest.ph ?? latest.pH ?? 0);
|
|
const amonia = parseFloat(latest.amonia ?? 0);
|
|
const distance = parseFloat(latest.distance ?? 0);
|
|
|
|
if (suhu > 30) notifs.push(`🌡️ Suhu tinggi: ${suhu.toFixed(1)}°C`);
|
|
if (ph < 6.5) notifs.push(`🔬 pH terlalu rendah: ${ph.toFixed(2)}`);
|
|
if (ph > 8.0) notifs.push(`🔬 pH terlalu tinggi: ${ph.toFixed(2)}`);
|
|
if (amonia > 2) notifs.push(`⚠️ Amonia tinggi: ${amonia.toFixed(2)} ppm`);
|
|
if (distance > 70) notifs.push(`📏 Jarak air tinggi: ${distance.toFixed(1)} cm`);
|
|
if (latest.relay == 1) notifs.push(`💧 Pompa sedang aktif`);
|
|
|
|
const badge = document.getElementById("notifCount");
|
|
const list = document.getElementById("notifList");
|
|
|
|
badge.textContent = notifs.length;
|
|
list.innerHTML = notifs.length
|
|
? notifs.map(n => `<li>${n}</li>`).join('')
|
|
: '<li>Semua parameter normal </li>';
|
|
} catch(e) {}
|
|
}
|
|
|
|
cekNotifikasi();
|
|
setInterval(cekNotifikasi, 30000);
|
|
</script>
|
|
|
|
<?php require_once 'partials/footer.php'; ?>
|