Worked on user view appearance

public_html/js/Controls/FileDropper.js

@@ -13,26 +13,20 @@ App.Controls.FileDropper = function(
 	$fileInput.attr('multiple', allowMultiple);
 	$fileInput.hide();
 
-	$fileInput.change(function(e)
-	{
+	$fileInput.change(function(e) {
 		addFiles(this.files);
 	});
 
-	$dropDiv.on('dragenter', function(e)
-	{
+	$dropDiv.on('dragenter', function(e) {
 		$dropDiv.addClass('active');
-	}).on('dragleave', function(e)
-	{
+	}).on('dragleave', function(e) {
 		$dropDiv.removeClass('active');
-	}).on('dragover', function(e)
-	{
+	}).on('dragover', function(e) {
 		e.preventDefault();
-	}).on('drop', function(e)
-	{
+	}).on('drop', function(e) {
 		e.preventDefault();
 		addFiles(e.originalEvent.dataTransfer.files);
-	}).on('click', function(e)
-	{
+	}).on('click', function(e) {
 		$fileInput.show().focus().trigger('click').hide();
 		$dropDiv.addClass('active');
 	});

public_html/js/Presenters/PagedCollectionPresenter.js

@@ -16,7 +16,9 @@ App.Presenters.PagedCollectionPresenter = function(util, promise, api) {
 	var totalRecords;
 
 	function init(args) {
-		parseSearchArgs(args.searchArgs);
+		pageNumber = parseInt(args.page) || 1;
+		searchOrder = args.order;
+		searchQuery = args.query;
 		baseUri = args.baseUri;
 		backendUri = args.backendUri;
 		renderCallback = args.renderCallback;
@@ -99,13 +101,6 @@ App.Presenters.PagedCollectionPresenter = function(util, promise, api) {
 			});
 	}
 
-	function parseSearchArgs(searchArgs) {
-		var args = util.parseComplexRouteArgs(searchArgs);
-		pageNumber = parseInt(args.page) || 1;
-		searchOrder = args.order;
-		searchQuery = args.query;
-	}
-
 	return {
 		init: init,
 		render: render,

public_html/js/Presenters/UserAccountRemovalPresenter.js

@@ -33,7 +33,7 @@ App.Presenters.UserAccountRemovalPresenter = function(
 	}
 
 	function render() {
-		$el = jQuery(target);
+		var $el = jQuery(target);
 		$el.html(template({
 			user: user,
 			canDeleteAccount: privileges.canDeleteAccount}));
@@ -47,7 +47,8 @@ App.Presenters.UserAccountRemovalPresenter = function(
 
 	function accountRemovalFormSubmitted(e) {
 		e.preventDefault();
-		$messages = jQuery(target).find('.messages');
+		var $el = jQuery(target);
+		$messages = $el.find('.messages');
 		messagePresenter.hideMessages($messages);
 		if (!$el.find('input[name=confirmation]:visible').prop('checked')) {
 			messagePresenter.showError($messages, 'Must confirm to proceed.');

public_html/js/Presenters/UserBrowsingSettingsPresenter.js

@@ -28,7 +28,7 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 	}
 
 	function render() {
-		$el = jQuery(target);
+		var $el = jQuery(target);
 		$el.html(template({user: user}));
 	}
 

public_html/js/Presenters/UserListPresenter.js

@@ -26,9 +26,13 @@ App.Presenters.UserListPresenter = function(
 	}
 
 	function initPaginator(args) {
-		activeSearchOrder = util.parseComplexRouteArgs(args.searchArgs).order;
+		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
+		searchArgs.order = searchArgs.order || 'name';
+		activeSearchOrder = searchArgs.order;
+
 		pagedCollectionPresenter.init({
-			searchArgs: args.searchArgs,
+			pageNumber: searchArgs.page,
+			order: searchArgs.order,
 			baseUri: '#/users',
 			backendUri: '/users',
 			renderCallback: function updateCollection(data) {
@@ -44,6 +48,7 @@ App.Presenters.UserListPresenter = function(
 	function render() {
 		$el.html(template({
 			userList: userList,
+			formatRelativeTime: util.formatRelativeTime,
 		}));
 		$el.find('.order a').click(orderLinkClicked);
 		$el.find('.order [data-order="' + activeSearchOrder + '"]').parent('li').addClass('active');
@@ -52,8 +57,7 @@ App.Presenters.UserListPresenter = function(
 		pagedCollectionPresenter.render($pager);
 	};
 
-	function orderLinkClicked(e)
-	{
+	function orderLinkClicked(e) {
 		e.preventDefault();
 		var $orderLink = jQuery(this);
 		activeSearchOrder = $orderLink.attr('data-order');

public_html/js/Presenters/UserPresenter.js

@@ -18,6 +18,7 @@ App.Presenters.UserPresenter = function(
 	var template;
 	var user;
 	var userName;
+	var activeTab;
 
 	function init(args) {
 		userName = args.userName;
@@ -39,7 +40,9 @@ App.Presenters.UserPresenter = function(
 				userBrowsingSettingsPresenter.init(_.extend(extendedContext, {target: '#browsing-settings-target'})),
 				userAccountSettingsPresenter.init(_.extend(extendedContext, {target: '#account-settings-target'})),
 				userAccountRemovalPresenter.init(_.extend(extendedContext, {target: '#account-removal-target'})))
-			.then(render);
+			.then(function() {
+				initTabs(args);
+			})
 
 		}).fail(function(response) {
 			$el.empty();
@@ -47,6 +50,11 @@ App.Presenters.UserPresenter = function(
 		});
 	}
 
+	function initTabs(args) {
+		activeTab = args.tab || 'basic-info';
+		render();
+	}
+
 	function render() {
 		$el.html(template({
 			user: user,
@@ -56,10 +64,23 @@ App.Presenters.UserPresenter = function(
 		userBrowsingSettingsPresenter.render();
 		userAccountSettingsPresenter.render();
 		userAccountRemovalPresenter.render();
-	};
+		changeTab(activeTab);
+	}
+
+	function changeTab(targetTab) {
+		var $link = $el.find('a[data-tab=' + targetTab + ']');
+		var $links = $link.closest('ul').find('a[data-tab]');
+		var tab = $link.attr('data-tab');
+		var $tabs = $link.closest('.tab-wrapper').find('.tab');
+		$links.removeClass('active');
+		$link.addClass('active');
+		$tabs.removeClass('active');
+		$tabs.filter('[data-tab=' + tab + ']').addClass('active');
+	}
 
 	return {
 		init: init,
+		reinit: initTabs,
 		render: render
 	};
 

public_html/js/Router.js

@@ -25,6 +25,7 @@ App.Router = function(jQuery, util, appState) {
 		inject('#/users', 'userListPresenter');
 		inject('#/users/:searchArgs', 'userListPresenter');
 		inject('#/user/:userName', 'userPresenter');
+		inject('#/user/:userName/:tab', 'userPresenter');
 		setRoot('#/users');
 	};
 

public_html/js/Util.js

@@ -90,12 +90,64 @@ App.Util = (function(jQuery, promise) {
 		});
 	}
 
+	function formatRelativeTime(timeString) {
+		if (!timeString)
+			return 'never';
+
+		var time = Date.parse(timeString);
+		var now = Date.now();
+		var difference = Math.abs(now - time);
+		var future = now < time;
+
+		var text = (function(difference) {
+			var mul = 1000;
+			var prevMul;
+
+			mul *= 60;
+			if (difference < mul)
+				return 'a few seconds';
+			if (difference < mul * 2)
+				return 'a minute';
+
+			prevMul = mul; mul *= 60;
+			if (difference < mul)
+				return Math.round(difference / prevMul) + ' minutes';
+			if (difference < mul * 2)
+				return 'an hour';
+
+			prevMul = mul; mul *= 24;
+			if (difference < mul)
+				return Math.round(difference / prevMul) + ' hours';
+			if (difference < mul * 2)
+				return 'a day';
+
+			prevMul = mul; mul *= 30.42;
+			if (difference < mul)
+				return Math.round(difference / prevMul) + ' days';
+			if (difference < mul * 2)
+				return 'a month';
+
+			prevMul = mul; mul *= 12;
+			if (difference < mul)
+				return Math.round(difference / prevMul) + ' months';
+			if (difference < mul * 2)
+				return 'a year';
+
+			return Math.round(difference / mul) + ' years';
+		})(difference);
+
+		if (text == 'a day')
+			return future ? 'tomorrow' : 'yesterday';
+		return future ? 'in ' + text : text + ' ago';
+	}
+
 	return {
 		promiseTemplate: promiseTemplate,
 		initPresenter : initPresenter,
 		initContentPresenter: initContentPresenter,
 		parseComplexRouteArgs: parseComplexRouteArgs,
 		compileComplexRouteArgs: compileComplexRouteArgs,
+		formatRelativeTime: formatRelativeTime,
 	};
 });