Colours map; Commands interface

src/js/views/Settings.js

@@ -222,7 +222,7 @@ class Settings extends React.Component {
 
 				<section className="content-wrapper">
 
-					<h4 className="underline">Server</h4>
+					<h4 className="underline">Server<a name="server"></a></h4>
 
 					<div className="field">
 						<div className="name">Status</div>
@@ -274,10 +274,10 @@ class Settings extends React.Component {
 						{this.renderApplyButton()}
 					</form>
 
-					<h4 className="underline">Services</h4>
+					<h4 className="underline">Services<a name="services"></a></h4>
 					<Services active={this.props.params.sub_view} />
 
-					<h4 className="underline">Interface</h4>
+					<h4 className="underline">Interface<a name="interface"></a></h4>
 
 					<div className="field radio">
 						<div className="name">
@@ -386,7 +386,7 @@ class Settings extends React.Component {
 			        	</div>
 			        </div>
 
-					<h4 className="underline">Advanced</h4>
+					<h4 className="underline">Advanced<a name="advanced"></a></h4>
 
 					<div className="field">
 						<div className="name">Artist library URI</div>
@@ -443,7 +443,7 @@ class Settings extends React.Component {
 				        <ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
 			        </div>
 
-					<h4 className="underline">About</h4>
+					<h4 className="underline">About<a name="about"></a></h4>
 
 					<div className="field">
 						<div>

src/js/views/modals/EditCommand.js

@@ -18,6 +18,7 @@ class EditCommand extends React.Component{
 		this.state = {
 			id: helpers.generateGuid(),
 			icon: 'power_settings_new',
+			colour: 'green',
 			command: '{"url":"https://'+window.location.hostname+'/sendCommand/power"}'
 		}
 	}
@@ -37,6 +38,7 @@ class EditCommand extends React.Component{
 		this.props.pusherActions.setCommand({
 			id: this.state.id,
 			icon: this.state.icon,
+			colour: this.state.colour,
 			command: this.state.command
 		});
 
@@ -51,6 +53,20 @@ class EditCommand extends React.Component{
 	}
 
 	render(){
+		var colours = [
+			'turquoise',
+			'mid_grey',
+			'grey',
+			'dark_grey',
+			'black',
+			'red',
+			'green',
+			'blue',
+			'light_blue',
+			'yellow',
+			'orange',
+		];
+
 		return (
 			<Modal className="modal--create-command">
 				<h1>Create command</h1>
@@ -73,6 +89,29 @@ class EditCommand extends React.Component{
 						</div>
 					</div>
 
+					<div className="field radio white">
+						<div className="name">
+							Colour
+						</div>
+						<div className="input">
+							{
+								colours.map(colour => {
+									return (
+										<label key={colour}>
+											<input 
+												type="radio"
+												name="colour"
+												value={colour}
+												checked={this.state.colour == colour}
+												onChange={ e => this.setState({colour: colour})} />
+											<span className="label">{helpers.titleCase(colour)}</span>
+										</label>
+									);
+								})
+							}
+						</div>
+					</div>
+
 					<div className="field textarea white">
 						<div className="name">
 							Command