Spaces:
Running
Running
| const restrictClass = (window.TELEARN_INDEX && window.TELEARN_INDEX.restrictClass) || ""; | |
| const restrictStudent = (window.TELEARN_INDEX && window.TELEARN_INDEX.restrictStudent) || ""; | |
| let projectData = {}; | |
| let classIds = {}; | |
| let studentIds = {}; | |
| let activeClass = ""; | |
| let activeStudent = ""; | |
| // Resize layout columns dynamically according to restrictions | |
| function applyLayoutRestrictions() { | |
| const container = document.querySelector('.container'); | |
| const panelClasses = document.getElementById('panel-classes'); | |
| const panelStudents = document.getElementById('panel-students'); | |
| if (restrictClass && restrictStudent) { | |
| panelClasses.style.display = 'none'; | |
| panelStudents.style.display = 'none'; | |
| container.style.gridTemplateColumns = '1fr'; | |
| document.querySelector('#panel-projects .panel-header h2').innerText = `${restrictStudent} 的專題列表`; | |
| } else if (restrictClass) { | |
| panelClasses.style.display = 'none'; | |
| container.style.gridTemplateColumns = '1.2fr 1.8fr'; | |
| document.querySelector('#panel-students .panel-header h2').innerText = `${restrictClass} 學生名單`; | |
| } | |
| } | |
| // Fetch data from backend | |
| async function fetchProjects() { | |
| applyLayoutRestrictions(); | |
| try { | |
| let url = '/api/projects'; | |
| const params = []; | |
| if (restrictClass) params.push(`class_name=${encodeURIComponent(restrictClass)}`); | |
| if (restrictStudent) params.push(`student_name=${encodeURIComponent(restrictStudent)}`); | |
| if (params.length > 0) url += '?' + params.join('&'); | |
| const response = await fetch(url); | |
| const res = await response.json(); | |
| projectData = res.projects; | |
| classIds = res.class_ids; | |
| studentIds = res.student_ids; | |
| if (restrictClass && restrictStudent) { | |
| activeClass = restrictClass; | |
| activeStudent = restrictStudent; | |
| renderProjects(); | |
| } else if (restrictClass) { | |
| activeClass = restrictClass; | |
| renderStudents(); | |
| } else { | |
| renderClasses(); | |
| } | |
| // Initialize link generator if elements are present on the page (not in restricted view) | |
| if (document.getElementById("link-generator")) { | |
| initLinkGenerator(); | |
| } | |
| } catch (error) { | |
| console.error("Error fetching projects:", error); | |
| const targetId = (restrictClass && restrictStudent) ? 'project-list' : | |
| (restrictClass ? 'student-list' : 'class-list'); | |
| document.getElementById(targetId).innerHTML = ` | |
| <div class="empty-placeholder" style="color: var(--accent);"> | |
| <p>載入專案清單失敗。請確認伺服器運作正常。</p> | |
| </div>`; | |
| } | |
| } | |
| // Initialize Share Link Generator | |
| function initLinkGenerator() { | |
| const classSelect = document.getElementById("gen-class-select"); | |
| if (!classSelect) return; | |
| classSelect.innerHTML = '<option value="">-- 請選擇班級 --</option>'; | |
| const classes = Object.keys(projectData); | |
| classes.forEach(cls => { | |
| const opt = document.createElement("option"); | |
| opt.value = cls; | |
| opt.textContent = cls; | |
| classSelect.appendChild(opt); | |
| }); | |
| classSelect.onchange = handleGeneratorClassChange; | |
| } | |
| function handleGeneratorClassChange() { | |
| const classSelect = document.getElementById("gen-class-select"); | |
| const studentSelect = document.getElementById("gen-student-select"); | |
| const urlResult = document.getElementById("gen-url-result"); | |
| const selectedClass = classSelect.value; | |
| studentSelect.innerHTML = '<option value="">-- 請選擇學生 (選填) --</option>'; | |
| urlResult.value = ""; | |
| if (!selectedClass) { | |
| studentSelect.disabled = true; | |
| return; | |
| } | |
| studentSelect.disabled = false; | |
| const students = Object.keys(projectData[selectedClass] || {}); | |
| students.forEach(std => { | |
| const opt = document.createElement("option"); | |
| opt.value = std; | |
| opt.textContent = std; | |
| studentSelect.appendChild(opt); | |
| }); | |
| studentSelect.onchange = generateShareUrl; | |
| generateShareUrl(); | |
| } | |
| function generateShareUrl() { | |
| const classSelect = document.getElementById("gen-class-select"); | |
| const studentSelect = document.getElementById("gen-student-select"); | |
| const urlResult = document.getElementById("gen-url-result"); | |
| const selectedClass = classSelect.value; | |
| const selectedStudent = studentSelect.value; | |
| if (!selectedClass) { | |
| urlResult.value = ""; | |
| return; | |
| } | |
| const classId = classIds[selectedClass]; | |
| const baseUrl = window.location.origin; | |
| if (selectedStudent) { | |
| const studentKey = `${selectedClass}/${selectedStudent}`; | |
| const studentId = studentIds[studentKey]; | |
| urlResult.value = `${baseUrl}/student/${studentId}`; | |
| } else { | |
| urlResult.value = `${baseUrl}/class/${classId}`; | |
| } | |
| } | |
| function copyGeneratedUrl() { | |
| const urlResult = document.getElementById("gen-url-result"); | |
| const btnCopy = document.getElementById("btn-copy-url"); | |
| if (!urlResult.value) return; | |
| urlResult.select(); | |
| urlResult.setSelectionRange(0, 99999); | |
| navigator.clipboard.writeText(urlResult.value).then(() => { | |
| const oldText = btnCopy.textContent; | |
| btnCopy.textContent = "已複製！"; | |
| btnCopy.style.background = "#10b981"; | |
| setTimeout(() => { | |
| btnCopy.textContent = oldText; | |
| btnCopy.style.background = ""; | |
| }, 2000); | |
| }).catch(err => { | |
| console.error("Failed to copy:", err); | |
| }); | |
| } | |
| // Render Class Cards | |
| function renderClasses() { | |
| const classList = document.getElementById('class-list'); | |
| classList.innerHTML = ""; | |
| const classes = Object.keys(projectData); | |
| if (classes.length === 0) { | |
| classList.innerHTML = ` | |
| <div class="empty-placeholder"> | |
| <p>目錄下尚無任何學生專案。</p> | |
| <p style="font-size: 0.8rem; color: var(--text-muted);">請將學生專案資料夾置於 projects/ 下</p> | |
| </div>`; | |
| return; | |
| } | |
| classes.forEach(cls => { | |
| const card = document.createElement('div'); | |
| card.className = `item-card ${activeClass === cls ? 'active' : ''}`; | |
| const label = document.createElement('span'); | |
| label.textContent = cls; | |
| card.append(label); | |
| card.insertAdjacentHTML('beforeend', '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 18l6-6-6-6"/></svg>'); | |
| card.onclick = () => selectClass(cls); | |
| classList.appendChild(card); | |
| }); | |
| } | |
| function selectClass(className) { | |
| activeClass = className; | |
| activeStudent = ""; | |
| renderClasses(); | |
| renderStudents(); | |
| document.getElementById('project-list').innerHTML = ` | |
| <div class="empty-placeholder"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5"><path d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653Z" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| <p>請先點選學生以瀏覽其專案</p> | |
| </div>`; | |
| } | |
| // Render Student Cards | |
| function renderStudents() { | |
| const studentList = document.getElementById('student-list'); | |
| studentList.innerHTML = ""; | |
| const students = Object.keys(projectData[activeClass] || {}); | |
| if (students.length === 0) { | |
| studentList.innerHTML = ` | |
| <div class="empty-placeholder"> | |
| <p>無學生資料</p> | |
| </div>`; | |
| return; | |
| } | |
| students.forEach(std => { | |
| const card = document.createElement('div'); | |
| card.className = `item-card ${activeStudent === std ? 'active' : ''}`; | |
| const label = document.createElement('span'); | |
| label.textContent = std; | |
| card.append(label); | |
| card.insertAdjacentHTML('beforeend', '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 18l6-6-6-6"/></svg>'); | |
| card.onclick = () => selectStudent(std); | |
| studentList.appendChild(card); | |
| }); | |
| } | |
| function selectStudent(studentName) { | |
| activeStudent = studentName; | |
| renderStudents(); | |
| renderProjects(); | |
| } | |
| // Render Project Cards with hover-classes matching category colors | |
| function renderProjects() { | |
| const projectList = document.getElementById('project-list'); | |
| projectList.innerHTML = ""; | |
| const projects = (projectData[activeClass] && projectData[activeClass][activeStudent]) || []; | |
| if (projects.length === 0) { | |
| projectList.innerHTML = ` | |
| <div class="empty-placeholder"> | |
| <p>該名學生尚無可執行的專案項目。</p> | |
| </div>`; | |
| return; | |
| } | |
| projects.forEach(proj => { | |
| let tagText = "HTML5 Game"; | |
| let tagClass = "tag-html"; | |
| let hoverClass = "hover-html"; | |
| let btnClass = "btn-launch-html"; | |
| if (proj.type === "python") { | |
| tagText = "Python (Pygame/CV)"; | |
| tagClass = "tag-python"; | |
| hoverClass = "hover-python"; | |
| btnClass = "btn-launch-python"; | |
| } else if (proj.type === "external") { | |
| const url = proj.url.toLowerCase(); | |
| if (url.includes("scratch")) { | |
| tagText = "Scratch Project"; | |
| tagClass = "tag-scratch"; | |
| hoverClass = "hover-scratch"; | |
| btnClass = "btn-launch-scratch"; | |
| } else if (url.includes("makecode")) { | |
| tagText = "MakeCode Arcade"; | |
| tagClass = "tag-makecode"; | |
| hoverClass = "hover-makecode"; | |
| btnClass = "btn-launch-makecode"; | |
| } else { | |
| tagText = "External App"; | |
| tagClass = "tag-html"; | |
| hoverClass = "hover-html"; | |
| btnClass = "btn-launch-html"; | |
| } | |
| } else if (proj.type === "html") { | |
| tagText = "HTML5 Offline"; | |
| tagClass = "tag-html"; | |
| hoverClass = "hover-html"; | |
| btnClass = "btn-launch-html"; | |
| } else if (proj.type === "apk") { | |
| tagText = "Android App (APK)"; | |
| tagClass = "tag-apk"; | |
| hoverClass = "hover-apk"; | |
| btnClass = "btn-launch-apk"; | |
| } | |
| const card = document.createElement('div'); | |
| card.className = `project-card ${hoverClass}`; | |
| const meta = document.createElement('div'); | |
| meta.className = 'project-meta'; | |
| const title = document.createElement('span'); | |
| title.className = 'project-title'; | |
| title.textContent = proj.display_name || proj.name; | |
| const tag = document.createElement('span'); | |
| tag.className = `project-tag ${tagClass}`; | |
| tag.textContent = tagText; | |
| meta.append(title, tag); | |
| const launch = document.createElement('button'); | |
| launch.type = 'button'; | |
| launch.className = `btn-launch ${btnClass}`; | |
| launch.insertAdjacentHTML('afterbegin', '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><path d="M5 3l14 9-14 9V3z"/></svg>'); | |
| launch.append(document.createTextNode('啟動專題專區')); | |
| launch.addEventListener('click', () => launchProject(proj.name)); | |
| card.append(meta, launch); | |
| projectList.appendChild(card); | |
| }); | |
| } | |
| function launchProject(projectName) { | |
| const studentKey = `${activeClass}/${activeStudent}`; | |
| const studentId = studentIds[studentKey] || activeStudent; | |
| const url = `/run/${encodeURIComponent(studentId)}/${encodeURIComponent(projectName)}`; | |
| window.open(url, '_blank'); | |
| } | |
| document.getElementById("btn-copy-url")?.addEventListener("click", copyGeneratedUrl); | |
| window.addEventListener("load", fetchProjects, { once: true }); | |