mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Added the stepper and App creation first step.
This commit is contained in:
parent
c7c0f62ca2
commit
d2705b1427
@ -15,6 +15,7 @@
|
|||||||
"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",
|
"material-ui-datatables": "^0.18.2",
|
||||||
|
"qs": "^6.5.0",
|
||||||
"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",
|
||||||
|
|||||||
@ -16,20 +16,19 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
|
||||||
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
|
|
||||||
import './App.css'
|
import './App.css'
|
||||||
import {BaseLayout, Create, Login, NotFound} from './components'
|
import React, {Component} from 'react';
|
||||||
import createHistory from 'history/createBrowserHistory';
|
import createHistory from 'history/createHashHistory';
|
||||||
|
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
|
||||||
|
import {BaseLayout, Create, Login, NotFound, PublisherOverview} from './components'
|
||||||
|
|
||||||
const history = createHistory({basename: '/publisher'});
|
const history = createHistory({basename: '/publisher'});
|
||||||
|
|
||||||
|
|
||||||
class Base extends Component {
|
class Base extends Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.state = {
|
this.state = {
|
||||||
user: "m"
|
user: "s"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -39,15 +38,15 @@ class Base extends Component {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Redirect exact path={"/"} to={"/assets"}/>
|
<Redirect exact path={"/"} to={"/overview"}/>
|
||||||
<Route exact path={"/assets"} component={NotFound}/>
|
<Route exact path={"/overview"} component={PublisherOverview}/>
|
||||||
<Route path={"/assets/apps"} component={Create}/>
|
{/*<Route path={"/assets/apps"} component={}/>*/}
|
||||||
<Route path={"/assets/apps/:app"}/>
|
{/*<Route path={"/assets/apps/:app"} component={}/>*/}
|
||||||
<Route path={"/assets/apps/create"}/>
|
<Route path={"/assets/apps/create"} component={Create}/>
|
||||||
<Route path={"/assets/apps/edit"}/>
|
{/*<Route path={"/assets/apps/edit/:app"} component="app edit"/>*/}
|
||||||
<Route path={"/assets/platform/:platform"}/>
|
<Route path={"/assets/platforms/:platform"}/>
|
||||||
<Route path={"/assets/platform/create"}/>
|
<Route path={"/assets/platforms/create"}/>
|
||||||
<Route path={"/assets/platform/edit"}/>
|
<Route path={"/assets/platforms/edit/:platform"}/>
|
||||||
<Route path={"/assets/reviews"}/>
|
<Route path={"/assets/reviews"}/>
|
||||||
<Route path={"/assets/reviews/:review"}/>
|
<Route path={"/assets/reviews/:review"}/>
|
||||||
<Route component={NotFound}/>
|
<Route component={NotFound}/>
|
||||||
|
|||||||
@ -15,3 +15,171 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import React, {Component} from 'react';
|
||||||
|
import Dialog from 'material-ui/Dialog';
|
||||||
|
import {withRouter} from 'react-router-dom';
|
||||||
|
import {Step1, Step2, Step3} from './Forms';
|
||||||
|
import FlatButton from 'material-ui/FlatButton';
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import {Card, CardActions, CardTitle} from 'material-ui/Card';
|
||||||
|
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
|
||||||
|
|
||||||
|
class Create extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.setStepData.bind(this);
|
||||||
|
this.removeStepData.bind(this);
|
||||||
|
this.handleSubmit.bind(this);
|
||||||
|
this.handleCancel.bind(this);
|
||||||
|
this.handleYes.bind(this);
|
||||||
|
this.handleNo.bind(this);
|
||||||
|
this.state = {
|
||||||
|
finished: false,
|
||||||
|
stepIndex: 0,
|
||||||
|
stepData: [],
|
||||||
|
isDialogOpen: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNext = () => {
|
||||||
|
const {stepIndex} = this.state;
|
||||||
|
this.setState({
|
||||||
|
stepIndex: stepIndex + 1,
|
||||||
|
finished: stepIndex >= 2,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSubmit = () => {
|
||||||
|
console.log(this.state.stepData);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleCancel = () => {
|
||||||
|
this.setState({isDialogOpen: true});
|
||||||
|
};
|
||||||
|
|
||||||
|
handlePrev = () => {
|
||||||
|
const {stepIndex} = this.state;
|
||||||
|
if (stepIndex > 0) {
|
||||||
|
this.removeStepData();
|
||||||
|
this.setState({stepIndex: stepIndex - 1});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
setStepData = (step, data) => {
|
||||||
|
console.log(step, data, this.state.stepData);
|
||||||
|
let tmpStepData = this.state.stepData;
|
||||||
|
tmpStepData.push({step: step, data: data});
|
||||||
|
|
||||||
|
this.setState({stepData: tmpStepData})
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the last data point
|
||||||
|
* */
|
||||||
|
removeStepData = () => {
|
||||||
|
let tempData = this.state.stepData;
|
||||||
|
tempData.pop();
|
||||||
|
this.setState({stepData: tempData});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleYes = () => {
|
||||||
|
this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleNo = () => {
|
||||||
|
this.setState({isDialogOpen: false});
|
||||||
|
};
|
||||||
|
|
||||||
|
getStepContent(stepIndex) {
|
||||||
|
switch (stepIndex) {
|
||||||
|
case 0:
|
||||||
|
return <Step1 handleNext={this.handleNext}
|
||||||
|
setData={this.setStepData}
|
||||||
|
removeData={this.removeStepData}/>;
|
||||||
|
case 1:
|
||||||
|
return <Step2 handleNext={this.handleNext}
|
||||||
|
handlePrev={this.handlePrev}
|
||||||
|
setData={this.setStepData}
|
||||||
|
removeData={this.removeStepData}/>;
|
||||||
|
case 2:
|
||||||
|
return <Step3 handleFinish={this.handleNext}
|
||||||
|
handlePrev={this.handlePrev}
|
||||||
|
setData={this.setStepData}
|
||||||
|
removeData={this.removeStepData}/>;
|
||||||
|
default:
|
||||||
|
return 'You\'re a long way from home sonny jim!';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {finished, stepIndex} = this.state;
|
||||||
|
const contentStyle = {margin: '0 16px'};
|
||||||
|
|
||||||
|
const actions = [
|
||||||
|
<FlatButton
|
||||||
|
label="Yes"
|
||||||
|
primary={true}
|
||||||
|
onClick={this.handleYes}
|
||||||
|
/>,
|
||||||
|
<FlatButton
|
||||||
|
label="No"
|
||||||
|
secondary={true}
|
||||||
|
onClick={this.handleNo}
|
||||||
|
/>,
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
|
||||||
|
<Card>
|
||||||
|
<CardTitle title="Create Application"/>
|
||||||
|
|
||||||
|
{/**
|
||||||
|
* The stepper goes here.
|
||||||
|
*/}
|
||||||
|
<CardActions>
|
||||||
|
<div style={{width: '100%', margin: 'auto'}}>
|
||||||
|
<Stepper activeStep={stepIndex}>
|
||||||
|
<Step>
|
||||||
|
<StepLabel>Select Application Platform</StepLabel>
|
||||||
|
</Step>
|
||||||
|
<Step>
|
||||||
|
<StepLabel>Enter Application Details</StepLabel>
|
||||||
|
</Step>
|
||||||
|
<Step>
|
||||||
|
<StepLabel>Release</StepLabel>
|
||||||
|
</Step>
|
||||||
|
</Stepper>
|
||||||
|
<div style={contentStyle}>
|
||||||
|
{finished ? (
|
||||||
|
<div>
|
||||||
|
<p>Create App?</p>
|
||||||
|
<form onSubmit={this.handleSubmit}>
|
||||||
|
<RaisedButton primary={true} label="Create" onClick={this.handleSubmit}/>
|
||||||
|
<FlatButton label="Cancel" onClick={this.handleCancel}/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{this.getStepContent(stepIndex)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
<Dialog
|
||||||
|
actions={actions}
|
||||||
|
modal={false}
|
||||||
|
open={this.state.isDialogOpen}
|
||||||
|
onRequestClose={this.handleNo}
|
||||||
|
>
|
||||||
|
Do you really want to cancel?
|
||||||
|
</Dialog>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(Create);
|
||||||
|
|||||||
@ -0,0 +1,117 @@
|
|||||||
|
/*
|
||||||
|
* 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';
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import FlatButton from 'material-ui/FlatButton';
|
||||||
|
import TextField from 'material-ui/TextField';
|
||||||
|
import SelectField from 'material-ui/SelectField';
|
||||||
|
import MenuItem from 'material-ui/MenuItem';
|
||||||
|
|
||||||
|
class Step1 extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
finished: false,
|
||||||
|
stepIndex: 0,
|
||||||
|
store: 1,
|
||||||
|
platform: 1,
|
||||||
|
stepData: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNext = () => {
|
||||||
|
this.props.handleNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
setStepData() {
|
||||||
|
this.props.setData("step1", {step:"Dfds"});
|
||||||
|
this.handleNext.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClick() {
|
||||||
|
this.setStepData();
|
||||||
|
this.handleNext();
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePrev() {
|
||||||
|
this.props.handlePrev();
|
||||||
|
}
|
||||||
|
|
||||||
|
onChangePlatform = (event, index, value) => {
|
||||||
|
this.setState({platform: value});
|
||||||
|
};
|
||||||
|
|
||||||
|
onChangeStore = (event, index, value) => {
|
||||||
|
this.setState({store: value});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {finished, stepIndex} = this.state;
|
||||||
|
const contentStyle = {margin: '0 16px'};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={contentStyle}>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<TextField
|
||||||
|
hintText="Enter a title for your application."
|
||||||
|
floatingLabelText="Title*"
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
/><br />
|
||||||
|
<SelectField
|
||||||
|
floatingLabelText="Store Type*"
|
||||||
|
value={this.state.store}
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
onChange={this.onChangeStore.bind(this)}
|
||||||
|
>
|
||||||
|
<MenuItem value={1} primaryText="Enterprise" />
|
||||||
|
<MenuItem value={2} primaryText="Public" />
|
||||||
|
</SelectField> <br />
|
||||||
|
<SelectField
|
||||||
|
floatingLabelText="Platform*"
|
||||||
|
value={this.state.platform}
|
||||||
|
floatingLabelFixed={true}
|
||||||
|
onChange={this.onChangePlatform.bind(this)}
|
||||||
|
>
|
||||||
|
<MenuItem value={1} primaryText="Android" />
|
||||||
|
<MenuItem value={2} primaryText="iOS" />
|
||||||
|
<MenuItem value={3} primaryText="Web" />
|
||||||
|
</SelectField>
|
||||||
|
</div>
|
||||||
|
<div style={{marginTop: 12}}>
|
||||||
|
<FlatButton
|
||||||
|
label="< Back"
|
||||||
|
disabled= {true}
|
||||||
|
onClick={this.handlePrev.bind(this)}
|
||||||
|
style={{marginRight: 12}}
|
||||||
|
/>
|
||||||
|
<RaisedButton
|
||||||
|
label="Next >"
|
||||||
|
primary={true}
|
||||||
|
onClick={this.handleClick.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Step1;
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
/*
|
||||||
|
* 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';
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import FlatButton from 'material-ui/FlatButton';
|
||||||
|
|
||||||
|
class Step2 extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNext() {
|
||||||
|
this.props.handleNext();
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePrev() {
|
||||||
|
this.props.handlePrev();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const contentStyle = {margin: '0 16px'};
|
||||||
|
return (
|
||||||
|
<div style={contentStyle}>
|
||||||
|
Step2
|
||||||
|
<div>
|
||||||
|
<div style={{marginTop: 12}}>
|
||||||
|
<FlatButton
|
||||||
|
label="< Back"
|
||||||
|
disabled= {false}
|
||||||
|
onClick={this.handlePrev.bind(this)}
|
||||||
|
style={{marginRight: 12}}
|
||||||
|
/>
|
||||||
|
<RaisedButton
|
||||||
|
label="Next >"
|
||||||
|
primary={true}
|
||||||
|
onClick={this.handleNext.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Step2;
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
/*
|
||||||
|
* 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';
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import FlatButton from 'material-ui/FlatButton';
|
||||||
|
|
||||||
|
class Step3 extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleFinish() {
|
||||||
|
this.props.handleFinish();
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePrev() {
|
||||||
|
this.props.handlePrev();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const contentStyle = {margin: '0 16px'};
|
||||||
|
return (
|
||||||
|
<div style={contentStyle}>
|
||||||
|
Step3
|
||||||
|
<div>
|
||||||
|
<div style={{marginTop: 12}}>
|
||||||
|
<FlatButton
|
||||||
|
label="< Back"
|
||||||
|
disabled= {false}
|
||||||
|
onClick={this.handlePrev.bind(this)}
|
||||||
|
style={{marginRight: 12}}
|
||||||
|
/>
|
||||||
|
<RaisedButton
|
||||||
|
label="Finish"
|
||||||
|
primary={true}
|
||||||
|
onClick={this.handleFinish.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Step3;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
/*
|
||||||
|
* 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 Step1 from './Step1';
|
||||||
|
import Step2 from './Step2';
|
||||||
|
import Step3 from './Step3';
|
||||||
|
|
||||||
|
export {Step1, Step2, Step3};
|
||||||
@ -19,12 +19,17 @@
|
|||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import AppBar from 'material-ui/AppBar';
|
import AppBar from 'material-ui/AppBar';
|
||||||
import Drawer from 'material-ui/Drawer';
|
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 IconButton from 'material-ui/IconButton';
|
||||||
import Notifications from 'material-ui/svg-icons/social/notifications';
|
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
|
||||||
|
import Apps from 'material-ui/svg-icons/navigation/apps';
|
||||||
|
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
|
||||||
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
|
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
|
||||||
|
import Dashboard from 'material-ui/svg-icons/action/dashboard';
|
||||||
|
import Add from 'material-ui/svg-icons/content/add-circle';
|
||||||
|
import Feedback from 'material-ui/svg-icons/action/feedback';
|
||||||
import {withRouter} from 'react-router-dom'
|
import {withRouter} from 'react-router-dom'
|
||||||
|
import Badge from 'material-ui/Badge';
|
||||||
|
import {List, ListItem} from 'material-ui/List';
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -35,9 +40,48 @@ import {withRouter} from 'react-router-dom'
|
|||||||
* */
|
* */
|
||||||
class BaseLayout extends Component {
|
class BaseLayout extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
notifications: 0,
|
||||||
|
user: 'Admin'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
handleApplicationClick() {
|
handleApplicationClick() {
|
||||||
console.log("Application");
|
this.handleHistory('/assets/apps');
|
||||||
window.location = '/publisher/assets/apps';
|
}
|
||||||
|
|
||||||
|
handleOverviewClick() {
|
||||||
|
this.handleHistory('/overview');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleApplicationCreateClick() {
|
||||||
|
this.handleHistory('/assets/apps/create');
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePlatformClick() {
|
||||||
|
this.handleHistory('/assets/platforms');
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePlatformCreateClick() {
|
||||||
|
this.handleHistory('/assets/platforms/create');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleReviewClick() {
|
||||||
|
this.handleHistory('/assets/reviews');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The method to update the history.
|
||||||
|
* to: The URL to route.
|
||||||
|
* */
|
||||||
|
handleHistory(to) {
|
||||||
|
this.props.history.push(to);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -46,9 +90,15 @@ class BaseLayout extends Component {
|
|||||||
<AppBar title="App Publisher"
|
<AppBar title="App Publisher"
|
||||||
iconElementRight={
|
iconElementRight={
|
||||||
<div>
|
<div>
|
||||||
<IconButton>
|
<Badge
|
||||||
<Notifications/>
|
badgeContent={this.state.notifications}
|
||||||
|
secondary={true}
|
||||||
|
badgeStyle={{top: 12, right: 12}}
|
||||||
|
>
|
||||||
|
<IconButton tooltip="Notifications">
|
||||||
|
<NotificationsIcon/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
</Badge>
|
||||||
<IconButton onClick={() => {
|
<IconButton onClick={() => {
|
||||||
console.log("Clicked")
|
console.log("Clicked")
|
||||||
}}>
|
}}>
|
||||||
@ -58,12 +108,41 @@ class BaseLayout extends Component {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: 64}} open={true}>
|
<Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
|
||||||
<Menu>
|
<List>
|
||||||
<MenuItem onClick={this.handleApplicationClick.bind(this)}>Applications</MenuItem>
|
<ListItem primaryText="Overview"
|
||||||
<MenuItem>Platforms</MenuItem>
|
onClick={this.handleOverviewClick.bind(this)}
|
||||||
<MenuItem>Reviews</MenuItem>
|
leftIcon={<Dashboard/>}/>
|
||||||
</Menu>
|
<ListItem primaryText="Applications"
|
||||||
|
leftIcon={<Apps/>}
|
||||||
|
initiallyOpen={false}
|
||||||
|
primaryTogglesNestedList={true}
|
||||||
|
onClick={this.handleApplicationClick.bind(this)}
|
||||||
|
nestedItems={[
|
||||||
|
<ListItem
|
||||||
|
key={1}
|
||||||
|
primaryText="Create"
|
||||||
|
onClick={this.handleApplicationCreateClick.bind(this)}
|
||||||
|
leftIcon={<Add/>}
|
||||||
|
/>]}
|
||||||
|
/>
|
||||||
|
<ListItem primaryText="Platforms"
|
||||||
|
leftIcon={<DevicesOther/>}
|
||||||
|
initiallyOpen={false}
|
||||||
|
primaryTogglesNestedList={true}
|
||||||
|
onClick={this.handlePlatformClick.bind(this)}
|
||||||
|
nestedItems={[
|
||||||
|
<ListItem
|
||||||
|
key={1}
|
||||||
|
primaryText="Create"
|
||||||
|
onClick={this.handlePlatformCreateClick.bind(this)}
|
||||||
|
leftIcon={<Add/>}
|
||||||
|
/>]}
|
||||||
|
/>
|
||||||
|
<ListItem primaryText="Reviews"
|
||||||
|
onClick={this.handleReviewClick.bind(this)}
|
||||||
|
leftIcon={<Feedback/>}/>
|
||||||
|
</List>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
</div>
|
</div>
|
||||||
<div style=
|
<div style=
|
||||||
|
|||||||
@ -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 PublisherOverview extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
console.log("In Crate")
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Overview
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PublisherOverview;
|
||||||
@ -17,26 +17,39 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import {Card, CardTitle, CardActions, CardMedia} from 'material-ui/Card';
|
import {Redirect, Switch} from 'react-router-dom';
|
||||||
|
import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card';
|
||||||
import RaisedButton from 'material-ui/RaisedButton';
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
|
import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
|
||||||
import Checkbox from 'material-ui/Checkbox';
|
import Checkbox from 'material-ui/Checkbox';
|
||||||
|
import qs from 'qs';
|
||||||
|
|
||||||
|
//todo: remove the {TextValidator, ValidatorForm} and implement it manually.
|
||||||
|
|
||||||
class Login extends Component {
|
class Login extends Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.state = {
|
this.state = {
|
||||||
|
isLoggedIn: true,
|
||||||
|
referrer: "/",
|
||||||
userName: "",
|
userName: "",
|
||||||
password: "",
|
password: "",
|
||||||
rememberMe: true
|
rememberMe: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
let queryString = this.props.location.search;
|
||||||
|
console.log(queryString);
|
||||||
|
queryString = queryString.replace(/^\?/, '');
|
||||||
|
/* With QS version up we can directly use {ignoreQueryPrefix: true} option */
|
||||||
|
let params = qs.parse(queryString);
|
||||||
|
if (params.referrer) {
|
||||||
|
this.setState({referrer: params.referrer});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleLogin(event) {
|
handleLogin(event) {
|
||||||
console.log(this.state);
|
|
||||||
|
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,6 +78,8 @@ class Login extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
|
if (!this.state.isLoggedIn) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
@ -73,9 +88,6 @@ class Login extends Component {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardTitle title="WSO2 IoT App Publisher"/>
|
<CardTitle title="WSO2 IoT App Publisher"/>
|
||||||
|
|
||||||
<CardMedia>
|
|
||||||
</CardMedia>
|
|
||||||
|
|
||||||
<CardActions>
|
<CardActions>
|
||||||
<ValidatorForm
|
<ValidatorForm
|
||||||
ref="form"
|
ref="form"
|
||||||
@ -113,8 +125,15 @@ class Login extends Component {
|
|||||||
</CardActions>
|
</CardActions>
|
||||||
</Card>
|
</Card>
|
||||||
</div>);
|
</div>);
|
||||||
}
|
} else {
|
||||||
|
return (
|
||||||
|
<Switch>
|
||||||
|
<Redirect to={this.state.referrer}/>
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default Login;
|
export default Login;
|
||||||
@ -20,9 +20,10 @@ import Login from './User/Login/Login'
|
|||||||
import BaseLayout from './Base/BaseLayout'
|
import BaseLayout from './Base/BaseLayout'
|
||||||
import Create from './Application/Create'
|
import Create from './Application/Create'
|
||||||
import NotFound from './Error/NotFound'
|
import NotFound from './Error/NotFound'
|
||||||
|
import PublisherOverview from './Overview/PublisherOverview'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Contains all UI components related to Application, Login and Platform
|
* Contains all UI components related to Application, Login and Platform
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export {Login, BaseLayout, Create, NotFound};
|
export {Login, BaseLayout, Create, NotFound, PublisherOverview};
|
||||||
Loading…
Reference in New Issue
Block a user