Implemented playlist item deletion.

4 files changed, 33 insertions, 11 deletions

diff --git a/static/icons/delete.png b/static/icons/delete.png
new file mode 100644
index 0000000..08f2493
--- /dev/null
+++ b/static/icons/delete.png
diff --git a/static/index.html b/static/index.html
index 587b0b2..c337499 100644
--- a/static/index.html
+++ b/static/index.html
@@ -34,8 +34,16 @@
 				</ul>
 			</div>
 			<div id="playlist-tab">
-				<ul id="playlist">
-				</ul>
+				<table id="playlist">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>&nbsp;</th>
+						</tr>
+					</thead>
+					<tbody>
+					</tbody>
+				</table>
 			</div>
 		</div>
 	</div>
diff --git a/static/playlist.js b/static/playlist.js
index 373098c..18403c4 100644
--- a/static/playlist.js
+++ b/static/playlist.js
@@ -9,26 +9,31 @@ $(function(){
 	});
 	window.items = new Playlist;
 	PlaylistItemView = Backbone.View.extend({
-		tagName: 'li',
-		template: Handlebars.compile('<a href="#">{{trackname}}</a>'),
+		tagName: 'tr',
+		template: Handlebars.compile('<td><a href="#" class="play">{{trackname}}</a></td><td><a href="#" class="delete"><img src="/static/icons/delete.png" alt="Delete" title="Delete" /></a></td>'),
 		render: function() {
 			var model = this.model;
 			var item = model.toJSON();
 			var el = $(this.el);
 			el.html(this.template(item));
 			el.attr('id', 'cid-' + model.cid);
-			$(this.el, 'a').click(function() {
+			$('a.play', this.el).click(function() {
 				while(model.collection.indexOf(model) > 0) {
 					model.collection.remove(model.collection.at(0));
 				}
 				playsound(model);
 				return false;
 			});
+			$('a.delete', this.el).click(function() {
+				//var model = items.getByCid(model.cid);
+				items.remove(model);
+				return false;
+			});
 			return this;
 		}
 	});
 	PlaylistView = Backbone.View.extend({
-		el: $('#playlist'),
+		el: $('#playlist tbody'),
 		initialize: function() {
 			items.bind('add', this.addOne, this);
 			items.bind('remove', this.removeOne, this);
@@ -53,6 +58,11 @@ $(function(){
 		removeOne: function(item) {
 			$('#playlist #cid-' + item.cid).remove();
 			item.destroy();
+			items.each(this.refreshOrder);
+		},
+		refreshOrder: function(item) {
+			item.attributes.order_id = items.indexOf(item)+1;
+			item.save();
 		},
 		addAll: function() {
 			items.each(this.addOne);
diff --git a/static/style.css b/static/style.css
index 09d9e87..1fd114b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4,10 +4,14 @@
 #directory-list, #playlist { font-size: small; }
 #directory-list a, #playlist a { color: inherit; text-decoration: inherit; }
 #directory-list a:hover, #playlist a:hover { text-decoration: underline; }
-#directory-list .dir, #directory-list .track, #playlist li { background-repeat: no-repeat; padding-left: 20px; }
+#directory-list .dir, #directory-list .track, #playlist a.play { background-repeat: no-repeat; padding-left: 20px; }
 #directory-list .dir { background-image: url('/static/icons/folder.png'); }
 #directory-list .track { background-image: url('/static/icons/music.png'); }
-#directory-list .nocache, #playlist .nocache { background-image: url('/static/icons/music_nocache.png'); }
-#directory-list, #playlist { list-style-type: none; }
-#playlist .playing { background-image: url('/static/icons/music_playing.png'); }
-#playlist .loading { background-image: url('/static/icons/loading.gif'); }
+#directory-list .nocache, #playlist .nocache a.play { background-image: url('/static/icons/music_nocache.png'); }
+#directory-list { list-style-type: none; }
+#playlist .playing a.play { background-image: url('/static/icons/music_playing.png'); }
+#playlist .loading a.play { background-image: url('/static/icons/loading.gif'); }
+#playlist { border-collapse: collapse; background: white; width: 100%; }
+#playlist tr td:first-child { width: 100%; }
+#playlist td { padding: .3em; background: white; border: 1px solid #ddd; }
+#playlist th { background: #ddd; text-align: left; padding: .5em; }