Minor changes to playlist looks.

5 files changed, 32 insertions, 25 deletions

diff --git a/static/index.html b/static/index.html
index c337499..be4476e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -9,6 +9,7 @@
 	<script type="text/javascript" src="/static/underscore-min.js"></script>
 	<script type="text/javascript" src="/static/backbone-min.js"></script>
 	<script type="text/javascript" src="/static/backbone-localstorage.js"></script>
+	<script type="text/javascript" src="/static/templates.js"></script>
 	<script type="text/javascript" src="/static/sound.js"></script>
 	<script type="text/javascript" src="/static/playlist.js"></script>
 	<script type="text/javascript" src="/static/init.js"></script>
diff --git a/static/init.js b/static/init.js
index b45539c..2cdd84b 100644
--- a/static/init.js
+++ b/static/init.js
@@ -23,29 +23,6 @@ function preload_images() {
 	});
 }
 
-Handlebars.registerHelper('trackname', function() {
-	var item = this;
-	if(!item.metadata)
-		return item.name;
-
-	var s = '';
-	if(item.metadata.title)
-		s = item.metadata.title;
-	if(item.metadata.artist) {
-		if(s.length) {
-			s = ' - ' + s;
-			s = item.metadata.artist + s;
-		}
-	}
-	if(!s.length)
-		s = item.name;
-	return s;
-});
-
-var templates = new (function Templates() {
-	this.directory_item = Handlebars.compile('<li id="{{type}}-{{id}}" class="{{type}}{{#if nocache}} nocache{{/if}}"><a href="#">{{trackname}}</a>');
-})();
-
 function load_directory(dir_id, dir_item) {
 	$.get('/json/list/' + dir_id, function(data) {
 		var dir_list = $('#directory-list');
diff --git a/static/playlist.js b/static/playlist.js
index eabd56e..45a4a07 100644
--- a/static/playlist.js
+++ b/static/playlist.js
@@ -10,7 +10,7 @@ $(function(){
 	window.items = new Playlist;
 	PlaylistItemView = Backbone.View.extend({
 		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>'),
+		template: templates.playlist_item,
 		render: function() {
 			var model = this.model;
 			var item = model.toJSON();
@@ -54,6 +54,11 @@ $(function(){
 			if(item.attributes.nocache)
 				$(el).addClass('nocache');
 			$('#playlist').append(el);
+			if(item.attributes.cache !== undefined || item.attributes.nocache !== undefined) {
+				delete item.attributes.cache;
+				delete item.attributes.nocache;
+				item.save();
+			}
 		},
 		removeOne: function(item) {
 			$('#playlist #cid-' + item.cid).remove();
diff --git a/static/style.css b/static/style.css
index 1fd114b..9466b71 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,5 +13,6 @@
 #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 td { padding: .3em; background: white; border: 1px solid #ddd; border-width: 0 1px; }
+#playlist tr:last-child td { border-bottom-width: 1px; }
 #playlist th { background: #ddd; text-align: left; padding: .5em; }
diff --git a/static/templates.js b/static/templates.js
new file mode 100644
index 0000000..f1d6bed
--- /dev/null
+++ b/static/templates.js
@@ -0,0 +1,23 @@
+Handlebars.registerHelper('trackname', function() {
+	var item = this;
+	if(!item.metadata)
+		return item.name;
+
+	var s = '';
+	if(item.metadata.title)
+		s = item.metadata.title;
+	if(item.metadata.artist) {
+		if(s.length) {
+			s = ' - ' + s;
+			s = item.metadata.artist + s;
+		}
+	}
+	if(!s.length)
+		s = item.name;
+	return s;
+});
+
+var templates = new (function Templates() {
+	this.directory_item = Handlebars.compile('<li id="{{type}}-{{id}}" class="{{type}}{{#if nocache}} nocache{{/if}}"><a href="#">{{trackname}}</a>');
+	this.playlist_item = 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>');
+})();