[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->nis }}</td>
|
||||||
<td>{{ $item->asal_daerah }}</td>
|
<td>{{ $item->asal_daerah }}</td>
|
||||||
<td>{{ $item->tahun_angkatan }}</td>
|
<td>{{ $item->tahun_angkatan }}</td>
|
||||||
<td>{{ $item->alhadis }}</td>
|
<td>{{ number_format(($item->alhadis / 1997) * 100, 2) }}%</td>
|
||||||
<td>{{ $item->alquran }}</td>
|
<td>{{ number_format(($item->alquran / 606) * 100, 2) }}%</td>
|
||||||
<td>{{ $item->status }}</td>
|
<td>{{ $item->status }}</td>
|
||||||
<td>
|
<td>
|
||||||
@if ($item->predicted_status == 'Tercapai')
|
@if ($item->predicted_status == 'Tercapai')
|
||||||
|
|
|
||||||
|
|
@ -26,71 +26,80 @@
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<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 -->
|
<!-- Tabel Riwayat -->
|
||||||
<table id="dataTable" class="table">
|
<div class="table-responsive">
|
||||||
<thead>
|
<table id="dataTable" class="table table-striped table-bordered">
|
||||||
<tr>
|
<thead class="custom-thead">
|
||||||
<th>Tanggal</th>
|
<tr>
|
||||||
<th>Nama Santri</th>
|
<th>Tanggal</th>
|
||||||
<th>NIS</th>
|
<th>Nama Santri</th>
|
||||||
<th>Tahun Angkatan</th>
|
<th>NIS</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>Persentase Qur'an</th>
|
||||||
<th>Status</th>
|
<th>Al-Hadis Isi</th>
|
||||||
<th>Aksi</th>
|
<th>Persentase Hadis</th>
|
||||||
</tr>
|
<th>Nilai N</th>
|
||||||
</thead>
|
<th>Status</th>
|
||||||
<tbody>
|
<th>Aksi</th>
|
||||||
@foreach($riwayat as $item)
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
<tbody>
|
||||||
<td>{{ $item->user->name ?? '—' }}</td>
|
@foreach($riwayat as $item)
|
||||||
<td>{{ $item->user->nis ?? '—' }}</td>
|
<tr>
|
||||||
<td>{{ $item->tahun_angkatan }}</td>
|
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||||
<td>{{ $item->alquran }}</td>
|
<td>{{ $item->user->name ?? '—' }}</td>
|
||||||
<td>{{ $item->alhadis }}</td>
|
<td>{{ $item->user->nis ?? '—' }}</td>
|
||||||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
<td>{{ $item->tahun_angkatan }}</td>
|
||||||
<td>{{ $item->status }}</td>
|
<td>{{ $item->alquran }}</td>
|
||||||
<td>
|
<td>{{ number_format(($item->alquran / 606) * 100, 2) }}%</td>
|
||||||
@if($item->munaqosah_status === 'Sedang di Verifikasi')
|
<td>{{ $item->alhadis }}</td>
|
||||||
<!-- Jika belum ada keputusan, tampilkan tombol Verifikasi, Tolak, dan Delete -->
|
<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 -->
|
<!-- Tombol Tolak -->
|
||||||
<form action="{{ route('munaqosah.verify', $item->id) }}" method="POST"
|
<form action="{{ route('munaqosah.reject', $item->id) }}" method="POST"
|
||||||
style="display:inline;">
|
style="display:inline;">
|
||||||
@csrf
|
@csrf
|
||||||
<button type="submit" class="mb-1 btn btn-success btn-sm">
|
<button type="submit" class="mb-1 btn btn-warning btn-sm">
|
||||||
<i class='bx bxs-check-circle'></i> Verifikasi
|
<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>
|
</button>
|
||||||
</form>
|
@else
|
||||||
|
<span class="badge bg-info">Selesai</span>
|
||||||
|
@endif
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@endforeach
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Tombol Tolak -->
|
<!-- SweetAlert2 -->
|
||||||
<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 -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -107,7 +116,6 @@
|
||||||
confirmButtonText: 'Ya, hapus!'
|
confirmButtonText: 'Ya, hapus!'
|
||||||
}).then((result) => {
|
}).then((result) => {
|
||||||
if (result.isConfirmed) {
|
if (result.isConfirmed) {
|
||||||
// Buat form secara dinamis untuk melakukan request DELETE
|
|
||||||
var form = $('<form>', {
|
var form = $('<form>', {
|
||||||
'method': 'POST',
|
'method': 'POST',
|
||||||
'action': '/admin/munaqosah/' + id
|
'action': '/admin/munaqosah/' + id
|
||||||
|
|
@ -132,32 +140,63 @@
|
||||||
<!-- 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"
|
<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://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/buttons/2.4.2/js/dataTables.buttons.min.js">
|
||||||
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
|
|
||||||
</script>
|
</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>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$('#dataTable').DataTable({
|
var table = $('#dataTable').DataTable({
|
||||||
responsive: true, // Aktifkan fitur responsif
|
responsive: true,
|
||||||
"language": {
|
dom: 'Bfrtip',
|
||||||
"search": "Cari:",
|
buttons: [],
|
||||||
"lengthMenu": "Tampilkan _MENU_ data",
|
language: {
|
||||||
"zeroRecords": "Tidak ada data yang cocok",
|
search: "Cari:",
|
||||||
"info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
lengthMenu: "Tampilkan _MENU_ data",
|
||||||
"infoEmpty": "Tidak ada data tersedia",
|
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||||||
"infoFiltered": "(disaring dari _MAX_ 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>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom-thead {
|
||||||
|
background-color: #012970 !important;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dataTable tbody tr td {
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
color: #012970;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,18 @@
|
||||||
<li class="breadcrumb-item active">Data Latih</li>
|
<li class="breadcrumb-item active">Data Latih</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</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="col-lg-12">
|
||||||
<div class="card shadow-sm border-0">
|
<div class="card shadow-sm border-0">
|
||||||
<div class="card-body">
|
<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->nama ?? '—' }}</td>
|
||||||
<td>{{ $item->jenis_kelamin ?? '—' }}</td>
|
<td>{{ $item->jenis_kelamin ?? '—' }}</td>
|
||||||
<td>{{ $item->nis ?? '—' }}</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->tahun_angkatan }}</td>
|
||||||
<td>
|
<td>
|
||||||
{{ $item->alhadis >= 1997 ? 'Khatam' : 'Belum Khatam' }}
|
{{ $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>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -22,10 +22,17 @@
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-success,
|
.qr-container {
|
||||||
.text-danger {
|
display: none;
|
||||||
font-size: 1.3rem;
|
text-align: center;
|
||||||
font-weight: bold;
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<main id="main" class="main">
|
<main id="main" class="main">
|
||||||
|
|
@ -40,7 +47,6 @@
|
||||||
</nav>
|
</nav>
|
||||||
</div><!-- End Page Title -->
|
</div><!-- End Page Title -->
|
||||||
|
|
||||||
<!-- Munaqosah Card -->
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card info-card verification-card">
|
<div class="card info-card verification-card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
@ -55,9 +61,25 @@
|
||||||
<h6 class="text-danger">Ditolak</h6>
|
<h6 class="text-danger">Ditolak</h6>
|
||||||
@elseif($latestRiwayat->munaqosah_status === 'Terverifikasi')
|
@elseif($latestRiwayat->munaqosah_status === 'Terverifikasi')
|
||||||
<h6 class="text-success">Terverifikasi</h6>
|
<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>
|
<!-- Tombol Show/Hide QR -->
|
||||||
<a id="downloadQR" class="btn btn-success mt-2 d-none" download="qrcode.pdf">Unduh PDF</a>
|
<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
|
@else
|
||||||
<h6 class="text-warning">Belum Diverifikasi</h6>
|
<h6 class="text-warning">Belum Diverifikasi</h6>
|
||||||
@endif
|
@endif
|
||||||
|
|
@ -65,13 +87,10 @@
|
||||||
<h6>Belum ada data</h6>
|
<h6>Belum ada data</h6>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- End Munaqosah Card -->
|
|
||||||
|
|
||||||
<div class="col-12 dashboard">
|
<div class="col-12 dashboard">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -263,4 +282,26 @@ function generateQRCode() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
</script>
|
</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
|
@endsection
|
||||||
Loading…
Reference in New Issue