Upload 9 files

src/views/InstructorView.js

@@ -1792,25 +1792,26 @@ if (addInstBtn) {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
         }
     };
+}
 
 
-    /**
-     * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
-     */
-    function renderTransposedHeatmap(students) {
-        const thead = document.getElementById('heatmap-header');
-        const tbody = document.getElementById('heatmap-body');
+/**
+ * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
+ */
+function renderTransposedHeatmap(students) {
+    const thead = document.getElementById('heatmap-header');
+    const tbody = document.getElementById('heatmap-body');
 
-        if (students.length === 0) {
-            thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
-            tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
-            return;
-        }
+    if (students.length === 0) {
+        thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
+        tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
+        return;
+    }
 
-        // 1. Render Header (Students)
-        // Sticky Top for Header Row
-        // Sticky Left for the first cell ("Challenge/Student")
-        let headerHtml = `
+    // 1. Render Header (Students)
+    // Sticky Top for Header Row
+    // Sticky Left for the first cell ("Challenge/Student")
+    let headerHtml = `
             <th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md">
                 <div class="flex justify-between items-end">
                     <span class="text-sm text-gray-400">題目</span>
@@ -1819,8 +1820,8 @@ if (addInstBtn) {
             </th>
             `;
 
-        students.forEach(student => {
-            headerHtml += `
+    students.forEach(student => {
+        headerHtml += `
     <th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group">
         <div class="flex flex-col items-center space-y-2 py-2">
             <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-xs font-bold text-white uppercase border border-gray-500 shadow-sm relative">
@@ -1839,59 +1840,59 @@ if (addInstBtn) {
         </div>
             </th>
     `;
-        });
-        thead.innerHTML = headerHtml;
+    });
+    thead.innerHTML = headerHtml;
 
-        // 2. Render Body (Challenges as Rows)
-        if (cachedChallenges.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
-            return;
-        }
+    // 2. Render Body (Challenges as Rows)
+    if (cachedChallenges.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
+        return;
+    }
 
-        tbody.innerHTML = cachedChallenges.map((c, index) => {
-            const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
-            const color = colors[c.level] || 'gray';
-
-            // Build Row Cells (One per student)
-            const rowCells = students.map(student => {
-                const p = student.progress?.[c.id];
-                let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
-                let content = '';
-                let action = '';
-
-                if (p) {
-                    if (p.status === 'completed') {
-                        statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
-                        content = '✅';
-                        // Action removed: Moved to prompt list view
-                        action = `title="完成 - 請點擊標題查看詳情"`;
-                    } else if (p.status === 'started') {
-                        // Check stuck
-                        const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
-                        const now = new Date();
-                        const diffMins = (now - startedAt) / 1000 / 60;
-
-                        if (diffMins > 5) {
-                            statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
-                            content = '🆘';
-                        } else {
-                            statusClass = 'bg-blue-600/20 border-blue-500';
-                            content = '🔵';
-                        }
+    tbody.innerHTML = cachedChallenges.map((c, index) => {
+        const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+        const color = colors[c.level] || 'gray';
+
+        // Build Row Cells (One per student)
+        const rowCells = students.map(student => {
+            const p = student.progress?.[c.id];
+            let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
+            let content = '';
+            let action = '';
+
+            if (p) {
+                if (p.status === 'completed') {
+                    statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
+                    content = '✅';
+                    // Action removed: Moved to prompt list view
+                    action = `title="完成 - 請點擊標題查看詳情"`;
+                } else if (p.status === 'started') {
+                    // Check stuck
+                    const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
+                    const now = new Date();
+                    const diffMins = (now - startedAt) / 1000 / 60;
+
+                    if (diffMins > 5) {
+                        statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
+                        content = '🆘';
+                    } else {
+                        statusClass = 'bg-blue-600/20 border-blue-500';
+                        content = '🔵';
                     }
                 }
+            }
 
-                return `
+            return `
             <td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors">
                 <div class="mx-auto w-10 h-10 rounded-lg border flex items-center justify-center ${statusClass} transition-all duration-300" ${action}>
                     ${content}
                 </div>
             </td>
             `;
-            }).join('');
+        }).join('');
 
-            // Row Header (Challenge Title)
-            return `
+        // Row Header (Challenge Title)
+        return `
             <tr class="hover:bg-gray-800/50 transition-colors">
                 <td class="p-3 sticky left-0 bg-gray-900 z-10 border-r border-b border-gray-700 shadow-md">
                     <div class="flex items-center justify-between">
@@ -1908,7 +1909,7 @@ if (addInstBtn) {
                 ${rowCells}
             </tr>
             `;
-        }).join('');
-    }
+    }).join('');
+}