-/**\r
- * ============LICENSE_START========================================================================\r
- * ONAP : ccsdk feature sdnr wt odlux\r
- * =================================================================================================\r
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
- * =================================================================================================\r
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
- * in compliance with the License. You may obtain a copy of the License at\r
- *\r
- * http://www.apache.org/licenses/LICENSE-2.0\r
- *\r
- * Unless required by applicable law or agreed to in writing, software distributed under the License\r
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
- * or implied. See the License for the specific language governing permissions and limitations under\r
- * the License.\r
- * ============LICENSE_END==========================================================================\r
- */\r
-import * as React from 'react';\r
-import { withRouter, RouteComponentProps } from 'react-router-dom';\r
-\r
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
-import AppBar from '@material-ui/core/AppBar';\r
-import Toolbar from '@material-ui/core/Toolbar';\r
-import Typography from '@material-ui/core/Typography';\r
-import Button from '@material-ui/core/Button';\r
-import IconButton from '@material-ui/core/IconButton';\r
-import Block from '@material-ui/icons/Block';\r
-import Adjust from '@material-ui/icons/Adjust';\r
-import MenuIcon from '@material-ui/icons/Menu';\r
-import AccountCircle from '@material-ui/icons/AccountCircle';\r
-import MenuItem from '@material-ui/core/MenuItem';\r
-import Menu from '@material-ui/core/Menu';\r
-\r
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r
-import { faBan } from '@fortawesome/free-solid-svg-icons';\r
-import { faDotCircle } from '@fortawesome/free-solid-svg-icons';\r
-\r
-import { logoutUser } from '../actions/authentication';\r
-import { PushAction, ReplaceAction } from '../actions/navigationActions';\r
-\r
-import connect, { Connect, IDispatcher } from '../flux/connect';\r
-import Logo from './logo';\r
-import { MenuAction, MenuClosedByUser } from '../actions/menuAction';\r
-\r
-const styles = (theme: Theme) => createStyles({\r
- appBar: {\r
- zIndex: theme.zIndex.drawer + 1,\r
- },\r
- grow: {\r
- flexGrow: 1,\r
- },\r
- menuButton: {\r
- marginLeft: -12,\r
- marginRight: 20,\r
- },\r
- icon: {\r
- marginLeft: 16,\r
- marginRight: 8\r
- },\r
- connected: {\r
- color: "green"\r
- },\r
- notConnected: {\r
- color: "red"\r
- },\r
- notificationInfo: {\r
- marginLeft: 5\r
- }\r
-});\r
-\r
-const mapDispatch = (dispatcher: IDispatcher) => {\r
- return {\r
- logout: () => {\r
- dispatcher.dispatch(logoutUser());\r
- dispatcher.dispatch(new ReplaceAction("/login"));\r
- },\r
- openSettings : () =>{\r
- dispatcher.dispatch(new PushAction("/settings"));\r
- },\r
- toggleMainMenu: (value: boolean, value2: boolean) => {\r
- dispatcher.dispatch(new MenuAction(value));\r
- dispatcher.dispatch(new MenuClosedByUser(value2))\r
- }\r
- }\r
-};\r
-\r
-type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>\r
-\r
-class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {\r
-\r
- constructor(props: TitleBarProps) {\r
- super(props);\r
- this.state = {\r
- anchorEl: null\r
- }\r
-\r
- }\r
- render(): JSX.Element {\r
- const { classes, state, history, location } = this.props;\r
- const open = !!this.state.anchorEl;\r
- let toolbarElements: Array<JSX.Element>;\r
- toolbarElements = [];\r
-\r
- // create notificationInfo element\r
- const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?\r
- (state.framework.applicationState.isWebsocketAvailable ?\r
- <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>)\r
- : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>;\r
-\r
-\r
- // add notificationInfo element before help\r
- if (state.framework.applicationRegistraion) {\r
- let isNotificationInfoAdded = false;\r
- Object.keys(state.framework.applicationRegistraion).map(key => {\r
- const reg = state.framework.applicationRegistraion[key];\r
- if (reg && reg.statusBarElement) {\r
- if (key === "help") {\r
- isNotificationInfoAdded = true;\r
- toolbarElements.push(notificationInfo);\r
- }\r
- toolbarElements.push(<reg.statusBarElement key={key} />);\r
- }\r
- });\r
-\r
- // add notificationInfo in case help wasn't found\r
- if (!isNotificationInfoAdded) {\r
- toolbarElements.push(notificationInfo);\r
- }\r
- }\r
-\r
- return (\r
- <AppBar position="absolute" className={classes.appBar}>\r
- <Toolbar>\r
- <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleMainMenu}>\r
- <MenuIcon />\r
- </IconButton>\r
- <Logo />\r
- <Typography variant="h6" color="inherit" >\r
- {state.framework.applicationState.icon\r
- ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />)\r
- : null}\r
- {state.framework.applicationState.title}\r
- </Typography>\r
- <div className={classes.grow}></div>\r
- {\r
- // render toolbar\r
- toolbarElements.map((item) => {\r
- return item\r
- })\r
- }\r
-\r
- {state.framework.authenticationState.user\r
- ? (<div>\r
- <Button aria-label="current user menu button"\r
- aria-owns={open ? 'menu-appbar' : undefined}\r
- aria-haspopup="true"\r
- onClick={this.openMenu}\r
- color="inherit"\r
- >\r
- <AccountCircle />\r
- {state.framework.authenticationState.user.user}\r
- </Button>\r
- <Menu\r
- id="menu-appbar"\r
- anchorEl={this.state.anchorEl}\r
- anchorOrigin={{\r
- vertical: 'top',\r
- horizontal: 'right',\r
- }}\r
- transformOrigin={{\r
- vertical: 'top',\r
- horizontal: 'right',\r
- }}\r
- open={open}\r
- onClose={this.closeMenu}\r
- >\r
- {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}\r
- <MenuItem \r
- aria-label="settings-button"\r
- onClick={ () =>{\r
- this.props.openSettings();\r
- this.closeMenu(); }}>Settings</MenuItem>\r
- <MenuItem\r
- aria-label="logout-button"\r
- onClick={() => {\r
- this.props.logout();\r
- this.closeMenu();\r
- }}>Logout</MenuItem>\r
- </Menu>\r
- </div>)\r
- : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)}\r
- </Toolbar>\r
- </AppBar>\r
- );\r
- };\r
-\r
- private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => {\r
- console.log(this.props);\r
- if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) {\r
- const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen\r
- const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser\r
- this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser);\r
- }\r
- }\r
-\r
- private openMenu = (event: React.MouseEvent<HTMLElement>) => {\r
- this.setState({ anchorEl: event.currentTarget });\r
- };\r
-\r
- private closeMenu = () => {\r
- this.setState({ anchorEl: null });\r
- };\r
-}\r
-\r
-//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung\r
-\r
-export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));\r
+/**
+ * ============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
Code Review / ccsdk / features.git / blobdiff