Add cascading Demo project picker

classroom_static/admin.css

@@ -13,7 +13,13 @@
 .admin-sidebar-head { min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--line); }
 .admin-sidebar-head strong,.admin-sidebar-head small { display:block; }
 .admin-sidebar-head small { margin-top:.2rem;color:var(--muted);font-size:.75rem; }
-.admin-search { padding:.75rem;border-bottom:1px solid var(--line); }
+.demo-picker { display:grid;gap:1rem;padding:1rem;border-bottom:1px solid var(--line); }
+.demo-picker label { display:grid;gap:.4rem;color:var(--muted);font-size:.78rem;font-weight:800; }
+.demo-picker select { color:var(--ink);font-weight:650; }
+.demo-picker select:disabled { background:var(--surface-subtle);color:var(--muted); }
+.picker-summary { min-height:0;overflow:auto;padding:1rem;background:var(--surface-subtle); }
+.picker-summary strong { display:block;color:var(--navy);font-size:.9rem; }
+.picker-summary p { margin:.4rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.5; }
 .admin-list { min-height:0;overflow:auto;padding:.5rem; }
 .admin-list-button { width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;padding:.7rem .75rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);text-align:left; }
 .admin-list-button:hover { background:var(--surface-subtle); }

classroom_static/admin.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Telearn 內容管理後台</title>
   <link rel="stylesheet" href="/classroom-assets/classroom.css?v=2026fall-4">
-  <link rel="stylesheet" href="/classroom-assets/admin.css?v=2026fall-4">
+  <link rel="stylesheet" href="/classroom-assets/admin.css?v=2026fall-5">
 </head>
 <body class="admin-body">
   <header class="app-header">
@@ -25,7 +25,7 @@
     </section>
 
     <section class="admin-view" id="demoView">
-      <aside class="admin-sidebar"><div class="admin-sidebar-head"><div><strong>公開 Demo</strong><small>可搜尋、編輯或新增專題</small></div><button class="copy-button" id="newDemoButton">＋新增</button></div><div class="admin-search"><input class="text-field" id="demoSearch" type="search" placeholder="搜尋班級、學生或專題"></div><div class="admin-list" id="demoAdminList"></div></aside>
+      <aside class="admin-sidebar demo-picker-sidebar"><div class="admin-sidebar-head"><div><strong>公開 Demo</strong><small id="demoTotal">依課程、學生、專題逐層選擇</small></div><button class="copy-button" id="newDemoButton">＋新增</button></div><div class="demo-picker"><label><span>1　課程</span><select class="text-field" id="demoClassSelect"><option value="">請選擇課程</option></select></label><label><span>2　學生</span><select class="text-field" id="demoStudentSelect" disabled><option value="">請先選課程</option></select></label><label><span>3　專題</span><select class="text-field" id="demoProjectSelect" disabled><option value="">請先選學生</option></select></label></div><div class="picker-summary" id="demoPickerSummary"><strong>尚未選擇專題</strong><p>選好三個層級後，右側會載入可編輯的程式檔案。</p></div></aside>
       <form class="admin-editor" id="demoForm">
         <header class="admin-editor-head"><div><h1 id="demoHeading">選擇一個 Demo 專題</h1><p>文字程式可直接編輯；圖片、音效等資產會原樣保留。</p></div><div class="admin-actions"><button class="copy-button danger-action" id="deleteDemoButton" type="button" disabled>刪除</button><button class="btn" id="saveDemoButton" type="submit" disabled>儲存專題</button></div></header>
         <div class="admin-fields three"><label>班級<input class="text-field" id="demoClass" required disabled></label><label>學生<input class="text-field" id="demoStudent" required disabled></label><label>專題名稱<input class="text-field" id="demoProject" required disabled></label></div>
@@ -36,6 +36,6 @@
 
   <dialog id="adminLoginDialog"><form class="dialog-content form-stack" id="adminLoginForm"><div><h1>登入內容管理後台</h1><p>使用與教師控制台相同的密碼。</p></div><label><span class="field-label">教師密碼</span><input class="text-field" id="adminPassword" type="password" required autofocus></label><p class="form-error" id="adminLoginError"></p><button class="btn" type="submit">登入</button></form></dialog>
   <div class="toast" id="toast"></div>
-  <script src="/classroom-assets/admin.js?v=2026fall-4"></script>
+  <script src="/classroom-assets/admin.js?v=2026fall-5"></script>
 </body>
 </html>

classroom_static/admin.js

