179 lines
7.1 KiB
PHP
179 lines
7.1 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Riwayat Data Sensor</title>
|
|
<!-- 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>
|
|
</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>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container" id="main-content">
|
|
<h2>Riwayat Data Sensor</h2>
|
|
|
|
<!-- Filter Form -->
|
|
<div class="filter-form mb-4">
|
|
<form action="{{ route('riwayat-data') }}" method="GET" class="form-inline">
|
|
<div class="form-group mr-3">
|
|
<label for="region" class="mr-2">Pilih Sisi:</label>
|
|
<select name="region" id="region" class="form-control" onchange="this.form.submit()">
|
|
<option value="Depan" {{ $region == 'Depan' ? 'selected' : '' }}>Depan</option>
|
|
<option value="Belakang" {{ $region == 'Belakang' ? 'selected' : '' }}>Belakang</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group mr-3">
|
|
<label for="start_date" class="mr-2">Start Date:</label>
|
|
<input type="date" name="start_date" id="start_date" class="form-control" value="{{ $start_date }}">
|
|
</div>
|
|
<div class="form-group mr-3">
|
|
<label for="end_date" class="mr-2">End Date:</label>
|
|
<input type="date" name="end_date" id="end_date" class="form-control" value="{{ $end_date }}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Filter</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Tanggal</th>
|
|
<th>Rata-rata Suhu</th>
|
|
<th>Rata-rata Kelembaban</th>
|
|
<th>Suhu Tertinggi</th>
|
|
<th>Waktu Suhu Tertinggi</th>
|
|
<th>Kelembaban Tertinggi</th>
|
|
<th>Waktu Kelembaban Tertinggi</th>
|
|
<th>Suhu Terendah</th>
|
|
<th>Waktu Suhu Terendah</th>
|
|
<th>Kelembaban Terendah</th>
|
|
<th>Waktu Kelembaban Terendah</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($riwayatData as $data)
|
|
<tr>
|
|
<td>{{ $data->tanggal }}</td>
|
|
<td>{{ number_format($data->rata_suhu, 2) }}°C</td>
|
|
<td>{{ number_format($data->rata_kelembaban, 2) }}%</td>
|
|
<td>{{ number_format($data->tertinggi_suhu, 2) }}°C</td>
|
|
<td>{{ $data->waktu_tertinggi_suhu }}</td>
|
|
<td>{{ number_format($data->tertinggi_kelembaban, 2) }}%</td>
|
|
<td>{{ $data->waktu_tertinggi_kelembaban }}</td>
|
|
<td>{{ number_format($data->terendah_suhu, 2) }}°C</td>
|
|
<td>{{ $data->waktu_terendah_suhu }}</td>
|
|
<td>{{ number_format($data->terendah_kelembaban, 2) }}%</td>
|
|
<td>{{ $data->waktu_terendah_kelembaban }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Chart Container -->
|
|
<div id="chart-container">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const sidebar = document.getElementById('sidebar');
|
|
const sidebarClose = document.getElementById('sidebar-close');
|
|
const mainContent = document.getElementById('main-content');
|
|
|
|
sidebarClose.addEventListener('click', () => {
|
|
sidebar.classList.toggle('close');
|
|
mainContent.classList.toggle('close');
|
|
});
|
|
|
|
// Chart.js Configuration
|
|
var labels = [];
|
|
var rataSuhu = [];
|
|
var rataKelembaban = [];
|
|
|
|
@foreach($riwayatData as $data)
|
|
labels.push("{{ $data->tanggal }}");
|
|
rataSuhu.push({{ $data->rata_suhu }});
|
|
rataKelembaban.push({{ $data->rata_kelembaban }});
|
|
@endforeach
|
|
|
|
var data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Rata-rata Suhu (°C)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 1,
|
|
data: rataSuhu
|
|
}, {
|
|
label: 'Rata-rata Kelembaban (%)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
data: rataKelembaban
|
|
}]
|
|
};
|
|
|
|
var options = {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
};
|
|
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
</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>
|