ข้อมูลพื้นฐาน

<!DOCTYPE html> <html lang="th"> <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://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap'); body { font-family: 'Sarabun', sans-serif; background-color: #f0f9f0; } .btn-primary { background-color: #2e7d32; color: white; transition: all 0.3s; } .btn-primary:hover { background-color: #1b5e20; } .btn-secondary { background-color: #81c784; color: white; transition: all 0.3s; } .btn-secondary:hover { background-color: #66bb6a; } .header-gradient { background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%); } .card { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s; } .card:hover { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } table th { background-color: #4caf50; color: white; } table tr:nth-child(even) { background-color: #e8f5e9; } .notification { position: fixed; top: 20px; right: 20px; padding: 15px 25px; background-color: #4caf50; color: white; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(200%); transition: transform 0.5s ease; z-index: 1000; } .notification.show { transform: translateX(0); } .logo-container { width: 100px; height: 100px; overflow: hidden; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .logo-placeholder { width: 80px; height: 80px; background-color: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2e7d32; font-size: 24px; } .tab-active { background-color: #4caf50; color: white; } </style> </head> <body> <div id="notification" class="notification"> ระบบได้บันทึกข้อมูลแล้ว </div> <div class="min-h-screen flex flex-col">  <header class="header-gradient text-white p-4 shadow-md"> <div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> <div class="flex items-center mb-4 md:mb-0"> <div class="logo-container mr-4" id="logo-container"> <div class="logo-placeholder" id="logo-placeholder"> <span>โลโก้</span> </div> <img id="school-logo" class="hidden w-full h-full object-contain" alt="โลโก้โรงเรียน"> </div> <div> <h1 class="text-2xl md:text-3xl font-bold">ระบบบันทึกสถิตินักเรียน</h1> <h2 class="text-xl md:text-2xl">โรงเรียนบ้านปาแตรายอ</h2> </div> </div> <div class="flex flex-col md:flex-row items-center"> <div class="mb-2 md:mb-0 md:mr-4"> <label for="date-picker" class="block text-sm font-medium">วันที่</label> <input type="date" id="date-picker" class="px-3 py-2 border rounded-md text-gray-700"> </div> <div> <input type="file" id="logo-upload" accept="image/*" class="hidden"> <button onclick="document.getElementById('logo-upload').click()" class="btn-secondary px-4 py-2 rounded-md text-sm">อัพโหลดโลโก้</button> </div> </div> </div> </header>  <main class="flex-grow container mx-auto p-4">  <div class="flex flex-wrap mb-6 bg-white rounded-lg shadow-sm"> <button class="tab-btn tab-active px-6 py-3 rounded-tl-lg rounded-bl-lg" data-tab="input">บันทึกข้อมูล</button> <button class="tab-btn px-6 py-3" data-tab="summary">สรุปข้อมูล</button> <button class="tab-btn px-6 py-3" data-tab="history">ประวัติย้อนหลัง</button> <button class="tab-btn px-6 py-3" data-tab="settings">ตั้งค่า</button> </div>  <div id="tab-content">  <div id="input-tab" class="tab-pane"> <div class="bg-white rounded-lg shadow-md p-6 mb-6"> <h3 class="text-xl font-semibold text-gray-800 mb-4">บันทึกข้อมูลการมาเรียน</h3> <div class="mb-4"> <label for="class-select" class="block text-sm font-medium text-gray-700 mb-1">เลือกชั้นเรียน</label> <select id="class-select" class="w-full md:w-1/3 px-3 py-2 border border-gray-300 rounded-md"> <option value="">-- เลือกชั้นเรียน --</option> <option value="1">ประถมศึกษาปีที่ 1</option> <option value="2">ประถมศึกษาปีที่ 2</option> <option value="3">ประถมศึกษาปีที่ 3</option> <option value="4">ประถมศึกษาปีที่ 4</option> <option value="5">ประถมศึกษาปีที่ 5</option> <option value="6">ประถมศึกษาปีที่ 6</option> </select> </div> <div class="overflow-x-auto"> <table id="attendance-table" class="min-w-full bg-white border border-gray-200"> <thead> <tr> <th class="py-3 px-4 border-b text-left">ข้อมูล</th> <th class="py-3 px-4 border-b text-center">นักเรียนชาย</th> <th class="py-3 px-4 border-b text-center">นักเรียนหญิง</th> <th class="py-3 px-4 border-b text-center">รวม</th> </tr> </thead> <tbody> <tr> <td class="py-3 px-4 border-b">จำนวนนักเรียนทั้งหมด</td> <td class="py-3 px-4 border-b"> <input type="number" id="total-male" class="w-full px-2 py-1 border rounded-md text-center" min="0"> </td> <td class="py-3 px-4 border-b"> <input type="number" id="total-female" class="w-full px-2 py-1 border rounded-md text-center" min="0"> </td> <td class="py-3 px-4 border-b text-center font-semibold" id="total-students">0</td> </tr> <tr> <td class="py-3 px-4 border-b">มาเรียน</td> <td class="py-3 px-4 border-b"> <input type="number" id="present-male" class="w-full px-2 py-1 border rounded-md text-center" min="0"> </td> <td class="py-3 px-4 border-b"> <input type="number" id="present-female" class="w-full px-2 py-1 border rounded-md text-center" min="0"> </td> <td class="py-3 px-4 border-b text-center font-semibold" id="total-present">0</td> </tr> <tr> <td class="py-3 px-4 border-b">ขาดเรียน</td> <td class="py-3 px-4 border-b"> <input type="number" id="absent-male" class="w-full px-2 py-1 border rounded-md text-center" min="0"> </td> <td class="py-3 px-4 border-b"> <input type="number" id="absent-female" class="w-full px-2 py-1 border rounded-md text-center" min="0"> </td> <td class="py-3 px-4 border-b text-center font-semibold" id="total-absent">0</td> </tr> <tr class="bg-green-50"> <td class="py-3 px-4 border-b font-semibold">เปอร์เซ็นต์การมาเรียน</td> <td class="py-3 px-4 border-b text-center font-semibold" id="percent-male">0%</td> <td class="py-3 px-4 border-b text-center font-semibold" id="percent-female">0%</td> <td class="py-3 px-4 border-b text-center font-semibold" id="percent-total">0%</td> </tr> </tbody> </table> </div> <div class="mt-6 flex justify-end"> <button id="save-btn" class="btn-primary px-6 py-2 rounded-md">บันทึกข้อมูล</button> </div> </div> </div>  <div id="summary-tab" class="tab-pane hidden"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> <div class="bg-white rounded-lg shadow-md p-4 card"> <h4 class="text-lg font-semibold text-gray-700 mb-2">จำนวนนักเรียนทั้งหมด</h4> <p class="text-3xl font-bold text-green-600" id="summary-total-students">0</p> <div class="flex justify-between mt-2 text-sm"> <span>ชาย: <span id="summary-total-male" class="font-semibold">0</span></span> <span>หญิง: <span id="summary-total-female" class="font-semibold">0</span></span> </div> </div> <div class="bg-white rounded-lg shadow-md p-4 card"> <h4 class="text-lg font-semibold text-gray-700 mb-2">มาเรียนวันนี้</h4> <p class="text-3xl font-bold text-green-600" id="summary-present">0</p> <div class="flex justify-between mt-2 text-sm"> <span>ชาย: <span id="summary-present-male" class="font-semibold">0</span></span> <span>หญิง: <span id="summary-present-female" class="font-semibold">0</span></span> </div> </div> <div class="bg-white rounded-lg shadow-md p-4 card"> <h4 class="text-lg font-semibold text-gray-700 mb-2">ขาดเรียนวันนี้</h4> <p class="text-3xl font-bold text-red-500" id="summary-absent">0</p> <div class="flex justify-between mt-2 text-sm"> <span>ชาย: <span id="summary-absent-male" class="font-semibold">0</span></span> <span>หญิง: <span id="summary-absent-female" class="font-semibold">0</span></span> </div> </div> <div class="bg-white rounded-lg shadow-md p-4 card"> <h4 class="text-lg font-semibold text-gray-700 mb-2">เปอร์เซ็นต์การมาเรียน</h4> <p class="text-3xl font-bold text-blue-600" id="summary-percent">0%</p> <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> <div class="bg-green-600 h-2.5 rounded-full" id="summary-percent-bar" style="width: 0%"></div> </div> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div class="bg-white rounded-lg shadow-md p-4"> <h4 class="text-lg font-semibold text-gray-700 mb-4">สถิติการมาเรียนแยกตามชั้น</h4> <canvas id="class-chart" height="250"></canvas> </div> <div class="bg-white rounded-lg shadow-md p-4"> <h4 class="text-lg font-semibold text-gray-700 mb-4">สัดส่วนนักเรียนชาย-หญิง</h4> <canvas id="gender-chart" height="250"></canvas> </div> </div> <div class="bg-white rounded-lg shadow-md p-6"> <div class="flex justify-between items-center mb-4"> <h3 class="text-xl font-semibold text-gray-800">สรุปข้อมูลทุกชั้นเรียน</h3> <button id="download-excel" class="btn-primary px-4 py-2 rounded-md flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> </svg> ดาวน์โหลด Excel </button> </div> <div class="overflow-x-auto"> <table id="summary-table" class="min-w-full bg-white border border-gray-200"> <thead> <tr> <th class="py-3 px-4 border-b text-left">ชั้นเรียน</th> <th class="py-3 px-4 border-b text-center">นักเรียนชาย</th> <th class="py-3 px-4 border-b text-center">นักเรียนหญิง</th> <th class="py-3 px-4 border-b text-center">รวม</th> <th class="py-3 px-4 border-b text-center">มาเรียน</th> <th class="py-3 px-4 border-b text-center">ขาดเรียน</th> <th class="py-3 px-4 border-b text-center">เปอร์เซ็นต์</th> </tr> </thead> <tbody id="summary-table-body">  </tbody> <tfoot> <tr class="bg-green-50 font-semibold"> <td class="py-3 px-4 border-b">รวมทั้งโรงเรียน</td> <td class="py-3 px-4 border-b text-center" id="footer-male">0</td> <td class="py-3 px-4 border-b text-center" id="footer-female">0</td> <td class="py-3 px-4 border-b text-center" id="footer-total">0</td> <td class="py-3 px-4 border-b text-center" id="footer-present">0</td> <td class="py-3 px-4 border-b text-center" id="footer-absent">0</td> <td class="py-3 px-4 border-b text-center" id="footer-percent">0%</td> </tr> </tfoot> </table> </div> </div> </div>  <div id="history-tab" class="tab-pane hidden"> <div class="bg-white rounded-lg shadow-md p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-4">ประวัติการบันทึกข้อมูล</h3> <div class="flex flex-wrap gap-4 mb-6"> <div> <label for="history-month" class="block text-sm font-medium text-gray-700 mb-1">เดือน</label> <select id="history-month" class="px-3 py-2 border border-gray-300 rounded-md"> <option value="1">มกราคม</option> <option value="2">กุมภาพันธ์</option> <option value="3">มีนาคม</option> <option value="4">เมษายน</option> <option value="5">พฤษภาคม</option> <option value="6">มิถุนายน</option> <option value="7">กรกฎาคม</option> <option value="8">สิงหาคม</option> <option value="9">กันยายน</option> <option value="10">ตุลาคม</option> <option value="11">พฤศจิกายน</option> <option value="12">ธันวาคม</option> </select> </div> <div> <label for="history-year" class="block text-sm font-medium text-gray-700 mb-1">ปี</label> <select id="history-year" class="px-3 py-2 border border-gray-300 rounded-md"> <option value="2023">2566</option> <option value="2024">2567</option> <option value="2025">2568</option> </select> </div> <div> <label for="history-class" class="block text-sm font-medium text-gray-700 mb-1">ชั้นเรียน</label> <select id="history-class" class="px-3 py-2 border border-gray-300 rounded-md"> <option value="all">ทุกชั้นเรียน</option> <option value="1">ประถมศึกษาปีที่ 1</option> <option value="2">ประถมศึกษาปีที่ 2</option> <option value="3">ประถมศึกษาปีที่ 3</option> <option value="4">ประถมศึกษาปีที่ 4</option> <option value="5">ประถมศึกษาปีที่ 5</option> <option value="6">ประถมศึกษาปีที่ 6</option> </select> </div> <div class="flex items-end"> <button id="search-history" class="btn-primary px-4 py-2 rounded-md">ค้นหา</button> </div> </div> <div class="overflow-x-auto"> <table id="history-table" class="min-w-full bg-white border border-gray-200"> <thead> <tr> <th class="py-3 px-4 border-b text-left">วันที่</th> <th class="py-3 px-4 border-b text-left">ชั้นเรียน</th> <th class="py-3 px-4 border-b text-center">นักเรียนชาย</th> <th class="py-3 px-4 border-b text-center">นักเรียนหญิง</th> <th class="py-3 px-4 border-b text-center">มาเรียน</th> <th class="py-3 px-4 border-b text-center">ขาดเรียน</th> <th class="py-3 px-4 border-b text-center">เปอร์เซ็นต์</th> <th class="py-3 px-4 border-b text-center">การจัดการ</th> </tr> </thead> <tbody id="history-table-body">  </tbody> </table> </div> <div id="history-pagination" class="mt-4 flex justify-center">  </div> </div> </div>  <div id="settings-tab" class="tab-pane hidden"> <div class="bg-white rounded-lg shadow-md p-6"> <h3 class="text-xl font-semibold text-gray-800 mb-4">ตั้งค่าระบบ</h3> <div class="mb-6"> <h4 class="text-lg font-medium text-gray-700 mb-2">จำนวนนักเรียนแต่ละชั้น</h4> <p class="text-sm text-gray-500 mb-4">กำหนดจำนวนนักเรียนเริ่มต้นสำหรับแต่ละชั้นเรียน</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="border rounded-md p-4"> <h5 class="font-medium mb-2">ประถมศึกษาปีที่ 1</h5> <div class="flex gap-2 mb-2"> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนชาย</label> <input type="number" id="settings-p1-male" class="w-full px-3 py-2 border rounded-md" min="0"> </div> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนหญิง</label> <input type="number" id="settings-p1-female" class="w-full px-3 py-2 border rounded-md" min="0"> </div> </div> </div> <div class="border rounded-md p-4"> <h5 class="font-medium mb-2">ประถมศึกษาปีที่ 2</h5> <div class="flex gap-2 mb-2"> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนชาย</label> <input type="number" id="settings-p2-male" class="w-full px-3 py-2 border rounded-md" min="0"> </div> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนหญิง</label> <input type="number" id="settings-p2-female" class="w-full px-3 py-2 border rounded-md" min="0"> </div> </div> </div> <div class="border rounded-md p-4"> <h5 class="font-medium mb-2">ประถมศึกษาปีที่ 3</h5> <div class="flex gap-2 mb-2"> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนชาย</label> <input type="number" id="settings-p3-male" class="w-full px-3 py-2 border rounded-md" min="0"> </div> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนหญิง</label> <input type="number" id="settings-p3-female" class="w-full px-3 py-2 border rounded-md" min="0"> </div> </div> </div> <div class="border rounded-md p-4"> <h5 class="font-medium mb-2">ประถมศึกษาปีที่ 4</h5> <div class="flex gap-2 mb-2"> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนชาย</label> <input type="number" id="settings-p4-male" class="w-full px-3 py-2 border rounded-md" min="0"> </div> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนหญิง</label> <input type="number" id="settings-p4-female" class="w-full px-3 py-2 border rounded-md" min="0"> </div> </div> </div> <div class="border rounded-md p-4"> <h5 class="font-medium mb-2">ประถมศึกษาปีที่ 5</h5> <div class="flex gap-2 mb-2"> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนชาย</label> <input type="number" id="settings-p5-male" class="w-full px-3 py-2 border rounded-md" min="0"> </div> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนหญิง</label> <input type="number" id="settings-p5-female" class="w-full px-3 py-2 border rounded-md" min="0"> </div> </div> </div> <div class="border rounded-md p-4"> <h5 class="font-medium mb-2">ประถมศึกษาปีที่ 6</h5> <div class="flex gap-2 mb-2"> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนชาย</label> <input type="number" id="settings-p6-male" class="w-full px-3 py-2 border rounded-md" min="0"> </div> <div class="w-1/2"> <label class="block text-sm text-gray-600 mb-1">นักเรียนหญิง</label> <input type="number" id="settings-p6-female" class="w-full px-3 py-2 border rounded-md" min="0"> </div> </div> </div> </div> </div> <div class="mb-6"> <h4 class="text-lg font-medium text-gray-700 mb-2">Google Sheet Integration</h4> <p class="text-sm text-gray-500 mb-4">กรอกข้อมูลเพื่อเชื่อมต่อกับ Google Sheet</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label for="sheet-id" class="block text-sm font-medium text-gray-700 mb-1">Google Sheet ID</label> <input type="text" id="sheet-id" class="w-full px-3 py-2 border rounded-md" placeholder="จาก URL ของ Google Sheet"> </div> <div> <label for="sheet-name" class="block text-sm font-medium text-gray-700 mb-1">ชื่อ Sheet</label> <input type="text" id="sheet-name" class="w-full px-3 py-2 border rounded-md" placeholder="เช่น Sheet1"> </div> </div> </div> <div class="flex justify-end"> <button id="save-settings" class="btn-primary px-6 py-2 rounded-md">บันทึกการตั้งค่า</button> </div> </div> </div> </div> </main>  <footer class="bg-gray-800 text-white p-4 mt-8"> <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> <div> <p>ระบบบันทึกสถิตินักเรียนโรงเรียนบ้านปาแตรายอ</p> <p class="text-sm text-gray-400">พัฒนาโดย Admin Patae (ID LONGA)</p> </div> <div class="mt-4 md:mt-0"> <p class="text-sm text-gray-400">© 2023 โรงเรียนบ้านปาแตรายอ</p> </div> </div> </footer> </div> <script> // Initialize data storage let attendanceData = JSON.parse(localStorage.getItem('attendanceData')) || {}; let classSettings = JSON.parse(localStorage.getItem('classSettings')) || { '1': { male: 15, female: 12 }, '2': { male: 14, female: 13 }, '3': { male: 16, female: 14 }, '4': { male: 13, female: 15 }, '5': { male: 15, female: 16 }, '6': { male: 14, female: 14 } }; let sheetSettings = JSON.parse(localStorage.getItem('sheetSettings')) || { sheetId: '', sheetName: 'Sheet1' }; // Set today's date as default const today = new Date(); const formattedDate = today.toISOString().split('T')[0]; document.getElementById('date-picker').value = formattedDate; // Tab switching functionality const tabBtns = document.querySelectorAll('.tab-btn'); const tabPanes = document.querySelectorAll('.tab-pane'); tabBtns.forEach(btn => { btn.addEventListener('click', () => { const tabId = btn.getAttribute('data-tab'); // Remove active class from all buttons and hide all panes tabBtns.forEach(b => b.classList.remove('tab-active')); tabPanes.forEach(p => p.classList.add('hidden')); // Add active class to clicked button and show corresponding pane btn.classList.add('tab-active'); document.getElementById(`${tabId}-tab`).classList.remove('hidden'); // Load data for the selected tab if (tabId === 'summary') { loadSummaryData(); } else if (tabId === 'history') { loadHistoryData(); } else if (tabId === 'settings') { loadSettingsData(); } }); }); // Logo upload functionality document.getElementById('logo-upload').addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(event) { const logoImg = document.getElementById('school-logo'); logoImg.src = event.target.result; logoImg.classList.remove('hidden'); document.getElementById('logo-placeholder').classList.add('hidden'); // Save logo to localStorage localStorage.setItem('schoolLogo', event.target.result); }; reader.readAsDataURL(file); } }); // Load saved logo if exists const savedLogo = localStorage.getItem('schoolLogo'); if (savedLogo) { const logoImg = document.getElementById('school-logo'); logoImg.src = savedLogo; logoImg.classList.remove('hidden'); document.getElementById('logo-placeholder').classList.add('hidden'); } // Input form functionality document.getElementById('class-select').addEventListener('change', function() { const classId = this.value; if (classId) { loadClassData(classId); } }); // Calculate totals when inputs change const inputFields = ['total-male', 'total-female', 'present-male', 'present-female', 'absent-male', 'absent-female']; inputFields.forEach(id => { document.getElementById(id).addEventListener('input', calculateTotals); }); function calculateTotals() { const totalMale = parseInt(document.getElementById('total-male').value) || 0; const totalFemale = parseInt(document.getElementById('total-female').value) || 0; const presentMale = parseInt(document.getElementById('present-male').value) || 0; const presentFemale = parseInt(document.getElementById('present-female').value) || 0; const absentMale = parseInt(document.getElementById('absent-male').value) || 0; const absentFemale = parseInt(document.getElementById('absent-female').value) || 0; // Calculate totals const totalStudents = totalMale + totalFemale; const totalPresent = presentMale + presentFemale; const totalAbsent = absentMale + absentFemale; // Calculate percentages const percentMale = totalMale > 0 ? Math.round((presentMale / totalMale) * 100) : 0; const percentFemale = totalFemale > 0 ? Math.round((presentFemale / totalFemale) * 100) : 0; const percentTotal = totalStudents > 0 ? Math.round((totalPresent / totalStudents) * 100) : 0; // Update display document.getElementById('total-students').textContent = totalStudents; document.getElementById('total-present').textContent = totalPresent; document.getElementById('total-absent').textContent = totalAbsent; document.getElementById('percent-male').textContent = `${percentMale}%`; document.getElementById('percent-female').textContent = `${percentFemale}%`; document.getElementById('percent-total').textContent = `${percentTotal}%`; // Auto-calculate absent students if (document.activeElement.id === 'present-male') { document.getElementById('absent-male').value = totalMale - presentMale; } else if (document.activeElement.id === 'present-female') { document.getElementById('absent-female').value = totalFemale - presentFemale; } else if (document.activeElement.id === 'absent-male') { document.getElementById('present-male').value = totalMale - absentMale; } else if (document.activeElement.id === 'absent-female') { document.getElementById('present-female').value = totalFemale - absentFemale; } } function loadClassData(classId) { // Load class settings const settings = classSettings[classId]; if (settings) { document.getElementById('total-male').value = settings.male; document.getElementById('total-female').value = settings.female; } else { document.getElementById('total-male').value = 0; document.getElementById('total-female').value = 0; } // Load saved attendance data for this class and date const date = document.getElementById('date-picker').value; const key = `${date}-${classId}`; if (attendanceData[key]) { const data = attendanceData[key]; document.getElementById('present-male').value = data.presentMale; document.getElementById('present-female').value = data.presentFemale; document.getElementById('absent-male').value = data.absentMale; document.getElementById('absent-female').value = data.absentFemale; } else { // Default to all students present document.getElementById('present-male').value = settings ? settings.male : 0; document.getElementById('present-female').value = settings ? settings.female : 0; document.getElementById('absent-male').value = 0; document.getElementById('absent-female').value = 0; } calculateTotals(); } // Save attendance data document.getElementById('save-btn').addEventListener('click', function() { const classId = document.getElementById('class-select').value; if (!classId) { alert('กรุณาเลือกชั้นเรียน'); return; } const date = document.getElementById('date-picker').value; const key = `${date}-${classId}`; const totalMale = parseInt(document.getElementById('total-male').value) || 0; const totalFemale = parseInt(document.getElementById('total-female').value) || 0; const presentMale = parseInt(document.getElementById('present-male').value) || 0; const presentFemale = parseInt(document.getElementById('present-female').value) || 0; const absentMale = parseInt(document.getElementById('absent-male').value) || 0; const absentFemale = parseInt(document.getElementById('absent-female').value) || 0; // Validate data if (presentMale + absentMale !== totalMale) { alert('จำนวนนักเรียนชายที่มาเรียนและขาดเรียนไม่เท่ากับจำนวนนักเรียนชายทั้งหมด'); return; } if (presentFemale + absentFemale !== totalFemale) { alert('จำนวนนักเรียนหญิงที่มาเรียนและขาดเรียนไม่เท่ากับจำนวนนักเรียนหญิงทั้งหมด'); return; } // Save data attendanceData[key] = { date, classId, totalMale, totalFemale, presentMale, presentFemale, absentMale, absentFemale, timestamp: new Date().toISOString() }; localStorage.setItem('attendanceData', JSON.stringify(attendanceData)); // Update class settings if total students changed if (classSettings[classId].male !== totalMale || classSettings[classId].female !== totalFemale) { classSettings[classId] = { male: totalMale, female: totalFemale }; localStorage.setItem('classSettings', JSON.stringify(classSettings)); } // Show notification const notification = document.getElementById('notification'); notification.textContent = 'ระบบได้บันทึกข้อมูลแล้ว'; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); // Send data to Google Sheet (mock implementation) sendToGoogleSheet(key, attendanceData[key]); }); // Load summary data function loadSummaryData() { const date = document.getElementById('date-picker').value; let totalStudents = 0; let totalMale = 0; let totalFemale = 0; let totalPresent = 0; let totalPresentMale = 0; let totalPresentFemale = 0; let totalAbsent = 0; let totalAbsentMale = 0; let totalAbsentFemale = 0; const summaryTableBody = document.getElementById('summary-table-body'); summaryTableBody.innerHTML = ''; const classData = []; // Process data for each class for (let i = 1; i <= 6; i++) { const key = `${date}-${i}`; const data = attendanceData[key] || { totalMale: classSettings[i].male, totalFemale: classSettings[i].female, presentMale: classSettings[i].male, presentFemale: classSettings[i].female, absentMale: 0, absentFemale: 0 }; const classTotalStudents = data.totalMale + data.totalFemale; const classTotalPresent = data.presentMale + data.presentFemale; const classTotalAbsent = data.absentMale + data.absentFemale; const classPercentage = classTotalStudents > 0 ? Math.round((classTotalPresent / classTotalStudents) * 100) : 0; // Add to totals totalMale += data.totalMale; totalFemale += data.totalFemale; totalPresentMale += data.presentMale; totalPresentFemale += data.presentFemale; totalAbsentMale += data.absentMale; totalAbsentFemale += data.absentFemale; // Create table row const row = document.createElement('tr'); row.innerHTML = ` <td class="py-3 px-4 border-b">ประถมศึกษาปีที่ ${i}</td> <td class="py-3 px-4 border-b text-center">${data.totalMale}</td> <td class="py-3 px-4 border-b text-center">${data.totalFemale}</td> <td class="py-3 px-4 border-b text-center">${classTotalStudents}</td> <td class="py-3 px-4 border-b text-center">${classTotalPresent}</td> <td class="py-3 px-4 border-b text-center">${classTotalAbsent}</td> <td class="py-3 px-4 border-b text-center">${classPercentage}%</td> `; summaryTableBody.appendChild(row); // Store data for charts classData.push({ name: `ป.${i}`, present: classTotalPresent, absent: classTotalAbsent, total: classTotalStudents }); } // Calculate totals totalStudents = totalMale + totalFemale; totalPresent = totalPresentMale + totalPresentFemale; totalAbsent = totalAbsentMale + totalAbsentFemale; const percentTotal = totalStudents > 0 ? Math.round((totalPresent / totalStudents) * 100) : 0; // Update footer document.getElementById('footer-male').textContent = totalMale; document.getElementById('footer-female').textContent = totalFemale; document.getElementById('footer-total').textContent = totalStudents; document.getElementById('footer-present').textContent = totalPresent; document.getElementById('footer-absent').textContent = totalAbsent; document.getElementById('footer-percent').textContent = `${percentTotal}%`; // Update summary cards document.getElementById('summary-total-students').textContent = totalStudents; document.getElementById('summary-total-male').textContent = totalMale; document.getElementById('summary-total-female').textContent = totalFemale; document.getElementById('summary-present').textContent = totalPresent; document.getElementById('summary-present-male').textContent = totalPresentMale; document.getElementById('summary-present-female').textContent = totalPresentFemale; document.getElementById('summary-absent').textContent = totalAbsent; document.getElementById('summary-absent-male').textContent = totalAbsentMale; document.getElementById('summary-absent-female').textContent = totalAbsentFemale; document.getElementById('summary-percent').textContent = `${percentTotal}%`; document.getElementById('summary-percent-bar').style.width = `${percentTotal}%`; // Create charts createClassChart(classData); createGenderChart(totalMale, totalFemale); } // Create class attendance chart function createClassChart(data) { const ctx = document.getElementById('class-chart').getContext('2d'); // Destroy existing chart if it exists if (window.classChart) { window.classChart.destroy(); } window.classChart = new Chart(ctx, { type: 'bar', data: { labels: data.map(item => item.name), datasets: [ { label: 'มาเรียน', data: data.map(item => item.present), backgroundColor: '#4caf50', borderColor: '#2e7d32', borderWidth: 1 }, { label: 'ขาดเรียน', data: data.map(item => item.absent), backgroundColor: '#ff5722', borderColor: '#e64a19', borderWidth: 1 } ] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); } // Create gender distribution chart function createGenderChart(male, female) { const ctx = document.getElementById('gender-chart').getContext('2d'); // Destroy existing chart if it exists if (window.genderChart) { window.genderChart.destroy(); } window.genderChart = new Chart(ctx, { type: 'pie', data: { labels: ['นักเรียนชาย', 'นักเรียนหญิง'], datasets: [{ data: [male, female], backgroundColor: ['#2196f3', '#e91e63'], borderColor: ['#1976d2', '#c2185b'], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'bottom' } } } }); } // Load history data function loadHistoryData() { const historyTableBody = document.getElementById('history-table-body'); historyTableBody.innerHTML = ''; // Get selected month and year const month = parseInt(document.getElementById('history-month').value); const year = parseInt(document.getElementById('history-year').value); const selectedClass = document.getElementById('history-class').value; // Filter data by month and year const filteredData = Object.values(attendanceData).filter(data => { const dataDate = new Date(data.date); return dataDate.getMonth() + 1 === month && dataDate.getFullYear() === year && (selectedClass === 'all' || data.classId === selectedClass); }); // Sort by date (newest first) filteredData.sort((a, b) => new Date(b.date) - new Date(a.date)); // Display data filteredData.forEach(data => { const totalStudents = data.totalMale + data.totalFemale; const totalPresent = data.presentMale + data.presentFemale; const totalAbsent = data.absentMale + data.absentFemale; const percentage = totalStudents > 0 ? Math.round((totalPresent / totalStudents) * 100) : 0; const formattedDate = new Date(data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' }); const row = document.createElement('tr'); row.innerHTML = ` <td class="py-3 px-4 border-b">${formattedDate}</td> <td class="py-3 px-4 border-b">ประถมศึกษาปีที่ ${data.classId}</td> <td class="py-3 px-4 border-b text-center">${data.totalMale}</td> <td class="py-3 px-4 border-b text-center">${data.totalFemale}</td> <td class="py-3 px-4 border-b text-center">${totalPresent}</td> <td class="py-3 px-4 border-b text-center">${totalAbsent}</td> <td class="py-3 px-4 border-b text-center">${percentage}%</td> <td class="py-3 px-4 border-b text-center"> <button class="edit-btn bg-blue-500 text-white px-2 py-1 rounded-md text-sm" data-date="${data.date}" data-class="${data.classId}">แก้ไข</button> <button class="delete-btn bg-red-500 text-white px-2 py-1 rounded-md text-sm ml-1" data-date="${data.date}" data-class="${data.classId}">ลบ</button> </td> `; historyTableBody.appendChild(row); }); // Add event listeners to edit and delete buttons document.querySelectorAll('.edit-btn').forEach(btn => { btn.addEventListener('click', function() { const date = this.getAttribute('data-date'); const classId = this.getAttribute('data-class'); // Set date and class document.getElementById('date-picker').value = date; document.getElementById('class-select').value = classId; // Switch to input tab document.querySelector('[data-tab="input"]').click(); // Load class data loadClassData(classId); }); }); document.querySelectorAll('.delete-btn').forEach(btn => { btn.addEventListener('click', function() { if (confirm('คุณต้องการลบข้อมูลนี้ใช่หรือไม่?')) { const date = this.getAttribute('data-date'); const classId = this.getAttribute('data-class'); const key = `${date}-${classId}`; // Delete data delete attendanceData[key]; localStorage.setItem('attendanceData', JSON.stringify(attendanceData)); // Reload history data loadHistoryData(); // Show notification const notification = document.getElementById('notification'); notification.textContent = 'ระบบได้ลบข้อมูลแล้ว'; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } }); }); } // Load settings data function loadSettingsData() { // Load class settings for (let i = 1; i <= 6; i++) { document.getElementById(`settings-p${i}-male`).value = classSettings[i].male; document.getElementById(`settings-p${i}-female`).value = classSettings[i].female; } // Load Google Sheet settings document.getElementById('sheet-id').value = sheetSettings.sheetId; document.getElementById('sheet-name').value = sheetSettings.sheetName; } // Save settings document.getElementById('save-settings').addEventListener('click', function() { // Save class settings for (let i = 1; i <= 6; i++) { const male = parseInt(document.getElementById(`settings-p${i}-male`).value) || 0; const female = parseInt(document.getElementById(`settings-p${i}-female`).value) || 0; classSettings[i] = { male, female }; } // Save Google Sheet settings sheetSettings.sheetId = document.getElementById('sheet-id').value; sheetSettings.sheetName = document.getElementById('sheet-name').value; // Save to localStorage localStorage.setItem('classSettings', JSON.stringify(classSettings)); localStorage.setItem('sheetSettings', JSON.stringify(sheetSettings)); // Show notification const notification = document.getElementById('notification'); notification.textContent = 'ระบบได้บันทึกการตั้งค่าแล้ว'; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); }); // Download Excel functionality document.getElementById('download-excel').addEventListener('click', function() { const date = document.getElementById('date-picker').value; const formattedDate = new Date(date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' }); // Create workbook const wb = XLSX.utils.book_new(); wb.Props = { Title: `สถิตินักเรียนโรงเรียนบ้านปาแตรายอ`, Subject: `ข้อมูลวันที่ ${formattedDate}`, Author: "Admin Patae (ID LONGA)", CreatedDate: new Date() }; // Create worksheet data const wsData = [ ['สถิตินักเรียนโรงเรียนบ้านปาแตรายอ', '', '', '', '', '', ''], [`ข้อมูลวันที่ ${formattedDate}`, '', '', '', '', '', ''], ['', '', '', '', '', '', ''], ['ชั้นเรียน', 'นักเรียนชาย', 'นักเรียนหญิง', 'รวม', 'มาเรียน', 'ขาดเรียน', 'เปอร์เซ็นต์'] ]; let totalMale = 0; let totalFemale = 0; let totalPresent = 0; let totalAbsent = 0; // Add data for each class for (let i = 1; i <= 6; i++) { const key = `${date}-${i}`; const data = attendanceData[key] || { totalMale: classSettings[i].male, totalFemale: classSettings[i].female, presentMale: classSettings[i].male, presentFemale: classSettings[i].female, absentMale: 0, absentFemale: 0 }; const classTotalStudents = data.totalMale + data.totalFemale; const classTotalPresent = data.presentMale + data.presentFemale; const classTotalAbsent = data.absentMale + data.absentFemale; const classPercentage = classTotalStudents > 0 ? Math.round((classTotalPresent / classTotalStudents) * 100) : 0; wsData.push([ `ประถมศึกษาปีที่ ${i}`, data.totalMale, data.totalFemale, classTotalStudents, classTotalPresent, classTotalAbsent, `${classPercentage}%` ]); totalMale += data.totalMale; totalFemale += data.totalFemale; totalPresent += classTotalPresent; totalAbsent += classTotalAbsent; } // Add total row const totalStudents = totalMale + totalFemale; const percentTotal = totalStudents > 0 ? Math.round((totalPresent / totalStudents) * 100) : 0; wsData.push([ 'รวมทั้งโรงเรียน', totalMale, totalFemale, totalStudents, totalPresent, totalAbsent, `${percentTotal}%` ]); // Create worksheet const ws = XLSX.utils.aoa_to_sheet(wsData); // Add worksheet to workbook XLSX.utils.book_append_sheet(wb, ws, "สถิตินักเรียน"); // Generate Excel file XLSX.writeFile(wb, `สถิตินักเรียนโรงเรียนบ้านปาแตรายอ_${date}.xlsx`); }); // Search history button document.getElementById('search-history').addEventListener('click', function() { loadHistoryData(); }); // Mock function for Google Sheet integration function sendToGoogleSheet(key, data) { // This is a mock function // In a real implementation, this would send data to Google Sheets API console.log('Sending data to Google Sheet:', data); // In a real implementation, you would use Google Sheets API // Example using fetch: /* const sheetId = sheetSettings.sheetId; const sheetName = sheetSettings.sheetName; if (!sheetId) return; const url = `https://script.google.com/macros/s/YOUR_GOOGLE_SCRIPT_ID/exec`; fetch(url, { method: 'POST', mode: 'no-cors', cache: 'no-cache', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ sheetId, sheetName, data: { date: data.date, classId: data.classId, totalMale: data.totalMale, totalFemale: data.totalFemale, presentMale: data.presentMale, presentFemale: data.presentFemale, absentMale: data.absentMale, absentFemale: data.absentFemale } }) }); */ } // Set current month and year in history tab document.getElementById('history-month').value = today.getMonth() + 1; document.getElementById('history-year').value = today.getFullYear(); // Initialize the app with the input tab document.querySelector('[data-tab="input"]').click(); </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:'962fe189d56c7323',t:'MTc1MzE1NTI1My4wMDAwMDA='};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>