diff --git a/public_html/index.html b/public_html/index.html index 12c16564..51920f55 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -36,6 +36,7 @@ + diff --git a/public_html/js/Auth.js b/public_html/js/Auth.js index 24d35b80..6128fd44 100644 --- a/public_html/js/Auth.js +++ b/public_html/js/Auth.js @@ -74,9 +74,9 @@ App.Auth = function(jQuery, api, appState) { }; function updateAppState(response) { - appState.set('loggedIn', response.json.user && !!response.json.user.id); appState.set('loginToken', response.json.token && response.json.token.name); appState.set('loggedInUser', response.json.user); + appState.set('loggedIn', response.json.user && !!response.json.user.id); } return { diff --git a/public_html/js/Bootstrap.js b/public_html/js/Bootstrap.js index 1b4c831a..0346ba1c 100644 --- a/public_html/js/Bootstrap.js +++ b/public_html/js/Bootstrap.js @@ -1,6 +1,8 @@ var App = App || {}; -App.Bootstrap = function(auth, router) { +App.Bootstrap = function(auth, router, util) { + + util.initPresenter(function() { return App.DI.get('topNavigationPresenter'); }); auth.tryLoginFromCookie() .then(startRouting) diff --git a/public_html/js/Presenters/LoginPresenter.js b/public_html/js/Presenters/LoginPresenter.js index 3b8ac20e..9a678773 100644 --- a/public_html/js/Presenters/LoginPresenter.js +++ b/public_html/js/Presenters/LoginPresenter.js @@ -10,22 +10,19 @@ App.Presenters.LoginPresenter = function( router, appState) { - topNavigationPresenter.select('login'); - var $el = jQuery('#content'); var $messages; var template; - util.loadTemplate('login-form').then(function(html) { - template = _.template(html); - init(); - }); - function init() { - if (appState.get('loggedIn')) - router.navigateToMainPage(); - else - render(); + topNavigationPresenter.select('login'); + util.loadTemplate('login-form').then(function(html) { + template = _.template(html); + if (appState.get('loggedIn')) + router.navigateToMainPage(); + else + render(); + }); } function render() { @@ -55,6 +52,7 @@ App.Presenters.LoginPresenter = function( } return { + init: init, render: render, }; diff --git a/public_html/js/Presenters/LogoutPresenter.js b/public_html/js/Presenters/LogoutPresenter.js index 882b2271..a0eec48d 100644 --- a/public_html/js/Presenters/LogoutPresenter.js +++ b/public_html/js/Presenters/LogoutPresenter.js @@ -8,13 +8,10 @@ App.Presenters.LogoutPresenter = function( auth, router) { - topNavigationPresenter.select('logout'); - var $messages = jQuery('#content'); - init(); - function init() { + topNavigationPresenter.select('logout'); auth.logout().then(function() { var $messageDiv = messagePresenter.showInfo($messages, 'Logged out. Back to main page'); $messageDiv.find('a').click(mainPageLinkClicked); @@ -28,7 +25,9 @@ App.Presenters.LogoutPresenter = function( router.navigateToMainPage(); } - return {}; + return { + init: init + }; }; diff --git a/public_html/js/Presenters/RegistrationPresenter.js b/public_html/js/Presenters/RegistrationPresenter.js index e83f5866..8f6f656f 100644 --- a/public_html/js/Presenters/RegistrationPresenter.js +++ b/public_html/js/Presenters/RegistrationPresenter.js @@ -8,18 +8,15 @@ App.Presenters.RegistrationPresenter = function( messagePresenter, api) { - topNavigationPresenter.select('register'); - var $el = jQuery('#content'); var template; - util.loadTemplate('registration-form').then(function(html) { - template = _.template(html); - init(); - }); - function init() { - render(); + topNavigationPresenter.select('register'); + util.loadTemplate('registration-form').then(function(html) { + template = _.template(html); + render(); + }); } function render() { @@ -84,6 +81,7 @@ App.Presenters.RegistrationPresenter = function( }; return { + init: init, render: render, }; diff --git a/public_html/js/Presenters/TopNavigationPresenter.js b/public_html/js/Presenters/TopNavigationPresenter.js index ad658866..f8bd0de7 100644 --- a/public_html/js/Presenters/TopNavigationPresenter.js +++ b/public_html/js/Presenters/TopNavigationPresenter.js @@ -7,14 +7,12 @@ App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) { var $el = jQuery('#top-navigation'); var template; - util.loadTemplate('top-navigation').then(function(html) { - template = _.template(html); - init(); - }); - function init() { - render(); - appState.startObserving('loggedIn', 'top-navigation', loginStateChanged); + util.loadTemplate('top-navigation').then(function(html) { + template = _.template(html); + render(); + appState.startObserving('loggedIn', 'top-navigation', loginStateChanged); + }); } function select(newSelectedElement) { @@ -28,11 +26,15 @@ App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) { } function render() { - $el.html(template({loggedIn: appState.get('loggedIn')})); + $el.html(template({ + loggedIn: appState.get('loggedIn'), + user: appState.get('loggedInUser'), + })); $el.find('li.' + selectedElement).addClass('active'); }; return { + init: init, render: render, select: select, }; diff --git a/public_html/js/Presenters/UserListPresenter.js b/public_html/js/Presenters/UserListPresenter.js index f7a46112..77b40009 100644 --- a/public_html/js/Presenters/UserListPresenter.js +++ b/public_html/js/Presenters/UserListPresenter.js @@ -3,13 +3,10 @@ App.Presenters = App.Presenters || {}; App.Presenters.UserListPresenter = function(jQuery, topNavigationPresenter, appState) { - topNavigationPresenter.select('users'); - var $el = jQuery('#content'); - init(); - function init() { + topNavigationPresenter.select('users'); render(); } @@ -18,6 +15,7 @@ App.Presenters.UserListPresenter = function(jQuery, topNavigationPresenter, appS }; return { + init: init, render: render }; diff --git a/public_html/js/Presenters/UserPresenter.js b/public_html/js/Presenters/UserPresenter.js new file mode 100644 index 00000000..8587ea12 --- /dev/null +++ b/public_html/js/Presenters/UserPresenter.js @@ -0,0 +1,26 @@ +var App = App || {}; +App.Presenters = App.Presenters || {}; + +App.Presenters.UserPresenter = function(jQuery, topNavigationPresenter, appState) { + + var $el = jQuery('#content'); + var userName; + + function init(args) { + userName = args.userName; + topNavigationPresenter.select(appState.get('loggedIn') && appState.get('loggedInUser').name == userName ? 'my-account' : 'users'); + render(); + } + + function render() { + $el.html('Viewing user: ' + userName); + }; + + return { + init: init, + render: render + }; + +}; + +App.DI.register('userPresenter', App.Presenters.UserPresenter); diff --git a/public_html/js/Router.js b/public_html/js/Router.js index 3c68755f..7755ff0e 100644 --- a/public_html/js/Router.js +++ b/public_html/js/Router.js @@ -1,6 +1,6 @@ var App = App || {}; -App.Router = function(jQuery) { +App.Router = function(jQuery, util) { var root = '#/'; @@ -18,16 +18,12 @@ App.Router = function(jQuery) { Path.listen(); }; - function changePresenter(presenterGetter) { - jQuery('#content').empty(); - var presenter = presenterGetter(); - }; - function injectRoutes() { - inject('#/login', function() { return new App.DI.get('loginPresenter'); }); - inject('#/logout', function() { return new App.DI.get('logoutPresenter'); }); - inject('#/register', function() { return new App.DI.get('registrationPresenter'); }); + inject('#/login', function() { return App.DI.get('loginPresenter'); }); + inject('#/logout', function() { return App.DI.get('logoutPresenter'); }); + inject('#/register', function() { return App.DI.get('registrationPresenter'); }); inject('#/users', function() { return App.DI.get('userListPresenter'); }); + inject('#/users/:userName', function() { return App.DI.get('userPresenter'); }); setRoot('#/users'); }; @@ -38,7 +34,7 @@ App.Router = function(jQuery) { function inject(path, presenterGetter) { Path.map(path).to(function() { - changePresenter(presenterGetter); + util.initContentPresenter(presenterGetter, this.params); }); }; diff --git a/public_html/js/Util.js b/public_html/js/Util.js index f8559245..707faa18 100644 --- a/public_html/js/Util.js +++ b/public_html/js/Util.js @@ -28,6 +28,16 @@ App.Util = (function(jQuery) { return null; } + function initPresenter(presenterGetter, args) { + var presenter = presenterGetter(); + presenter.init.call(presenter, args); + } + + function initContentPresenter(presenterGetter, args) { + jQuery('#content').empty(); + initPresenter(presenterGetter, args); + }; + function loadTemplateWithAJAX(templateName) { return new Promise(function(resolve, reject) { var templatesDir = '/templates'; @@ -50,6 +60,8 @@ App.Util = (function(jQuery) { return { loadTemplate: loadTemplate, + initPresenter : initPresenter, + initContentPresenter: initContentPresenter, }; }); diff --git a/public_html/templates/top-navigation.tpl b/public_html/templates/top-navigation.tpl index f19aac89..db4ec709 100644 --- a/public_html/templates/top-navigation.tpl +++ b/public_html/templates/top-navigation.tpl @@ -11,6 +11,9 @@ Register <% } else { %> +
  • + <%= user.name %> +
  • Logout