From 4bd84bebdaa0c2d82050fbedd1fa8260eb62146d Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Thu, 27 Aug 2020 09:01:53 +0200 Subject: Add link calculation app Add link calculation app to odlux Issue-ID: CCSDK-2562 Signed-off-by: Aijana Schumann Change-Id: Ifc0a5b2a8bb974dfd85d70a9f05990b1f11925a3 Signed-off-by: Aijana Schumann --- .../configurationApp/src/components/baseProps.ts | 2 +- .../src/components/ifWhenTextInput.tsx | 73 +++++++++------ .../src/components/uiElementBoolean.tsx | 21 +++-- .../src/components/uiElementNumber.tsx | 81 ++++++++--------- .../src/components/uiElementSelection.tsx | 6 +- .../src/components/uiElementString.tsx | 12 +-- .../src/components/uiElementUnion.tsx | 100 ++++++++++----------- 7 files changed, 152 insertions(+), 143 deletions(-) (limited to 'sdnr/wt/odlux/apps/configurationApp/src/components') 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 = { 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 ? props.toogleTooltip(false)} onMouseOut={e => props.toogleTooltip(true)} title={element.ifFeature}> : null; - const whenFeature = element.when ? ( props.toogleTooltip(false)} onMouseOut={e => props.toogleTooltip(true)} title={element.when}> - ) : null; + const ifFeature = element.ifFeature + ? ( + props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}> + + + + + ) + : null; - return ( - - {label} - {ifFeature}{whenFeature}} /> - {errorText} - + const whenFeature = element.when + ? ( + props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}> + + + + + ) + : null; - ); + return ( + + {label} + {ifFeature}{whenFeature}} {...otherProps} /> + {errorText} + + ); } \ 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; -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 ? ( {element.label} - {error} + {mandetoryError ? "Value is mandetory" : ""} ) : 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; 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 ( - - 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 ? {element.units} : undefined} - /> - - ); + return ( + + { verifyValue(e.target.value) }} + error={error} + readOnly={props.readOnly} + disabled={props.disabled} + helperText={helperText} + startAdornment={element.units != null ? {element.units} : undefined} + /> + + ); } \ 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 ( - setTooltipVisibility(val)} + { - 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 - 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} - /> - ; + return + { verifyValues(e.target.value) }} + error={isError} + style={{ width: 485, marginLeft: 20, marginRight: 20 }} + readOnly={props.readOnly} + disabled={props.disabled} + helperText={helperText} + /> + ; } \ No newline at end of file -- cgit 1.2.3-korg