Adding indication of autosaved text fields
This commit is contained in:
James Barnsley
@ -72,7 +72,7 @@ class Playlist extends React.Component {
|
||||
loadPlaylist(uri);
|
||||
} else if (!prev_mopidy_connected && mopidy_connected) {
|
||||
if (uriSource(uri) !== 'spotify') {
|
||||
loadPlaylist(nextProps.uri);
|
||||
loadPlaylist(uri);
|
||||
}
|
||||
}
|
||||
|
||||
@ -275,6 +275,31 @@ Edited
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
const {
|
||||
ui: {
|
||||
allow_reporting,
|
||||
slim_mode,
|
||||
theme,
|
||||
load_queue,
|
||||
} = {},
|
||||
core: {
|
||||
users,
|
||||
tracks,
|
||||
playlists,
|
||||
} = {},
|
||||
spotify: {
|
||||
library_playlists: spotify_library_playlists,
|
||||
authorization: spotify_authorized,
|
||||
me: {
|
||||
id: spotify_userid,
|
||||
} = {},
|
||||
} = {},
|
||||
mopidy: {
|
||||
connected: mopidy_connected,
|
||||
library_playlists: local_library_playlists,
|
||||
} = {},
|
||||
} = state;
|
||||
|
||||
// Decode the URI, and then re-encode selected characters
|
||||
// This is needed as Mopidy encodes *some* characters in playlist URIs (but not other characters)
|
||||
// We need to retain ":" because this a reserved URI separator
|
||||
@ -288,18 +313,18 @@ const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
return {
|
||||
uri,
|
||||
allow_reporting: state.ui.allow_reporting,
|
||||
slim_mode: state.ui.slim_mode,
|
||||
theme: state.ui.theme,
|
||||
load_queue: state.ui.load_queue,
|
||||
users: state.core.users,
|
||||
tracks: state.core.tracks,
|
||||
playlist: (state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : false),
|
||||
spotify_library_playlists: state.spotify.library_playlists,
|
||||
local_library_playlists: state.mopidy.library_playlists,
|
||||
mopidy_connected: state.mopidy.connected,
|
||||
spotify_authorized: state.spotify.authorization,
|
||||
spotify_userid: (state.spotify.me && state.spotify.me.id ? state.spotify.me.id : null),
|
||||
allow_reporting,
|
||||
slim_mode,
|
||||
theme,
|
||||
load_queue,
|
||||
users,
|
||||
tracks,
|
||||
playlist: (playlists[uri] !== undefined ? playlists[uri] : false),
|
||||
spotify_library_playlists,
|
||||
local_library_playlists,
|
||||
mopidy_connected,
|
||||
spotify_authorized,
|
||||
spotify_userid,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -157,6 +157,7 @@ class Settings extends React.Component {
|
||||
<TextField
|
||||
onChange={(value) => pusherActions.setUsername(value.replace(/\W/g, ''))}
|
||||
value={this.state.pusher_username}
|
||||
autosave
|
||||
/>
|
||||
<div className="description">
|
||||
A non-unique string used to identify this client (no special characters)
|
||||
@ -331,11 +332,10 @@ class Settings extends React.Component {
|
||||
<div className="field">
|
||||
<div className="name">Artist library URI</div>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
<TextField
|
||||
value={this.state.mopidy_library_artists_uri}
|
||||
onChange={(e) => this.setState({ mopidy_library_artists_uri: e.target.value })}
|
||||
onBlur={(e) => this.handleBlur('mopidy', 'library_artists_uri', e.target.value)}
|
||||
onChange={(mopidy_library_artists_uri) => this.setState({ mopidy_library_artists_uri })}
|
||||
autosave
|
||||
/>
|
||||
<div className="description">
|
||||
URI used for collecting library artists
|
||||
@ -346,11 +346,11 @@ class Settings extends React.Component {
|
||||
<label className="field">
|
||||
<div className="name">Album library URI</div>
|
||||
<div className="input">
|
||||
<input
|
||||
<TextField
|
||||
type="text"
|
||||
value={this.state.mopidy_library_albums_uri}
|
||||
onChange={(e) => this.setState({ mopidy_library_albums_uri: e.target.value })}
|
||||
onBlur={(e) => this.handleBlur('mopidy', 'library_albums_uri', e.target.value)}
|
||||
onChange={(mopidy_library_albums_uri) => this.setState({ mopidy_library_albums_uri })}
|
||||
autosave
|
||||
/>
|
||||
<div className="description">
|
||||
URI used for collecting library albums
|
||||
|
||||
@ -64,6 +64,16 @@ class EditCommand extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { command } = this.props;
|
||||
const {
|
||||
name,
|
||||
colour,
|
||||
icon,
|
||||
url,
|
||||
method,
|
||||
post_data,
|
||||
additional_headers,
|
||||
} = this.state;
|
||||
const icons = [
|
||||
'power_settings_new',
|
||||
'eject',
|
||||
@ -110,9 +120,7 @@ class EditCommand extends React.Component {
|
||||
return (
|
||||
<Modal className="modal--create-command">
|
||||
<h1>
|
||||
{this.props.command ? 'Edit' : 'Create'}
|
||||
{' '}
|
||||
command
|
||||
{`${command ? 'Edit' : 'Create'} command`}
|
||||
</h1>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
|
||||
@ -123,7 +131,7 @@ command
|
||||
<div className="input">
|
||||
<TextField
|
||||
name="name"
|
||||
value={this.state.name}
|
||||
value={name}
|
||||
onChange={(value) => this.setState({ name: value })}
|
||||
/>
|
||||
</div>
|
||||
@ -135,7 +143,7 @@ command
|
||||
</div>
|
||||
<div className="input">
|
||||
<ColourField
|
||||
colour={this.state.colour}
|
||||
colour={colour}
|
||||
onChange={(colour) => this.setState({ colour })}
|
||||
/>
|
||||
</div>
|
||||
@ -147,7 +155,7 @@ command
|
||||
</div>
|
||||
<div className="input">
|
||||
<IconField
|
||||
icon={this.state.icon}
|
||||
icon={icon}
|
||||
icons={icons}
|
||||
onChange={(icon) => this.setState({ icon })}
|
||||
/>
|
||||
@ -161,8 +169,8 @@ command
|
||||
<div className="input">
|
||||
<TextField
|
||||
name="url"
|
||||
value={this.state.url}
|
||||
onChange={(value) => this.setState({ url: value })}
|
||||
value={url}
|
||||
onChange={(url) => this.setState({ url })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -177,7 +185,7 @@ command
|
||||
type="radio"
|
||||
name="method"
|
||||
value="GET"
|
||||
checked={this.state.method == 'GET'}
|
||||
checked={method === 'GET'}
|
||||
onChange={(e) => this.setState({ method: e.target.value })}
|
||||
/>
|
||||
<span className="label">GET</span>
|
||||
@ -187,7 +195,7 @@ command
|
||||
type="radio"
|
||||
name="method"
|
||||
value="POST"
|
||||
checked={this.state.method == 'POST'}
|
||||
checked={method === 'POST'}
|
||||
onChange={(e) => this.setState({ method: e.target.value })}
|
||||
/>
|
||||
<span className="label">POST</span>
|
||||
@ -195,7 +203,7 @@ command
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.state.method == 'POST' && (
|
||||
{method === 'POST' && (
|
||||
<div className="field textarea white">
|
||||
<div className="name">
|
||||
Data
|
||||
@ -203,7 +211,7 @@ command
|
||||
<div className="input">
|
||||
<textarea
|
||||
name="command"
|
||||
value={this.state.post_data}
|
||||
value={post_data}
|
||||
onChange={(e) => this.setState({ post_data: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
@ -217,7 +225,7 @@ command
|
||||
<div className="input">
|
||||
<textarea
|
||||
name="headers"
|
||||
value={this.state.additional_headers}
|
||||
value={additional_headers}
|
||||
onChange={(e) => this.setState({ additional_headers: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
@ -225,7 +233,15 @@ command
|
||||
|
||||
|
||||
<div className="actions centered-text">
|
||||
{this.props.command ? <button type="button" className="button button--destructive button--large" onClick={(e) => this.handleDelete(e)}>Delete</button> : null}
|
||||
{command && (
|
||||
<button
|
||||
type="button"
|
||||
className="button button--destructive button--large"
|
||||
onClick={(e) => this.handleDelete(e)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
<button type="submit" className="button button--primary button--large">Save</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user