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