Merge pull request #2363 from WikiWatershed/arr/account-page-skelly

Create Account Page Skeleton

src/mmw/apps/home/urls.py

@@ -11,6 +11,7 @@
     '',
     url(r'^$', home_page, name='home_page'),
     url(r'^draw/?$', home_page, name='home_page'),
+    url(r'^account/?$', home_page, name='account'),
     url(r'^projects/$', projects, name='projects'),
     url(r'^project/$', project, name='project'),
     url(r'^project/new/', project, name='project'),

src/mmw/js/src/account/controllers.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var App = require('../app'),
+    views = require('./views'),
+    models = require('./models'),
+    router = require('../router').router,
+    coreUtils= require('../core/utils');
+
+var AccountController = {
+    accountPrepare: function() {
+        App.rootView.geocodeSearchRegion.empty();
+    },
+
+    account: function() {
+        showLoginOrAccountView();
+    },
+
+    accountCleanUp: function() {
+        App.rootView.footerRegion.empty();
+        App.showLayerPicker();
+    }
+};
+
+function showAccountView() {
+    App.rootView.footerRegion.show(
+        new views.AccountContainerView({
+            model: new models.AccountContainerModel()
+        })
+    );
+    App.rootView.layerPickerRegion.empty();
+
+    App.state.set('active_page', coreUtils.accountPageTitle);
+}
+
+function showLoginOrAccountView() {
+    App.user.fetch().always(function() {
+        if (App.user.get('guest')) {
+            var loginSuccess = function() {
+                router.navigate("/account", { trigger: true });
+            };
+            App.showLoginModal(loginSuccess);
+            // Until the user has logged in, show the main page
+            router.navigate("/", { trigger: true });
+        } else {
+            showAccountView();
+        }
+    });
+}
+
+module.exports = {
+    AccountController: AccountController
+};

src/mmw/js/src/account/models.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var Backbone = require('../../shim/backbone');
+
+var ACCOUNT = 'account';
+var PROFILE = 'profile';
+
+var AccountContainerModel = Backbone.Model.extend({
+    defaults: {
+        active_page: PROFILE
+    }
+});
+
+module.exports = {
+    ACCOUNT: ACCOUNT,
+    PROFILE: PROFILE,
+    AccountContainerModel: AccountContainerModel
+};

src/mmw/js/src/account/templates/account.html

@@ -0,0 +1 @@
+<h3>Account</h3>

src/mmw/js/src/account/templates/container.html

@@ -0,0 +1,20 @@
+<div id="account-container">
+    <div class="page-toggle-column">
+        <button
+            class="page-toggle-button {{'active' if active_page == 'profile' }}"
+            data-action="viewprofile"
+        >
+            Profile
+        </button>
+        <button
+            class="page-toggle-button {{'active' if active_page == 'account' }}"
+            data-action="viewaccount"
+        >
+            Account
+        </button>
+    </div>
+    <div class="account-page-column">
+        <div class="account-page-container"></div>
+    </div>
+</div>
+

src/mmw/js/src/account/templates/profile.html

@@ -0,0 +1 @@
+<h3>Profile</h3>

