fixup! Add front-end button for generating worksheet

WikiWatershed · Dec 23, 2019 · b394717 · b394717
1 parent 4dc40f0
commit b394717
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/src/mmw/js/src/analyze/templates/worksheetExport.html b/src/mmw/js/src/analyze/templates/worksheetExport.html
@@ -1,4 +1,13 @@
-<a href="#" class="analyze-worksheet-link {{ 'disabled' if started or complete }}">
+<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>
@@ -16,7 +25,7 @@
 <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 disabled {{ 'hidden' if not failed }}"
+<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>

diff --git a/src/mmw/js/src/analyze/views.js b/src/mmw/js/src/analyze/views.js
@@ -115,15 +115,12 @@ var ResultsView = Marionette.LayoutView.extend({
     },
 
     showWorksheetExportRegion: function() {
-        // Worksheet Export is only available for non-WKAOI shapes
-        if (!App.map.get('wellKnownAreaOfInterest')) {
-            this.worksheetRegion.show(new WorksheetExportView({
-                model: new models.WorksheetModel({
-                    area_of_interest: App.map.get('areaOfInterest'),
-                    wkaoi: App.map.get('wellKnownAreaOfInterest'),
-                }),
-            }));
-        }
+        this.worksheetRegion.show(new WorksheetExportView({
+            model: new models.WorksheetModel({
+                area_of_interest: App.map.get('areaOfInterest'),
+                wkaoi: App.map.get('wellKnownAreaOfInterest'),
+            }),
+        }));
     },
 
     changeArea: function() {
@@ -291,16 +288,19 @@ var WorksheetExportView = Marionette.ItemView.extend({
         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() {
-        if (this.model.get('status') === 'failed') {
+        var helpers = this.templateHelpers();
+
+        if (helpers.disabled || helpers.failed) {
             this.$('[data-toggle="popover"]').popover({
-                trigger: 'hover',
+                trigger: 'focus',
             });
         }
     },

diff --git a/src/mmw/sass/pages/_analyze.scss b/src/mmw/sass/pages/_analyze.scss
@@ -246,6 +246,10 @@
             color: $ui-danger;
           }
         }
+
+        &.disabled {
+          opacity: 0.75;
+        }
       }
     }
   }