Separating seeds and tunabilities fields

src/js/components/DropdownField.js

@@ -40,16 +40,24 @@ export default class DropdownField extends React.Component{
 	}
 
 	render(){
-		if (!this.props.options) return null
-
-		var classname = 'dropdown-field'
-		if (this.state.expanded) classname += ' expanded'
+		if (!this.props.options){
+			return null;
+		}
 
+		var className = 'dropdown-field';
+		if (this.state.expanded){
+			className += ' expanded';
+		}
+		if (this.props.no_status_icon){
+			className += ' no-status-icon';
+		}
 		var current_value = this.props.options[0].value
-		if (this.props.value) current_value = this.props.value
+		if (this.props.value){
+			current_value = this.props.value;
+		}
 
 		var icon = <FontAwesome name="check" />
-		if (typeof(this.props.reverse) !== 'undefined'){
+		if (this.props.reverse !== undefined){
 			if (this.props.reverse){
 				icon = <FontAwesome className="reverse" name="caret-down" />
 			} else {
@@ -58,7 +66,7 @@ export default class DropdownField extends React.Component{
 		}
 
 		return (
-			<div className={classname} data-key={this.props.name.replace(' ','_').toLowerCase()}>
+			<div className={className} data-key={this.props.name.replace(' ','_').toLowerCase()}>
 				<div className="label" onClick={ () => this.handleToggle() }>
 					{this.props.icon ? <span><FontAwesome name={this.props.icon} />&nbsp; </span> : null}
 					<span className="text">{ this.props.name }</span>
@@ -68,7 +76,7 @@ export default class DropdownField extends React.Component{
 						this.props.options.map(option => {
 							return (
 								<div className="option" key={ option.value } onClick={ e => this.handleChange(option.value) }>
-									{option.value == current_value ? icon : null}
+									{!this.props.no_status_icon && (option.value == current_value) ? icon : null}
 									{option.label}
 								</div>
 							)

src/js/helpers.js

@@ -791,4 +791,15 @@ export let getIndexedRecords = function(index, uris){
 	}
 
 	return records
+}
+
+
+/**
+ * Uppercase-ify the first character of a string
+ *
+ * @param string = string
+ * @return string
+ **/
+export let titleCase = function(string){
+    return string.charAt(0).toUpperCase() + string.slice(1)
 }

src/js/services/spotify/actions.js

@@ -907,13 +907,11 @@ export function getRecommendations(uris = [], limit = 20, tunabilities = null){
         }
 
         // construct our endpoint URL with all the appropriate arguments
-        var endpoint = 'recommendations'
-        endpoint += '?seed_artists='+artists_ids.join(',')
-        endpoint += '&seed_tracks='+tracks_ids.join(',')
-        endpoint += '&seed_genres='+genres.join(',')
-        endpoint += '&limit='+limit
-
-        console.log(tunabilities);
+        var endpoint = 'recommendations';
+        endpoint += '?seed_artists='+artists_ids.join(',');
+        endpoint += '&seed_tracks='+tracks_ids.join(',');
+        endpoint += '&seed_genres='+genres.join(',');
+        endpoint += '&limit='+limit;
 
         if (tunabilities){
             for (var key in tunabilities){

src/js/views/discover/DiscoverRecommendations.js

@@ -11,6 +11,7 @@ import ArtistGrid from '../../components/ArtistGrid'
 import AlbumGrid from '../../components/AlbumGrid'
 import TrackList from '../../components/TrackList'
 import Parallax from '../../components/Parallax'
+import DropdownField from '../../components/DropdownField'
 import AddSeedField from '../../components/AddSeedField'
 import URILink from '../../components/URILink'
 import ContextMenuTrigger from '../../components/ContextMenuTrigger'
@@ -226,13 +227,18 @@ class Discover extends React.Component{
 				if (tunabilities.hasOwnProperty(key) && tunabilities[key].enabled){
 					var tunability = tunabilities[key];
 
+					var max = tunability.value.max;
+					var min = tunability.value.min;
+
 					if (tunability.convert_to_decimal){
-						tunability.value.max = tunability.max / 100;
-						tunability.value.min = tunability.min / 100;
+						max = max / 100;
+						min = min / 100;
 					}
 
-					digested_tunabilities[key+"_max"] = tunability.value.max;
-					digested_tunabilities[key+"_min"] = tunability.value.min;
+					console.log(key,max,min);
+
+					digested_tunabilities[key+"_max"] = max.toString();
+					digested_tunabilities[key+"_min"] = min.toString();
 				}
 			}
 			this.props.spotifyActions.getRecommendations(seeds, 50, digested_tunabilities)
@@ -299,6 +305,7 @@ class Discover extends React.Component{
 
 		return (
 			<div className="seeds">
+				<h3>Seeds</h3>
 				{
 					seeds_objects.map((seed,index) => {
 						var type = helpers.uriType(seed.uri)
@@ -329,10 +336,11 @@ class Discover extends React.Component{
 	}
 
 	renderTunabilities(){
-
-		var tunabilities = [];
+		var enabled_tunabilities = [];
+		var addable_tunabilities = [];
 		for (var key in this.state.tunabilities){
 			if (this.state.tunabilities.hasOwnProperty(key)){
+
 				var tunability = Object.assign(
 					{},
 					this.state.tunabilities[key],
@@ -340,47 +348,46 @@ class Discover extends React.Component{
 						name: key
 					}
 				);
-				tunabilities.push(tunability);
+
+				if (tunability.enabled){
+					enabled_tunabilities.push(tunability);
+				} else {
+					addable_tunabilities.push({
+						label: helpers.titleCase(tunability.name),
+						value: tunability.name
+					});
+				}
 			}
 		}
 
 		return (
 			<div className="tunabilities">
+				<h3>Musical properties</h3>
 				{
-					tunabilities.map(tunability => {
+					enabled_tunabilities.map(tunability => {
 						return (
-							<div className="field tunability" key={tunability.name}>
-								<div className="field sub-field checkbox">
-									<label>
-										<input 
-											type="checkbox"
-											name={"tunability_"+tunability.name}
-											checked={tunability.enabled}
-											onChange={e => this.toggleTunability(tunability.name)} />
-										<div className="label">
-											{tunability.name}
-										</div>
-										<span className="has-tooltip info">
-											<FontAwesome name="info-circle" />
-											<span className="tooltip">{tunability.description}</span>
-										</span>
-									</label>
+							<div className="field tunability range" key={tunability.name}>
+								<div className="label">
+									{helpers.titleCase(tunability.name)}
+									<span className="has-tooltip info">
+										<FontAwesome name="info-circle" />
+										<span className="tooltip">{tunability.description}</span>
+									</span>
+								</div>
+								<div className="input">
+									<InputRange
+										disabled={!tunability.enabled}
+										minValue={tunability.min}
+										maxValue={tunability.max}
+										value={tunability.value}
+										onChange={value => this.setTunability(tunability.name, value)}
+									/>
 								</div>
-								{tunability.enabled ? <div className="input">
-									<div className="field sub-field range">
-										<InputRange
-											disabled={!tunability.enabled}
-											minValue={tunability.min}
-											maxValue={tunability.max}
-											value={tunability.value}
-											onChange={value => this.setTunability(tunability.name, value)}
-										/>
-									</div>
-								</div> : null}
 							</div>
 						);
 					})
 				}
+				<DropdownField icon="plus" name="Add" options={addable_tunabilities} no_status_icon handleChange={val => {this.toggleTunability(val)}} />
 			</div>
 		);
 	}