107 lines
4.0 KiB
PHP
107 lines
4.0 KiB
PHP
@extends('admin.layout.main')
|
|
@section('content')
|
|
<main id="main" class="main">
|
|
|
|
<div class="pagetitle">
|
|
<h1>Data Tables</h1>
|
|
</div>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Sensor Distance Data</h5>
|
|
|
|
<!-- Calendar for Date Range Selection -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-4">
|
|
<label for="startDate">Start Date</label>
|
|
<input type="date" id="startDate" class="form-control" max="">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="endDate">End Date</label>
|
|
<input type="date" id="endDate" class="form-control" max="">
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<button class="btn btn-primary" id="filterBtn">Filter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table for displaying sensor data -->
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Waktu</th>
|
|
<th>Distance Klampisan Atas</th>
|
|
<th>Distance Klampisan Bawah</th>
|
|
<th>Total Distance</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="sensorDataTable">
|
|
<!-- Data will be populated here by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const startDateInput = document.getElementById("startDate");
|
|
const endDateInput = document.getElementById("endDate");
|
|
const sensorDataTable = document.getElementById("sensorDataTable");
|
|
|
|
const today = new Date().toISOString().split("T")[0];
|
|
startDateInput.max = today;
|
|
endDateInput.max = today;
|
|
|
|
startDateInput.addEventListener("change", function() {
|
|
const startDate = new Date(this.value);
|
|
const maxEndDate = new Date(startDate);
|
|
maxEndDate.setDate(startDate.getDate() + 7);
|
|
endDateInput.min = this.value;
|
|
endDateInput.max = maxEndDate.toISOString().split("T")[0];
|
|
});
|
|
|
|
endDateInput.addEventListener("change", function() {
|
|
startDateInput.max = this.value;
|
|
});
|
|
|
|
document.getElementById("filterBtn").addEventListener("click", function() {
|
|
const startDate = startDateInput.value;
|
|
const endDate = endDateInput.value;
|
|
|
|
if (startDate && endDate) {
|
|
fetch(`/getSensorData?start_date=${startDate}&end_date=${endDate}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
sensorDataTable.innerHTML = "";
|
|
data.forEach(row => {
|
|
const tableRow = `
|
|
<tr>
|
|
<td>${row.time_interval}</td>
|
|
<td>${row.distance_atas}</td>
|
|
<td>${row.distance_bawah}</td>
|
|
<td>${row.total_distance}</td>
|
|
</tr>
|
|
`;
|
|
sensorDataTable.innerHTML += tableRow;
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching data:', error));
|
|
} else {
|
|
alert("Silakan pilih rentang tanggal.");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|