Upload 10 files

src/views/InstructorView.js

@@ -629,6 +629,138 @@ export function setupInstructorEvents() {
             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;
+        }
+
+        // Auto-Check Auth on Load
+        (async () => {
+            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 signed in, check if instructor permission
+                    try {
+                        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 in localStorage
+                            const savedRoom = localStorage.getItem('vibecoding_room_code');
+                            if (savedRoom && !document.getElementById('dashboard-content').classList.contains('hidden')) {
+                                // Already in dashboard, logic handled elsewhere or manual refresh needed
+                            } else if (savedRoom) {
+                                // Restore session logic if needed
+                                // For now, let user click "Rejoin" or "Create". 
+                                // But wait, the user said "back button returns to login page".
+                                // With this auth check, auth-modal will hide automatically.
+                            }
+                        }
+                    } catch (e) {
+                        console.error("Auth check failed:", e);
+                    }
+                }
+            });
+        })();
+
         // Create Room
         if (createBtn) {
             createBtn.addEventListener('click', async () => {