Controller
==========

The controller component represents the HMI of the actual controller used
in the simulation.

It generates an interface consisting of buttons, graphs and other
sub-components, based on a JSON configuration, which is delivered via Cloe's
JSON-Api.

Props
-----
The props of the controller component are:

- Cloe host (``host: string``)
- Connection state (``connected: boolean``)
- Simulation time (``simTime: number``)
- Controller Api (``controller: { id: number, endpointBase: string }``

Fetch the UI Configuration
--------------------------

The ``render`` method of the controller component checks whether the
JSON configuration is loaded. This is indicated by the boolean value
of ``uiSpecificationLoaded``. In case it's not loaded, ``render``
continues with loading the configuration. This is done with
``fetchUIConfiguration``.

This method fetches the UI configuration from the Cloe JSON-Api.
The endpoint used for this consists out of ``props.host`` +
``props.controller.endpointBase`` + ``"/ui"``.
The fetched UI configuration consists out of four parts:

- The controllers name
- The definitions of the HMI elements
- The layout in which the elements will be arranged
- The Api endpoint paths from which Cloe UI will fetch all relevant data

These Information will be stored in ``this.name``, ``this.elements``,
``this.layout`` and ``this.paths``.

Update Data
-----------

In case the specification is loaded already, ``render`` will continues
with ``updateData``. This method fetches all JSON endpoints which are
defined in ``this.sources``. This object includes all data endpoints of all
specified HMI elements and was filled during the loading process of the
elements.
The fetched data will also be stored in ``this.sources``.

Generate And Render JSX For HMI
-------------------------------

After the data was updated, ``render`` will continue with
``generateJSXComponent``. This method creates valid JSX Code for each
element stored in ``this.elements``, out of the elements specification,
the data belonging to the element and if need be ``props.simTime``.

Finally, ``renderController`` creates the complete JSX for the controller,
out of ``this.layout`` and the element-JSXs.
This JSX is returned by ``render``.