Merge pull request #2211 from WikiWatershed/mjm/gms-download

Add button for default GMS file download
WikiWatershed · Sep 1, 2017 · b2533e0 · b2533e0
2 parents e02fd99 + 1f44426
commit b2533e0
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 31 deletions.
diff --git a/src/mmw/js/src/modeling/templates/gmsDownloadForm.html b/src/mmw/js/src/modeling/templates/gmsDownloadForm.html
@@ -0,0 +1,6 @@
+<form id="export-gms-form" method="post" action="/mmw/modeling/export/gms/" target="_blank">
+    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrftoken }}">
+    <input type="hidden" name="filename" class="gms-filename" value="export.gms">
+    <!-- Put `gis_data` in single quotes, to keep any unescaped chars from breaking the template -->
+    <input type="hidden" name="mapshed_data" value='{{ gis_data }}'>
+</form>
diff --git a/src/mmw/js/src/modeling/templates/scenarioAddChangesButton.html b/src/mmw/js/src/modeling/templates/scenarioAddChangesButton.html
@@ -1,6 +1,16 @@
-<div class="tab-content scenario-toolbar-tab-content"></div>
-{% if isOnlyCurrentConditions %}
+{% if isOnlyCurrentConditions and isGwlfe %}
+<button id="download-cc-gms" class="btn btn-link" type="button" aria-expanded="true">
+    <i class="fa fa-download"></i> Export GMS
+</button>
+
+{% include "./gmsDownloadForm.html" %}
+
+{% endif %}
+<div class="right-controls-container">
+    <div class="tab-content scenario-toolbar-tab-content"></div>
+    {% if isOnlyCurrentConditions %}
     <button id="add-changes" class="btn btn-link" type="button" aria-expanded="true">
         <i class="fa fa-plus-circle"></i> Add changes to this area
     </button>
-{% endif %}
+    {% endif %}
+</div>
diff --git a/src/mmw/js/src/modeling/templates/scenarioMenuItemOptions.html b/src/mmw/js/src/modeling/templates/scenarioMenuItemOptions.html
@@ -15,12 +15,7 @@
 {% endif %}
 {% if is_gwlfe %}
     <li class="scenario-options-dropdown-menu-item" role="presentation" data-action="export-gms">
-        <form id="export-gms-form" method="post" action="/mmw/modeling/export/gms/" target="_blank">
-            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrftoken }}">
-            <input type="hidden" name="filename" class="gms-filename" value="export.gms">
-            <!-- Put `gis_data` in single quotes, to keep any unescaped chars from breaking the template -->
-            <input type="hidden" name="mapshed_data" value='{{ gis_data }}'>
-        </form>
+        {% include './gmsDownloadForm.html' %}
         <i class="fa fa-download" title="Export GMS"></i> Export GMS
     </li>
 {% endif %}

