241 lines
11 KiB
PHP
241 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Monitoring Kualitas Udara</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Include Tailwind CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
@vite('resources/css/app.css')
|
|
|
|
<style>
|
|
.progress-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 20px;
|
|
background: linear-gradient(to right, red, yellow, green);
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
width: 0;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.progress-needle {
|
|
position: absolute;
|
|
top: -10px;
|
|
width: 2px;
|
|
height: 40px;
|
|
background: black;
|
|
transition: left 0.5s;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="flex flex-col h-screen">
|
|
<div class="flex h-screen">
|
|
@livewire('partials.sidebar')
|
|
<!-- Content -->
|
|
<div class="flex flex-col flex-1 overflow-hidden">
|
|
<!-- Header -->
|
|
@livewire('partials.header')
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 p-4 overflow-y-auto">
|
|
<div class="gap-4">
|
|
<div class="mb-4 bg-white rounded-lg shadow-lg">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
|
|
<h6 class="m-0 font-semibold text-gray-700">Dashboard</h6>
|
|
</div>
|
|
<div class="px-8 py-8">
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<!-- Gas Amonia -->
|
|
<a href="{{ route('detail.dashboard1', ['id' => 1]) }}" class="col-span-1">
|
|
<div
|
|
class="bg-blue-400 h-44 min-h-[180px] rounded-2xl shadow-lg flex flex-col justify-between items-center p-4">
|
|
<p class="flex items-center gap-2 text-sm font-bold text-white">
|
|
<i class="fas fa-wind"></i> Gas Amonia (NH3)
|
|
</p>
|
|
<p class="text-4xl font-extrabold text-white" id="nh3">-</p>
|
|
<p class="text-sm font-semibold text-white">PPM</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Gas Metana -->
|
|
<a href="{{ route('detail.dashboard2', ['id' => 2]) }}" class="col-span-1">
|
|
<div
|
|
class="bg-yellow-400 h-44 min-h-[180px] rounded-2xl shadow-lg flex flex-col justify-between items-center p-4">
|
|
<p class="flex items-center gap-2 text-sm font-bold text-white">
|
|
<i class="fas fa-cloud"></i> Gas Metana (CH4)
|
|
</p>
|
|
<p class="text-4xl font-extrabold text-white" id="ch4">-</p>
|
|
<p class="text-sm font-semibold text-white">PPM</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Gas Karbon Dioksida -->
|
|
<a href="{{ route('detail.dashboard3', ['id' => 3]) }}" class="col-span-1">
|
|
<div
|
|
class="bg-pink-400 h-44 min-h-[180px] rounded-2xl shadow-lg flex flex-col justify-between items-center p-4">
|
|
<p class="flex items-center gap-2 text-sm font-bold text-white">
|
|
<i class="fas fa-smog"></i> Gas Karbon Dioksida (CO2)
|
|
</p>
|
|
<p class="text-4xl font-extrabold text-white" id="co2">-</p>
|
|
<p class="text-sm font-semibold text-white">PPM</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Kualitas Udara -->
|
|
<a href="{{ route('detail.dashboard4', ['id' => 4]) }}" class="col-span-3">
|
|
<div id="kualitasUdaraDiv"
|
|
class="h-44 min-h-[180px] rounded-2xl shadow-lg flex flex-col items-center p-4">
|
|
<!-- Posisi tetap di atas dan tengah -->
|
|
<p class="text-sm font-bold text-center text-white">
|
|
Kualitas Udara Saat Ini
|
|
</p>
|
|
<!-- Kategori berada di tengah div -->
|
|
<div class="flex items-center justify-center flex-grow w-full">
|
|
<p class="text-4xl font-extrabold text-white" id="kategori">Cukup</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Deskripsi Kategori (Tetap di luar div, tidak berubah-ubah) -->
|
|
<div class="mt-4">
|
|
<p class="mb-2 font-semibold text-gray-700">Kategori Kualitas Udara:</p>
|
|
<ul class="space-y-2 list-none">
|
|
<li class="flex items-center gap-2">
|
|
<span class="inline-block w-4 h-4 bg-green-500 rounded-full"></span>
|
|
<span class="text-sm font-medium text-gray-700">Baik - Udara bersih dan
|
|
sehat.</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="inline-block w-4 h-4 rounded-full bg-orange"></span>
|
|
<span class="text-sm font-medium text-gray-700">Cukup - Sedikit berpolusi,
|
|
masih dapat diterima.</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="inline-block w-4 h-4 bg-red-700 rounded-full"></span>
|
|
<span class="text-sm font-medium text-gray-700">Buruk - Udara tercemar,
|
|
dapat membahayakan kesehatan.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{{-- <div class="grid grid-cols-2 gap-4 mt-4">
|
|
|
|
<div id="data-container">
|
|
<p>NH₃: <span id="nh3">-</span> ppm</p>
|
|
<p>CH₄: <span id="ch4">-</span> ppm</p>
|
|
<p>CO₂: <span id="co2">-</span> ppm</p>
|
|
<p>Kategori: <span id="kategori">-</span></p>
|
|
</div>
|
|
<h3>Prediksi Kualitas Udara: <span id="kategori">Menunggu data...</span></h3>
|
|
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
@livewire('partials.footer')
|
|
|
|
<!-- Logout form (hidden by default) -->
|
|
<form id="logout-form" action="#" method="POST" style="display: none;">
|
|
@csrf
|
|
<input type="hidden" name="logout" value="true">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@vite('resources/js/app.js')
|
|
{{-- <script>
|
|
const eventSource = new EventSource("/stream-data");
|
|
|
|
eventSource.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
document.getElementById("nh3").innerText = data.NH3;
|
|
document.getElementById("ch4").innerText = data.CH4;
|
|
document.getElementById("co2").innerText = data.CO2;
|
|
document.getElementById("kategori").innerText = data.Kategori;
|
|
};
|
|
</script> --}}
|
|
<script>
|
|
function updateBackgroundColor() {
|
|
let kategoriText = document.getElementById("kategori").innerText.trim();
|
|
let kualitasUdaraDiv = document.getElementById("kualitasUdaraDiv");
|
|
|
|
// Ubah warna berdasarkan kategori
|
|
if (kategoriText === "Baik") {
|
|
kualitasUdaraDiv.style.backgroundColor = "#22c55e"; // Hijau (bg-green-500)
|
|
} else if (kategoriText === "Cukup") {
|
|
kualitasUdaraDiv.style.backgroundColor = "#f97316"; // Orange (bg-orange-500)
|
|
} else if (kategoriText === "Buruk") {
|
|
kualitasUdaraDiv.style.backgroundColor = "#b91c1c"; // Merah Tua (bg-red-700)
|
|
}
|
|
}
|
|
|
|
// Jalankan saat pertama kali halaman dimuat
|
|
updateBackgroundColor();
|
|
|
|
// Pantau perubahan pada elemen kategori
|
|
let kategoriElement = document.getElementById("kategori");
|
|
let observer = new MutationObserver(updateBackgroundColor);
|
|
|
|
// Observasi perubahan teks di dalam elemen kategori
|
|
observer.observe(kategoriElement, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
</script>
|
|
{{-- <script>
|
|
fetch("/get-data")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log("Hasil Prediksi:", data);
|
|
document.getElementById("kategori").innerText = data.kategori;
|
|
})
|
|
.catch(error => console.error("Error:", error));
|
|
</script> --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
function updateDashboard() {
|
|
axios.get('http://192.168.18.44:5000/get-data') // Langsung ke Flask
|
|
.then(response => {
|
|
let data = response.data;
|
|
|
|
// Update nilai gas di dashboard
|
|
document.getElementById('nh3').innerText = data.NH3;
|
|
document.getElementById('ch4').innerText = data.CH4;
|
|
document.getElementById('co2').innerText = data.CO2;
|
|
|
|
// Gunakan kategori langsung dari Flask
|
|
document.getElementById('kategori').innerText = data.Kategori;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error mengambil data:', error);
|
|
});
|
|
}
|
|
|
|
// Panggil fungsi pertama kali saat halaman dimuat
|
|
updateDashboard();
|
|
|
|
// Update data setiap 5 detik
|
|
setInterval(updateDashboard, 5000);
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|