[update] Responsive Data Table
This commit is contained in:
Zhaqian Rouf Alfauzi
parent
6a0dbdbc5f
commit
e24c1c3195
|
|
@ -29,50 +29,56 @@
|
|||
<h5 class="card-title">Munaqosah Santri</h5>
|
||||
|
||||
<!-- Tabel Riwayat -->
|
||||
<!-- Tabel Riwayat -->
|
||||
<table id="dataTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nama Santri</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Al-Qur'an Isi</th>
|
||||
<th>Al-Hadis Isi</th>
|
||||
<th>Nilai N</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($riwayat as $item)
|
||||
<tr>
|
||||
<!-- Asumsikan Anda punya relasi ke Tabel User untuk nama, jenkel, asal -->
|
||||
<td>{{ $item->user->name ?? '—' }}</td>
|
||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
||||
<td>{{ $item->status }}</td>
|
||||
<td>
|
||||
<!-- misal admin bisa verifikasi, dsb. -->
|
||||
<a href="#" class="btn btn-success btn-sm">
|
||||
<i class='bx bxs-check-circle'></i> Verifikasi
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="dataTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nama Santri</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Al-Qur'an Isi</th>
|
||||
<th>Al-Hadis Isi</th>
|
||||
<th>Nilai N</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($riwayat as $item)
|
||||
<tr>
|
||||
<td>{{ $item->user->name ?? '—' }}</td>
|
||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
||||
<td>{{ $item->status }}</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-success btn-sm">
|
||||
<i class='bx bxs-check-circle'></i> Verifikasi
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- DataTables CSS & JS -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<!-- Tambahkan CSS Responsive -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<!-- Tambahkan JS Responsive -->
|
||||
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: true, // Aktifkan fitur responsif
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
|
|
@ -90,5 +96,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@endsection
|
||||
|
|
@ -63,107 +63,109 @@
|
|||
@if($latest)
|
||||
<div class="card-footer text-center p-4">
|
||||
<h5 class="mb-3 fw-bold">Hasil Terakhir</h5>
|
||||
<table class="table table-bordered text-start">
|
||||
<tr>
|
||||
<th><i class="bx bx-calendar"></i> Tanggal</th>
|
||||
<td>{{ $latest->created_at->format('Y-m-d H:i') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-user"></i> Tahun Angkatan</th>
|
||||
<td>{{ $latest->tahun_angkatan }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-book"></i> Jumlah Al-Qur'an Isi</th>
|
||||
<td>{{ $latest->alquran }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-book-open"></i> Jumlah Al-Hadis Isi</th>
|
||||
<td>{{ $latest->alhadis }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-line-chart"></i> Nilai (n)</th>
|
||||
<td>
|
||||
<strong>
|
||||
{{-- Tampilkan 2 desimal + simbol persen --}}
|
||||
{{ number_format($latest->nilai_n, 2) }}%
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class='bx bx-calculator'></i> Hasil</th>
|
||||
<td>
|
||||
<span class="badge
|
||||
{{ $latest->status === 'Tercapai' ? 'bg-success' : 'bg-danger' }}">
|
||||
{{ $latest->status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Membuat tabel responsif -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered text-start">
|
||||
<tr>
|
||||
<th><i class="bx bx-calendar"></i> Tanggal</th>
|
||||
<td>{{ $latest->created_at->format('Y-m-d H:i') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-user"></i> Tahun Angkatan</th>
|
||||
<td>{{ $latest->tahun_angkatan }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-book"></i> Jumlah Al-Qur'an Isi</th>
|
||||
<td>{{ $latest->alquran }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-book-open"></i> Jumlah Al-Hadis Isi</th>
|
||||
<td>{{ $latest->alhadis }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="bx bx-line-chart"></i> Nilai (n)</th>
|
||||
<td>
|
||||
<strong>
|
||||
{{-- Tampilkan 2 desimal + simbol persen --}}
|
||||
{{ number_format($latest->nilai_n, 2) }}%
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class='bx bx-calculator'></i> Hasil</th>
|
||||
<td>
|
||||
<span class="badge
|
||||
{{ $latest->status === 'Tercapai' ? 'bg-success' : 'bg-danger' }}">
|
||||
{{ $latest->status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{{-- Tambahan kolom baru untuk keterangan detail --}}
|
||||
@php
|
||||
$start = \Carbon\Carbon::create($latest->tahun_angkatan, 1, 1);
|
||||
$now = \Carbon\Carbon::today();
|
||||
$x = $start->diffInDays($now);
|
||||
$y = $latest->alquran + $latest->alhadis;
|
||||
$targetSpeed = 2603 / 1095;
|
||||
{{-- Tambahan kolom baru untuk keterangan detail --}}
|
||||
@php
|
||||
$start = \Carbon\Carbon::create($latest->tahun_angkatan, 1, 1);
|
||||
$now = \Carbon\Carbon::today();
|
||||
$x = $start->diffInDays($now);
|
||||
$y = $latest->alquran + $latest->alhadis;
|
||||
$targetSpeed = 2603 / 1095;
|
||||
|
||||
// nCheck = 0 sebagai default
|
||||
$nCheck = 0;
|
||||
// nCheck = 0 sebagai default
|
||||
$nCheck = 0;
|
||||
|
||||
if ($y >= 2603) {
|
||||
// Sudah pasti 'Sesuai Target'
|
||||
$nCheck = 100;
|
||||
} elseif ($x > 0) {
|
||||
$userSpeed = $y / $x;
|
||||
$nCheck = ($userSpeed / $targetSpeed) * 100;
|
||||
}
|
||||
if ($y >= 2603) {
|
||||
// Sudah pasti 'Sesuai Target'
|
||||
$nCheck = 100;
|
||||
} elseif ($x > 0) {
|
||||
$userSpeed = $y / $x;
|
||||
$nCheck = ($userSpeed / $targetSpeed) * 100;
|
||||
}
|
||||
|
||||
// Tentukan status detail
|
||||
$detailStatus = '';
|
||||
$badgeClass = '';
|
||||
// Tentukan status detail
|
||||
$detailStatus = '';
|
||||
$badgeClass = '';
|
||||
|
||||
// 1) Kalau y >= 2603: Sudah penuh => "Sesuai Target"
|
||||
if ($y >= 2603) {
|
||||
$detailStatus = "Sesuai Target (Halaman penuh)";
|
||||
$badgeClass = 'bg-success';
|
||||
}
|
||||
// 2) Kalau x=0 dan y<2603
|
||||
elseif ($x == 0) {
|
||||
$detailStatus = "Data belum berjalan (x=0)";
|
||||
$badgeClass = 'bg-secondary';
|
||||
}
|
||||
else {
|
||||
// 3) Kalau x>0, cek nCheck
|
||||
if ($nCheck < 100) {
|
||||
// Hitung kekurangan
|
||||
$shortPages = ($x * $targetSpeed) - $y;
|
||||
$shortPages = ceil($shortPages);
|
||||
$detailStatus = "Belum Target, kurang isi {$shortPages} halaman";
|
||||
$badgeClass = 'bg-danger';
|
||||
} elseif (abs($nCheck - 100) < 0.00001) {
|
||||
// pas 100%
|
||||
$detailStatus = "Sesuai Target (100%)";
|
||||
// 1) Kalau y >= 2603: Sudah penuh => "Sesuai Target"
|
||||
if ($y >= 2603) {
|
||||
$detailStatus = "Sesuai Target (Halaman penuh)";
|
||||
$badgeClass = 'bg-success';
|
||||
} elseif ($nCheck > 100) {
|
||||
$detailStatus = "Lebih Target";
|
||||
$badgeClass = 'bg-primary';
|
||||
} else {
|
||||
$detailStatus = "Data tidak valid";
|
||||
}
|
||||
// 2) Kalau x=0 dan y<2603
|
||||
elseif ($x == 0) {
|
||||
$detailStatus = "Data belum berjalan (x=0)";
|
||||
$badgeClass = 'bg-secondary';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
else {
|
||||
// 3) Kalau x>0, cek nCheck
|
||||
if ($nCheck < 100) {
|
||||
// Hitung kekurangan
|
||||
$shortPages = ($x * $targetSpeed) - $y;
|
||||
$shortPages = ceil($shortPages);
|
||||
$detailStatus = "Belum Target, kurang isi {$shortPages} halaman";
|
||||
$badgeClass = 'bg-danger';
|
||||
} elseif (abs($nCheck - 100) < 0.00001) {
|
||||
// pas 100%
|
||||
$detailStatus = "Sesuai Target (100%)";
|
||||
$badgeClass = 'bg-success';
|
||||
} elseif ($nCheck > 100) {
|
||||
$detailStatus = "Lebih Target";
|
||||
$badgeClass = 'bg-primary';
|
||||
} else {
|
||||
$detailStatus = "Data tidak valid";
|
||||
$badgeClass = 'bg-secondary';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<tr>
|
||||
<th><i class="bx bx-info-circle"></i> Status Detail</th>
|
||||
<td>
|
||||
<span class="badge {{ $badgeClass }}">
|
||||
{{ $detailStatus }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<tr>
|
||||
<th><i class="bx bx-info-circle"></i> Status Detail</th>
|
||||
<td>
|
||||
<span class="badge {{ $badgeClass }}">
|
||||
{{ $detailStatus }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Debug (opsional) --}}
|
||||
|
|
|
|||
|
|
@ -28,64 +28,75 @@
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Riwayat Hitung</h5>
|
||||
|
||||
<!-- Tabel Riwayat -->
|
||||
<table id="riwayatTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tanggal</th>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Al-Qur'an Isi</th>
|
||||
<th>Al-Hadis Isi</th>
|
||||
<th>Nilai N</th>
|
||||
<th>Status</th>
|
||||
<!-- Kolom Aksi -->
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($riwayat as $item)
|
||||
<tr>
|
||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
||||
<td>
|
||||
@if($item->status === 'Tercapai')
|
||||
<span class="badge bg-success">{{ $item->status }}</span>
|
||||
@else
|
||||
<span class="badge bg-danger">{{ $item->status }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<!-- Kolom Aksi -->
|
||||
<td>
|
||||
<!-- Tombol Hapus -->
|
||||
<form action="{{ route('riwayat.destroy', $item->id) }}" method="POST" style="display:inline;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data ini?')">
|
||||
<i class='bx bxs-trash'></i> Hapus
|
||||
</button>
|
||||
</form>
|
||||
<!-- Membungkus tabel dengan div.table-responsive -->
|
||||
<div class="table-responsive">
|
||||
<table id="riwayatTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tanggal</th>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Al-Qur'an Isi</th>
|
||||
<th>Al-Hadis Isi</th>
|
||||
<th>Nilai N</th>
|
||||
<th>Status</th>
|
||||
<!-- Kolom Aksi -->
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($riwayat as $item)
|
||||
<tr>
|
||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
||||
<td>
|
||||
@if($item->status === 'Tercapai')
|
||||
<span class="badge bg-success">{{ $item->status }}</span>
|
||||
@else
|
||||
<span class="badge bg-danger">{{ $item->status }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<!-- Kolom Aksi -->
|
||||
<td>
|
||||
<!-- Tombol Hapus -->
|
||||
<form action="{{ route('riwayat.destroy', $item->id) }}" method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger btn-sm"
|
||||
onclick="return confirm('Yakin ingin menghapus data ini?')">
|
||||
<i class='bx bxs-trash'></i> Hapus
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Tombol Kirim -->
|
||||
<a href="{{ route('riwayat.send', $item->id) }}" class="btn btn-primary btn-sm">
|
||||
<i class='bx bxs-send'></i> Kirim
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Tombol Kirim -->
|
||||
<a href="{{ route('riwayat.send', $item->id) }}"
|
||||
class="btn btn-primary btn-sm">
|
||||
<i class='bx bxs-send'></i> Kirim
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- End of .table-responsive -->
|
||||
|
||||
<!-- DataTables CSS & JS -->
|
||||
<!-- DataTables CSS & JS beserta extension Responsive -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#riwayatTable').DataTable({
|
||||
responsive: true,
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
|
|
|
|||
Loading…
Reference in New Issue