homebridge-unifi-access 1.9.1 → 1.10.0

package/homebridge-ui/public/lib/webUi.mjs

@@ -57,7 +57,7 @@ export class webUi {
     }
   }
 
-  // Show the first run user experience if we don't have valid login credentials.
+  // Show the first run user experience if needed.
   async #showFirstRun() {
 
     const buttonFirstRun = document.getElementById("firstRun");
@@ -68,6 +68,9 @@ export class webUi {
       return;
     }
 
+    // We disable saving any settings until we configure the plugin.
+    homebridge.disableSaveButton();
+
     // First run user experience.
     buttonFirstRun.addEventListener("click", async () => {
 
@@ -80,10 +83,13 @@ export class webUi {
         return;
       }
 
-      // Create our UI.
+      // Create our UI and allow users to save the configuration.
       document.getElementById("pageFirstRun").style.display = "none";
       document.getElementById("menuWrapper").style.display = "inline-flex";
-      this.featureOptions.show();
+
+      await this.featureOptions.show();
+
+      homebridge.enableSaveButton();
 
       // All done. Let the user interact with us, although in practice, we shouldn't get here.
       // homebridge.hideSpinner();
@@ -97,6 +103,7 @@ export class webUi {
 
     // Show the beachball while we setup.
     homebridge.showSpinner();
+    this.featureOptions.hide();
 
     // Highlight the tab in our UI.
     this.#toggleClasses("menuHome", "btn-elegant", "btn-primary");
@@ -118,6 +125,7 @@ export class webUi {
     // Show the beachball while we setup.
     homebridge.showSpinner();
     homebridge.hideSchemaForm();
+    this.featureOptions.hide();
 
     // Highlight the tab in our UI.
     this.#toggleClasses("menuHome", "btn-primary", "btn-elegant");
@@ -139,14 +147,14 @@ export class webUi {
 
     // Add our event listeners to animate the UI.
     document.getElementById("menuHome").addEventListener("click", () => this.#showSupport());
-    document.getElementById("menuFeatureOptions").addEventListener("click", () => this.featureOptions.show());
+    document.getElementById("menuFeatureOptions").addEventListener("click", async () => await this.featureOptions.show());
     document.getElementById("menuSettings").addEventListener("click", () => this.#showSettings());
 
     // If we've got devices detected, we launch our feature option UI. Otherwise, we launch our first run UI.
     if(this.featureOptions.currentConfig.length && !(await this.#processHandler(this.#firstRun.isRequired))) {
 
       document.getElementById("menuWrapper").style.display = "inline-flex";
-      this.featureOptions.show();
+      await this.featureOptions.show();
 
       return;
     }

package/homebridge-ui/public/ui.mjs

@@ -75,17 +75,42 @@ const firstRunOnSubmit = async () => {
   return true;
 };
 
+// Return whether a given device is a controller.
+const isController = (device) => device.display_model === "controller";
+
+// Return the list of controllers from our plugin configuration.
+const getControllers = () => {
+
+  const controllers = [];
+
+  // Grab the controllers from our configuration.
+  for(const controller of ui.featureOptions.currentConfig[0].controllers ?? []) {
+
+    controllers.push({ name: controller.address, serialNumber: controller.address });
+  }
+
+  return controllers;
+};
+
 // Return the list of devices associated with a given Access controller.
-const getDevices = async (controller) => {
+const getDevices = async (selectedController) => {
 
   // If we're in the global context, we have no devices.
+  if(!selectedController) {
+
+    return [];
+  }
+
+  // Find the entry in our plugin configuration.
+  const controller = (ui.featureOptions.currentConfig[0].controllers ?? []).find(c => c.address === selectedController.serialNumber);
+
   if(!controller) {
 
     return [];
   }
 
-  // Retrieve the current list of devices from the Access controller.
-  let devices = await homebridge.request("/getDevices", { address: controller.address, password: controller.password, username: controller.username });
+  // Retrieve the current list of devices from the Protect controller.
+  const devices = await homebridge.request("/getDevices", { address: controller.address, password: controller.password, username: controller.username });
 
   // Since the controller JSON doesn't have the same properties as the device JSON, let's make the controller JSON emulate the properties we care about.
   if(devices?.length) {
@@ -100,103 +125,41 @@ const getDevices = async (controller) => {
     /* eslint-enable camelcase */
   }
 
-  // Add the fields that the webUI framework is looking for to render.
-  devices = devices.map(device => ({
-
-    ...device,
-    serialNumber: device.mac.replace(/:/g, "").toUpperCase() + ((device.device_type === "UAH-Ent") ? "-" + device.source_id.toUpperCase() : "")
-  }));
-
-  return devices;
-};
-
-// Return whether a given device is a controller.
-const isController = (device) => device.display_model === "controller";
-
-// Show the list of Access devices associated with a controller, grouped by model.
-const showSidebarDevices = (controller, devices) => {
-
   // Workaround for the time being to reduce the number of models we see to just the currently supported ones.
-  const modelKeys = [...new Set(devices.filter(device => ["controller"].includes(device.display_model) || device.capabilities.includes("is_hub"))
-    .map(device => (device.device_type === "UAH-Ent") ? device.model : device.display_model))];
-
-  // Start with a clean slate.
-  ui.featureOptions.devicesTable.innerHTML = "";
-
-  for(const key of modelKeys) {
+  const modelKeys = [...new Set(
+    devices.filter(device => ["controller"].includes(device.display_model) || device.capabilities.includes("is_hub") || device.capabilities.includes("is_reader"))
+      .map(device => (device.device_type === "UAH-Ent") ? device.model : device.display_model))];
 
-    // Get all the devices associated with this device category.
-    const modelDevices = devices.filter(x => ((x.device_type === "UAH-Ent") ? x.model : x.display_model) === key);
-
-    // Nothing in this category, let's keep going.
-    if(!modelDevices.length) {
+  // Add the fields that the webUI framework is looking for to render.
+  for(const device of devices) {
 
-      continue;
-    }
+    device.name ??= device.alias ?? device.display_model;
+    device.serialNumber = device.mac.replace(/:/g, "").toUpperCase() + ((device.device_type === "UAH-Ent") ? "-" + device.source_id.toUpperCase() : "");
 
-    // If it's a controller, we handle that case differently.
-    if(key === "controller") {
+    const model = (device.device_type === "UAH-Ent") ? device.model : device.display_model;
 
-      // Change the name of the controller that we show users once we've connected with the controller.
-      ui.featureOptions.webUiControllerList.map(x => (x.name === controller.address) ? x.childNodes[0].nodeValue = modelDevices[0].host.hostname : true);
+    if(!modelKeys.includes(model)) {
 
-      continue;
+      device.sidebarGroup = "hidden";
     }
 
-    // Create a row for this device category.
-    const trCategory = document.createElement("tr");
-
-    // Disable any pointer events and hover activity.
-    trCategory.style.pointerEvents = "none";
-
-    // Create the cell for our device category row.
-    const tdCategory = document.createElement("td");
-
-    tdCategory.classList.add("m-0", "p-0", "pl-1", "w-100");
-
-    // Add the category name, with appropriate casing.
-    tdCategory.appendChild(document.createTextNode((key.charAt(0).toUpperCase() + key.slice(1) + "s")));
-    tdCategory.style.fontWeight = "bold";
-
-    // Add the cell to the table row.
-    trCategory.appendChild(tdCategory);
-
-    // Add the table row to the table.
-    ui.featureOptions.devicesTable.appendChild(trCategory);
+    device.sidebarGroup ??= device.capabilities.includes("is_hub") ? "Hubs" : "Readers";
 
-    for(const device of modelDevices) {
+    // We update the name of the controller that we show users once we've connected with the controller and have it's name.
+    if(isController(device)) {
 
-      // Create a row for this device.
-      const trDevice = document.createElement("tr");
+      device.sidebarGroup = "controllers";
 
-      trDevice.classList.add("m-0", "p-0");
+      const activeController = [...document.querySelectorAll("[data-navigation='controller']")].find(c => c.getAttribute("data-device-serial") === controller.address);
 
-      // Create a cell for our device.
-      const tdDevice = document.createElement("td");
+      if(activeController) {
 
-      tdDevice.classList.add("m-0", "p-0" , "w-100");
-
-      const label = document.createElement("label");
-
-      label.name = device.serialNumber;
-      label.appendChild(document.createTextNode(device.alias ?? device.display_model));
-      label.style.cursor = "pointer";
-      label.classList.add("mx-2", "my-0", "p-0", "w-100");
-
-      label.addEventListener("click", () => ui.featureOptions.showDeviceOptions(device.serialNumber));
-
-      // Add the device label to our cell.
-      tdDevice.appendChild(label);
-
-      // Add the cell to the table row.
-      trDevice.appendChild(tdDevice);
-
-      // Add the table row to the table.
-      ui.featureOptions.devicesTable.appendChild(trDevice);
-
-      ui.featureOptions.webUiDeviceList.push(label);
+        activeController.textContent = device.host.hostname;
+      }
     }
   }
+
+  return devices;
 };
 
 // Only show feature options that are valid for the capabilities of this device.
@@ -216,7 +179,9 @@ const validOption = (device, option) => {
 // Only show feature option categories that are valid for a particular device type.
 const validOptionCategory = (device, category) => {
 
-  if(device && (device.display_model !== "controller") && !category.modelKey.some(model => ["all", device.display_model].includes(model))) {
+  if(device && (device.display_model !== "controller") && (
+    !category.modelKey.some(model => [ "all", device.display_model ].includes(model)) ||
+    (category.hasCapability && (!device.capabilities || !category.hasCapability.some(x => device.capabilities.includes(x)))))) {
 
     return false;
   }
@@ -227,41 +192,47 @@ const validOptionCategory = (device, category) => {
 // Show the details for this device.
 const showAccessDetails = (device) => {
 
+  const deviceStatsContainer = document.getElementById("deviceStatsContainer");
+
   // No device specified, we must be in a global context.
   if(!device) {
 
-    document.getElementById("device_model").classList.remove("text-center");
-    document.getElementById("device_model").colSpan = 1;
-    document.getElementById("device_model").style.fontWeight = "normal";
-    document.getElementById("device_model").innerHTML = "N/A";
-    document.getElementById("device_mac").innerHTML = "N/A";
-    document.getElementById("device_address").innerHTML = "N/A";
-    document.getElementById("device_online").innerHTML = "N/A";
+    deviceStatsContainer.innerHTML = "";
 
     return;
   }
 
-  // Populate the device details.
-  document.getElementById("device_model").classList.remove("text-center");
-  document.getElementById("device_model").colSpan = 1;
-  document.getElementById("device_model").style.fontWeight = "normal";
-  document.getElementById("device_model").innerHTML = device.model ?? device.display_model;
-  document.getElementById("device_mac").innerHTML = device.mac.replace(/:/g, "").toUpperCase();
-  document.getElementById("device_address").innerHTML = device.ip;
-  document.getElementById("device_online").innerHTML = device.is_online ? "Connected" : "Disconnected";
+  // Populate the device details using the new CSS Grid layout. This provides a more flexible and responsive display than the previous table layout.
+  deviceStatsContainer.innerHTML =
+    "<div class=\"device-stats-grid\">" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">Model</span>" +
+        "<span class=\"stat-value\">" + (device.model ?? device.display_model) + "</span>" +
+      "</div>" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">MAC Address</span>" +
+        "<span class=\"stat-value font-monospace\">" + device.serialNumber + "</span>" +
+      "</div>" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">IP Address</span>" +
+        "<span class=\"stat-value font-monospace\">" + device.ip + "</span>" +
+      "</div>" +
+      "<div class=\"stat-item\">" +
+        "<span class=\"stat-label\">Status</span>" +
+        "<span class=\"stat-value\">" + (device.is_online ? "Connected" : "Disconnected") + "</span>" +
+      "</div>" +
+    "</div>";
 };
 
 // Parameters for our feature options webUI.
 const featureOptionsParams = {
 
+  getControllers: getControllers,
   getDevices: getDevices,
-  hasControllers: true,
   infoPanel: showAccessDetails,
   sidebar: {
 
-    controllerLabel: "Access Controllers",
-    deviceLabel: "Access Devices",
-    showDevices: showSidebarDevices
+    controllerLabel: "Access Controllers"
   },
   ui: {
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebridge-unifi-access",
-  "version": "1.9.1",
-  "displayName": "Homebridge UniFi Access",
+  "version": "1.10.0",
+  "displayName": "UniFi Access",
   "description": "Homebridge UniFi Access plugin providing complete HomeKit integration for the UniFi Access ecosystem with full support for most features including autoconfiguration, motion detection, multiple controllers, and realtime updates.",
   "author": {
     "name": "HJD",
@@ -55,17 +55,17 @@
   },
   "main": "dist/index.js",
   "dependencies": {
-    "@homebridge/plugin-ui-utils": "2.0.2",
-    "homebridge-plugin-utils": "1.18.0",
-    "unifi-access": "^1.3.0"
+    "@homebridge/plugin-ui-utils": "2.1.0",
+    "homebridge-plugin-utils": "1.29.3",
+    "unifi-access": "1.5.0"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "4.4.0",
-    "@types/node": "22.15.23",
-    "eslint": "9.27.0",
-    "homebridge": "1.9.0",
+    "@stylistic/eslint-plugin": "5.5.0",
+    "@types/node": "24.10.0",
+    "eslint": "9.39.1",
+    "homebridge": "1.11.1",
     "shx": "^0.4.0",
-    "typescript": "5.8.3",
-    "typescript-eslint": "^8.33.0"
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.46.3"
   }
 }