summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/configurationApp/src/components
diff options
context:
space:
mode:
authorsai-neetha <sai-neetha.phulmali@highstreet-technologies.com>2023-03-20 08:05:47 +0100
committerhighstreetherbert <herbert.eiselt@highstreet-technologies.com>2023-03-29 19:06:25 +0200
commit15e2d3a29b0d1a304965e34f114a911e5a7abdb3 (patch)
tree711ef5616aceb115a1081cccd152eeae0e87bc79 /sdnr/wt/odlux/apps/configurationApp/src/components
parentac5e2dc8f1ee4d5549f7260374e8164d52b07f55 (diff)
Odlux Update
Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com> Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/components')
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts14
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx72
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx41
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx170
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx12
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx35
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx51
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx4
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx4
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts280
10 files changed, 220 insertions, 463 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
index 26c3944c9..7187c0a4e 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
@@ -16,13 +16,13 @@
* ============LICENSE_END==========================================================================
*/
-import { ViewElement } from "../models/uiModels";
+import { ViewElement } from '../models/uiModels';
export type BaseProps<TValue = string> = {
- value: ViewElement,
- inputValue: TValue,
- readOnly: boolean,
- disabled: boolean,
- onChange(newValue: TValue): void;
- isKey?: boolean
+ value: ViewElement;
+ inputValue: TValue;
+ readOnly: boolean;
+ disabled: boolean;
+ onChange(newValue: TValue): void;
+ isKey?: boolean;
}; \ 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 8ce3106a6..b176e5db5 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
@@ -16,82 +16,86 @@
* ============LICENSE_END==========================================================================
*/
-import { ViewElementBase } from "models/uiModels";
-import {
- TextField,
- InputAdornment,
- Input,
- Tooltip,
- Divider,
- IconButton,
- InputBase,
- Paper,
- Theme,
- FormControl,
- InputLabel,
- FormHelperText,
-} from "@mui/material";
+import React from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import Input, { InputProps } from '@mui/material/Input';
+import Tooltip from '@mui/material/Tooltip';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+
import makeStyles from '@mui/styles/makeStyles';
import createStyles from '@mui/styles/createStyles';
-import * as React from 'react';
-import { faAdjust } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { InputProps } from "@mui/material/Input";
-const useStyles = makeStyles((theme: Theme) =>
+import { faAdjust } from '@fortawesome/free-solid-svg-icons/faAdjust';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { ViewElementBase } from '../models/uiModels';
+
+const useStyles = makeStyles(() =>
createStyles({
iconDark: {
- color: '#ff8800'
+ color: '#ff8800',
},
iconLight: {
- color: 'orange'
+ color: 'orange',
},
padding: {
paddingLeft: 10,
- paddingRight: 10
+ paddingRight: 10,
},
}),
);
-type IfwhenProps = InputProps & {
+type IfWhenProps = InputProps & {
label: string;
element: ViewElementBase;
helperText: string;
error: boolean;
- onChangeTooltipVisuability(value: boolean): void;
+ onChangeTooltipVisibility(value: boolean): void;
};
-export const IfWhenTextInput = (props: IfwhenProps) => {
+export const IfWhenTextInput = (props: IfWhenProps) => {
- const { element, onChangeTooltipVisuability: toogleTooltip, id, label, helperText: errorText, error, style, ...otherProps } = props;
+ const { element, id, label, helperText: errorText, error, style, ...otherProps } = props;
const classes = useStyles();
-
const ifFeature = element.ifFeature
? (
- <Tooltip disableInteractive onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}>
+ <Tooltip
+ title={element.ifFeature}
+ disableInteractive
+ onMouseMove={() => props.onChangeTooltipVisibility(false)}
+ onMouseOut={() => props.onChangeTooltipVisibility(true)}
+ >
<InputAdornment position="start">
<FontAwesomeIcon icon={faAdjust} className={classes.iconDark} />
</InputAdornment>
</Tooltip>
- )
+ )
: null;
const whenFeature = element.when
? (
- <Tooltip disableInteractive className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}>
+ <Tooltip
+ title={element.when}
+ disableInteractive
+ className={classes.padding}
+ onMouseMove={() => props.onChangeTooltipVisibility(false)}
+ onMouseOut={() => props.onChangeTooltipVisibility(true)}
+ >
<InputAdornment className={classes.padding} position="end">
<FontAwesomeIcon icon={faAdjust} className={classes.iconLight}/>
</InputAdornment>
</Tooltip>
- )
+ )
: null;
return (
<FormControl variant="standard" error={error} style={style}>
<InputLabel htmlFor={id} >{label}</InputLabel>
- <Input id={id} inputProps={{'aria-label': label+'-input'}} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps} />
+ <Input id={id} inputProps={{ 'aria-label': label + '-input' }} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps} />
<FormHelperText>{errorText}</FormHelperText>
</FormControl>
);
-} \ No newline at end of file
+}; \ 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 81c9d6dcd..56fb93cea 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
@@ -16,43 +16,48 @@
* ============LICENSE_END==========================================================================
*/
-import * as React from "react"
-import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@mui/material";
+import React from 'react';
-import { ViewElementBoolean } from "../models/uiModels";
-import { BaseProps } from "./baseProps";
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+
+import { ViewElementBoolean } from '../models/uiModels';
+import { BaseProps } from './baseProps';
type BooleanInputProps = BaseProps<boolean>;
export const UiElementBoolean = (props: BooleanInputProps) => {
- const element = props.value as ViewElementBoolean;
+ const element = props.value as ViewElementBoolean;
- const value = String(props.inputValue).toLowerCase();
- const mandetoryError = element.mandatory && value !== 'true' && value !== 'false';
+ const value = String(props.inputValue).toLowerCase();
+ const mandatoryError = element.mandatory && value !== 'true' && value !== 'false';
- return (!props.readOnly || element.id != null
- ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
+ return (!props.readOnly || element.id != null
+ ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
<InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
<Select variant="standard"
- aria-label={element.label+'-selection'}
+ aria-label={element.label + '-selection'}
required={!!element.mandatory}
- error={mandetoryError}
- onChange={(e) => { props.onChange(e.target.value === 'true') }}
+ error={mandatoryError}
+ onChange={(e) => { props.onChange(e.target.value === 'true'); }}
readOnly={props.readOnly}
disabled={props.disabled}
value={value}
inputProps={{
- name: element.id,
- id: `select-${element.id}`,
+ name: element.id,
+ id: `select-${element.id}`,
}}
>
<MenuItem value={'true'} aria-label="true">{element.trueValue || 'True'}</MenuItem>
<MenuItem value={'false'} aria-label="false">{element.falseValue || 'False'}</MenuItem>
</Select>
- <FormHelperText>{mandetoryError ? "Value is mandetory" : ""}</FormHelperText>
+ <FormHelperText>{mandatoryError ? 'Value is mandatory' : ''}</FormHelperText>
</FormControl>)
- : null
- );
-} \ No newline at end of file
+ : null
+ );
+}; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx
index 5937ed7b3..669ddff63 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx
@@ -16,19 +16,23 @@
* ============LICENSE_END==========================================================================
*/
-import * as React from "react"
-import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@mui/material";
+import React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Chip from '@mui/material/Chip';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+
import makeStyles from '@mui/styles/makeStyles';
import AddIcon from '@mui/icons-material/Add';
import { Theme } from '@mui/material/styles';
-import { ViewElement } from "../models/uiModels";
-
-import { BaseProps } from "./baseProps";
+import { ViewElement } from '../models/uiModels';
-type LeafListProps = BaseProps<any []> & {
- getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>)
-};
+import { BaseProps } from './baseProps';
const useStyles = makeStyles((theme: Theme) => {
const light = theme.palette.mode === 'light';
@@ -50,93 +54,93 @@ const useStyles = makeStyles((theme: Theme) => {
margin: theme.spacing(0.5),
},
underline: {
- '&:after': {
- borderBottom: `2px solid ${theme.palette.primary.main}`,
- left: 0,
- bottom: 0,
- // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
- content: '""',
- position: 'absolute',
- right: 0,
- transform: 'scaleX(0)',
- transition: theme.transitions.create('transform', {
- duration: theme.transitions.duration.shorter,
- easing: theme.transitions.easing.easeOut,
- }),
- pointerEvents: 'none', // Transparent to the hover style.
- },
- '&.Mui-focused:after': {
- transform: 'scaleX(1)',
- },
- '&.Mui-error:after': {
- borderBottomColor: theme.palette.error.main,
- transform: 'scaleX(1)', // error is always underlined in red
- },
- '&:before': {
+ '&:after': {
+ borderBottom: `2px solid ${theme.palette.primary.main}`,
+ left: 0,
+ bottom: 0,
+ // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
+ content: '""',
+ position: 'absolute',
+ right: 0,
+ transform: 'scaleX(0)',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.shorter,
+ easing: theme.transitions.easing.easeOut,
+ }),
+ pointerEvents: 'none', // Transparent to the hover style.
+ },
+ '&.Mui-focused:after': {
+ transform: 'scaleX(1)',
+ },
+ '&.Mui-error:after': {
+ borderBottomColor: theme.palette.error.main,
+ transform: 'scaleX(1)', // error is always underlined in red
+ },
+ '&:before': {
+ borderBottom: `1px solid ${bottomLineColor}`,
+ left: 0,
+ bottom: 0,
+ // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
+ content: '"\\00a0"',
+ position: 'absolute',
+ right: 0,
+ transition: theme.transitions.create('border-bottom-color', {
+ duration: theme.transitions.duration.shorter,
+ }),
+ pointerEvents: 'none', // Transparent to the hover style.
+ },
+ '&:hover:not($disabled):before': {
+ borderBottom: `2px solid ${theme.palette.text.primary}`,
+ // Reset on touch devices, it doesn't add specificity
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ '@media (hover: none)': {
borderBottom: `1px solid ${bottomLineColor}`,
- left: 0,
- bottom: 0,
- // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
- content: '"\\00a0"',
- position: 'absolute',
- right: 0,
- transition: theme.transitions.create('border-bottom-color', {
- duration: theme.transitions.duration.shorter,
- }),
- pointerEvents: 'none', // Transparent to the hover style.
- },
- '&:hover:not($disabled):before': {
- borderBottom: `2px solid ${theme.palette.text.primary}`,
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- borderBottom: `1px solid ${bottomLineColor}`,
- },
- },
- '&.Mui-disabled:before': {
- borderBottomStyle: 'dotted',
},
},
- })
+ '&.Mui-disabled:before': {
+ borderBottomStyle: 'dotted',
+ },
+ },
+ });
});
+type LeafListProps = BaseProps<any []> & {
+ getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>);
+};
+
export const UiElementLeafList = (props: LeafListProps) => {
const { value: element, inputValue, onChange } = props;
const classes = useStyles();
const [open, setOpen] = React.useState(false);
- const [editorValue, setEditorValue] = React.useState("");
+ const [editorValue, setEditorValue] = React.useState('');
const [editorValueIndex, setEditorValueIndex] = React.useState(-1);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
-
const handleClose = () => {
setOpen(false);
};
const onApplyButton = () => {
- if (editorValue != null && editorValue != "" && editorValueIndex < 0) {
- props.onChange([
- ...inputValue,
- editorValue,
- ]);
- } else if (editorValue != null && editorValue != "") {
- props.onChange([
- ...inputValue.slice(0, editorValueIndex),
- editorValue,
- ...inputValue.slice(editorValueIndex+1),
- ]);
- }
- setOpen(false);
+ if (editorValue != null && editorValue != '' && editorValueIndex < 0) {
+ props.onChange([
+ ...inputValue,
+ editorValue,
+ ]);
+ } else if (editorValue != null && editorValue != '') {
+ props.onChange([
+ ...inputValue.slice(0, editorValueIndex),
+ editorValue,
+ ...inputValue.slice(editorValueIndex + 1),
+ ]);
+ }
+ setOpen(false);
};
const onDelete = (index : number) => {
const newValue : any[] = [
...inputValue.slice(0, index),
- ...inputValue.slice(index+1),
+ ...inputValue.slice(index + 1),
];
onChange(newValue);
};
@@ -151,15 +155,15 @@ export const UiElementLeafList = (props: LeafListProps) => {
{ !props.readOnly ? <li>
<Chip
icon={<AddIcon />}
- label={"Add"}
+ label={'Add'}
className={classes.chip}
size="small"
color="secondary"
onClick={ () => {
setOpen(true);
- setEditorValue("");
+ setEditorValue('');
setEditorValueIndex(-1);
- }
+ }
}
/>
</li> : null }
@@ -172,24 +176,24 @@ export const UiElementLeafList = (props: LeafListProps) => {
label={String(val)}
onDelete={ !props.readOnly ? () => { onDelete(ind); } : undefined }
onClick={ !props.readOnly ? () => {
- setOpen(true);
- setEditorValue(val);
- setEditorValueIndex(ind);
- } : undefined
+ setOpen(true);
+ setEditorValue(val);
+ setEditorValueIndex(ind);
+ } : undefined
}
/>
</li>
- ))
+ ))
}
</ul>
{/* <FormHelperText>{ "Value is mandetory"}</FormHelperText> */}
</FormControl>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
- <DialogTitle id="form-dialog-title">{editorValueIndex < 0 ? "Add new value" : "Edit value" } </DialogTitle>
+ <DialogTitle id="form-dialog-title">{editorValueIndex < 0 ? 'Add new value' : 'Edit value' } </DialogTitle>
<DialogContent>
{ ValueEditor && <ValueEditor
inputValue={ editorValue }
- value={{ ...element, isList: false}}
+ value={{ ...element, isList: false }}
disabled={false}
readOnly={props.readOnly}
onChange={ setEditorValue }
@@ -197,7 +201,7 @@ export const UiElementLeafList = (props: LeafListProps) => {
</DialogContent>
<DialogActions>
<Button color="inherit" onClick={ handleClose }> Cancel </Button>
- <Button disabled={editorValue == null || editorValue === "" } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? "Add" : "Apply"} </Button>
+ <Button disabled={editorValue == null || editorValue === '' } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? 'Add' : 'Apply'} </Button>
</DialogActions>
</Dialog>
</>
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
index 76c11f6e5..b0342788f 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
@@ -16,14 +16,14 @@
* ============LICENSE_END==========================================================================
*/
-import { ViewElementNumber } from "models/uiModels";
+import React from 'react';
+import { ViewElementNumber } from "../models/uiModels";
import { Tooltip, InputAdornment } from "@mui/material";
-import * as React from 'react';
import { BaseProps } from "./baseProps";
import { IfWhenTextInput } from "./ifWhenTextInput";
-import { checkRange } from "./verifyer";
+import { checkRange } from "../utilities/verifyer";
-type numberInputProps = BaseProps<any>;
+type numberInputProps = BaseProps<number>;
export const UiElementNumber = (props: numberInputProps) => {
@@ -49,12 +49,12 @@ export const UiElementNumber = (props: numberInputProps) => {
setError(true);
setHelperText("Input is not a number.");
}
- props.onChange(data);
+ props.onChange(num);
}
return (
<Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}>
- <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+ <IfWhenTextInput element={element} onChangeTooltipVisibility={setTooltipVisibility}
spellCheck={false} autoFocus margin="dense"
id={element.id} 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/uiElementReference.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
index 9e863f0d0..e3bb8f048 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
@@ -17,16 +17,16 @@
*/
import React, { useState } from 'react';
-import { Tooltip, Button, FormControl, Theme } from '@mui/material';
+import { Tooltip, Button, FormControl } from '@mui/material';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
import { ViewElement } from '../models/uiModels';
-const useStyles = makeStyles((theme: Theme) => createStyles({
+const useStyles = makeStyles(() => createStyles({
button: {
- "justifyContent": "left"
+ 'justifyContent': 'left',
},
}));
@@ -37,16 +37,31 @@ type UIElementReferenceProps = {
};
export const UIElementReference: React.FC<UIElementReferenceProps> = (props) => {
- const classes = useStyles();
- const [disabled, setDisabled] = useState(true);
const { element } = props;
+ const [disabled, setDisabled] = useState(true);
+ const classes = useStyles();
return (
- <FormControl variant="standard" key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}>
+ <FormControl
+ variant="standard"
+ key={element.id}
+ style={{ width: 485, marginLeft: 20, marginRight: 20 }}
+ onMouseDown={(ev) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+ if (ev.button === 1) {
+ setDisabled(!disabled);
+ }
+ }}>
<Tooltip disableInteractive title={element.description || element.path || ''}>
- <Button className={classes.button} aria-label={element.label+'-button'} color="secondary" disabled={props.disabled && disabled} onClick={() => {
- props.onOpenReference(element);
- }} >{`${element.label}`}</Button>
+ <Button
+ className={classes.button}
+ aria-label={element.label + '-button'}
+ color="secondary"
+ disabled={props.disabled && disabled}
+ onClick={() => {
+ props.onOpenReference(element);
+ }} >{`${element.label}`}</Button>
</Tooltip>
</FormControl>
);
-} \ No newline at end of file
+}; \ 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 fdf803419..ebd04dab4 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
@@ -16,45 +16,54 @@
* ============LICENSE_END==========================================================================
*/
-import * as React from 'react';
+import React from 'react';
import { BaseProps } from './baseProps';
-import { ViewElementSelection } from '../models/uiModels'
+import { ViewElementSelection } from '../models/uiModels';
import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@mui/material';
type selectionProps = BaseProps;
export const UiElementSelection = (props: selectionProps) => {
- const element = props.value as ViewElementSelection;
+ const element = props.value as ViewElementSelection;
- let error = "";
- const value = String(props.inputValue);
- if (element.mandatory && Boolean(!value)) {
- error = "Error";
- }
+ let error = '';
+ const value = String(props.inputValue);
+ if (element.mandatory && Boolean(!value)) {
+ error = 'Error';
+ }
- return (props.readOnly || props.inputValue != null
- ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
- <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
+ return (props.readOnly || props.inputValue != null
+ ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
+ <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
<Select variant="standard"
required={!!element.mandatory}
error={!!error}
- onChange={(e) => { props.onChange(e.target.value as string) }}
+ onChange={(e) => { props.onChange(e.target.value as string); }}
readOnly={props.readOnly}
disabled={props.disabled}
value={value.toString()}
- aria-label={element.label+'-selection'}
+ aria-label={element.label + '-selection'}
inputProps={{
- name: element.id,
- id: `select-${element.id}`,
+ name: element.id,
+ id: `select-${element.id}`,
}}
>
- {element.options.map(option => (
- <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip disableInteractive title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem>
- ))}
+ {element.options.map(option => (
+ <MenuItem
+ key={option.key}
+ value={option.key}
+ aria-label={option.key}>
+ <Tooltip disableInteractive title={option.description || ''}>
+ <div style={{ width: '100%' }}>
+ {option.key}
+ </div>
+ </Tooltip>
+ </MenuItem>
+ ))}
</Select>
<FormHelperText>{error}</FormHelperText>
</FormControl>)
- : null
- );
-} \ No newline at end of file
+ : null
+ );
+}; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
index 4908c41aa..8381d99a4 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
@@ -21,7 +21,7 @@ import { Tooltip, TextField } from "@mui/material";
import { ViewElementString } from "../models/uiModels";
import { BaseProps } from "./baseProps";
import { IfWhenTextInput } from "./ifWhenTextInput";
-import { checkRange, checkPattern } from "./verifyer";
+import { checkRange, checkPattern } from "../utilities/verifyer";
type stringEntryProps = BaseProps ;
@@ -69,7 +69,7 @@ export const UiElementString = (props: stringEntryProps) => {
return (
<Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}>
- <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+ <IfWhenTextInput element={element} onChangeTooltipVisibility={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 67cd998d7..8d232f5ee 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
@@ -21,7 +21,7 @@ import { BaseProps } from './baseProps';
import { Tooltip } from '@mui/material';
import { IfWhenTextInput } from './ifWhenTextInput';
import { ViewElementUnion, isViewElementString, isViewElementNumber, isViewElementObject, ViewElementNumber } from '../models/uiModels';
-import { checkRange, checkPattern } from './verifyer';
+import { checkRange, checkPattern } from '../utilities/verifyer';
type UiElementUnionProps = { isKey: boolean } & BaseProps;
@@ -77,7 +77,7 @@ export const UIElementUnion = (props: UiElementUnionProps) => {
};
return <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}>
- <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+ <IfWhenTextInput element={element} onChangeTooltipVisibility={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) }}
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts
deleted file mode 100644
index 0a95cd8ca..000000000
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-
-import { Expression, YangRange, Operator, ViewElementNumber, ViewElementString, isViewElementNumber, isViewElementString } from '../models/uiModels';
-
-export type validated = { isValid: boolean, error?: string }
-
-export type validatedRange = { isValid: boolean, error?: string };
-
-
-const rangeErrorStartNumber = "The entered number must be";
-const rangeErrorinnerMinTextNumber = "greater or equals than";
-const rangeErrorinnerMaxTextNumber = "less or equals than";
-const rangeErrorEndTextNumber = ".";
-
-const rangeErrorStartString = "The entered text must have";
-const rangeErrorinnerMinTextString = "no more than";
-const rangeErrorinnerMaxTextString = "less than";
-const rangeErrorEndTextString = " characters.";
-
-let errorMessageStart = "";
-let errorMessageMiddleMinPart = "";
-let errorMessageMiddleMaxPart = "";
-let errorMessageEnd = "";
-
-
-export function checkRange(element: ViewElementNumber | ViewElementString, data: number): string {
-
- //let test1: Operator<YangRange> = { operation: "AND", arguments: [{ operation: "OR", arguments: [{ operation: "AND", arguments: [new RegExp("^z", "g"), new RegExp("z$", "g")] }, new RegExp("^abc", "g"), new RegExp("^123", "g")] }, new RegExp("^def", "g"), new RegExp("^ppp", "g"), new RegExp("^aaa", "g")] };
- //let test1: Operator<YangRange> = { operation: "AND", arguments: [{ operation: "OR", arguments: [{ operation: "AND", arguments: [{ min: -5, max: 10 }, { min: -30, max: -20 }] }, { min: 8, max: 15 }] }] };
- //let test1: Operator<YangRange> = { operation: "OR", arguments: [{ operation: "OR", arguments: [{ min: -50, max: -40 }] }, { min: -30, max: -20 }, { min: 8, max: 15 }] };
- //let test1: Operator<YangRange> = { operation: "AND", arguments: [{ operation: "OR", arguments: [{ min: -5, max: 10 }, { min: 17, max: 23 }] }] };
-
- const number = data;
-
- var expression = undefined;
-
- if (isViewElementString(element)) {
- expression = element.length;
-
- errorMessageStart = rangeErrorStartString;
- errorMessageMiddleMaxPart = rangeErrorinnerMaxTextString;
- errorMessageMiddleMinPart = rangeErrorinnerMinTextString;
- errorMessageEnd = rangeErrorEndTextString;
-
- } else if (isViewElementNumber(element)) {
- expression = element.range;
-
- errorMessageStart = rangeErrorStartNumber;
- errorMessageMiddleMaxPart = rangeErrorinnerMaxTextNumber;
- errorMessageMiddleMinPart = rangeErrorinnerMinTextNumber;
- errorMessageEnd = rangeErrorEndTextNumber;
- }
-
- if (expression) {
- if (isYangOperator(expression)) {
-
- const errorMessage = getRangeErrorMessages(expression, data);
- return errorMessage;
-
- } else
- if (isYangRange(expression)) {
-
- if (!isNaN(expression.min)) {
- if (number < expression.min) {
- return `${errorMessageStart} ${errorMessageMiddleMinPart} ${expression.min}${errorMessageEnd}`;
- }
- }
-
- if (!isNaN(expression.max)) {
- if (number > expression.max) {
- return `${errorMessageStart} ${errorMessageMiddleMaxPart} ${expression.max}${errorMessageEnd}`;
- }
- }
- }
- }
-
-
- return "";
-}
-
-function isYangRange(val: YangRange | Operator<YangRange>): val is YangRange {
- return (val as YangRange).min !== undefined;
-}
-
-function isYangOperator(val: YangRange | Operator<YangRange>): val is Operator<YangRange> {
- return (val as Operator<YangRange>).operation !== undefined;
-}
-
-function getRangeErrorMessagesRecursively(value: Operator<YangRange>, data: number): string[] {
- let currentItteration: string[] = [];
- console.log(value);
-
- // itterate over all elements
- for (let i = 0; i < value.arguments.length; i++) {
- const element = value.arguments[i];
-
- let min = undefined;
- let max = undefined;
-
- let isNumberCorrect = false;
-
- if (isYangRange(element)) {
-
- //check found min values
- if (!isNaN(element.min)) {
- if (data < element.min) {
- min = element.min;
- } else {
- isNumberCorrect = true;
- }
- }
-
- // check found max values
- if (!isNaN(element.max)) {
- if (data > element.max) {
- max = element.max;
- } else {
- isNumberCorrect = true;
- }
- }
-
- // construct error messages
- if (min != undefined) {
- currentItteration.push(`${value.operation.toLocaleLowerCase()} ${errorMessageMiddleMinPart} ${min}`);
- } else if (max != undefined) {
- currentItteration.push(`${value.operation.toLocaleLowerCase()} ${errorMessageMiddleMaxPart} ${max}`);
-
- }
-
- } else if (isYangOperator(element)) {
-
- //get errormessages from expression
- const result = getRangeErrorMessagesRecursively(element, data);
- if (result.length === 0) {
- isNumberCorrect = true;
- }
- currentItteration = currentItteration.concat(result);
- }
-
- // if its an OR operation, the number has been checked and min/max are empty (thus not violated)
- // delete everything found (because at least one found is correct, therefore all are correct) and break from loop
- if (min === undefined && max === undefined && isNumberCorrect && value.operation === "OR") {
-
- currentItteration.splice(0, currentItteration.length);
- break;
- }
- }
-
- return currentItteration;
-}
-
-function getRangeErrorMessages(value: Operator<YangRange>, data: number): string {
-
- const currentItteration = getRangeErrorMessagesRecursively(value, data);
-
- // build complete error message from found parts
- let errormessage = "";
- if (currentItteration.length > 1) {
-
- currentItteration.forEach((element, index) => {
- if (index === 0) {
- errormessage = createStartMessage(element);
- } else if (index === currentItteration.length - 1) {
- errormessage += ` ${element}${errorMessageEnd}`;
- } else {
- errormessage += `, ${element}`
- }
- });
- } else if (currentItteration.length == 1) {
- errormessage = `${createStartMessage(currentItteration[0])}${errorMessageEnd}`;
- }
-
- return errormessage;
-}
-
-function createStartMessage(element: string) {
-
- //remove leading or or and from text
- if (element.startsWith("and"))
- element = element.replace("and", "");
- else if (element.startsWith("or"))
- element = element.replace("or", "");
-
- return `${errorMessageStart} ${element}`;
-}
-
-export const checkPattern = (expression: RegExp | Operator<RegExp> | undefined, data: string): validated => {
-
- if (expression) {
- if (isRegExp(expression)) {
- const isValid = expression.test(data);
- if (!isValid)
- return { isValid: isValid, error: "The input is in a wrong format." };
-
- } else if (isRegExpOperator(expression)) {
- const result = isPatternValid(expression, data);
-
- if (!result) {
- return { isValid: false, error: "The input is in a wrong format." };
- }
- }
- }
-
- return { isValid: true }
-}
-
-function getRegexRecursively(value: Operator<RegExp>, data: string): boolean[] {
- let currentItteration: boolean[] = [];
- for (let i = 0; i < value.arguments.length; i++) {
- const element = value.arguments[i];
- if (isRegExp(element)) {
- // if regex is found, add it to list
- currentItteration.push(element.test(data))
- } else if (isRegExpOperator(element)) {
- //if RegexExpression is found, try to get regex from it
- currentItteration = currentItteration.concat(getRegexRecursively(element, data));
- }
- }
-
- if (value.operation === "OR") {
- // if one is true, all are true, all found items can be discarded
- let result = currentItteration.find(element => element);
- if (result) {
- return [];
- }
- }
- return currentItteration;
-}
-
-function isPatternValid(value: Operator<RegExp>, data: string): boolean {
-
-
- // get all regex
- const result = getRegexRecursively(value, data);
- console.log(value);
-
-
- if (value.operation === "AND") {
- // if AND operation is executed...
- // no element can be false
- const check = result.find(element => element !== true);
- if (check)
- return false;
- else
- return true;
- } else {
- // if OR operation is executed...
- // ... just one element must be true
- const check = result.find(element => element === true);
- if (check)
- return true;
- else
- return false;
-
- }
-}
-
-function isRegExp(val: RegExp | Operator<RegExp>): val is RegExp {
- return (val as RegExp).source !== undefined;
-}
-
-function isRegExpOperator(val: RegExp | Operator<RegExp>): val is Operator<RegExp> {
- return (val as Operator<RegExp>).operation !== undefined;
-} \ No newline at end of file