diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
11 files changed, 97 insertions, 47 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx index a04ab16af..d41d82687 100644 --- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx +++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx @@ -15,7 +15,7 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import { Theme } from '@mui/material/styles'; import { WithStyles } from '@mui/styles'; @@ -31,7 +31,7 @@ import Typography from '@mui/material/Typography'; import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions'; -import connect, { Connect } from '../flux/connect'; +import { connect, Connect } from '../flux/connect'; const styles = (theme: Theme) => createStyles({ modal: { diff --git a/sdnr/wt/odlux/framework/src/components/icons/menuIcon.tsx b/sdnr/wt/odlux/framework/src/components/icons/menuIcon.tsx new file mode 100644 index 000000000..0d7d734c9 --- /dev/null +++ b/sdnr/wt/odlux/framework/src/components/icons/menuIcon.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +type MenuIconPropsBase = { + className?: string; + size?: number | string; +}; + +type MenuIconPropsWithColor = MenuIconPropsBase & { + color: string; +}; + +type MenuIconProps = MenuIconPropsBase | MenuIconPropsWithColor; + +const MenuIcon = (props: MenuIconProps) => { + const { className, size = '30px' } = props; + const color = 'color' in props ? props.color : '#36A9E1'; + + return ( + <svg className={className} width={size} height={size} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"> + <path fill={color} d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z" /> + <path fill={color} d="M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z" /> + <path fill={color} d="M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" /> + </svg> + ); +}; + +MenuIcon.defaultName = 'MenuIcon'; + +export default MenuIcon;
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/logo.tsx b/sdnr/wt/odlux/framework/src/components/logo.tsx index b10cc8ce1..f2bb1f575 100644 --- a/sdnr/wt/odlux/framework/src/components/logo.tsx +++ b/sdnr/wt/odlux/framework/src/components/logo.tsx @@ -42,7 +42,7 @@ import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; -import defaultLogo from '../assets/images/defaultLogo.svg'; +const defaultLogo = require('../assets/icons/ht.Connect.svg'); const styles = (theme: Theme) => createStyles({ headerLogo: { @@ -91,7 +91,7 @@ class LogoComponent extends React.Component<LogoProps, ILogoState> { console.info([ "Logo hidden, because browser window width (", this.state.windowWidth, - "px) is lower thershold (", + "px) is lower threshold (", this.hideLogoWhenWindowWidthIsLower, "px)."].join('')); } diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx index 8541cfe56..c1a5005d4 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -450,13 +450,13 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate if (filterExpressionAsString.length === 0 || isNaN(valueAsNumber)) return true; if (filterExpressionAsString.startsWith('>=')) { - return valueAsNumber >= Number(filterExpressionAsString.substr(2).trim()); + return valueAsNumber >= Number(filterExpressionAsString.substring(2).trim()); } else if (filterExpressionAsString.startsWith('<=')) { - return valueAsNumber <= Number(filterExpressionAsString.substr(2).trim()); + return valueAsNumber <= Number(filterExpressionAsString.substring(2).trim()); } else if (filterExpressionAsString.startsWith('>')) { - return valueAsNumber > Number(filterExpressionAsString.substr(1).trim()); + return valueAsNumber > Number(filterExpressionAsString.substring(1).trim()); } else if (filterExpressionAsString.startsWith('<')) { - return valueAsNumber < Number(filterExpressionAsString.substr(1).trim()); + return valueAsNumber < Number(filterExpressionAsString.substring(1).trim()); } } else if (column.type === ColumnType.date){ const valueAsString = String(dataValue); @@ -480,13 +480,13 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate const filterExpressionAsString = String(filterExpression).trim(); if (filterExpressionAsString.startsWith('>=')) { - return valueAsDate >= convertToDate(filterExpressionAsString.substr(2).trim()); + return valueAsDate >= convertToDate(filterExpressionAsString.substring(2).trim()); } else if (filterExpressionAsString.startsWith('<=')) { - return valueAsDate <= convertToDate(filterExpressionAsString.substr(2).trim()); + return valueAsDate <= convertToDate(filterExpressionAsString.substring(2).trim()); } else if (filterExpressionAsString.startsWith('>')) { - return valueAsDate > convertToDate(filterExpressionAsString.substr(1).trim()); + return valueAsDate > convertToDate(filterExpressionAsString.substring(1).trim()); } else if (filterExpressionAsString.startsWith('<')) { - return valueAsDate < convertToDate(filterExpressionAsString.substr(1).trim()); + return valueAsDate < convertToDate(filterExpressionAsString.substring(1).trim()); } diff --git a/sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx b/sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx index f8ae6ea97..ab0d465e7 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx @@ -16,9 +16,9 @@ * ============LICENSE_END========================================================================== */ -import { Button, Checkbox, FormControlLabel, MenuItem, Popover, Switch, Typography } from '@mui/material'; -import connect, { Connect, IDispatcher } from '../../flux/connect'; -import * as React from 'react'; +import React from 'react'; +import { Button, FormControlLabel, Popover, Switch, Typography } from '@mui/material'; +import { connect, Connect, IDispatcher } from '../../flux/connect'; import { ColumnModel } from './columnModel'; import { IApplicationStoreState } from '../../store/applicationStore'; diff --git a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts index f9015493f..e2fda7647 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts @@ -51,6 +51,7 @@ export type ExternalMethodes<TData> = { onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void; onHideColumns: (columnName: string[]) => void; onShowColumns: (columnName: string[]) => void; + onClearFilters: () => void; }, createPreActions: (dispatch: Dispatch, skipRefresh?: boolean) => { onPreFilterChanged: (preFilter: { @@ -328,7 +329,13 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState dispatch((dispatch: Dispatch) => { dispatch(new ShowColumnsAction(columnName)); }) - } + }, + onClearFilters: () => { + dispatch((dispatch: Dispatch) => { + let filter = { }; + dispatch(new SetFilterChangedAction(filter)); + }); + }, // selected: }; }; diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx index 744cb0d24..626cb8978 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx @@ -27,6 +27,8 @@ import { WithStyles } from '@mui/styles'; import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; import { toAriaLabel } from '../../utilities/yangHelper'; +import { IconType } from '../../models/iconDefinition'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; const styles = (theme: Theme) => createStyles({ active: { @@ -35,7 +37,7 @@ const styles = (theme: Theme) => createStyles({ }); export interface IListItemLinkProps extends WithStyles<typeof styles> { - icon: JSX.Element | null; + icon: IconType | null; primary: string | React.ComponentType; secondary?: React.ComponentType; to: string; @@ -48,13 +50,19 @@ export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => { const renderLink = (itemProps: any): JSX.Element => ( props.external ? <a target="_blank" href={to} { ...itemProps }></a> : <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />); - + + const customIconHeight = 22; const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName); + + //create menu icon, either using an faIcon or a link to a custom svg icon + //moved to one place for easier usage + const listItemIcon = icon && ( typeof icon === 'string' ? <img height={customIconHeight} src={icon} /> : <FontAwesomeIcon icon={icon} /> ); + return ( <> <ListItem button component={ renderLink } aria-label={ariaLabel}> { icon - ? <ListItemIcon>{ icon }</ListItemIcon> + ? <ListItemIcon>{ listItemIcon }</ListItemIcon> : null } { typeof Primary === 'string' diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx index 195706d28..d969286b7 100644 --- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx +++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx @@ -15,15 +15,14 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import { Theme } from '@mui/material/styles'; +import classNames from 'classnames'; import { WithStyles } from '@mui/styles'; import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; -import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons'; - import Drawer from '@mui/material/Drawer'; import List from '@mui/material/List'; @@ -34,11 +33,14 @@ import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons'; import ListItemLink from '../components/material-ui/listItemLink'; -import connect, { Connect } from '../flux/connect'; +import { connect, Connect } from '../flux/connect'; import { MenuAction } from '../actions/menuAction'; -import * as classNames from 'classnames'; import { transportPCEUrl } from '../app'; +const aboutIcon = require('../assets/icons/About.svg'); +const homeIcon = require('../assets/icons/Home.svg'); +const loginIcon = require('../assets/icons/User.svg'); +const settingsIcon = require('../assets/icons/Tools.svg'); const drawerWidth = 240; @@ -141,16 +143,15 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di window.dispatchEvent(new Event('menu-resized')); }, [isOpen]) - let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => { - const reg = state.framework.applicationRegistraion[key]; - const icon = !reg.icon ? null :( typeof reg.icon === 'string' ? <img height={22} src={reg.icon} /> : <FontAwesomeIcon icon={reg.icon} /> ) + let menuItems = state.framework.applicationRegistration && Object.keys(state.framework.applicationRegistration).map(key => { + const reg = state.framework.applicationRegistration[key]; return reg && ( <ListItemLink key={reg.name} to={reg.path || `/${reg.name}`} primary={reg.menuEntry || reg.name} secondary={reg.subMenuEntry} - icon={icon} /> + icon={reg.icon || null} /> ) || null; }) || null; @@ -160,7 +161,7 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di key={"transportPCE"} to={transportUrl} primary={"TransportPCE"} - icon={<FontAwesomeIcon icon={faProjectDiagram} />} + icon={faProjectDiagram} external />; const linkFound = menuItems.find(obj => obj.key === "linkCalculation"); @@ -191,17 +192,17 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di <div className={classes.toolbar} /> { /* https://fiffty.github.io/react-treeview-mui/ */} <List className={classes.menu} component="nav"> - <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} /> + <ListItemLink exact to="/" primary="Home" icon={homeIcon} /> <Divider /> { menuItems } <Divider /> - <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} /> + <ListItemLink to="/about" primary="About" icon={aboutIcon} /> {(false && process.env.NODE_ENV === "development") ? <> <Divider /> - <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} /> + <ListItemLink to="/test" primary="Test" icon={settingsIcon} /> </> : null } diff --git a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx index d055b8a87..aa22f17f4 100644 --- a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx +++ b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx @@ -15,9 +15,9 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; -import connect, { Connect } from '../../flux/connect'; +import { connect, Connect } from '../../flux/connect'; import { SetTitleAction } from '../../actions/titleActions'; import { AddErrorInfoAction } from '../../actions/errorActions'; diff --git a/sdnr/wt/odlux/framework/src/components/settings/general.tsx b/sdnr/wt/odlux/framework/src/components/settings/general.tsx index 90f15c1d2..ffd516ba1 100644 --- a/sdnr/wt/odlux/framework/src/components/settings/general.tsx +++ b/sdnr/wt/odlux/framework/src/components/settings/general.tsx @@ -16,11 +16,11 @@ * ============LICENSE_END========================================================================== */ +import React from 'react'; import { Button, FormControlLabel, Switch, Typography } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { SettingsComponentProps } from '../../models/settings'; -import * as React from 'react'; -import connect, { Connect, IDispatcher } from '../../flux/connect'; +import { connect, Connect, IDispatcher } from '../../flux/connect'; import { IApplicationStoreState } from '../../store/applicationStore'; import { getGeneralSettingsAction, SetGeneralSettingsAction, updateGeneralSettingsAction } from '../../actions/settingsAction'; import { sendMessage, SettingsMessage } from '../../services/broadcastService'; diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx index 19d3bdf74..40c0fc736 100644 --- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx +++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx @@ -15,7 +15,7 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { Theme } from '@mui/material/styles'; @@ -27,9 +27,6 @@ import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; -import Block from '@mui/icons-material/Block'; -import Adjust from '@mui/icons-material/Adjust'; -import MenuIcon from '@mui/icons-material/Menu'; import AccountCircle from '@mui/icons-material/AccountCircle'; import MenuItem from '@mui/material/MenuItem'; import Menu from '@mui/material/Menu'; @@ -41,10 +38,12 @@ import { faDotCircle } from '@fortawesome/free-solid-svg-icons'; import { logoutUser } from '../actions/authentication'; import { PushAction, ReplaceAction } from '../actions/navigationActions'; -import connect, { Connect, IDispatcher } from '../flux/connect'; -import Logo from './logo'; +import { connect, Connect, IDispatcher } from '../flux/connect'; import { MenuAction, MenuClosedByUser } from '../actions/menuAction'; +import MenuIcon from './icons/menuIcon'; +import Logo from './logo'; + const styles = (theme: Theme) => createStyles({ appBar: { zIndex: theme.zIndex.drawer + 1, @@ -58,7 +57,8 @@ const styles = (theme: Theme) => createStyles({ }, icon: { marginLeft: 16, - marginRight: 8 + marginRight: 8, + marginBottom: -2, }, connected: { color: "green" @@ -112,10 +112,10 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE // add notificationInfo element before help - if (state.framework.applicationRegistraion) { + if (state.framework.applicationRegistration) { let isNotificationInfoAdded = false; - Object.keys(state.framework.applicationRegistraion).map(key => { - const reg = state.framework.applicationRegistraion[key]; + Object.keys(state.framework.applicationRegistration).map(key => { + const reg = state.framework.applicationRegistration[key]; if (reg && reg.statusBarElement) { if (key === "help") { isNotificationInfoAdded = true; @@ -132,7 +132,12 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE } const stateIcon = state.framework.applicationState.icon; - const icon = !stateIcon ? null :( typeof stateIcon === 'string' ? <img className={classes.icon} height={22} src={stateIcon} /> : <FontAwesomeIcon className={classes.icon} icon={stateIcon} /> ) + const customIconHeight = 22; + const icon = !stateIcon + ? null + : (typeof stateIcon === 'string' + ? <img className={classes.icon} height={customIconHeight} src={stateIcon} /> + : <FontAwesomeIcon className={classes.icon} icon={stateIcon} />) return ( |