summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--static/icons/delete.pngbin0 -> 715 bytes
-rw-r--r--static/index.html12
-rw-r--r--static/playlist.js18
-rw-r--r--static/style.css14
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
Binary files differ
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; }