Colours map; Commands interface
This commit is contained in:
James Barnsley
@ -57,6 +57,7 @@ class OutputControl extends React.Component{
|
||||
}
|
||||
|
||||
renderOutputs(){
|
||||
var has_outputs = false;
|
||||
|
||||
var clients = [];
|
||||
for (var key in this.props.snapcast_clients){
|
||||
@ -70,16 +71,11 @@ class OutputControl extends React.Component{
|
||||
|
||||
var snapcast_clients = null;
|
||||
if (clients.length > 0){
|
||||
has_outputs = true;
|
||||
snapcast_clients = (
|
||||
<div>
|
||||
{
|
||||
clients.map(client => {
|
||||
|
||||
var commands = {};
|
||||
if (this.props.snapcast_commands[client.id]){
|
||||
commands = this.props.snapcast_commands[client.id];
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="output-control__item outputs__item--snapcast" key={client.id}>
|
||||
<div className="output-control__item__name">
|
||||
@ -109,6 +105,7 @@ class OutputControl extends React.Component{
|
||||
|
||||
var local_streaming = null;
|
||||
if (this.props.http_streaming_enabled){
|
||||
has_outputs = true;
|
||||
local_streaming = (
|
||||
<div className="output-control__item outputs__item--icecast">
|
||||
<div className="output-control__item__actions">
|
||||
@ -132,7 +129,39 @@ class OutputControl extends React.Component{
|
||||
);
|
||||
}
|
||||
|
||||
if (!local_streaming && !snapcast_clients){
|
||||
var commands = null;
|
||||
if (this.props.pusher_commands){
|
||||
|
||||
var commands_items = [];
|
||||
for (var key in this.props.pusher_commands){
|
||||
if (this.props.pusher_commands.hasOwnProperty(key)){
|
||||
commands_items.push(this.props.pusher_commands[key]);
|
||||
}
|
||||
}
|
||||
|
||||
if (commands_items.length > 0){
|
||||
has_outputs = true;
|
||||
commands = (
|
||||
<div className="output-control__item output-control__item--commands commands">
|
||||
{
|
||||
commands_items.map(command => {
|
||||
return (
|
||||
<div
|
||||
key={command.id}
|
||||
className="commands__item"
|
||||
onClick={e => this.props.pusherActions.sendCommand(command.id)}>
|
||||
<Icon className="commands__item__icon" name={command.icon} />
|
||||
<span className={command.colour+'-background commands__item__background'}></span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (!has_outputs){
|
||||
return (
|
||||
<div className="output-control__items output-control__items--no-results">
|
||||
<p className="no-results">No outputs</p>
|
||||
@ -141,6 +170,7 @@ class OutputControl extends React.Component{
|
||||
} else {
|
||||
return (
|
||||
<div className="output-control__items">
|
||||
{commands}
|
||||
{local_streaming}
|
||||
{snapcast_clients}
|
||||
</div>
|
||||
@ -184,7 +214,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
pusher_connected: state.pusher.connected,
|
||||
snapcast_enabled: (state.pusher.config ? state.pusher.config.snapcast_enabled : null),
|
||||
snapcast_clients: state.snapcast.clients,
|
||||
snapcast_commands: (state.snapcast.commands ? state.snapcast.commands : {})
|
||||
pusher_commands: (state.pusher.commands ? state.pusher.commands : {})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -242,7 +242,7 @@ const PusherMiddleware = (function(){
|
||||
function(){
|
||||
store.dispatch(pusherActions.getVersion());
|
||||
},
|
||||
2000
|
||||
500
|
||||
);
|
||||
next(action);
|
||||
break;
|
||||
@ -405,10 +405,9 @@ const PusherMiddleware = (function(){
|
||||
store.dispatch(pusherActions.commandsUpdated(response.commands));
|
||||
},
|
||||
error => {
|
||||
store.dispatch(coreActions.handleException(
|
||||
'Could not get commands',
|
||||
error
|
||||
));
|
||||
// We're not too worried about capturing errors here
|
||||
// It's also likely to fail where UI has been updated but
|
||||
// server hasn't been restarted yet.
|
||||
}
|
||||
);
|
||||
next(action);
|
||||
@ -431,7 +430,7 @@ const PusherMiddleware = (function(){
|
||||
},
|
||||
error => {
|
||||
store.dispatch(coreActions.handleException(
|
||||
'Could not remove command',
|
||||
'Could not set commands',
|
||||
error
|
||||
));
|
||||
}
|
||||
@ -447,7 +446,7 @@ const PusherMiddleware = (function(){
|
||||
request(store, 'set_commands', {commands: commands_index})
|
||||
.then(
|
||||
response => {
|
||||
store.dispatch(pusherActions.commandsUpdated(response.commands));
|
||||
// No action required, the change will be broadcast
|
||||
},
|
||||
error => {
|
||||
store.dispatch(coreActions.handleException(
|
||||
@ -475,10 +474,6 @@ const PusherMiddleware = (function(){
|
||||
break;
|
||||
}
|
||||
|
||||
// We try and make it cross-origin compatible
|
||||
ajax_settings.crossDomain = true;
|
||||
ajax_settings.dataType = "jsonp";
|
||||
|
||||
// Handle success and failure
|
||||
ajax_settings.success = function(response){
|
||||
console.log("Command sent, response was:",response);
|
||||
@ -488,9 +483,10 @@ const PusherMiddleware = (function(){
|
||||
store.dispatch(uiActions.createNotification({key: notification_key, type: 'info', content: 'Command sent'}));
|
||||
}
|
||||
}
|
||||
ajax_settings.fail = function(xhr, status, error){
|
||||
ajax_settings.error = function(xhr, status, error){
|
||||
console.error("Command failed, response was:",xhr,error);
|
||||
store.dispatch(uiActions.processFinished(notification_key));
|
||||
store.dispatch(uiActions.createNotification({key: notification_key, type: 'bad', content: 'Command failed', description: error}));
|
||||
store.dispatch(uiActions.createNotification({key: notification_key, type: 'bad', content: 'Command failed', description: xhr.status+": "+error}));
|
||||
}
|
||||
|
||||
// Actually send the request
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
Reference in New Issue
Block a user