Add ability to remove badge from playlist

controllers/backpack.js

@@ -213,12 +213,24 @@ module.exports = function (app) {
     });
   });
 
+  // This view supports both adding a badge to the playlist and removing a badge
+  // from the playlist. It dispatches on which action by the HTTP method, which is
+  // multiplexed onto POST -- the `_method` param, if present, overrides the
+  // HTTP method. (This enables DELETEs from regular browser form submissions.)
   app.post('/myplaylist', [
     loggedIn
   ], function (req, res, next) {
+    var method = req.body._method ? req.body._method : "POST";
+
+    var actions = {
+      POST: _.bind(playlist.add, playlist),
+      DELETE: _.bind(playlist.remove, playlist)
+    };
+
     var user = res.locals.user;
     var shortname = req.body.shortname;
-    playlist.addToList(user, shortname, function(err) {
+
+    actions[method](user, shortname, function(err) {
       if (err) next(err);
       res.redirect('/myplaylist');
     });

models/playlist.js

@@ -25,8 +25,8 @@ module.exports = {
 		}
 	],
 	classMethods: {
-		// addToList adds a badge to the user's playlist
-		addToList: function (user, shortName, callback) {
+		// `add` adds a badge to the user's playlist
+		add: function (user, shortName, callback) {
 			var _this = this;
 			this.max('rank', {where: {LearnerId: user.id}})
 				.success(function(rank) {
@@ -42,6 +42,20 @@ module.exports = {
 					callback(err);
 				});
 		},
+		// `remove` removes a badge from the user's playlist
+		remove: function (user, shortName, callback) {
+			this.find({where: {LearnerId: user.id, shortName: shortName}}).
+				success(function(item) {
+					item.destroy().success(function() {
+						callback(null);
+					}).error(function(err) {
+						callback(err);
+					});
+				}).
+				error(function(err) {
+					callback(err);
+				});
+		},
 		// middleware gets the user's playlist of badges and makes it available via
 		// `req.playlist`, which is a sorted array of badges.
 		// It expects that `req.remote.badges` exists and that it is the *full* list
@@ -59,19 +73,18 @@ module.exports = {
 					// This serves both as a way to filter down the full badge list into
 					// the ones in the playlist, as well as to sort the results by rank.
 					var shortNames = {}
-					_.each(rawList, function(item) {
-						shortNames[item.shortName] = item.rank;
+					_.each(rawList, function(item, index) {
+						shortNames[item.shortName] = index;
 					});
 
 					// Construct the user's playlist
 					var playlist = new Array(rawList.length);
 					_.each(badges, function(badge) {
 						if (badge.id in shortNames) {
-							var index = shortNames[badge.id]-1;
+							var index = shortNames[badge.id];
 							playlist[index] = badge;
 						}
 					});
-					playlist.reverse();
 
 					req.playlist = playlist;
 

static/media/css/core.css

@@ -603,7 +603,8 @@ ul.thumbnails li figure.thumbnail .caption p:first-child {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-ul.thumbnails li figure.thumbnail .playlist-bar form {
+ul.thumbnails li figure.thumbnail .playlist-bar form,
+ul.thumbnails li figure.thumbnail .item-actions form {
   display: inline-block;
 }
 ul.thumbnails li:nth-child(2n+2) figure.thumbnail > a img {

static/media/less/core.less

@@ -665,7 +665,8 @@ ul.thumbnails {
           white-space: nowrap;
         }
       }
-      .playlist-bar {
+      .playlist-bar,
+      .item-actions {
         form {
           display: inline-block;
         }

views/badges/single.html

@@ -20,6 +20,8 @@
                         <a href="{{ badge.url }}/apply" class="btn">Apply</a>
                     {% endif %}
                 </p>
+                {% set item = badge %}
+                {% include "includes/add-to-playlist-btn.html" %}
             {% endif %}
         </div>
     </div>

views/includes/badge-thumbnail.html

@@ -5,7 +5,7 @@ parent template overriding the badge (or in some cases supplying it if it
 doesn't have a URL #}
 {% macro itemUrl(url, item) %}
 {% if url %}
-  {{ url }}
+	{{ url }}
 {% else %}
 	{{ item.url }}
 {% endif %}
@@ -13,21 +13,13 @@ doesn't have a URL #}
 
 <figure class="thumbnail">
 	<div class="playlist-bar pull-right">
-		{% block playlist_bar %}
-			{% block fav_btn %}
-			<form action="/myfavorites" method="POST">
-				<input type="hidden" name="shortname" value="{{ item.id }}">
-				<button type="submit" class="btn" title="Add to favorites"><i class="icon-heart"></i></button>
-			</form>
-			{% endblock %}
-			{% block playlist_btn %}
-			<form action="/myplaylist" method="POST">
-				<input type="hidden" name="shortname" value="{{ item.id }}">
-				<button type="submit" class="btn" title="Add to playlist"><i class="icon-plus"></i></button>
-
-			</form>
-			{% endblock %}
-		{% endblock %}
+		<form action="/myfavorites" method="POST">
+			<input type="hidden" name="shortname" value="{{ item.id }}">
+			<button type="submit" class="btn" title="Add to favorites"><i class="icon-heart"></i></button>
+		</form>
+		{% if not playlisted %}
+			{% include "includes/add-to-playlist-btn.html" %}
+		{% endif %}
 	</div>
 	<a href="{{ itemUrl(url, item) }}"><img src="{{ item.image }}"></a>
 	<figcaption class="caption">
@@ -38,12 +30,21 @@ doesn't have a URL #}
 				<a href="{{ itemUrl(url, item) }}">Read…</a>
 			</p>
 		{% endif %}
-		{% block item_actions_wrapper %}
-			<p class="text-right">
-				{% block item_actions %}
+		<div class="item-actions row-fluid">
+			<div class="span6">
+				{% if playlisted %}
+				<form action="/myplaylist" method="POST" class="playlist-remove">
+					<input type="hidden" name="_method" value="DELETE">
+					<input type="hidden" name="shortname" value="{{ item.id }}">
+					<button class="btn"><i class="icon-trash"></i></button>
+				</form>
+				{% endif %}
+			</div>
+			<div class="span6">
+				<p class="pull-right">
 					<a href="{{ itemUrl(url, item) }}" class="btn">Details</a>
-				{% endblock %}
-			</p>
-		{% endblock %}
+				</p>
+			</div>
+		</div>
 	</figcaption>
 </figure>

views/user/backpack.html

@@ -15,10 +15,6 @@
 	</li>
 {% endblock %}
 
-{% block item_actions %}
-	{{ super() }}
-{% endblock %}
-
 {% block modal %}
 	<!-- Modal -->
 	<div id="shareModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

views/user/myplaylist.html

@@ -3,6 +3,7 @@
 {% set navItem = 'backpack' %}
 {% set subNavItem = 'playlist' %}
 
+
 {% block content %}
 	<p class="lead">Some really short and sweet text about what a Playlist is goes here.</p>
 	<div class="playlist">
@@ -10,6 +11,7 @@
 			{% if playlist.length %}
 				<ul class="thumbnails">
 				{% for item in playlist %}
+					{% set playlisted = true %}
 					<li span="3">
 						{% include "includes/badge-thumbnail.html" %}
 					</li>