diff --git a/src/mmw/js/src/modeling/tests.js b/src/mmw/js/src/modeling/tests.js
@@ -61,7 +61,7 @@ describe('Modeling', function() {
                     collection = projectModel.get('scenarios'),
                     view = new views.ScenarioToolbarView({
                         collection: collection,
-                        model_package: "tr-55"
+                        model: projectModel,
                     });
 
                 $(sandboxSelector).html(view.render().el);
@@ -73,16 +73,17 @@ describe('Modeling', function() {
         });
 
         describe('ScenarioToolbarView', function() {
-            it('does not show the add changes button when there are non-current condition scenario', function() {
+            it('does not show the non-current condition scenario buttons', function() {
                 var collection = getTestScenarioCollection(),
                     view = new views.ScenarioToolbarView({
                         collection: collection,
-                        model_package: "tr-55"
+                        model: getTestProject(),
                     });
 
                 $(sandboxSelector).html(view.render().el);
 
                 assert.equal($('#sandbox #add-changes').text(), '');
+                assert.equal($('#sandbox #download-cc-gms').text(), '');
             });
         });
 

diff --git a/src/mmw/js/src/modeling/views.js b/src/mmw/js/src/modeling/views.js
@@ -72,7 +72,7 @@ var ModelingHeaderView = Marionette.LayoutView.extend({
         App.currentProject.fetchGisDataIfNeeded().done(function() {
             self.toolbarRegion.show(new ScenarioToolbarView({
                 collection: self.model.get('scenarios'),
-                model_package: self.model.get('model_package')
+                model: self.model
             }));
         });
     },
@@ -432,10 +432,7 @@ var ScenarioDropDownMenuOptionsView = Marionette.ItemView.extend({
 
     templateHelpers: function() {
         var gis_data = this.model.getGisData().model_input,
-            is_gwlfe = App.currentProject.get('model_package') === models.GWLFE &&
-                    gis_data !== null &&
-                    gis_data !== '{}' &&
-                    gis_data !== '';
+            is_gwlfe = App.currentProject.get('model_package') === models.GWLFE && !_.isEmpty(gis_data);
 
         return {
             is_gwlfe: is_gwlfe,
@@ -793,52 +790,77 @@ var ScenarioToolbarView = Marionette.CompositeView.extend({
     template: scenarioAddChangesButtonTmpl,
     collection: models.ScenariosCollection,
     childViewContainer: '.tab-content.scenario-toolbar-tab-content',
+    className: 'toolbar-container',
 
     ui: {
         addChangesButton: '#add-changes',
+        downloadGmsFile: '#download-cc-gms',
+        exportGmsForm: '#export-gms-form',
     },
 
     events: {
         'click @ui.addChangesButton': 'onAddChangesClick',
+        'click @ui.downloadGmsFile': 'onGmsDownloadClick',
     },
 
     collectionEvents: {
         'change:active': 'render',
     },
 
     getChildView: function() {
-        var isGwlfe = App.currentProject.get('model_package') === 'gwlfe';
+        var isGwlfe = this.modelPackage === models.GWLFE;
+
         if (isGwlfe) {
             return GwlfeToolbarView;
         } else {
             return Tr55ToolbarView;
         }
     },
+
     childViewOptions: function(model) {
         var controls = models.getControlsForModelPackage(
-            this.options.model_package,
-            {is_current_conditions: model.get('is_current_conditions')}
-        );
+                this.modelPackage,
+                {is_current_conditions: model.get('is_current_conditions')}
+            );
 
         return {
             collection: controls
         };
     },
 
-    initialize: function(options) {
-        this.mergeOptions(options, ['model_package']);
+    initialize: function() {
+        this.modelPackage = this.model.get('model_package');
+        this.currentConditions= this.collection.findWhere({is_current_conditions: true});
     },
 
     onAddChangesClick: function() {
         this.collection.createNewScenario();
     },
 
+    onGmsDownloadClick: function() {
+        // We can't download a file from an AJAX call. One either has to
+        // load the data in an iframe, or submit a form that responds with
+        // Content-Disposition: attachment. We prefer submitting a form.
+        var filename = App.currentProject.get('name').replace(/\s/g, '_') +
+                       '__' + this.currentConditions.get('name').replace(/\s/g, '_');
+
+        this.ui.exportGmsForm.find('.gms-filename').val(filename);
+        this.ui.exportGmsForm.submit();
+    },
+
     templateHelpers: function() {
+        var gisData = this.currentConditions.getGisData().model_input,
+            isGwlfe = this.modelPackage === models.GWLFE && !_.isEmpty(gisData),
+            isOnlyCurrentConditions = this.collection.length === 1 &&
+                this.collection.first().get('is_current_conditions');
+
         return {
-            isOnlyCurrentConditions: this.collection.length === 1 &&
-                this.collection.first().get('is_current_conditions'),
+            isOnlyCurrentConditions: isOnlyCurrentConditions,
+            isGwlfe: isGwlfe,
+            csrftoken: csrf.getToken(),
+            gis_data: gisData,
         };
-    }
+    },
 });
 
 var ResultsView = Marionette.LayoutView.extend({

diff --git a/src/mmw/sass/base/_header.scss b/src/mmw/sass/base/_header.scss
@@ -205,13 +205,29 @@ header {
         white-space: nowrap;
     }
 
+
     #toolbar-region {
-        margin-right: 0;
-        margin-left: auto;
+        width: 100%;
+    }
+
+    #toolbar-region > .toolbar-container {
+        display: flex;
+        flex-basis: 100%;
+        flex-direction: row;
+        height: 100%;
+
+        .right-controls-container {
+            margin-left: auto;
+        }
+
         #add-changes {
-          position: relative;
-          top: -2px;
-          color: $brand-primary;
+            color: $brand-primary;
+            height: 100%;
+        }
+
+        #download-cc-gms {
+            font-size: 13px;
+            color: inherit;
         }
     }
 

diff --git a/src/mmw/sass/pages/_model.scss b/src/mmw/sass/pages/_model.scss
@@ -70,3 +70,8 @@
     }
   }
 }
+
+// Hidden form for GMS file downloads
+#export-gms-form {
+  display: none;
+}