Zhaqian-Rouf
/
MIF_E31221446
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[update] Responsive Data Table

This commit is contained in:
Zhaqian Rouf Alfauzi 2025-02-08 15:40:04 +07:00
parent 6a0dbdbc5f
commit e24c1c3195
3 changed files with 198 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
resources/views/pages/admin/data-santri.blade.php
View File

@ -29,50 +29,56 @@
<h5 class="card-title">Munaqosah Santri</h5> <h5 class="card-title">Munaqosah Santri</h5>
<!-- Tabel Riwayat --> <!-- Tabel Riwayat -->
<!-- Tabel Riwayat --> <table id="dataTable" class="table">
<table id="dataTable" class="table"> <thead>
<thead> <tr>
<tr> <th>Nama Santri</th>
<th>Nama Santri</th> <th>Tanggal</th>
<th>Tanggal</th> <th>Tahun Angkatan</th>
<th>Tahun Angkatan</th> <th>Al-Qur'an Isi</th>
<th>Al-Qur'an Isi</th> <th>Al-Hadis Isi</th>
<th>Al-Hadis Isi</th> <th>Nilai N</th>
<th>Nilai N</th> <th>Status</th>
<th>Status</th> <th>Aksi</th>
<th>Aksi</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> @foreach($riwayat as $item)
@foreach($riwayat as $item) <tr>
<tr> <td>{{ $item->user->name ?? '—' }}</td>
<!-- Asumsikan Anda punya relasi ke Tabel User untuk nama, jenkel, asal --> <td>{{ $item->created_at->format('Y-m-d') }}</td>
<td>{{ $item->user->name ?? '—' }}</td> <td>{{ $item->tahun_angkatan }}</td>
<td>{{ $item->created_at->format('Y-m-d') }}</td> <td>{{ $item->alquran }}</td>
<td>{{ $item->tahun_angkatan }}</td> <td>{{ $item->alhadis }}</td>
<td>{{ $item->alquran }}</td> <td>{{ number_format($item->nilai_n, 2) }}</td>
<td>{{ $item->alhadis }}</td> <td>{{ $item->status }}</td>
<td>{{ number_format($item->nilai_n, 2) }}</td> <td>
<td>{{ $item->status }}</td> <a href="#" class="btn btn-success btn-sm">
<td> <i class='bx bxs-check-circle'></i> Verifikasi
<!-- misal admin bisa verifikasi, dsb. --> </a>
<a href="#" class="btn btn-success btn-sm"> </td>
<i class='bx bxs-check-circle'></i> Verifikasi </tr>
</a> @endforeach
</td> </tbody>
</tr> </table>
@endforeach
</tbody>
</table>
<!-- DataTables CSS & JS --> <!-- DataTables CSS & JS -->
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> 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://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/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> <script>
$(document).ready(function () { $(document).ready(function () {
$('#dataTable').DataTable({ $('#dataTable').DataTable({
responsive: true, // Aktifkan fitur responsif
"language": { "language": {
"search": "Cari:", "search": "Cari:",
"lengthMenu": "Tampilkan _MENU_ data", "lengthMenu": "Tampilkan _MENU_ data",
@ -90,5 +96,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
@endsection @endsection

186
resources/views/pages/santri/counting.blade.php
View File

@ -63,107 +63,109 @@
@if($latest) @if($latest)
<div class="card-footer text-center p-4"> <div class="card-footer text-center p-4">
<h5 class="mb-3 fw-bold">Hasil Terakhir</h5> <h5 class="mb-3 fw-bold">Hasil Terakhir</h5>
<table class="table table-bordered text-start"> <!-- Membuat tabel responsif -->
<tr> <div class="table-responsive">
<th><i class="bx bx-calendar"></i> Tanggal</th> <table class="table table-bordered text-start">
<td>{{ $latest->created_at->format('Y-m-d H:i') }}</td> <tr>
</tr> <th><i class="bx bx-calendar"></i> Tanggal</th>
<tr> <td>{{ $latest->created_at->format('Y-m-d H:i') }}</td>
<th><i class="bx bx-user"></i> Tahun Angkatan</th> </tr>
<td>{{ $latest->tahun_angkatan }}</td> <tr>
</tr> <th><i class="bx bx-user"></i> Tahun Angkatan</th>
<tr> <td>{{ $latest->tahun_angkatan }}</td>
<th><i class="bx bx-book"></i> Jumlah Al-Qur'an Isi</th> </tr>
<td>{{ $latest->alquran }}</td> <tr>
</tr> <th><i class="bx bx-book"></i> Jumlah Al-Qur'an Isi</th>
<tr> <td>{{ $latest->alquran }}</td>
<th><i class="bx bx-book-open"></i> Jumlah Al-Hadis Isi</th> </tr>
<td>{{ $latest->alhadis }}</td> <tr>
</tr> <th><i class="bx bx-book-open"></i> Jumlah Al-Hadis Isi</th>
<tr> <td>{{ $latest->alhadis }}</td>
<th><i class="bx bx-line-chart"></i> Nilai (n)</th> </tr>
<td> <tr>
<strong> <th><i class="bx bx-line-chart"></i> Nilai (n)</th>
{{-- Tampilkan 2 desimal + simbol persen --}} <td>
{{ number_format($latest->nilai_n, 2) }}% <strong>
</strong> {{-- Tampilkan 2 desimal + simbol persen --}}
</td> {{ number_format($latest->nilai_n, 2) }}%
</tr> </strong>
<tr> </td>
<th><i class='bx bx-calculator'></i> Hasil</th> </tr>
<td> <tr>
<span class="badge <th><i class='bx bx-calculator'></i> Hasil</th>
{{ $latest->status === 'Tercapai' ? 'bg-success' : 'bg-danger' }}"> <td>
{{ $latest->status }} <span class="badge
</span> {{ $latest->status === 'Tercapai' ? 'bg-success' : 'bg-danger' }}">
</td> {{ $latest->status }}
</tr> </span>
</td>
</tr>
{{-- Tambahan kolom baru untuk keterangan detail --}} {{-- Tambahan kolom baru untuk keterangan detail --}}
@php @php
$start = \Carbon\Carbon::create($latest->tahun_angkatan, 1, 1); $start = \Carbon\Carbon::create($latest->tahun_angkatan, 1, 1);
$now = \Carbon\Carbon::today(); $now = \Carbon\Carbon::today();
$x = $start->diffInDays($now); $x = $start->diffInDays($now);
$y = $latest->alquran + $latest->alhadis; $y = $latest->alquran + $latest->alhadis;
$targetSpeed = 2603 / 1095; $targetSpeed = 2603 / 1095;
// nCheck = 0 sebagai default // nCheck = 0 sebagai default
$nCheck = 0; $nCheck = 0;
if ($y >= 2603) { if ($y >= 2603) {
// Sudah pasti 'Sesuai Target' // Sudah pasti 'Sesuai Target'
$nCheck = 100; $nCheck = 100;
} elseif ($x > 0) { } elseif ($x > 0) {
$userSpeed = $y / $x; $userSpeed = $y / $x;
$nCheck = ($userSpeed / $targetSpeed) * 100; $nCheck = ($userSpeed / $targetSpeed) * 100;
} }
// Tentukan status detail // Tentukan status detail
$detailStatus = ''; $detailStatus = '';
$badgeClass = ''; $badgeClass = '';
// 1) Kalau y >= 2603: Sudah penuh => "Sesuai Target" // 1) Kalau y >= 2603: Sudah penuh => "Sesuai Target"
if ($y >= 2603) { if ($y >= 2603) {
$detailStatus = "Sesuai Target (Halaman penuh)"; $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%)";
$badgeClass = 'bg-success'; $badgeClass = 'bg-success';
} elseif ($nCheck > 100) { }
$detailStatus = "Lebih Target"; // 2) Kalau x=0 dan y<2603
$badgeClass = 'bg-primary'; elseif ($x == 0) {
} else { $detailStatus = "Data belum berjalan (x=0)";
$detailStatus = "Data tidak valid";
$badgeClass = 'bg-secondary'; $badgeClass = 'bg-secondary';
} }
} else {
@endphp // 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> <tr>
<th><i class="bx bx-info-circle"></i> Status Detail</th> <th><i class="bx bx-info-circle"></i> Status Detail</th>
<td> <td>
<span class="badge {{ $badgeClass }}"> <span class="badge {{ $badgeClass }}">
{{ $detailStatus }} {{ $detailStatus }}
</span> </span>
</td> </td>
</tr> </tr>
</table>
</table> </div>
</div> </div>
{{-- Debug (opsional) --}} {{-- Debug (opsional) --}}

109
resources/views/pages/santri/history.blade.php
View File

@ -28,64 +28,75 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Riwayat Hitung</h5> <h5 class="card-title">Riwayat Hitung</h5>
<!-- Tabel Riwayat --> <!-- Membungkus tabel dengan div.table-responsive -->
<table id="riwayatTable" class="table"> <div class="table-responsive">
<thead> <table id="riwayatTable" class="table">
<tr> <thead>
<th>Tanggal</th> <tr>
<th>Tahun Angkatan</th> <th>Tanggal</th>
<th>Al-Qur'an Isi</th> <th>Tahun Angkatan</th>
<th>Al-Hadis Isi</th> <th>Al-Qur'an Isi</th>
<th>Nilai N</th> <th>Al-Hadis Isi</th>
<th>Status</th> <th>Nilai N</th>
<!-- Kolom Aksi --> <th>Status</th>
<th>Aksi</th> <!-- Kolom Aksi -->
</tr> <th>Aksi</th>
</thead> </tr>
<tbody> </thead>
@foreach($riwayat as $item) <tbody>
<tr> @foreach($riwayat as $item)
<td>{{ $item->created_at->format('Y-m-d') }}</td> <tr>
<td>{{ $item->tahun_angkatan }}</td> <td>{{ $item->created_at->format('Y-m-d') }}</td>
<td>{{ $item->alquran }}</td> <td>{{ $item->tahun_angkatan }}</td>
<td>{{ $item->alhadis }}</td> <td>{{ $item->alquran }}</td>
<td>{{ number_format($item->nilai_n, 2) }}</td> <td>{{ $item->alhadis }}</td>
<td> <td>{{ number_format($item->nilai_n, 2) }}</td>
@if($item->status === 'Tercapai') <td>
<span class="badge bg-success">{{ $item->status }}</span> @if($item->status === 'Tercapai')
@else <span class="badge bg-success">{{ $item->status }}</span>
<span class="badge bg-danger">{{ $item->status }}</span> @else
@endif <span class="badge bg-danger">{{ $item->status }}</span>
</td> @endif
<!-- Kolom Aksi --> </td>
<td> <!-- Kolom Aksi -->
<!-- Tombol Hapus --> <td>
<form action="{{ route('riwayat.destroy', $item->id) }}" method="POST" style="display:inline;"> <!-- Tombol Hapus -->
@csrf <form action="{{ route('riwayat.destroy', $item->id) }}" method="POST"
@method('DELETE') style="display:inline;">
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data ini?')"> @csrf
<i class='bx bxs-trash'></i> Hapus @method('DELETE')
</button> <button type="submit" class="btn btn-danger btn-sm"
</form> onclick="return confirm('Yakin ingin menghapus data ini?')">
<i class='bx bxs-trash'></i> Hapus
</button>
</form>
<!-- Tombol Kirim --> <!-- Tombol Kirim -->
<a href="{{ route('riwayat.send', $item->id) }}" class="btn btn-primary btn-sm"> <a href="{{ route('riwayat.send', $item->id) }}"
<i class='bx bxs-send'></i> Kirim class="btn btn-primary btn-sm">
</a> <i class='bx bxs-send'></i> Kirim
</td> </a>
</tr> </td>
@endforeach </tr>
</tbody> @endforeach
</table> </tbody>
</table>
</div>
<!-- End of .table-responsive -->
<!-- DataTables CSS & JS --> <!-- DataTables CSS & JS beserta extension Responsive -->
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> 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://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/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> <script>
$(document).ready(function () { $(document).ready(function () {
$('#riwayatTable').DataTable({ $('#riwayatTable').DataTable({
responsive: true,
"language": { "language": {
"search": "Cari:", "search": "Cari:",
"lengthMenu": "Tampilkan _MENU_ data", "lengthMenu": "Tampilkan _MENU_ data",