Edit client modal... we'll need a server one too

src/js/components/Modal/EditSnapcastClientModal.js

@@ -0,0 +1,62 @@
+
+import React, { PropTypes } from 'react';
+import FontAwesome from 'react-fontawesome';
+
+import Icon from '../Icon';
+import * as helpers from '../../helpers';
+
+export default class EditSnapcastClientModal extends React.Component{
+
+	constructor(props){
+		super(props);
+		var client = this.props.clients[this.props.data.id];
+		this.state = {
+			id: client.id,
+			name: client.config.name,
+			latency: client.config.latency.toString()
+		};
+	}
+
+	handleSave(e){
+		this.props.pusherActions.setSnapcastClientName(this.state.id, this.state.name);
+		this.props.pusherActions.setSnapcastClientLatency(this.state.id, parseInt(this.state.latency));
+		this.props.uiActions.closeModal();
+	}
+
+	handleDelete(e){
+		this.props.pusherActions.deleteSnapcastClient(this.state.id);
+		this.props.uiActions.closeModal();
+	}
+
+	render(){
+		return (
+			<div>
+				<h1>Edit speaker</h1>
+				<h2 className="grey-text">Description</h2>
+
+				<form>
+					<div className="field text">
+						<span className="label">Name</span>
+						<input 
+							type="text"
+							onChange={e => this.setState({name: e.target.value})} 
+							value={this.state.name} />
+					</div>
+					<div className="field text">
+						<span className="label">Latency (ms)</span>
+						<input 
+							type="number"
+							onChange={e => this.setState({latency: e.target.value})} 
+							value={this.state.latency} />
+					</div>
+				</form>
+				<form>
+					<div className="actions centered-text">
+						<button className="destructive large" onClick={e => this.handleDelete(e)}>Delete</button>
+						<button className="primary large" onClick={e => this.handleSave(e)}>Save</button>
+					</div>
+				</form>
+			</div>
+		)
+	}
+}

src/js/components/Modal/Modal.js

@@ -11,6 +11,7 @@ import AddToQueueModal from './AddToQueueModal'
 import CreatePlaylistModal from './CreatePlaylistModal'
 import EditPlaylistModal from './EditPlaylistModal'
 import EditRadioModal from './EditRadioModal'
+import EditSnapcastClientModal from './EditSnapcastClientModal'
 import ImageZoomModal from './ImageZoomModal'
 import KioskModeModal from './KioskModeModal'
 import SearchURISchemesModal from './SearchURISchemesModal'
@@ -115,6 +116,13 @@ class Modal extends React.Component{
 						artists={this.props.artists} 
 						tracks={this.props.tracks} /> : null }
 
+					{ this.props.modal.name == 'edit_snapcast_client' ? <EditSnapcastClientModal 
+						uiActions={this.props.uiActions} 
+						pusherActions={this.props.pusherActions} 
+						data={this.props.modal.data} 
+						clients={this.props.snapcast_clients} 
+						groups={this.props.snapcast_groups} /> : null }
+
 					{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal 
 						uiActions={this.props.uiActions} 
 						data={this.props.modal.data} /> : null }
@@ -159,7 +167,9 @@ const mapStateToProps = (state, ownProps) => {
 		mopidy_connected: state.mopidy.connected,
 		spotify_authorized: state.spotify.authorization,
 		spotify_library_playlists: state.spotify.library_playlists,
-		mopidy_library_playlists: state.mopidy.library_playlists
+		mopidy_library_playlists: state.mopidy.library_playlists,
+		snapcast_groups: state.pusher.snapcast_groups,
+		snapcast_clients: state.pusher.snapcast_clients
 	}
 }
 

src/js/components/Snapcast.js

@@ -40,26 +40,6 @@ class Snapcast extends React.Component{
 		this.setState({editing_client: null});
 	}
 
-	renderClientName(client){
-		if (this.state.editing_client && this.state.editing_client.id == client.id){
-			return (
-				<input 
-					className="name editing"
-					value={this.state.editing_client.name}
-					onChange={e => this.setState({editing_client: {id: client.id, name: e.target.value}})}
-					onBlur={e => this.saveEditingClient()}
-				/>
-			);
-		} else {
-			var name = client.config.name ? client.config.name : client.host.name;
-			return (
-				<div className="name" onClick={e => this.setState({editing_client: {id: client.id, name: name}})}>
-					{name} {!client.connected ? '(disconnected)' : null}
-				</div>
-			);
-		}
-	}
-
 	render(){
 		if (!this.props.snapcast_clients || !this.props.snapcast_groups){
 			return null;
@@ -103,11 +83,17 @@ class Snapcast extends React.Component{
 								<div className="clients">
 									{
 										group.clients.map(client => {
+											var name = client.config.name ? client.config.name : client.host.name;
 											return (
 												<div className={"client "+(client.connected ? 'connected' : 'disconnected')} key={client.id}>
 													<div className="inner">
-														{this.renderClientName(client)}
+														<div className="name">
+															{name} {!client.connected ? '(disconnected)' : null}
+														</div>
 														<div className="controls">
+															<div className="control edit" onClick={e => this.props.uiActions.openModal('edit_snapcast_client',{id: client.id})}>
+																<FontAwesome name="cog" />
+															</div>
 															<VolumeControl 
 																volume={client.config.volume.percent}
 																mute={client.config.volume.muted}