Adding select to config page

maakbaas · Jun 16, 2021 · 419bccd · 419bccd
1 parent 7d3da8d
commit 419bccd
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 92 deletions.
diff --git a/docs/config-manager.md b/docs/config-manager.md
@@ -130,6 +130,8 @@ An example of how this file could look is shown below:
 
 Supported data types are: bool, uint8_t, int8_t, uint16_t, int16_t, uint32_t, int32_t, float and char. The length argument is mandatory for datatype char to indicate the length of the string. Variable length strings are not supported. Also, arrays are not supported for now. 
 
+Adding the field `"control": "select",` will turn the item into a drop down menu, with the options defined as  `"options": [1, 2, 3]`.  
+
 There are a few unique parameters:
 
 * The configuration parameter `projectName` is unique in this framework. You can remove it, but if you use a parameter with this name, it will be shown as the header title in the web interface :).

diff --git a/gui/js/comp/DashboardItems.js b/gui/js/comp/DashboardItems.js
@@ -53,12 +53,6 @@ const Control = styled.p`
         max-width:calc(100% - 40px);
     }
 
-    select {
-        width:450px;
-        padding: 0.3em;
-        max-width:100%;
-    }
-
     button {        
         padding:0.4em 0.5em;
     }
@@ -214,12 +208,27 @@ export function DashboardItems(props) {
                     break;
 
                 case "config":
-                    confItems = <>{confItems}
-                        <p>
-                            <label htmlFor={props.items[i].name}><b>{props.items[i].label || props.items[i].name}</b>: {rangeInfo}</label>
-                            <input type={inputType} id={props.items[i].name} name={props.items[i].name} value={value} {...conditionalAttributes} disabled={props.items[i].disabled} />
-                        </p>
-                    </>;
+                    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></>;            
+                        }
+                        confItems = <>{confItems}
+                            <p>
+                                <label htmlFor={props.items[i].name}><b>{props.items[i].label || props.items[i].name}</b>: {rangeInfo}</label>
+                                <select id={props.items[i].name} name={props.items[i].name} value={value} disabled={props.items[i].disabled}>
+                                    {options}
+                                </select>
+                            </p>
+                        </>;
+                    } else {
+                        confItems = <>{confItems}
+                            <p>
+                                <label htmlFor={props.items[i].name}><b>{props.items[i].label || props.items[i].name}</b>: {rangeInfo}</label>
+                                <input type={inputType} id={props.items[i].name} name={props.items[i].name} value={value} {...conditionalAttributes} disabled={props.items[i].disabled} />
+                            </p>
+                        </>;
+                    }
                     break;
 
             }

diff --git a/gui/js/comp/UiComponents.js b/gui/js/comp/UiComponents.js
@@ -308,6 +308,12 @@ export const Form = styled.form`
         padding:0.3em;
     }
 
+    select {
+        width:450px;
+        padding: 0.3em;
+        max-width:100%;
+    }
+
     input[type=checkbox] {
         width: auto;
         margin:12px 0px;