Base styles for commands; Fixing snapcast commands (removal)

src/js/views/Settings.js

@@ -140,6 +140,47 @@ class Settings extends React.Component {
 		);
 	}
 
+	renderCommands(){
+		var commands = [];
+		if (this.props.pusher.commands){
+			for (var id in this.props.pusher.commands){
+				if (this.props.pusher.commands.hasOwnProperty(id)){
+					var command = Object.assign({}, this.props.pusher.commands[id]);
+					try {
+						command.command = JSON.parse(command.command);
+					} catch(error){
+						command.command = null;
+					}
+					commands.push(command);
+				}
+			}
+		}
+
+		if (commands.length <= 0){
+			return null;
+		}
+
+		return (
+			<div className="list">
+				{
+	    			commands.map(command => {
+	    				return (
+	    					<Link className="list__item command__item commands-setup__item" key={command.id} to={global.baseURL+'edit-command/'+command.id}>
+	    						<span className="col col--w30">
+	    							<Icon name={command.icon} />
+	    							{command.icon}
+	    						</span>
+	    						<span className="col col--w70">
+	    							{command.command && command.command.url ? command.command.url : "-"}
+	    						</span>
+	    					</Link>
+	    				);
+	    			})
+	    		}
+			</div>
+		);
+	}
+
 	render(){
 
 		var options = (
@@ -166,15 +207,6 @@ class Settings extends React.Component {
 			var upgrade_button = null;
 		}
 
-		var commands = [];
-		if (this.props.pusher.commands){
-			for (var id in this.props.pusher.commands){
-				if (this.props.pusher.commands.hasOwnProperty(id)){
-					commands.push(this.props.pusher.commands[id]);
-				}
-			}
-		}
-
 		return (
 			<div className="view settings-view">
 				<Header options={options} uiActions={this.props.uiActions}>
@@ -343,15 +375,7 @@ class Settings extends React.Component {
 							Commands
 						</div>
 						<div className="input">
-			        		{
-			        			commands.map(command => {
-			        				return (
-			        					<Link className="command__item commands-setup__item" key={command.id} to={global.baseURL+'edit-command/'+command.id}>
-			        						<Icon name={command.icon} />
-			        					</Link>
-			        				);
-			        			})
-			        		}
+			        		{this.renderCommands()}
 			        		<Link to={global.baseURL+'edit-command'} className="button">Add new</Link>
 			        	</div>
 			        </div>

src/js/views/modals/EditCommand.js

@@ -68,17 +68,14 @@ class EditCommand extends React.Component{
 								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>
+								See <a href="https://material.io/tools/icons/?style=baseline" target="_blank" noopener="true">Material Icons</a> for available options
 							</div>
 						</div>
 					</div>
 
 					<div className="field textarea white">
-						<div className="name tooltip">
+						<div className="name">
 							Command
-							<div className="tooltip__content">
-								Ajax configuration (JSON string)
-							</div>
 						</div>
 						<div className="input">
 							<textarea 
@@ -86,6 +83,9 @@ class EditCommand extends React.Component{
 								value={this.state.command}
 								onChange={ e => this.setState({ command: e.target.value })}>
 							</textarea>
+							<div className="description">
+								Ajax request settings. See <a href="http://api.jquery.com/jquery.ajax/" target="_blank" noopener="true"><code>jquery.ajax</code> documentation</a>.
+							</div>
 						</div>
 					</div>