diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/components')
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 |