@homebridge-plugins/homebridge-eufy-security 4.7.2 → 5.0.0-beta.1

package/homebridge-ui/public/components/device-card.js

@@ -1,174 +0,0 @@
-/**
- * DeviceCard component — renders a single device/station card for the dashboard grid.
- *
- * Usage:
- *   DeviceCard.render(container, {
- *     device: { uniqueId, displayName, type, typename, ... },
- *     isStation: false,
- *     enabled: true,
- *     onClick: (device) => { ... },
- *     onToggle: (device, enabled) => { ... }
- *   });
- */
-// eslint-disable-next-line no-unused-vars
-const DeviceCard = {
-
-  /**
-   * @param {HTMLElement} container
-   * @param {object} opts
-   * @param {object} opts.device - L_Device or L_Station data
-   * @param {boolean} [opts.isStation]
-   * @param {boolean} opts.enabled - whether device is enabled (not ignored)
-   * @param {function} opts.onClick - callback(device)
-   * @param {function} opts.onToggle - callback(device, enabled)
-   * @returns {HTMLElement}
-   */
-  render(container, opts) {
-    const d = opts.device;
-    const isUnsupported = d.unsupported === true;
-    const isIgnored = d.ignored === true;
-    const isKeypad = d.isKeypad === true;
-
-    const col = document.createElement('div');
-    col.className = 'col-6 col-md-4 col-lg-3 mb-3';
-
-    const card = document.createElement('div');
-    card.className = 'device-card';
-    if (isUnsupported) card.classList.add('device-card--unsupported');
-    if (isIgnored) card.classList.add('device-card--ignored');
-
-    // Image (skip for unsupported)
-    if (!isUnsupported) {
-      const imgWrap = document.createElement('div');
-      imgWrap.className = 'device-card__image-wrap';
-      const img = document.createElement('img');
-      img.src = DeviceImages.getPath(d.type);
-      img.alt = d.displayName;
-      img.loading = 'lazy';
-      imgWrap.appendChild(img);
-      card.appendChild(imgWrap);
-    }
-
-    // Body
-    const body = document.createElement('div');
-    body.className = 'device-card__body';
-
-    const name = document.createElement('div');
-    name.className = 'device-card__name';
-    name.textContent = d.displayName;
-    name.title = d.displayName;
-
-    // Meta row: left side = battery/charging info, right side = toggle
-    const metaRow = document.createElement('div');
-    metaRow.className = 'device-card__meta-row';
-
-    const meta = document.createElement('div');
-    meta.className = 'device-card__meta';
-
-    // Build meta line with DOM nodes so we can mix text and SVG icons
-    const metaFragments = [];
-    if (isUnsupported) {
-      metaFragments.push('Type ' + d.type);
-    }
-
-    // Power info (pre-computed by server)
-    const pw = d.power || {};
-    if (pw.battery !== undefined) {
-      metaFragments.push({ icon: Helpers.batteryIcon(pw.battery), text: pw.battery + '%' });
-    } else if (pw.batteryLow === true) {
-      metaFragments.push({ icon: Helpers.batteryIcon(0), text: 'Low' });
-    } else if (pw.batteryLow === false) {
-      metaFragments.push({ icon: Helpers.batteryIcon(100), text: 'OK' });
-    }
-    if (pw.icon && pw.label) {
-      metaFragments.push({ icon: pw.icon, text: pw.label });
-    }
-    metaFragments.forEach((frag, i) => {
-      if (i > 0) meta.append(' · ');
-      if (typeof frag === 'string') {
-        meta.append(frag);
-      } else {
-        meta.appendChild(Helpers.icon(frag.icon, 14, frag.text));
-        meta.append(' ' + frag.text);
-      }
-    });
-
-    metaRow.appendChild(meta);
-
-    // Toggle — inline with meta, only for non-unsupported, non-keypad devices
-    if (!isUnsupported && !isKeypad) {
-      const switchWrap = document.createElement('div');
-      switchWrap.className = 'form-check form-switch mb-0';
-      switchWrap.addEventListener('click', (e) => e.stopPropagation());
-
-      const toggle = document.createElement('input');
-      toggle.type = 'checkbox';
-      toggle.className = 'form-check-input';
-      toggle.checked = opts.enabled;
-      toggle.role = 'switch';
-      toggle.title = opts.enabled ? 'Enabled in HomeKit' : 'Disabled in HomeKit';
-
-      toggle.addEventListener('change', (e) => {
-        e.stopPropagation();
-        if (opts.onToggle) opts.onToggle(d, toggle.checked);
-      });
-
-      switchWrap.appendChild(toggle);
-      metaRow.appendChild(switchWrap);
-    }
-
-    body.appendChild(name);
-    body.appendChild(metaRow);
-
-    // Footer with badges (unsupported / disabled)
-    const footer = document.createElement('div');
-    footer.className = 'device-card__footer';
-
-    const badgeArea = document.createElement('div');
-    let hasBadge = false;
-
-    if (isKeypad) {
-      const badge = document.createElement('span');
-      badge.className = 'badge bg-secondary';
-      badge.textContent = 'Not available for HomeKit';
-      badgeArea.appendChild(badge);
-      hasBadge = true;
-    } else if (isUnsupported) {
-      const badge = document.createElement('span');
-      badge.className = 'badge badge-unsupported';
-      badge.textContent = 'Not Supported';
-      badgeArea.appendChild(badge);
-
-      const hint = document.createElement('div');
-      hint.className = 'device-card__hint';
-      hint.textContent = 'Click to help us add support';
-      badgeArea.appendChild(hint);
-      hasBadge = true;
-    } else if (isIgnored) {
-      const badge = document.createElement('span');
-      badge.className = 'badge bg-secondary';
-      badge.textContent = 'Disabled';
-      badgeArea.appendChild(badge);
-      hasBadge = true;
-    }
-
-    footer.appendChild(badgeArea);
-
-    card.appendChild(body);
-    if (hasBadge) card.appendChild(footer);
-
-    // Click handler — navigate to detail (disabled for keypads)
-    if (isKeypad) {
-      card.style.cursor = 'default';
-      card.title = 'Keypads have no configurable HomeKit settings. The keypad works alongside your station but cannot be exposed to HomeKit.';
-    } else {
-      card.addEventListener('click', () => {
-        if (opts.onClick) opts.onClick(d);
-      });
-    }
-
-    col.appendChild(card);
-    if (container) container.appendChild(col);
-    return col;
-  },
-};

