Auto eslint fix
This commit is contained in:
James Barnsley
@ -15,240 +15,242 @@ import * as pusherActions from '../../services/pusher/actions';
|
||||
import * as uiActions from '../../services/ui/actions';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
class EditCommand extends React.Component{
|
||||
class EditCommand extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
id: helpers.generateGuid(),
|
||||
icon: 'power_settings_new',
|
||||
name: '',
|
||||
colour: '',
|
||||
url: `https://${window.location.hostname}/broadlink/sendCommand/power/`,
|
||||
method: 'GET',
|
||||
post_data: '',
|
||||
additional_headers: '',
|
||||
};
|
||||
}
|
||||
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
id: helpers.generateGuid(),
|
||||
icon: 'power_settings_new',
|
||||
name: '',
|
||||
colour: '',
|
||||
url: "https://"+window.location.hostname+"/broadlink/sendCommand/power/",
|
||||
method: 'GET',
|
||||
post_data: "",
|
||||
additional_headers: ""
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
if (this.props.command) {
|
||||
this.props.uiActions.setWindowTitle('Edit command');
|
||||
this.setState(this.props.command);
|
||||
} else {
|
||||
this.props.uiActions.setWindowTitle('Create command');
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
handleSubmit(e){
|
||||
e.preventDefault();
|
||||
this.props.pusherActions.setCommand(this.state);
|
||||
|
||||
this.props.pusherActions.setCommand(this.state);
|
||||
window.history.back();
|
||||
|
||||
window.history.back();
|
||||
// A bit hacky, but wait for a moment to allow the back navigation
|
||||
// and then scroll down to our commands list
|
||||
setTimeout(() => {
|
||||
helpers.scrollTo('#commands-setup');
|
||||
},
|
||||
10);
|
||||
|
||||
// A bit hacky, but wait for a moment to allow the back navigation
|
||||
// and then scroll down to our commands list
|
||||
setTimeout(() => {
|
||||
helpers.scrollTo("#commands-setup");
|
||||
},
|
||||
10
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
handleDelete(e) {
|
||||
this.props.pusherActions.removeCommand(this.state.id);
|
||||
window.history.back();
|
||||
|
||||
handleDelete(e){
|
||||
this.props.pusherActions.removeCommand(this.state.id);
|
||||
window.history.back();
|
||||
// A bit hacky, but wait for a moment to allow the back navigation
|
||||
// and then scroll down to our commands list
|
||||
setTimeout(() => {
|
||||
helpers.scrollTo('#commands-setup');
|
||||
},
|
||||
10);
|
||||
}
|
||||
|
||||
// A bit hacky, but wait for a moment to allow the back navigation
|
||||
// and then scroll down to our commands list
|
||||
setTimeout(() => {
|
||||
helpers.scrollTo("#commands-setup");
|
||||
},
|
||||
10
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const icons = [
|
||||
'power_settings_new',
|
||||
'eject',
|
||||
'grade',
|
||||
'query_builder',
|
||||
'settings_input_component',
|
||||
'settings_input_hdmi',
|
||||
'settings_input_svideo',
|
||||
'forward_5',
|
||||
'forward_10',
|
||||
'forward_30',
|
||||
'replay',
|
||||
'replay_5',
|
||||
'replay_10',
|
||||
'replay_30',
|
||||
'skip_next',
|
||||
'skip_previous',
|
||||
'play_arrow',
|
||||
'pause',
|
||||
'stop',
|
||||
'shuffle',
|
||||
'snooze',
|
||||
'volume_off',
|
||||
'volume_down',
|
||||
'volume_up',
|
||||
'arrow_left',
|
||||
'arrow_drop_up',
|
||||
'arrow_right',
|
||||
'arrow_drop_down',
|
||||
'done',
|
||||
'done_all',
|
||||
'add',
|
||||
'remove',
|
||||
'clear',
|
||||
'cast',
|
||||
'speaker',
|
||||
'speaker_group',
|
||||
'audiotrack',
|
||||
'videogame_asset',
|
||||
'computer',
|
||||
'tv',
|
||||
];
|
||||
|
||||
render(){
|
||||
|
||||
var icons = [
|
||||
"power_settings_new",
|
||||
"eject",
|
||||
"grade",
|
||||
"query_builder",
|
||||
"settings_input_component",
|
||||
"settings_input_hdmi",
|
||||
"settings_input_svideo",
|
||||
"forward_5",
|
||||
"forward_10",
|
||||
"forward_30",
|
||||
"replay",
|
||||
"replay_5",
|
||||
"replay_10",
|
||||
"replay_30",
|
||||
"skip_next",
|
||||
"skip_previous",
|
||||
"play_arrow",
|
||||
"pause",
|
||||
"stop",
|
||||
"shuffle",
|
||||
"snooze",
|
||||
"volume_off",
|
||||
"volume_down",
|
||||
"volume_up",
|
||||
"arrow_left",
|
||||
"arrow_drop_up",
|
||||
"arrow_right",
|
||||
"arrow_drop_down",
|
||||
"done",
|
||||
"done_all",
|
||||
"add",
|
||||
"remove",
|
||||
"clear",
|
||||
"cast",
|
||||
"speaker",
|
||||
"speaker_group",
|
||||
"audiotrack",
|
||||
"videogame_asset",
|
||||
"computer",
|
||||
"tv"
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal className="modal--create-command">
|
||||
<h1>{this.props.command ? "Edit" : "Create"} command</h1>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
Name
|
||||
</div>
|
||||
<div className="input">
|
||||
<TextField
|
||||
name="name"
|
||||
value={this.state.name}
|
||||
onChange={value => this.setState({ name: value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<div className="name">
|
||||
Colour
|
||||
</div>
|
||||
<div className="input">
|
||||
<ColourField
|
||||
colour={this.state.colour}
|
||||
onChange={colour => this.setState({colour: colour})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<div className="name">
|
||||
Icon
|
||||
</div>
|
||||
<div className="input">
|
||||
<IconField
|
||||
icon={this.state.icon}
|
||||
icons={icons}
|
||||
onChange={icon => this.setState({icon: icon})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
URL
|
||||
</div>
|
||||
<div className="input">
|
||||
<TextField
|
||||
name="url"
|
||||
value={this.state.url}
|
||||
onChange={value => this.setState({ url: value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<div className="name">
|
||||
Method
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="method"
|
||||
value="GET"
|
||||
checked={ this.state.method == 'GET' }
|
||||
onChange={ e => this.setState({ method: e.target.value })} />
|
||||
<span className="label">GET</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="method"
|
||||
value="POST"
|
||||
checked={ this.state.method == 'POST' }
|
||||
onChange={ e => this.setState({ method: e.target.value })} />
|
||||
<span className="label">POST</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.state.method == 'POST' && <div className="field textarea white">
|
||||
<div className="name">
|
||||
Data
|
||||
</div>
|
||||
<div className="input">
|
||||
<textarea
|
||||
name="command"
|
||||
value={this.state.post_data}
|
||||
onChange={ e => this.setState({ post_data: e.target.value })}>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>}
|
||||
return (
|
||||
<Modal className="modal--create-command">
|
||||
<h1>
|
||||
{this.props.command ? 'Edit' : 'Create'}
|
||||
{' '}
|
||||
command
|
||||
</h1>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
<div className="name">
|
||||
Name
|
||||
</div>
|
||||
<div className="input">
|
||||
<TextField
|
||||
name="name"
|
||||
value={this.state.name}
|
||||
onChange={(value) => this.setState({ name: value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<div className="name">
|
||||
Colour
|
||||
</div>
|
||||
<div className="input">
|
||||
<ColourField
|
||||
colour={this.state.colour}
|
||||
onChange={(colour) => this.setState({ colour })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<div className="name">
|
||||
Icon
|
||||
</div>
|
||||
<div className="input">
|
||||
<IconField
|
||||
icon={this.state.icon}
|
||||
icons={icons}
|
||||
onChange={(icon) => this.setState({ icon })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
URL
|
||||
</div>
|
||||
<div className="input">
|
||||
<TextField
|
||||
name="url"
|
||||
value={this.state.url}
|
||||
onChange={(value) => this.setState({ url: value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field radio white">
|
||||
<div className="name">
|
||||
Method
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="method"
|
||||
value="GET"
|
||||
checked={this.state.method == 'GET'}
|
||||
onChange={(e) => this.setState({ method: e.target.value })}
|
||||
/>
|
||||
<span className="label">GET</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="method"
|
||||
value="POST"
|
||||
checked={this.state.method == 'POST'}
|
||||
onChange={(e) => this.setState({ method: e.target.value })}
|
||||
/>
|
||||
<span className="label">POST</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.state.method == 'POST' && (
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
Data
|
||||
</div>
|
||||
<div className="input">
|
||||
<textarea
|
||||
name="command"
|
||||
value={this.state.post_data}
|
||||
onChange={(e) => this.setState({ post_data: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
Additional Headers
|
||||
</div>
|
||||
<div className="input">
|
||||
<textarea
|
||||
name="headers"
|
||||
value={this.state.additional_headers}
|
||||
onChange={ e => this.setState({ additional_headers: e.target.value })}>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input">
|
||||
<textarea
|
||||
name="headers"
|
||||
value={this.state.additional_headers}
|
||||
onChange={(e) => this.setState({ additional_headers: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="actions centered-text">
|
||||
{this.props.command ? <button type="button" className="button button--destructive button--large" onClick={e => this.handleDelete(e)}>Delete</button> : null}
|
||||
<button type="submit" className="button button--primary button--large">Save</button>
|
||||
</div>
|
||||
<div className="actions centered-text">
|
||||
{this.props.command ? <button type="button" className="button button--destructive button--large" onClick={(e) => this.handleDelete(e)}>Delete</button> : null}
|
||||
<button type="submit" className="button button--primary button--large">Save</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
var id = ownProps.match.params.id;
|
||||
return {
|
||||
id: id,
|
||||
command: (id && state.pusher.commands && state.pusher.commands[id] !== undefined ? state.pusher.commands[id] : null)
|
||||
}
|
||||
}
|
||||
const { id } = ownProps.match.params;
|
||||
return {
|
||||
id,
|
||||
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)
|
||||
}
|
||||
}
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
pusherActions: bindActionCreators(pusherActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(EditCommand)
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(EditCommand);
|
||||
|
||||
Reference in New Issue
Block a user