TKK_E32211537/resources/views/dashboard.blade.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>