package/homebridge-ui/public/components/guard-modes.js

@@ -1,88 +0,0 @@
-/**
- * Guard Modes mapping component.
- * Maps HomeKit modes (Home, Away, Night, Off) to Eufy guard mode numbers.
- *
- * Usage:
- *   GuardModes.render(container, {
- *     hkHome: 1, hkAway: 0, hkNight: 1, hkOff: 63,
- *     onChange: (modes) => { ... }  // { hkHome, hkAway, hkNight, hkOff }
- *   });
- */
-// eslint-disable-next-line no-unused-vars
-const GuardModes = {
-  EUFY_MODES: [
-    { value: '0', label: 'Away' },
-    { value: '1', label: 'Home' },
-    { value: '2', label: 'Schedule' },
-    { value: '3', label: 'Custom 1' },
-    { value: '4', label: 'Custom 2' },
-    { value: '5', label: 'Custom 3' },
-    { value: '6', label: 'Off' },
-    { value: '47', label: 'Geofencing' },
-    { value: '63', label: 'Disarmed' },
-  ],
-
-  /**
-   * @param {HTMLElement} container
-   * @param {object} opts
-   * @param {number} [opts.hkHome]
-   * @param {number} [opts.hkAway]
-   * @param {number} [opts.hkNight]
-   * @param {number} [opts.hkOff]
-   * @param {boolean} [opts.disabled]
-   * @param {function} opts.onChange - callback({ hkHome, hkAway, hkNight, hkOff })
-   * @returns {HTMLElement}
-   */
-  render(container, opts) {
-    const wrap = document.createElement('div');
-    wrap.className = 'guard-mode-grid';
-
-    const modes = {
-      hkHome: { label: 'HomeKit Home', value: opts.hkHome ?? 1 },
-      hkAway: { label: 'HomeKit Away', value: opts.hkAway ?? 0 },
-      hkNight: { label: 'HomeKit Night', value: opts.hkNight ?? 1 },
-      hkOff: { label: 'HomeKit Off', value: opts.hkOff ?? 63 },
-    };
-
-    const currentValues = {
-      hkHome: modes.hkHome.value,
-      hkAway: modes.hkAway.value,
-      hkNight: modes.hkNight.value,
-      hkOff: modes.hkOff.value,
-    };
-
-    Object.entries(modes).forEach(([key, mode]) => {
-      const group = document.createElement('div');
-      group.className = 'form-group';
-
-      const label = document.createElement('label');
-      label.textContent = mode.label;
-      label.setAttribute('for', 'guard-' + key);
-
-      const select = document.createElement('select');
-      select.className = 'form-select form-select-sm';
-      select.id = 'guard-' + key;
-      select.disabled = !!opts.disabled;
-
-      this.EUFY_MODES.forEach((em) => {
-        const option = document.createElement('option');
-        option.value = em.value;
-        option.textContent = em.label;
-        if (String(em.value) === String(mode.value)) option.selected = true;
-        select.appendChild(option);
-      });
-
-      select.addEventListener('change', () => {
-        currentValues[key] = parseInt(select.value);
-        if (opts.onChange) opts.onChange({ ...currentValues });
-      });
-
-      group.appendChild(label);
-      group.appendChild(select);
-      wrap.appendChild(group);
-    });
-
-    if (container) container.appendChild(wrap);
-    return wrap;
-  },
-};

