@switchbot/homebridge-switchbot 5.0.0-beta.111 → 5.0.0-beta.113

package/dist/homebridge-ui/public/js/render.js

@@ -151,8 +151,215 @@ function scrollToConfiguredDevice(deviceId) {
         target.style.background = originalBackground;
     }, 1800);
 }
+function createConnectionTestControls(device) {
+    const controls = document.createElement('div');
+    controls.style.display = 'inline-flex';
+    controls.style.alignItems = 'center';
+    controls.style.gap = '6px';
+    const button = document.createElement('button');
+    button.textContent = 'Test Connection';
+    button.className = 'secondary';
+    button.style.padding = '4px 9px';
+    button.style.fontSize = '11px';
+    const status = document.createElement('span');
+    status.style.fontSize = '10px';
+    status.style.opacity = '0.85';
+    status.style.whiteSpace = 'normal';
+    status.style.overflowWrap = 'anywhere';
+    button.onclick = async () => {
+        const startedAt = Date.now();
+        button.disabled = true;
+        button.textContent = 'Testing...';
+        status.textContent = 'Checking...';
+        status.style.color = '#6b7280';
+        try {
+            const { testDeviceConnection } = await import('./api.js');
+            const result = await testDeviceConnection({
+                deviceId: String(device?.id || device?.deviceId || ''),
+                connectionType: device?.connectionType,
+                address: device?.address,
+            });
+            const measuredLatency = Number(result?.latencyMs) > 0
+                ? Number(result.latencyMs)
+                : Date.now() - startedAt;
+            if (result?.success) {
+                const method = result?.method || 'Auto';
+                status.textContent = `✓ ${method} · ${measuredLatency}ms`;
+                status.style.color = '#16a34a';
+            }
+            else {
+                const detail = result?.message ? ` · ${result.message}` : '';
+                status.textContent = `✗ Failed · ${measuredLatency}ms${detail}`;
+                status.style.color = '#dc2626';
+            }
+        }
+        catch (e) {
+            status.textContent = `✗ Failed · ${Date.now() - startedAt}ms`;
+            status.style.color = '#dc2626';
+        }
+        finally {
+            button.disabled = false;
+            button.textContent = 'Test Connection';
+        }
+    };
+    controls.appendChild(button);
+    controls.appendChild(status);
+    return controls;
+}
+function formatLastSeen(value) {
+    if (!value) {
+        return 'N/A';
+    }
+    try {
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+    }
+    catch (_e) {
+        return String(value);
+    }
+}
+export function renderDeviceDetailsPanel(device) {
+    const details = document.createElement('div');
+    details.style.cssText = `
+    border-top: 1px solid #ddd;
+    padding: 8px;
+    background: #f9fafb;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-top: 4px;
+  `;
+    // --- Battery history trending ---
+    // Persist battery readings in localStorage per device
+    const batteryHistoryKey = `batteryHistory:${device?.id || device?.deviceId}`;
+    let batteryHistory = [];
+    try {
+        const raw = localStorage.getItem(batteryHistoryKey);
+        if (raw)
+            batteryHistory = JSON.parse(raw);
+    }
+    catch { }
+    const now = Date.now();
+    if (typeof device?.battery === 'number') {
+        // Only add if different from last or >1h since last
+        const last = batteryHistory[batteryHistory.length - 1];
+        if (!last || last.value !== device.battery || now - last.ts > 60 * 60 * 1000) {
+            batteryHistory.push({ value: device.battery, ts: now });
+            // Keep only last 30 entries (about a month if daily)
+            if (batteryHistory.length > 30)
+                batteryHistory = batteryHistory.slice(-30);
+            try {
+                localStorage.setItem(batteryHistoryKey, JSON.stringify(batteryHistory));
+            }
+            catch { }
+        }
+    }
+    const rows = [
+        { label: 'Device ID', value: String(device?.id || device?.deviceId || 'N/A'), copyable: !!(device?.id || device?.deviceId) },
+        { label: 'MAC Address', value: String(device?.address || 'N/A'), copyable: !!device?.address },
+        { label: 'Device Type', value: String(device?.type || device?.configDeviceType || 'N/A') },
+        { label: 'Model', value: String(device?.model || 'N/A') },
+        { label: 'Hub ID', value: String(device?.hubDeviceId || 'N/A') },
+        { label: 'Battery', value: device?.battery !== undefined && device?.battery !== null ? `${device.battery}%` : 'N/A' },
+        { label: 'Firmware', value: String(device?.version || device?.firmware || 'N/A') },
+        { label: 'Cloud Service', value: device?.enabled === false ? 'Disabled' : 'Enabled' },
+        { label: 'Last Seen', value: formatLastSeen(device?.lastSeen || device?.lastseen || device?.updatedAt) },
+    ];
+    for (const row of rows) {
+        const line = document.createElement('div');
+        line.style.display = 'flex';
+        line.style.alignItems = 'center';
+        line.style.justifyContent = 'space-between';
+        line.style.gap = '8px';
+        line.style.padding = '2px 0';
+        const label = document.createElement('span');
+        label.style.fontWeight = '600';
+        label.style.minWidth = '110px';
+        label.textContent = `${row.label}:`;
+        const valueWrap = document.createElement('span');
+        valueWrap.style.display = 'inline-flex';
+        valueWrap.style.alignItems = 'center';
+        valueWrap.style.gap = '6px';
+        valueWrap.style.flex = '1';
+        valueWrap.style.justifyContent = 'flex-end';
+        valueWrap.style.minWidth = '0';
+        const value = document.createElement('span');
+        value.style.fontFamily = 'monospace';
+        value.style.fontSize = '11px';
+        value.style.opacity = '0.9';
+        value.style.whiteSpace = 'normal';
+        value.style.overflowWrap = 'anywhere';
+        value.style.wordBreak = 'break-word';
+        value.style.textAlign = 'right';
+        value.textContent = row.value;
+        valueWrap.appendChild(value);
+        if (row.copyable && row.value && row.value !== 'N/A') {
+            const copyBtn = document.createElement('button');
+            copyBtn.textContent = '📋';
+            copyBtn.title = `Copy ${row.label}`;
+            copyBtn.style.padding = '2px 6px';
+            copyBtn.style.fontSize = '10px';
+            copyBtn.style.lineHeight = '1';
+            copyBtn.style.background = '#e5e7eb';
+            copyBtn.style.color = '#111827';
+            copyBtn.onclick = async () => {
+                try {
+                    await navigator.clipboard.writeText(row.value);
+                    copyBtn.textContent = '✓';
+                    setTimeout(() => {
+                        copyBtn.textContent = '📋';
+                    }, 1200);
+                }
+                catch (_e) {
+                    copyBtn.textContent = '!';
+                    setTimeout(() => {
+                        copyBtn.textContent = '📋';
+                    }, 1200);
+                }
+            };
+            valueWrap.appendChild(copyBtn);
+        }
+        line.appendChild(label);
+        line.appendChild(valueWrap);
+        details.appendChild(line);
+    }
+    // --- Expose advanced/extra features dynamically ---
+    const featureKeys = [
+        'airQuality', 'pm25', 'pm10', 'voc', 'co2', 'humidity', 'temperature',
+        'preset', 'mode', 'presetMode', 'direction', 'calibration', 'multiCommand',
+        'extendedInfo', 'segmentedControl', 'features', 'capabilities', 'state',
+    ];
+    const shown = new Set(rows.map(r => r.label.toLowerCase().replace(/\s/g, '')));
+    for (const key of featureKeys) {
+        if (device && device[key] !== undefined && !shown.has(key.toLowerCase())) {
+            const line = document.createElement('div');
+            line.style.display = 'flex';
+            line.style.alignItems = 'center';
+            line.style.justifyContent = 'space-between';
+            line.style.gap = '8px';
+            line.style.padding = '2px 0';
+            const label = document.createElement('span');
+            label.style.fontWeight = '600';
+            label.style.minWidth = '110px';
+            label.textContent = key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()) + ':';
+            const value = document.createElement('span');
+            value.style.fontFamily = 'monospace';
+            value.style.fontSize = '11px';
+            value.style.opacity = '0.9';
+            value.style.whiteSpace = 'normal';
+            value.style.overflowWrap = 'anywhere';
+            value.style.wordBreak = 'break-word';
+            value.style.textAlign = 'right';
+            value.textContent = typeof device[key] === 'object' ? JSON.stringify(device[key]) : String(device[key]);
+            line.appendChild(label);
+            line.appendChild(value);
+            details.appendChild(line);
+        }
+    }
+    return details;
+}
 export async function renderDiscoveredDevices(devices, options = {}) {
     const ul = document.createElement('ul');
+    ul.className = 'device-grid';
     ul.style.maxHeight = '400px';
     ul.style.overflowY = 'auto';
     ul.style.marginTop = '12px';
@@ -161,36 +368,104 @@ export async function renderDiscoveredDevices(devices, options = {}) {
     const { addDeviceToConfig } = await import('./discovery.js');
     const { loadConfiguredDevices } = await import('./devices.js');
     const configuredIds = options.configuredIds ?? new Set();
+    const selectedIds = options.selectedIds ?? new Set();
+    const onToggleSelect = options.onToggleSelect;
     for (const d of devices) {
         const deviceId = normalizeId(d.id);
         const alreadyAdded = configuredIds.has(deviceId);
         const li = document.createElement('li');
         li.className = 'device-item';
         li.style.display = 'flex';
-        li.style.alignItems = 'center';
-        li.style.justifyContent = 'space-between';
-        li.style.padding = '10px 12px';
-        li.style.marginBottom = '6px';
-        li.style.borderRadius = '6px';
+        li.style.flexDirection = 'column';
+        li.style.alignItems = 'stretch';
+        li.style.justifyContent = 'flex-start';
+        li.style.padding = '5px 8px';
+        li.style.marginBottom = '0';
+        li.style.borderRadius = '5px';
         li.style.transition = 'all 0.2s ease';
         const info = document.createElement('div');
-        info.style.flex = '1';
+        info.style.flex = '1 1 auto';
+        info.style.width = '100%';
+        info.style.minWidth = '0';
         const nameContainer = document.createElement('div');
         nameContainer.style.display = 'flex';
         nameContainer.style.alignItems = 'center';
-        nameContainer.style.marginBottom = '4px';
+        nameContainer.style.marginBottom = '0';
         nameContainer.style.flexWrap = 'wrap';
-        nameContainer.style.gap = '6px';
+        nameContainer.style.gap = '4px';
         const name = document.createElement('div');
         name.style.fontWeight = '500';
-        name.style.fontSize = '14px';
+        name.style.fontSize = '13px';
         name.textContent = d.name || d.id;
+        const selectCheckbox = document.createElement('input');
+        selectCheckbox.type = 'checkbox';
+        selectCheckbox.style.width = 'auto';
+        selectCheckbox.style.margin = '0 2px 0 0';
+        selectCheckbox.checked = selectedIds.has(deviceId);
+        if (alreadyAdded) {
+            selectCheckbox.disabled = true;
+            selectCheckbox.title = 'Already configured';
+        }
+        selectCheckbox.onchange = () => {
+            onToggleSelect?.(d, selectCheckbox.checked);
+            // Notify listeners (e.g., batch buttons) of selection change
+            window.dispatchEvent(new CustomEvent('discovery-selection-changed'));
+        };
+        nameContainer.appendChild(selectCheckbox);
         nameContainer.appendChild(name);
+        // Show firmware update available indicator if present
+        if (d.firmwareUpdateAvailable) {
+            const fwBadge = document.createElement('span');
+            fwBadge.textContent = 'Update Available';
+            fwBadge.style.cssText = 'background: #fb923c; color: #111; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;';
+            fwBadge.title = 'A firmware update is available for this device.';
+            nameContainer.appendChild(fwBadge);
+        }
+        // Show offline/unreachable indicator if device is offline
+        let offline = false;
+        let lastSeen = d.lastSeen || d.lastseen || d.updatedAt;
+        if (typeof d.offline === 'boolean') {
+            offline = d.offline;
+        }
+        else if (lastSeen) {
+            try {
+                const last = new Date(lastSeen).getTime();
+                if (!isNaN(last) && Date.now() - last > 1000 * 60 * 60) { // 1 hour
+                    offline = true;
+                }
+            }
+            catch { }
+        }
+        if (offline) {
+            const offlineBadge = document.createElement('span');
+            offlineBadge.textContent = 'Offline';
+            offlineBadge.style.cssText = 'background: #dc2626; color: white; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;';
+            offlineBadge.title = 'Device is offline or unreachable.';
+            nameContainer.appendChild(offlineBadge);
+        }
+        const expandedDetails = document.createElement('div');
+        expandedDetails.style.display = 'none';
+        expandedDetails.appendChild(renderDeviceDetailsPanel(d));
+        const expandBtn = document.createElement('button');
+        expandBtn.textContent = '▾';
+        expandBtn.title = 'Show details';
+        expandBtn.style.padding = '2px 6px';
+        expandBtn.style.fontSize = '11px';
+        expandBtn.style.marginLeft = '4px';
+        expandBtn.style.background = '#e5e7eb';
+        expandBtn.style.color = '#111827';
+        expandBtn.style.transition = 'transform 0.2s ease';
+        expandBtn.onclick = () => {
+            const isHidden = expandedDetails.style.display === 'none';
+            expandedDetails.style.display = isHidden ? 'block' : 'none';
+            expandBtn.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
+        };
+        nameContainer.appendChild(expandBtn);
         const duplicateBadge = document.createElement('span');
         duplicateBadge.textContent = alreadyAdded ? '✓ Already Added' : '➕ New Device';
         duplicateBadge.style.cssText = alreadyAdded
-            ? 'background: #16a34a; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;'
-            : 'background: #2563eb; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;';
+            ? 'background: #16a34a; color: white; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;'
+            : 'background: #2563eb; color: white; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;';
         nameContainer.appendChild(duplicateBadge);
         // Add connection type badge
         if (d.connectionType) {
@@ -208,11 +483,25 @@ export async function renderDiscoveredDevices(devices, options = {}) {
             nameContainer.appendChild(renderSignalBars(d.rssi));
             nameContainer.appendChild(renderSignalQualityBadge(d.rssi));
         }
+        // Add battery warning indicator if battery < 20%
+        if (typeof d.battery === 'number' && d.battery < 20) {
+            const batteryWarn = document.createElement('span');
+            batteryWarn.textContent = `⚠️ ${d.battery}%`;
+            batteryWarn.style.cssText =
+                d.battery < 10
+                    ? 'background: #dc2626; color: white; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;'
+                    : 'background: #fbbf24; color: #111; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;';
+            batteryWarn.title = d.battery < 10 ? 'Battery critically low' : 'Battery low';
+            nameContainer.appendChild(batteryWarn);
+        }
         const details = document.createElement('div');
-        details.style.fontSize = '11px';
+        details.style.fontSize = '10px';
         details.style.opacity = '0.7';
-        details.style.marginTop = '4px';
+        details.style.marginTop = '0';
         details.style.fontFamily = 'monospace';
+        details.style.whiteSpace = 'normal';
+        details.style.overflowWrap = 'anywhere';
+        details.style.wordBreak = 'break-word';
         let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || 'N/A'}`;
         if (d.hubDeviceId) {
             detailsText += ` | Hub: ${d.hubDeviceId}`;
@@ -223,11 +512,13 @@ export async function renderDiscoveredDevices(devices, options = {}) {
         details.textContent = detailsText;
         info.appendChild(nameContainer);
         info.appendChild(details);
+        info.appendChild(expandedDetails);
         const addBtn = document.createElement('button');
         addBtn.textContent = alreadyAdded ? 'Already Added' : 'Add to Config';
-        addBtn.style.marginLeft = '8px';
-        addBtn.style.padding = '6px 14px';
-        addBtn.style.fontSize = '12px';
+        addBtn.style.marginLeft = '0';
+        addBtn.style.marginTop = '2px';
+        addBtn.style.padding = '4px 9px';
+        addBtn.style.fontSize = '11px';
         addBtn.style.whiteSpace = 'nowrap';
         addBtn.style.flexShrink = '0';
         addBtn.disabled = alreadyAdded;
@@ -246,25 +537,44 @@ export async function renderDiscoveredDevices(devices, options = {}) {
             const viewBtn = document.createElement('button');
             viewBtn.textContent = 'View in Config';
             viewBtn.className = 'secondary';
-            viewBtn.style.marginLeft = '8px';
-            viewBtn.style.padding = '6px 12px';
-            viewBtn.style.fontSize = '12px';
+            viewBtn.style.marginLeft = '0';
+            viewBtn.style.padding = '4px 9px';
+            viewBtn.style.fontSize = '11px';
             viewBtn.onclick = async () => {
                 await loadConfiguredDevices();
                 scrollToConfiguredDevice(d.id);
             };
             li.appendChild(info);
             const actions = document.createElement('div');
+            actions.className = 'device-actions';
             actions.style.display = 'flex';
             actions.style.alignItems = 'center';
+            actions.style.flexWrap = 'wrap';
+            actions.style.justifyContent = 'flex-start';
+            actions.style.marginLeft = '0';
+            actions.style.width = '100%';
+            actions.style.marginTop = '2px';
+            actions.style.gap = '5px';
             actions.appendChild(viewBtn);
             actions.appendChild(addBtn);
+            actions.appendChild(createConnectionTestControls(d));
             li.appendChild(actions);
             ul.appendChild(li);
             continue;
         }
+        const actions = document.createElement('div');
+        actions.className = 'device-actions';
+        actions.style.display = 'flex';
+        actions.style.flexWrap = 'wrap';
+        actions.style.justifyContent = 'flex-start';
+        actions.style.marginLeft = '0';
+        actions.style.width = '100%';
+        actions.style.marginTop = '2px';
+        actions.style.gap = '5px';
+        actions.appendChild(addBtn);
+        actions.appendChild(createConnectionTestControls(d));
         li.appendChild(info);
-        li.appendChild(addBtn);
+        li.appendChild(actions);
         ul.appendChild(li);
     }
     return ul;
@@ -409,6 +719,7 @@ export function renderDeviceList(list) {
         return;
     }
     status.textContent = `Found ${list.length} device(s)`;
+    ul.classList.add('device-grid');
     ul.innerHTML = '';
     // Show remove all button when devices exist
     if (removeAllContainer) {
@@ -418,22 +729,56 @@ export function renderDeviceList(list) {
         const li = document.createElement('li');
         li.className = 'device-item';
         li.setAttribute('data-device-id', normalizeId(d.id));
+        li.style.display = 'flex';
+        li.style.flexDirection = 'column';
+        li.style.alignItems = 'stretch';
+        li.style.marginBottom = '0';
         const info = document.createElement('div');
-        info.style.flex = '1';
+        info.style.flex = '1 1 auto';
+        info.style.width = '100%';
+        info.style.minWidth = '0';
         const nameContainer = document.createElement('div');
         nameContainer.style.display = 'flex';
-        nameContainer.style.alignItems = 'center';
-        nameContainer.style.flexWrap = 'wrap';
-        nameContainer.style.gap = '6px';
+        nameContainer.style.flexDirection = 'column';
+        nameContainer.style.alignItems = 'flex-start';
+        nameContainer.style.gap = '0';
         const name = document.createElement('div');
         name.style.fontWeight = '500';
+        name.style.fontSize = '13px';
         name.textContent = d.name || d.id;
+        const expandedDetails = document.createElement('div');
+        expandedDetails.style.display = 'none';
+        expandedDetails.appendChild(renderDeviceDetailsPanel(d));
+        const expandBtn = document.createElement('button');
+        expandBtn.textContent = '▾';
+        expandBtn.title = 'Show details';
+        expandBtn.style.padding = '2px 6px';
+        expandBtn.style.fontSize = '11px';
+        expandBtn.style.marginLeft = '4px';
+        expandBtn.style.background = '#e5e7eb';
+        expandBtn.style.color = '#111827';
+        expandBtn.style.transition = 'transform 0.2s ease';
+        expandBtn.onclick = () => {
+            const isHidden = expandedDetails.style.display === 'none';
+            expandedDetails.style.display = isHidden ? 'block' : 'none';
+            expandBtn.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
+        };
         const code = document.createElement('code');
         code.textContent = d.id;
-        code.style.fontSize = '12px';
+        code.style.fontSize = '10px';
         code.style.opacity = '0.75';
-        code.style.marginLeft = '8px';
-        nameContainer.appendChild(name);
+        code.style.marginLeft = '0';
+        code.style.whiteSpace = 'normal';
+        code.style.overflowWrap = 'anywhere';
+        code.style.wordBreak = 'break-word';
+        code.style.maxWidth = '100%';
+        const headerRow = document.createElement('div');
+        headerRow.style.display = 'inline-flex';
+        headerRow.style.alignItems = 'center';
+        headerRow.style.gap = '4px';
+        headerRow.appendChild(name);
+        headerRow.appendChild(expandBtn);
+        nameContainer.appendChild(headerRow);
         nameContainer.appendChild(code);
         // Add signal strength visualization if RSSI is available
         if (d.rssi !== undefined && d.rssi !== null && d.rssi !== 0) {
@@ -442,29 +787,36 @@ export function renderDeviceList(list) {
         }
         const meta = document.createElement('div');
         meta.style.opacity = '0.75';
-        meta.style.marginTop = '4px';
-        meta.style.fontSize = '12px';
+        meta.style.marginTop = '0';
+        meta.style.fontSize = '11px';
         const typeText = d.type ? `type: ${d.type}` : '';
         const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : '';
         const roomText = d.room ? `room: ${d.room}` : '';
         meta.textContent = [typeText, connText, roomText].filter(Boolean).join(' | ');
         info.appendChild(nameContainer);
         info.appendChild(meta);
+        info.appendChild(expandedDetails);
         const buttons = document.createElement('div');
+        buttons.className = 'device-actions';
         buttons.style.display = 'flex';
-        buttons.style.gap = '8px';
+        buttons.style.flexWrap = 'wrap';
+        buttons.style.justifyContent = 'flex-start';
+        buttons.style.marginLeft = '0';
+        buttons.style.width = '100%';
+        buttons.style.marginTop = '2px';
+        buttons.style.gap = '5px';
         const editBtn = document.createElement('button');
         editBtn.textContent = '✏️ Edit';
-        editBtn.style.padding = '6px 12px';
-        editBtn.style.fontSize = '12px';
+        editBtn.style.padding = '4px 9px';
+        editBtn.style.fontSize = '11px';
         editBtn.onclick = async () => {
             const { editDevice } = await import('./modals.js');
             await editDevice(d);
         };
         const copyBtn = document.createElement('button');
         copyBtn.textContent = 'Copy ID';
-        copyBtn.style.padding = '6px 12px';
-        copyBtn.style.fontSize = '12px';
+        copyBtn.style.padding = '4px 9px';
+        copyBtn.style.fontSize = '11px';
         copyBtn.addEventListener('click', async () => {
             try {
                 await navigator.clipboard.writeText(d.id);
@@ -481,8 +833,8 @@ export function renderDeviceList(list) {
         });
         const deleteBtn = document.createElement('button');
         deleteBtn.textContent = '🗑️ Delete';
-        deleteBtn.style.padding = '6px 12px';
-        deleteBtn.style.fontSize = '12px';
+        deleteBtn.style.padding = '4px 9px';
+        deleteBtn.style.fontSize = '11px';
         deleteBtn.style.background = '#ef4444';
         deleteBtn.onclick = async () => {
             const { deleteDeviceFromConfig } = await import('./devices-delete.js');
@@ -490,6 +842,7 @@ export function renderDeviceList(list) {
         };
         buttons.appendChild(editBtn);
         buttons.appendChild(copyBtn);
+        buttons.appendChild(createConnectionTestControls(d));
         buttons.appendChild(deleteBtn);
         li.appendChild(info);
         li.appendChild(buttons);