diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/titleBar.tsx')
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/titleBar.tsx | 442 |
1 files changed, 225 insertions, 217 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx index 5d916e8c8..7872e51da 100644 --- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx +++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx @@ -1,218 +1,226 @@ -/**
- * ============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 * as React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Block from '@material-ui/icons/Block';
-import Adjust from '@material-ui/icons/Adjust';
-import MenuIcon from '@material-ui/icons/Menu';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBan } from '@fortawesome/free-solid-svg-icons';
-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 { MenuAction, MenuClosedByUser } from '../actions/menuAction';
-
-const styles = (theme: Theme) => createStyles({
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- grow: {
- flexGrow: 1,
- },
- menuButton: {
- marginLeft: -12,
- marginRight: 20,
- },
- icon: {
- marginLeft: 16,
- marginRight: 8
- },
- connected: {
- color: "green"
- },
- notConnected: {
- color: "red"
- },
- notificationInfo: {
- marginLeft: 5
- }
-});
-
-const mapDispatch = (dispatcher: IDispatcher) => {
- return {
- logout: () => {
- dispatcher.dispatch(logoutUser());
- dispatcher.dispatch(new ReplaceAction("/login"));
- },
- openSettings : () =>{
- dispatcher.dispatch(new PushAction("/settings"));
- },
- toggleMainMenu: (value: boolean, value2: boolean) => {
- dispatcher.dispatch(new MenuAction(value));
- dispatcher.dispatch(new MenuClosedByUser(value2))
- }
- }
-};
-
-type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>
-
-class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {
-
- constructor(props: TitleBarProps) {
- super(props);
- this.state = {
- anchorEl: null
- }
-
- }
- render(): JSX.Element {
- const { classes, state, history, location } = this.props;
- const open = !!this.state.anchorEl;
- let toolbarElements: Array<JSX.Element>;
- toolbarElements = [];
-
- // create notificationInfo element
- const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?
- (state.framework.applicationState.isWebsocketAvailable ?
- <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
- : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>;
-
-
- // add notificationInfo element before help
- if (state.framework.applicationRegistraion) {
- let isNotificationInfoAdded = false;
- Object.keys(state.framework.applicationRegistraion).map(key => {
- const reg = state.framework.applicationRegistraion[key];
- if (reg && reg.statusBarElement) {
- if (key === "help") {
- isNotificationInfoAdded = true;
- toolbarElements.push(notificationInfo);
- }
- toolbarElements.push(<reg.statusBarElement key={key} />);
- }
- });
-
- // add notificationInfo in case help wasn't found
- if (!isNotificationInfoAdded) {
- toolbarElements.push(notificationInfo);
- }
- }
-
- return (
- <AppBar position="absolute" className={classes.appBar}>
- <Toolbar>
- <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleMainMenu}>
- <MenuIcon />
- </IconButton>
- <Logo />
- <Typography variant="h6" color="inherit" >
- {state.framework.applicationState.icon
- ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />)
- : null}
- {state.framework.applicationState.title}
- </Typography>
- <div className={classes.grow}></div>
- {
- // render toolbar
- toolbarElements.map((item) => {
- return item
- })
- }
-
- {state.framework.authenticationState.user
- ? (<div>
- <Button aria-label="current user menu button"
- aria-owns={open ? 'menu-appbar' : undefined}
- aria-haspopup="true"
- onClick={this.openMenu}
- color="inherit"
- >
- <AccountCircle />
- {state.framework.authenticationState.user.user}
- </Button>
- <Menu
- id="menu-appbar"
- anchorEl={this.state.anchorEl}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- open={open}
- onClose={this.closeMenu}
- >
- {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
- <MenuItem
- aria-label="settings-button"
- onClick={ () =>{
- this.props.openSettings();
- this.closeMenu(); }}>Settings</MenuItem>
- <MenuItem
- aria-label="logout-button"
- onClick={() => {
- this.props.logout();
- this.closeMenu();
- }}>Logout</MenuItem>
- </Menu>
- </div>)
- : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)}
- </Toolbar>
- </AppBar>
- );
- };
-
- private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => {
- console.log(this.props);
- if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) {
- const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen
- const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser
- this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser);
- }
- }
-
- private openMenu = (event: React.MouseEvent<HTMLElement>) => {
- this.setState({ anchorEl: event.currentTarget });
- };
-
- private closeMenu = () => {
- this.setState({ anchorEl: null });
- };
-}
-
-//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung
-
-export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));
+/** + * ============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 * as React from 'react'; +import { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import AppBar from '@mui/material/AppBar'; +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'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faBan } from '@fortawesome/free-solid-svg-icons'; +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 { MenuAction, MenuClosedByUser } from '../actions/menuAction'; + +const styles = (theme: Theme) => createStyles({ + appBar: { + zIndex: theme.zIndex.drawer + 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + icon: { + marginLeft: 16, + marginRight: 8 + }, + connected: { + color: "green" + }, + notConnected: { + color: "red" + }, + notificationInfo: { + marginLeft: 5 + } +}); + +const mapDispatch = (dispatcher: IDispatcher) => { + return { + logout: () => { + dispatcher.dispatch(logoutUser()); + dispatcher.dispatch(new ReplaceAction("/login")); + }, + openSettings : () =>{ + dispatcher.dispatch(new PushAction("/settings")); + }, + toggleMainMenu: (value: boolean, value2: boolean) => { + dispatcher.dispatch(new MenuAction(value)); + dispatcher.dispatch(new MenuClosedByUser(value2)) + } + } +}; + +type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch> + +class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> { + + constructor(props: TitleBarProps) { + super(props); + this.state = { + anchorEl: null + } + + } + render(): JSX.Element { + const { classes, state, history, location } = this.props; + const open = !!this.state.anchorEl; + let toolbarElements: Array<JSX.Element>; + toolbarElements = []; + + // create notificationInfo element + const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ? + (state.framework.applicationState.isWebsocketAvailable ? + <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>) + : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>; + + + // add notificationInfo element before help + if (state.framework.applicationRegistraion) { + let isNotificationInfoAdded = false; + Object.keys(state.framework.applicationRegistraion).map(key => { + const reg = state.framework.applicationRegistraion[key]; + if (reg && reg.statusBarElement) { + if (key === "help") { + isNotificationInfoAdded = true; + toolbarElements.push(notificationInfo); + } + toolbarElements.push(<reg.statusBarElement key={key} />); + } + }); + + // add notificationInfo in case help wasn't found + if (!isNotificationInfoAdded) { + toolbarElements.push(notificationInfo); + } + } + + return ( + <AppBar enableColorOnDark position="absolute" className={classes.appBar}> + <Toolbar> + <IconButton + className={classes.menuButton} + color="inherit" + aria-label="Menu" + onClick={this.toggleMainMenu} + size="large"> + <MenuIcon /> + </IconButton> + <Logo /> + <Typography variant="h6" color="inherit" > + {state.framework.applicationState.icon + ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />) + : null} + {state.framework.applicationState.title} + </Typography> + <div className={classes.grow}></div> + { + // render toolbar + toolbarElements.map((item) => { + return item + }) + } + + {state.framework.authenticationState.user + ? (<div> + <Button aria-label="current user menu button" + aria-owns={open ? 'menu-appbar' : undefined} + aria-haspopup="true" + onClick={this.openMenu} + color="inherit" + > + <AccountCircle /> + {state.framework.authenticationState.user.user} + </Button> + <Menu + id="menu-appbar" + anchorEl={this.state.anchorEl} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + open={open} + onClose={this.closeMenu} + > + {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */} + <MenuItem + aria-label="settings-button" + onClick={ () =>{ + this.props.openSettings(); + this.closeMenu(); }}>Settings</MenuItem> + <MenuItem + aria-label="logout-button" + onClick={() => { + this.props.logout(); + this.closeMenu(); + }}>Logout</MenuItem> + </Menu> + </div>) + : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)} + </Toolbar> + </AppBar> + ); + }; + + private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => { + console.log(this.props); + if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) { + const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen + const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser + this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser); + } + } + + private openMenu = (event: React.MouseEvent<HTMLElement>) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + private closeMenu = () => { + this.setState({ anchorEl: null }); + }; +} + +//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung + +export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent))); export default TitleBar;
\ No newline at end of file |