@switchbot/homebridge-switchbot 5.0.0-beta.109 → 5.0.0-beta.110

package/src/homebridge-ui/public/css/styles.css

@@ -0,0 +1,254 @@
+:root {
+  color-scheme: light dark;
+  --switchbot-red: #ef4444;
+  --switchbot-red-hover: #dc2626;
+  --switchbot-red-light: #fee2e2;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background: #f5f5f5;
+    color: #1a1a1a;
+  }
+  input {
+    background: #fff;
+    border-color: #ddd;
+    color: #1a1a1a;
+  }
+  input:focus {
+    border-color: #6366f1;
+  }
+  .card {
+    background: #fff;
+    border: 1px solid #ddd;
+  }
+  code {
+    background: #f0f0f0;
+    color: #1a1a1a;
+  }
+  h2 {
+    border-bottom-color: #ddd;
+  }
+  .status {
+    color: #666;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #1a1a1a;
+    color: #fff;
+  }
+  input {
+    background: #2a2a2a;
+    border-color: #444;
+    color: #fff;
+  }
+  .card {
+    background: #2a2a2a;
+  }
+  code {
+    background: #333;
+    color: #fff;
+  }
+  h2 {
+    border-bottom-color: #444;
+  }
+  .status {
+    color: #888;
+  }
+  .device-item {
+    background: #333;
+    border: 1px solid #444;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .device-item {
+    background: #f9f9f9;
+    border: 1px solid #e0e0e0;
+  }
+}
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    Arial;
+  padding: 16px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-top: 0;
+}
+
+h2 {
+  font-size: 16px;
+  margin-top: 24px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid;
+  padding-bottom: 8px;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+li {
+  margin: 8px 0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+button {
+  padding: 10px 20px;
+  background: var(--switchbot-red);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  background: var(--switchbot-red-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
+}
+
+button.secondary {
+  background: #6b7280;
+  color: #fff;
+}
+
+button.secondary:hover {
+  background: #4b5563;
+  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
+}
+
+button.success {
+  background: #10b981;
+}
+
+button.success:hover {
+  background: #059669;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+code {
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 500;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+input {
+  width: 100%;
+  max-width: 400px;
+  padding: 8px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-family: system-ui, -apple-system, monospace;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--switchbot-red, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+input:disabled,
+input[readonly] {
+  background-color: #f9fafb;
+  cursor: not-allowed;
+}
+
+select {
+  padding: 8px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-family: system-ui, -apple-system, Arial;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+select:focus {
+  outline: none;
+  border-color: var(--switchbot-red, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.status {
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.status.ok {
+  color: #10b981;
+}
+
+.error {
+  color: #ef4444;
+}
+
+.success-msg {
+  color: #10b981;
+  margin-top: 8px;
+}
+
+.card {
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.device-item {
+  padding: 10px 12px;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  transition: all 0.2s ease;
+}
+
+.device-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card {
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  transition: box-shadow 0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}

package/src/homebridge-ui/public/index.html

@@ -4,174 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>SwitchBot Plugin UI</title>
-    <style>
-      :root {
-        color-scheme: light dark;
-      }
-
-      @media (prefers-color-scheme: light) {
-        body {
-          background: #f5f5f5;
-          color: #1a1a1a;
-        }
-        input {
-          background: #fff;
-          border-color: #ddd;
-          color: #1a1a1a;
-        }
-        input:focus {
-          border-color: #6366f1;
-        }
-        .card {
-          background: #fff;
-          border: 1px solid #ddd;
-        }
-        code {
-          background: #f0f0f0;
-          color: #1a1a1a;
-        }
-        h2 {
-          border-bottom-color: #ddd;
-        }
-        .status {
-          color: #666;
-        }
-      }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background: #1a1a1a;
-          color: #fff;
-        }
-        input {
-          background: #2a2a2a;
-          border-color: #444;
-          color: #fff;
-        }
-        .card {
-          background: #2a2a2a;
-        }
-        code {
-          background: #333;
-          color: #fff;
-        }
-        h2 {
-          border-bottom-color: #444;
-        }
-        .status {
-          color: #888;
-        }
-        .device-item {
-          background: #333;
-          border: 1px solid #444;
-        }
-      }
-
-      @media (prefers-color-scheme: light) {
-        .device-item {
-          background: #f9f9f9;
-          border: 1px solid #e0e0e0;
-        }
-      }
-
-      @media (prefers-color-scheme: dark) {
-      }
-
-      body {
-        font-family:
-          system-ui,
-          -apple-system,
-          Arial;
-        padding: 16px;
-      }
-      h1 {
-        font-size: 24px;
-        margin-top: 0;
-      }
-      h2 {
-        font-size: 16px;
-        margin-top: 24px;
-        margin-bottom: 12px;
-        border-bottom: 1px solid;
-        padding-bottom: 8px;
-      }
-      ul {
-        padding-left: 0;
-        list-style: none;
-      }
-      li {
-        margin: 8px 0;
-        display: flex;
-        gap: 8px;
-        align-items: center;
-      }
-      button {
-        padding: 8px 16px;
-        background: #6366f1;
-        color: #fff;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      button:hover {
-        background: #4f46e5;
-      }
-      button.success {
-        background: #10b981;
-      }
-      code {
-        padding: 4px 6px;
-        border-radius: 4px;
-        font-family: monospace;
-      }
-      .form-group {
-        margin-bottom: 16px;
-      }
-      label {
-        display: block;
-        margin-bottom: 6px;
-        font-weight: 500;
-      }
-      input {
-        width: 100%;
-        max-width: 400px;
-        padding: 8px;
-        border: 1px solid;
-        border-radius: 4px;
-        font-family: monospace;
-      }
-      input:focus {
-        outline: none;
-      }
-      .status {
-        font-size: 14px;
-        margin-top: 4px;
-      }
-      .status.ok {
-        color: #10b981;
-      }
-      .error {
-        color: #ef4444;
-      }
-      .success-msg {
-        color: #10b981;
-        margin-top: 8px;
-      }
-      .card {
-        padding: 16px;
-        border-radius: 8px;
-        margin-bottom: 16px;
-      }
-      .device-item {
-        padding: 8px;
-        border-radius: 4px;
-        margin-bottom: 8px;
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        justify-content: space-between;
-      }
-    </style>
+    <link rel="stylesheet" href="css/styles.css" />
   </head>
   <body>
     <h1>🤖 SwitchBot Configuration</h1>
@@ -252,6 +85,28 @@
       </p>
       <div id="status">Loading…</div>
       <ul id="devices"></ul>
+      <div
+        id="removeAllContainer"
+        style="
+          display: none;
+          margin-top: 16px;
+          padding-top: 16px;
+          border-top: 1px solid rgba(0, 0, 0, 0.1);
+        "
+      >
+        <button
+          id="removeAllBtn"
+          style="
+            background: #dc2626;
+            width: 100%;
+            padding: 10px 16px;
+            font-size: 14px;
+            font-weight: 500;
+          "
+        >
+          🗑️ Remove All Devices
+        </button>
+      </div>
     </div>
 
     <script type="module" src="js/app.js"></script>

package/src/homebridge-ui/public/js/api.ts

@@ -132,7 +132,7 @@ export async function addDevice(deviceId: string, name: string, type: string): P
 }
 
 export async function addDevicesInBulk(
-  devices: Array<{ deviceId: string, name: string, type: string }>,
+  devices: Array<{ deviceId: string, name: string, type: string, rssi?: number, address?: string, model?: string }>,
 ): Promise<any> {
   try {
     const resp = await homebridge.request('/add-devices', { devices })
@@ -187,3 +187,19 @@ export async function deleteDevice(deviceId: string): Promise<any> {
     throw e
   }
 }
+
+export async function deleteAllDevices(): Promise<any> {
+  try {
+    uiLog.info('Sending delete all devices request')
+    const resp = await homebridge.request('/delete-all-devices', {})
+    uiLog.info('Delete all response:', resp)
+
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || 'Failed to delete all devices')
+    }
+
+    return resp.data || resp
+  } catch (e) {
+    throw e
+  }
+}

package/src/homebridge-ui/public/js/app.ts

@@ -1,5 +1,5 @@
 import { loadCredentialStatus, saveCredentials } from './credentials.js'
-import { loadConfiguredDevices } from './devices.js'
+import { loadConfiguredDevices, initRemoveAllButton } from './devices.js'
 // Wire up global event handlers
 import { discoverDevices } from './discovery.js';
 
@@ -11,6 +11,7 @@ import { discoverDevices } from './discovery.js';
 async function init(): Promise<void> {
   await loadCredentialStatus()
   const list = await loadConfiguredDevices()
+  await initRemoveAllButton()
 }
 
 // Run initialization when DOM is ready

package/src/homebridge-ui/public/js/devices-delete.ts

@@ -1,4 +1,4 @@
-import { deleteDevice as apiDeleteDevice, syncParentPluginConfigFromDisk, fetchDevices } from './api.js'
+import { deleteDevice as apiDeleteDevice, deleteAllDevices as apiDeleteAllDevices, syncParentPluginConfigFromDisk, fetchDevices } from './api.js'
 import { uiLog } from './logger.js'
 import { hideBusyUi, showBusyUi } from './modal.js'
 import { renderDeviceList } from './render.js'
@@ -111,3 +111,126 @@ export async function deleteDeviceFromConfig(deviceId: string, deviceName: strin
     hideBusyUi()
   }
 }
+
+async function confirmDeleteAllDialog(deviceCount: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const overlay = document.createElement('div')
+    overlay.style.position = 'fixed'
+    overlay.style.top = '0'
+    overlay.style.left = '0'
+    overlay.style.width = '100%'
+    overlay.style.height = '100%'
+    overlay.style.background = 'rgba(0,0,0,0.7)'
+    overlay.style.display = 'flex'
+    overlay.style.alignItems = 'center'
+    overlay.style.justifyContent = 'center'
+    overlay.style.zIndex = '10000'
+
+    const modal = document.createElement('div')
+    modal.style.background = getComputedStyle(document.body).backgroundColor
+    modal.style.color = getComputedStyle(document.body).color
+    modal.style.padding = '20px'
+    modal.style.borderRadius = '10px'
+    modal.style.minWidth = '380px'
+    modal.style.maxWidth = '90vw'
+    modal.style.boxShadow = '0 12px 40px rgba(0,0,0,0.35)'
+    modal.style.borderTop = '3px solid #ef4444'
+
+    const title = document.createElement('h3')
+    title.textContent = '⚠️ Remove All Devices'
+    title.style.margin = '0 0 12px 0'
+    title.style.color = '#ef4444'
+
+    const message = document.createElement('p')
+    message.innerHTML = `Are you sure you want to remove <strong>all ${deviceCount} device(s)</strong> from your configuration?<br><br>This action cannot be undone.`
+    message.style.margin = '0 0 18px 0'
+    message.style.lineHeight = '1.5'
+
+    const actions = document.createElement('div')
+    actions.style.display = 'flex'
+    actions.style.justifyContent = 'flex-end'
+    actions.style.gap = '10px'
+
+    const cancelBtn = document.createElement('button')
+    cancelBtn.textContent = 'Cancel'
+    cancelBtn.style.background = '#6b7280'
+    cancelBtn.style.padding = '8px 16px'
+    cancelBtn.style.fontSize = '13px'
+    cancelBtn.className = 'secondary'
+
+    const deleteBtn = document.createElement('button')
+    deleteBtn.textContent = 'Remove All'
+    deleteBtn.style.background = '#ef4444'
+    deleteBtn.style.padding = '8px 20px'
+    deleteBtn.style.fontSize = '13px'
+
+    const cleanup = (result: boolean) => {
+      overlay.remove()
+      resolve(result)
+    }
+
+    cancelBtn.onclick = () => cleanup(false)
+    deleteBtn.onclick = () => cleanup(true)
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        cleanup(false)
+      }
+    })
+
+    actions.appendChild(cancelBtn)
+    actions.appendChild(deleteBtn)
+    modal.appendChild(title)
+    modal.appendChild(message)
+    modal.appendChild(actions)
+    overlay.appendChild(modal)
+    document.body.appendChild(overlay)
+  })
+}
+
+export async function deleteAllDevicesFromConfig(): Promise<void> {
+  uiLog.info('Remove All Devices button clicked')
+
+  try {
+    // Get current device count
+    const list = await fetchDevices()
+    if (!list || list.length === 0) {
+      toastWarning('No devices to remove')
+      return
+    }
+
+    const confirmed = await confirmDeleteAllDialog(list.length)
+    if (!confirmed) {
+      uiLog.info('Remove all cancelled by user')
+      return
+    }
+
+    showBusyUi()
+    uiLog.info('Sending delete all devices request')
+    const resp = await apiDeleteAllDevices()
+    uiLog.info('Delete all response:', resp)
+
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || 'Failed to delete all devices')
+    }
+
+    uiLog.info('Syncing parent config from disk...')
+    const synced = await syncParentPluginConfigFromDisk(true)
+    if (!synced) {
+      toastWarning('Devices deleted, but configuration sync failed')
+    }
+
+    uiLog.info('Refreshing device list...')
+    const updatedList = await fetchDevices()
+    uiLog.info('Rendering devices:', updatedList.length)
+    renderDeviceList(updatedList)
+
+    const deletedCount = resp?.deletedCount || list.length
+    uiLog.info(`✓ Removed ${deletedCount} device(s) successfully`)
+    toastSuccess(`Removed ${deletedCount} device(s) successfully`)
+  } catch (e) {
+    uiLog.error('Delete all error:', e)
+    toastError(e instanceof Error ? e.message : 'Failed to delete all devices')
+  } finally {
+    hideBusyUi()
+  }
+}

package/src/homebridge-ui/public/js/devices.ts

@@ -72,6 +72,16 @@ export async function addDeviceToConfig(device: any, options: { refresh?: boolea
   }
 }
 
+export async function initRemoveAllButton(): Promise<void> {
+  const removeAllBtn = document.getElementById('removeAllBtn')
+  if (!removeAllBtn) { return }
+
+  removeAllBtn.addEventListener('click', async () => {
+    const { deleteAllDevicesFromConfig } = await import('./devices-delete.js')
+    await deleteAllDevicesFromConfig()
+  })
+}
+
 export async function loadConfiguredDevices(): Promise<void> {
   const list = await fetchDevices()
   renderDeviceList(list)