(simatec) Resposive Design added

[simatec]

No description provided.

[asgothian]

Testing... please wait :)

Configuration interface looks good (index_m.html).
Tab does not look good (see images below)

Also tested on iPad and Iphone with similar issues.

There is a sweet spot on very small desktop displays where the rendering is kind of ok, but overall, I would request changes on the tab situation.

[simatec]

OK i fix this. My test was without devices

[simatec]

Can you take some full screenshots of the problems?
Preferably the following variants from the developer console:

1. desktop
2. ipad mini
3. Iphone 12 Pro

[asgothian]

I will see what I can do.

[simatec]

Here on my Dev-iob

Tab Desktop:

Tab Ipad Mini

Tab Iphone Pro 12

Config Desktop

Config IPad Mini

Config IPhone Pro 12

[asgothian]

Screenshot from Firefox with

Iphone 11 Pro

iPhone 12 pro

IPad

IPad Mini

Full HD

[simatec]

Which Admin version are you running? The changes are only available as of 7.2.6

[asgothian]

7.1.5 here. The changes do need to be functional on 7.1.5 too, else we have to shelve them until 7.2.6 goes into stable.

[simatec]

Yes, the changes are only available from Admin v7.2.6. This is in the Latest. So you could also go to the Latest.

But it's your decision... I'll take another look at the devices.

[asgothian]

thanks for all the help. I really appreciate it.

I'll discuss it with @arteck, and we either pull it to the current GitHub version or make a branch on the official repo which we can then merge in later, so you won't have to deal with it either way.

A.

[simatec]

Can you test it with Admin v7.2.6 and give me feedback? So that I know what still needs to be adjusted.

I don't currently have another Zigbee stick. Mine only runs productively

[asgothian]

I updated the admin to 7.2.6. Unfortunately, the screenshots remain the same. The issue is present with 7.2.6 as well. Update: that is not actually true. WIth safari, the screenshots remain about the same. With Firefox, things are unusable. I cannot test with Chrome as I do not have that installed and am unwilling to install it due to the deep google integration Attached are a few of the worst screenshots (all from the responsive design console in firefox) A screenshot omitted means that it looks ok and is usable as is <img width="1306" alt="Screenshot 2024-10-22 at 09 35 59" src="https://github.com/user-attachments/assets/38e60a8a-f569-44f0-aa68-7acd4fc6b5f3"> <img width="765" alt="Screenshot 2024-10-22 at 09 36 27" src="https://github.com/user-attachments/assets/76d732eb-afd7-490c-9739-a3892a8b6475"> <img width="754" alt="Screenshot 2024-10-22 at 09 37 02" src="https://github.com/user-attachments/assets/dfc35a90-e571-4de6-988c-5863a0122c60"> <img width="743" alt="Screenshot 2024-10-22 at 09 37 17" src="https://github.com/user-attachments/assets/6e1dd4e4-3683-4321-a092-dc5b91716b42"> <img width="997" alt="Screenshot 2024-10-22 at 09 38 08" src="https://github.com/user-attachments/assets/d7d051bc-50ab-4535-ae49-33d85ec0ff7b"> <img width="886" alt="Screenshot 2024-10-22 at 09 38 25" src="https://github.com/user-attachments/assets/0365b46f-1d44-4c4b-a7e8-4ed602fe3f72">

[simatec]

Thanks for the test... Except for Devices, it looks pretty good I think. I'll think about how I can simulate the devices without a stick.
Do you have any idea how I can create any virtual devices for the test?

[asgothian]

As long as you have a coordinator you can use to start the adapter, there are two possible paths for you - one with patching admin.js, the other without.

In theory, you should be able to just copy in the shepherd.db from your live system, and start the adapter with the checkbox "Den Start des Adapters mit inkonsistenter Konfiguration erzwingen(nicht empfohlen)." checked. It will generate all the devices listed in the database, but not be able to communicate with any.

with patching admin and without copying any files: patch admin.js in one place:

• patch showDevices (line 500ff): insert the following code at the top of the function, right after the definition of html

    let dev = {};
    dev.common = {}
    dev.common.name = 'TG1';
    dev.common.type = 'group';
    dev._id='abc';

html += getGroupCard(dev);
html += getGroupCard(dev); 
html += getGroupCard(dev); 
html += getGroupCard(dev); 
html += getGroupCard(dev); 
html += getGroupCard(dev); 

Without being able to start the adapter I see no chance to test this.

Getting virtual devices is easy enough - getting them to show with the adapter not running is not so easy, unfortunately. I am not sure how that would be done.

PS: I did another test. If you patch the showDevices function in the given manner, you can actually get the devices to show even if you just start the adapter with no Koordinator and no valid configuration. For this to work, you need a second patch: in the function getDevices, (line 755 ff) you need to also call showDevices if the sendTo returns an error.

[asgothian]

Sorry for the piecemeal information. I made a number of tests, and had an inconsistent environment in the meantime. Best option for testing is a patched admin.js:

patch show Devices (line 500ff) to include

    let dev = {};
    dev.common = {}
    dev.common.name = 'TG1';
    dev.common.type = 'group';
    dev._id='abc';

html += getGroupCard(dev);
html += getGroupCard(dev); 
html += getGroupCard(dev); 
html += getGroupCard(dev); 
html += getGroupCard(dev); 
html += getGroupCard(dev); 

and getDevices (line 755+)
to be

function getDevices() {
    getCoordinatorInfo();
    sendTo(namespace, 'getDevices', {}, function (msg) {
        if (msg) {
            if (msg.error) {
                showMessage(msg.error, _('Error'));
                showDevices();
            } else {
                devices = msg;
                showDevices();
                getExclude();
                getBinding();
            }
        }
    });
}

this should give you 6 devices loo

king like this:

[simatec]

I have fixed the problems... Please check if it works for you.

[asgothian]

It works now - merged