230 lines
10 KiB
HTML
230 lines
10 KiB
HTML
<!-- Student Feedback Modal -->
|
|
<div id="feedbackModal" 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) closeFeedbackModal();">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; 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;">Give Feedback</h5>
|
|
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeFeedbackModal()">×</button>
|
|
</div>
|
|
<div style="padding: 20px;">
|
|
<!-- Custom Tab Navigation -->
|
|
<div class="feedback-tabs">
|
|
<div id="teacher-tab-btn" class="feedback-tab-btn active" onclick="switchFeedbackTab('teacher')">
|
|
Teacher Feedback
|
|
</div>
|
|
<div id="institute-tab-btn" class="feedback-tab-btn" onclick="switchFeedbackTab('institute')">
|
|
Institute Feedback
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
<!-- Teacher Feedback Form -->
|
|
<div id="teacher-tab-content" class="tab-pane active">
|
|
<form method="post" action="{% url 'submit_feedback' %}" id="teacherFeedbackForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="feedback_type" value="teacher">
|
|
<div class="mb-3">
|
|
<label for="teacher_select" class="form-label">Select Teacher</label>
|
|
<select class="form-select" id="teacher_select" name="teacher_id" required style="border-color: #BDBDBD;">
|
|
<option value="">Select Teacher</option>
|
|
{% for teacher in teachers %}
|
|
<option value="{{ teacher.id }}">{{ teacher.name }} - {{ teacher.designation }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Rating</label>
|
|
<div class="rating-stars d-flex">
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="1" onclick="selectRating(this, 'teacher_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="2" onclick="selectRating(this, 'teacher_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="3" onclick="selectRating(this, 'teacher_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="4" onclick="selectRating(this, 'teacher_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="5" onclick="selectRating(this, 'teacher_rating')"></i>
|
|
<input type="hidden" name="rating" id="teacher_rating" value="" required>
|
|
<div class="invalid-feedback d-block" id="teacher-rating-error" style="display: none;">Please select a rating</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="teacher_feedback" class="form-label">Your Feedback</label>
|
|
<textarea class="form-control" id="teacher_feedback" name="feedback_text" rows="3" required style="border-color: #BDBDBD;"></textarea>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn" style="background-color: #9E9E9E; color: white;" onclick="closeFeedbackModal()">Cancel</button>
|
|
<button type="submit" class="btn" style="background-color: #3F51B5; color: white;">Submit Feedback</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Institute Feedback Form -->
|
|
<div id="institute-tab-content" class="tab-pane">
|
|
<form method="post" action="{% url 'submit_institute_feedback' %}" id="instituteFeedbackForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="feedback_type" value="institute">
|
|
<div class="mb-3">
|
|
<label for="feedback_type_select" class="form-label">Feedback Category</label>
|
|
<select class="form-select" id="feedback_type_select" name="feedback_type" required style="border-color: #BDBDBD;">
|
|
<option value="">Select Category</option>
|
|
<option value="General">General</option>
|
|
<option value="Facilities">Facilities</option>
|
|
<option value="Teaching">Teaching Quality</option>
|
|
<option value="Infrastructure">Infrastructure</option>
|
|
<option value="Administration">Administration</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Rating</label>
|
|
<div class="rating-stars d-flex">
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="1" onclick="selectRating(this, 'institute_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="2" onclick="selectRating(this, 'institute_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="3" onclick="selectRating(this, 'institute_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="4" onclick="selectRating(this, 'institute_rating')"></i>
|
|
<i class="far fa-star fs-4 text-warning rating-star" data-value="5" onclick="selectRating(this, 'institute_rating')"></i>
|
|
<input type="hidden" name="rating" id="institute_rating" value="" required>
|
|
<div class="invalid-feedback d-block" id="institute-rating-error" style="display: none;">Please select a rating</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="institute_feedback" class="form-label">Your Feedback</label>
|
|
<textarea class="form-control" id="institute_feedback" name="feedback_text" rows="3" required placeholder="Please provide your feedback about the institute" style="border-color: #BDBDBD;"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="is_anonymous" id="isAnonymous" style="border-color: #BDBDBD;">
|
|
<label class="form-check-label" for="isAnonymous">
|
|
Submit anonymously
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" class="btn" style="background-color: #9E9E9E; color: white;" onclick="closeFeedbackModal()">Cancel</button>
|
|
<button type="submit" class="btn" style="background-color: #3F51B5; color: white;">Submit Feedback</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Student Feedback Modal Scripts -->
|
|
<script>
|
|
function openFeedbackModal() {
|
|
document.getElementById('feedbackModal').style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeFeedbackModal() {
|
|
document.getElementById('feedbackModal').style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
function switchFeedbackTab(tabName) {
|
|
const teacherTabBtn = document.getElementById('teacher-tab-btn');
|
|
const instituteTabBtn = document.getElementById('institute-tab-btn');
|
|
const teacherContent = document.getElementById('teacher-tab-content');
|
|
const instituteContent = document.getElementById('institute-tab-content');
|
|
|
|
teacherTabBtn.classList.remove('active');
|
|
instituteTabBtn.classList.remove('active');
|
|
teacherContent.classList.remove('active');
|
|
instituteContent.classList.remove('active');
|
|
|
|
if (tabName === 'teacher') {
|
|
teacherTabBtn.classList.add('active');
|
|
teacherContent.classList.add('active');
|
|
} else if (tabName === 'institute') {
|
|
instituteTabBtn.classList.add('active');
|
|
instituteContent.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function selectRating(star, inputId) {
|
|
const value = parseInt(star.getAttribute('data-value'));
|
|
document.getElementById(inputId).value = value;
|
|
|
|
// Update star display
|
|
const allStars = star.parentNode.querySelectorAll('.rating-star');
|
|
allStars.forEach(s => {
|
|
const starValue = parseInt(s.getAttribute('data-value'));
|
|
if (starValue <= value) {
|
|
s.classList.remove('far');
|
|
s.classList.add('fas');
|
|
s.classList.add('selected');
|
|
} else {
|
|
s.classList.remove('fas');
|
|
s.classList.add('far');
|
|
s.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
// Hide error message if any
|
|
const errorId = inputId === 'teacher_rating' ? 'teacher-rating-error' : 'institute-rating-error';
|
|
document.getElementById(errorId).style.display = 'none';
|
|
}
|
|
</script>
|
|
|
|
<!-- Additional Feedback Styles -->
|
|
<style>
|
|
.feedback-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border: none;
|
|
margin-bottom: 1.5rem;
|
|
background-color: #f5f5f5;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.feedback-tab-btn {
|
|
flex: 1;
|
|
padding: 12px 24px;
|
|
cursor: pointer;
|
|
border: none !important;
|
|
background-color: transparent;
|
|
color: #333;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.feedback-tab-btn:hover:not(.active) {
|
|
background-color: rgba(63, 81, 181, 0.1);
|
|
}
|
|
|
|
.feedback-tab-btn.active {
|
|
background-color: #3F51B5 !important;
|
|
color: white !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.rating-star {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rating-star:hover,
|
|
.rating-star.active,
|
|
.rating-star.selected {
|
|
color: #FFD700 !important;
|
|
transform: scale(1.1);
|
|
}
|
|
</style> |