Upload 10 files

src/views/InstructorView.js

@@ -424,6 +424,116 @@ export function setupInstructorEvents() {
         }
     }
 
+    // --- Transposed Heatmap Renderer ---
+    function renderTransposedHeatmap(users) {
+        const container = document.getElementById('heatmap-container');
+        if (!container) return; // Might be hidden
+
+        // Make sure challenges are loaded (might be empty initially)
+        if (cachedChallenges.length === 0) {
+            container.innerHTML = '<div class="text-gray-500 text-center p-4">載入題目中...</div>';
+            return;
+        }
+
+        // Sort challenges by order
+        const challenges = cachedChallenges.sort((a, b) => a.order - b.order);
+
+        // Sort users by login time (or name)
+        const sortedUsers = users.sort((a, b) => (a.joinedAt || 0) - (b.joinedAt || 0));
+
+        let html = `
+        <div class="overflow-x-auto">
+            <table class="w-full text-left border-collapse">
+                <thead>
+                    <tr>
+                        <th class="p-3 border-b border-gray-700 bg-gray-800/50 sticky left-0 z-10 min-w-[150px]">
+                            學員 (${sortedUsers.length})
+                        </th>
+                        ${challenges.map(c => `
+                            <th class="p-3 border-b border-gray-700 bg-gray-800/50 min-w-[120px] text-center relative group">
+                                <div class="flex flex-col items-center">
+                                    <span class="text-sm font-bold text-cyan-400 whitespace-nowrap">${c.title}</span>
+                                    <div class="opacity-0 group-hover:opacity-100 transition-opacity absolute -top-8 bg-black text-white text-xs p-1 rounded z-20 w-48 text-center pointer-events-none">
+                                        ${c.description?.slice(0, 50)}...
+                                    </div>
+                                    <button onclick="window.analyzeChallenge('${c.id}', '${c.title}')" 
+                                            class="mt-1 text-xs bg-purple-900/50 hover:bg-purple-600 text-purple-300 hover:text-white px-2 py-0.5 rounded border border-purple-700 transition-colors flex items-center gap-1 z-10 relative">
+                                        <span>✨ AI 選粹</span>
+                                    </button>
+                                </div>
+                            </th>
+                        `).join('')}
+                    </tr>
+                </thead>
+                <tbody>
+        `;
+
+        sortedUsers.forEach(user => {
+            const isOnline = (Date.now() - (user.lastSeen || 0)) < 60000; // 1 min threshold
+            const statusDot = isOnline ? '<span class="text-green-500">●</span>' : '<span class="text-gray-600">●</span>';
+
+            html += `
+                <tr class="hover:bg-gray-800/30 transition-colors">
+                    <td class="p-3 border-b border-gray-800 bg-gray-900/80 sticky left-0 z-10 font-mono text-sm border-r border-gray-700">
+                        <div class="flex items-center justify-between group">
+                            <div class="flex items-center space-x-2">
+                                ${statusDot}
+                                <span class="truncate max-w-[100px]" title="${user.nickname}">${user.nickname}</span>
+                            </div>
+                            <button onclick="window.confirmKick('${user.id}', '${user.nickname}')" 
+                                    class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-400 p-1 text-xs" 
+                                    title="踢出學員">✕</button>
+                        </div>
+                    </td>
+            `;
+
+            challenges.forEach(c => {
+                const progress = user.progress?.[c.id];
+                let cellContent = '<span class="text-gray-700">-</span>';
+                let cellClass = 'text-center border-b border-gray-800 p-2';
+
+                if (progress) {
+                    if (progress.status === 'completed') {
+                        cellContent = `
+                            <div class="flex flex-col items-center justify-center cursor-pointer hover:bg-gray-700/50 rounded p-1 transition-colors" onclick="window.showBroadcastModal('${user.id}', '${c.id}')">
+                                <span class="text-green-500 text-xl">✓</span>
+                                <span class="text-[10px] text-gray-500">${new Date(progress.completedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                            </div>
+                        `;
+                    } else if (progress.status === 'failed') {
+                        cellContent = '<span class="text-red-500 text-xl font-bold">✕</span>';
+                    } else {
+                        // In progress
+                        cellContent = '<span class="text-yellow-500 animate-pulse font-bold">...</span>';
+                    }
+                }
+
+                html += `<td class="${cellClass}">${cellContent}</td>`;
+            });
+
+            html += `</tr>`;
+        });
+
+        html += `
+                </tbody>
+            </table>
+        </div>
+        `;
+
+        container.innerHTML = html;
+    }
+
+    // Dashboard Update Logic (Global Scope)
+    const updateDashboard = (data) => {
+        const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
+
+        // Update global state for modals/snapshot
+        currentStudents = users;
+
+        // Use the full heatmap renderer
+        renderTransposedHeatmap(users);
+    }
+
     let roomUnsubscribe = null;
     let currentInstructor = null;
 
@@ -490,6 +600,37 @@ export function setupInstructorEvents() {
         }
     };
 
