Add link calculation app

Add link calculation app to odlux

Issue-ID: CCSDK-2562
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Ifc0a5b2a8bb974dfd85d70a9f05990b1f11925a3
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>

8 files changed, 159 insertions, 146 deletions

diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
index ec49191ce..8f7300cfb 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
@@ -18,4 +18,4 @@
 
 import { ViewElement } from "../models/uiModels";
 
-export type baseProps = { value: ViewElement, inputValue: string, readOnly: boolean, disabled: boolean, onChange(newValue: string): void };
\ No newline at end of file
+export type BaseProps<TValue = string> = { value: ViewElement, inputValue: TValue, readOnly: boolean, disabled: boolean, onChange(newValue: TValue): void };
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
index 67358885c..62ddeb22d 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
@@ -24,38 +24,59 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { InputProps } from "@material-ui/core/Input";
 
 const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        iconDark: {
-            color: '#ff8800'
-        },
-        iconLight: {
-            color: 'orange'
-        },
-        padding: {
-            paddingLeft: 10,
-            paddingRight: 10
-        },
-    }),
+  createStyles({
+    iconDark: {
+      color: '#ff8800'
+    },
+    iconLight: {
+      color: 'orange'
+    },
+    padding: {
+      paddingLeft: 10,
+      paddingRight: 10
+    },
+  }),
 );
 
-type ifwhenProps = { element: ViewElementBase, id: any, label: any, style: any, helperText: string, error: boolean, toogleTooltip(value: boolean): void, [x: string]: any };
+type IfwhenProps = InputProps & {
+  label: string;
+  element: ViewElementBase;
+  helperText: string;
+  error: boolean;
+  onChangeTooltipVisuability(value: boolean): void;
+};
 
-export const IfWhenTextInput = (props: ifwhenProps) => {
+export const IfWhenTextInput = (props: IfwhenProps) => {
 
-    const { element, toogleTooltip, id, label, helperText: errorText, error, style, ...otherProps } = props;
-    const classes = useStyles();
+  const { element, onChangeTooltipVisuability: toogleTooltip, id, label, helperText: errorText, error, style, ...otherProps } = props;
+  const classes = useStyles();
 
 
-    const ifFeature = element.ifFeature ? <Tooltip onMouseMove={e => props.toogleTooltip(false)} onMouseOut={e => props.toogleTooltip(true)} title={element.ifFeature}><InputAdornment position="start"><FontAwesomeIcon icon={faAdjust} className={classes.iconDark}></FontAwesomeIcon></InputAdornment></Tooltip> : null;
-    const whenFeature = element.when ? (<Tooltip className={classes.padding} onMouseMove={e => props.toogleTooltip(false)} onMouseOut={e => props.toogleTooltip(true)} title={element.when}>
-        <InputAdornment className={classes.padding} position="end"><FontAwesomeIcon icon={faAdjust} className={classes.iconLight}></FontAwesomeIcon></InputAdornment></Tooltip>) : null;
+  const ifFeature = element.ifFeature
+    ? (
+        <Tooltip onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}>
+          <InputAdornment position="start">
+            <FontAwesomeIcon icon={faAdjust} className={classes.iconDark} />
+          </InputAdornment>
+        </Tooltip>
+      )
+    : null;
 
-    return (
-        <FormControl error={error} style={style}>
-            <InputLabel htmlFor={id} >{label}</InputLabel>
-            <Input  {...otherProps} id={id} endAdornment={<div>{ifFeature}{whenFeature}</div>} />
-            <FormHelperText>{errorText}</FormHelperText>
-        </FormControl>
+  const whenFeature = element.when
+    ? (
+        <Tooltip className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}>
+          <InputAdornment className={classes.padding} position="end">
+            <FontAwesomeIcon icon={faAdjust} className={classes.iconLight}/>
+          </InputAdornment>
+        </Tooltip>
+      ) 
+    : null;
 
-    );
+  return (
+    <FormControl error={error} style={style}>
+      <InputLabel htmlFor={id} >{label}</InputLabel>
+      <Input id={id} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps}  />
+      <FormHelperText>{errorText}</FormHelperText>
+    </FormControl>
+  );
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
index cc141ee35..2fbbf956f 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
@@ -16,29 +16,28 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { ViewElementBoolean } from "../models/uiModels";
 import * as React from "react"
 import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@material-ui/core";
