73 lines
2.7 KiB
PHP
73 lines
2.7 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('title', 'Data Sensor')
|
|
|
|
@section('content')
|
|
<div class="table-container">
|
|
<h2>Data Sensor & Prediksi</h2>
|
|
<table border="1" cellspacing="0" cellpadding="5">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Suhu (°C)</th>
|
|
<th>Kelembaban (%)</th>
|
|
<th>Waktu</th>
|
|
<th>Prediksi Suhu (°C)</th>
|
|
<th>Prediksi Kelembaban (%)</th>
|
|
<th>Waktu Prediksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="sensorTableBody">
|
|
<tr>
|
|
<td colspan="7" style="text-align: center;">Memuat data...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
async function fetchSensorData() {
|
|
try {
|
|
const sensorResponse = await axios.get('/api/latest-sensor-data');
|
|
const predictionResponse = await axios.get('/api/latest-predictions');
|
|
|
|
const sensorData = sensorResponse.data || [];
|
|
const predictions = predictionResponse.data || [];
|
|
|
|
let tableBody = '';
|
|
|
|
// Ambil jumlah data yang lebih banyak untuk menghindari error
|
|
let maxLength = Math.max(sensorData.length, predictions.length);
|
|
|
|
for (let i = 0; i < maxLength; i++) {
|
|
let sensor = sensorData[i] || {};
|
|
let prediction = predictions[i] || {};
|
|
|
|
tableBody += `
|
|
<tr>
|
|
<td>${i + 1}</td>
|
|
<td>${sensor.temperature ?? '-'}</td>
|
|
<td>${sensor.humidity ?? '-'}</td>
|
|
<td>${sensor.created_at ? new Date(sensor.created_at).toLocaleString() : '-'}</td>
|
|
<td>${prediction.predicted_suhu ?? '-'}</td>
|
|
<td>${prediction.predicted_kelembaban ?? '-'}</td>
|
|
<td>${prediction.prediction_datetime ? new Date(prediction.prediction_datetime).toLocaleString() : '-'}</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
document.getElementById('sensorTableBody').innerHTML = tableBody;
|
|
} catch (error) {
|
|
console.error("Gagal mengambil data:", error);
|
|
document.getElementById('sensorTableBody').innerHTML =
|
|
`<tr><td colspan="7" style="text-align: center;">Gagal memuat data</td></tr>`;
|
|
}
|
|
}
|
|
|
|
setInterval(fetchSensorData, 10000);
|
|
fetchSensorData();
|
|
</script>
|
|
@endsection
|