basysymthnybdalkhdr-svg opened a new issue, #1092:
URL: https://github.com/apache/cordova-plugin-inappbrowser/issues/1092
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نظام إدارة نتائج التلاميذ</title>
<script src="https://cdn.tailwindcss.com";></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js";></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";></script>
<style>
body {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.fade-in {
animation: fadeIn 0.4s ease-out;
}
.slide-in {
animation: slideIn 0.4s ease-out;
}
.spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 3px solid white;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.tab-button {
transition: all 0.3s ease;
}
.tab-button.active {
transform: translateY(-2px);
}
.modal-backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.btn-hover {
transition: all 0.2s ease;
}
.btn-hover:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
@media print {
.no-print { display: none !important; }
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
<script src="/_sdk/element_sdk.js" type="text/javascript"></script>
</head>
<body class="w-full h-full">
<div id="mainContainer" class="w-full min-h-full" style="background:
linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div class="container mx-auto px-4 py-6"><!-- Header -->
<header class="text-center mb-6 fade-in">
<h1 id="pageTitle" class="text-5xl font-bold text-white mb-2"
style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">نظام إدارة نتائج التلاميذ</h1>
<p class="text-white text-opacity-90 text-lg">نظام متكامل لإدارة
النتائج والشعب الدراسية</p>
</header><!-- Action Buttons Bar -->
<div class="bg-white rounded-lg shadow-xl p-4 mb-6 fade-in">
<div class="flex flex-wrap gap-3 justify-center"><button
id="addStudentBtn" class="bg-purple-600 text-white px-6 py-3 rounded-lg
font-bold btn-hover flex items-center gap-2"> <span>➕</span> <span>إضافة
تلميذ</span> </button> <button id="importBtn" class="bg-blue-600 text-white
px-6 py-3 rounded-lg font-bold btn-hover flex items-center gap-2">
<span>📋</span> <span>استيراد بيانات</span> </button> <button
id="exportImageBtn" class="bg-green-600 text-white px-6 py-3 rounded-lg
font-bold btn-hover flex items-center gap-2"> <span>🖼️</span> <span>تصدير
صورة</span> </button> <button id="exportPdfBtn" class="bg-red-600 text-white
px-6 py-3 rounded-lg font-bold btn-hover flex items-center gap-2">
<span>📄</span> <span>تصدير PDF</span> </button> <button id="exportWordBtn"
class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-bold btn-hover flex
items-center gap-2"> <span>���</span> <span>تصدير Word</span> </button> <button
id="clearAllBtn" class="bg-red-700 text-white px-6 py-3 rounded-lg font-bold
btn-hover flex items-center gap-2"> <span>🗑️</span> <span>مس�� كل
ال��يانات</span> </button>
</div>
</div><!-- Statistics Card -->
<div class="bg-white rounded-lg shadow-xl p-6 mb-6 fade-in card-shadow">
<h2 class="text-2xl font-bold mb-4 text-center" style="color:
#1f2937;">📊 إحصائيات <span id="statsTitle">جميع الشعب</span></h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-blue-50 rounded-lg p-4 text-center border-2
border-blue-200">
<div class="text-3xl mb-2">
👥
</div>
<div class="text-sm text-gray-600 mb-1">
إجمالي التلاميذ
</div>
<div id="totalStudents" class="text-3xl font-bold" style="color:
#3b82f6;">
0
</div>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center border-2
border-green-200">
<div class="text-3xl mb-2">
✅
</div>
<div class="text-sm text-gray-600 mb-1">
الناجحون
</div>
<div id="passedStudents" class="text-3xl font-bold" style="color:
#10b981;">
0
</div>
</div>
<div class="bg-red-50 rounded-lg p-4 text-center border-2
border-red-200">
<div class="text-3xl mb-2">
❌
</div>
<div class="text-sm text-gray-600 mb-1">
الراسبون
</div>
<div id="failedStudents" class="text-3xl font-bold" style="color:
#ef4444;">
0
</div>
</div>
<div class="bg-purple-50 rounded-lg p-4 text-center border-2
border-purple-200">
<div class="text-3xl mb-2">
📈
</div>
<div class="text-sm text-gray-600 mb-1">
نسبة النجاح
</div>
<div id="successRate" class="text-3xl font-bold" style="color:
#7c3aed;">
0%
</div>
</div>
</div>
<div class="mt-4 flex justify-center gap-3 flex-wrap"><button
id="showAllStats" class="bg-purple-600 text-white px-6 py-2 rounded-lg
font-bold btn-hover"> 📊 ���رض جميع الشعب </button> <button
id="showSectionStats" class="bg-blue-600 text-white px-6 py-2 rounded-lg
font-bold btn-hover"> 📋 الشعبة الحالية فقط </button>
</div>
</div><!-- Sections Tabs -->
<div class="bg-white rounded-lg shadow-xl p-4 mb-6 fade-in">
<div class="flex flex-wrap gap-3 justify-center"
id="sectionTabs"><button class="tab-button active px-8 py-3 rounded-lg
font-bold text-lg" data-section="section1" style="background-color: #7c3aed;
color: white;"> <span id="section1TabName">الشعبة أ</span> </button> <button
class="tab-button px-8 py-3 rounded-lg font-bold text-lg"
data-section="section2" style="background-color: #e5e7eb; color: #1f2937;">
<span id="section2TabName">الشعبة ب</span> </button> <button class="tab-button
px-8 py-3 rounded-lg font-bold text-lg" data-section="section3"
style="background-color: #e5e7eb; color: #1f2937;"> <span
id="section3TabName">الشعبة ج</span> </button> <button class="tab-button px-8
py-3 rounded-lg font-bold text-lg" data-section="section4"
style="background-color: #e5e7eb; color: #1f2937;"> <span
id="section4TabName">الشعبة د</span> </button>
</div>
</div><!-- Results Table -->
<div class="bg-white rounded-lg shadow-xl p-6 fade-in card-shadow"
id="resultsContainer">
<div class="flex justify-between items-center mb-4">
<h2 id="tableTitle" class="text-3xl font-bold" style="color:
#1f2937;">نتائج <span id="currentSectionName">ا��شعبة أ</span></h2>
<div class="text-sm" style="color: #6b7280;">
عدد التلاميذ: <span id="studentCount" class="font-bold text-lg"
style="color: #7c3aed;">0</span>
</div>
</div>
<div class="overflow-x-auto" id="printArea">
<table class="w-full border-collapse" id="resultsTable">
<thead>
<tr style="background-color: #f3e8ff;">
<th class="border border-gray-300 px-4 py-3 text-lg" style="color:
#1f2937;">الرقم</th>
<th class="border border-gray-300 px-4 py-3 text-lg" style="color:
#1f2937;">اسم التلميذ</th>
<th class="border border-gray-300 px-4 py-3 text-lg" style="color:
#1f2937;" id="tableMonth1Header">الشهر الأول</th>
<th class="border border-gray-300 px-4 py-3 text-lg" style="color:
#1f2937;" id="tableMonth2Header">الشهر الثاني</th>
<th class="border border-gray-300 px-4 py-3 text-lg" style="color:
#1f2937;">السعي الفصلي</th>
<th class="border border-gray-300 px-4 py-3 text-lg" style="color:
#1f2937;">الحالة</th>
<th class="border border-gray-300 px-4 py-3 text-lg no-print"
style="color: #1f2937;">الإجراءات</th>
</tr>
</thead>
<tbody id="studentsTable">
<tr id="emptyState">
<td colspan="7" class="border border-gray-300 px-4 py-12
text-center text-gray-500 text-lg">📚 لا توجد نتائج بعد. قم بإضافة أول
تلميذ!</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- Add Student Modal -->
<div id="addStudentModal" class="hidden fixed inset-0 z-50 flex
items-center justify-center modal-backdrop">
<div class="bg-white rounded-lg shadow-2xl p-6 mx-4 max-w-3xl w-full
max-h-[90%] overflow-y-auto slide-in">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold" style="color: #1f2937;">إضافة تلميذ
جديد</h2><button id="closeAddModal" class="text-gray-500 hover:text-gray-700
text-3xl">×</button>
</div>
<form id="studentForm" class="space-y-4">
<div><label for="studentName" class="block text-sm font-medium mb-1"
style="color: #374151;">اسم التلميذ</label> <input type="text" id="studentName"
required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
focus:ring-purple-500 focus:border-transparent" placeholder="أدخل ا��م التلميذ">
</div>
<div><label for="studentSection" class="block text-sm font-medium mb-1"
style="color: #374151;">الشعبة</label> <select id="studentSection" required
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
focus:ring-purple-500 focus:border-transparent"> <option
value="section1">الشعبة أ</option> <option value="section2">الشعب�� ب</option>
<option value="section3">الشعبة ج</option> <option value="section4">الشعبة
د</option> </select>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
<h3 id="modalMonth1Title" class="font-semibold mb-3" style="color:
#1f2937;">الشهر الأول</h3>
<div><label for="month1ExamNumber" class="block text-sm font-medium
mb-1" style="color: #374151;">درجة الامتحان (رقماً)</label> <input
type="number" id="month1ExamNumber" required min="0" max="100" class="w-full
px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500
focus:border-transparent" placeholder="0-100">
</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
<h3 id="modalMonth2Title" class="font-semibold mb-3" style="color:
#1f2937;">الشهر الثاني</h3>
<div><label for="month2ExamNumber" class="block text-sm font-medium
mb-1" style="color: #374151;">درجة الامتحان (رقماً)</label> <input
type="number" id="month2ExamNumber" required min="0" max="100" class="w-full
px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500
focus:border-transparent" placeholder="0-100">
</div>
</div>
</div>
<div class="border border-blue-200 rounded-lg p-4 bg-blue-50">
<div class="text-center">
<p class="text-sm text-gray-600 mb-2">السعي الفصلي سيتم حسابه
تلقائياً</p>
<p class="text-2xl font-bold" style="color: #7c3aed;">(الشهر ا��أول +
الشهر الثاني) ÷ 2</p>
</div>
</div><button type="submit" id="submitBtn" class="w-full text-white
font-bold py-3 rounded-lg transition duration-200 flex items-center
justify-center gap-2" style="background-color: #7c3aed;"> <span>➕</span>
<span>إضافة التلميذ</span> </button>
</form>
</div>
</div><!-- Import Modal -->
<div id="importModal" class="hidden fixed inset-0 z-50 flex items-center
justify-center modal-backdrop">
<div class="bg-white rounded-lg shadow-2xl p-6 mx-4 max-w-3xl w-full
max-h-[90%] overflow-y-auto slide-in">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold" style="color: #1f2937;">استيراد بيانات
التلاميذ</h2><button id="closeImportModal" class="text-gray-500
hover:text-gray-700 text-3xl">×</button>
</div>
<div class="mb-6">
<div class="flex gap-3 mb-4"><button id="importManualTab" class="flex-1
px-4 py-3 rounded-lg font-bold transition" style="background-color: #7c3aed;
color: white;"> ✍️ كتابة مباشرة </button> <button id="importTextTab"
class="flex-1 px-4 py-3 rounded-lg font-bold transition"
style="background-color: #e5e7eb; color: #1f2937;"> 📋 نسخ ولصق </button>
<button id="importFileTab" class="flex-1 px-4 py-3 rounded-lg font-bold
transition" style="background-color: #e5e7eb; color: #1f2937;"> 📂 رفع ملف
Excel/CSV </button>
</div>
</div><!-- Manual Entry Section -->
<div id="manualImportSection" class="space-y-4">
<div><label for="manualSection" class="block text-sm font-medium mb-1"
style="color: #374151;">اختر الشعبة</label> <select id="manualSection"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
focus:ring-purple-500 focus:border-transparent"> <option
value="section1">الشعبة أ</option> <option value="section2">الشعبة ب</option>
<option value="section3">الشعبة ج</option> <option value="section4">الشعبة
د</option> </select>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h3 class="font-bold mb-3 text-center" style="color: #1f2937;">📝 أدخل
بيانات التلاميذ واحداً تلو ا��آخر</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-3"><input
type="text" id="quickName" placeholder="اسم التلميذ" class="px-4 py-2 border
border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"> <input
type="number" id="quickMonth1" placeholder="الشهر الأول" min="0" max="100"
class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
focus:ring-purple-500"> <input type="number" id="quickMonth2"
placeholder="الشهر الثاني" min="0" max="100" class="px-4 py-2 border
border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"> <button
id="addQuickStudent" class="bg-green-600 text-white px-4 py-2 rounded-lg
font-bold btn-hover"> ➕ إضافة </button>
</div>
<div id="quickStudentsList" class="max-h-60 overflow-y-auto
space-y-2"><!-- Quick added students will appear here -->
</div>
</div><button id="saveQuickStudents" class="w-full text-white font-bold
py-3 rounded-lg btn-hover" style="background-color: #7c3aed;"> 💾 حفظ جميع
التلاميذ </button>
</div><!-- Text Import -->
<div id="textImportSection" class="hidden space-y-4">
<div><label for="importSection" class="block text-sm font-medium mb-1"
style="color: #374151;">اختر الشعبة</label> <select id="importSection"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
focus:ring-purple-500 focus:border-transparent"> <option
value="section1">الشعبة أ</option> <option value="section2">الشعبة ب</option>
<option value="section3">الشعبة ج</option> <option value="section4">الشعبة
د</option> </select>
</div>
<div><label for="namesTextarea" class="block text-sm font-medium mb-1"
style="color: #374151;"> الصق البيانات (اسم - درجة شهر1 - درجة شهر2) </label>
<textarea id="namesTextarea" rows="10" class="w-full px-4 py-2 border
border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500
focus:border-transparent font-mono" placeholder="أحمد ��حمد - 85 - 90
فاطمة علي - 92 - 88
محمد حسن - 78 - 82
أو فقط الأسماء:
أحمد محمد
فاطمة علي"></textarea>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm
text-blue-800">
💡 <strong>تنسيقات مدعومة:</strong><br>
• الاسم - درجة الشهر الأول - درجة الشهر الثاني<br>
• الاسم فقط (سيتم وضع صفر للدرجات)
</div><button id="importTextBtn" class="w-full bg-blue-600 text-white
font-bold py-3 rounded-lg btn-hover"> استيراد البيانات </button>
</div><!-- File Import -->
<div id="fileImportSection" class="hidden space-y-4">
<div><label for="fileSection" class="block text-sm font-medium mb-1"
style="color: #374151;">اختر الشعبة</label> <select id="fileSection"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
focus:ring-purple-500 focus:border-transparent"> <option
value="section1">الشعبة أ</option> <option value="section2">الشعبة ب</option>
<option value="section3">الشعبة ج</option> <option value="section4">الشعبة
د</option> </select>
</div>
<div><label class="block text-sm font-medium mb-1" style="color:
#374151;">اختر ملف Excel أو CSV</label> <input type="file" id="fileInput"
accept=".xlsx,.xls,.csv" class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm
text-blue-800">
💡 <strong>تنسيق الملف المطلوب:</strong><br>
• العمود الأول: اسم التلميذ<br>
• العمود الثاني: درجة الشهر الأول<br>
• العمود الثالث: درجة الشهر الثاني<br>
(يمكن ترك الدرجات فارغة)
</div><button id="importFileBtn" class="w-full bg-green-600 text-white
font-bold py-3 rounded-lg btn-hover"> استيراد من الملف </button>
</div>
</div>
</div><!-- Confirm Delete Modal -->
<div id="confirmModal" class="hidden fixed inset-0 z-50 flex items-center
justify-center modal-backdrop">
<div class="bg-white rounded-lg shadow-2xl p-6 mx-4 max-w-md w-full
slide-in">
<h3 class="text-xl font-bold mb-4 text-center" style="color:
#ef4444;">⚠️ تأكيد الحذف</h3>
<p class="text-center mb-6" style="color: #374151;">هل أنت متأكد من حذف
جميع البيانات؟<br>
لا يمكن التراجع عن هذا الإجراء!</p>
<div class="flex gap-3"><button id="confirmDeleteBtn" class="flex-1
bg-red-600 text-white px-6 py-3 rounded-lg font-bold btn-hover"> نعم، احذف الكل
</button> <button id="cancelDeleteBtn" class="flex-1 bg-gray-300 text-gray-700
px-6 py-3 rounded-lg font-bold btn-hover"> إلغاء </button>
</div>
</div>
</div><!-- Toast Message -->
<div id="toast" class="hidden fixed top-4 left-1/2 transform
-translate-x-1/2 px-6 py-3 rounded-lg shadow-lg text-white z-50 fade-in"></div>
<script>
// Local Storage Manager
const StorageManager = {
STORAGE_KEY: 'students_data',
loadData() {
try {
const data = localStorage.getItem(this.STORAGE_KEY);
return data ? JSON.parse(data) : [];
} catch (error) {
console.error('Error loading data:', error);
return [];
}
},
saveData(data) {
try {
localStorage.setItem(this.STORAGE_KEY,
JSON.stringify(data));
return true;
} catch (error) {
console.error('Error saving data:', error);
return false;
}
},
clearData() {
try {
localStorage.removeItem(this.STORAGE_KEY);
return true;
} catch (error) {
console.error('Error clearing data:', error);
return false;
}
}
};
let currentRecords = [];
let currentSection = 'section1';
let showAllStatsMode = true;
const numberToArabicWords = (num) => {
const ones = ['', 'واحد', 'اثنان', 'ثلاثة', 'أربعة', 'خمسة',
'ستة', 'سبعة', 'ثمانية', 'تسعة'];
const tens = ['', 'عشرة', 'عشرون', 'ثلاثون', 'أربعون', 'خمسون',
'ستون', 'سبعون', 'ثمانون', 'تسعون'];
const teens = ['عشرة', 'أحد عشر', 'اثنا عشر', 'ثلاثة عشر',
'أربعة عشر', 'خمسة عشر', 'ستة عشر', 'سبعة عشر', 'ثمانية عشر', 'تسعة عشر'];
if (num === 0) return 'صفر';
if (num === 100) return 'مائة';
if (num >= 10 && num < 20) {
return teens[num - 10];
}
const tensDigit = Math.floor(num / 10);
const onesDigit = num % 10;
let result = '';
if (tensDigit > 0) {
result += tens[tensDigit];
}
if (onesDigit > 0) {
if (tensDigit > 0) {
result += ' و';
}
result += ones[onesDigit];
}
return result;
};
const calculateTermEffort = (month1, month2) => {
const average = (month1 + month2) / 2;
return Math.round(average);
};
const getPassingGrade = () => {
return 50; // Default passing grade
};
const loadAllData = () => {
currentRecords = StorageManager.loadData();
renderStudents();
updateStudentCount();
updateStatistics();
};
const updateStatistics = () => {
const passingGrade = getPassingGrade();
let students = showAllStatsMode ? currentRecords :
currentRecords.filter(s => s.section === currentSection);
const total = students.length;
const passed = students.filter(s => s.term_effort >=
passingGrade).length;
const failed = total - passed;
const successRate = total > 0 ? ((passed / total) *
100).toFixed(1) : 0;
document.getElementById('totalStudents').textContent = total;
document.getElementById('passedStudents').textContent = passed;
document.getElementById('failedStudents').textContent = failed;
document.getElementById('successRate').textContent = successRate
+ '%';
const statsTitle = document.getElementById('statsTitle');
if (showAllStatsMode) {
statsTitle.textContent = 'جميع الشعب';
} else {
const sectionNames = {
'section1': 'الشعبة أ',
'section2': 'الشعبة ب',
'section3': 'الشعبة ج',
'section4': 'الشعبة د'
};
statsTitle.textContent = sectionNames[currentSection];
}
};
const updateStudentCount = () => {
const filtered = currentRecords.filter(s => s.section ===
currentSection);
document.getElementById('studentCount').textContent =
filtered.length;
};
const renderStudents = () => {
const tbody = document.getElementById('studentsTable');
const emptyState = document.getElementById('emptyState');
const filtered = currentRecords.filter(s => s.section ===
currentSection);
if (filtered.length === 0) {
emptyState.style.display = 'table-row';
const existingRows =
tbody.querySelectorAll('tr:not(#emptyState)');
existingRows.forEach(row => row.remove());
return;
}
emptyState.style.display = 'none';
// Clear and rebuild
const existingRows =
tbody.querySelectorAll('tr:not(#emptyState)');
existingRows.forEach(row => row.remove());
filtered.forEach((student, index) => {
tbody.appendChild(createStudentRow(student, index + 1));
});
};
const createStudentRow = (student, rowNumber) => {
const row = document.createElement('tr');
row.dataset.studentId = student.id;
row.className = 'hover:bg-gray-50 transition-colors fade-in';
const month1Words =
numberToArabicWords(student.month1_exam_number);
const month2Words =
numberToArabicWords(student.month2_exam_number);
const termEffortWords = numberToArabicWords(student.term_effort);
const passingGrade = getPassingGrade();
const isPassed = student.term_effort >= passingGrade;
const statusText = isPassed ? 'ناجح ✅' : 'راسب ❌';
const statusColor = isPassed ? '#10b981' : '#ef4444';
row.innerHTML = `
<td class="border border-gray-300 px-4 py-3 text-center
font-bold text-lg" style="color: #1f2937;">${rowNumber}</td>
<td class="border border-gray-300 px-4 py-3 font-semibold
text-lg" style="color: #1f2937;">${student.student_name}</td>
<td class="border border-gray-300 px-4 py-3 text-center">
<div class="font-bold text-xl" style="color:
#7c3aed;">${student.month1_exam_number}</div>
<div class="text-xs mt-1" style="color:
#1f2937;">(${month1Words})</div>
</td>
<td class="border border-gray-300 px-4 py-3 text-center">
<div class="font-bold text-xl" style="color:
#7c3aed;">${student.month2_exam_number}</div>
<div class="text-xs mt-1" style="color:
#1f2937;">(${month2Words})</div>
</td>
<td class="border border-gray-300 px-4 py-3 text-center">
<div class="font-bold text-2xl" style="color:
#7c3aed;">${student.term_effort}</div>
<div class="text-xs mt-1" style="color:
#1f2937;">(${termEffortWords})</div>
</td>
<td class="border border-gray-300 px-4 py-3 text-center">
<div class="font-bold text-lg" style="color:
${statusColor};">${statusText}</div>
</td>
<td class="border border-gray-300 px-4 py-3 text-center
no-print">
<button class="delete-btn bg-red-600 text-white px-4
py-2 rounded transition duration-200 hover:bg-red-700">
🗑️ حذف
</button>
</td>
`;
const deleteBtn = row.querySelector('.delete-btn');
deleteBtn.addEventListener('click', () =>
deleteStudent(student.id));
return row;
};
const deleteStudent = (studentId) => {
currentRecords = currentRecords.filter(s => s.id !== studentId);
StorageManager.saveData(currentRecords);
loadAllData();
showToast('✅ تم حذف التلميذ بنجاح!');
};
const showToast = (message, type = 'success') => {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.className = `fixed top-4 left-1/2 transform
-translate-x-1/2 px-6 py-3 rounded-lg shadow-lg text-white z-50 fade-in ${type
=== 'success' ? 'bg-green-500' : 'bg-red-500'}`;
toast.classList.remove('hidden');
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => {
toast.classList.add('hidden');
toast.style.opacity = '1';
}, 300);
}, 3000);
};
// Statistics toggle buttons
document.getElementById('showAllStats').addEventListener('click', ()
=> {
showAllStatsMode = true;
updateStatistics();
document.getElementById('showAllStats').style.backgroundColor =
'#7c3aed';
document.getElementById('showSectionStats').style.backgroundColor = '#6b7280';
});
document.getElementById('showSectionStats').addEventListener('click', () => {
showAllStatsMode = false;
updateStatistics();
document.getElementById('showSectionStats').style.backgroundColor = '#7c3aed';
document.getElementById('showAllStats').style.backgroundColor =
'#6b7280';
});
// Section tabs
document.getElementById('sectionTabs').addEventListener('click', (e)
=> {
const btn = e.target.closest('.tab-button');
if (!btn) return;
const section = btn.dataset.section;
currentSection = section;
document.querySelectorAll('.tab-button').forEach(b => {
b.classList.remove('active');
b.style.backgroundColor = '#e5e7eb';
b.style.color = '#1f2937';
});
btn.classList.add('active');
btn.style.backgroundColor = '#7c3aed';
btn.style.color = 'white';
const sectionNames = {
'section1': 'الشعبة أ',
'section2': 'الشعبة ب',
'section3': 'الشعبة ج',
'section4': 'الشعبة د'
};
document.getElementById('currentSectionName').textContent =
sectionNames[section];
renderStudents();
updateStudentCount();
if (!showAllStatsMode) {
updateStatistics();
}
});
// Add Student Modal
document.getElementById('addStudentBtn').addEventListener('click',
() => {
document.getElementById('addStudentModal').classList.remove('hidden');
document.getElementById('studentSection').value = currentSection;
});
document.getElementById('closeAddModal').addEventListener('click',
() => {
document.getElementById('addStudentModal').classList.add('hidden');
});
document.getElementById('studentForm').addEventListener('submit',
(e) => {
e.preventDefault();
const month1 =
parseInt(document.getElementById('month1ExamNumber').value);
const month2 =
parseInt(document.getElementById('month2ExamNumber').value);
const termEffort = calculateTermEffort(month1, month2);
const studentData = {
id: Date.now().toString() +
Math.random().toString(36).substr(2, 9),
student_name: document.getElementById('studentName').value,
section: document.getElementById('studentSection').value,
month1_exam_number: month1,
month1_exam_words: numberToArabicWords(month1),
month2_exam_number: month2,
month2_exam_words: numberToArabicWords(month2),
term_effort: termEffort,
created_at: new Date().toISOString()
};
currentRecords.push(studentData);
StorageManager.saveData(currentRecords);
e.target.reset();
document.getElementById('addStudentModal').classList.add('hidden');
loadAllData();
showToast('✅ تم إضافة التلميذ بنجاح!');
});
// Quick students temporary storage
let quickStudents = [];
// Import Modal Tabs
document.getElementById('importManualTab').addEventListener('click',
() => {
document.getElementById('manualImportSection').classList.remove('hidden');
document.getElementById('textImportSection').classList.add('hidden');
document.getElementById('fileImportSection').classList.add('hidden');
document.getElementById('importManualTab').style.backgroundColor
= '#7c3aed';
document.getElementById('importManualTab').style.color = 'white';
document.getElementById('importTextTab').style.backgroundColor =
'#e5e7eb';
document.getElementById('importTextTab').style.color = '#1f2937';
document.getElementById('importFileTab').style.backgroundColor =
'#e5e7eb';
document.getElementById('importFileTab').style.color = '#1f2937';
});
document.getElementById('importTextTab').addEventListener('click',
() => {
document.getElementById('textImportSection').classList.remove('hidden');
document.getElementById('manualImportSection').classList.add('hidden');
document.getElementById('fileImportSection').classList.add('hidden');
document.getElementById('importTextTab').style.backgroundColor =
'#7c3aed';
document.getElementById('importTextTab').style.color = 'white';
document.getElementById('importManualTab').style.backgroundColor
= '#e5e7eb';
document.getElementById('importManualTab').style.color =
'#1f2937';
document.getElementById('importFileTab').style.backgroundColor =
'#e5e7eb';
document.getElementById('importFileTab').style.color = '#1f2937';
});
document.getElementById('importFileTab').addEventListener('click',
() => {
document.getElementById('fileImportSection').classList.remove('hidden');
document.getElementById('manualImportSection').classList.add('hidden');
document.getElementById('textImportSection').classList.add('hidden');
document.getElementById('importFileTab').style.backgroundColor =
'#7c3aed';
document.getElementById('importFileTab').style.color = 'white';
document.getElementById('importManualTab').style.backgroundColor
= '#e5e7eb';
document.getElementById('importManualTab').style.color =
'#1f2937';
document.getElementById('importTextTab').style.backgroundColor =
'#e5e7eb';
document.getElementById('importTextTab').style.color = '#1f2937';
});
// Quick Add Student
const renderQuickStudents = () => {
const container = document.getElementById('quickStudentsList');
container.innerHTML = '';
if (quickStudents.length === 0) {
container.innerHTML = '<p class="text-center text-gray-500
py-4">لم يتم إضافة تلاميذ بعد</p>';
return;
}
quickStudents.forEach((student, index) => {
const div = document.createElement('div');
div.className = 'bg-white border border-gray-300 rounded-lg
p-3 flex justify-between items-center fade-in';
div.innerHTML = `
<div class="flex-1">
<span class="font-bold">${index + 1}.
${student.name}</span>
<span class="text-sm text-gray-600 mr-3">الشهر 1:
${student.month1} | الشهر 2: ${student.month2}</span>
</div>
<button class="remove-quick-student bg-red-500
text-white px-3 py-1 rounded hover:bg-red-600" data-index="${index}">
✖️
</button>
`;
container.appendChild(div);
});
document.querySelectorAll('.remove-quick-student').forEach(btn
=> {
btn.addEventListener('click', (e) => {
const index =
parseInt(e.target.closest('button').dataset.index);
quickStudents.splice(index, 1);
renderQuickStudents();
});
});
};
document.getElementById('addQuickStudent').addEventListener('click',
() => {
const name = document.getElementById('quickName').value.trim();
const month1 =
parseInt(document.getElementById('quickMonth1').value) || 0;
const month2 =
parseInt(document.getElementById('quickMonth2').value) || 0;
if (!name) {
showToast('⚠️ الرجاء إدخال اسم التلميذ', 'error');
return;
}
quickStudents.push({ name, month1, month2 });
document.getElementById('quickName').value = '';
document.getElementById('quickMonth1').value = '';
document.getElementById('quickMonth2').value = '';
document.getElementById('quickName').focus();
renderQuickStudents();
});
// Allow Enter key to add student
['quickName', 'quickMonth1', 'quickMonth2'].forEach(id => {
document.getElementById(id).addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
document.getElementById('addQuickStudent').click();
}
});
});
document.getElementById('saveQuickStudents').addEventListener('click', () => {
if (quickStudents.length === 0) {
showToast('⚠️ لم تقم بإضافة أي تلميذ', 'error');
return;
}
const section = document.getElementById('manualSection').value;
quickStudents.forEach(student => {
const termEffort = calculateTermEffort(student.month1,
student.month2);
const studentData = {
id: Date.now().toString() +
Math.random().toString(36).substr(2, 9),
student_name: student.name,
section: section,
month1_exam_number: student.month1,
month1_exam_words: numberToArabicWords(student.month1),
month2_exam_number: student.month2,
month2_exam_words: numberToArabicWords(student.month2),
term_effort: termEffort,
created_at: new Date().toISOString()
};
currentRecords.push(studentData);
});
StorageManager.saveData(currentRecords);
showToast(`✅ تم حفظ ${quickStudents.length} تلميذ بنجاح!`);
quickStudents = [];
renderQuickStudents();
document.getElementById('importModal').classList.add('hidden');
loadAllData();
});
// Import Modal
document.getElementById('importBtn').addEventListener('click', () =>
{
document.getElementById('importModal').classList.remove('hidden');
document.getElementById('importSection').value = currentSection;
document.getElementById('fileSection').value = currentSection;
});
document.getElementById('closeImportModal').addEventListener('click', () => {
document.getElementById('importModal').classList.add('hidden');
});
// Text Import
document.getElementById('importTextBtn').addEventListener('click',
() => {
const textarea = document.getElementById('namesTextarea');
const section = document.getElementById('importSection').value;
const lines = textarea.value.split('\n').filter(line =>
line.trim() !== '');
if (lines.length === 0) {
showToast('⚠️ الرجاء إدخال بيانات التلاميذ', 'error');
return;
}
let successCount = 0;
lines.forEach(line => {
const parts = line.split('-').map(p => p.trim());
const name = parts[0] || '';
const month1 = parts[1] ? parseInt(parts[1]) : 0;
const month2 = parts[2] ? parseInt(parts[2]) : 0;
if (!name) return;
const termEffort = calculateTermEffort(month1, month2);
const studentData = {
id: Date.now().toString() +
Math.random().toString(36).substr(2, 9),
student_name: name,
section: section,
month1_exam_number: month1,
month1_exam_words: numberToArabicWords(month1),
month2_exam_number: month2,
month2_exam_words: numberToArabicWords(month2),
term_effort: termEffort,
created_at: new Date().toISOString()
};
currentRecords.push(studentData);
successCount++;
});
StorageManager.saveData(currentRecords);
document.getElementById('importModal').classList.add('hidden');
textarea.value = '';
loadAllData();
showToast(`✅ تم استيراد ${successCount} تلميذ بنجاح!`);
});
// File Import
document.getElementById('importFileBtn').addEventListener('click',
async () => {
const fileInput = document.getElementById('fileInput');
const section = document.getElementById('fileSection').value;
if (!fileInput.files || fileInput.files.length === 0) {
showToast('⚠️ الرجاء اختيار ملف', 'error');
return;
}
const file = fileInput.files[0];
try {
const data = await file.arrayBuffer();
const workbook = XLSX.read(data);
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const rows = XLSX.utils.sheet_to_json(firstSheet, { header:
1 });
let successCount = 0;
rows.forEach(row => {
if (!row[0]) return;
const name = String(row[0]).trim();
const month1 = row[1] ? parseInt(row[1]) : 0;
const month2 = row[2] ? parseInt(row[2]) : 0;
const termEffort = calculateTermEffort(month1, month2);
const studentData = {
id: Date.now().toString() +
Math.random().toString(36).substr(2, 9),
student_name: name,
section: section,
month1_exam_number: month1,
month1_exam_words: numberToArabicWords(month1),
month2_exam_number: month2,
month2_exam_words: numberToArabicWords(month2),
term_effort: termEffort,
created_at: new Date().toISOString()
};
currentRecords.push(studentData);
successCount++;
});
StorageManager.saveData(currentRecords);
showToast(`✅ تم استيراد ${successCount} تلميذ من الملف!`);
loadAllData();
} catch (error) {
showToast('❌ حدث خطأ أثناء قراءة الملف', 'error');
}
document.getElementById('importModal').classList.add('hidden');
fileInput.value = '';
});
// Clear All Data
document.getElementById('clearAllBtn').addEventListener('click', ()
=> {
document.getElementById('confirmModal').classList.remove('hidden');
});
document.getElementById('cancelDeleteBtn').addEventListener('click',
() => {
document.getElementById('confirmModal').classList.add('hidden');
});
document.getElementById('confirmDeleteBtn').addEventListener('click', () => {
StorageManager.clearData();
currentRecords = [];
loadAllData();
document.getElementById('confirmModal').classList.add('hidden');
showToast('✅ تم مسح جميع البيانات بنجاح!');
});
// Export as Image
document.getElementById('exportImageBtn').addEventListener('click',
async () => {
const printArea = document.getElementById('resultsContainer');
const noPrintElements = printArea.querySelectorAll('.no-print');
noPrintElements.forEach(el => el.style.display = 'none');
// Set fixed A4 dimensions for consistent export
const originalWidth = printArea.style.width;
printArea.style.width = '210mm';
printArea.style.padding = '20mm';
try {
const canvas = await html2canvas(printArea, {
backgroundColor: '#ffffff',
scale: 3,
width: 794, // A4 width in pixels at 96 DPI
windowWidth: 794
});
const link = document.createElement('a');
const sectionNames = {
'section1': 'الشعبة أ',
'section2': 'الشعبة ب',
'section3': 'الشعبة ج',
'section4': 'الشعبة د'
};
link.download = `نتائج_${sectionNames[currentSection]}_${new
Date().toLocaleDateString('ar-EG')}.png`;
link.href = canvas.toDataURL('image/png', 1.0);
link.click();
showToast('✅ تم تصدير الصورة بنجاح!');
} catch (error) {
showToast('❌ حدث خطأ أثناء التصدير', 'error');
}
printArea.style.width = originalWidth;
noPrintElements.forEach(el => el.style.display = '');
});
// Export as PDF
document.getElementById('exportPdfBtn').addEventListener('click',
async () => {
const printArea = document.getElementById('resultsContainer');
const noPrintElements = printArea.querySelectorAll('.no-print');
noPrintElements.forEach(el => el.style.display = 'none');
// Set fixed A4 dimensions for consistent export
const originalWidth = printArea.style.width;
const originalPadding = printArea.style.padding;
printArea.style.width = '210mm';
printArea.style.padding = '20mm';
try {
const canvas = await html2canvas(printArea, {
backgroundColor: '#ffffff',
scale: 3,
width: 794,
windowWidth: 794
});
const imgData = canvas.toDataURL('image/png', 1.0);
const { jsPDF } = window.jspdf;
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = 210;
const pdfHeight = 297;
const margin = 10;
const imgWidth = pdfWidth - (2 * margin);
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = margin;
// Add first page
pdf.addImage(imgData, 'PNG', margin, position, imgWidth,
imgHeight);
heightLeft -= (pdfHeight - 2 * margin);
// Add additional pages if needed
while (heightLeft > 0) {
pdf.addPage();
position = margin - (imgHeight - heightLeft);
pdf.addImage(imgData, 'PNG', margin, position, imgWidth,
imgHeight);
heightLeft -= (pdfHeight - 2 * margin);
}
const sectionNames = {
'section1': 'الشعبة أ',
'section2': 'الشعبة ب',
'section3': 'الشعبة ج',
'section4': 'الشعبة د'
};
pdf.save(`نتائج_${sectionNames[currentSection]}_${new
Date().toLocaleDateString('ar-EG')}.pdf`);
showToast('✅ تم تصدير ملف PDF بنجاح!');
} catch (error) {
showToast('❌ حدث خطأ أثناء التصدير', 'error');
}
printArea.style.width = originalWidth;
printArea.style.padding = originalPadding;
noPrintElements.forEach(el => el.style.display = '');
});
// Export as Word
document.getElementById('exportWordBtn').addEventListener('click',
() => {
const sectionNames = {
'section1': 'الشعبة أ',
'section2': 'الشعبة ب',
'section3': 'الشعبة ج',
'section4': 'الشعبة د'
};
const filtered = currentRecords.filter(s => s.section ===
currentSection);
const passingGrade = getPassingGrade();
let htmlContent = `
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<style>
@page {
size: A4;
margin: 2cm;
}
body {
font-family: 'Arial', 'Tahoma', sans-serif;
direction: rtl;
width: 21cm;
margin: 0 auto;
padding: 1cm;
font-size: 12pt;
}
h1 {
text-align: center;
color: #1f2937;
font-size: 20pt;
margin-bottom: 10px;
font-weight: bold;
}
h2 {
text-align: center;
color: #374151;
font-size: 16pt;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
th, td {
border: 1.5pt solid #000000;
padding: 10px 8px;
text-align: center;
font-size: 11pt;
}
th {
background-color: #f3e8ff;
font-weight: bold;
font-size: 12pt;
}
.passed { color: #059669; font-weight: bold; }
.failed { color: #dc2626; font-weight: bold; }
</style>
</head>
<body>
<h1>نظام إدارة نتائج التلاميذ</h1>
<h2>نتائج ${sectionNames[currentSection]}</h2>
<table>
<thead>
<tr>
<th style="width: 8%;">الرقم</th>
<th style="width: 28%;">اسم التلميذ</th>
<th style="width: 20%;">الشهر الأول</th>
<th style="width: 20%;">الشهر الثاني</th>
<th style="width: 14%;">السعي الفصلي</th>
<th style="width: 10%;">الحالة</th>
</tr>
</thead>
<tbody>
`;
filtered.forEach((student, index) => {
const month1Words =
numberToArabicWords(student.month1_exam_number);
const month2Words =
numberToArabicWords(student.month2_exam_number);
const termEffortWords =
numberToArabicWords(student.term_effort);
const isPassed = student.term_effort >= passingGrade;
const status = isPassed ? 'ناجح' : 'راسب';
const statusClass = isPassed ? 'passed' : 'failed';
htmlContent += `
<tr>
<td><strong>${index + 1}</strong></td>
<td style="text-align: right; padding-right:
15px;"><strong>${student.student_name}</strong></td>
<td>${student.month1_exam_number}<br><span
style="font-size: 9pt; color: #6b7280;">(${month1Words})</span></td>
<td>${student.month2_exam_number}<br><span
style="font-size: 9pt; color: #6b7280;">(${month2Words})</span></td>
<td><strong style="font-size:
13pt;">${student.term_effort}</strong><br><span style="font-size: 9pt; color:
#6b7280;">(${termEffortWords})</span></td>
<td class="${statusClass}">${status}</td>
</tr>
`;
});
htmlContent += `
</tbody>
</table>
<div style="margin-top: 30px; text-align: center;
font-size: 10pt; color: #6b7280;">
تم إنشاء هذا التقرير في: ${new
Date().toLocaleDateString('ar-EG', { weekday: 'long', year: 'numeric', month:
'long', day: 'numeric' })}
</div>
</body>
</html>
`;
const blob = new Blob(['\ufeff', htmlContent], {
type: 'application/msword'
});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `نتائج_${sectionNames[currentSection]}_${new
Date().toLocaleDateString('ar-EG')}.doc`;
link.click();
showToast('✅ تم تصدير ملف Word بنجاح!');
});
// Initialize
loadAllData();
</script>
<script>(function(){function c(){var
b=a.contentDocument||a.contentWindow.document;if(b){var
d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9a592b46c71a6852',t:'MTc2NDMyNTYwNy4wMDAwMDA='};var
a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var
a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else
if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var
e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
