Add optionLabels (#120)

* Add requestHandler (fixes #119) (#125)

* Add optionLabels (#120)

* Updated generated HTML and docs

* Bump version

Co-authored-by: benklop <benklop@gmail.com>

docs/dashboard.md

@@ -109,7 +109,7 @@ Supported data types are: bool, uint8_t, int8_t, uint16_t, int16_t, uint32_t, in
 
 there are a few other specific fields. the `direction` field is mandatory, and `display` will show the items in the live dashboard whereas `control` will put the items as control inputs in the dashboard. For `display` items, `"display": "graph",` will turn them into a live graph, with the x-axis length in seconds defined by `"xaxis": 20`. For displayed floats, the field `digits` can be used to limit the number of digits shown.
 
-For `control` items, `"control": "select",` will turn them into a drop down menu, with the options defined as  `"options": [1, 2, 3]`.  
+For `control` items, `"control": "select",` will turn them into a drop down menu, with the options defined as  `"options": [1, 2, 3]`. In addition, you can specify `"optionLabels": ['one', 'two', 'three']` if you want the GUI to show more user-friendly labels in your drop down menu.
 
 For this example, the pre-build python script `preBuildDash.py` will generate the files `dash.h` containing the type definition. This should be fairly self explanatory and show how the JSON file is translated into a C struct.
 

gui/js/comp/ControlItem.js

@@ -97,8 +97,13 @@ export function ControlItem(props) {
         for (let i = 0; i < props.conditionalAttributes.options.length; i++) {
             if (data == props.conditionalAttributes.options[i]) {
                 isOption = true;
-            }             
-            options = <>{options}<option value={props.conditionalAttributes.options[i]}>{props.conditionalAttributes.options[i]}</option></>;            
+            }
+            let optionLabel = props.conditionalAttributes.options[i];
+            if (typeof props.conditionalAttributes.optionLabels[i] !== "undefined") {
+                optionLabel = props.conditionalAttributes.optionLabels[i];
+            }
+
+            options = <>{options}<option value={props.conditionalAttributes.options[i]}>{optionLabel}</option></>;                       
         }
 
         if (!isOption) {

gui/js/comp/DashboardItems.js

@@ -175,6 +175,7 @@ export function DashboardItems(props) {
 
                 case "select":
                     conditionalAttributes.options = props.items[i].options;
+                    conditionalAttributes.optionLabels = props.items[i].optionLabels;
                     break;
             }
 
@@ -213,8 +214,12 @@ export function DashboardItems(props) {
                 case "config":
                     if (inputType == "select") {
                         let options;
-                        for (let i = 0; i < conditionalAttributes.options.length; i++) {           
-                            options = <>{options}<option value={conditionalAttributes.options[i]}>{conditionalAttributes.options[i]}</option></>;            
+                        for (let i = 0; i < conditionalAttributes.options.length; i++) {  
+                            let label = conditionalAttributes.options[i];
+                            if (typeof conditionalAttributes.optionLabels[i] !== "undefined") {
+                                label = conditionalAttributes.optionLabels[i];
+                            }
+                            options = <>{options}<option value={conditionalAttributes.options[i]}>{label}</option></>;            
                         }
                         confItems = <>{confItems}
                             <p>

library.json

@@ -1,6 +1,6 @@
 {
     "name": "ESP8266 IoT Framework",
-    "version": "1.8.1",
+    "version": "1.9.0",
     "description": "Framework for IoT projects implementing HTTPS requests, a React web interface, WiFi manager, configuration manager, file manager and OTA updates.",
     "keywords": "esp8266,react,ota-updates,wifi-manager,https,file-manager",
     "frameworks": "arduino",