I’ve been working through some fairly substantial front-end refactoring of Emoncms with the goal of increasing consistency across user interface components with the view to making future development easier. I have also been updating key dependencies such as Flot Charts and Vue.js and removing deprecated dependencies like Moment.js and a number of custom UI component scripts accumulated over the years.
Initially, I had hoped to replace Bootstrap 2, which is now quite outdated, with a fresh design. However, I’ve had to hold that change back for a little while longer. I did the classic thing of trying to refactor too many things at once and so I decided to take a step back to push forward with releasing the mostly javascript focused changes first.
These changes are now available in the master branches ready for testing:
- Emoncms core v11.15.3
- Graph module: v3.2.1
- App module: v3.2.1
- Dashboard module v2.5.1
- Device module: v2.4.0
New feed and input list implementations
Both input and feed lists have filter/search option, implementation is now much faster.
Under the hood this now uses a modern css grid, vue js 3 and resize observer to do the full variable responsive column hiding for different screen sizes.
There caret icon now animates nicely rotating 90 degrees as you expand/contract the nodes.
Feed engines and intervals have nice badge styles.
Multi selected by node, same functionality as we always had on the input list, now works the same way for both input and feeds pages. Feed and input rows highlight blue when selected. Select count in controls bar.
Graph module rewrite
- A complete rewrite of the javascript code to use vue.js v3.
- Uses the latest version of Flot v5.1.0, now maintained by Kevin Burke GitHub - kevinburke/flot: Attractive JavaScript charts for jQuery · GitHub - jquery is no longer a dependency, works well with vue.
- New card based UI css and focus on trying to clean up the controls - still more work to be done here with the feed config and stats table in particular.
Device module
Now uses the same css grid + vue.js 3, group list implementation used for the input and feed pages. Removes the use of the older table.js code.
Dashboard module
Dashboard configuration/list page now implemented using vue.js v3, no longer uses older custom grid.js code - but functionally identical.
Apps, Schedules, Accounts.
There are also smaller changes to other modules for compatibility.