The base layout completed.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 44737750b8
commit c7c0f62ca2

@ -14,6 +14,7 @@
"history": "^4.6.3", "history": "^4.6.3",
"latest-version": "^3.1.0", "latest-version": "^3.1.0",
"material-ui": "^0.19.0", "material-ui": "^0.19.0",
"material-ui-datatables": "^0.18.2",
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1", "react-dom": "^15.6.1",
"react-images-uploader": "^1.1.0", "react-images-uploader": "^1.1.0",
@ -23,7 +24,7 @@
"react-router-dom": "^4.1.2", "react-router-dom": "^4.1.2",
"react-scripts": "1.0.10", "react-scripts": "1.0.10",
"react-sliding-pane": "^1.2.3", "react-sliding-pane": "^1.2.3",
"react-table": "^6.5.1" "react-tap-event-plugin": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.24.1", "babel-core": "^6.24.1",

@ -17,33 +17,43 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom' import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import './App.css'; import './App.css'
import {Login, BaseLayout} from './components' import {BaseLayout, Create, Login, NotFound} from './components'
import createHistory from 'history/createBrowserHistory';
const history = createHistory({basename:'/publisher'});
class Base extends Component { class Base extends Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
user: "" user: "m"
} }
} }
render() { render() {
if (this.state.user) { if (this.state.user) {
return(<BaseLayout> return(
<div className="container">
<BaseLayout>
<Switch> <Switch>
<Route path={"assets/apps"}/> <Redirect exact path={"/"} to={"/assets"}/>
<Route path={"assets/apps/:app"}/> <Route exact path={"/assets"} component={NotFound}/>
<Route path={"assets/apps/create"}/> <Route path={"/assets/apps"} component={Create}/>
<Route path={"assets/apps/edit"}/> <Route path={"/assets/apps/:app"}/>
<Route path={"assets/platform/:platform"}/> <Route path={"/assets/apps/create"}/>
<Route path={"assets/platform/create"}/> <Route path={"/assets/apps/edit"}/>
<Route path={"assets/platform/edit"}/> <Route path={"/assets/platform/:platform"}/>
<Route path={"assets/reviews"}/> <Route path={"/assets/platform/create"}/>
<Route path={"assets/reviews/:review"}/> <Route path={"/assets/platform/edit"}/>
<Route path={"/assets/reviews"}/>
<Route path={"/assets/reviews/:review"}/>
<Route component={NotFound} />
</Switch> </Switch>
</BaseLayout> </BaseLayout>
</div>
) )
} }
@ -55,7 +65,7 @@ class Publisher extends Component {
render() { render() {
return ( return (
<div className="App"> <div className="App">
<Router basename="publisher"> <Router basename="publisher" history={history}>
<Switch> <Switch>
<Route path="/login" component={Login}/> <Route path="/login" component={Login}/>
<Route path="/logout" component={Login}/> <Route path="/logout" component={Login}/>

@ -17,10 +17,70 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import Menu from 'material-ui/Menu';
import IconButton from 'material-ui/IconButton';
import Notifications from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import {withRouter} from 'react-router-dom'
/**
* Base Layout:
* App bar
* Left Navigation
* Middle content.
* */
class BaseLayout extends Component { class BaseLayout extends Component {
handleApplicationClick() {
console.log("Application");
window.location = '/publisher/assets/apps';
}
render() {
return (
<div>
<AppBar title="App Publisher"
iconElementRight={
<div>
<IconButton>
<Notifications/>
</IconButton>
<IconButton onClick={() => {
console.log("Clicked")
}}>
<ActionAccountCircle/>
</IconButton>
</div>
}
/>
<div>
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: 64}} open={true}>
<Menu>
<MenuItem onClick={this.handleApplicationClick.bind(this)}>Applications</MenuItem>
<MenuItem>Platforms</MenuItem>
<MenuItem>Reviews</MenuItem>
</Menu>
</Drawer>
</div>
<div style=
{
{
height: 'calc(100% - 64px)',
marginLeft: '16%',
width: 'calc(100%-15%)',
top: 64,
left: "-100px"
}
}>
{this.props.children}
</div>
</div>);
}
} }
export default BaseLayout; export default withRouter(BaseLayout);

@ -0,0 +1,41 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you 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.
*/
import React, {Component} from 'react';
class Error extends Component {
constructor() {
super();
}
componentWillMount() {
console.log("In Crate")
}
render() {
return (
<div>
404 not found
</div>
);
}
}
export default Error;

@ -36,6 +36,7 @@ class Login extends Component {
handleLogin(event) { handleLogin(event) {
console.log(this.state); console.log(this.state);
event.preventDefault(); event.preventDefault();
} }
@ -66,8 +67,11 @@ class Login extends Component {
render() { render() {
return ( return (
<div> <div>
{/*TODO: Style the components.*/}
<Card> <Card>
<CardTitle title="Login to App Publisher"/> <CardTitle title="WSO2 IoT App Publisher"/>
<CardMedia> <CardMedia>
</CardMedia> </CardMedia>

@ -18,9 +18,11 @@
import Login from './User/Login/Login' import Login from './User/Login/Login'
import BaseLayout from './Base/BaseLayout' import BaseLayout from './Base/BaseLayout'
import Create from './Application/Create'
import NotFound from './Error/NotFound'
/** /**
* Contains all UI components related to Application, Login and Platform * Contains all UI components related to Application, Login and Platform
*/ */
export {Login, BaseLayout}; export {Login, BaseLayout, Create, NotFound};
Loading…
Cancel
Save