@mp-consulting/homebridge-unifi-access 1.0.0

package/homebridge-ui/public/modules/controllers.js

@@ -0,0 +1,202 @@
+import { $, escapeHtml, setButtonLoading, showScreen } from "./dom-helpers.js";
+import { getControllers, saveConfig, state } from "./state.js";
+import { openFeatureOptions } from "./feature-options.js";
+
+export const renderControllers = () => {
+
+
+  const controllers = getControllers();
+  const list = $("controllersList");
+  const noMsg = $("noControllersMessage");
+
+  if(!controllers.length) {
+
+
+    noMsg.style.display = "block";
+    list.style.display = "none";
+
+    return;
+  }
+
+  noMsg.style.display = "none";
+  list.style.display = "block";
+  list.innerHTML = "";
+
+  controllers.forEach((ctrl, index) => {
+
+
+    const li = document.createElement("li");
+
+    li.className = "list-group-item";
+    /* eslint-disable no-restricted-syntax */
+    li.innerHTML = `
+      <div class="d-flex w-100 justify-content-between align-items-center">
+        <div>
+          <h6 class="mb-1">
+            <i class="fas fa-server mr-2"></i> ${escapeHtml(ctrl.name || ctrl.address)}
+            <span class="status-badge badge rounded-pill bg-secondary ms-2" style="font-size: 0.65rem;"><i class="fas fa-circle-notch fa-spin"></i></span>
+          </h6>
+          <small class="text-muted"><i class="fas fa-network-wired mr-1"></i> ${escapeHtml(ctrl.address)}</small>
+        </div>
+        <div class="d-flex gap-1">
+          <button class="btn btn-sm btn-primary feature-options-btn"><i class="fas fa-sliders-h"></i> Options</button>
+          <button class="btn btn-sm btn-secondary edit-ctrl-btn"><i class="fas fa-edit"></i> Edit</button>
+          <button class="btn btn-sm btn-danger delete-ctrl-btn"><i class="fas fa-trash"></i></button>
+        </div>
+      </div>
+    `;
+    /* eslint-enable no-restricted-syntax */
+
+    li.querySelector(".feature-options-btn").addEventListener("click", () => openFeatureOptions(index));
+    li.querySelector(".edit-ctrl-btn").addEventListener("click", () => openEditController(index));
+    li.querySelector(".delete-ctrl-btn").addEventListener("click", async function() {
+
+
+      setButtonLoading(this, true, "...");
+      controllers.splice(index, 1);
+      await saveConfig();
+      homebridge.toast.success("Controller removed");
+      renderControllers();
+    });
+
+    list.appendChild(li);
+
+    // Check controller status asynchronously.
+    const badge = li.querySelector(".status-badge");
+
+    homebridge.request("/checkStatus", { address: ctrl.address }).then((result) => {
+
+      if(result?.online) {
+
+        badge.className = "status-badge badge rounded-pill bg-success ms-2";
+        badge.style.fontSize = "0.65rem";
+        badge.innerHTML = "<i class=\"fas fa-check-circle\"></i> Online";
+      } else {
+
+        badge.className = "status-badge badge rounded-pill bg-danger ms-2";
+        badge.style.fontSize = "0.65rem";
+        badge.innerHTML = "<i class=\"fas fa-times-circle\"></i> Offline";
+      }
+    }).catch(() => {
+
+      badge.className = "status-badge badge rounded-pill bg-warning ms-2";
+      badge.style.fontSize = "0.65rem";
+      badge.innerHTML = "<i class=\"fas fa-question-circle\"></i> Unknown";
+    });
+  });
+};
+
+export const openAddController = (prefillAddress) => {
+
+
+  state.editingIndex = null;
+  $("setupTitle").textContent = "Add UniFi Access Controller";
+  $("setupSubtitle").textContent = "Enter your UniFi Access controller details and login credentials.";
+  $("inputAddress").value = prefillAddress || "";
+  $("inputUsername").value = "";
+  $("inputPassword").value = "";
+  $("setupError").style.display = "none";
+  $("cancelSetupBtn").style.display = getControllers().length ? "inline-block" : "none";
+  showScreen("setupScreen");
+
+  if(prefillAddress) {
+
+
+    $("inputUsername").focus();
+  }
+};
+
+export const openEditController = (index) => {
+
+
+  state.editingIndex = index;
+  const ctrl = getControllers()[index];
+
+  $("setupTitle").textContent = "Edit Controller";
+  $("setupSubtitle").textContent = "Editing " + (ctrl.name || ctrl.address);
+  $("inputAddress").value = ctrl.address || "";
+  $("inputUsername").value = ctrl.username || "";
+  $("inputPassword").value = ctrl.password || "";
+  $("setupError").style.display = "none";
+  $("cancelSetupBtn").style.display = "inline-block";
+  showScreen("setupScreen");
+};
+
+export const handleSetupSubmit = async (event) => {
+
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  const address = $("inputAddress").value.trim();
+  const username = $("inputUsername").value.trim();
+  const password = $("inputPassword").value.trim();
+
+  if(!address || !username || !password) {
+
+
+    $("setupErrorText").textContent = "Please fill in all fields.";
+    $("setupError").style.display = "block";
+
+    return;
+  }
+
+  const btn = $("saveControllerBtn");
+
+  setButtonLoading(btn, true, "Validating...");
+  $("setupError").style.display = "none";
+
+  try {
+
+
+    const devices = await homebridge.request("/getDevices", { address, password, username });
+
+    if(!devices?.length) {
+
+
+      const errorDetail = await homebridge.request("/getErrorMessage");
+
+      $("setupErrorText").textContent = "Unable to connect. " + (errorDetail || "Check your address and credentials.");
+      $("setupError").style.display = "block";
+      setButtonLoading(btn, false);
+
+      return;
+    }
+
+    state.pluginConfig[0].controllers ||= [];
+
+    const controllerData = { address, password, username };
+
+    if(devices[0]?.host?.hostname) {
+
+
+      controllerData.name = devices[0].host.hostname;
+    }
+
+    if(state.editingIndex !== null) {
+
+
+      const existing = state.pluginConfig[0].controllers[state.editingIndex];
+
+      state.pluginConfig[0].controllers[state.editingIndex] = { ...existing, ...controllerData };
+    } else {
+
+
+      state.pluginConfig[0].controllers.push(controllerData);
+    }
+
+    await saveConfig();
+    homebridge.toast.success(state.editingIndex !== null ? "Controller updated" : "Controller added successfully!");
+    showScreen("controllersScreen");
+    renderControllers();
+  } catch(e) {
+
+
+    $("setupErrorText").textContent = "Error: " + e.message;
+    $("setupError").style.display = "block";
+  } finally {
+
+
+    setButtonLoading(btn, false);
+  }
+};

