Moving commands out of Snapcast

2018-10-09 21:39:38 +13:00
parent 9f0961f593
commit fc3f5e2d2f
20 changed files with 11052 additions and 14208 deletions
--- a/src/js/views/modals/EditCommand.js
+++ b/src/js/views/modals/EditCommand.js
@ -0,0 +1,111 @@
+
+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)