106 lines
5.3 KiB
HTML
106 lines
5.3 KiB
HTML
{% load static %}
|
|
{% load app_filters %}
|
|
|
|
<!-- Add Subject Modal -->
|
|
<div id="addSubjectModal" 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) closeAddSubjectModal();">
|
|
<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;">Add New Subject</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeAddSubjectModal()">×</button>
|
|
</div>
|
|
<form id="addSubjectForm" action="{% url 'add_subject' %}" method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div style="padding: 20px;">
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="subjectName" style="display: block; margin-bottom: 8px; font-weight: 500;">Subject Name</label>
|
|
<input type="text" id="subjectName" name="name" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="subjectCode" style="display: block; margin-bottom: 8px; font-weight: 500;">Subject Code</label>
|
|
<input type="text" id="subjectCode" name="code" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="periodOrYear" style="display: block; margin-bottom: 8px; font-weight: 500;">Period/{{ course.duration_type }}</label>
|
|
<input type="number" id="periodOrYear" name="period_or_year" min="1" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
<small style="color: #666; display: block; margin-top: 5px;">
|
|
{% if course.duration_type == 'Semester' %}
|
|
Enter semester number (1-{{ course.duration|multiply:2 }})
|
|
{% else %}
|
|
Enter year number (1-{{ course.duration }})
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="syllabusPdf" style="display: block; margin-bottom: 8px; font-weight: 500;">Syllabus PDF</label>
|
|
<input type="file" id="syllabusPdf" name="syllabus_pdf" accept=".pdf" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
|
<small style="color: #666; display: block; margin-top: 5px;">Upload syllabus or study material in PDF format</small>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 15px; border-top: 1px solid #EEEEEE; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end;">
|
|
<button type="button" style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; font-size: 14px;" onclick="closeAddSubjectModal()">Cancel</button>
|
|
<button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 10px;">Add Subject</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openAddSubjectModal() {
|
|
// Set max value for period/year input based on course duration
|
|
const periodInput = document.getElementById('periodOrYear');
|
|
{% if course.duration_type == 'Semester' %}
|
|
periodInput.max = {{ course.duration|multiply:2 }};
|
|
{% else %}
|
|
periodInput.max = {{ course.duration }};
|
|
{% endif %}
|
|
|
|
document.getElementById('addSubjectModal').style.display = 'block';
|
|
}
|
|
|
|
function closeAddSubjectModal() {
|
|
document.getElementById('addSubjectModal').style.display = 'none';
|
|
document.getElementById('addSubjectForm').reset();
|
|
}
|
|
|
|
// Handle form submission
|
|
document.getElementById('addSubjectForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(this);
|
|
|
|
// Validate period/year before submission
|
|
const periodInput = document.getElementById('periodOrYear');
|
|
const periodValue = parseInt(periodInput.value);
|
|
const maxPeriod = parseInt(periodInput.max);
|
|
|
|
if (periodValue > maxPeriod) {
|
|
{% if course.duration_type == 'Semester' %}
|
|
alert(`Semester number cannot exceed ${maxPeriod}`);
|
|
{% else %}
|
|
alert(`Year number cannot exceed ${maxPeriod}`);
|
|
{% endif %}
|
|
return;
|
|
}
|
|
|
|
fetch(this.action, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
closeAddSubjectModal();
|
|
// Refresh the subjects table or add the new subject dynamically
|
|
location.reload();
|
|
} else {
|
|
alert(data.message || 'Error adding subject');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while adding the subject');
|
|
});
|
|
});
|
|
</script> |