WEB-2 Start/stop node. Current node/blockchain status. Transfer tiles

[nicosantangelo]

With the new additions the dashboard looks like this:

While the dashboard is functional in it's current form, it's lacking a couple of features which will make the UX a lot better.

For example

• We don't have a good way to send notifications in case a request fails (or succeeds)
• The information is static, meaning that the mining speed and tile list will stay the same until a page refresh
• If the user has a lot of tiles, it could choke the UI

Let me know if you want me to address any (or all) of those in this PR. I think that the code it's at a good point to be transformed to use a framework (it has <200 lines of code and little HTML).

I was thinking of using React (with redux I think) to do so, but I'm open to suggestions!

That's all!

[maraoz]

Nice work @NicoSantangelo !

[martriay]

Feedback:

• It's not "start/stop node" but "start/stop miner"
• Actually, I'd set the on/off mining as a toggle and replace the informative sentence into an easy-to-read table
• I also find this sentence not quite needed:

  Welcome. From this page you will be able to manage your node and see your mined tiles. You can send rpc calls to the node and see the result here

• As there is no more hash rate next to the Tiles title, i'd move the tile count next to it
• I can't find the transfer tile button

[nicosantangelo]

• It's not "start/stop node" but "start/stop miner"

👍

• Actually, I'd set the on/off mining as a toggle and replace the informative sentence into an easy-to-read table

By a toggle you mean a native radio element or a styled toggle button like:

• I also find this sentence not quite needed:

👍

• As there is no more hash rate next to the Tiles title, i'd move the tile count next to it

Because we now show the detailed count as shown on the first image, and the transfer button besides Tiles I don't think I will fit

• I can't find the transfer tile button

The first state of the page looks like this:

And after it finishes making the necessary requests y should look like the first image, with the transfer button next to Tiles, here:

Could it be a cache problem?

[martriay]

@NicoSantangelo I was thinking in that same toggle you pasted.

Could it be a cache problem?

Mmmh, tried pulling the repo, re-building the miner and opening the web ui on incognito but i'm still getting this:

[nicosantangelo]

@martriay I managed to reproduce it by removing-refetching the branch. There was a problem with the last rebase, which left two functions with the same name on main.js. The last one on the file was outdated and overrode the newer one.

It should work now!

[martriay]

@NicoSantangelo it works now! But the main feedback remains:

• Toggle and wording (miner instead of node)
• Table instead of long sentence for mining specs

[eordano]

I guess this is more of an epic, but this is what I would use for this admin interface:

https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html

So maybe we can just merge this?

[nicosantangelo]

I've updated the missnamed node action to miner. Let me know if you want me to try to add the table and toggle @martriay suggested or if we're going to redesign the dashboard (in another issue) like @eordano proposed.

Also, just in case you missed it, we need to discuss the points mentioned on the first post eventually:

• We don't have a good way to send notifications in case a request fails (or succeeds)
• The information is static, meaning that the mining speed and tile list will stay the same until a page refresh
• If the user has a lot of tiles, it could choke the UI

(...)

I think that the code it's at a good point to be transformed to use a framework (it has <200 lines of code and little HTML). I was thinking of using React (with redux I think) to do so, but I'm open to suggestions!

[martriay]

• +1 to react, go for it
• We don't even have a mock of the design, so please go on with the toggle and table
• Static info, edge cases (too many tiles) and non-response is ok in this instance

[nicosantangelo]

@martriay I added the table and changed the node references to miner. I'm having troubles placing the toggle thought.

• First I came up with this:
  

  

• From there, adding the toggle wasn't that easy, here it's my progression:
  

  

  
  

  

  
  

  

  
  

  

  
  

  

  
  

  

Let me know if you like any of them or if you have any other ideas and I'll update the branch :) The last screen is the current version

CAVEAT: Multiple vertical scrolls. A solution can be re-ordering the boxes