121 lines
4.8 KiB
PHP
121 lines
4.8 KiB
PHP
{{-- Container Utama --}}
|
|
<div class="row g-0 h-100">
|
|
|
|
{{-- KOLOM KIRI: LIST SISWA --}}
|
|
<div class="col-md-4 border-end" style="min-height: 400px; max-height: 70vh; overflow-y: auto;">
|
|
<div class="p-3 border-bottom bg-light sticky-top">
|
|
<h6 class="mb-0 fw-bold"><i class="fas fa-users me-2"></i> {{ get_phrase('Student List') }}</h6>
|
|
</div>
|
|
|
|
<div class="list-group list-group-flush" id="studentList">
|
|
@if($participants->isEmpty())
|
|
<div class="text-center p-5 text-muted small">
|
|
{{ get_phrase('No participants found.') }}
|
|
</div>
|
|
@else
|
|
@foreach ($participants as $participant)
|
|
<a href="javascript:void(0);"
|
|
class="list-group-item list-group-item-action py-3 student-item"
|
|
{{-- PERBAIKAN DISINI: Tambahkan parameter ke-3 yaitu $lesson_id --}}
|
|
onclick="loadStudentSubmission(this, '{{ $participant->id }}', '{{ $lesson_id }}')">
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3 d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold"
|
|
style="width: 44px; height: 36px; font-size: 14px;">
|
|
{{ strtoupper(substr($participant->name, 0, 1)) }}
|
|
</div>
|
|
|
|
<div class="w-100">
|
|
<h6 class="mb-0 text-dark" style="font-size: 14px;">{{ $participant->name }}</h6>
|
|
<small class="text-muted" style="font-size: 12px;">{{ get_phrase('Click to grade') }}</small>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-muted small"></i>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KOLOM KANAN: AREA PREVIEW & GRADING --}}
|
|
<div class="col-md-8 bg-white">
|
|
{{-- ID ini penting: target AJAX --}}
|
|
<div id="grading-area" class="h-100 position-relative">
|
|
|
|
{{-- State Awal (Belum Klik) --}}
|
|
<div class="d-flex flex-column align-items-center justify-content-center h-100 text-center p-5">
|
|
<div class="mb-3 p-4 rounded-circle bg-light">
|
|
<i class="fi fi-rr-box-open fs-1 text-secondary opacity-50"></i>
|
|
</div>
|
|
<h6 class="text-muted">{{ get_phrase('Select a student to start grading') }}</h6>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
function loadStudentSubmission(element, userId, lessonId) {
|
|
// Cegah event default
|
|
event.preventDefault();
|
|
|
|
// Validasi parameter
|
|
if (!userId || !lessonId) {
|
|
console.error("Missing parameters. User ID:", userId, "Lesson ID:", lessonId);
|
|
alert('Missing parameters');
|
|
return;
|
|
}
|
|
|
|
// 1. Visual Active State
|
|
$('.student-item').removeClass('active bg-light');
|
|
$(element).addClass('active bg-light');
|
|
|
|
// 2. Loading State
|
|
$('#grading-area').html(`
|
|
<div class="d-flex flex-column align-items-center justify-content-center h-100">
|
|
<div class="spinner-border text-primary mb-2" role="status"></div>
|
|
<small class="text-muted">Loading data...</small>
|
|
</div>
|
|
`);
|
|
|
|
// Debugging
|
|
console.log("AJAX Call Parameters:");
|
|
console.log("- Lesson ID:", lessonId);
|
|
console.log("- User ID:", userId);
|
|
console.log("- URL:", "{{ route('instructor.project.grading.preview') }}");
|
|
console.log("- CSRF Token:", $('meta[name="csrf-token"]').attr('content'));
|
|
|
|
// 3. AJAX Call
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "{{ route('instructor.project.grading.preview') }}",
|
|
data: {
|
|
lesson_id: lessonId,
|
|
user_id: userId
|
|
},
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
},
|
|
success: function(response) {
|
|
console.log("Success Response:", response.substring(0, 200)); // Log 200 karakter pertama
|
|
$('#grading-area').html(response);
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("AJAX Error:", error);
|
|
console.error("Status:", status);
|
|
console.error("Response:", xhr.responseText);
|
|
|
|
$('#grading-area').html(`
|
|
<div class="alert alert-danger m-3">
|
|
<h6>Failed to load data</h6>
|
|
<small>Error: ${error}</small>
|
|
<br>
|
|
<small>Check console for details</small>
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
}
|
|
</script> |