PA DEP: Add Front-end Button to Download Worksheet

src/mmw/apps/export/views.py

@@ -171,8 +171,11 @@ def shapefile(request):
 @decorators.api_view(['POST'])
 def worksheet(request):
     """Generate a ZIP of BMP Excel Worksheets prefilled with relevant data."""
+    params = request.data
+    payload = json.loads(params.get('payload', '{}'))
+
     # Extract list of items containing worksheet specifications and geojsons
-    items = padep_worksheet(request.data)
+    items = padep_worksheet(payload)
 
     # Make a temporary directory to save the files in
     tempdir = tempfile.mkdtemp()

src/mmw/js/src/analyze/models.js

@@ -23,6 +23,48 @@ var LayerCategoryCollection = Backbone.Collection.extend({
 
 });
 
+var WorksheetModel = coreModels.TaskModel.extend({
+    defaults: _.extend({
+            name: 'worksheet',
+            displayName: 'Worksheet',
+            area_of_interest: null,
+            wkaoi: null,
+            taskName: 'modeling/worksheet',
+            taskType: 'api',
+            token: settings.get('api_token'),
+        }, coreModels.TaskModel.prototype.defaults
+    ),
+
+    runWorksheetAnalysis: function() {
+        var self = this,
+            aoi = self.get('area_of_interest'),
+            wkaoi = self.get('wkaoi'),
+            result = self.get('result');
+
+        if (aoi &&
+            !result &&
+            !utils.isWKAoIValid(wkaoi) &&
+            self.runWorksheetPromise === undefined) {
+            var taskHelper = {
+                    contentType: 'application/json',
+                    queryParams: null,
+                    postData: JSON.stringify(aoi),
+                },
+                promises = self.start(taskHelper);
+
+            self.runWorksheetPromise = $.when(promises.startPromise,
+                                              promises.pollingPromise);
+
+            self.runWorksheetPromise
+                .always(function() {
+                    delete self.runWorksheetPromise;
+                });
+        }
+
+        return self.runWorksheetPromise || $.when();
+    },
+});
+
 var AnalyzeTaskModel = coreModels.TaskModel.extend({
     defaults: _.extend( {
             name: 'analysis',
@@ -176,4 +218,5 @@ module.exports = {
     LayerCollection: LayerCollection,
     LayerCategoryCollection: LayerCategoryCollection,
     createAnalyzeTaskCollection: createAnalyzeTaskCollection,
+    WorksheetModel: WorksheetModel,
 };

src/mmw/js/src/analyze/templates/resultsWindow.html

@@ -66,6 +66,8 @@ <h3>Select a Model</h3>
                             {% endif %}
                         </div>
                     {% endfor %}
+                    <hr />
+                    <div id="worksheet-export-region"></div>
                 </div>
             </div>
         </div>

src/mmw/js/src/analyze/templates/worksheetExport.html

@@ -0,0 +1,37 @@
+<a href="#"
+    class="analyze-worksheet-link {{ 'disabled' if started or complete or disabled }}"
+    {% if disabled %}
+        data-toggle="popover" tabindex="0"
+        data-html="true" data-container="body" role="button"
+        {# TODO Update link to technical documentation #}
+        data-content="Worksheets cannot be generated for boundary shapes. Please draw, delineate, or upload a shape. For more details, see <a href='https://wikiwatershed.org/help/model-help/mmw-tech/' target='_blank'>our technical documentation.</a>"
+        data-template="<div class='popover'><div class='pull-right' id='popover-close-button' onclick='closePopover()'><i class='fa fa-times' /></div><div class='popover-content'></div><div class='arrow'></div></div>"
+    {% endif %}
+>
+    <div class="analyze-model-name">
+        Watershed Multi-Year Worksheet
+    </div>
+    <p>
+        Generates an Excel worksheet using the given urban
+        area of interest, pairing it with the HUC-12s
+        it belongs to. It contains Land, Stream, and
+        Water Quality analyses generated using the
+        Watershed Multi-Year Model for the HUC-12.
+        The worksheet allows for more detailed BMP analyses.
+    </p>
+</a>
+<a href="#" class="analyze-worksheet-status status-started disabled {{ 'hidden' if not started }}">
+    <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i> Gathering data ...
+</a>
+<a href="#" class="analyze-worksheet-status status-complete {{ 'hidden' if not complete }}">
+    <i class="fa fa-check" aria-hidden="true"></i> Download worksheet
+</a>
+<a href="#" class="analyze-worksheet-status status-failed {{ 'hidden' if not failed }}"
+   data-toggle="popover" data-content="{{ error }}" data-container="body" data-placement="bottom">
+    <i class="fa fa-exclamation-triangle"></i> An error occurred.
+</a>
+<form id="worksheet-form" method="post" action="/export/worksheet/" target="_blank">
+    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrftoken }}">
+    <!-- Put `payload` in single quotes, to keep any unescaped chars from breaking the template -->
+    <input type="hidden" name="payload" value='{{ payload }}' />
+</form>

src/mmw/js/src/analyze/views.js

@@ -46,6 +46,7 @@ var $ = require('jquery'),
     tabPanelTmpl = require('../modeling/templates/resultsTabPanel.html'),
     tabContentTmpl = require('./templates/tabContent.html'),
     barChartTmpl = require('../core/templates/barChart.html'),
+    worksheetExportTmpl = require('./templates/worksheetExport.html'),
     resultsWindowTmpl = require('./templates/resultsWindow.html');
 
 var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
@@ -76,6 +77,7 @@ var ResultsView = Marionette.LayoutView.extend({
         aoiRegion: '.aoi-region',
         analyzeRegion: '#analyze-tab-contents',
         monitorRegion: '#monitor-tab-contents',
+        worksheetRegion: '#worksheet-export-region',
     },
 
     templateHelpers: {
@@ -86,6 +88,7 @@ var ResultsView = Marionette.LayoutView.extend({
     onShow: function() {
         this.showAoiRegion();
         this.showDetailsRegion();
+        this.showWorksheetExportRegion();
     },
 
     onRender: function() {
@@ -111,6 +114,15 @@ var ResultsView = Marionette.LayoutView.extend({
         ));
     },
 
+    showWorksheetExportRegion: function() {
+        this.worksheetRegion.show(new WorksheetExportView({
+            model: new models.WorksheetModel({
+                area_of_interest: App.map.get('areaOfInterest'),
+                wkaoi: App.map.get('wellKnownAreaOfInterest'),
+            }),
+        }));
+    },
+
     changeArea: function() {
         App.map.set({
             'areaOfInterest': null,
@@ -253,6 +265,59 @@ var ResultsView = Marionette.LayoutView.extend({
     },
 });
 
+var WorksheetExportView = Marionette.ItemView.extend({
+    template: worksheetExportTmpl,
+    className: 'model-package',
+
+    ui: {
+        'worksheetLink': 'a.analyze-worksheet-link',
+        'worksheetForm': '#worksheet-form',
+        'downloadButton': 'a.status-complete',
+    },
+
+    events: {
+        'click @ui.worksheetLink': 'onWorksheetClick',
+        'click @ui.downloadButton': 'downloadWorksheet',
+    },
+
+    modelEvents: {
+        'change:status': 'render',
+    },
+
+    templateHelpers: function() {
+        return {
+            csrftoken: csrf.getToken(),
+            payload: JSON.stringify(this.model.get('result')),
+            disabled: !!this.model.get('wkaoi'),
+            started: this.model.get('status') === 'started',
+            complete: this.model.get('status') === 'complete',
+            failed: this.model.get('status') === 'failed',
+        };
+    },
+
+    onRender: function() {
+        var helpers = this.templateHelpers();
+
+        if (helpers.disabled || helpers.failed) {
+            this.$('[data-toggle="popover"]').popover({
+                trigger: 'focus',
+            });
+        }
+    },
+
+    onWorksheetClick: function(e) {
+        e.preventDefault();
+
+        this.model.runWorksheetAnalysis();
+    },
+
+    downloadWorksheet: function(e) {
+        e.preventDefault();
+
+        this.ui.worksheetForm.trigger('submit');
+    },
+});
+
 var AnalyzeWindow = Marionette.LayoutView.extend({
     template: windowTmpl,
 

src/mmw/sass/pages/_analyze.scss

@@ -216,7 +216,7 @@
       border-radius: $radius-sm;
       padding: 1rem;
 
-      > .analyze-model-package-link {
+      > a {
         white-space: normal;
 
         > .analyze-model-name {
@@ -229,6 +229,27 @@
           font-size: $font-size-h5;
           color: $ui-grey;
         }
+
+        &.analyze-worksheet-status {
+          display: block;
+          margin-top: 10px;
+
+          &.status-started {
+            color: $ui-primary;
+          }
+
+          &.status-complete {
+            color: $brand-primary;
+          }
+
+          &.status-failed {
+            color: $ui-danger;
+          }
+        }
+
+        &.disabled {
+          opacity: 0.75;
+        }
       }
     }
   }