@@ -3,8 +3,9 @@ const E = {};
 [
   "adminStatus", "loginButton", "weekAdminList", "weekForm", "weekHeading",
   "weekTitle", "weekProject", "weekOutput", "saveWeekButton", "newWeekFile",
-  "weekFiles", "weekFileLabel", "weekFileContent", "demoSearch", "newDemoButton",
-  "demoAdminList", "demoForm", "demoHeading", "demoClass", "demoStudent",
+  "weekFiles", "weekFileLabel", "weekFileContent", "demoTotal", "newDemoButton",
+  "demoClassSelect", "demoStudentSelect", "demoProjectSelect", "demoPickerSummary",
+  "demoForm", "demoHeading", "demoClass", "demoStudent",
   "demoProject", "newDemoFile", "demoFiles", "demoFileLabel", "demoFileContent",
   "demoAssets", "saveDemoButton", "deleteDemoButton", "adminLoginDialog",
   "adminLoginForm", "adminPassword", "adminLoginError", "toast"
@@ -57,7 +58,7 @@ async function login() {
   state = await request("/api/admin/state");
   E.adminStatus.textContent = `已登入 · ${state.course.title || "課程管理"}`;
   renderWeeks();
-  renderDemoList();
+  renderDemoPicker();
   if (state.course.weeks.length) await selectWeek(state.course.weeks[0].id);
 }
 
@@ -162,19 +163,56 @@ E.weekForm.onsubmit = async event => {
 };
 
 function demoKey(item) { return `${item.class_name}\n${item.student_name}\n${item.project_name}`; }
-function renderDemoList() {
-  const query = E.demoSearch.value.trim().toLowerCase();
-  const visible = state.demo_projects.filter(item => `${item.class_name} ${item.student_name} ${item.project_name}`.toLowerCase().includes(query));
-  E.demoAdminList.innerHTML = visible.map(item => `
-    <button class="admin-list-button ${originalDemo && demoKey(item) === demoKey(originalDemo) ? "active" : ""}" data-key="${esc(demoKey(item))}">
-      <div><strong>${esc(item.project_name)}</strong><small>${esc(item.class_name)} · ${esc(item.student_name)}</small></div><span>${esc(item.type)}</span>
-    </button>`).join("") || '<div class="admin-empty">找不到符合的 Demo 專題。</div>';
-  E.demoAdminList.querySelectorAll("[data-key]").forEach(button => button.onclick = () => {
-    const item = state.demo_projects.find(project => demoKey(project) === button.dataset.key);
-    if (item) selectDemo(item);
-  });
+const sortedUnique = values => [...new Set(values)].sort((a, b) => a.localeCompare(b, "zh-Hant"));
+
+function optionList(values, placeholder) {
+  return `<option value="">${placeholder}</option>` + values.map(value => `<option value="${esc(value)}">${esc(value)}</option>`).join("");
+}
+
+function renderDemoPicker(selection = null) {
+  const classes = sortedUnique(state.demo_projects.map(item => item.class_name));
+  E.demoTotal.textContent = `${classes.length} 門課程 · ${state.demo_projects.length} 個專題`;
+  E.demoClassSelect.innerHTML = optionList(classes, "請選擇課程");
+  E.demoClassSelect.value = selection?.class_name || "";
+  renderStudentPicker(selection?.student_name || "", selection?.project_name || "");
+}
+
+function renderStudentPicker(studentName = "", projectName = "") {
+  const className = E.demoClassSelect.value;
+  const students = sortedUnique(state.demo_projects.filter(item => item.class_name === className).map(item => item.student_name));
+  E.demoStudentSelect.innerHTML = optionList(students, className ? "請選擇學生" : "請先選課程");
+  E.demoStudentSelect.disabled = !className;
+  E.demoStudentSelect.value = students.includes(studentName) ? studentName : "";
+  renderProjectPicker(projectName);
+}
+
+function renderProjectPicker(projectName = "") {
+  const className = E.demoClassSelect.value;
+  const studentName = E.demoStudentSelect.value;
+  const projects = state.demo_projects.filter(item => item.class_name === className && item.student_name === studentName);
+  E.demoProjectSelect.innerHTML = optionList(projects.map(item => item.project_name), studentName ? "請選擇專題" : "請先選學生");
+  E.demoProjectSelect.disabled = !studentName;
+  E.demoProjectSelect.value = projects.some(item => item.project_name === projectName) ? projectName : "";
+  if (!E.demoProjectSelect.value) E.demoPickerSummary.innerHTML = `<strong>${studentName ? "請選擇專題" : className ? "請選擇學生" : "尚未選擇專題"}</strong><p>選好三個層級後，右側會載入可編輯的程式檔案。</p>`;
 }
-E.demoSearch.oninput = renderDemoList;
+
+function resetDemoEditor() {
+  originalDemo = null;
+  demoFiles = {};
+  demoAssets = [];
+  demoFile = "";
+  E.demoHeading.textContent = "選擇一個 Demo 專題";
+  [E.demoClass, E.demoStudent, E.demoProject].forEach(input => input.value = "");
+  enableDemoForm(false);
+  renderDemoFiles();
+}
+
+E.demoClassSelect.onchange = () => { resetDemoEditor(); renderStudentPicker(); };
+E.demoStudentSelect.onchange = () => { resetDemoEditor(); renderProjectPicker(); };
+E.demoProjectSelect.onchange = () => {
+  const item = state.demo_projects.find(project => project.class_name === E.demoClassSelect.value && project.student_name === E.demoStudentSelect.value && project.project_name === E.demoProjectSelect.value);
+  if (item) selectDemo(item);
+};
 
 function enableDemoForm(enabled) {
   [E.demoClass, E.demoStudent, E.demoProject, E.newDemoFile, E.saveDemoButton].forEach(element => element.disabled = !enabled);
@@ -184,7 +222,6 @@ function enableDemoForm(enabled) {
 async function selectDemo(item) {
   saveDemoFileBuffer();
   originalDemo = { class_name: item.class_name, student_name: item.student_name, project_name: item.project_name };
-  renderDemoList();
   const data = await request("/api/admin/demo/project", { project: originalDemo });
   E.demoClass.value = item.class_name;
   E.demoStudent.value = item.student_name;
@@ -193,6 +230,7 @@ async function selectDemo(item) {
   demoFiles = data.files || {};
   demoAssets = data.assets || [];
   demoFile = Object.keys(demoFiles)[0] || "";
+  E.demoPickerSummary.innerHTML = `<strong>${esc(item.project_name)}</strong><p>${esc(item.class_name)} → ${esc(item.student_name)} → ${esc(item.type)}</p>`;
   enableDemoForm(true);
   renderDemoFiles();
 }
@@ -220,16 +258,18 @@ function renderDemoFiles() {
 }
 
 E.newDemoButton.onclick = () => {
+  const pickedClass = E.demoClassSelect.value;
+  const pickedStudent = E.demoStudentSelect.value;
   originalDemo = null;
   demoFiles = { "main.py": '# 新 Demo 專題\nprint("Hello, Telearn!")\n' };
   demoAssets = [];
   demoFile = "main.py";
-  E.demoClass.value = "2026Fall進階專題";
-  E.demoStudent.value = "";
+  E.demoClass.value = pickedClass || "2026Fall進階專題";
+  E.demoStudent.value = pickedStudent || "";
   E.demoProject.value = "";
   E.demoHeading.textContent = "建立新 Demo 專題";
   enableDemoForm(true);
-  renderDemoList();
+  E.demoPickerSummary.innerHTML = `<strong>建立新專題</strong><p>會建立在右側填寫的課程與學生之下。</p>`;
   renderDemoFiles();
   E.demoStudent.focus();
 };
@@ -259,7 +299,8 @@ E.demoForm.onsubmit = async event => {
     originalDemo = data.project;
     state.demo_projects.push({ ...data.project, type: "main.py" in demoFiles ? "python" : "index.html" in demoFiles ? "html" : "external" });
     E.demoHeading.textContent = data.project.project_name;
-    renderDemoList();
+    renderDemoPicker(originalDemo);
+    E.demoPickerSummary.innerHTML = `<strong>${esc(data.project.project_name)}</strong><p>${esc(data.project.class_name)} → ${esc(data.project.student_name)}</p>`;
     enableDemoForm(true);
     toast("Demo 專題已儲存，Space 正在重新建置");
   } catch (error) { toast(error.message); }
@@ -279,7 +320,7 @@ E.deleteDemoButton.onclick = async () => {
     E.demoHeading.textContent = "選擇一個 Demo 專題";
     [E.demoClass, E.demoStudent, E.demoProject].forEach(input => input.value = "");
     enableDemoForm(false);
-    renderDemoList();
+    renderDemoPicker();
     renderDemoFiles();
     toast("Demo 專題已刪除，Space 正在重新建置");
   } catch (error) { toast(error.message); enableDemoForm(true); }