secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Modal blur bg; Editing/creating playlists with descriptions and collab

Browse Source
This commit is contained in:
James Barnsley
2017-07-13 15:26:30 +12:00
parent f272c6f733
commit bbc2cf8961
8 changed files with 136 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/js/components/Modal/CreatePlaylistModal.js
View File

@ -9,27 +9,26 @@ export default class CreatePlaylistModal extends React.Component{
constructor(props){
super(props)
this.state = {
submit_enabled: false,
name: '',
description: '',
scheme: 'spotify',
is_public: true
is_public: true,
is_collaborative: false
}
}
createPlaylist(e){
e.preventDefault();
this.props.uiActions.createPlaylist( this.state.scheme, this.state.name, this.state.is_public )
this.props.uiActions.closeModal()
return false;
}
e.preventDefault();
setPlaylistName(name){
var submit_enabled = false
if( name && name != '' ) submit_enabled = true
this.setState({
name: name,
submit_enabled: submit_enabled
})
if (!this.state.name || this.state.name == ''){
this.setState({error: 'Name is required'})
return false
} else {
this.props.uiActions.createPlaylist( this.state.scheme, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative )
this.props.uiActions.closeModal()
}
return false
}
render(){
@ -37,14 +36,25 @@ export default class CreatePlaylistModal extends React.Component{
<div>
<h1>Create playlist</h1>
<form onSubmit={(e) => this.createPlaylist(e)}>
<div className="field">
<div className="field text">
<span className="label">Name</span>
<input
type="text"
placeholder="Playlist name"
onChange={ e => this.setPlaylistName( e.target.value )}
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field text">
<span className="label">Description</span>
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field radio white">
<span className="label">Provider</span>
<label>
<input
type="radio"
@ -61,10 +71,11 @@ export default class CreatePlaylistModal extends React.Component{
value="m3u"
checked={ this.state.scheme == 'm3u' }
onChange={ e => this.setState({ scheme: e.target.value })} />
<span className="label">Local (m3u)</span>
<span className="label">Mopidy</span>
</label>
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
@ -73,9 +84,17 @@ export default class CreatePlaylistModal extends React.Component{
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
<div className="actions centered-text">
<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
<button type="submit" className="primary wide">Create</button>
</div>
</form>
</div>

24
src/js/components/Modal/EditPlaylistModal.js
View File

@ -12,7 +12,8 @@ export default class EditPlaylistModal extends React.Component{
error: null,
name: this.props.data.name,
description: (this.props.data.description ? this.props.data.description : ''),
is_public: this.props.data.is_public
is_public: this.props.data.is_public,
is_collaborative: this.props.data.is_collaborative
}
}
@ -23,7 +24,7 @@ export default class EditPlaylistModal extends React.Component{
this.setState({error: 'Name is required'})
return false
} else {
this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.is_public, this.state.description)
this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative)
this.props.uiActions.closeModal()
return false
}
@ -35,21 +36,22 @@ export default class EditPlaylistModal extends React.Component{
case 'spotify':
return (
<div>
<div className="field">
<div className="field text">
<span className="label">Name</span>
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field">
<div className="field text">
<span className="label">Description</span>
<input
type="text"
placeholder="Description"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
@ -58,6 +60,14 @@ export default class EditPlaylistModal extends React.Component{
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
</div>
)
@ -67,9 +77,9 @@ export default class EditPlaylistModal extends React.Component{
return (
<div>
<div className="field">
<span className="label">Name</span>
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>