Differentiate zones & rooms in UI

[BikeRanger]

The UI shows a "Rooms" column that includes rooms and zones mixed together. Current functionality is fine, but it would be more clear & helpful if rooms & zones were listed separately.

Solution could be as simple as a second area labeled "Zones" with the appropriate elements (/resource/zone/{id} in v2).

Ideally, the UI could be configured as either zones first or rooms first, as in the Hue mobile app. A zones/rooms toggle could also be an option, but it would be preferable to have both visible & accessible at once.

[JakobJFL]

Hi, yeah that is true. It was put together in a hurry so it's not perfect. You are welcome to make a PR. I sadly don't have time to work on it at the moment :/.

[mjeveritt]

Looking at https://developers.meethue.com/develop/hue-api/groupds-api/ it should be possible to distinguish between Rooms and Zones/etc based on the type field in API v1 . To get the basic functions you describe, it shouldn't be too difficult to fetch this info (not currently stored in

Hue-Browser-Controller/js/mainScript.js

Line 35 in f75e03b

let roomObj = {

) .

Then, a bit of copy-pasta to

Hue-Browser-Controller/js/dashboardSite.js

Lines 143 to 151 in f75e03b

	for (const room of this.rooms) {
	let lightsInThisRoom = [];
	for (const light of this.lights) {
	if (room.lightsInRoom.includes(String(light.id)))
	lightsInThisRoom.push(light);
	}
	lightsInThisRoom.sort(compare);
	allHtml += makeRoomSelecter(room.name, room.on, room.key, room.id, room.bri, lightsInThisRoom);
	}

to loop through Zones separate from Rooms, a bit of patching to the HTML div for a new heading ..

I might give this a try, see where I get too .. 😆