gitea/Abiyasa_Putra_Prasetya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create: add loading screen on assessment page

Browse Source
This commit is contained in:
abiyasa05 2025-07-06 10:11:47 +07:00
parent 60d112de22
commit d9c3512285
2 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/confirmation.blade.php
View File

@ -1,3 +1,5 @@
@include('literacy.student.assessments.modals.loading')
<!-- Modal Konfirmasi --> <!-- Modal Konfirmasi -->
<div class="modal fade" id="confirmSubmitModal" tabindex="-1" role="dialog"> <div class="modal fade" id="confirmSubmitModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
@ -19,30 +21,57 @@
<!-- Skrip JavaScript untuk Submit Assessment --> <!-- Skrip JavaScript untuk Submit Assessment -->
<script> <script>
function showLoadingFeedback() {
$('#loadingIcon').show();
$('#successIcon').hide();
$('#errorIcon').hide();
$('#loadingText').text("Mohon tunggu, sedang menyelesaikan asesmen...");
$('#loadingModal').modal({backdrop: 'static', keyboard: false});
$('#loadingModal').modal('show');
}
function showSuccessFeedback() {
$('#loadingIcon').hide();
$('#successIcon').show();
$('#errorIcon').hide();
$('#loadingText').text("Berhasil menyelesaikan asesmen!");
}
function showErrorFeedback(message) {
$('#loadingIcon').hide();
$('#successIcon').hide();
$('#errorIcon').show();
$('#loadingText').text(message || "Terjadi kesalahan saat menyelesaikan asesmen.");
}
function submitAssessment() { function submitAssessment() {
var assessmentId = {{ $assessment->id ?? 'null' }}; // Pastikan ID ada var assessmentId = {{ $assessment->id ?? 'null' }};
if (!assessmentId) { if (!assessmentId) {
alert("Terjadi kesalahan: ID asesmen tidak ditemukan."); alert("Terjadi kesalahan: ID asesmen tidak ditemukan.");
return; return;
} }
$('#confirmSubmitModal').modal('hide');
showLoadingFeedback();
$.ajax({ $.ajax({
url: "/literacy/student/assessment/submit/" + assessmentId, // Perbaiki URL sesuai route url: "/literacy/student/assessment/submit/" + assessmentId,
type: "POST", type: "POST",
headers: { headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content') // Pastikan CSRF Token dikirim "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
}, },
success: function(response) { success: function(response) {
alert(response.message); showSuccessFeedback();
window.location.href = "/literacy/student/assessments"; // Redirect ke halaman indeks asesmen setTimeout(function() {
$('#loadingModal').modal('hide');
window.location.href = "/literacy/student/assessments";
}, 2000);
}, },
error: function(xhr) { error: function(xhr) {
console.error(xhr); console.error(xhr);
alert(xhr.responseJSON?.error || "Gagal menyelesaikan asesmen."); showErrorFeedback(xhr.responseJSON?.error || "Gagal menyelesaikan asesmen.");
} }
}); });
$('#confirmSubmitModal').modal('hide'); // Tutup modal setelah klik tombol
} }
</script> </script>

23
Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/loading.blade.php Normal file
View File

@ -0,0 +1,23 @@
<!-- Modal Loading (Bootstrap 4 Compatible) -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content text-center py-5" style="background: rgba(255, 255, 255, 0.95); border: none;">
<div class="d-flex flex-column align-items-center justify-content-center">
<!-- Spinner -->
<div id="loadingIcon" class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem; display: none;">
<span class="sr-only">Loading...</span>
</div>
<!-- Success -->
<div id="successIcon" class="text-success mb-4" style="display: none;">
<i class="fa fa-check-circle" style="font-size: 4rem;"></i>
</div>
<!-- Error -->
<div id="errorIcon" class="text-danger mb-4" style="display: none;">
<i class="fa fa-times-circle" style="font-size: 4rem;"></i>
</div>
<!-- Text -->
<p id="loadingText" style="font-size: 1.25rem; font-weight: 500;">Mohon tunggu, sedang memproses...</p>
</div>
</div>
</div>
</div>