summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/configurationApp/src
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-08-27 09:01:53 +0200
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-08-27 11:52:38 +0200
commit4bd84bebdaa0c2d82050fbedd1fa8260eb62146d (patch)
tree3f26dfc6c7da0f176f31bcde112971b0b8c552ce /sdnr/wt/odlux/apps/configurationApp/src
parent958de10b4c433eb6110b93007f281b07515ed6fe (diff)
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>
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src')
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts2
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx73
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx21
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx81
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx6
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx12
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx100
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx10
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}