Upload 10 files

src/views/InstructorView.js

@@ -307,10 +307,10 @@ export async function renderInstructorView() {
                         </button>
                         <div id="create-room-container" class="flex items-center space-x-2">
                             <input type="text" id="rejoin-room-code" placeholder="代碼" class="bg-gray-900 border border-gray-700 text-white px-3 py-2 rounded-lg w-20 text-center focus:outline-none focus:border-cyan-500">
-                                <button id="rejoin-room-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded-lg">重回</button>
+                                <button id="rejoin-room-btn" onclick="window.rejoinRoom()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded-lg">重回</button>
 
-                                <button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold px-4 py-2 rounded-lg shadow-lg">開房</button>
-                                <button id="setup-ai-btn" class="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-white font-bold px-4 py-2 rounded-lg shadow-lg flex items-center space-x-1" title="設定 AI 助教">
+                                <button id="create-room-btn" onclick="window.createRoom()" class="bg-purple-600 hover:bg-purple-500 text-white font-bold px-4 py-2 rounded-lg shadow-lg">開房</button>
+                                <button id="setup-ai-btn" onclick="window.setupAi()" class="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-white font-bold px-4 py-2 rounded-lg shadow-lg flex items-center space-x-1" title="設定 AI 助教">
                                     <span>🧠 AI 設定</span>
                                 </button>
                         </div>
@@ -338,7 +338,7 @@ export async function renderInstructorView() {
 
                     <div class="flex justify-end space-x-2">
                         <button onclick="document.getElementById('ai-settings-modal').classList.add('hidden')" class="px-4 py-2 text-gray-400 hover:text-white">取消</button>
-                        <button id="save-ai-settings" class="px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded font-bold">儲存並啟動</button>
+                        <button id="save-ai-settings" onclick="window.saveAiSettings()" class="px-6 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded font-bold">儲存並啟動</button>
                     </div>
                 </div>
             </div>
@@ -346,10 +346,10 @@ export async function renderInstructorView() {
                 <!-- Fixed Bottom Right Controls -->
 
                 <div class="fixed bottom-6 right-6 z-40 flex flex-col space-y-4">
-                    <button id="btn-open-gallery" class="w-14 h-14 rounded-full bg-gray-800/80 backdrop-blur-md border border-cyan-500/30 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.3)] hover:scale-110 hover:bg-cyan-900/50 hover:border-cyan-400 transition-all duration-300 flex items-center justify-center group" title="怪獸圖鑑">
+                    <button id="btn-open-gallery" onclick="window.openGallery()" class="w-14 h-14 rounded-full bg-gray-800/80 backdrop-blur-md border border-cyan-500/30 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.3)] hover:scale-110 hover:bg-cyan-900/50 hover:border-cyan-400 transition-all duration-300 flex items-center justify-center group" title="怪獸圖鑑">
                         <span class="text-2xl filter drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] group-hover:animate-bounce">👾</span>
                     </button>
-                    <button id="logout-btn" class="w-14 h-14 rounded-full bg-gray-800/80 backdrop-blur-md border border-red-500/30 text-red-400 shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:scale-110 hover:bg-red-900/50 hover:border-red-400 transition-all duration-300 flex items-center justify-center" title="登出">
+                    <button id="logout-btn" onclick="window.instructorLogout()" class="w-14 h-14 rounded-full bg-gray-800/80 backdrop-blur-md border border-red-500/30 text-red-400 shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:scale-110 hover:bg-red-900/50 hover:border-red-400 transition-all duration-300 flex items-center justify-center" title="登出">
                         <span class="text-xl filter drop-shadow-[0_0_5px_rgba(248,113,113,0.8)]">🚪</span>
                     </button>
                 </div>
@@ -381,7 +381,9 @@ export function setupInstructorEvents() {
     // --- Global Nav Functions (Hoisted) ---
     window.openAdminPanel = () => {
         if (!window.currentInstructor?.permissions?.includes('add_question')) return alert("無權限");
-        alert("管理功能尚未開放 (Admin Function Placeholder)");
+        if (confirm("即將離開儀表板前往題目管理頁面，確定嗎？")) {
+            window.location.hash = 'admin';
+        }
     };
 
     window.openInstructorPanel = async () => {
@@ -416,6 +418,145 @@ export function setupInstructorEvents() {
         }
     };
 
+    // --- Additional Global Button Functions ---
+    window.instructorLogout = async () => {
+        if (confirm("確定要登出嗎？")) {
+            try {
+                const { signOutUser } = await import("../services/auth.js");
+                await signOutUser();
+                window.location.reload();
+            } catch (e) {
+                console.error("Logout failed:", e);
+                alert("登出失敗");
+            }
+        }
+    };
+
+    window.openGallery = () => {
+        window.open('monster_preview.html', '_blank');
+    };
+
+    window.createRoom = async () => {
+        const roomCode = Math.floor(1000 + Math.random() * 9000).toString();
+        try {
+            const roomInfo = document.getElementById('room-info');
+            const displayRoomCode = document.getElementById('display-room-code');
+            const createContainer = document.getElementById('create-room-container');
+            const dashboardContent = document.getElementById('dashboard-content');
+            const { createRoom: createRoomService } = await import("../services/classroom.js");
+            const { cleanupOldRooms } = await import("../services/classroom.js");
+
+            await createRoomService(roomCode, window.currentInstructor ? window.currentInstructor.name : 'Unknown');
+            cleanupOldRooms();
+
+            displayRoomCode.textContent = roomCode;
+            localStorage.setItem('vibecoding_room_code', roomCode);
+            localStorage.setItem('vibecoding_is_host', 'true');
+
+            createContainer.classList.add('hidden');
+            roomInfo.classList.remove('hidden');
+            dashboardContent.classList.remove('hidden');
+
+            const { subscribeToRoom } = await import("../services/classroom.js");
+            subscribeToRoom(roomCode, (data) => {
+                if (typeof window.updateDashboard === 'function') {
+                    window.updateDashboard(data);
+                }
+            });
+        } catch (e) {
+            console.error(e);
+            alert("無法建立教室: " + e.message);
+        }
+    };
+
+    window.rejoinRoom = async () => {
+        const inputCode = document.getElementById('rejoin-room-code')?.value.trim().toUpperCase();
+        if (!inputCode) return alert("請輸入代碼");
+
+        try {
+            const roomInfo = document.getElementById('room-info');
+            const displayRoomCode = document.getElementById('display-room-code');
+            const createContainer = document.getElementById('create-room-container');
+            const dashboardContent = document.getElementById('dashboard-content');
+            const { subscribeToRoom } = await import("../services/classroom.js");
+
+            displayRoomCode.textContent = inputCode;
+            localStorage.setItem('vibecoding_room_code', inputCode);
+
+            createContainer.classList.add('hidden');
+            roomInfo.classList.remove('hidden');
+            dashboardContent.classList.remove('hidden');
+            const groupPhotoBtn = document.getElementById('group-photo-btn');
+            if (groupPhotoBtn) groupPhotoBtn.classList.remove('hidden');
+
+            subscribeToRoom(inputCode, async (data) => {
+                const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
+                if (typeof window.renderTransposedHeatmap === 'function') {
+                    window.renderTransposedHeatmap(users);
+                }
+            });
+        } catch (e) {
+            console.error(e);
+            alert("加入失敗: " + e.message);
+        }
+    };
+
+    window.setupAi = () => {
+        const key = localStorage.getItem('vibecoding_gemini_key') || '';
+        const studentEnabled = localStorage.getItem('vibecoding_student_ai_enabled') === 'true';
+
+        const geminiKeyInput = document.getElementById('gemini-api-key');
+        const toggleStudentAi = document.getElementById('toggle-student-ai');
+        const aiSettingsModal = document.getElementById('ai-settings-modal');
+
+        if (geminiKeyInput) geminiKeyInput.value = key;
+        if (toggleStudentAi) toggleStudentAi.checked = studentEnabled;
+        if (aiSettingsModal) aiSettingsModal.classList.remove('hidden');
+    };
+
+    window.saveAiSettings = async () => {
+        const geminiKeyInput = document.getElementById('gemini-api-key');
+        const toggleStudentAi = document.getElementById('toggle-student-ai');
+        const aiSettingsModal = document.getElementById('ai-settings-modal');
+
+        const key = geminiKeyInput ? geminiKeyInput.value.trim() : '';
+        const studentEnabled = toggleStudentAi ? toggleStudentAi.checked : false;
+
+        if (key) {
+            localStorage.setItem('vibecoding_gemini_key', key);
+        } else {
+            localStorage.removeItem('vibecoding_gemini_key');
+        }
+
+        localStorage.setItem('vibecoding_student_ai_enabled', studentEnabled);
+
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        if (roomCode) {
+            try {
+                const { getFirestore, doc, updateDoc } = await import("https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js");
+                const db = getFirestore();
+                await updateDoc(doc(db, "classrooms", roomCode), { ai_active: studentEnabled });
+            } catch (e) {
+                console.error("Failed to sync AI setting to room:", e);
+            }
+        }
+
+        if (key) {
+            try {
+                const { initGemini } = await import("../services/gemini.js");
+                await initGemini(key);
+                alert("AI 設定已儲存並啟動！");
+            } catch (e) {
+                console.error(e);
+                alert("AI 啟動失敗: " + e.message);
+            }
+        } else {
+            alert("AI 設定已儲存 (停用)");
+        }
+
+        if (aiSettingsModal) aiSettingsModal.classList.add('hidden');
+    };
+
     // Login Logic
     const authErrorMsg = document.getElementById('auth-error');
     const authModal = document.getElementById('auth-modal');