diff --git a/WebApp/client/public/onebyone/connect/connect.html b/WebApp/client/public/onebyone/connect/connect.html index 675af68..dd33d5d 100644 --- a/WebApp/client/public/onebyone/connect/connect.html +++ b/WebApp/client/public/onebyone/connect/connect.html @@ -36,7 +36,7 @@

-
+
+ + + + + +
diff --git a/WebApp/client/public/onebyone/connect/connect.js b/WebApp/client/public/onebyone/connect/connect.js index 81774d8..7f8ff15 100644 --- a/WebApp/client/public/onebyone/connect/connect.js +++ b/WebApp/client/public/onebyone/connect/connect.js @@ -5,6 +5,7 @@ import store from '../store.js'; + // 通知函数 function showNotification(message, type = 'info') { const notification = document.getElementById('notification'); @@ -75,6 +76,65 @@ function createCall() { window.location.href = '../index.html'; } + +// 获取所有连接ID +async function getAllConnectionIds() { + showNotification('正在获取连接ID列表...'); + try { + const response = await fetch('/signaling/connection-ids'); + if (!response.ok) { + throw new Error('Failed to fetch connection IDs'); + } + const data = await response.json(); + displayConnectionIds(data.connectionIds); + } catch (error) { + console.error('Error fetching connection IDs:', error); + showNotification('获取连接ID失败', 'error'); + } +} + +// 显示连接ID列表 +function displayConnectionIds(connectionIds) { + const idsContainer = document.getElementById('idsContainer'); + const connectionIdsList = document.getElementById('connectionIdsList'); + + if (idsContainer) { + // 清空容器 + idsContainer.innerHTML = ''; + + if (connectionIds.length === 0) { + idsContainer.innerHTML = '

暂无可用的连接ID

'; + } else { + // 为每个连接ID创建一个元素 + connectionIds.forEach(id => { + const idElement = document.createElement('div'); + idElement.className = 'flex items-center justify-between p-2 bg-white/5 rounded-lg hover:bg-white/10 cursor-pointer transition-colors'; + idElement.innerHTML = ` + ${id} + + `; + idsContainer.appendChild(idElement); + }); + } + + // 显示连接ID列表 + if (connectionIdsList) { + connectionIdsList.classList.remove('hidden'); + } + + showNotification(`找到 ${connectionIds.length} 个连接ID`); + } +} + +// 选择连接ID +function selectConnectionId(id) { + const connectionIdInput = document.getElementById('connectionIdInput'); + if (connectionIdInput) { + connectionIdInput.value = id; + showNotification(`已选择连接ID: ${id}`); + } +} + // 绑定事件监听器 function bindEvents() { // 连接按钮 @@ -89,6 +149,12 @@ function bindEvents() { createCallBtn.addEventListener('click', createCall); } + // 浏览全部ID按钮 + const browseIdsBtn = document.getElementById('browseIdsBtn'); + if (browseIdsBtn) { + browseIdsBtn.addEventListener('click', getAllConnectionIds); + } + // 输入框回车事件 const connectionIdInput = document.getElementById('connectionIdInput'); if (connectionIdInput) { @@ -118,3 +184,5 @@ window.addEventListener('DOMContentLoaded', () => { window.showNotification = showNotification; window.joinCall = joinCall; window.createCall = createCall; +window.selectConnectionId = selectConnectionId; +window.selectConnectionId = selectConnectionId;