Moving commands out of Snapcast

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)

src/js/views/modals/ShareConfiguration.js

@@ -21,7 +21,6 @@ class ShareConfiguration extends React.Component {
 			spotify: false,
 			lastfm: false,
 			genius: false,
-			snapcast_client_commands: false,
 			ui: false
 		};
 	}
@@ -66,9 +65,6 @@ class ShareConfiguration extends React.Component {
 		if (this.state.ui){
 			configuration.ui = this.props.ui;
 		}
-		if (this.state.snapcast_client_commands){
-			configuration.snapcast_client_commands = this.props.snapcast_client_commands;
-		}
 
 		for (var recipient of this.state.recipients){
 			this.props.pusherActions.deliverMessage(
@@ -149,17 +145,6 @@ class ShareConfiguration extends React.Component {
 								</span>
 							</label>
 
-							{this.props.snapcast_client_commands ? <label>
-								<input 
-									type="checkbox"
-									name="snapcast_client_commands"
-									checked={this.state.snapcast_client_commands}
-									onChange={ e => this.setState({ snapcast_client_commands: !this.state.snapcast_client_commands })} />
-								<span className="label">
-									Snapcast client commands
-								</span>
-							</label> : null}
-
 							{this.props.spotify_me && this.props.spotify_authorization ? <label>
 								<input 
 									type="checkbox"
@@ -212,7 +197,6 @@ const mapStateToProps = (state, ownProps) => {
 		genius_me: state.genius.me,
 		lastfm_authorization: state.lastfm.authorization,
 		lastfm_me: state.lastfm.me,
-		snapcast_client_commands: state.snapcast.client_commands,
 		ui: state.ui,
 		connection_id: state.pusher.connection_id,
 		connections: state.pusher.connections