package/homebridge-ui/public/components/number-input.js

@@ -1,121 +0,0 @@
-/**
- * NumberInput component — renders a number input with +/- buttons, label, and optional help tooltip.
- *
- * Usage:
- *   NumberInput.render(container, {
- *     id: 'polling-interval',
- *     label: 'Polling Interval',
- *     help: 'Minutes between cloud polls',
- *     value: 10,
- *     min: 1,
- *     max: 120,
- *     step: 1,
- *     suffix: 'min',
- *     onChange: (value) => { ... }
- *   });
- */
-// eslint-disable-next-line no-unused-vars
-const NumberInput = {
-  /**
-   * @param {HTMLElement} container
-   * @param {object} opts
-   * @param {string} opts.id
-   * @param {string} opts.label
-   * @param {string} [opts.help]
-   * @param {number} opts.value
-   * @param {number} [opts.min]
-   * @param {number} [opts.max]
-   * @param {number} [opts.step]
-   * @param {string} [opts.suffix] - text after the input (e.g., 'min', 'sec')
-   * @param {boolean} [opts.disabled]
-   * @param {function} opts.onChange - callback(value: number)
-   * @returns {HTMLElement}
-   */
-  render(container, opts) {
-    const row = document.createElement('div');
-    row.className = 'eufy-toggle';
-
-    const labelWrap = document.createElement('div');
-    labelWrap.className = 'eufy-toggle__label';
-
-    const labelEl = document.createElement('label');
-    labelEl.setAttribute('for', opts.id);
-    labelEl.textContent = opts.label;
-    labelWrap.appendChild(labelEl);
-
-    if (opts.help) {
-      const helpEl = document.createElement('span');
-      helpEl.className = 'eufy-toggle__help';
-      helpEl.textContent = '?';
-      helpEl.title = opts.help;
-      labelWrap.appendChild(helpEl);
-    }
-
-    const inputGroup = document.createElement('div');
-    inputGroup.className = 'number-input-group';
-
-    const step = opts.step || 1;
-    const min = opts.min !== undefined ? opts.min : 0;
-    const max = opts.max !== undefined ? opts.max : 99999;
-
-    const btnMinus = document.createElement('button');
-    btnMinus.type = 'button';
-    btnMinus.className = 'btn btn-outline-secondary btn-sm';
-    btnMinus.textContent = '−';
-
-    const input = document.createElement('input');
-    input.type = 'number';
-    input.className = 'form-control form-control-sm';
-    input.id = opts.id;
-    input.value = opts.value;
-    input.min = min;
-    input.max = max;
-    input.step = step;
-    input.disabled = !!opts.disabled;
-
-    const btnPlus = document.createElement('button');
-    btnPlus.type = 'button';
-    btnPlus.className = 'btn btn-outline-secondary btn-sm';
-    btnPlus.textContent = '+';
-
-    const fireChange = () => {
-      let val = parseFloat(input.value);
-      if (isNaN(val)) val = min;
-      val = Math.max(min, Math.min(max, val));
-      input.value = val;
-      if (opts.onChange) opts.onChange(val);
-    };
-
-    btnMinus.addEventListener('click', () => {
-      let val = parseFloat(input.value) - step;
-      input.value = Math.max(min, val);
-      fireChange();
-    });
-
-    btnPlus.addEventListener('click', () => {
-      let val = parseFloat(input.value) + step;
-      input.value = Math.min(max, val);
-      fireChange();
-    });
-
-    input.addEventListener('change', fireChange);
-
-    inputGroup.appendChild(btnMinus);
-    inputGroup.appendChild(input);
-    inputGroup.appendChild(btnPlus);
-
-    if (opts.suffix) {
-      const suffixEl = document.createElement('span');
-      suffixEl.className = 'text-muted ms-1';
-      suffixEl.style.fontSize = '0.8rem';
-      suffixEl.textContent = opts.suffix;
-      inputGroup.appendChild(suffixEl);
-    }
-
-    row.appendChild(labelWrap);
-    row.appendChild(inputGroup);
-
-    if (container) container.appendChild(row);
-    return row;
-  },
-};

package/homebridge-ui/public/components/select.js

