Context: The client wants a dashboard system that enables the admin to set up a control panel for their clients. This control panel allows clients to manage a range of sensors for their smart home system using various widgets displayed on the panel. These widgets include an Input Box, a Select Box, and a Switch, which clients can use to control different aspects of their smart home system.
Project Description: The client requires a new Grafana plugin in ReactJS that makes the system described above possible. This plugin should enable the admin to enter the panel data into a form table:
- The system’s environment name (an Input Field that allows autocomplete of list of possible environments);
- The hub name (an Input Field that allows autocomplete of list of possible hubs);
- And a list of sensors where each sensor entry should include:
- The Sensor Name (an Input Field with autocomplete from an existing list);
- Sensor Variable Name (an Input Field with autocomplete from an existing list);
- Sensor Type (an Option Box with three possible options: Input Field, Switch, or Select Box).
- If the type is Option Box, the plugin should display an Input Field for the admin to enter available options.
- Finally, the admin should be able to enter an Alias Name (an Input Field) to store the Sensor Name for later display.
- A save Button that allows the admin to save the entry into the panel to his client;
After submitting the form data for the panel, the panel should be available on the client side. For each sensor entry, a widget should be created that allows the client to control the smart system. The widgets should be presented in a responsive panel and display the Alias Name. Depending on the type of widget, an Input Field, a Select Box, or a Switch should be presented.
Apply Today!
