Merge pull request #2772 from WikiWatershed/arr/subbasin-container

Add Subbasin Container; Refactor Result Models

scripts/toggle_feature.sh

@@ -32,8 +32,9 @@ enableFeature() {
 RESTART_APP=0
 for n; do
     case $n in
-        subbasin)
-            enableFeature subbasin
+        # Replace 'example' with the feature you to be togglable
+        example)
+            enableFeature example
             shift
             ;;
         clear)

src/mmw/js/src/modeling/gwlfe/subbasin/models.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var Backbone = require('../../../../shim/backbone');
+
+var SubbasinTabModel = Backbone.Model.extend({
+    defaults: {
+        displayName: '',
+        name: '',
+    },
+});
+
+var SubbasinTabCollection = Backbone.Collection.extend({
+    model: SubbasinTabModel,
+});
+
+module.exports = {
+    SubbasinTabModel: SubbasinTabModel,
+    SubbasinTabCollection: SubbasinTabCollection,
+};

src/mmw/js/src/modeling/gwlfe/subbasin/templates/huc12TotalsTable.html

@@ -0,0 +1 @@
+<h3>HUC-12 totals here</h3>

src/mmw/js/src/modeling/gwlfe/subbasin/templates/result.html

@@ -1,11 +1,9 @@
-<div class="result">
-    <div class="result-detail-header">
-        <a type="button" class="close" aria-label="Close"
-           data-action="close-subbasin-view"
-           id="close-subbasin-view">
-            <i class="fa fa-arrow-left black"></i> Exit subbasin attenuated results
-        </a>
-    </div>
-    <div class="result-region">
-    </div>
+<div class="result-title">
+    {{ aoiDetails }}
 </div>
+<p class="result-description text-muted">
+    Displaying average annual loads from 30-years of fluxes
+</p>
+
+<div role="tabpanel" class="subbasin-tab-panel-region"></div>
+<div class="subbasin-tab-content-region"></div>

src/mmw/js/src/modeling/gwlfe/subbasin/templates/sourcesTable.html

@@ -0,0 +1 @@
+<h3>Source table here</h3>

src/mmw/js/src/modeling/gwlfe/subbasin/templates/tableTabContent.html

@@ -0,0 +1 @@
+<div class="table-region"></div>

src/mmw/js/src/modeling/gwlfe/subbasin/templates/tableTabPanel.html

@@ -0,0 +1,3 @@
+<a href="#{{ name }}" aria-controls="home" role="tab" data-toggle="tab">
+    <div class="sidebar-tab-header-label">{{ displayName }}</div>
+</a>

src/mmw/js/src/modeling/gwlfe/subbasin/views.js

@@ -2,51 +2,122 @@
 
 var Marionette = require('../../../../shim/backbone.marionette'),
     App = require('../../../app'),
-    coreViews = require('../../../core/views'),
-    coreModels = require('../../../core/models'),
-    resultTmpl = require('./templates/result.html');
+    models = require('./models'),
+    resultTmpl = require('./templates/result.html'),
+    tableTabContentTmpl = require('./templates/tableTabContent.html'),
+    tableTabPanelTmpl = require('./templates/tableTabPanel.html'),
+    huc12TotalsTableTmpl = require('./templates/huc12TotalsTable.html'),
+    sourcesTableTmpl = require('./templates/sourcesTable.html');
 
 var ResultView = Marionette.LayoutView.extend({
-    className: 'tab-pane',
     template: resultTmpl,
 
     regions: {
-        resultRegion: '.result-region',
+        tabPanelRegion: '.subbasin-tab-panel-region',
+        tabContentRegion: '.subbasin-tab-content-region',
     },
 
-    ui: {
-        'close': '[data-action="close-subbasin-view"]',
+    templateHelpers: function() {
+        return {
+            aoiDetails: App.currentProject.get('area_of_interest_name'),
+        };
     },
 
-    events: {
-        'click @ui.close': 'handleSubbasinCloseButtonClick',
+    onShow: function() {
+        var tabCollection = new models.SubbasinTabCollection([
+            new models.SubbasinTabModel({
+                displayName: 'Sources',
+                name: 'aoiSources',
+            }),
+            new models.SubbasinTabModel({
+                displayName: 'HUC-12',
+                name: 'huc12Totals',
+            }),
+        ]);
+        this.tabPanelRegion.show(new TableTabPanelCollectionView({
+            collection: tabCollection,
+        }));
+        this.tabContentRegion.show(new TableTabContentCollectionView({
+            collection: tabCollection,
+        }));
     },
+});
 
-    onShow: function() {
-        var taskMessageViewModel = new coreModels.TaskMessageViewModel(),
-            polling = true;
+var TableTabPanelView = Marionette.ItemView.extend({
+    // model: SubbasinTabModel
+    tagName: 'li',
+    template: tableTabPanelTmpl,
+    attributes: {
+        role: 'presentation',
+    },
+});
 
-        taskMessageViewModel.setWorking(polling ?
-            'Calculating Results': 'Gathering Data');
+var TableTabPanelCollectionView = Marionette.CollectionView.extend({
+    // collection: SubbasinTabCollection
+    tagName: 'ul',
+    className: 'nav nav-tabs model-nav-tabs',
+    attributes: {
+        role: 'tablist'
+    },
 
-        this.resultRegion.show(
-            new coreViews.TaskMessageView({
-                model: taskMessageViewModel,
-            })
-        );
+    childView: TableTabPanelView,
 
-        var isSubbasinMode = true;
+    onRender: function() {
+        this.$el.find('li:first').addClass('active');
+    },
+});
 
-        App
-            .currentProject
-            .fetchResultsIfNeeded(isSubbasinMode);
+var TableTabContentView = Marionette.LayoutView.extend({
+    // model: SubbasinTabModel
+    template: tableTabContentTmpl,
+    tagName: 'div',
+    className: 'tab-pane',
+    attributes: {
+        role: 'tabpanel',
+    },
+    regions: {
+        tableRegion: '.table-region',
     },
 
-    handleSubbasinCloseButtonClick: function() {
-        this.options.hideSubbasinHotSpotView();
+    onShow: function() {
+        var tableViewKey = this.model.get('name'),
+            TableView = tableViews[tableViewKey];
+        if (!TableView) {
+            console.error('Use of table view key without TableView: ', tableViewKey);
+            return null;
+        }
+
+        this.tableRegion.show(new TableView({}));
     },
+
+    id: function() {
+        return this.model.get('name');
+    }
 });
 
+var TableTabContentCollectionView = Marionette.CollectionView.extend({
+    // collection: SubbasinTabCollection
+    tagName: 'div',
+    className: 'tab-content model-tab-content',
+    childView: TableTabContentView,
+    onRender: function() {
+        this.$el.find('.tab-pane:first').addClass('active');
+    }
+});
+
+var AoiSourcesTableView = Marionette.ItemView.extend({
+    template: sourcesTableTmpl,
+});
+
+var Huc12TotalsTableView = Marionette.ItemView.extend({
+    template: huc12TotalsTableTmpl,
+});
+
+var tableViews = {
+    aoiSources: AoiSourcesTableView,
+    huc12Totals: Huc12TotalsTableView,
+};
+
 module.exports = {
     ResultView: ResultView,
 };