Start for a client view

index.html

@@ -88,21 +88,8 @@
 		</div>
 	</div>
 
-	<div class="ui-layout-center" class="loading">
+	<div class="ui-layout-center" class="loading" id="wrapperMain">
-		<div class="ui-layout-north row-fluid span12" id="wrapperBrowser">
+		
-			<div class="third">
-				<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableGenres"></table>
-			</div>
-			<div class="third">
-				<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableArtists"></table>
-			</div>
-			<div class="third">
-				<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableAlbums"></table>
-			</div>
-		</div>
-		<div class="ui-layout-center" id="wrapperList">
-			<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableList"></table>
-		</div>
 	</div>
 
 	<div class="ui-layout-south row-fluid" id="wrapperFooter">

resources/css/app.css

@@ -170,43 +170,43 @@ body > .ui-layout-west > #wrapperSideBar ul li {
 		display: inline-block;
 	}
 
-div#wrapperBrowser {
+div#wrapperMain > div > div:first {
 	margin: 0;
 	padding: 0;
 	background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
 }
-	div#wrapperBrowser > div.third {
+	div#wrapperMain > div > div:first > div.third {
 		width: 33.3333%;
 		float: left;
 		clear: none;
 	}
 
-	div#wrapperBrowser > div.third:first-child {
+	div#wrapperMain > div > div:first > div.third:first-child {
 		clear: left;
 	}
 
-	div#wrapperBrowser > div.third:last-child {
+	div#wrapperMain > div > div:first > div.third:last-child {
 		clear: right;
 	}
 
-	div#wrapperBrowser > div.third > div.dataTables_wrapper,
+	div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper,
-	div#wrapperBrowser > div.third > div.dataTables_wrapper {
+	div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper {
 		border-left: 1px solid #C6C6C6;
 	}
 
-	div#wrapperBrowser > div:first-child > div.dataTables_wrapper,
+	div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper,
-	div#wrapperBrowser > div:first-child > div.dataTables_wrapper {
+	div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper {
 		border-left: none;
 		padding-left: 1px;
 	}
 
-	div#wrapperBrowser > div.third > div.dataTables_wrapper table td {
+	div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table td {
 		padding-left: 4px;
 	}
 
-	div#wrapperBrowser table.dataTable tr td.sorting_1 { background-color: transparent; }
+	div#wrapperMain > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; }
-	div#wrapperBrowser table.dataTable tr td.sorting_2 { background-color: transparent; }
+	div#wrapperMain > div > div:first table.dataTable tr td.sorting_2 { background-color: transparent; }
-	div#wrapperBrowser table.dataTable tr td.sorting_3 { background-color: transparent; }
+	div#wrapperMain > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; }
 
 
 div#wrapperList {
@@ -335,7 +335,7 @@ div.dataTables_scrollHeadInner th {
 	border: none;
 }
 	
-	div#wrapperBrowser div.dataTables_scrollHeadInner th {
+	div#wrapperMain > div > div:first div.dataTables_scrollHeadInner th {
 		padding-left: 4px;
 	}
 
@@ -352,10 +352,10 @@ table.dataTable tbody 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,
-div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td,
+div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td,
-div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_1,
+div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_1,
-div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_2,
+div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_2,
-div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_3,
+div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_3,
 .dropdown-menu * a:hover,
 .dropdown-menu * a:focus,
 .dropdown-menu * li:hover,

resources/js/app.js

@@ -24,6 +24,9 @@ define([
 //	, "models/dmap"
 
 	, "collections/server"
+	, "collections/playlist"
+
+	, "views/client"
 
 	, "text!../templates/app/modal-loading.html"
 	, "text!../templates/app/modal-login.html"
@@ -45,6 +48,9 @@ _
 , ClientModel
 //, DMAPModel
 , ServerCollection
+, PlaylistCollection
+
+, ClientView
 
 , tmplModalLoading
 , tmplModalLogin
@@ -80,6 +86,8 @@ _
 
 			this.servers	= new ServerCollection();
 
+			this.playlist	= new PlaylistCollection();
+
 			this.servers.on("add", function (server) {
 				server.save();
 			});
@@ -121,17 +129,25 @@ _
 				that.Views.App		= new AppView();
 				that.Views.Footer	= new FooterView();
 
-				that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar() {
+				that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) {
 					that.Views.App.toggleSideBar();
 				});
 
+				that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) {
+					// TODO:...
+				});
+
+				that.Views.Footer.on("toggle:repeat", function __fnAppEventTogglerRepeater(event) {
+					// TODO:...
+				});
+
 				that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
 					$(event.target).remove();
 				});
 
 				Backbone.history.start({
 					pushState: true
-					, root: "/"
+					, root: Config.docRoot
 				});
 
 				// For now let's reset the state when we start up