package/homebridge-ui/public/modules/discovery.js

@@ -0,0 +1,89 @@
+import { $, escapeHtml } from "./dom-helpers.js";
+import { getControllers } from "./state.js";
+import { openAddController } from "./controllers.js";
+
+export const handleDiscover = async () => {
+
+
+  const btn = $("discoverBtn");
+  const btnText = $("discoverBtnText");
+  const spinner = $("discoverSpinner");
+  const container = $("deviceListContainer");
+  const listDiv = $("deviceList");
+
+  btn.disabled = true;
+  btnText.textContent = " Searching...";
+  spinner.style.display = "inline-block";
+  container.innerHTML = "";
+  listDiv.style.display = "none";
+
+  try {
+
+
+    const devices = await homebridge.request("/discover");
+    const configuredIps = getControllers().map(c => c.address);
+    const available = devices.filter(d => !configuredIps.includes(d.ip));
+
+    if(!available.length) {
+
+
+      const msg = devices.length ?
+        "All discovered devices are already configured." :
+        "No devices found. Make sure your UniFi console is on and connected.";
+
+      /* eslint-disable-next-line no-restricted-syntax */
+      container.innerHTML = `<div class="alert alert-${devices.length ? "success" : "warning"}">${msg}</div>`;
+      listDiv.style.display = "block";
+    } else {
+
+
+      container.innerHTML = "<h6>Found Devices:</h6><ul class=\"list-group mb-3\" id=\"discoveredDevices\"></ul>";
+      const ul = $("discoveredDevices");
+
+      available.forEach(d => ul.appendChild(createDiscoveredDeviceItem(d)));
+      listDiv.style.display = "block";
+    }
+  } catch(e) {
+
+
+    /* eslint-disable-next-line no-restricted-syntax */
+    container.innerHTML = `<div class="alert alert-danger">Discovery error: ${escapeHtml(e.message)}</div>`;
+    listDiv.style.display = "block";
+  } finally {
+
+
+    btn.disabled = false;
+    btnText.innerHTML = "<i class=\"fas fa-search\"></i> Discover Controllers";
+    spinner.style.display = "none";
+  }
+};
+
+const createDiscoveredDeviceItem = (device) => {
+
+
+  const li = document.createElement("li");
+
+  li.className = "list-group-item list-group-item-action";
+  li.style.cursor = "pointer";
+  /* eslint-disable no-restricted-syntax */
+  li.innerHTML = `
+    <div class="d-flex w-100 justify-content-between align-items-center">
+      <div>
+        <h6 class="mb-1"><i class="fas fa-server mr-2"></i> ${escapeHtml(device.name)}</h6>
+        <small class="text-muted"><i class="fas fa-network-wired mr-1"></i> ${escapeHtml(device.ip)}</small>
+        ${device.model ? `<span class="badge bg-secondary ms-2">${escapeHtml(device.model)}</span>` : ""}
+        ${device.mac ? `<small class="text-muted ms-2"><i class="fas fa-barcode mr-1"></i> ${escapeHtml(device.mac)}</small>` : ""}
+      </div>
+      <span class="badge bg-primary rounded-pill">Select</span>
+    </div>
+  `;
+  /* eslint-enable no-restricted-syntax */
+
+  li.addEventListener("click", () => {
+
+
+    openAddController(device.ip);
+  });
+
+  return li;
+};

package/homebridge-ui/public/modules/dom-helpers.js

@@ -0,0 +1,41 @@
+import { SCREENS } from "./constants.js";
+
+export const $ = (id) => document.getElementById(id);
+
+export const showScreen = (screenId) => {
+
+
+  SCREENS.forEach((id) => {
+
+
+    $(id).style.display = id === screenId ? "block" : "none";
+  });
+};
+
+export const setButtonLoading = (btn, loading, loadingText = "Loading...") => {
+
+
+  if(loading) {
+
+
+    btn.dataset.originalContent = btn.innerHTML;
+    btn.disabled = true;
+    /* eslint-disable-next-line no-restricted-syntax */
+    btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${loadingText}`;
+  } else {
+
+
+    btn.disabled = false;
+    btn.innerHTML = btn.dataset.originalContent;
+  }
+};
+
+export const escapeHtml = (str) => {
+
+
+  const div = document.createElement("div");
+
+  div.textContent = str;
+
+  return div.innerHTML;
+};