diff --git a/all_code.txt b/all_code.txt index 70b8f27..78b44b7 100644 --- a/all_code.txt +++ b/all_code.txt @@ -751,7 +751,8 @@ FILE: index.html
- + +
@@ -800,7 +801,8 @@ FILE: index.html
- + +
@@ -836,7 +838,8 @@ FILE: index.html
- + +
@@ -920,9 +923,8 @@ FILE: index.html
- + + 請先讀取設備狀態...
@@ -2056,6 +2058,19 @@ export async function apiExecuteQuery(queryType, target, host, username, passwor return response.json(); } +// 🌟 新增：動態抓取設備清單 API +export async function apiListCms(host, username, password) { + const url = `/api/v1/list-cms?host=${encodeURIComponent(host)}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`; + const response = await fetch(url); + return response.json(); +} + +export async function apiListRpds(host, username, password) { + const url = `/api/v1/list-rpds?host=${encodeURIComponent(host)}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`; + const response = await fetch(url); + return response.json(); +} + // ========================================== // 6. 專門處理串流的 API 呼叫函數 (UI 可以即時更新) // ========================================== @@ -2123,7 +2138,8 @@ import { apiGetTreeFilters, apiSaveTreeFilters, apiSyncLeafOptionsStream, apiGetCmtsVersion, apiGetScanStatus, apiGetLockStatus, - apiGetCmDiagnostics + apiGetCmDiagnostics, + apiListCms, apiListRpds } from './api.js'; // 3. 共用工具模組 (Utils) @@ -2384,12 +2400,97 @@ function switchTab(tabId, element) { if(tabId === 'cli-tab' && typeof fitAddon !== 'undefined' && fitAddon) setTimeout(() => fitAddon.fit(), 50); } +// 切換「設備查詢」內的子任務表單 +// ============================================================================ +// 🌟 設備查詢動態清單快取 (新增) +// ============================================================================ +let cachedDeviceLists = { cms: null, rpds: null, host: null }; + // 切換「設備查詢」內的子任務表單 function switchQueryTask() { document.querySelectorAll('#query-tab .task-form').forEach(form => form.classList.remove('active')); const selectedTaskId = document.getElementById('queryTask').value; const targetForm = document.getElementById(selectedTaskId); if (targetForm) targetForm.classList.add('active'); + + // 🌟 觸發背景動態載入 Datalist + loadDynamicDatalist(selectedTaskId); +} + +// 🌟 新增：背景載入 Datalist 邏輯 +async function loadDynamicDatalist(taskType) { + // 若尚未連線，則不觸發背景抓取 (不跳警告，默默 return) + if (!isConnected) return; + + const host = document.getElementById('cmtsHost').value.trim(); + const user = document.getElementById('cmtsUser').value.trim(); + const pass = document.getElementById('cmtsPass').value.trim(); + if (!host || !user || !pass) return; + + // 若切換了設備 IP，清空舊快取 + if (cachedDeviceLists.host !== host) { + cachedDeviceLists = { cms: null, rpds: null, host: host }; + } + + if (taskType === 'form-cm-query' || taskType === 'form-cm-diagnostics') { + const inputId = taskType === 'form-cm-query' ? 'queryTargetCm' : 'diagMacInput'; + const listId = taskType === 'form-cm-query' ? 'cm-mac-list' : 'diag-cm-mac-list'; + const defaultPlaceholder = taskType === 'form-cm-query' ? "例: 6467.7240.4076 (留白則查詢全體)" : "例如: 6467.7240.4076"; + + await fetchAndBindList('cms', inputId, listId, defaultPlaceholder, host, user, pass); + } else if (taskType === 'form-rpd-query') { + await fetchAndBindList('rpds', 'queryTargetRpd', 'rpd-vcvs-list', "例: 13:0 (留白則查詢全體)", host, user, pass); + } +} + +// 🌟 新增：執行 API 呼叫與 UX 狀態切換 +async function fetchAndBindList(type, inputId, listId, defaultPlaceholder, host, user, pass) { + const inputEl = document.getElementById(inputId); + const datalistEl = document.getElementById(listId); + if (!inputEl || !datalistEl) return; + + // 如果已經有快取，直接綁定並結束 + if (cachedDeviceLists[type]) { + populateDatalist(datalistEl, cachedDeviceLists[type]); + return; + } + + // 狀態 1：發出請求前 (鎖定輸入框，提示載入中) + inputEl.disabled = true; + inputEl.placeholder = "🔄 載入設備清單中..."; + inputEl.style.backgroundColor = "#fdfefe"; + + try { + let data; + if (type === 'cms') { + data = await apiListCms(host, user, pass); + cachedDeviceLists.cms = data.cms || []; + } else { + data = await apiListRpds(host, user, pass); + cachedDeviceLists.rpds = data.rpds || []; + } + + // 狀態 2：請求成功 (塞入選項，恢復輸入框) + populateDatalist(datalistEl, cachedDeviceLists[type]); + inputEl.placeholder = defaultPlaceholder; + } catch (error) { + console.error(`[Background Task] Failed to load ${type}:`, error); + // 狀態 3：請求失敗 (提示失敗，但仍解鎖讓使用者手動輸入) + inputEl.placeholder = "⚠️ 清單載入失敗，請手動輸入"; + } finally { + inputEl.disabled = false; + inputEl.style.backgroundColor = ""; // 恢復預設背景色 + } +} + +// 🌟 新增：將陣列轉換為