340 lines
15 KiB
PHP
340 lines
15 KiB
PHP
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
|
|
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="{{ asset('assets/style.css') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<title>Dashboard Pemantauan Suhu dan Kelembaban Gudang</title>
|
|
<!-- panggil file jquery untuk proses realtime -->
|
|
<script type="text/javascript" src="{{ asset('jquery/jquery.min.js') }}"></script>
|
|
|
|
<!-- ajax untuk realtime -->
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// Fungsi untuk mengonversi waktu ke WIB
|
|
function convertToWIB(serverTime) {
|
|
let date = new Date(serverTime);
|
|
// Konversi ke WIB (UTC+7)
|
|
let utcOffset = date.getTimezoneOffset() * 60000;
|
|
let wibOffset = 7 * 60 * 60000;
|
|
let wibDate = new Date(date.getTime() + utcOffset + wibOffset);
|
|
// Mengembalikan hanya jam dan detik (HH:mm:ss)
|
|
return wibDate.toLocaleTimeString('id-ID', { hour12: false });
|
|
}
|
|
|
|
// Inisialisasi grafik suhu
|
|
var suhuCtx = document.getElementById('suhuChart').getContext('2d');
|
|
var suhuChart = new Chart(suhuCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [], // Kosongkan label awal
|
|
datasets: [{
|
|
label: 'Suhu (°C)',
|
|
data: [], // Data akan diperbarui secara dinamis
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 1,
|
|
lineTension: 0.2
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
suggestedMax: 50 // Set maksimum sumbu y
|
|
},
|
|
x: {
|
|
type: 'category', // Menggunakan kategori untuk label waktu
|
|
ticks: {
|
|
autoSkip: true,
|
|
maxTicksLimit: 10 // Batas jumlah label pada sumbu x
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Inisialisasi grafik kelembaban
|
|
var kelembabanCtx = document.getElementById('kelembabanChart').getContext('2d');
|
|
var kelembabanChart = new Chart(kelembabanCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [], // Kosongkan label awal
|
|
datasets: [{
|
|
label: 'Kelembaban (%)',
|
|
data: [], // Data akan diperbarui secara dinamis
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
lineTension: 0.10
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
suggestedMax: 100 // Set maksimum sumbu y
|
|
},
|
|
x: {
|
|
type: 'category', // Menggunakan kategori untuk label waktu
|
|
ticks: {
|
|
autoSkip: true,
|
|
maxTicksLimit: 10 // Batas jumlah label pada sumbu x
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Inisialisasi grafik suhu dua
|
|
var suhu2Ctx = document.getElementById('suhu2Chart').getContext('2d');
|
|
var suhu2Chart = new Chart(suhu2Ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Suhu 2 (°C)',
|
|
data: [],
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1,
|
|
lineTension: 0.10
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
suggestedMax: 50
|
|
},
|
|
x: {
|
|
type: 'category', // Menggunakan kategori untuk label waktu
|
|
ticks: {
|
|
autoSkip: true,
|
|
maxTicksLimit: 10 // Batas jumlah label pada sumbu x
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Inisialisasi grafik kelembaban dua
|
|
var kelembaban2Ctx = document.getElementById('kelembaban2Chart').getContext('2d');
|
|
var kelembaban2Chart = new Chart(kelembaban2Ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Kelembaban 2 (%)',
|
|
data: [],
|
|
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
|
borderColor: 'rgba(153, 102, 255, 1)',
|
|
borderWidth: 1,
|
|
lineTension: 0.10
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
suggestedMax: 100
|
|
},
|
|
x: {
|
|
type: 'category', // Menggunakan kategori untuk label waktu
|
|
ticks: {
|
|
autoSkip: true,
|
|
maxTicksLimit: 10 // Batas jumlah label pada sumbu x
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Fungsi untuk memperbarui data grafik
|
|
function updateChartData() {
|
|
// Ambil data suhu dari server
|
|
$.get("{{ route('bacasuhusatu') }}", function(data) {
|
|
var wibTime = convertToWIB(data.updated_at);
|
|
suhuChart.data.labels.push(wibTime); // Tambahkan waktu pembaruan
|
|
suhuChart.data.datasets[0].data.push(data.suhu); // Tambahkan data suhu
|
|
$("#suhu").text(data.suhu); // Update nilai suhu di HTML
|
|
suhuChart.update(); // Perbarui grafik suhu
|
|
});
|
|
|
|
// Ambil data kelembaban dari server
|
|
$.get("{{ route('bacakelembabansatu') }}", function(data) {
|
|
var wibTime = convertToWIB(data.updated_at);
|
|
kelembabanChart.data.labels.push(wibTime); // Tambahkan waktu pembaruan
|
|
kelembabanChart.data.datasets[0].data.push(data.kelembaban); // Tambahkan data kelembaban
|
|
$("#kelembaban").text(data.kelembaban); // Update nilai kelembaban di HTML
|
|
kelembabanChart.update(); // Perbarui grafik kelembaban
|
|
});
|
|
|
|
$.get("{{ route('cekdata') }}", function(response) {
|
|
if (response.warning) {
|
|
$("#warning").text(response.warning);
|
|
} else {
|
|
$("#warning").text("");
|
|
}
|
|
});
|
|
|
|
// Ambil data suhu dua dari server
|
|
$.get("{{ route('bacasuhudua') }}", function(data) {
|
|
var wibTime = convertToWIB(data.updated_at);
|
|
suhu2Chart.data.labels.push(wibTime); // Tambahkan waktu pembaruan
|
|
suhu2Chart.data.datasets[0].data.push(data.suhu2); // Tambahkan data suhu dua
|
|
$("#suhu2").text(data.suhu2); // Update nilai suhu dua di HTML
|
|
suhu2Chart.update(); // Perbarui grafik suhu dua
|
|
});
|
|
|
|
// Ambil data kelembaban dua dari server
|
|
$.get("{{ route('bacakelembabandua') }}", function(data) {
|
|
var wibTime = convertToWIB(data.updated_at);
|
|
kelembaban2Chart.data.labels.push(wibTime); // Tambahkan waktu pembaruan
|
|
kelembaban2Chart.data.datasets[0].data.push(data.kelembaban2); // Tambahkan data kelembaban dua
|
|
$("#kelembaban2").text(data.kelembaban2); // Update nilai kelembaban dua di HTML
|
|
kelembaban2Chart.update(); // Perbarui grafik kelembaban dua
|
|
});
|
|
|
|
$.get("{{ route('cekdatadua') }}", function(response) {
|
|
if (response.warning) {
|
|
$("#warning").text(response.warning);
|
|
} else {
|
|
$("#warning").text("");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Perbarui data setiap detik (1000 ms)
|
|
setInterval(updateChartData, 1000);
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="sidebar">
|
|
<a href="#" class="logo">Tembakau</a>
|
|
<div class="menu-content">
|
|
<ul class="menu-items">
|
|
<li class="item">
|
|
<a href="/web-ta/public/dashboard">Dashboard</a>
|
|
</li>
|
|
<li class="item">
|
|
<a href="/web-ta/public/riwayat-data">Riwayat Data</a>
|
|
</li>
|
|
<li class="item">
|
|
<a href="/web-ta/public/riwayat-datadua">Riwayat Data Hari</a>
|
|
</li>
|
|
<li class="item">
|
|
<div class="submenu-item"></div>
|
|
<a class="dropdown-item" href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
|
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
|
Logout
|
|
</a>
|
|
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
|
|
@csrf
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="navbar">
|
|
<i class="fas fa-bars" id="sidebar-close"></i>
|
|
</nav>
|
|
<script src="{{ asset('assets/script.js') }}"></script>
|
|
<div class="container text-center">
|
|
<h2>Dashboard Pemantauan Suhu Kelembaban Gudang</h2>
|
|
</div>
|
|
<div class="container-lg">
|
|
<div class="row justify-content-center">
|
|
<!-- Baris Pertama: Suhu dan Kelembaban -->
|
|
<div class="col-lg-8 mt-5"> <!-- Ubah col-lg-6 menjadi col-lg-8 untuk memperbesar chart -->
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Grafik Suhu dan Kelembaban</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<canvas id="suhuChart" style="width: 100%; height: 400px;"></canvas> <!-- Tinggi 400px untuk memperbesar chart -->
|
|
<h6 class="mt-3">Suhu: <span id="suhu"></span> °C</h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<canvas id="kelembabanChart" style="width: 100%; height: 400px;"></canvas> <!-- Tinggi 400px untuk memperbesar chart -->
|
|
<h6 class="mt-3">Kelembaban: <span id="kelembaban"></span> %</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Baris Kedua: Suhu dan Kelembaban 2 -->
|
|
<div class="col-lg-8 mt-5"> <!-- Ubah col-lg-6 menjadi col-lg-8 untuk memperbesar chart -->
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Grafik Suhu dan Kelembaban 2</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<canvas id="suhu2Chart" style="width: 100%; height: 400px;"></canvas> <!-- Tinggi 400px untuk memperbesar chart -->
|
|
<h6 class="mt-3">Suhu 2: <span id="suhu2"></span> °C</h6>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<canvas id="kelembaban2Chart" style="width: 100%; height: 400px;"></canvas> <!-- Tinggi 400px untuk memperbesar chart -->
|
|
<h6 class="mt-3">Kelembaban 2: <span id="kelembaban2"></span> %</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Optional JavaScript; choose one of the two! -->
|
|
|
|
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
|
integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5+U5cZr5V5/dNtP61k5JUpWNQ3l5JNU5gkKg28E6" crossorigin="anonymous">
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
|
|
integrity="sha384-8BnAsq4Upv6HSfZyzjp2ZBKi3yOZN3tRNmWr0CROsXoY3JEQJTSTlHw8Q+1nHdES" crossorigin="anonymous">
|
|
</script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-nAx5I4HFc9GpA06sUbPw8a+Xapnqgce/6vw6TeGjb4nFxFmDW+arX58ztx+oXbgT" crossorigin="anonymous">
|
|
</script>
|
|
|
|
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
|
<!--
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5+U5cZr5V5/dNtP61k5JUpWNQ3l5JNU5gkKg28E6" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js" integrity="sha384-8BnAsq4Upv6HSfZyzjp2ZBKi3yOZN3tRNmWr0CROsXoY3JEQJTSTlHw8Q+1nHdES" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha384-nAx5I4HFc9GpA06sUbPw8a+Xapnqgce/6vw6TeGjb4nFxFmDW+arX58ztx+oXbgT" crossorigin="anonymous"></script>
|
|
-->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">
|
|
</script>
|
|
|
|
<script>
|
|
const sidebar = document.querySelector(".sidebar");
|
|
const sidebarClose = document.querySelector("#sidebar-close");
|
|
const main = document.querySelector(".main");
|
|
|
|
sidebarClose.addEventListener("click", () => {
|
|
sidebar.classList.toggle("close");
|
|
main.classList.toggle("close");
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|