Warn user in WebUI of unsaved changes

[proddy]

Feature to prompt the user of unsaved changes before navigating off a page.

Many times I've gone into the Customization page, make some changes and then forget to click the 'SAVE' button, so have to go back and do it all over again. Maybe it's just me :)

[proddy]

@MichaelDvP said in #891 (comment)

Only a few times after the customization was introduced. First i was confused by the save-button in setting dialog. For me i renamed it to "update" and each time i see the update-button i remember to click save. (But this only works for me).

which got me thinking. I checked how for example my Unifi network Web interface does this. If you make any changes then an UPDATE and CANCEL button appear like:

this is a nice approach.

[MichaelDvP]

Or just a messagebox on top or bottom of page if something i changed.
BTW: the edit-dialog cancel button only resets name/min/max, but not masks that are changed. I've tried to change using deviceEntities.minstead of de.m , but seems i did not understand the algorithm of masking correctly. Please check.

[proddy]

BTW: the edit-dialog cancel button only resets name/min/max, but not masks that are changed. I've tried to change using deviceEntities.minstead of de.m , but seems i did not understand the algorithm of masking correctly. Please check.

I'll take a look

[proddy]

I'll take a look

it was too complicated to adjust so I just took it out. It was always a 'nice to have' to show the mask icons on the edit screen but just duplicating the functionality. Well, that's my excuse anyway ;-)

[proddy]

In the tec build, I've

• renamed all SAVE to UPDATE in the Dialog boxes, and 'APPLY UPDATES (x)' in the Form screens, using the UniFi webUI as a reference (they're a billion $ company so must be doing something right)
• I have prototype code for navigating off the form when the form is Dirty, but I need to first refactor the routing to use createBrowserRouter https://reactrouter.com/en/main/routers/picking-a-router which came in router-dom 6.4

[proddy]

I noticed in the Customization page there's a bug when it uses the old name, so need to fix that first

[MichaelDvP]

Works good and looks nice, but after saving the changes the old-status is not updated, i have to leave the page and reload it to set this setting back.

[MichaelDvP]

Already found, insert here:

EMS-ESP32/interface/src/utils/useRest.ts

Line 56 in b218bf1

setData(response.data);

setOrigData(response.data);
and it works as expected.

[proddy]

great, I'll add and test this weekend when I'm back home. I didn't see this behaviour when running standalone (yarn run standalone)

[proddy]

Works good and looks nice, but after saving the changes the old-status is not updated, i have to leave the page and reload it to set this setting back.

I couldn't reproduce this? If I make a change, apply it, the form is updated. Can you give an example for me to try out?

[MichaelDvP]

Go to settings, change a setting, let's say activate log hexadecimal

• the save button appears with one change,
• click save, the button disappears, so far all ok
• without leaving the page try to set back: deactivate log hexadecimal, the button does not appear
  (if you activate log hex, e.g. the saved setting, the button appears wrongly)

[proddy]

bingo! got it, thanks @MichaelDvP