UI improvements for the zigbee2mqtt integration

Development
1

Hello everyone,

I’d like to know whether it would be interesting and feasible to improve the display of devices in the Zigbee2MQTT integration.

Several points:

  • DEVICE section: the search field is cumbersome to use — basically I don’t have time to start typing before it already starts filtering the devices and it tends to skip some letters that I type… others may have noticed this too. It’s as if there needed to be a bit more « latency » between the typed letters and the filtering.

  • DISCOVERY section: would it be possible to hide by default the devices already added to Gladys? With, at worst, a button to show them (I think that exists somewhere… in the LAN integration, no?) because on my side, especially on mobile, the list is so long that it’s a chore to scroll so much.

  • In the same scrolling issue when you have many devices, is it possible to add a small arrow to go back to the top of the page with a single click?

Those are my suggestions — over to you, dear developers, to tell me whether this is feasible for you! :wink:

2 Likes
2

Thanks for the feedback! For the first point, that’s clearly something that could be a GitHub issue, it’s not normal

For the second point, I’d like to get more feedback to know if this view is shared by everyone :slight_smile:

For the third point, why not!

At the moment I’m the only one on Zigbee since Alex became a dad, so it’ll probably be me who takes care of that.

1 Like
3

Ok great, so we’re waiting for other feedback! :+1:

4

Totally agree with the points raised by @guim

5

Ok I think these points need to be reported somewhere otherwise they’ll be forgotten :slight_smile:

My opinion:

  • For point 1, create a GitHub issue (in English, if possible with a video to reproduce the bug)
  • For point 2, GitHub issue as well. A short text will suffice
  • For point 3, GitHub issue as well.

Put a link in each issue to this thread for archiving.

I can’t guarantee it will be handled in the short term, I’m the only one working on the Zigbee integration right now (looking for a maintainer if anyone happens to see this…) and there are a lot of requests!

1 Like
6

Okay, I’ll take care of it as soon as I have a bit of time.

7

It’s done :+1: I hope I did it right!!

8

Thanks! I’d like you to put a link to this thread in each issue.

For videos, in general try to put them in mp4 format — it lets you view the video directly on GitHub instead of having to download it… :slight_smile:

9

Everything is done! :wink:

10

Hello, I did some development between two naps to filter the already existing z2m devices (cc @VonOx).

The test image (will be ready in 1 hour) is atrovato:z2m-filter-devices.

Thanks for your feedback (I admit I did the development blindly, drawing inspiration from the lan-manager feature).

2 Likes
11

I have an error when loading the Zigbee Discovery page

actions.js:42 Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
    at Object.setDiscoveredDevices (actions.js:42:49)
    at Object.setDiscoveredDevices (index.js:60:22)
    at c.componentWillMount (index.js:22:16)

I think incomingDevices is empty at that moment

1 Like
12

Thanks @cicoub13 for your feedback!
I’m generating a new image with the fix for incomingDevices = undefined; it should take about 6 minutes.

13

The page loads.
On mobile, it’s a bit cramped.

Screenshot_20231003-220149
Screenshot_20231003-2201491440×3120 301 KB

The button doesn’t work. I’ll test it on a computer tomorrow to give you more details.

1 Like
14 
props.js:153 Uncaught TypeError: this.l[(e.type + false)] is not a function
    at HTMLInputElement.x (props.js:153:20)

I think you forgot to add setDiscoveredDevices to the props on line 50 in index.js

15

Actually, on the onClick I hadn’t added the toggle function, it’s fixed, as well as the display.

The corrected image is available on Docker.

Thanks again @cicoub13 <3

1 Like
16

It works perfectly :+1:

1 Like
17

Great, I’ve put the PR up for review.

2 Likes
18

@pierre-gilles the PR to add the filter for devices that have already been added:

The following 2 issues are fixed:

2 Likes
19

Thanks for the PR!

It looks good to me, I just have one small comment:

20

Thanks for the fixes @AlexTrovato !

Be sure to leave me a message on the forum next time when it’s fixed,

3 Likes