Khaled Mahfouz
a3788e843a
- version : 1.6 - description : making a dropdown for searching for a specific student and add an option to add/remove points for every students . //############################################// modified: app.py modified: templates/points.html //############################################//
247 أسطر
14 KiB
HTML
247 أسطر
14 KiB
HTML
{% extends 'template.html' %}
|
|
|
|
{% block title %}النقاط{% endblock %}
|
|
|
|
{% block content %}
|
|
<header class="text-center">
|
|
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">نظام نقاط الطلاب</h1>
|
|
<nav class="mb-8">
|
|
<ul class="flex justify-center space-x-4 space-x-reverse bg-white p-2 rounded-full shadow-lg inline-flex">
|
|
<li>
|
|
<a href="{{ url_for('index') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">الصفحة الرئيسية</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('record') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">تسجيل حضور أو حفظ</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('points') }}" class="text-white bg-blue-600 hover:bg-blue-700 font-semibold px-6 py-3 rounded-full transition-all duration-300 ease-in-out shadow-md">النقاط</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg mb-8">
|
|
<h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-4">إدارة نقاط الطلاب</h2>
|
|
<form id="points-form" action="{{ url_for('points') }}" method="POST">
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">اختر الطلاب:</label>
|
|
<div class="flex items-center mb-3">
|
|
<input type="checkbox" id="all_students_checkbox" name="all_students" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
|
|
<label for="all_students_checkbox" class="ml-2 block text-sm text-gray-900 cursor-pointer">كل الطلاب</label>
|
|
</div>
|
|
|
|
<div id="individual_student_selection">
|
|
<label for="search_student_input" class="block text-sm font-medium text-gray-700 mb-1">ابحث عن طالب</label>
|
|
<input type="text" id="search_student_input" placeholder="اكتب اسم الطالب للبحث..."
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-right" dir="rtl">
|
|
<select name="student_id" id="student_id" required size="5"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2">
|
|
<option value="">اختر طالباً...</option>
|
|
{% for student in students %}
|
|
<option value="{{ student.id }}" data-student-name="{{ student.student_name }}">{{ student.student_name }} (النقاط الحالية: {{ student.points }})</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6 flex space-x-4 space-x-reverse">
|
|
<button type="button" id="add-points-btn" data-operation="add" class="flex-1 px-6 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all">
|
|
إضافة نقاط
|
|
</button>
|
|
<button type="button" id="remove-points-btn" data-operation="remove" class="flex-1 px-6 py-3 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all">
|
|
خصم نقاط
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="point_amount" class="block text-sm font-medium text-gray-700 mb-1">المبلغ</label>
|
|
<div class="flex space-x-2 space-x-reverse">
|
|
<button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="5">5 نقاط</button>
|
|
<button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="10">10 نقاط</button>
|
|
<button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="15">15 نقطة</button>
|
|
<button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="20">20 نقطة</button>
|
|
<input type="number" name="point_amount" id="point_amount" placeholder="أو أدخل يدوياً" min="1" required class="flex-1 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-right">
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="operation" id="operation-input">
|
|
|
|
<div class="mt-8 text-left">
|
|
<button type="submit" id="submit-points-btn" class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all" disabled>
|
|
تطبيق النقاط
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg">
|
|
<h2 class="text-2xl font-semibold mb-4 text-gray-800 border-b pb-4">قائمة الطلاب والنقاط</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 text-right">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
|
|
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الطالب</th>
|
|
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">النقاط</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for student in students %}
|
|
<tr class="hover:bg-gray-50 transition-colors duration-200">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-700">{{ loop.index }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ student.student_name }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-lg font-semibold text-blue-700">{{ student.points }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="text-center py-6 text-gray-500">لم تتم إضافة أي طالب بعد.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const addPointsBtn = document.getElementById('add-points-btn');
|
|
const removePointsBtn = document.getElementById('remove-points-btn');
|
|
const pointAmountInput = document.getElementById('point_amount');
|
|
const operationInput = document.getElementById('operation-input');
|
|
const submitPointsBtn = document.getElementById('submit-points-btn');
|
|
const quickAddButtons = document.querySelectorAll('.quick-add-btn');
|
|
|
|
const searchStudentInput = document.getElementById('search_student_input');
|
|
const studentSelect = document.getElementById('student_id');
|
|
const studentOptions = Array.from(studentSelect.options);
|
|
|
|
// New elements
|
|
const allStudentsCheckbox = document.getElementById('all_students_checkbox');
|
|
const individualStudentSelectionDiv = document.getElementById('individual_student_selection');
|
|
|
|
// Function to perform a fuzzy match (same as before)
|
|
function fuzzyMatch(pattern, text) {
|
|
pattern = pattern.toLowerCase();
|
|
text = text.toLowerCase();
|
|
let patternIdx = 0;
|
|
let textIdx = 0;
|
|
|
|
while (patternIdx < pattern.length && textIdx < text.length) {
|
|
if (pattern[patternIdx] === text[textIdx]) {
|
|
patternIdx++;
|
|
}
|
|
textIdx++;
|
|
}
|
|
return patternIdx === pattern.length;
|
|
}
|
|
|
|
// Function to filter dropdown options (updated to respect allStudentsCheckbox)
|
|
function filterStudentDropdown() {
|
|
if (allStudentsCheckbox.checked) {
|
|
return; // Do not filter if 'All Students' is checked
|
|
}
|
|
|
|
const searchTerm = searchStudentInput.value.trim();
|
|
studentSelect.innerHTML = ''; // Clear current options
|
|
|
|
const defaultOption = document.createElement('option');
|
|
defaultOption.value = '';
|
|
defaultOption.textContent = 'اختر طالباً...';
|
|
studentSelect.appendChild(defaultOption);
|
|
|
|
if (searchTerm === '') {
|
|
studentOptions.forEach(option => {
|
|
if (option.value !== '') { // Re-add only actual student options
|
|
studentSelect.appendChild(option.cloneNode(true));
|
|
}
|
|
});
|
|
} else {
|
|
studentOptions.forEach(option => {
|
|
const studentName = option.dataset.studentName;
|
|
if (option.value !== '' && studentName && fuzzyMatch(searchTerm, studentName)) {
|
|
studentSelect.appendChild(option.cloneNode(true));
|
|
}
|
|
});
|
|
}
|
|
// Ensure the selected value remains valid or reset if hidden
|
|
if (studentSelect.value !== '' && studentSelect.selectedOptions[0].parentElement !== studentSelect) {
|
|
studentSelect.value = ''; // Deselect if the current choice is now hidden
|
|
}
|
|
updateSubmitButtonState();
|
|
}
|
|
|
|
// Function to update the submit button state (modified for all_students_checkbox)
|
|
function updateSubmitButtonState() {
|
|
const studentSelected = studentSelect.value !== '';
|
|
const allStudentsChecked = allStudentsCheckbox.checked;
|
|
const amountEntered = pointAmountInput.value.trim() !== '' && parseInt(pointAmountInput.value) > 0;
|
|
const operationSelected = operationInput.value !== '';
|
|
|
|
// The button is enabled if:
|
|
// (a specific student is selected OR all students checkbox is checked)
|
|
// AND a valid amount is entered
|
|
// AND an operation (add/remove) is selected
|
|
if ((studentSelected || allStudentsChecked) && amountEntered && operationSelected) {
|
|
submitPointsBtn.disabled = false;
|
|
submitPointsBtn.classList.remove('bg-gray-400', 'hover:bg-gray-500');
|
|
submitPointsBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
|
|
} else {
|
|
submitPointsBtn.disabled = true;
|
|
submitPointsBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
|
|
submitPointsBtn.classList.add('bg-gray-400', 'hover:bg-gray-500');
|
|
}
|
|
}
|
|
|
|
// Event listener for All Students checkbox
|
|
allStudentsCheckbox.addEventListener('change', () => {
|
|
if (allStudentsCheckbox.checked) {
|
|
individualStudentSelectionDiv.classList.add('hidden'); // Hide individual selection
|
|
studentSelect.removeAttribute('required'); // No longer required if all students
|
|
studentSelect.value = ''; // Clear selection
|
|
searchStudentInput.value = ''; // Clear search input
|
|
filterStudentDropdown(); // Reset dropdown visually
|
|
} else {
|
|
individualStudentSelectionDiv.classList.remove('hidden'); // Show individual selection
|
|
studentSelect.setAttribute('required', 'required'); // Make dropdown required again
|
|
}
|
|
updateSubmitButtonState();
|
|
});
|
|
|
|
addPointsBtn.addEventListener('click', () => {
|
|
operationInput.value = 'add';
|
|
addPointsBtn.classList.add('bg-green-700');
|
|
removePointsBtn.classList.remove('bg-red-700');
|
|
updateSubmitButtonState();
|
|
});
|
|
|
|
removePointsBtn.addEventListener('click', () => {
|
|
operationInput.value = 'remove';
|
|
removePointsBtn.classList.add('bg-red-700');
|
|
addPointsBtn.classList.remove('bg-green-700');
|
|
updateSubmitButtonState();
|
|
});
|
|
|
|
quickAddButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
pointAmountInput.value = button.dataset.points;
|
|
updateSubmitButtonState();
|
|
});
|
|
});
|
|
|
|
pointAmountInput.addEventListener('input', updateSubmitButtonState);
|
|
studentSelect.addEventListener('change', updateSubmitButtonState);
|
|
searchStudentInput.addEventListener('input', filterStudentDropdown);
|
|
|
|
// Initial state check when the page loads
|
|
// Trigger checkbox change listener on load to set initial state
|
|
allStudentsCheckbox.dispatchEvent(new Event('change'));
|
|
updateSubmitButtonState();
|
|
|
|
const pointsForm = document.getElementById('points-form');
|
|
if (pointsForm) {
|
|
pointsForm.addEventListener('submit', () => {
|
|
submitPointsBtn.disabled = true;
|
|
submitPointsBtn.textContent = 'جاري المعالجة...';
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |