diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp')
9 files changed, 164 insertions, 146 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/pom.xml b/sdnr/wt/odlux/apps/configurationApp/pom.xml index f02644a96..9f92c9920 100644 --- a/sdnr/wt/odlux/apps/configurationApp/pom.xml +++ b/sdnr/wt/odlux/apps/configurationApp/pom.xml @@ -43,6 +43,11 @@ </license> </licenses> + <properties> + <maven.javadoc.skip>true</maven.javadoc.skip> + <checkstyle.skip>true</checkstyle.skip> + </properties> + <dependencies> <dependency> <groupId>${project.groupId}</groupId> 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} |