-import { baseProps } from "./baseProps";
 
-type booleanInputProps = baseProps;
+import { ViewElementBoolean } from "../models/uiModels";
+import { BaseProps } from "./baseProps";
+
+type BooleanInputProps = BaseProps<boolean>;
 
-export const UiElementBoolean = (props: booleanInputProps) => {
+export const UiElementBoolean = (props: BooleanInputProps) => {
 
     const element = props.value as ViewElementBoolean;
 
-    let error = "";
     const value = String(props.inputValue).toLowerCase();
-    if (element.mandatory && value !== "true" && value !== "false") {
-        error = "Error";
-    }
+    const mandetoryError = element.mandatory && value !== 'true' && value !== 'false';
+    
     return (!props.readOnly || element.id != null
         ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
             <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
             <Select
                 required={!!element.mandatory}
-                error={!!error}
-                onChange={(e) => { props.onChange(e.target.value as any) }}
+                error={mandetoryError}
+                onChange={(e) => { props.onChange(e.target.value === 'true') }}
                 readOnly={props.readOnly}
                 disabled={props.disabled}
                 value={value}
@@ -51,7 +50,7 @@ export const UiElementBoolean = (props: booleanInputProps) => {
                 <MenuItem value={'false'}>{element.falseValue || 'False'}</MenuItem>
 
             </Select>
-            <FormHelperText>{error}</FormHelperText>
+            <FormHelperText>{mandetoryError ? "Value is mandetory" : ""}</FormHelperText>
         </FormControl>)
         : null
     );
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
index cf462052e..ac4afc1d9 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
@@ -19,59 +19,52 @@
 import { ViewElementNumber } from "models/uiModels";
 import { Tooltip, InputAdornment } from "@material-ui/core";
 import * as React from 'react';
-import { baseProps } from "./baseProps";
+import { BaseProps } from "./baseProps";
 import { IfWhenTextInput } from "./ifWhenTextInput";
 import { checkRange } from "./verifyer";
 
-type numberInputProps = baseProps;
+type numberInputProps = BaseProps<number>;
 
 export const UiElementNumber = (props: numberInputProps) => {
 
 
-    const [error, setError] = React.useState(false);
-    const [helperText, setHelperText] = React.useState("");
-    const [isTooltipVisible, setTooltipVisibility] = React.useState(true);
+  const [error, setError] = React.useState(false);
+  const [helperText, setHelperText] = React.useState("");
+  const [isTooltipVisible, setTooltipVisibility] = React.useState(true);
 
-    const element = props.value as ViewElementNumber;
+  const element = props.value as ViewElementNumber;
 
-    const verifyValue = (data: string) => {
-
-        if (data.trim().length > 0) {
-            const num = Number(data);
-            if (!isNaN(num)) {
-                const result = checkRange(element, num);
-                if (result.length > 0) {
-                    setError(true);
-                    setHelperText(result);
-                } else {
-                    setError(false);
-                    setHelperText("");
-                }
-            } else {
-                setError(true);
-                setHelperText("Input is not a number.");
-            }
-        } else {
-            setError(false);
-            setHelperText("");
-        }
-
-        props.onChange(data);
+  const verifyValue = (data: string) => {
+    const num = Number(data);
+    if (!isNaN(num)) {
+      const result = checkRange(element, num);
+      if (result.length > 0) {
+        setError(true);
+        setHelperText(result);
+      } else {
+        setError(false);
+        setHelperText("");
+      }
+    } else {
+      setError(true);
+      setHelperText("Input is not a number.");
     }
+    props.onChange(num);
+  }
 
-    return (
-        <Tooltip title={isTooltipVisible ? element.description || '' : ''}>
-            <IfWhenTextInput element={element} toogleTooltip={(val: boolean) => setTooltipVisibility(val)}
-                spellCheck={false} autoFocus margin="dense"
-                id={element.id} label={element.label} type="text" value={props.inputValue}
-                style={{ width: 485, marginLeft: 20, marginRight: 20 }}
-                onChange={(e: any) => { verifyValue(e.target.value) }}
-                error={error}
-                readOnly={props.readOnly}
-                disabled={props.disabled}
-                helperText={helperText}
-                startAdornment={element.units != null ? <InputAdornment position="start">{element.units}</InputAdornment> : undefined}
-            />
-        </Tooltip>
-    );
+  return (
+    <Tooltip title={isTooltipVisible ? element.description || '' : ''}>
+      <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+        spellCheck={false} autoFocus margin="dense"
+        id={element.id} label={element.label} type="text" value={props.inputValue}
+        style={{ width: 485, marginLeft: 20, marginRight: 20 }}
+        onChange={(e) => { verifyValue(e.target.value) }}
+        error={error}
+        readOnly={props.readOnly}
+        disabled={props.disabled}
+        helperText={helperText}
+        startAdornment={element.units != null ? <InputAdornment position="start">{element.units}</InputAdornment> : undefined}
+      />
+    </Tooltip>
+  );
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
index 8b0b890d0..1cec754ab 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
@@ -17,13 +17,11 @@
  */
 
 import * as React from 'react';
-import { baseProps } from './baseProps';
+import { BaseProps } from './baseProps';
 import { ViewElementSelection } from '../models/uiModels'
 import { FormControl, InputLabel, Select, FormHelperText, MenuItem } from '@material-ui/core';
 
-
-
-type selectionProps = baseProps;
+type selectionProps = BaseProps;
 
 export const UiElementSelection = (props: selectionProps) => {
 
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
index 43c60b502..95841b75d 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
@@ -16,14 +16,14 @@
  * ============LICENSE_END==========================================================================
  */
 
+import * as React from "react"
 import { Tooltip, TextField } from "@material-ui/core";
 import { ViewElementString } from "../models/uiModels";
-import * as React from "react"
-import { baseProps } from "./baseProps";
+import { BaseProps } from "./baseProps";
 import { IfWhenTextInput } from "./ifWhenTextInput";
 import { checkRange, checkPattern } from "./verifyer";
 
-type stringEntryProps = baseProps & { isKey: boolean };
+type stringEntryProps = BaseProps & { isKey: boolean };
 
 export const UiElementString = (props: stringEntryProps) => {
 
@@ -40,9 +40,9 @@ export const UiElementString = (props: stringEntryProps) => {
             let errorMessage = "";
             const result = checkRange(element, data.length);
 
-            if (result.length > 0)
+            if (result.length > 0) {
                 errorMessage += result;
-
+            }
 
             const patternResult = checkPattern(element.pattern, data)
 
@@ -69,7 +69,7 @@ export const UiElementString = (props: stringEntryProps) => {
 
     return (
         <Tooltip title={isTooltipVisible ? element.description || '' : ''}>
-            <IfWhenTextInput element={element} toogleTooltip={(val: boolean) => setTooltipVisibility(val)}
+            <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
                 spellCheck={false} autoFocus margin="dense"
                 id={element.id} label={props.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue}
                 style={{ width: 485, marginLeft: 20, marginRight: 20 }}
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
index 25378d767..669e39360 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
@@ -17,77 +17,75 @@
  */
 
 import * as React from 'react'
-import { baseProps } from './baseProps';
+import { BaseProps } from './baseProps';
 import { Tooltip } from '@material-ui/core';
 import { IfWhenTextInput } from './ifWhenTextInput';
 import { ViewElementUnion, isViewElementString, isViewElementNumber, isViewElementObject, ViewElementNumber } from '../models/uiModels';
 import { checkRange, checkPattern } from './verifyer';
 
-type UiElementUnionProps = { isKey: boolean } & baseProps;
+type UiElementUnionProps = { isKey: boolean } & BaseProps;
 
 export const UIElementUnion = (props: UiElementUnionProps) => {
 
-    const [isError, setError] = React.useState(false);
-    const [helperText, setHelperText] = React.useState("");
-    const [isTooltipVisible, setTooltipVisibility] = React.useState(true);
+  const [isError, setError] = React.useState(false);
+  const [helperText, setHelperText] = React.useState("");
+  const [isTooltipVisible, setTooltipVisibility] = React.useState(true);
 
-    const element = props.value as ViewElementUnion;
+  const element = props.value as ViewElementUnion;
 
-    const verifyValues = (data: string) => {
+  const verifyValues = (data: string) => {
 
-        let foundObjectElements = 0;
-        let errorMessage = "";
-        let isPatternCorrect = null;
+    let foundObjectElements = 0;
+    let errorMessage = "";
+    let isPatternCorrect = null;
 
-        for (let i = 0; i < element.elements.length; i++) {
-            const unionElement = element.elements[i];
+    for (let i = 0; i < element.elements.length; i++) {
+      const unionElement = element.elements[i];
 
-            if (isViewElementNumber(unionElement)) {
+      if (isViewElementNumber(unionElement)) {
 
-                errorMessage = checkRange(unionElement, Number(data));
+        errorMessage = checkRange(unionElement, Number(data));
 
-            } else if (isViewElementString(unionElement)) {
-                errorMessage += checkRange(unionElement, data.length);
-                isPatternCorrect = checkPattern(unionElement.pattern, data).isValid;
+      } else if (isViewElementString(unionElement)) {
+        errorMessage += checkRange(unionElement, data.length);
+        isPatternCorrect = checkPattern(unionElement.pattern, data).isValid;
 
 
-            } else if (isViewElementObject(unionElement)) {
-                foundObjectElements++;
-            }
+      } else if (isViewElementObject(unionElement)) {
+        foundObjectElements++;
+      }
 
-            if (isPatternCorrect || errorMessage.length === 0) {
-                break;
-            }
-        }
+      if (isPatternCorrect || errorMessage.length === 0) {
+        break;
+      }
+    }
 
-        if (errorMessage.length > 0 || isPatternCorrect !== null && !isPatternCorrect) {
-            setError(true);
-            setHelperText("Input is wrong.");
-        } else {
-            setError(false);
-            setHelperText("");
-        }
+    if (errorMessage.length > 0 || isPatternCorrect !== null && !isPatternCorrect) {
+      setError(true);
+      setHelperText("Input is wrong.");
+    } else {
+      setError(false);
+      setHelperText("");
+    }
 
-        if (foundObjectElements > 0 && foundObjectElements != element.elements.length) {
-            throw new Error(`The union element ${element.id} can't be changed.`);
+    if (foundObjectElements > 0 && foundObjectElements != element.elements.length) {
+      throw new Error(`The union element ${element.id} can't be changed.`);
 
-        } else {
-            props.onChange(data);
-        }
-    };
+    } else {
+      props.onChange(data);
+    }
+  };
 
-
-
-    return <Tooltip title={isTooltipVisible ? element.description || '' : ''}>
-        <IfWhenTextInput element={element} toogleTooltip={(val: boolean) => setTooltipVisibility(val)}
-            spellCheck={false} autoFocus margin="dense"
-            id={element.id} label={props.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue}
-            onChange={(e: any) => { verifyValues(e.target.value) }}
-            error={isError}
-            style={{ width: 485, marginLeft: 20, marginRight: 20 }}
-            readOnly={props.readOnly}
-            disabled={props.disabled}
-            helperText={helperText}
-        />
-    </Tooltip>;
+  return <Tooltip title={isTooltipVisible ? element.description || '' : ''}>
+    <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+      spellCheck={false} autoFocus margin="dense"
+      id={element.id} label={props.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue}
+      onChange={(e: any) => { verifyValues(e.target.value) }}
+      error={isError}
+      style={{ width: 485, marginLeft: 20, marginRight: 20 }}
+      readOnly={props.readOnly}
+      disabled={props.disabled}
+      helperText={helperText}
+    />
+  </Tooltip>;
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
index 385f3b52f..6465feb4e 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
@@ -284,8 +284,12 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
   private renderUIElement = (uiElement: ViewElement, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => {
     const isKey = (uiElement.label === keyProperty);
     const canEdit = editMode && (isNew || (uiElement.config && !isKey));
-    if (isViewElementEmpty(uiElement)) {
+    
+    // do not show elements w/o any value from the backend
+    if (viewData[uiElement.id] == null && !editMode) {
       return null;
+    } else  if (isViewElementEmpty(uiElement)) {
+      return null;  
     } else if (isViewElementSelection(uiElement)) {
 
       return <UiElementSelection
@@ -300,7 +304,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
     } else if (isViewElementBoolean(uiElement)) {
       return <UiElementBoolean
         key={uiElement.id}
-        inputValue={viewData[uiElement.id] || ''}
+        inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
         value={uiElement}
         readOnly={!canEdit}
         disabled={editMode && !canEdit}
@@ -309,7 +313,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
     } else if (isViewElementString(uiElement)) {
       return <UiElementString
         key={uiElement.id}
-        inputValue={viewData[uiElement.id] || ''}
+        inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
         value={uiElement}
         isKey={isKey}
         readOnly={!canEdit}