src/mmw/js/src/account/views.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var Marionette = require('../../shim/backbone.marionette'),
+    models = require('./models'),
+    containerTmpl = require('./templates/container.html'),
+    profileTmpl = require('./templates/profile.html'),
+    accountTmpl = require('./templates/account.html');
+
+var ProfileView = Marionette.ItemView.extend({
+    template: profileTmpl
+});
+
+var AccountView = Marionette.ItemView.extend({
+    template: accountTmpl
+});
+
+var AccountContainerView = Marionette.LayoutView.extend({
+    // model AccountContainerModel
+
+    template: containerTmpl,
+
+    ui: {
+        profile: '[data-action="viewprofile"]',
+        account: '[data-action="viewaccount"]'
+    },
+
+    events: {
+        'click @ui.profile': 'viewProfile',
+        'click @ui.account': 'viewAccount'
+    },
+
+    modelEvents: {
+        'change:active_page': 'render'
+    },
+
+    regions: {
+        infoContainer: '.account-page-container'
+    },
+
+    showActivePage: function() {
+        var activePage = this.model.get('active_page');
+
+        switch(activePage) {
+            case models.PROFILE:
+                this.infoContainer.show(new ProfileView());
+                break;
+            case models.ACCOUNT:
+                this.infoContainer.show(new AccountView());
+                break;
+            default:
+                console.error("Account page, ", activePage,
+                              ", is not supported.");
+        }
+    },
+
+    onRender: function() {
+        this.showActivePage();
+    },
+
+    viewProfile: function() {
+        this.model.set('active_page', models.PROFILE);
+    },
+
+    viewAccount: function() {
+        this.model.set('active_page', models.ACCOUNT);
+    }
+});
+
+module.exports = {
+    AccountContainerView: AccountContainerView
+};

src/mmw/js/src/core/templates/header.html

@@ -20,6 +20,7 @@
                         {% if not itsi_embed %}
                             <li><a data-url="/projects/">My Projects</a></li>
                         {% endif %}
+                        <li><a data-url="/account/">My Account</a></li>
                         <li><a href="/user/logout" class="user-logout">Logout</a></li>
                     </ul>
                 </li>

src/mmw/js/src/core/utils.js

@@ -33,6 +33,8 @@ var utils = {
 
     projectsPageTitle: 'Projects',
 
+    accountPageTitle: 'Account',
+
     filterNoData: function(data) {
         if (data && !isNaN(data) && isFinite(data)) {
             return data.toFixed(3);

src/mmw/js/src/routes.js

@@ -4,6 +4,7 @@ var router = require('./router').router,
     settings = require('./core/settings'),
     DrawController = require('./draw/controllers').DrawController,
     AnalyzeController = require('./analyze/controllers').AnalyzeController,
+    AccountController = require('./account/controllers').AccountController,
     DataCatalogController = require('./data_catalog/controllers').DataCatalogController,
     ModelingController = require('./modeling/controllers').ModelingController,
     CompareController = require('./compare/controllers').CompareController,
@@ -14,6 +15,7 @@ var router = require('./router').router,
 router.addRoute(/^/, DrawController, 'splash');
 router.addRoute(/^draw/, DrawController, 'draw');
 router.addRoute(/^analyze/, AnalyzeController, 'analyze');
+router.addRoute(/^account/, AccountController, 'account');
 router.addRoute('project/new/:modelPackage(/)', ModelingController, 'makeNewProject');
 router.addRoute('project(/:projectId)(/scenario/:scenarioId)(/)', ModelingController, 'project');
 router.addRoute('project/:projectId/clone(/)', ModelingController, 'projectClone');

src/mmw/sass/main.scss

@@ -77,6 +77,7 @@
   "pages/model",
   "pages/compare",
   "pages/projects",
+  "pages/account",
   "pages/water-balance",
   "pages/registration",
   "pages/data-catalog";

src/mmw/sass/pages/_account.scss

@@ -0,0 +1,43 @@
+#account-container {
+    padding: 2em;
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    background-color: #eceff1;
+    transition: 0.3s ease left, 0.3s ease right;
+
+    > .page-toggle-column {
+        width: 100px;
+    }
+
+    > .account-page-column {
+        flex-grow: 1;
+    }
+}
+
+#account-container .page-toggle-button {
+    background: none;
+    border: none;
+    display: block;
+    font-size: $font-size-h4;
+    font-weight: lighter;
+
+    &.active {
+        font-weight: bolder;
+        color: $brand-primary;
+    }
+}
+
+#account-container .account-page-container {
+    background: $paper;
+    padding: 2rem;
+    box-sizing: content-box;
+    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
+    margin-left: 8em;
+    max-width: 700px;
+}