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