create: add modal for loading screen on views ai generate questions
This commit is contained in:
parent
d320bc795a
commit
26d42db33e
|
|
@ -169,27 +169,44 @@
|
||||||
|
|
||||||
<title>Tab Example</title>
|
<title>Tab Example</title>
|
||||||
|
|
||||||
<!-- CSS Bootstrap -->
|
<!-- ====== CSS ====== -->
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
<!-- Bootstrap 5 -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
rel="stylesheet"
|
||||||
|
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
|
||||||
|
crossorigin="anonymous">
|
||||||
|
|
||||||
|
<!-- Bootstrap Icons (untuk bi bi-check-circle-fill, dll.) -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Font Awesome (jika masih dipakai di tempat lain) -->
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Google Font – Poppins -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom style -->
|
||||||
<link href="style.css" rel="stylesheet">
|
<link href="style.css" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
||||||
rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
||||||
|
|
||||||
<!-- JavaScript Bootstrap -->
|
<!-- DataTables CSS -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ====== JavaScript ====== -->
|
||||||
|
<!-- jQuery (dibutuhkan DataTables) -->
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
||||||
<!-- Place these in the <head> section -->
|
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
|
|
||||||
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
|
|
||||||
|
|
||||||
|
<!-- Bootstrap 5 JS bundle (sudah termasuk Popper) -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- DataTables core -->
|
||||||
|
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Ekstensi DataTables Buttons + export -->
|
||||||
<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
|
<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
|
||||||
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
|
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
@ -495,17 +512,18 @@ class="mt-4">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@include('literacy.teacher.generate_questions.modals.loading')
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Pilih Teks Bacaan -->
|
<!-- Modal Pilih Teks Bacaan -->
|
||||||
<div class="modal fade" id="modalPilihTeks" tabindex="-1" role="dialog">
|
<div class="modal fade" id="modalPilihTeks" tabindex="-1" aria-labelledby="modalPilihTeksLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title">Pilih Teks Bacaan</h5>
|
<h5 class="modal-title" id="modalPilihTeksLabel">Pilih Teks Bacaan</h5>
|
||||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" id="listTeksBacaan">
|
<div class="modal-body" id="listTeksBacaan">
|
||||||
<p>Memuat teks bacaan...</p>
|
<p>Memuat teks bacaan...</p>
|
||||||
|
|
@ -514,6 +532,96 @@ class="mt-4">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const aiForm = document.getElementById('aiForm');
|
||||||
|
const contentElement = document.getElementById('content');
|
||||||
|
const resetButton = document.getElementById('resetButton');
|
||||||
|
|
||||||
|
const loadingModalEl = document.getElementById('loadingModal');
|
||||||
|
const loadingModal = new bootstrap.Modal(loadingModalEl, {
|
||||||
|
backdrop: 'static',
|
||||||
|
keyboard: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadingIcon = document.getElementById('loadingIcon');
|
||||||
|
const successIcon = document.getElementById('successIcon');
|
||||||
|
const errorIcon = document.getElementById('errorIcon');
|
||||||
|
const loadingText = document.getElementById('loadingText');
|
||||||
|
|
||||||
|
function showLoading() {
|
||||||
|
loadingIcon.style.display = 'inline-block';
|
||||||
|
successIcon.style.display = 'none';
|
||||||
|
errorIcon.style.display = 'none';
|
||||||
|
loadingText.innerText = "Mohon tunggu, sedang menghasilkan soal...";
|
||||||
|
loadingModal.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSuccess() {
|
||||||
|
loadingIcon.style.display = 'none';
|
||||||
|
successIcon.style.display = 'block';
|
||||||
|
errorIcon.style.display = 'none';
|
||||||
|
loadingText.innerText = "Berhasil menghasilkan soal!";
|
||||||
|
}
|
||||||
|
|
||||||
|
function showError(message) {
|
||||||
|
loadingIcon.style.display = 'none';
|
||||||
|
successIcon.style.display = 'none';
|
||||||
|
errorIcon.style.display = 'block';
|
||||||
|
loadingText.innerText = message || "Terjadi kesalahan saat menghasilkan soal.";
|
||||||
|
}
|
||||||
|
|
||||||
|
aiForm.addEventListener('submit', async function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
showLoading();
|
||||||
|
|
||||||
|
try {
|
||||||
|
let payload = {
|
||||||
|
material_id: document.getElementById('material_id').value,
|
||||||
|
question_type: document.getElementById('question_type').value,
|
||||||
|
question_count: parseInt(document.getElementById('question_count').value)
|
||||||
|
};
|
||||||
|
|
||||||
|
let response = await fetch("{{ route('literacy_teacher_generate_from_ai') }}", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"X-CSRF-TOKEN": '{{ csrf_token() }}',
|
||||||
|
"Accept": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
|
||||||
|
let data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
let formattedText = data.generated_questions;
|
||||||
|
if (formattedText) {
|
||||||
|
formattedText = formattedText.replace(/Soal Pilihan Ganda:/g, '**Soal Pilihan Ganda:**');
|
||||||
|
formattedText = formattedText.replace(/Soal Isian:/g, '**Soal Isian:**');
|
||||||
|
}
|
||||||
|
contentElement.innerText = formattedText || "Soal berhasil dibuat, tapi tidak ada data.";
|
||||||
|
showSuccess();
|
||||||
|
setTimeout(() => loadingModal.hide(), 2000);
|
||||||
|
} else {
|
||||||
|
contentElement.innerText = "Error: " + (data.message || "Terjadi kesalahan.");
|
||||||
|
showError(data.message);
|
||||||
|
setTimeout(() => loadingModal.hide(), 2500);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
contentElement.innerText = "Gagal menghubungi server!";
|
||||||
|
console.error("Error:", error);
|
||||||
|
showError("Gagal menghubungi server!");
|
||||||
|
setTimeout(() => loadingModal.hide(), 2500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
resetButton.addEventListener('click', function () {
|
||||||
|
contentElement.innerText = 'Hasil generate soal akan muncul di sini...';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const materialSelect = document.getElementById("materialSelect");
|
const materialSelect = document.getElementById("materialSelect");
|
||||||
|
|
@ -675,60 +783,6 @@ function validateForm() {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const aiForm = document.getElementById('aiForm');
|
|
||||||
const contentElement = document.getElementById('content');
|
|
||||||
const resetButton = document.getElementById('resetButton');
|
|
||||||
|
|
||||||
aiForm.addEventListener('submit', async function (event) {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
const formData = new FormData(aiForm);
|
|
||||||
contentElement.innerText = "Menghasilkan pertanyaan...";
|
|
||||||
|
|
||||||
try {
|
|
||||||
let payload = {
|
|
||||||
material_id: document.getElementById('material_id').value,
|
|
||||||
question_type: document.getElementById('question_type').value,
|
|
||||||
question_count: parseInt(document.getElementById('question_count').value)
|
|
||||||
};
|
|
||||||
|
|
||||||
let response = await fetch("{{ route('literacy_teacher_generate_from_ai') }}", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"X-CSRF-TOKEN": '{{ csrf_token() }}',
|
|
||||||
"Accept": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(payload)
|
|
||||||
});
|
|
||||||
|
|
||||||
let data = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
// Mengubah output untuk menggunakan label yang lebih user-friendly
|
|
||||||
let formattedText = data.generated_questions;
|
|
||||||
if (formattedText) {
|
|
||||||
formattedText = formattedText.replace(/Soal Pilihan Ganda:/g, '**Soal Pilihan Ganda:**');
|
|
||||||
formattedText = formattedText.replace(/Soal Isian:/g, '**Soal Isian:**');
|
|
||||||
}
|
|
||||||
contentElement.innerText = formattedText || "Soal berhasil dibuat, tapi tidak ada data.";
|
|
||||||
} else {
|
|
||||||
contentElement.innerText = "Error: " + (data.message || "Terjadi kesalahan.");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
contentElement.innerText = "Gagal menghubungi server!";
|
|
||||||
console.error("Error:", error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
resetButton.addEventListener('click', function () {
|
|
||||||
contentElement.innerText = 'Hasil generate soal akan muncul di sini...';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- JavaScript untuk mengubah konten tab -->
|
<!-- JavaScript untuk mengubah konten tab -->
|
||||||
<script>
|
<script>
|
||||||
function materialModal(id, title, controller) {
|
function materialModal(id, title, controller) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!-- resources/views/generate_questions/modals/loading.blade.php -->
|
||||||
|
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered modal-md">
|
||||||
|
<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;">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<!-- Success -->
|
||||||
|
<div id="successIcon" class="text-success mb-4" style="display: none;">
|
||||||
|
<i class="bi bi-check-circle-fill" style="font-size: 4rem;"></i>
|
||||||
|
</div>
|
||||||
|
<!-- Error -->
|
||||||
|
<div id="errorIcon" class="text-danger mb-4" style="display: none;">
|
||||||
|
<i class="bi bi-x-circle-fill" style="font-size: 4rem;"></i>
|
||||||
|
</div>
|
||||||
|
<!-- Text -->
|
||||||
|
<p id="loadingText" style="font-size: 1.25rem; font-weight: 500;">Mohon tunggu, sedang menghasilkan soal...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user