khaledmahfouz5/AL-Najeeb-System
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

Enhance the adding/removing students feature

تصفح المصدر 
- 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
//############################################//
هذا الالتزام موجود في:
Khaled Mahfouz
2025-07-10 13:15:01 +03:00
الأصل 55c5c4d6a8
التزام a3788e843a
2 ملفات معدلة مع 169 إضافات و99 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

132
templates/points.html
عرض الملف

@@ -24,13 +24,24 @@
<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 for="student_id" class="block text-sm font-medium text-gray-700 mb-1">اسم الطالب</label>
<select name="student_id" id="student_id" required 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">
<option value="">اختر طالباً...</option>
{% for student in students %}
<option value="{{ student.id }}">{{ student.student_name }} (النقاط الحالية: {{ student.points }})</option>
{% endfor %}
</select>
<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">
@@ -99,13 +110,77 @@
const submitPointsBtn = document.getElementById('submit-points-btn');
const quickAddButtons = document.querySelectorAll('.quick-add-btn');
// Function to update the submit button state (disabled/enabled)
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 = document.getElementById('student_id').value !== '';
const studentSelected = studentSelect.value !== '';
const allStudentsChecked = allStudentsCheckbox.checked;
const amountEntered = pointAmountInput.value.trim() !== '' && parseInt(pointAmountInput.value) > 0;
const operationSelected = operationInput.value !== '';
if (studentSelected && amountEntered && operationSelected) {
// 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');
@@ -116,22 +191,35 @@
}
}
// Event listeners for Add/Remove buttons
// 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'); // Darker green when active
removePointsBtn.classList.remove('bg-red-700'); // Remove darker red if it was active
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'); // Darker red when active
addPointsBtn.classList.remove('bg-green-700'); // Remove darker green if it was active
removePointsBtn.classList.add('bg-red-700');
addPointsBtn.classList.remove('bg-green-700');
updateSubmitButtonState();
});
// Event listener for quick add buttons
quickAddButtons.forEach(button => {
button.addEventListener('click', () => {
pointAmountInput.value = button.dataset.points;
@@ -139,22 +227,20 @@
});
});
// Event listener for manual input change
pointAmountInput.addEventListener('input', updateSubmitButtonState);
// Event listener for student selection change
document.getElementById('student_id').addEventListener('change', 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();
// Prevent double submission
const pointsForm = document.getElementById('points-form');
if (pointsForm) {
pointsForm.addEventListener('submit', () => {
submitPointsBtn.disabled = true;
submitPointsBtn.textContent = 'جاري المعالجة...'; // "Processing..."
submitPointsBtn.textContent = 'جاري المعالجة...';
});
}
</script>