sysmocom
/
open5gs
forked from acouzens/open5gs
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update it

This commit is contained in:
Sukchan Lee 2017-06-07 21:16:05 +09:00
parent e42a1a82b3
commit f1f6af985c
9 changed files with 292 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webui/pages/index.js
View File

@ -4,7 +4,7 @@ import withRedux from 'next-redux-wrapper';
import { initStore } from '../src/store.js';
import withSession from '../src/lib/with-session';
import Login from '../src/components/Login';
import App from '../src/App';
import App from '../src/containers/App';
const Restricted = (Component) => {
const checkAuth = (props) => {

134
webui/src/App.js
View File

@ -1,134 +0,0 @@
import Package from '../package';
import { Component } from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import compose from 'recompose/compose';
import Session from './lib/session';
import withWidth, { SMALL } from './lib/with-width';
import * as sidebarActions from './modules/sidebar';
import styled from 'styled-components';
import oc from 'open-color';
import { media, transitions } from './lib/style-utils';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Container from './components/Container';
import PdnContainer from './containers/PdnContainer';
import UserContainer from './containers/UserContainer';
const Body = styled.div`
display: flex;
height: calc(100vh - 4rem);
`
const Content = styled.div`
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
line-height: 8rem;
color: ${oc.gray[5]};
border-top: 1px solid ${oc.gray[4]};
box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20);
background-color: white;
`;
class App extends Component {
static propTypes = {
session: PropTypes.string.isRequired,
width: PropTypes.number.isRequired
}
componentWillMount() {
const {
width,
SidebarActions
} = this.props;
if (width !== SMALL) {
SidebarActions.setVisibility(true);
}
}
handleToggle = () => {
const { SidebarActions } = this.props;
SidebarActions.toggle();
}
handleSelect = (view) => {
const {
width,
SidebarActions
} = this.props;
SidebarActions.setView(view);
if (width === SMALL) {
SidebarActions.toggle();
}
}
render() {
const title = 'Next.EPC ' + Package.version;
const session = this.props.session;
const {
visible,
view
} = this.props;
const {
handleToggle,
handleSelect
} = this;
return (
<div>
<Head>
<title>{title}</title>
</Head>
<Header onMenuAction={handleToggle}/>
<Body>
<Sidebar
visible={visible}
selected={view}
onSelect={handleSelect}/>
<Container visible={view === 'pdn'}>
<PdnContainer/>
</Container>
<Container visible={view === 'user'}>
<UserContainer/>
</Container>
<Container visible={view === 'test1'}>
<Content>{view}</Content>
</Container>
<Container visible={view === 'test3'}>
<Content>{view}</Content>
</Container>
</Body>
</div>
)
}
}
const enhance = compose(
withWidth(),
connect(
(state) => ({
visible: state.sidebar.get('visible'),
view: state.sidebar.get('view')
}),
(dispatch) => ({
SidebarActions: bindActionCreators(sidebarActions, dispatch)
})
)
);
export default enhance(App);

96
webui/src/components/Header.js
View File

@ -1,4 +1,3 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@ -7,11 +6,6 @@ import oc from 'open-color';
import MenuIcon from 'react-icons/lib/md/menu';
import ThumbnailIcon from './Thumbnail';
import Session from '../lib/session';
import Logout from './Logout';
import Dimmed from './Dimmed';
const Wrapper = styled.div`
display: flex;
align-items: center;
@ -46,77 +40,25 @@ const Thumbnail = styled.div`
cursor: pointer;
`;
class Header extends Component {
state = {
logout: {
visible: false,
dimmed: false
}
}
logoutHandler = {
show: () => {
this.setState({
logout: {
...this.state.logout,
visible: true,
dimmed: true
}
})
},
hide: () => {
this.setState({
logout: {
...this.state.logout,
visible: false,
dimmed: false
}
})
},
action: async () => {
this.setState({
logout: {
...this.state.logout,
visible: false,
}
})
const session = new Session()
await session.signout()
// @FIXME next/router not working reliably so using window.location
window.location = '/'
}
}
render() {
const {
logoutHandler
} = this;
const {
logout
} = this.state;
return (
<Wrapper>
<Menu onClick={this.props.onMenuAction}>
<MenuIcon/>
</Menu>
<Title>
Next.EPC
</Title>
<Thumbnail onClick={this.logoutHandler.show}>
<ThumbnailIcon size="2rem" color={oc['pink'][4]} />
</Thumbnail>
<Logout
{...logout}
onHide={logoutHandler.hide}
onAction={logoutHandler.action} />
<Dimmed visible={logout.dimmed} />
</Wrapper>
)
}
const propTypes = {
onSidebarToggle: PropTypes.func.isRequired,
onLogout: PropTypes.func.isRequired
}
const Header = ({ onSidebarToggle, onLogout }) => (
<Wrapper>
<Menu onClick={onSidebarToggle}>
<MenuIcon/>
</Menu>
<Title>
Next.EPC
</Title>
<Thumbnail onClick={onLogout}>
<ThumbnailIcon size="2rem" color={oc['pink'][4]} />
</Thumbnail>
</Wrapper>
)
Header.propTypes = propTypes;
export default Header;

52
webui/src/components/Layout.js Normal file
View File

@ -0,0 +1,52 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { media, transitions} from '../lib/style-utils';
import oc from 'open-color';
import Head from 'next/head';
import HeaderContainer from '../containers/HeaderContainer';
import SidebarContainer from '../containers/SidebarContainer';
const Main = styled.div`
display: flex;
height: calc(100vh - 4rem);
`
const propTypes = {
title: PropTypes.string;
}
const Layout = ({title, children}) => (
<div>
<Head>
<title>{title}</title>
</Head>
<HeaderContainer/>
<Main>
<SidebarContainer/>
{children}
</Main>
</div>
)
Layout.propTypes = propTypes;
Layout.Content = styled.div`
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
line-height: 8rem;
color: ${oc.gray[5]};
border-top: 1px solid ${oc.gray[4]};
box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20);
background-color: white;
`;
export default Layout;

2
webui/src/components/Sidebar.js
View File

@ -105,7 +105,7 @@ Sidebar.propTypes = {
Sidebar.defaultProps = {
visible: false,
width: "16rem",
selected: "PDN"
selected: "pdn"
};
export default Sidebar;

36
webui/src/containers/App.js Normal file
View File

@ -0,0 +1,36 @@
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Layout from '../components/Layout';
import Container from '../components/Container';
import PdnContainer from '../containers/PdnContainer';
import UserContainer from '../containers/UserContainer';
import Package from '../../package';
const App = ({ session, view }) => (
<Layout title={`Next.EPC ${Package.version}`}>
<Container visible={view === 'pdn'}>
<PdnContainer/>
</Container>
<Container visible={view === 'user'}>
<UserContainer/>
</Container>
<Container visible={view === 'test1'}>
<Layout.Content>{view}</Layout.Content>
</Container>
<Container visible={view === 'test3'}>
<Layout.Content>{view}</Layout.Content>
</Container>
</Layout>
)
App.propTypes = {
session: PropTypes.object.isRequired,
}
export default connect(
(state) => ({
view: state.sidebar.get('view')
})
)(App);

100
webui/src/containers/HeaderContainer.js Normal file
View File

@ -0,0 +1,100 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as sidebarActions from '../modules/sidebar';
import Session from '../lib/session';
import Header from '../components/Header';
import Logout from '../components//Logout';
import Dimmed from '../components//Dimmed';
class HeaderContainer extends Component {
componentWillMount() {
const {
SidebarActions
} = this.props;
}
handleToggle = () => {
const { SidebarActions } = this.props;
SidebarActions.toggle();
}
state = {
logout: {
visible: false,
dimmed: false
}
}
logoutHandler = {
show: () => {
this.setState({
logout: {
...this.state.logout,
visible: true,
dimmed: true
}
})
},
hide: () => {
this.setState({
logout: {
...this.state.logout,
visible: false,
dimmed: false
}
})
},
action: async () => {
this.setState({
logout: {
...this.state.logout,
visible: false,
}
})
const session = new Session()
await session.signout()
// @FIXME next/router not working reliably so using window.location
window.location = '/'
}
}
render() {
const {
handleSidebarToggle,
logoutHandler
} = this;
const {
logout
} = this.state;
return (
<div>
<Header
onSidebarToggle={handleSidebarToggle}
onLogout={logoutHandler.show}
/>
<Logout
{...logout}
onHide={logoutHandler.hide}
onAction={logoutHandler.action} />
<Dimmed visible={logout.dimmed} />
</div>
)
}
}
export default connect(
null,
(dispatch) => ({
SidebarActions: bindActionCreators(sidebarActions, dispatch)
})
)(HeaderContainer);

79
webui/src/containers/SidebarContainer.js Normal file
View File

@ -0,0 +1,79 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import compose from 'recompose/compose';
import withWidth, { SMALL } from '../lib/with-width';
import * as sidebarActions from '../modules/sidebar';
import Sidebar from '../components/Sidebar';
class SidebarContainer extends Component {
static propTypes = {
width: PropTypes.number.isRequired
}
componentWillMount() {
const {
width,
SidebarActions
} = this.props;
if (width !== SMALL) {
SidebarActions.setVisibility(true);
}
}
handleToggle = () => {
const { SidebarActions } = this.props;
SidebarActions.toggle();
}
handleSelect = (view) => {
const {
width,
SidebarActions
} = this.props;
SidebarActions.setView(view);
if (width === SMALL) {
SidebarActions.toggle();
}
}
render() {
const {
visible,
view
} = this.props;
const {
handleToggle,
handleSelect
} = this;
return (
<Sidebar
visible={visible}
selected={view}
onSelect={handleSelect}/>
)
}
}
const enhance = compose(
withWidth(),
connect(
(state) => ({
visible: state.sidebar.get('isOpen'),
view: state.sidebar.get('view')
}),
(dispatch) => ({
SidebarActions: bindActionCreators(sidebarActions, dispatch)
})
)
);
export default enhance(SidebarContainer);

8
webui/src/modules/sidebar.js
View File

@ -6,16 +6,16 @@ const SET_VISIBILITY = 'sidebar/SET_VISIBILITY';
const SET_VIEW = 'sidebar/SET_VIEW';
export const toggle = createAction(TOGGLE); // No payload
export const setVisibility = createAction(SET_VISIBILITY); // visible
export const setVisibility = createAction(SET_VISIBILITY); // isOpen
export const setView = createAction(SET_VIEW); // view
const initialState = Map({
visible: false,
isOpen: false,
view: 'pdn'
});
export default handleActions({
[TOGGLE]: (state, action) => state.set('visible', !state.get('visible')),
[SET_VISIBILITY]: (state, action) => state.set('visible', action.payload),
[TOGGLE]: (state, action) => state.set('isOpen', !state.get('isOpen')),
[SET_VISIBILITY]: (state, action) => state.set('isOpen', action.payload),
[SET_VIEW]: (state, action) => state.set('view', action.payload)
}, initialState);