Espurna: Web enhancements suggestion

[zafrirron]

Thanks @xoseperez,
Espurna is a great work, thanks!

Some personal thoughts about possible web improvements...(I love to help with the development if needed)

1. General and Admin pages separation logic not clear...
2. Alexa integration on General page consideration..
3. Switches & actions on status page ...(shouldn't we put the buttons also on the switches page)
4. Switch / Relays Buttons naming conventions and clarity.
5. Switches schedules page (why not integrated on switches page)
6. Double click delay why on general page (shouldn't be on switched page?
7. Double click delay, should be separate for each button, why not add rest of delays (long? longlong?)
8. Add ability to change switch type from web (switch type can be changed from switch to pushbutton), this also goes for other settings, that could be configured/changed on run time.
9. Ability to set actions for dblclick, lngclick, lnglngclik from web (for each switch).
10. I added a proposed option to have switch button enhanced functionality (allow set actions based on number of toggles) this could be also set from the web interface...
11. Status page to show only number of switches, relays, sensors and enabled services...
12. external services (HASS, MQTT, DOMOTICZ, THINGSSPEAK...) move to single tabbed page accesses from menu by services link
13. The pages could be cleaned by adding small change to .hint css class that will enable "show" on click only.

[gn0st1c]

seconded.

web ui rework, ui friendliness is needed. there was an attempt here

getting rid of any bulky stuff (hint jquery) would be great as well.

[Misiu]

@gn0st1c agree on removing bulky stuff. Gulp is already used to build web interface stuff so it can be reused. Maybe Vue or something similar (light)?

[Tofandel]

I might give it a try to rewrite the interface with vue instead of jquery, that would reduce the size of the build of around half

No more space troubles for new features :rofl:

Just a question, it okay to drop support for older browser and use ES6 without babel polyfills to not increase the size?

[mcspr]

That would be great.
ES6 looks like a way to go (finally), no need to go through jquery helpers. It is also detrimental that it can't be used at all in the current ui, because of the specific html minifier used by the build script

Also note of https://github.com/xoseperez/espurna/issues/1132

[Tofandel]

I will try to start hopefully I have some time, it's gonna be a full rewrite of the interface/clean slate
I won't be able to port all features/functions though so I'm gonna do a skeleton at first and if anybody wants to help once I'm satisfied with the backbone of the vue app to insert all the inputs and reorganize the menu that would be great

Some adjustments on the backend side will be needed as well for some new options

[mcspr]

@Tofandel maybe we want a new issue tracking this? you can specify a todo list / things done so far

From a brief gitter discussion, the main reason we want to update WebUI is to:

• reduce size of the webui image, avoiding jquery and related modules (datatables for rfm69, wheelcolorpicker for lights). Vue is a good candidate for jquery removal. Colorpicker has an easy replacement (https://github.com/xoseperez/espurna/issues/1132). Should track Datatables replacement / alternative
• simplify UI management. Vue again is a good candidate, since we sometimes want to track and reference received data elsewhere, but the way it is done right now is by extracting html data from elements
• (maybe) simplify CSS styling, but that is probably a separate issue (see https://github.com/xoseperez/espurna/issues/455#issuecomment-362885532 @varungujjar)
• allow automated testing of UI / API (@tonilopezmr)

[Tofandel]

I made a WIP PR with the tasklist https://github.com/xoseperez/espurna/pull/1933
I will work on it on the weekends but as I said I don't have a ton of time so it may take a month or two to finish this