sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

button styling, adding recents boundary box

Browse Source
This commit is contained in:
aj 2019-08-03 12:10:24 +01:00
parent 625ba9b614
commit ccc98c0f3e
6 changed files with 77 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sass Executable file
View File

@ -0,0 +1 @@
sass src/scss/style.scss build/style.css

29
spotify/api/api.py
View File

@ -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

2
src/js/Playlist/NewPlaylist.js
View File

@ -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>

47
src/js/Playlist/PlaylistView.js
View File

@ -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
@ -96,10 +118,11 @@ class PlaylistView extends Component{
{ this.state.parts.map((part) => <Row part={ part } key={ part } handler={this.handleRemoveRow}/>) }
<tr>
<td>
<input type="text"
<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>
);

13
src/scss/style.scss
View File

@ -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);
}
}

1
watchsass Executable file
View File

@ -0,0 +1 @@
sass --watch src/scss/style.scss build/style.css