import React, { Component } from 'react';
import { Link } from 'react-router'
import NewBeacon from '../NewBeacon/'
class BeaconSettings extends Component {
constructor(props){
super(props);
this.state = {inputuuid: '',
inputmajor: '' ,
inputminor: '' ,
inputmanufacturer: ''};
this.handleUuid = this.handleUuid.bind(this);
this.handleMajor = this.handleMajor.bind(this);
this.handleMinor = this.handleMinor.bind(this);
this.handleManufacturer = this.handleManufacturer.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.nextPage = this.nextPage.bind(this)
this.previousPage = this.previousPage.bind(this)
this.state = {
page: 1
}
// alert("started");
}
nextPage() {
this.setState({ page: this.state.page + 1 })
}
previousPage() {
this.setState({ page: this.state.page - 1 })
}
static contextTypes = {
router: React.PropTypes.object.isRequired
}
handleUuid(event) {
this.setState({inputuuid: event.target.value});
}
handleMajor(event){
this.setState({inputmajor: event.target.value});
}
handleMinor(event){
this.setState({inputminor: event.target.value});
}
handleManufacturer(event){
this.setState({inputmanufacturer: event.target.value});
}
handleSubmit(event) {
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
{
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiOWQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
},
body: JSON.stringify({
name: this.state.inputname,
description: this.state.inputdescription,
uuid:this.state.inputuuid,
major: this.state.inputmajor,
minor:this.state.inputminor,
manufacturer:this.state.inputmanufacturer,
beaconType: "type9",
location: this.state.store,
floor: this.state.inputfloor,
zone: this.state.zone
})
}).then(function(response){
if(response.ok) {
console.log(response)
return response;
}
throw new Error('Network response was not ok.');
}).then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error);
});
alert('Submitted: ' + " " + this.state.inputuuid + " " + this.state.inputmajor + " " + this.state.inputminor + " " + this.state.inputmanufacturer);
event.preventDefault();
this.context.router.push('/Beacons');
}
render() {
const { onSubmit } = this.props
const { page } = this.state
return (<div><div>
<div className="animated fadeIn">
<br /><div className="card" style={{ width: 57 + '%' }}>
<div className="card-header">
Beacon Settings
</div>
<div className="card-block">
<div className="input-group mb-1">
<span className="input-group-addon"><i className="icon-user"></i></span>
<input type="text" className="form-control" value={this.state.inputuuid} onChange={this.handleUuid} placeholder="UUID" />
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="text" className="form-control" value={this.state.inputmajor} onChange={this.handleMajor} placeholder="Major Number"/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="text" className="form-control" value={this.state.inputminor} onChange={this.handleMinor} placeholder="Minor Number"/>
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="text" className="form-control" value={this.state.inputmanufacturer} onChange={this.handleManufacturer} placeholder="Manufacturer Number"/>
</div><center>
<button style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" onClick={this.handleSubmit.bind(this)} activeClassName="active">Save</button>
<p>asd{this.state.inputname}</p>
<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link>
</center>
</div>
</div>
</div></div>
</div>
)
}
}
export default BeaconSettings;
import React, { Component } from 'react';
import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';
import Session from 'redux-react-session';
import BeaconSettings from '../BeaconSettings';
class NewBeacon extends Component {
constructor(props) {
super(props);
this.state = {inputname: '',
inputdescription: '' ,
inputzone: '' ,
inputstore: '' ,
inputfloor: '',
dropdownZone: false,
dropdownStore: false,
dropdownFloor: false,
data:[
{name:"Nikko Laus1"},
{name:"Sam Collins"},
{name:"Carl Smith Wesson"}
],
store:[
{name:"abcd"},
{name:"Sam Collins"},
{name:"Carl Smith Wesson"}
],
floor:[
{name:"Ist"},
{name:"IInd"},
{name:"IIIrd"}
]
};
this.handleName = this.handleName.bind(this);
this.handleDescription = this.handleDescription.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.toggleDropdown = this.toggleDropdown.bind(this);
// alert("hey");
}
static contextTypes = {
router: React.PropTypes.object.isRequired
}
handleSubmit(event){
alert('Submitted: ' + this.state.inputname + this.state.inputdescription + this.state.inputzone + this.state.inputstore + this.state.inputfloor);
event.preventDefault();
this.context.router.push('/components/BeaconSettings');
}
toggleDropdown(dropType) {
this.setState({[dropType]: !this.state[dropType]})
}
handleName(event) {
this.setState({inputname: event.target.value});
}
handleDescription(event){
this.setState({inputdescription: event.target.value});
}
handleChange(event, type) {
this.setState({[type]: event.target.value});
}
save_data(value) {
this.setState({inputname: event.target.value});
}
render() {
let Zone = this.state.data.map(person =>
{
return <DropElement key={person.id} data={person}/>
});
let Store = this.state.store.map(person =>
{
return <DropElement key={person.id} data={person}/>
});
let Floor = this.state.floor.map(person =>
{
return <DropElement key={person.id} data={person}/>
});
return (<div><div>
<div className="animated fadeIn">
<br /><div className="card" style={{ width: 77 + '%' }}>
<div className="card-header">
Create Beacon
</div>
<div className="card-block">
<div className="input-group mb-1">
<span className="input-group-addon"><i className="icon-user"></i></span>
<input type="text" className="form-control" value={this.state.inputname} onChange={this.handleName} placeholder="Name" />
</div>
<div className="input-group mb-1">
<span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
<input type="textArea" value={this.state.inputdescription} onChange={this.handleDescription} className="form-control" placeholder="Description"/>
</div>
<div className="card-header">
Select a zone</div>
<div className="card-block"><div className="px-1 row">Zone:
<div className="px-2 mb-1">
<Dropdown isOpen={this.state.dropdownZone} toggle={this.toggleDropdown.bind(this, 'dropdownZone')}>
<button type="button" value={this.state.inputzone} onChange={this.handleChange.bind(this, 'inputzone')} className="caret"
onClick={this.toggleDropdown.bind(this, 'dropdownZone')} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownZone} >
Select a Zone</button>
<DropdownMenu>
{Zone}
</DropdownMenu>
</Dropdown></div></div></div>
<div className="card-header">
Select a Store</div>
<div className="card-block"><div className="px-1 row">Store:
<div className=" px-2 mb-1">
<Dropdown isOpen={this.state.dropdownStore} toggle={this.toggleDropdown.bind(this, 'dropdownStore')}>
<button type="button" value={this.state.inputstore} onChange={this.handleChange.bind(this, 'inputstore')} className="caret"
onClick={this.toggleDropdown.bind(this, 'dropdownStore')} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownStore}>
Select a Store</button>
<DropdownMenu>
{Store}
</DropdownMenu>
</Dropdown>
</div></div></div>
<div className="card-header">
Select a floor</div>
<div className="card-block"><div className="px-1 row">Floor:
<div className=" px-2 mb-1">
<Dropdown isOpen={this.state.dropdownFloor} toggle={this.toggleDropdown.bind(this, 'dropdownFloor')}>
<button type="button" value={this.state.inputfloor} onChange={this.handleChange.bind(this, 'inputfloor')}
onClick={this.toggleDropdown.bind(this, 'dropdownFloor')} data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.dropdownFloor}>
Select a Floor</button>
<DropdownMenu>
{Floor}
</DropdownMenu>
</Dropdown></div></div></div>
</div>
</div>
</div>
</div>
<div className="px-2 row" style={{ width: 90 + '%' }}>
<div><button className="nav-link btn btn-block btn-success" onClick={this.handleSubmit} >
Next</button>
</div><div className="px-2"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-danger" activeClassName="active"> Cancel</Link>
</div>
<div className="float-right"><Link to={'/components/social-buttons'} className="nav-link btn btn-block btn-success" activeClassName="active">
Default Notification
</Link></div>
</div></div>
)
}
}
class DropElement extends React.Component
{
constructor()
{
super();
}
render()
{
return (<DropdownItem>{this.props.data.name}
</DropdownItem>
);
}
}
export default NewBeacon;
我正在制作2个屏幕，我希望第三个屏幕包含这两个屏幕，以便在点击下一个按钮时，第一个组件将被隐藏，另一个组件或页面将显示为输入详细信息，以便将所有值一起发送到服务器