150 lines
5.7 KiB
PHP
150 lines
5.7 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>
|
|
<!-- jQuery -->
|
|
<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">
|
|
<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>
|
|
<div class="container mt-5">
|
|
<h2>Riwayat Data Sensor</h2>
|
|
|
|
<!-- Filter Form -->
|
|
<div class="filter-form mb-4">
|
|
<form action="{{ route('riwayat-datadua') }}" 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="date" class="mr-2">Date:</label>
|
|
<input type="date" name="date" id="date" class="form-control" value="{{ $date }}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Filter</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Waktu</th>
|
|
<th>Suhu</th>
|
|
<th>Kelembaban</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($filteredData as $data)
|
|
<tr>
|
|
<td>{{ $data->created_at }}</td>
|
|
<td>{{ number_format($data->suhu, 2) }}°C</td>
|
|
<td>{{ number_format($data->kelembaban, 2) }}%</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Chart -->
|
|
<div class="mt-5">
|
|
<canvas id="sensorChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('sensorChart').getContext('2d');
|
|
const sensorChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: @json($filteredData->pluck('created_at')),
|
|
datasets: [
|
|
{
|
|
label: 'Suhu (°C)',
|
|
data: @json($filteredData->pluck('suhu')),
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
fill: true,
|
|
},
|
|
{
|
|
label: 'Kelembaban (%)',
|
|
data: @json($filteredData->pluck('kelembaban')),
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
fill: true,
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
unit: 'hour',
|
|
tooltipFormat: 'MMM D, h:mm A'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Waktu'
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Nilai'
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `${context.dataset.label}: ${context.parsed.y}`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|