Front-end development on UI settings

[Flix6x]

The task is to make one of the editable text fields on our asset page into a button activated modal.

Steps:

0. Checkout the FlexMeasures code from Github to your PC.
1. Install Docker.
2. Build the development stack (docker compose build) and run it (docker compose up), see our documentation here.
3. If you finish this tutorial and then point a browser to http://localhost:5000/assets/3 (username is toy-user@flexmeasures.io, password is toy-password), you should see the toy battery schedule.
4. Now to actual code adaptation. In the bottom left on the asset page, there is an editable text field with Other attributes (JSON), which is currently too small to fit the text. I'd like this to become a button that opens up a modal, in which the text field can be edited. For this, you should find the relevant place in the code where the asset page is defined (hint: we work on a UI template with CRUD functionality). Then make the change.
5. After re-building and re-running the docker compose stack, you should be able to see your revised asset page. To test whether the editing still works, you can add a sensors_to_show attribute to the JSON string in the Other attributes (JSON) field, with [3, 2] as its value, and save the asset, to see a second chart is loaded showing prices (from sensor 3) next to the battery charging (from sensor 2).

Bonus: show the JSON string in the modal as a JSON accordion.

[nhoening]

Attributes are now actually editable