@@ -1,73 +0,0 @@
-/**
- * Select component — renders a dropdown with label and optional help tooltip.
- *
- * Usage:
- *   Select.render(container, {
- *     id: 'snapshot-method',
- *     label: 'Snapshot Method',
- *     help: 'How snapshots are captured',
- *     options: [{ value: '0', label: 'Auto' }, { value: '1', label: 'From Stream' }],
- *     value: '0',
- *     onChange: (value) => { ... }
- *   });
- */
-// eslint-disable-next-line no-unused-vars
-const Select = {
-  /**
-   * @param {HTMLElement} container
-   * @param {object} opts
-   * @param {string} opts.id
-   * @param {string} opts.label
-   * @param {string} [opts.help]
-   * @param {Array<{value: string, label: string}>} opts.options
-   * @param {string} opts.value - initial selected value
-   * @param {boolean} [opts.disabled]
-   * @param {function} opts.onChange - callback(value: string)
-   * @returns {HTMLElement}
-   */
-  render(container, opts) {
-    const row = document.createElement('div');
-    row.className = 'eufy-toggle';
-
-    const labelWrap = document.createElement('div');
-    labelWrap.className = 'eufy-toggle__label';
-
-    const labelEl = document.createElement('label');
-    labelEl.setAttribute('for', opts.id);
-    labelEl.textContent = opts.label;
-    labelWrap.appendChild(labelEl);
-
-    if (opts.help) {
-      const helpEl = document.createElement('span');
-      helpEl.className = 'eufy-toggle__help';
-      helpEl.textContent = '?';
-      helpEl.title = opts.help;
-      labelWrap.appendChild(helpEl);
-    }
-
-    const selectEl = document.createElement('select');
-    selectEl.className = 'form-select form-select-sm';
-    selectEl.id = opts.id;
-    selectEl.style.width = 'auto';
-    selectEl.style.maxWidth = '200px';
-    selectEl.disabled = !!opts.disabled;
-
-    (opts.options || []).forEach((opt) => {
-      const option = document.createElement('option');
-      option.value = opt.value;
-      option.textContent = opt.label;
-      if (String(opt.value) === String(opts.value)) option.selected = true;
-      selectEl.appendChild(option);
-    });
-
-    selectEl.addEventListener('change', () => {
-      if (opts.onChange) opts.onChange(selectEl.value);
-    });
-
-    row.appendChild(labelWrap);
-    row.appendChild(selectEl);
-
-    if (container) container.appendChild(row);
-    return row;
-  },
-};

package/homebridge-ui/public/components/toggle.js

@@ -1,68 +0,0 @@
-/**
- * Toggle component — renders an on/off switch with label and optional help tooltip.
- *
- * Usage:
- *   Toggle.render(container, {
- *     id: 'enable-camera',
- *     label: 'Enable Camera',
- *     help: 'Show this camera in HomeKit',
- *     checked: true,
- *     onChange: (checked) => { ... }
- *   });
- */
-// eslint-disable-next-line no-unused-vars
-const Toggle = {
-  /**
-   * @param {HTMLElement} container - parent element to append into
-   * @param {object} opts
-   * @param {string} opts.id - unique id for the input
-   * @param {string} opts.label - display label
-   * @param {string} [opts.help] - tooltip text
-   * @param {boolean} opts.checked - initial state
-   * @param {boolean} [opts.disabled] - disabled state
-   * @param {function} opts.onChange - callback(checked: boolean)
-   * @returns {HTMLElement}
-   */
-  render(container, opts) {
-    const row = document.createElement('div');
-    row.className = 'eufy-toggle';
-
-    const labelWrap = document.createElement('div');
-    labelWrap.className = 'eufy-toggle__label';
-
-    const labelEl = document.createElement('label');
-    labelEl.setAttribute('for', opts.id);
-    labelEl.textContent = opts.label;
-    labelWrap.appendChild(labelEl);
-
-    if (opts.help) {
-      const helpEl = document.createElement('span');
-      helpEl.className = 'eufy-toggle__help';
-      helpEl.textContent = '?';
-      helpEl.title = opts.help;
-      labelWrap.appendChild(helpEl);
-    }
-
-    const switchWrap = document.createElement('div');
-    switchWrap.className = 'form-check form-switch mb-0';
-
-    const input = document.createElement('input');
-    input.type = 'checkbox';
-    input.className = 'form-check-input';
-    input.id = opts.id;
-    input.checked = !!opts.checked;
-    input.disabled = !!opts.disabled;
-    input.role = 'switch';
-
-    input.addEventListener('change', () => {
-      if (opts.onChange) opts.onChange(input.checked);
-    });
-
-    switchWrap.appendChild(input);
-    row.appendChild(labelWrap);
-    row.appendChild(switchWrap);
-
-    if (container) container.appendChild(row);
-    return row;
-  },
-};