83 lines
4.6 KiB
HTML
83 lines
4.6 KiB
HTML
<!-- View Subject Modal -->
|
|
<div id="viewSubjectModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeViewSubjectModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
|
<div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
<h5 style="margin: 0; font-size: 18px;">Subject Details</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeViewSubjectModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-weight: 500; display: block; margin-bottom: 5px;">Subject Name</label>
|
|
<p id="viewSubjectName" style="margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px;"></p>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-weight: 500; display: block; margin-bottom: 5px;">Subject Code</label>
|
|
<p id="viewSubjectCode" style="margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px;"></p>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-weight: 500; display: block; margin-bottom: 5px;">Course</label>
|
|
<p id="viewSubjectCourse" style="margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px;"></p>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-weight: 500; display: block; margin-bottom: 5px;">Period/Year</label>
|
|
<p id="viewSubjectPeriod" style="margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px;"></p>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-weight: 500; display: block; margin-bottom: 5px;">Assigned Teacher</label>
|
|
<p id="viewSubjectTeacher" style="margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px;"></p>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-weight: 500; display: block; margin-bottom: 5px;">Syllabus</label>
|
|
<p id="viewSubjectSyllabus" style="margin: 0; padding: 8px; background: #f5f5f5; border-radius: 4px;"></p>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 15px; border-top: 1px solid #EEEEEE; text-align: right;">
|
|
<button style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px;" onclick="closeViewSubjectModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openViewSubjectModal(subjectId) {
|
|
// Fetch subject details from the server
|
|
fetch(`/app/subject/${subjectId}/view/`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.success) {
|
|
const subject = data.subject;
|
|
// Populate the modal with subject details
|
|
document.getElementById('viewSubjectName').textContent = subject.name;
|
|
document.getElementById('viewSubjectCode').textContent = subject.code;
|
|
document.getElementById('viewSubjectCourse').textContent = `${subject.course.name} (${subject.course.duration_type})`;
|
|
document.getElementById('viewSubjectPeriod').textContent = `${subject.period_or_year} ${subject.course.duration_type}`;
|
|
document.getElementById('viewSubjectTeacher').textContent = subject.teacher ? subject.teacher.name : 'Not Assigned';
|
|
|
|
// Handle syllabus PDF
|
|
if (subject.syllabus_pdf) {
|
|
document.getElementById('viewSubjectSyllabus').innerHTML =
|
|
`<a href="${subject.syllabus_pdf}" target="_blank" style="color: #3F51B5; text-decoration: none;">View Syllabus PDF</a>`;
|
|
} else {
|
|
document.getElementById('viewSubjectSyllabus').textContent = 'No syllabus uploaded';
|
|
}
|
|
|
|
// Show the modal
|
|
document.getElementById('viewSubjectModal').style.display = 'block';
|
|
} else {
|
|
alert(data.message || 'Failed to fetch subject details');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching subject details:', error);
|
|
alert('Failed to fetch subject details');
|
|
});
|
|
}
|
|
|
|
function closeViewSubjectModal() {
|
|
document.getElementById('viewSubjectModal').style.display = 'none';
|
|
}
|
|
</script> |