+    // Auto-Check Auth on Load (Restores session from Firebase)
+    (async () => {
+        try {
+            const { onAuthStateChanged } = await import("https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js");
+            const { auth } = await import("../services/firebase.js");
+
+            onAuthStateChanged(auth, async (user) => {
+                if (user) {
+                    // User is known to Firebase, check if they are an instructor
+                    const instructorData = await checkInstructorPermission(user);
+                    if (instructorData) {
+                        authModal.classList.add('hidden');
+                        checkPermissions(instructorData);
+                        localStorage.setItem('vibecoding_instructor_name', instructorData.name);
+
+                        // Auto-reconnect room if exists
+                        const savedRoom = localStorage.getItem('vibecoding_room_code');
+                        if (savedRoom) {
+                            // If we already have a room code, we could auto-setup dashboard state here if needed
+                            // For now, at least user is logged in
+                            const displayRoomCode = document.getElementById('display-room-code');
+                            if (displayRoomCode) displayRoomCode.textContent = savedRoom;
+                        }
+                    }
+                }
+            });
+        } catch (e) {
+            console.error("Auto-Auth Check Failed:", e);
+        }
+    })();
+
     // Email/Password Auth Logic
     if (loginBtn && registerBtn) {
         // Login Handler
@@ -618,115 +759,7 @@ export function setupInstructorEvents() {
 
     // Create Room
     if (createBtn) {
-        // Dashboard Update Logic
-        const updateDashboard = (data) => {
-            const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
-
-            // Update global state for modals/snapshot
-            currentStudents = users;
-
-            // Use the full heatmap renderer
-            renderTransposedHeatmap(users);
-        }
-
-        // --- Transposed Heatmap Renderer ---
-        function renderTransposedHeatmap(users) {
-            const container = document.getElementById('heatmap-container');
-            if (!container) return;
-
-            // Make sure challenges are loaded (might be empty initially)
-            if (cachedChallenges.length === 0) {
-                container.innerHTML = '<div class="text-gray-500 text-center p-4">載入題目中...</div>';
-                return;
-            }
-
-            // Sort challenges by order
-            const challenges = cachedChallenges.sort((a, b) => a.order - b.order);
-
-            // Sort users by login time (or name)
-            const sortedUsers = users.sort((a, b) => (a.joinedAt || 0) - (b.joinedAt || 0));
-
-            let html = `
-            <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse">
-                    <thead>
-                        <tr>
-                            <th class="p-3 border-b border-gray-700 bg-gray-800/50 sticky left-0 z-10 min-w-[150px]">
-                                學員 (${sortedUsers.length})
-                            </th>
-                            ${challenges.map(c => `
-                                <th class="p-3 border-b border-gray-700 bg-gray-800/50 min-w-[120px] text-center relative group">
-                                    <div class="flex flex-col items-center">
-                                        <span class="text-sm font-bold text-cyan-400 whitespace-nowrap">${c.title}</span>
-                                        <div class="opacity-0 group-hover:opacity-100 transition-opacity absolute -top-8 bg-black text-white text-xs p-1 rounded">
-                                            ${c.description?.slice(0, 20)}...
-                                        </div>
-                                        <button onclick="window.analyzeChallenge('${c.id}', '${c.title}')" 
-                                                class="mt-1 text-xs bg-purple-900/50 hover:bg-purple-600 text-purple-300 hover:text-white px-2 py-0.5 rounded border border-purple-700 transition-colors flex items-center gap-1">
-                                            <span>✨ AI 選粹</span>
-                                        </button>
-                                    </div>
-                                </th>
-                            `).join('')}
-                        </tr>
-                    </thead>
-                    <tbody>
-            `;
-
-            sortedUsers.forEach(user => {
-                const isOnline = (Date.now() - (user.lastSeen || 0)) < 60000; // 1 min threshold
-                const statusDot = isOnline ? '<span class="text-green-500">●</span>' : '<span class="text-gray-600">●</span>';
-
-                html += `
-                    <tr class="hover:bg-gray-800/30 transition-colors">
-                        <td class="p-3 border-b border-gray-800 bg-gray-900/80 sticky left-0 z-10 font-mono text-sm border-r border-gray-700">
-                            <div class="flex items-center justify-between group">
-                                <div class="flex items-center space-x-2">
-                                    ${statusDot}
-                                    <span class="truncate max-w-[100px]" title="${user.nickname}">${user.nickname}</span>
-                                </div>
-                                <button onclick="window.confirmKick('${user.id}', '${user.nickname}')" 
-                                        class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-400 p-1 text-xs" 
-                                        title="踢出學員">✕</button>
-                            </div>
-                        </td>
-                `;
-
-                challenges.forEach(c => {
-                    const progress = user.progress?.[c.id];
-                    let cellContent = '<span class="text-gray-700">-</span>';
-                    let cellClass = 'text-center border-b border-gray-800';
-
-                    if (progress) {
-                        if (progress.status === 'completed') {
-                            cellContent = `
-                                <div class="flex flex-col items-center cursor-pointer" onclick="window.showBroadcastModal('${user.id}', '${c.id}')">
-                                    <span class="text-green-500 text-xl">✓</span>
-                                    <span class="text-[10px] text-gray-500">${new Date(progress.completedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-                                </div>
-                            `;
-                        } else if (progress.status === 'failed') {
-                            cellContent = '<span class="text-red-500 text-xl">✕</span>';
-                        } else {
-                            // In progress
-                            cellContent = '<span class="text-yellow-500 animate-pulse">...</span>';
-                        }
-                    }
-
-                    html += `<td class="${cellClass}">${cellContent}</td>`;
-                });
-
-                html += `</tr>`;
-            });
-
-            html += `
-                    </tbody>
-                </table>
-            </div>
-            `;
-
-            container.innerHTML = html;
-        }
+        // Dashboard Update Logic moved to top scope
 
         // Auto-Check Auth on Load
         (async () => {