130 lines
5.2 KiB
PHP
130 lines
5.2 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</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">
|
|
@vite('resources/css/app.css')
|
|
<style>
|
|
body {
|
|
background-color: #f3f4f6;
|
|
}
|
|
</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="p-6 mb-4 bg-white rounded-lg shadow-lg">
|
|
<div class="p-6">
|
|
<h2 class="mb-4 text-lg font-bold">Masukkan Data Gas</h2>
|
|
|
|
<form id="gasForm" class="space-y-4">
|
|
<!-- NH3 -->
|
|
<div>
|
|
<label for="nh3Input" class="block text-sm font-medium text-gray-700">Gas Amonia
|
|
(NH3)</label>
|
|
<input type="number" id="nh3Input" class="w-full p-2 border border-gray-300 rounded"
|
|
required>
|
|
</div>
|
|
|
|
<!-- CH4 -->
|
|
<div>
|
|
<label for="ch4Input" class="block text-sm font-medium text-gray-700">Gas Metana
|
|
(CH4)</label>
|
|
<input type="number" id="ch4Input" class="w-full p-2 border border-gray-300 rounded"
|
|
required>
|
|
</div>
|
|
|
|
<!-- CO2 -->
|
|
<div>
|
|
<label for="co2Input" class="block text-sm font-medium text-gray-700">Gas Karbon
|
|
Dioksida (CO2)</label>
|
|
<input type="number" id="co2Input" class="w-full p-2 border border-gray-300 rounded"
|
|
required>
|
|
</div>
|
|
|
|
<!-- Button Submit -->
|
|
<button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded">Kirim Data</button>
|
|
</form>
|
|
|
|
<!-- Hasil Prediksi -->
|
|
<div id="result" class="hidden p-4 mt-4 border rounded">
|
|
<p class="font-bold">Kategori Udara: <span id="kategoriResult"></span></p>
|
|
</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>
|
|
document.getElementById("gasForm").addEventListener("submit", function(event) {
|
|
event.preventDefault();
|
|
|
|
// Ambil nilai input & konversi ke integer
|
|
let nh3 = parseInt(document.getElementById("nh3Input").value);
|
|
let ch4 = parseInt(document.getElementById("ch4Input").value);
|
|
let co2 = parseInt(document.getElementById("co2Input").value);
|
|
|
|
// Validasi (hanya angka positif, tidak boleh 0)
|
|
if (isNaN(nh3) || isNaN(ch4) || isNaN(co2) || nh3 <= 0 || ch4 <= 0 || co2 <= 0) {
|
|
alert("Masukkan angka bulat positif (tanpa desimal dan tidak boleh 0).");
|
|
return;
|
|
}
|
|
|
|
// Kirim data ke Flask
|
|
fetch("http://192.168.18.44:5000/predict", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
NH3: nh3,
|
|
CH4: ch4,
|
|
CO2: co2
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error("Terjadi kesalahan pada server.");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
// Tampilkan hasil kategori
|
|
document.getElementById("kategoriResult").textContent = data.Kategori;
|
|
document.getElementById("result").classList.remove("hidden");
|
|
}
|
|
})
|
|
.catch(error => console.error("Error:", error));
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|