huge updates
This commit is contained in:
sankalp committed
1 parent
861d64c95a
commit
ee89d38489
56 files changed
+10130
-4185
No files matched your search
@@ -0,0 +1,134 @@
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-container">
|
||||
<a href="#" class="nav-item active" data-section="dashboard">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
{% if user.designation == 'Teacher' %}
|
||||
<a href="#subjectsSection" class="nav-item" data-section="subjects" onclick="showSection('subjectsSection'); return false;">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
<span>Subjects</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="schedule">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span>Schedule</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="attendance">
|
||||
<i class="fas fa-user-check"></i>
|
||||
<span>Attendance</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="leave">
|
||||
<i class="fas fa-calendar-times"></i>
|
||||
<span>Leaves</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="notice">
|
||||
<i class="fas fa-bullhorn"></i>
|
||||
<span>Notices</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="feedback">
|
||||
<i class="fas fa-star"></i>
|
||||
<span>Feedback</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="profile">
|
||||
<i class="fas fa-id-card"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="#" class="nav-item" data-section="subjects">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
<span>Subjects</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="routine">
|
||||
<i class="fas fa-calendar-week"></i>
|
||||
<span>Routine</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="attendance">
|
||||
<i class="fas fa-user-check"></i>
|
||||
<span>Attendance</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="leave">
|
||||
<i class="fas fa-calendar-times"></i>
|
||||
<span>Leaves</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="feedback">
|
||||
<i class="fas fa-star"></i>
|
||||
<span>Feedback</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="notice">
|
||||
<i class="fas fa-bullhorn"></i>
|
||||
<span>Notices</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-section="profile">
|
||||
<i class="fas fa-id-card"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="#" class="nav-item" onclick="document.getElementById('logoutForm').submit(); return false;">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
<form id="logoutForm" method="post" action="{% url 'logout' %}" style="display: none;">
|
||||
{% csrf_token %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Styles -->
|
||||
<style>
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #3F51B5;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: #3F51B5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
{% load static %}
|
||||
|
||||
<!-- Profile Modal -->
|
||||
<div id="profileModal" 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) closeProfileModal();">
|
||||
<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;">Update Profile Picture</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeProfileModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<form action="{% url 'update_profile' %}" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
{% if user.image %}
|
||||
<div class="profile-picture-container profile-lg mx-auto">
|
||||
<img src="{{ user.image.url }}" alt="{{ user.name }}" class="profile-picture">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="profile-picture-container profile-lg mx-auto">
|
||||
<img src="{% static 'img/user.png' %}" alt="Default User" class="profile-picture">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="display: block; margin-bottom: 8px; font-weight: 500;">Select New Profile Picture</label>
|
||||
<input type="file" name="profile_image" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<button type="button" onclick="closeProfileModal()" style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Cancel</button>
|
||||
<button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Update Picture</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Change Modal -->
|
||||
<div id="passwordModal" 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) closePasswordModal();">
|
||||
<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;">Change Password</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closePasswordModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<form action="{% url 'change_password' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="current_password" style="display: block; margin-bottom: 8px; font-weight: 500;">Current Password</label>
|
||||
<input type="password" id="current_password" name="current_password" 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="new_password" style="display: block; margin-bottom: 8px; font-weight: 500;">New Password</label>
|
||||
<input type="password" id="new_password" name="new_password" 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="confirm_password" style="display: block; margin-bottom: 8px; font-weight: 500;">Confirm New Password</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
|
||||
</div>
|
||||
<button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; width: 100%;">Change Password</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leave Request Modal -->
|
||||
<div id="customLeaveModal" 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) closeLeaveModal();">
|
||||
<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;">Request Leave</h5>
|
||||
<button id="closeCustomModal" style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeLeaveModal()">×</button>
|
||||
</div>
|
||||
<form action="{% if user.is_teacher %}{% url 'request_staff_leave' %}{% else %}{% url 'request_leave' %}{% endif %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div style="padding: 20px;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="startDate" style="display: block; margin-bottom: 8px; font-weight: 500;">Start Date</label>
|
||||
<input type="date" id="startDate" name="start_date" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required>
|
||||
</div>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="endDate" style="display: block; margin-bottom: 8px; font-weight: 500;">End Date</label>
|
||||
<input type="date" id="endDate" name="end_date" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required>
|
||||
</div>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="customLeaveMessage" style="display: block; margin-bottom: 8px; font-weight: 500;">Reason</label>
|
||||
<textarea id="customLeaveMessage" name="message" rows="3" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required></textarea>
|
||||
</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" id="cancelCustomModal" 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="closeLeaveModal()">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;">Submit Request</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div id="confirmationModal" 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) closeConfirmationModal();">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
|
||||
<div style="background-color: #f44336; 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;">Confirm Deletion</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeConfirmationModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<p class="mb-4">Are you sure you want to delete this file? This action cannot be undone.</p>
|
||||
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="button" class="btn btn-secondary me-2" onclick="closeConfirmationModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
|
||||
<i class="fas fa-trash me-1"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,230 @@
|
||||
<!-- 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>
|
||||
@@ -0,0 +1,32 @@
|
||||
{% load static %}
|
||||
|
||||
<!-- PDF Viewer Modal -->
|
||||
<div id="pdfViewerModal" 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) closePdfViewerModal();">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 1000px; height: 90vh; 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 Syllabus</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closePdfViewerModal()">×</button>
|
||||
</div>
|
||||
<div style="height: calc(90vh - 60px); padding: 0;">
|
||||
<iframe id="pdfViewer" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subject Files Modal -->
|
||||
<div id="subjectFilesModal" 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) closeSubjectFilesModal();">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; 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 Materials</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeSubjectFilesModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<div id="subjectFilesList" class="list-group">
|
||||
<!-- Files will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include student modals JavaScript -->
|
||||
<script src="{% static 'js/student_modals.js' %}"></script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!-- Teacher 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 Institute 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;">
|
||||
<form method="post" action="{% url 'submit_staff_institute_feedback' %}" id="instituteFeedbackForm">
|
||||
{% csrf_token %}
|
||||
<div class="mb-3">
|
||||
<label for="feedback_type" class="form-label">Feedback Type</label>
|
||||
<select class="form-select" id="feedback_type" name="feedback_type" required>
|
||||
<option value="">Select Type</option>
|
||||
{% for value, name in feedback_types %}
|
||||
<option value="{{ value }}">{{ name }}</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="selectRatingTeacher(this, 'teacher_modal_rating')"></i>
|
||||
<i class="far fa-star fs-4 text-warning rating-star" data-value="2" onclick="selectRatingTeacher(this, 'teacher_modal_rating')"></i>
|
||||
<i class="far fa-star fs-4 text-warning rating-star" data-value="3" onclick="selectRatingTeacher(this, 'teacher_modal_rating')"></i>
|
||||
<i class="far fa-star fs-4 text-warning rating-star" data-value="4" onclick="selectRatingTeacher(this, 'teacher_modal_rating')"></i>
|
||||
<i class="far fa-star fs-4 text-warning rating-star" data-value="5" onclick="selectRatingTeacher(this, 'teacher_modal_rating')"></i>
|
||||
<input type="hidden" name="rating" id="teacher_modal_rating" value="" required>
|
||||
<div class="invalid-feedback d-block" id="teacher-modal-rating-error" style="display: none;">Please select a rating</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="feedback_text" class="form-label">Feedback</label>
|
||||
<textarea class="form-control" id="feedback_text" name="feedback_text" rows="4" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="is_anonymous" name="is_anonymous">
|
||||
<label class="form-check-label" for="is_anonymous">Submit anonymously</label>
|
||||
</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>
|
||||
|
||||
<!-- Teacher 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 selectRatingTeacher(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 = 'teacher-modal-rating-error';
|
||||
document.getElementById(errorId).style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Additional Feedback Styles -->
|
||||
<style>
|
||||
.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>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- Attendance Modal -->
|
||||
<div id="attendanceModal" 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) closeAttendanceModal();">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; 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;">Take Attendance</h5>
|
||||
<button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeAttendanceModal()">×</button>
|
||||
</div>
|
||||
<div style="padding: 20px; max-height: 80vh; overflow-y: auto;">
|
||||
<form method="post" action="/app/save-attendance/" id="quickAttendanceForm">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="routine_id" id="modalRoutineId">
|
||||
<input type="hidden" name="date" id="modalDate">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="modalTeacherAttend" name="teacher_attend">
|
||||
<label class="form-check-label" for="modalTeacherAttend">Teacher Present</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select class="form-select" id="modalClassStatus" name="class_status">
|
||||
<option value="True" selected>Conducted</option>
|
||||
<option value="False">Not Conducted</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%">#</th>
|
||||
<th width="40%">Name</th>
|
||||
<th width="40%">Student ID</th>
|
||||
<th width="15%">Present</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalStudentList">
|
||||
<!-- Students will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 d-flex justify-content-between">
|
||||
<div>
|
||||
<button type="button" class="btn btn-outline-success me-2" onclick="markAllPresent()">
|
||||
<i class="fas fa-check-double me-1"></i> Mark All Present
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger" onclick="markAllAbsent()">
|
||||
<i class="fas fa-times-circle me-1"></i> Mark All Absent
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-save me-1"></i> Save Attendance
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other modals can be added here -->
|
||||
@@ -0,0 +1,32 @@
|
||||
{% load static %}
|
||||
|
||||
<!-- Welcome Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="content-card welcome-section">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<div class="d-flex align-items-center">
|
||||
{% if user.image %}
|
||||
<div class="profile-picture-container profile-sm">
|
||||
<img src="{{ user.image.url }}" alt="{{ user.name }}" class="profile-picture">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="profile-picture-container profile-sm">
|
||||
<img src="{% static 'img/user.png' %}" alt="Default User" class="profile-picture">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex-grow-1">
|
||||
<h2 class="mb-1">Welcome, {{ user.name }}!</h2>
|
||||
<p class="text-muted mb-0">
|
||||
{% if user.designation %}
|
||||
{{ user.designation }} <span class="ms-2 badge bg-info text-white">ID: {{ user.id }}</span>
|
||||
{% else %}
|
||||
Student <span class="ms-2 badge bg-info text-white">ID: {{ user.id }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user