button styling, adding recents boundary box
This commit is contained in:
aj
parent
625ba9b614
commit
ccc98c0f3e
@ -75,6 +75,8 @@ def playlist():
|
||||
playlist_parts = request_json.get('parts', None)
|
||||
playlist_id = request_json.get('id', None)
|
||||
playlist_shuffle = request_json.get('shuffle', None)
|
||||
playlist_type = request_json.get('type', None)
|
||||
playlist_day_boundary = request_json.get('day_boundary', None)
|
||||
|
||||
queried_playlist = [i for i in playlists.where(u'name', u'==', playlist_name).stream()]
|
||||
|
||||
@ -90,12 +92,18 @@ def playlist():
|
||||
|
||||
new_playlist_id = create_playlist(session['username'], playlist_name)
|
||||
|
||||
playlists.add({
|
||||
to_add = {
|
||||
'name': playlist_name,
|
||||
'parts': playlist_parts,
|
||||
'playlist_id': new_playlist_id,
|
||||
'shuffle': playlist_shuffle
|
||||
})
|
||||
'shuffle': playlist_shuffle,
|
||||
'type': playlist_type
|
||||
}
|
||||
|
||||
if playlist_type == 'recents':
|
||||
to_add['day_boundary'] = playlist_day_boundary if playlist_day_boundary is not None else 21
|
||||
|
||||
playlists.add(to_add)
|
||||
|
||||
return jsonify({"message": 'playlist added', "status": "success"}), 200
|
||||
|
||||
@ -107,15 +115,21 @@ def playlist():
|
||||
if len(queried_playlist) > 1:
|
||||
return jsonify({'error': "multiple playlists exist"}), 500
|
||||
|
||||
if playlist_parts is None and playlist_id is None and playlist_shuffle is None:
|
||||
if playlist_parts is None and \
|
||||
playlist_id is None and \
|
||||
playlist_shuffle is None and \
|
||||
playlist_day_boundary is None:
|
||||
return jsonify({'error': "no chnages to make"}), 400
|
||||
|
||||
playlist_doc = playlists.document(queried_playlist[0].id)
|
||||
|
||||
dic = {}
|
||||
|
||||
if playlist_parts:
|
||||
dic['parts'] = playlist_parts
|
||||
if playlist_parts is not None:
|
||||
if playlist_parts == -1:
|
||||
dic['parts'] = []
|
||||
else:
|
||||
dic['parts'] = playlist_parts
|
||||
|
||||
if playlist_id:
|
||||
dic['playlist_id'] = playlist_id
|
||||
@ -123,6 +137,9 @@ def playlist():
|
||||
if playlist_shuffle is not None:
|
||||
dic['shuffle'] = playlist_shuffle
|
||||
|
||||
if playlist_day_boundary is not None:
|
||||
dic['day_boundary'] = playlist_day_boundary
|
||||
|
||||
playlist_doc.update(dic)
|
||||
|
||||
return jsonify({"message": 'playlist updated', "status": "success"}), 200
|
||||
|
||||
@ -61,7 +61,7 @@ class NewPlaylist extends Component {
|
||||
<tr>
|
||||
<td>
|
||||
<select className="full-width" name="type" onChange={this.handleInputChange}>
|
||||
<option value="normal">normal</option>
|
||||
<option value="default">normal</option>
|
||||
<option value="recents">recents</option>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
@ -8,13 +8,17 @@ class PlaylistView extends Component{
|
||||
this.state = {
|
||||
name: this.props.match.params.name,
|
||||
parts: [],
|
||||
type: null,
|
||||
error: false,
|
||||
error_text: null,
|
||||
|
||||
day_boundary: '',
|
||||
newPlaylistName: '',
|
||||
|
||||
shuffle: false
|
||||
}
|
||||
this.handleAddPart = this.handleAddPart.bind(this);
|
||||
this.handleAddPartChange = this.handleAddPartChange.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.handleRemoveRow = this.handleRemoveRow.bind(this);
|
||||
|
||||
this.handleShuffleChange = this.handleShuffleChange.bind(this);
|
||||
@ -36,9 +40,22 @@ class PlaylistView extends Component{
|
||||
});
|
||||
}
|
||||
|
||||
handleAddPartChange(event){
|
||||
handleInputChange(event){
|
||||
this.setState({
|
||||
newPlaylistName: event.target.value
|
||||
[event.target.name]: event.target.value
|
||||
});
|
||||
|
||||
if(event.target.name == 'day_boundary'){
|
||||
this.handleDayBoundaryChange(event.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
handleDayBoundaryChange(boundary) {
|
||||
axios.post('/api/playlist', {
|
||||
name: this.state.name,
|
||||
day_boundary: boundary
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
@ -75,6 +92,11 @@ class PlaylistView extends Component{
|
||||
this.setState({
|
||||
parts: parts
|
||||
});
|
||||
|
||||
if(parts.length == 0) {
|
||||
parts = -1;
|
||||
}
|
||||
|
||||
axios.post('/api/playlist', {
|
||||
name: this.state.name,
|
||||
parts: parts
|
||||
@ -97,9 +119,10 @@ class PlaylistView extends Component{
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text"
|
||||
name="newPlaylistName"
|
||||
className="full-width"
|
||||
value={this.state.newPlaylistName}
|
||||
onChange={this.handleAddPartChange}
|
||||
onChange={this.handleInputChange}
|
||||
placeholder="new playlist"></input>
|
||||
</td>
|
||||
<td>
|
||||
@ -116,6 +139,20 @@ class PlaylistView extends Component{
|
||||
onChange={this.handleShuffleChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
{ this.state.type == 'recents' &&
|
||||
<tr>
|
||||
<td className="center-text ui-text text-no-select">
|
||||
day boundary
|
||||
</td>
|
||||
<td>
|
||||
<input type="text"
|
||||
name="day_boundary"
|
||||
className="full-width"
|
||||
value={this.state.day_boundary}
|
||||
onChange={this.handleInputChange}></input>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
||||
@ -49,14 +49,14 @@ p {
|
||||
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 10px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
margin: 4px auto;
|
||||
padding: 15px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
box-shadow: 2px 2px 4px black;
|
||||
box-shadow: 0 9px #383838;
|
||||
/*-webkit-transition-duration: 0.4s;
|
||||
transition-duration: 0.4s;*/
|
||||
|
||||
@ -65,8 +65,13 @@ p {
|
||||
decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
// &:hover {
|
||||
// box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
// }
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 5px #383838;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user