111 lines
2.8 KiB
JavaScript
111 lines
2.8 KiB
JavaScript
|
|
||
|
|
import React, { PropTypes } from 'react'
|
||
|
|
import { connect } from 'react-redux'
|
||
|
|
import { bindActionCreators } from 'redux'
|
||
|
|
import { Link } from 'react-router'
|
||
|
|
import ReactGA from 'react-ga'
|
||
|
|
|
||
|
|
import Modal from './Modal';
|
||
|
|
import Icon from '../../components/Icon';
|
||
|
|
import * as pusherActions from '../../services/pusher/actions';
|
||
|
|
import * as uiActions from '../../services/ui/actions';
|
||
|
|
import * as helpers from '../../helpers';
|
||
|
|
|
||
|
|
class EditCommand extends React.Component{
|
||
|
|
|
||
|
|
constructor(props){
|
||
|
|
super(props)
|
||
|
|
this.state = {
|
||
|
|
id: helpers.generateGuid(),
|
||
|
|
icon: 'power_settings_new',
|
||
|
|
command: '{"url":"https://myserver.local:8080/sendCommand/power"}'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount(){
|
||
|
|
if (this.props.command){
|
||
|
|
this.props.uiActions.setWindowTitle("Edit command");
|
||
|
|
this.setState(this.props.command);
|
||
|
|
} else {
|
||
|
|
this.props.uiActions.setWindowTitle("Create command");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleSubmit(e){
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
this.props.pusherActions.setCommand({
|
||
|
|
id: this.state.id,
|
||
|
|
icon: this.state.icon,
|
||
|
|
command: this.state.command
|
||
|
|
});
|
||
|
|
|
||
|
|
window.history.back();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
render(){
|
||
|
|
return (
|
||
|
|
<Modal className="modal--create-command">
|
||
|
|
<h1>Create command</h1>
|
||
|
|
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||
|
|
|
||
|
|
<div className="field text white">
|
||
|
|
<div className="name">
|
||
|
|
Icon
|
||
|
|
</div>
|
||
|
|
<div className="input">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
name="icon"
|
||
|
|
value={this.state.icon}
|
||
|
|
onChange={ e => this.setState({ icon: e.target.value })}
|
||
|
|
/>
|
||
|
|
<div className="description">
|
||
|
|
Material icon, see <a href="https://material.io/tools/icons/?style=baseline" target="_blank" noopener="true">docs</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="field textarea white">
|
||
|
|
<div className="name tooltip">
|
||
|
|
Command
|
||
|
|
<div className="tooltip__content">
|
||
|
|
Ajax configuration (JSON string)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="input">
|
||
|
|
<textarea
|
||
|
|
name="command"
|
||
|
|
value={this.state.command}
|
||
|
|
onChange={ e => this.setState({ command: e.target.value })}>
|
||
|
|
</textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="actions centered-text">
|
||
|
|
<button type="submit" className="primary large">Save</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</Modal>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = (state, ownProps) => {
|
||
|
|
var id = ownProps.params.id;
|
||
|
|
return {
|
||
|
|
command: (id && state.pusher.commands && state.pusher.commands[id] !== undefined ? state.pusher.commands[id] : null)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapDispatchToProps = (dispatch) => {
|
||
|
|
return {
|
||
|
|
pusherActions: bindActionCreators(pusherActions, dispatch),
|
||
|
|
uiActions: bindActionCreators(uiActions, dispatch)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, mapDispatchToProps)(EditCommand)
|