Added playlist

index.html

@@ -16,6 +16,8 @@
 
 		@import "/resources/vendors/bootstrap/2.1.1/css/bootstrap.min.css";
 
+		@import "/resources/vendors/jquery/datatables/1.9.4/extras/ColReorder/media/css/ColReorder.css";
+
 		@import "/resources/css/datatables.css";
 		@import "/resources/css/app.css";
  		@import "/resources/css/player.css";

resources/css/app.css

@@ -371,6 +371,7 @@ div#wrapperPlayer {
 }
 
 table.dataTable tbody tr.selected td,
+div.drag-table-item table tr.selected td,
 table.dataTable tbody tr.selected td.sorting_1,
 table.dataTable tbody tr.selected td.sorting_2,
 table.dataTable tbody tr.selected td.sorting_3,
@@ -397,6 +398,10 @@ body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTable
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */
 }
 
+div.drag-table-item {
+	opacity: 0.8;
+}
+
 div#wrapperPlayer {
 	background: url('../img/viewport_background.png') repeat-x;
 	height: 50px;

resources/js/app.js

@@ -70,7 +70,7 @@ _
 			, "servers/:server":		"_routerActionClient"
 			, "playlist/:item":			"_routerActionPlaylistItem"
 			, ":server/items/:item":	"_routerActionServerItem"
-			//"*actions": "defaultRoute" // matches http://example.com/#anything-here
+			, "*actions":				"_routerDefaultAction" // matches http://example.com/#anything-here
 		}
 
 		, historyStart:	window.history.length
@@ -86,6 +86,7 @@ _
 				, "_routerActionClient"
 				, "_routerActionItem"
 				, "_routerActionServerItem"
+				, "_routerDefaultAction"
 
 				, "_serverInit"
 
@@ -191,6 +192,7 @@ _
 					listItem	= _.extend({}, listItem, {
 						server:		event.hostname
 						, database:	event.dbId
+						, order:	new Date().toString()
 					});
 
 					that.playlist.on("add", function __fnAppSavePlaylistModel(model) {
@@ -218,6 +220,13 @@ _
 			return this;
 		}
 
+		, _routerDefaultAction:			function () {
+			var that	= this
+			;
+
+			Backbone.Router.prototype.navigate("playlist", true);
+		}
+
 		, _routerActionAbout:			function () {
 			var that	= this
 			;

resources/js/main.js

@@ -7,6 +7,7 @@ require.config({
 		"jquery-ui":				["jquery"]
 		, "jquery-event-drag":		["jquery"]
 		, "jquery-layout":			["jquery", "jquery-ui"]
+		, "jquery-clone-styles":	["jquery"]
 
 		, "datatables":				["jquery"]
 
@@ -62,6 +63,7 @@ require.config({
 		, "jquery-ui":				"../vendors/jquery/ui/1.9.0/jquery-ui-all"
 		, "jquery-event-drag":		"../vendors/jquery/event-drag/2.2/jquery.event.drag"
 		, "jquery-layout":			"../vendors/jquery/layout/1.2.0/jquery.layout.min"
+		, "jquery-clone-styles":	"../vendors/jquery/cloneStyles"
 
 		, "datatables":				"../vendors/jquery/datatables/1.9.4/media/js/jquery.dataTables.min"
 		, "dt-scroller":			"../vendors/jquery/datatables/1.9.4/extras/Scroller/media/js/dataTables.scroller.min"

resources/js/views/list.js

@@ -14,6 +14,7 @@ define([
 
 	, "jquery-ui"
 	, "jquery-event-drag"
+	, "jquery-clone-styles"
 
 	, "datatables"
 	, "dt-scroller"
@@ -293,21 +294,22 @@ _
 
 			List.__super__.initialize.apply(this, arguments);
 
-			//this.$el.find("table:first").html("<tr><td><h1>" + this.type + "</h1></td></tr>");
+			if (that.options.type === "playlist" && that.options.collection) {
-
-			this.$el.find("tr").draggable();
-			this.$el.find("td").draggable();
-
-			if (that.options.type === "playlist") {
 				that.options.collection.fetch();
+				that.options.collection.on("add", function __fnPlaylistAddRow(model) {
+					if (that.dataTable) {
+						that.dataTable.fnAddData(model.toJSON(), that.$el.is(":visible"));
+					}
+				});
 			}
 
 			return this;
 		}
 
+		// FIXME: Sometimes the parent element's size is 0 and resizing fails.
 		, resize:		function () {
 			var that			= this
-			,	parentEl		= that.options.parentEl//that.$el.parent()
+			,	parentEl		= that.options.parentEl || that.$el.parent()
 			,	parentWidth		= parentEl.innerWidth()
 			,	parentHeight	= parentEl.innerHeight()
 			;
@@ -325,9 +327,7 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 		, render:		function () {
 			var that			= this
 			,	initialHeight	= that.$el.innerHeight() - 20
-			;
+			,	dataTableOpts	= {
-
-			this.dataTable	= this.$el.find("table:first").dataTable({
 				sScrollY:			initialHeight + "px"
 				, sDom:				"RTrtS"
 				, oColReorder:		{
@@ -346,9 +346,6 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 				//, bProcessing:		true
 				//, bServerSide:		true
 
-				// Default sorting order
-				, aaSorting:		[[2, "asc"], [6, "asc"], [3, "asc"], [5, "asc"], [4, "asc"]]
-
 				, aaData:			that.collection.toJSON()
 
 				, aoColumns:		that.tableSchema
@@ -382,6 +379,8 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 											$(this)
 											.closest("tr")
 											.clone()
+											.css($(this).getStyleObject())
+											.addClass("selected")
 										)
 										.parent()
 								;
@@ -403,8 +402,11 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 					//var rowModel = that.collection.get(aData.id);
 					//view.rows.push(new DtRowView({id: aData.id, el: nRow, model: rowModel}));
 				}
-/*
+
 				, fnServerData: function(sSource, aoData, fnCallback, settings) {
+					console.log(sSource, aoData, fnCallback, settings);
+				}
+/*
 					// function used to populate the DataTable with the current
 					// content of the collection
 					var populateTable = function()
@@ -440,7 +442,25 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl
 					}
 				}
  */
-			});
+			}
+			;
+
+			// Default sorting order
+			if (that.options.type !== "playlist") {
+				dataTableOpts.aaSorting		= [[2, "asc"], [6, "asc"], [3, "asc"], [5, "asc"], [4, "asc"]];
+			} else {
+				var schemaLastItem			= (that.tableSchema.length - 1);
+				dataTableOpts.aaSorting		= [[schemaLastItem, "asc"]];
+				that.tableSchema[schemaLastItem].mData	= "order";
+
+				for (var i = 0; i < schemaLastItem; i++) {
+					that.tableSchema[i].bSortable	= false;
+				}
+
+				dataTableOpts.aoColumns		= that.tableSchema;
+			}
+
+			this.dataTable	= this.$el.find("table:first").dataTable(dataTableOpts);
 
 		}