Update index.html

index.html

@@ -5,24 +5,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>E-Buku Kawalan Bersama</title>
   
-  <!-- Tailwind CSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
   
-  <!-- React & ReactDOM CDN -->
   <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
   
-  <!-- Babel Standalone for inline JSX parsing -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
-  <!-- Inter Font -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
   <style>
     body { font-family: 'Inter', sans-serif; }
-    /* Custom scrollbar styling for webkit */
     ::-webkit-scrollbar { width: 6px; height: 6px; }
     ::-webkit-scrollbar-track { background: #f1f5f9; }
     ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
@@ -36,7 +31,6 @@
   <script type="text/babel">
     const { useState, useEffect, useMemo, useCallback } = React;
 
-    // --- SVG Icon Components for standard browser compatibility ---
     const Icon = ({ path, className = "w-5 h-5", viewBox = "0 0 24 24" }) => (
       <svg className={className} fill="none" stroke="currentColor" viewBox={viewBox} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
         {path}
@@ -60,13 +54,9 @@
     const ShieldAlert = (p) => <Icon {...p} path={<><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>} />;
     const ArrowRight = (p) => <Icon {...p} path={<><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>} />;
 
-    // --- Constants ---
-    // 静态数据（老师、科目、学生、考勤）— 你原来的 Web App
     const GOOGLE_SHEETS_WEB_APP_URL = 'https://script.google.com/macros/s/AKfycbyW8HovLImrWBDRqG_nL50DrotcTuHQbYAm5kW2HNd1_PKLwZPO4l6P9pjGCdk4T4M/exec';
 
-    // 日志数据（老师签到 + 学生出班）— 请把下面换成你部署后的 Logs Web App URL
-    // 部署步骤见 AppsScript_Logs.gs 文件顶部说明
-    const LOGS_WEB_APP_URL = 'https://script.google.com/macros/s/YOUR_LOGS_DEPLOYMENT_ID/exec';
+    const LOGS_WEB_APP_URL = 'https://script.google.com/macros/s/AKfycbw8neGdrM0tScM5A2bCK4DamtkA9A_-TvCIgQ8PrcXJPxqEZ5nudr9_FLjp9zyStWBm/exec';
 
     const DEFAULT_CLASSES = [
       'PA',
@@ -124,12 +114,11 @@
       return null;
     };
 
-    // 发送日志到 Google Sheet (Logs)
     const postLog = async (payload) => {
       try {
         await fetch(LOGS_WEB_APP_URL, {
           method: 'POST',
-          mode: 'no-cors', // Apps Script Web App 需要 no-cors 才能成功（会收到 opaque response）
+          mode: 'no-cors',
           headers: { 'Content-Type': 'text/plain' },
           body: JSON.stringify(payload)
         });
@@ -140,7 +129,6 @@
       }
     };
 
-    // --- Main App Component ---
     function App() {
       const [isOnline, setIsOnline] = useState(false);
       const [activeTab, setActiveTab] = useState('class_view');
@@ -153,7 +141,6 @@
       const [error, setError] = useState(null);
       const [isLoading, setIsLoading] = useState(true);
 
-      // 结构: { "5B": { teacherLogs: { "1": {name, subject} }, studentLogs: { "1": [{id, names, timeOut}] } }, ... }
       const [allClassLogs, setAllClassLogs] = useState({});
       const [activeSlot, setActiveSlot] = useState(null);
       const [isTeacherModalOpen, setIsTeacherModalOpen] = useState(false);
@@ -179,12 +166,10 @@
       const today = new Date();
       const dateId = `${today.getDate().toString().padStart(2, '0')}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getFullYear()}`;
 
-      // 当前选中班级的日志
       const selectedClassData = allClassLogs[selectedClass] || {};
       const teacherLogs = selectedClassData.teacherLogs || {};
       const studentLogs = selectedClassData.studentLogs || {};
 
-      // 拉取静态数据（老师、科目、学生、考勤）
       useEffect(() => {
         const fetchStaticData = async () => {
           setIsLoading(true);
@@ -209,13 +194,7 @@
         fetchStaticData();
       }, []);
 
-      // 拉取今日日志（从第二个 Sheet）
       const fetchLogs = useCallback(async (showLoading = false) => {
-        if (LOGS_WEB_APP_URL.includes('YOUR_LOGS_DEPLOYMENT_ID')) {
-          // 还没填真实 URL，跳过
-          setIsOnline(false);
-          return;
-        }
         try {
           const url = `${LOGS_WEB_APP_URL}?date=${dateId}&t=${Date.now()}`;
           const response = await fetch(url);
@@ -235,7 +214,6 @@
 
       useEffect(() => {
         fetchLogs();
-        // 每 30 秒自动刷新一次（多设备同步）
         const interval = setInterval(() => fetchLogs(), 30000);
         return () => clearInterval(interval);
       }, [fetchLogs]);
@@ -248,7 +226,6 @@
         todaysAttendance = attendanceData[Object.keys(attendanceData)[Object.keys(attendanceData).length - 1]];
       }
 
-      // Calculations
       const absenteesForClass = todaysAttendance ? (todaysAttendance[selectedClass] || []) : [];
       const classStudents = studentsData[selectedClass] || [];
       const totalStudents = classStudents.length || 24; 
@@ -339,7 +316,6 @@
 
       const noTeacherClassesCount = classesTeacherStatus.filter(c => c.activeSlot && !c.isRecess && !c.hasTeacher).length;
 
-      // ---------- Mutators (全部改写到 Google Sheets) ----------
       const openTeacherModal = (slot) => {
         if (slot.id === 'R') return;
         setActiveSlot(slot);
@@ -350,14 +326,12 @@
       const saveTeacherLog = async () => {
         if (!tempTeacher.name) return;
 
-        // 乐观更新本地
         const updatedTeacherLogs = { ...teacherLogs, [activeSlot.id]: { ...tempTeacher } };
         setAllClassLogs(prev => ({
           ...prev,
           [selectedClass]: { ...selectedClassData, teacherLogs: updatedTeacherLogs }
         }));
 
-        // 写入 Logs Sheet
         await postLog({
           className: selectedClass,
           type: 'teacher',
@@ -390,17 +364,15 @@
         const updatedSlotLogs = [...(studentLogs[activeSlot.id] || []), newLog];
         const updatedStudentLogs = { ...studentLogs, [activeSlot.id]: updatedSlotLogs };
         
-        // 乐观更新
         setAllClassLogs(prev => ({
           ...prev,
           [selectedClass]: { ...selectedClassData, studentLogs: updatedStudentLogs }
         }));
 
-        // 写入 Logs Sheet
         await postLog({
           className: selectedClass,
           type: 'student',
-          name: '', // 学生出班不需要老师名
+          name: '',
           period: activeSlot.id,
           subject: teacherLogs[activeSlot.id]?.subject || '',
           action: 'exit',
@@ -481,7 +453,7 @@
         <div className="min-h-screen bg-slate-100 p-2 sm:p-4 md:p-8 text-slate-800 font-sans">
           <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
             
-            {/* Main Application Header */}
+            
             <div className="bg-indigo-700 text-white p-4 md:p-6 pb-2 md:pb-4 flex flex-col gap-4">
               <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                 <div>
@@ -527,7 +499,7 @@
                 </div>
               </div>
 
-              {/* Navigation Bar / Page Switcher Tabs */}
+              
               <div className="flex items-center gap-2 border-t border-indigo-600/50 pt-3 mt-1">
                 <button
                   onClick={() => setActiveTab('class_view')}
@@ -567,11 +539,11 @@
               </div>
             )}
 
-            {/* School Summary Tab */}
+            
             {activeTab === 'school_summary' && (
               <div className="p-4 md:p-6 bg-slate-50 min-h-[600px] space-y-6">
                 
-                {/* School Overall Stats */}
+                
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                   <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                     <div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Kadar Kehadiran Sekolah</div>
@@ -622,7 +594,7 @@
                   </div>
                 </div>
 
-                {/* Live Teacher Presence Monitor */}
+                
                 <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-4 md:p-6 space-y-4">
                   <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-100 pb-4">
                     <div>
@@ -637,7 +609,7 @@
                       </p>
                     </div>
 
-                    {/* Filter Buttons */}
+                    
                     <div className="flex flex-wrap items-center gap-2">
                       <button
                         onClick={() => setTeacherFilter('all')}
@@ -672,7 +644,7 @@
                     </div>
                   </div>
 
-                  {/* Alert Notification if missing teachers */}
+                  
                   {noTeacherClassesCount > 0 ? (
                     <div className="bg-red-50 border border-red-200 text-red-800 p-3.5 rounded-xl flex items-center justify-between gap-3 text-xs md:text-sm font-semibold">
                       <div className="flex items-center gap-2">
@@ -693,7 +665,7 @@
                     </div>
                   )}
 
-                  {/* Grid of Class Teacher Statuses */}
+                  
                   <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 pt-2">
                     {classesTeacherStatus
                       .filter(cStatus => {
@@ -798,7 +770,7 @@
               </div>
             )}
 
-            {/* Class View Tab */}
+            
             {activeTab === 'class_view' && (
               <>
                 <div className="p-4 md:p-6 grid grid-cols-1 lg:grid-cols-2 gap-6 border-b border-slate-100 bg-white">
@@ -1037,7 +1009,7 @@
 
           </div>
 
-          {/* Teacher Modal */}
+          
           {isTeacherModalOpen && (
             <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-end sm:items-center justify-center p-4 z-50">
               <div className="bg-white rounded-t-2xl sm:rounded-2xl p-6 w-full max-w-sm">
@@ -1071,7 +1043,7 @@
             </div>
           )}
 
-          {/* Student Modal */}
+          
           {isStudentModalOpen && (
             <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-end sm:items-center justify-center p-4 z-50">
               <div className="bg-white rounded-t-2xl sm:rounded-2xl p-6 w-full max-w-md h-[85vh] sm:h-auto sm:max-h-[85vh] flex flex-col">
@@ -1116,7 +1088,7 @@
             </div>
           )}
 
-          {/* Delete Confirmation Modal */}
+          
           {itemToDelete && (
             <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
               <div className="bg-white rounded-2xl p-6 w-full max-w-sm text-center">
@@ -1146,4 +1118,4 @@
     root.render(<App />);
   </script>
 </body>
-</html>
+</html>