repair report sadata anda make it sampel with button detail selengkapnya
This commit is contained in:
Vckynando12
parent
eec7efb9c9
commit
1253e2c26e
|
|
@ -2,7 +2,6 @@
|
||||||
/node_modules
|
/node_modules
|
||||||
/public/build
|
/public/build
|
||||||
/public/hot
|
/public/hot
|
||||||
/public/storage
|
|
||||||
/vendor
|
/vendor
|
||||||
.env
|
.env
|
||||||
.env.backup
|
.env.backup
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
*
|
||||||
|
!.gitignore
|
||||||
|
|
@ -5,45 +5,91 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Report Data</title>
|
<title>Report Data</title>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container mt-5">
|
<div class="container mt-5">
|
||||||
<h2 class="mb-4">Laporan Keamanan dan Monitoring</h2>
|
<h2 class="mb-4">Laporan Keamanan dan Monitoring</h2>
|
||||||
|
|
||||||
@if(count($reports) > 0)
|
@php
|
||||||
|
use Illuminate\Pagination\LengthAwarePaginator;
|
||||||
|
|
||||||
|
// Konversi array ke koleksi
|
||||||
|
$reportsCollection = collect($reports);
|
||||||
|
|
||||||
|
// Pagination manual
|
||||||
|
$currentPage = request()->get('page', 1);
|
||||||
|
$perPage = 10; // Jumlah item per halaman
|
||||||
|
$paginatedReports = new LengthAwarePaginator(
|
||||||
|
$reportsCollection->forPage($currentPage, $perPage),
|
||||||
|
$reportsCollection->count(),
|
||||||
|
$perPage,
|
||||||
|
$currentPage,
|
||||||
|
['path' => request()->url()]
|
||||||
|
);
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
@if($paginatedReports->count() > 0)
|
||||||
<table class="table table-bordered">
|
<table class="table table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th>#</th>
|
||||||
<th>Tanggal</th>
|
<th>Tanggal</th>
|
||||||
<th>Waktu</th>
|
<th>Perangkat</th>
|
||||||
<th>Gerakan</th>
|
<th>Status</th>
|
||||||
<th>Status Keamanan</th>
|
<th>Info Selengkapnya</th>
|
||||||
<th>Akses Terakhir</th>
|
|
||||||
<th>Status Servo</th>
|
|
||||||
<th>Status Perangkat</th>
|
|
||||||
<th>Kelembaban</th>
|
|
||||||
<th>Suhu</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@foreach($reports as $key => $report)
|
@foreach($paginatedReports as $key => $report)
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ $key + 1 }}</td>
|
<td>{{ $paginatedReports->firstItem() + $key }}</td>
|
||||||
<td>{{ $report['tanggal'] }}</td> <!-- Menampilkan tanggal -->
|
<td>{{ \Carbon\Carbon::parse($report['timestamp'])->format('d-m-Y H:i:s') }}</td>
|
||||||
<td>{{ $report['waktu'] }}</td> <!-- Menampilkan waktu -->
|
<td>
|
||||||
<td>{{ ucfirst($report['security']['motion']) }}</td>
|
@if($loop->first)
|
||||||
<td>{{ ucfirst($report['security']['status']) }}</td>
|
Gerakan
|
||||||
<td>{{ $report['smartcab']['last_access'] }}</td>
|
@elseif($report['security']['motion'] !== $reports[$key - 1]['security']['motion'])
|
||||||
<td>{{ ucfirst($report['smartcab']['servo_status']) }}</td>
|
Gerakan
|
||||||
<td>{{ ucfirst($report['smartcab']['status_device']) }}</td>
|
@elseif($report['security']['status'] !== $reports[$key - 1]['security']['status'])
|
||||||
<td>{{ $report['dht11']['humidity'] }}%</td>
|
Status Keamanan
|
||||||
<td>{{ $report['dht11']['temperature'] }}°C</td>
|
@elseif($report['smartcab']['last_access'] !== $reports[$key - 1]['smartcab']['last_access'])
|
||||||
|
Akses Terakhir
|
||||||
|
@elseif($report['smartcab']['servo_status'] !== $reports[$key - 1]['smartcab']['servo_status'])
|
||||||
|
Status Servo
|
||||||
|
@else
|
||||||
|
-
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
@if($loop->first)
|
||||||
|
{{ ucfirst($report['security']['motion']) }}
|
||||||
|
@elseif($report['security']['motion'] !== $reports[$key - 1]['security']['motion'])
|
||||||
|
{{ ucfirst($report['security']['motion']) }}
|
||||||
|
@elseif($report['security']['status'] !== $reports[$key - 1]['security']['status'])
|
||||||
|
{{ ucfirst($report['security']['status']) }}
|
||||||
|
@elseif($report['smartcab']['last_access'] !== $reports[$key - 1]['smartcab']['last_access'])
|
||||||
|
{{ ucfirst($report['smartcab']['last_access']) }}
|
||||||
|
@elseif($report['smartcab']['servo_status'] !== $reports[$key - 1]['smartcab']['servo_status'])
|
||||||
|
{{ ucfirst($report['smartcab']['servo_status']) }}
|
||||||
|
@else
|
||||||
|
Tidak ada perubahan
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary btn-sm" onclick="showDetail({{ json_encode($report) }})">
|
||||||
|
Lihat Detail
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@endforeach
|
@endforeach
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<!-- PAGINATION -->
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
{{ $paginatedReports->links('pagination::bootstrap-4') }}
|
||||||
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="alert alert-warning text-center">
|
<div class="alert alert-warning text-center">
|
||||||
Tidak ada data laporan.
|
Tidak ada data laporan.
|
||||||
|
|
@ -51,42 +97,40 @@
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Detail Data -->
|
||||||
|
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="detailModalLabel">Detail Laporan</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="modalBodyContent">
|
||||||
|
<!-- Data akan dimasukkan melalui JavaScript -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script>
|
||||||
|
function showDetail(report) {
|
||||||
|
let detailHtml = `
|
||||||
|
<strong>Tanggal:</strong> ${new Date(report.timestamp).toLocaleString()}<br>
|
||||||
|
<strong>Gerakan:</strong> ${report.security.motion}<br>
|
||||||
|
<strong>Status Keamanan:</strong> ${report.security.status}<br>
|
||||||
|
<strong>Akses Terakhir:</strong> ${report.smartcab.last_access}<br>
|
||||||
|
<strong>Status Servo:</strong> ${report.smartcab.servo_status}<br>
|
||||||
|
<strong>Status Perangkat:</strong> ${report.smartcab.status_device}<br>
|
||||||
|
<strong>Kelembaban:</strong> ${report.dht11.humidity}%<br>
|
||||||
|
<strong>Suhu:</strong> ${report.dht11.temperature}°C
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('modalBodyContent').innerHTML = detailHtml;
|
||||||
|
let detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
|
||||||
|
detailModal.show();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
||||||
<script>
|
|
||||||
function loadReports() {
|
|
||||||
$.ajax({
|
|
||||||
url: "/get-reports",
|
|
||||||
type: "GET",
|
|
||||||
success: function (data) {
|
|
||||||
let html = "";
|
|
||||||
data.forEach((report, index) => {
|
|
||||||
html += `
|
|
||||||
<tr>
|
|
||||||
<td>${index + 1}</td>
|
|
||||||
<td>${report.tanggal}</td>
|
|
||||||
<td>${report.waktu}</td>
|
|
||||||
<td>${report.security.motion.charAt(0).toUpperCase() + report.security.motion.slice(1)}</td>
|
|
||||||
<td>${report.security.status.charAt(0).toUpperCase() + report.security.status.slice(1)}</td>
|
|
||||||
<td>${report.smartcab.last_access}</td>
|
|
||||||
<td>${report.smartcab.servo_status.charAt(0).toUpperCase() + report.smartcab.servo_status.slice(1)}</td>
|
|
||||||
<td>${report.smartcab.status_device.charAt(0).toUpperCase() + report.smartcab.status_device.slice(1)}</td>
|
|
||||||
<td>${report.dht11.humidity}%</td>
|
|
||||||
<td>${report.dht11.temperature}°C</td>
|
|
||||||
</tr>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
$("#reportsBody").html(html);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Muat data pertama kali
|
|
||||||
loadReports();
|
|
||||||
|
|
||||||
// Perbarui setiap 5 detik
|
|
||||||
setInterval(loadReports, 5000);
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue