evcc-io
Config UI: visualize Messaging
🖼 visualize messaging section 💪 use TypeScript 🔕 add toggle to enable or disable specific events
TODO:
- [ ] events: how to handle variables in title/message (?)
- [ ] services: removing all services does work in ui but not in backend
- [ ] testing
Events:
Add messaging:
Messaging:
\cc @naltatis
Hi @Maschga, here a few considerations regarding the layout of this modal. We have a lot of different things to show here.
- less tabs: on mobile screens the tabs are wrapping which becomes confusing. therefore I'd recommend we organize this in two tabs:
Events,Services. Similar to the existing data structure. Maybe adding a number-indicator for better overview of the enabled services. - events: I've attached a screenshot/mock illustrating how enabling/disabling of specific events could look like. The switch + disable/grayout pattern is already used similarly on the "Issues" page. Technically it's a little tricky since a disabled status does not exist in our data structure yet. We could work around it but this would essentially mean, that the users will lose custom message text once they disable and save them. That's why I'd suggest extending the event data structure and add an optional (non-breaking)
disabledattribute. All other options (forcing the user to delete title/msg, storing disabled texts in local-storage) are messy. - services: as said initially, I'd combine the services into one tab. This functionality did not work on my machine. maybe because I updated the branch before. not sure. My expected for would be: User can click on a "add service" button, select the desired service type (mail, telegram, ...). This will add a service-block with form. User can delete this with a delete button. This is very close to our data structure. For the "service selection" we could use a dropdown button.
This looks very promising. Thanks for your work so far and sorry for my delayed response.
@naltatis I'm done so far. The user interface is basically complete, and the tests are written.
services: removing all services does work in ui but not in backend
I noticed this bug, which I haven't been able to figure out yet. For example, if you create two services in the UI, save them, and then delete them again, unfortunately this is not saved in the backend as an empty services array; instead, both services reappear. However, if you delete only one of the two services and leave the other one there and save it, this is also saved in the backend, and only one service is correctly displayed in the UI afterwards. It would be great if you could take a look at it.
events: how to handle variables in title/message
There is also the question of how best to display the variables for the events in the UI. Perhaps we shouldn't try to solve everything at once, but rather finish the UI first and then think about it later. A link to the documentation might be sufficient for now.
And last but not least, I'm looking forward to your PR. :-)
For example, if you create two services in the UI, save them, and then delete them again, unfortunately this is not saved in the backend as an empty services array; instead, both services reappear.
Looks like a json marshaling issue. I'll have a look at it.
@Maschga thanks for the update! Haven't tested the UI yet. Only went through the code changes.
FYI: Updated description, screenshots and TODO.
@naltatis: I'm done with your review. 🙃 Unfortunately, there are a lot of commits again.
For the custom service, I had to add a library to get the conversion from string to object and vice versa to work properly, and I added a button because otherwise this conversion kept sorting the keys alphabetically, which caused the lines to jump around.
Regarding TODO: I don't know if it's enough for the services to work that the Go-backend doesn't log any errors, but I think each service should be tested manually. What do you think?