daapr/resources/js/views/sidebar.js

/*jslint laxbreak:true */
/*jslint laxcomma:true */
/*jslint loopfunc:true */
/*jslint strict:true */
/*jslint browser:true */
/*jslint devel:true */

define([
	"underscore"
	, "jquery"
	, "backbone"
	, "bootstrap"
	, "async"

	, "config"

	, "collections/server"

	, "text!../../templates/sidebar/server-list-item.html"
	, "text!../../templates/sidebar/modal-new-server.html"
]
, function (
_
, $
, Backbone
, Bootstrap
, async

, Config

, ServerCollection

, tmplServerListItem
, tmplModalNewServer
) {
	"use strict";

	return Backbone.View.extend({
		el:				$("div#wrapperSideBar")
		, elServerList:	$("div#wrapperSideBar ul.siderbar-server-list")

		, events:			{
			"click > ul > li:last-child > span > a.sidebar-list-action":	"_addServerItem"
		}

		, initialize:	function () {
			_.bindAll(this, "renderServerItem", "_addServerItem");
			var that		= this
			, serverModel	= null
			;

			this.servers	= new ServerCollection();

			this.servers.fetch({
				success:	function (collection, modelsAttributes) {
					if (modelsAttributes.length === 0) {
						console.info("Adding default daap server");
						collection.add(Config.daap);
					}

					async.forEach(collection.models, that.renderServerItem);
				}
			});

			this.servers.on("add", function (server) {
				that.renderServerItem(server);
				server.save();
			});
		}

		, _addServerItem:	function(event) {
			var that	= this
			, modalEl	= $(tmplModalNewServer)
			;

			modalEl.modal();

			modalEl.find("button[data-save='modal']").on("click", function (event) {
				modalEl.find("form").submit();
			});

			modalEl.find("form").on("submit", function (event) {
				var $input	= $(event.target).find("input")
				, value		= $input.val()
				, protocol	= "http"
				, port		= 3689
				, domain	= ""
				, errors	= []
				;

				if (value.substr(-1) === "/") {
					value		= value.substr(0, value.length - 1);
				}

				if (/^(?:http|daap)(?:s)?:\/\//.test(value)) {
					protocol	= value.substring(0, value.indexOf(":")).replace("daap", "http");

					value		= value.substr(value.indexOf(":") + 3);
				}

				if (value.indexOf(":") > 0) {
					port		= value.substring(value.indexOf(":") + 1);

					value		= value.substring(0, value.indexOf(":"));
				} else if (protocol === "https") {
					port		= 443;
				}

				domain	= value.toLowerCase();

				if (isNaN((port = parseInt(port, 10)))) {
					errors.push("Invalid port number: 3689");
				}

				if (protocol !== "http" && protocol !== "https") {
					errors.push("Invalid protocol: http(s)");
				}

				if (_.isEmpty(domain)
					|| /^([a-z0-9]([\-a-z0-9]*[a-z0-9])?\\.)+((a[cdefgilmnoqrstuwxz]|aero|arpa)|(b[abdefghijmnorstvwyz]|biz)|(c[acdfghiklmnorsuvxyz]|cat|com|coop)|d[ejkmoz]|(e[ceghrstu]|edu)|f[ijkmor]|(g[abdefghilmnpqrstuwy]|gov)|h[kmnrtu]|(i[delmnoqrst]|info|int)|(j[emop]|jobs)|k[eghimnprwyz]|l[abcikrstuvy]|(m[acdghklmnopqrstuvwxyz]|mil|mobi|museum)|(n[acefgilopruz]|name|net)|(om|org)|(p[aefghklmnrstwy]|pro)|qa|r[eouw]|s[abcdeghijklmnortvyz]|(t[cdfghjklmnoprtvwz]|travel)|u[agkmsyz]|v[aceginu]|w[fs]|y[etu]|z[amw])$/.test(domain)) {
					errors.push("Invalid server domain");
				}

				if (errors.length > 0) {
					alert("Please correct the following errors:\n" + errors.join("\n"));
				} else {
					modalEl.modal("hide");

					setTimeout(function __fnSaveServerModel() {
						that.servers.add({
							protocol:	protocol
							, port:		port
							, hostname:	domain
						});
					}, 10);
				}

				return false;
			});

			modalEl.on("hidden", function (event) {
				$(event.target).remove();
			});
		}

		, renderServerItem:	function (item) {
			var that	= this
			, itemHtml	= _.template(tmplServerListItem, {
							server_name:	item.getName()
						})
			, $item	= $(itemHtml)
			;

			this.elServerList.append($item);

			item.on("change", function __fnSideBarViewClientItemChanged(event) {
				if (event.get("name")) {
					$item.find("span > span").text(event.getName());
				}
			});

			item.on("client:state", function __fnSideBarViewEventClientState(event) {
				that.changeServerItemState($item.find("span > i:first-child"), event);
			});

			item.client.init();

			$item.find("a.sidebar-list-action").on("click", function (model) {
				return function __fnSideBarClickRemoveAction (event) {
					var confirmMessage	= "Are you sure you want to delete:\n" + item.getName();

					if (window.confirm(confirmMessage)) {
						$(event.target).parents("li:first").fadeOut(300, function() { $(this).remove(); });

						setTimeout(function () {
							model.destroy();
						}, 10);
					}
				};
			}(item));

			$item.on("dblclick", function (model) {
				return function __fnSideBarViewEventDblClickItem(event) {

				};
			}(item));
		}

		, changeServerItemState:	function ($glyph, event) {
				var newClass	= "icon-folder-closed"
				,	client		= event.shift()
				,	state		= event.shift()
				;

				switch (state) {
					case 2:
					case 5:
						newClass	= "icon-loading";
					break;
					case 3:
						newClass	= "icon-exclamation-sign";
					break;
					case 4:
						newClass	= "icon-ok-sign";
					break;
					case 6:
						newClass	= "icon-folder-open";
					break;
					default:
					case 0:
					case 1:
						newClass	= "icon-folder-closed";
					break;
				}

				$glyph.removeClass();
				$glyph.addClass(newClass);
		}
	});
});