add units, refactor types

dashboard/src/components/form-refactor/field-components/StringInput.tsx

@@ -14,6 +14,7 @@ const StringInput: React.FC<Props> = ({
   required,
   placeholder,
   info,
+  settings,
 }) => {
   const { state, variables, mutateVars } = useFormField<StringInputFieldState>(
     id,
@@ -30,12 +31,18 @@ const StringInput: React.FC<Props> = ({
     return <></>;
   }
 
+  const curValue =
+    settings?.type == "number"
+      ? parseFloat(variables[variable]) || ""
+      : variables[variable] || "";
+
   return (
     <InputRow
       width="100%"
-      type="text"
-      value={variables[variable] || ""}
-      setValue={(x: string) => {
+      type={settings?.type || "text"}
+      value={curValue}
+      unit={settings?.unit}
+      setValue={(x: string | number) => {
         mutateVars((vars) => {
           return {
             ...vars,

dashboard/src/components/form-refactor/types.ts

@@ -5,10 +5,6 @@
 
 // YAML Field interfaces
 
-export interface DefaultFieldSettings {
-  required: boolean;
-}
-
 export interface HeadingField {
   type: "heading";
   label: string;
@@ -19,8 +15,10 @@ export interface SubtitleField {
   label: string;
 }
 
-export interface StringInputFieldSettings extends DefaultFieldSettings {
-  type: "text"|"password"|"number";
+export interface StringInputFieldSettings {
+  type?: "text"|"password"|"number";
+  unit?: string;
+  omitUnitFromValue?: boolean;
 }
 
 export interface StringInputField {

dashboard/src/components/values-form/FormDebugger.tsx

@@ -283,18 +283,46 @@ tabs:
       label: Basic form demonstrating some of the features of form.yaml
     - type: string-input
       placeholder: "ex: pilsner"
-      label: Required Field A
+      label: Required String Input A
       required: true
       variable: field_a
       info: This is some info
+      settings:
+        type: text
     - type: string-input
-      placeholder: "ex: sapporo"
+      placeholder: "ex: pilsner"
+      label: Required String Input A with unit
+      required: true
+      variable: field_a_unit
+      settings:
+        type: text
+        unit: m
+    - type: string-input
+      placeholder: "ex: pilsner"
+      label: Required Password Input B
       required: true
-      label: Required Field B
       variable: field_b
+      info: This is some info
+      settings:
+        type: password
+    - type: string-input
+      placeholder: "ex: pilsner"
+      label: Non Required Number Input C
+      required: false
+      variable: field_c
+      settings:
+        type: number
+    - type: string-input
+      placeholder: "ex: pilsner"
+      label: Non Required Number Input C with unit
+      required: false
+      variable: field_c_unit
+      settings:
+        type: number
+        unit: km
     - type: checkbox
       required: true
-      label: Checkbox A alternatiev
+      label: Checkbox A alternative
       variable: checkbox_a
     - type: subtitle
       label: "Note: Hidden required fields aren't supported yet (global only)"