button styling, adding recents boundary box

sass

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

spotify/api/api.py

@@ -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:
+                if playlist_parts is not None:
-                    dic['parts'] = playlist_parts
+                    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

src/js/Playlist/NewPlaylist.js

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

src/js/Playlist/PlaylistView.js

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

src/scss/style.scss

@@ -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 {
+	// &:hover {
-		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+	// 	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);
 	}
 }
 

watchsass

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