bugfix for rule fetch, feat: device info and trying to fix dimmer

2026-03-30 22:38:52 -04:00
parent 5bffb1064d
commit 7ea32cee8c
5 changed files with 129 additions and 107 deletions
@@ -316,9 +316,12 @@
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">GET /api/devices</td><td>List devices</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">POST /api/devices/discover</td><td>Scan network</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">POST /api/devices/add</td><td>Add device manually <code style="background:var(--bg);padding:1px 4px;border-radius:3px;">{"host":"192.168.1.100","port":49153}</code></td></tr>
+        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">GET /api/devices/:ip/:port/info</td><td>Get device information</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">POST /api/devices/:ip/:port/state</td><td>Toggle power <code style="background:var(--bg);padding:1px 4px;border-radius:3px;">{"on":true}</code></td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">GET /api/devices/:ip/:port/brightness</td><td>Get brightness (dimmer only)</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">POST /api/devices/:ip/:port/brightness</td><td>Set brightness <code style="background:var(--bg);padding:1px 4px;border-radius:3px;">{"brightness":50}</code></td></tr>
+        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">GET /api/devices/:ip/:port/rules</td><td>Get Wemo device rules</td></tr>
+        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">PUT /api/devices/:ip/:port/rules/:id</td><td>Update Wemo rule</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">GET /api/dwm-rules</td><td>List DWM rules</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">POST /api/dwm-rules</td><td>Create rule</td></tr>
        <tr><td style="padding-right:8px;white-space:nowrap;color:var(--accent);font-family:monospace;">PUT /api/dwm-rules/:id</td><td>Update rule</td></tr>
@@ -525,6 +528,24 @@
  </div>
 </div>

+<!-- ── Device Info Modal ── -->
+<div class="modal-backdrop" id="modal-device-info" onclick="closeDeviceInfoModal(event)">
+  <div class="modal" onclick="event.stopPropagation()">
+    <div class="modal-header">
+      <span class="modal-title">Device Information</span>
+      <button class="modal-close" onclick="closeDeviceInfoModal()">×</button>
+    </div>
+    
+    <div id="device-info-content">
+      <div style="text-align:center;color:var(--text2);padding:20px;">Loading device information…</div>
+    </div>
+
+    <div class="modal-footer">
+      <button class="btn btn-primary" onclick="closeDeviceInfoModal()">Close</button>
+    </div>
+  </div>
+</div>
+
 <!-- ── Delete Confirm ── -->
 <div class="confirm-backdrop" id="confirm-delete">
  <div class="confirm-box">
@@ -674,11 +695,14 @@ function renderDevices() {
            </div>
          ` : ''}
        </div>
-        <label class="toggle" id="dtog-${i}" onclick="toggleDevice(${i},event)">
-          <input type="checkbox" id="dchk-${i}">
-          <span class="track"></span>
-          <span class="thumb"></span>
-        </label>
+        <div class="rule-actions">
+          <label class="toggle" id="dtog-${i}" onclick="toggleDevice(${i},event)">
+            <input type="checkbox" id="dchk-${i}">
+            <span class="track"></span>
+            <span class="thumb"></span>
+          </label>
+          <button class="icon-btn" onclick="openDeviceInfoModal(${i})" title="Device Info">ℹ️</button>
+        </div>
      </div>`;
  }).join('');
  
@@ -1056,6 +1080,69 @@ async function addDeviceManually() {
  }
 }

+// ── Device Info Modal ───────────────────────────────────────────────────────
+let currentDeviceInfo = null;
+
+async function openDeviceInfoModal(i) {
+  const dev = devices[i];
+  if (!dev) return;
+  
+  currentDeviceInfo = dev;
+  document.getElementById('modal-device-info').classList.add('open');
+  
+  const content = document.getElementById('device-info-content');
+  content.innerHTML = '<div style="text-align:center;color:var(--text2);padding:20px;">Loading device information…</div>';
+  
+  try {
+    const info = await api('GET', `/api/devices/${dev.host}/${dev.port}/info`);
+    renderDeviceInfo(info, dev);
+  } catch (err) {
+    content.innerHTML = `
+      <div style="text-align:center;color:var(--danger);padding:20px;">
+        <div style="font-size:24px;margin-bottom:10px;">⚠️</div>
+        <div>Failed to load device information</div>
+        <div style="font-size:12px;margin-top:8px;">${err.message}</div>
+      </div>
+    `;
+  }
+}
+
+function closeDeviceInfoModal(e) {
+  if (e && e.target !== document.getElementById('modal-device-info')) return;
+  document.getElementById('modal-device-info').classList.remove('open');
+  currentDeviceInfo = null;
+}
+
+function renderDeviceInfo(info, dev) {
+  const content = document.getElementById('device-info-content');
+  
+  const fields = [
+    { label: 'Device Name', value: info.friendlyName || dev.friendlyName || 'Unknown' },
+    { label: 'IP Address', value: dev.host },
+    { label: 'Port', value: dev.port },
+    { label: 'Product Model', value: info.productModel || 'Unknown' },
+    { label: 'Model Description', value: info.modelDescription || 'Unknown' },
+    { label: 'Firmware Version', value: info.firmwareVersion || 'Unknown' },
+    { label: 'UDN', value: info.udn || 'Unknown' },
+    { label: 'Device Type', value: info.deviceType || 'Unknown' },
+    { label: 'Manufacturer', value: info.manufacturer || 'Unknown' },
+    { label: 'Is Dimmer', value: dev.isDimmer ? 'Yes' : 'No' },
+    { label: 'Serial Number', value: info.serialNumber || 'Unknown' },
+    { label: 'MAC Address', value: info.macAddress || 'Unknown' }
+  ];
+  
+  content.innerHTML = `
+    <div style="display:grid;gap:12px;">
+      ${fields.map(field => `
+        <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);">
+          <span style="font-size:13px;color:var(--text2);font-weight:600;">${field.label}</span>
+          <span style="font-size:13px;color:var(--text);font-family:monospace;word-break:break-all;">${field.value}</span>
+        </div>
+      `).join('')}
+    </div>
+  `;
+}
+
 async function saveRule() {
  const errEl  = document.getElementById('modal-rule-error');
  errEl.style.display = 'none';