Add brightness to group switch case

packages/api/routes/groups.ts

@@ -4,7 +4,7 @@
 import express, { Request, Response, Router } from "express";
 import { Zigbee2MqttService } from "../zigbee2mqttService";
 import { ApiError } from "./api";
-import { range } from "../utils";
+import { nextUnused, range } from "../utils";
 import { type Group, Scene } from "@starlight/types";
 
 const router = express.Router();
@@ -277,14 +277,10 @@ export function groupsRouter(zigbee2mqttService: Zigbee2MqttService): Router {
       return res.status(404).json({ error: ApiError.NameInUse });
     }
 
-    let sceneId: number = 0;
-    const idRange = range(0, 255);
-
-    if (group.group.scenes.length !== 0) {
-      const usedIds = new Set(group.group.scenes.map((scene) => scene.id));
-      const feasibleIds = idRange.filter((value) => !usedIds.has(value));
-      sceneId = Math.min(...feasibleIds);
-    }
+    let sceneId = nextUnused(
+      group.group.scenes.map((scene) => scene.id),
+      range(0, 255),
+    );
 
     // transition on scenes can only be set with 'scene_add', so if we have the
     // property in the body we should first call createOrUpdateScene with just

packages/api/utils.ts

@@ -51,3 +51,15 @@ export function range(
     .fill(start)
     .map((_, index) => start + index * step);
 }
+
+export function nextUnused(items: Array<number>, range: Array<number>): number {
+  let nextUnused: number = 0;
+
+  if (items.length !== 0) {
+    const usedNumbers = new Set(items);
+    const feasibleNumbers = range.filter((value) => !usedNumbers.has(value));
+    nextUnused = Math.min(...feasibleNumbers);
+  }
+
+  return nextUnused;
+}

packages/ui/src/components/GroupSettings/GroupSettings.tsx

@@ -2,14 +2,18 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { useState, useEffect } from "react";
+import { useLocation } from "wouter";
 
 import {
   mqttStateToBoolean,
   booleanToMqttState,
   updateGroupState,
+  percentage,
 } from "../../utils/deviceUtilities";
-import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
+import Button from "../Button/Button";
 import EditableText from "../EditableText/EditableText";
+import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
+import Slider from "../Slider/Slider";
 import Toggle from "../Toggle/Toggle";
 
 const backend = import.meta.env.VITE_API_URL ?? "";
@@ -26,15 +30,36 @@ function GroupSettings(props) {
       .then((data) => setGroupSettingsState(data.data));
   };
 
+  const [location, navigate] = useLocation();
+
   useEffect(() => {
     fetchGroupState();
   }, []);
 
+  const deleteButton = (
+    <Button
+      text={"❌ Remove Group"}
+      onClick={() => {
+        const request = new Request(`${backend}/api/groups/${props.group.id}`, {
+          method: "DELETE",
+        });
+        fetch(request)
+          .then((res) => res.json())
+          .then((data) => console.log(data))
+          .finally(() => navigate("/groups"));
+        // we also want to refresh the groups list but this works for now
+      }}
+    />
+  );
+
   if (!groupSettingsState) return <LoadingSpinner />;
 
   const groupSettingsGenerator = (groupSettingsState, callback) => {
     const settingComponents = [];
 
+    // the API doesn't give us data yet about how we should transform the state
+    // values, so to get this working initially we can hardcode what we expect
+
     for (const setting in groupSettingsState) {
       switch (setting) {
         case "state":
@@ -51,11 +76,32 @@ function GroupSettings(props) {
             />,
           );
           break;
+        case "brightness":
+          settingComponents.push(
+            <Slider
+              key={"brightness"}
+              label={"Brightness"}
+              min={1}
+              max={254}
+              step={1}
+              value={groupSettingsState[setting]}
+              displayUnit={"%"}
+              displayValue={percentage(groupSettingsState[setting], 254)}
+              onChange={(event) => {
+                const newMqttValue = event.target.value;
+                updateGroupState(props.group.id, setting, newMqttValue).then(
+                  callback,
+                );
+              }}
+            />,
+          );
         default:
           break;
       }
     }
-    return settingComponents;
+
+    // i want "State" to be first, so here's a tiny hack
+    return settingComponents.reverse();
   };
 
   return (
@@ -75,8 +121,10 @@ function GroupSettings(props) {
           //   );
           // }}
         />
+        <p>{`${props.group.members.length} devices`}</p>
       </div>
       <div>{groupSettingsGenerator(groupSettingsState, fetchGroupState)}</div>
+      <div>{deleteButton}</div>
     </>
   );
 }

packages/ui/src/utils/deviceUtilities.ts

@@ -170,3 +170,6 @@ export const stringTidy = (string) => {
     .map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase())
     .join(" ");
 };
+
+export const percentage = (value, maxValue) =>
+  Math.floor((value / maxValue) * 100);

packages/ui/src/utils/transformers.tsx

@@ -8,10 +8,9 @@ import {
   miredToKelvin,
   stringTidy,
   updateDeviceState,
+  percentage,
 } from "./deviceUtilities";
 
-const percentage = (value, maxValue) => Math.floor((value / maxValue) * 100);
-
 export const numericTransformer = (
   feature,
   device,