The base layout completed.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent 44737750b8
commit c7c0f62ca2

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

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

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

@ -18,9 +18,11 @@
import Login from './User/Login/Login'
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
*/
export {Login, BaseLayout};
export {Login, BaseLayout, Create, NotFound};
Loading…
Cancel
Save