New UI

[whyman]

There is an appetite for a modern UI, its high on the wish list.

In terms to technologies ideally for simplicity I would like a SPA that has no compilation requirement, BS4 is ideal, and uses jquery so perhaps that would be enough in terms of libraries for this case.

[elmodaddyb]

So far I have a simple UI running using the following:

• HTML 5
• jQuery 3.x
• Bootstrap 4

Server side is mocked through JSON responses based on the existing /content/interface

The app only supports login authorization at the moment. Once there is a substantial implementation, I can push a mock version to PCF for demonstration.

[whyman]

Any progress?

[elmodaddyb]

@v00d00 - I think I found a solution to the SessionManager.timerNofity mutex issue. This was holding up progress in getting responses from the server for front-end development. I should have a pull request for timer issue in the next day or two. Then likely be able to make progress on UI side.

A good MVP for review???

1. Add build flag -DWITH_NEW_WEBUI=1 to publish the new web UI.
2. Login/Logout
3. Show Database Tree
4. Show File system Tree

This could help to get some feedback on the code and user interface.

Let me know if you have suggestions. If anyone else has made progress on the UI don't wait for me!! 🥇

[elmodaddyb]

I made light progress on the infrastructure for the New UI.

https://github.com/elmodaddyb/gerbera/tree/jquery/gerbera-web

Includes, specs and e2e tests.

Capability - Login/Logout

** Next Task ** - Load the DB tree...this might take some time depending on how much can be adapted from the existing tree system.

[elmodaddyb]

Hello, I was able to get login/logout working consistently. Made progress on the tree view display, showing a simple tree view using bootstrap-treeview.

Updating to the newer frameworks is removing a lot of the boiler plate code in the current UI dealing with DOM manipulation.

Let me know what you think about using bootstrap-treeview versus re-using the nano-tree implementation?

[whyman]

I have no desire to keep any of the old code bootstrap treeview that's good to me! Especially like the counts against each item.

[elmodaddyb]

Hello,

A brief status on the jquery-based UI. I integrated bootstrap-treeview and the following items seems to be stable:

• Login/Logout
• Load initial database tree (parentId=0)
• Load initial filesystem tree (parentId=0)

The next tasks should be done rather soon

• On item selected, show child items
• On item expand, load child nodes

Here is the UI part of the branch so far:

https://github.com/elmodaddyb/gerbera/tree/jquery/gerbera-web

Any direction, suggestions, ideas, recommendations??

Only a few more items to get a MVP with Login/Logout & read-only.

[whyman]

Keep up the good work!

[elmodaddyb]

Sorry for the delay on this, I was disappointed when I found out 'bootstrap-treeview ' didn't support incremental loading of the tree. Killed the momentum I had.

I think I'll try a different approach and get something demonstrable in the next few days.

[whyman]

Great to hear you are still working on it!

[elmodaddyb]

I ended up dropping bootstrap-treeview in favor of a custom jquery widget. It's a lot simpler and should allow for the capability needed by the gerbera web ui. Hopefully should have a MVP cleaned up enough for demo in a few days. I'll post back as I progress.

[elmodaddyb]

Here's the progress so far on the new UI. Simple bootstrap basic theme, jQuery + JSON, with login in the header. Still some work needed to load child folders dynamically. This implementation requires no code changes on the server-side, only client changes.

Feedback encouraged.