TIF_NGANJUK_E41211253/resources/views/admin/pages/tabelsensor.blade.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