@@ -148,6 +164,7 @@ _
 			;
 
 			that.Views.SideBar.select("> ul > li:first");
+			that.Views.Main.showView("playlist");
 		}
 
 		, _routerActionClient:			function (hostname) {
@@ -159,28 +176,48 @@ _
 			that.Views.SideBar.select(server);
 
 			if (client) {
-				if (client.state < 4) {
+				var __fnAppEventClientLoaded		= function () {
-					var __fnAppEventClientInitited	= function () {
+					if (!that.Views.Main.getView(server.get("hostname"))) {
-						client.fetchDatabases(client.fetchDatabase);
+						that.Views.Main.setView(server.client.attributes.hostname, new ClientView(server.client));
+					}
+
+					that.Views.Main.showView(server.get("hostname"));
+				}
+				,	__fnAppEventClientInitited	= function () {
+					client.fetchDatabases(function __fnAppCbFetchDatabases() {
+						client.fetchDatabase(function __fnAppCbFetchDatabase() {
+							__fnAppEventClientLoaded();
+						});
+					});
 				};
 
+				if (client.state < 4) {
 					client.on("inited", __fnAppEventClientInitited);
 
 					if (client.state <= 0) {
 						client.init();
 					}
 				} else if (client.state === 4) {
-					client.fetchDatabases(client.fetchDatabase);
+					__fnAppEventClientInitited();
+				} else if (client.state > 4) {
+					__fnAppEventClientLoaded();
 				}
 			}
 		}
 
 		, _routerActionPlaylistItem:	function (item) {
+			var that	= this
+			;
 
+			that.Views.SideBar.select("> ul > li:first");
 		}
 
 		, _routerActionServerItem:		function (server, item) {
+			var that	= this
+			;
 
+			that.Views.SideBar.select(server);
+			that.Views.Main.showView(server.get("hostname"));
 		}
 
 		, _serverInit:					function(server) {

resources/js/collections/playlist.js

@@ -0,0 +1,32 @@
+/*jslint laxbreak:true */
+/*jslint laxcomma:true */
+/*jslint loopfunc:true */
+/*jslint strict:true */
+/*jslint browser:true */
+/*jslint devel:true */
+define([
+	"underscore"
+	, "backbone"
+
+	, "models/server"
+
+	, "backbone-localstorage"
+]
+, function (_, Backbone, ServerModel) {
+	"use strict";
+
+	var Server		= Backbone.Collection.extend({
+		model:			ServerModel
+
+		, localStorage:	new Backbone.LocalStorage("daap-servers")
+
+		, initialize:	function () {
+			//_.bindAll(this, "");
+
+			return Server.__super__.initialize.call(this, arguments);
+		}
+
+	});
+
+	return Server;
+});

resources/js/config.js

@@ -17,7 +17,7 @@ define([
 		debug:				false
 		, verbose:			false
 
-		, docRoot:			""
+		, docRoot:			"/" // TODO: Should addLeadingSlash instead
 
 		, daap:		{
 			hostname:		"daap.lalonde.me"
@@ -35,7 +35,7 @@ define([
 			, debug:		true
 			, verbose:		6
 
-			, docRoot:		""
+			, docRoot:		"/"
 
 			, daap:		{
 				hostname:	"daap.localhost"

resources/js/main.js

@@ -6,7 +6,7 @@ require.config({
 	shim: {
 		"jquery-ui":				["jquery"]
 		, "jquery-event-drag":		["jquery"]
-		, "jquery-layout":			["jquery"]
+		, "jquery-layout":			["jquery", "jquery-ui"]
 		, "datatables":				["jquery"]
 
 		, "bootstrap-contextmenu":	["bootstrap"]
@@ -43,9 +43,9 @@ require.config({
 			deps:					["toolbox"]
 		}
 
-		//, "config":			{
+		, "underscore-string":	{
-		//	exports:				"Config"
+			deps:					["underscore"]
-		//}
+		}
 	}
 
 	, paths: {
@@ -59,6 +59,7 @@ require.config({
 		, "bootstrap-contextmenu":	"../vendors/bootstrap/contextmenu/59986df48f/js/bootstrap-contextmenu"
 
 		, "underscore":				"../vendors/lodash/0.9.0/lodash.underscore.min"
+		, "underscore-string":		"../vendors/lodash/string/2.3.0/underscore.string.min"
 
 		, "backbone":				"../vendors/backbone/0.9.2/backbone-min"
 		, "backbone-localstorage":	"../vendors/backbone/localstorage/8651291560/backbone.localStorage-min"
@@ -68,7 +69,6 @@ require.config({
 		, "text":					"../vendors/require/plugins/text/f5816b565b/text"
 
 		, "async":					"../vendors/async"
-		//, "config":					"config"
 	}
 
 	, baseUrl: "/resources/js"

resources/js/views/app.js

@@ -10,6 +10,8 @@ define([
 	, "jquery"
 	, "backbone"
 	, "jquery-layout"
+
+	, "jquery-ui"
 ]
 , function (_, $, Backbone) {
 	"use strict";
@@ -45,6 +47,8 @@ define([
 				, west:		{
 					size:				150
 					, closable:			true
+					, fxName:			"slider"
+					// TODO: fx does not work
 				}
 
 				, center:	{

resources/js/views/browser.js

@@ -0,0 +1,52 @@
+/*jslint laxbreak:true */
+/*jslint laxcomma:true */
+/*jslint loopfunc:true */
+/*jslint strict:true */
+/*jslint browser:true */
+/*jslint devel:true */
+
+define([
+	"underscore"
+	, "jquery"
+	, "backbone"
+
+	, "views/browser"
+	, "views/list"
+
+	, "text!../../templates/client/browser-layout.html"
+
+	, "jquery-layout"
+]
+, function (
+_
+, $
+, Backbone
+
+, BrowserView
+, ListView
+
+, tmplBrowserLayout
+) {
+	"use strict";
+
+	var Browser	= Backbone.View.extend({
+		client:		null
+
+		, layout:		null
+
+		, browserView:	null
+
+		, listView:		null
+
+		, initialize:	function (client) {
+			var that	= this
+			;
+
+			Browser.__super__.initialize.apply(that);
+
+			that.client	= client;
+		}
+	});
+
+	return Browser;
+});

resources/js/views/client.js

@@ -6,15 +6,85 @@
 /*jslint devel:true */
 
 define([
-	"jquery"
+	"underscore"
+	, "jquery"
 	, "backbone"
+
+	, "views/browser"
+	, "views/list"
+
+	, "text!../../templates/client/layout.html"
+
 	, "jquery-layout"
 ]
-, function ($, Backbone) {
+, function (
+_
+, $
+, Backbone
+
+, BrowserView
+, ListView
+
+, tmplClientLayout
+) {
 	"use strict";
 
-	return Backbone.View.extend({
+	var Client	= Backbone.View.extend({
+		el:				$(tmplClientLayout)
+
+		, client:		null
+
+		, layout:		null
+
+		, browserView:	null
+
+		, listView:		null
+
+		, initialize:	function (client) {
+			var that		= this
+			,	container	= document.createElement("div")
+			;
+
+			that.el.id		= "__view-" + client.attributes.hostname.replace(".", "_");
+
+			Client.__super__.initialize.apply(that);
+
+			that.client	= client;
+
+			that.layout	= that.$el.find("> div").layout({
+				defaults:		{
+					closable:			false
+					, resizable:		true
+					, slidable:			true
+					, spacing_open:		5
+					, spacing_closed:	5
+				}
+
+				, north:		{
+					minSize:			100
+					, size:				200
+					, closable:			true
+				}
+
+				, center:		{
+					minSize:			200
+				}
+			});
+
+			that.browserView	= new BrowserView({
+				el:		that.layout.panes.north
+				, client:	that.client
+			});
+
+			that.ListView		= new ListView({
+				el:			that.layout.panes.center
+				, client:	that.client
 			});
+
+		}
+	});
+
+	return Client;
 });
 
 /*

resources/js/views/main.js

@@ -5,9 +5,64 @@
 /*jslint browser:true */
 /*jslint devel:true */
 define([
+	"underscore"
+	, "jquery"
+	, "backbone"
+
+	, "views/list"
+	, "views/client"
 ]
-, function () {
+, function (
+_
+, $
+, Backbone
+
+, ListView
+, ClientView
+) {
 	"use strict";
 
-	return function() {};
+	var Main	= Backbone.View.extend({
+		el:				$("div#wrapperMain")
+
+		, children:		{}
+
+		, initialize:	function (playlistCollection) {
+			//this.setView("playlist", new ListView(playlistCollection));
+
+			Main.__super__.initialize.apply(this, arguments);
+		}
+
+		, setView:		function (name, view) {
+			console.debug("Set view: "+ name);
+			this.children[name]	= view;
+		}
+
+		, getView:		function (name) {
+			return this.children[name];
+		}
+
+		, showView:		function (name) {
+			console.debug("Show view: "+ name);
+			if (this.children[name] && this.children[name].$el) {
+				this.children[name].$el.show();
+				this.$el.append(this.children[name].$el);
+			}
+		}
+		, hideView:		function (name) {
+			console.debug("Hide view: "+ name);
+			if (this.children[name] && this.children[name].$el) {
+				this.children[name].$el.hide();
+				this.$el.remove(this.children[name].$el);
+			}
+		}
+
+		, toggleView:	function (name) {
+			if (this.children[name] && this.children[name].$el) {
+				this.children[name].$el.toggle();
+			}
+		}
+	});
+
+	return Main;
 });

resources/js/views/sidebar.js

@@ -68,8 +68,8 @@ _
 				that.renderServerItem(server);
 			});
 
-			this.$el.delegate("> ul > li:first-child", "dblclick", function __fnSideBarEventDblclickPlaylist(event) {
+			this.$el.delegate("> ul > li:first-child", "click", function __fnSideBarEventDblclickPlaylist(event) {
-				Backbone.Router.prototype.navigate("playlist", false);
+				Backbone.Router.prototype.navigate("playlist", true);
 
 				setTimeout(function __fnSideBarViewTimeoutTogglePlaylistClass() {
 					that.$el.find("li.selected").removeClass("selected");
@@ -204,7 +204,7 @@ console.log(event);
 				};
 			}(item));
 
-			$item.on("dblclick", function __fnSideBarViewEventDblClickItem(event) {
+			$item.on("click", function __fnSideBarViewEventDblClickItem(event) {
 					that.$el.find("li.selected").removeClass("selected");
 					$item.addClass("selected");
 /*

resources/templates/app/modal-loading.html

@@ -4,7 +4,7 @@
 	data-show="true"
 	tabindex="-1" role="dialog">
 	<div class="modal-header">
-		<h4>Loading</h4>
+		<h4>Loading...</h4>
 	</div>
 	<div class="modal-body" style="padding: 10px 10px 0 10px;">
 		<div class="progress progress-striped">

resources/templates/client/layout.html

@@ -0,0 +1,16 @@
+<div>
+	<div class="ui-layout-north row-fluid span12">
+		<div class="third">
+			<table cellpadding="0" cellspacing="0" border="0" class="table-genres"></table>
+		</div>
+		<div class="third">
+			<table cellpadding="0" cellspacing="0" border="0" class="table-artists"></table>
+		</div>
+		<div class="third">
+			<table cellpadding="0" cellspacing="0" border="0" class="table-albums"></table>
+		</div>
+	</div>
+	<div class="ui-layout-center">
+		<table cellpadding="0" cellspacing="0" border="0" class="table-list"></table>
+	</div>
+</div>