[add] QR Code
This commit is contained in:
Zhaqian Rouf Alfauzi
parent
e08be1499e
commit
6aa1d841b4
|
|
@ -73,8 +73,8 @@
|
|||
<td>{{ $item->nis }}</td>
|
||||
<td>{{ $item->asal_daerah }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ number_format(($item->alhadis / 1997) * 100, 2) }}%</td>
|
||||
<td>{{ number_format(($item->alquran / 606) * 100, 2) }}%</td>
|
||||
<td>{{ $item->status }}</td>
|
||||
<td>
|
||||
@if ($item->predicted_status == 'Tercapai')
|
||||
|
|
|
|||
|
|
@ -26,71 +26,80 @@
|
|||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Munaqosah Santri</h5>
|
||||
<div class="d-flex justify-content-between align-items-center my-3">
|
||||
<h5 class="card-title mb-0">Munaqosah Santri</h5>
|
||||
<button id="btnExcel" class="btn btn-success">
|
||||
<i class='bx bx-file'></i> Export Excel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tabel Riwayat -->
|
||||
<table id="dataTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tanggal</th>
|
||||
<th>Nama Santri</th>
|
||||
<th>NIS</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->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->user->name ?? '—' }}</td>
|
||||
<td>{{ $item->user->nis ?? '—' }}</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>
|
||||
@if($item->munaqosah_status === 'Sedang di Verifikasi')
|
||||
<!-- Jika belum ada keputusan, tampilkan tombol Verifikasi, Tolak, dan Delete -->
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable" class="table table-striped table-bordered">
|
||||
<thead class="custom-thead">
|
||||
<tr>
|
||||
<th>Tanggal</th>
|
||||
<th>Nama Santri</th>
|
||||
<th>NIS</th>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Al-Qur'an Isi</th>
|
||||
<th>Persentase Qur'an</th>
|
||||
<th>Al-Hadis Isi</th>
|
||||
<th>Persentase Hadis</th>
|
||||
<th>Nilai N</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($riwayat as $item)
|
||||
<tr>
|
||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->user->name ?? '—' }}</td>
|
||||
<td>{{ $item->user->nis ?? '—' }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ number_format(($item->alquran / 606) * 100, 2) }}%</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ number_format(($item->alhadis / 1997) * 100, 2) }}%</td>
|
||||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
||||
<td>{{ $item->status }}</td>
|
||||
<td>
|
||||
@if($item->munaqosah_status === 'Sedang di Verifikasi')
|
||||
<!-- Tombol Verifikasi -->
|
||||
<form action="{{ route('munaqosah.verify', $item->id) }}" method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" class="mb-1 btn btn-success btn-sm">
|
||||
<i class='bx bxs-check-circle'></i> Verifikasi
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Tombol Verifikasi -->
|
||||
<form action="{{ route('munaqosah.verify', $item->id) }}" method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" class="mb-1 btn btn-success btn-sm">
|
||||
<i class='bx bxs-check-circle'></i> Verifikasi
|
||||
<!-- Tombol Tolak -->
|
||||
<form action="{{ route('munaqosah.reject', $item->id) }}" method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" class="mb-1 btn btn-warning btn-sm">
|
||||
<i class='bx bxs-x-circle'></i> Tolak
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Tombol Delete dengan SweetAlert -->
|
||||
<button class="mb-1 btn btn-danger btn-sm btn-delete"
|
||||
data-id="{{ $item->id }}">
|
||||
<i class='bx bxs-trash'></i> Delete
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<span class="badge bg-info">Selesai</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Tolak -->
|
||||
<form action="{{ route('munaqosah.reject', $item->id) }}" method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" class="mb-1 btn btn-warning btn-sm">
|
||||
<i class='bx bxs-x-circle'></i> Tolak
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Tombol Delete dengan SweetAlert -->
|
||||
<button class="mb-1 btn btn-danger btn-sm btn-delete"
|
||||
data-id="{{ $item->id }}">
|
||||
<i class='bx bxs-trash'></i> Delete
|
||||
</button>
|
||||
@else
|
||||
<!-- Jika sudah ada keputusan (verified atau ditolak), tampilkan badge "Selesai" -->
|
||||
<span class="badge bg-info">Selesai</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Sertakan SweetAlert2 -->
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
|
|
@ -107,7 +116,6 @@
|
|||
confirmButtonText: 'Ya, hapus!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Buat form secara dinamis untuk melakukan request DELETE
|
||||
var form = $('<form>', {
|
||||
'method': 'POST',
|
||||
'action': '/admin/munaqosah/' + id
|
||||
|
|
@ -132,32 +140,63 @@
|
|||
<!-- 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">
|
||||
|
||||
href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.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 src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js">
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: true, // Aktifkan fitur responsif
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
"zeroRecords": "Tidak ada data yang cocok",
|
||||
"info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||||
"infoEmpty": "Tidak ada data tersedia",
|
||||
"infoFiltered": "(disaring dari _MAX_ total data)"
|
||||
var table = $('#dataTable').DataTable({
|
||||
responsive: true,
|
||||
dom: 'Bfrtip',
|
||||
buttons: [],
|
||||
language: {
|
||||
search: "Cari:",
|
||||
lengthMenu: "Tampilkan _MENU_ data",
|
||||
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||||
infoEmpty: "Tidak ada data tersedia",
|
||||
infoFiltered: "(disaring dari _MAX_ total data)"
|
||||
}
|
||||
});
|
||||
|
||||
// Event untuk tombol export
|
||||
$('#btnExcel').on('click', function () {
|
||||
table.button('.buttons-excel').trigger();
|
||||
});
|
||||
|
||||
// Tambahkan tombol export
|
||||
new $.fn.dataTable.Buttons(table, {
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
text: 'Export ke Excel',
|
||||
className: 'buttons-excel',
|
||||
title: 'Data Munaqosah'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
table.buttons().container().appendTo($('.dataTables_wrapper'));
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-thead {
|
||||
background-color: #012970 !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#dataTable tbody tr td {
|
||||
background-color: #f8f9fa !important;
|
||||
color: #012970;
|
||||
}
|
||||
</style>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,18 @@
|
|||
<li class="breadcrumb-item active">Data Latih</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
@if(session('error'))
|
||||
<script>
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Oops...',
|
||||
text: "{{ session('error') }}",
|
||||
confirmButtonColor: '#d33'
|
||||
});
|
||||
</script>
|
||||
@endif
|
||||
<div class="col-lg-12">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body">
|
||||
|
|
@ -79,7 +90,15 @@ class="btn btn-warning w-100 d-flex align-items-center justify-content-center ga
|
|||
<td>{{ $item->nama ?? '—' }}</td>
|
||||
<td>{{ $item->jenis_kelamin ?? '—' }}</td>
|
||||
<td>{{ $item->nis ?? '—' }}</td>
|
||||
<td>{{ $item->asal_daerah ?? '—' }}</td>
|
||||
<td>
|
||||
@if ($item->asal_daerah === 'dalamProvinsi')
|
||||
Dalam Provinsi
|
||||
@elseif ($item->asal_daerah === 'luarProvinsi')
|
||||
Luar Provinsi
|
||||
@else
|
||||
{{ $item->asal_daerah }}
|
||||
@endif
|
||||
</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>
|
||||
{{ $item->alhadis >= 1997 ? 'Khatam' : 'Belum Khatam' }}
|
||||
|
|
@ -214,5 +233,8 @@ class="btn btn-warning w-100 d-flex align-items-center justify-content-center ga
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -22,10 +22,17 @@
|
|||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.text-success,
|
||||
.text-danger {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
.qr-container {
|
||||
display: none;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.qr-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<main id="main" class="main">
|
||||
|
|
@ -40,7 +47,6 @@
|
|||
</nav>
|
||||
</div><!-- End Page Title -->
|
||||
|
||||
<!-- Munaqosah Card -->
|
||||
<div class="col-12">
|
||||
<div class="card info-card verification-card">
|
||||
<div class="card-body">
|
||||
|
|
@ -55,9 +61,25 @@
|
|||
<h6 class="text-danger">Ditolak</h6>
|
||||
@elseif($latestRiwayat->munaqosah_status === 'Terverifikasi')
|
||||
<h6 class="text-success">Terverifikasi</h6>
|
||||
<button class="btn btn-primary mt-2" onclick="generateQRCode()">Tampilkan QR</button>
|
||||
<div id="qrcode" class="mt-3"></div>
|
||||
<a id="downloadQR" class="btn btn-success mt-2 d-none" download="qrcode.pdf">Unduh PDF</a>
|
||||
|
||||
<!-- Tombol Show/Hide QR -->
|
||||
<div class="qr-buttons">
|
||||
<button id="btnShowQR" class="btn btn-primary">
|
||||
<i class='bx bx-show'></i> Tampilkan QR
|
||||
</button>
|
||||
<button id="btnHideQR" class="btn btn-secondary d-none">
|
||||
<i class='bx bx-hide'></i> Sembunyikan QR
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tempat Menampilkan QR Code -->
|
||||
<div id="qrContainer" class="qr-container">
|
||||
<div id="qrcode"></div>
|
||||
<a id="downloadQR" class="btn btn-success mt-2 d-none" download="qrcode.pdf">
|
||||
<i class='bx bxs-file-pdf'></i> Unduh PDF
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@else
|
||||
<h6 class="text-warning">Belum Diverifikasi</h6>
|
||||
@endif
|
||||
|
|
@ -65,13 +87,10 @@
|
|||
<h6>Belum ada data</h6>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Munaqosah Card -->
|
||||
|
||||
<div class="col-12 dashboard">
|
||||
<div class="row">
|
||||
|
|
@ -263,4 +282,26 @@ function generateQRCode() {
|
|||
};
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let qrContainer = document.getElementById("qrContainer");
|
||||
let btnShowQR = document.getElementById("btnShowQR");
|
||||
let btnHideQR = document.getElementById("btnHideQR");
|
||||
let qrcodeElement = document.getElementById("qrcode");
|
||||
let downloadQR = document.getElementById("downloadQR");
|
||||
|
||||
btnShowQR.addEventListener("click", function () {
|
||||
generateQRCode();
|
||||
qrContainer.style.display = "block";
|
||||
btnShowQR.classList.add("d-none");
|
||||
btnHideQR.classList.remove("d-none");
|
||||
});
|
||||
|
||||
btnHideQR.addEventListener("click", function () {
|
||||
qrContainer.style.display = "none";
|
||||
btnShowQR.classList.remove("d-none");
|
||||
btnHideQR.classList.add("d-none");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Loading…
Reference in New Issue