Added an additional parameter to alerts to allow a slim alert. Code now draws...

Added an additional parameter to alerts to allow a slim alert. Code now draws the appropriate checkboxes and the clicking the download button detects which boxes have been checked.

assets/src/scripts/d3-rendering/alerts.js

@@ -6,12 +6,14 @@
  * @param {String} kind - should be 'success', 'warning', 'error', or 'info'
  * @param {String} title
  * @param {String} body
+ * @param {String} useSlim
  */
-const drawAlert = function(elem, {kind, title, body}) {
+const drawAlert = function(elem, {kind, title, body, useSlim}) {
     elem.select('.usa-alert').remove();
     if (title || body) {
         const alertDiv = elem.append('div')
-            .attr('class', `usa-alert usa-alert--${kind}`);
+            .attr('class', `usa-alert usa-alert--${kind}`)
+            .classed('usa-alert--slim', useSlim);
         const alertBody = alertDiv.append('div')
             .attr('class', 'usa-alert__body');
         if (title) {
@@ -34,11 +36,12 @@ const drawAlert = function(elem, {kind, title, body}) {
  * @param {String} title
  * @param {String} body
  */
-export const drawSuccessAlert = function(elem, {title, body}) {
+export const drawSuccessAlert = function(elem, {title, body, useSlim}) {
     drawAlert(elem, {
         kind:'success',
         title,
-        body
+        body,
+        useSlim
     });
 };
 
@@ -49,11 +52,12 @@ export const drawSuccessAlert = function(elem, {title, body}) {
  * @param {String} title
  * @param {String} body
  */
-export const drawInfoAlert = function(elem, {title, body}) {
+export const drawInfoAlert = function(elem, {title, body, useSlim}) {
     drawAlert(elem, {
         kind: 'info',
         title,
-        body
+        body,
+        useSlim
     });
 };
 
@@ -64,11 +68,12 @@ export const drawInfoAlert = function(elem, {title, body}) {
  * @param {String} title
  * @param {String} body
  */
-export const drawWarningAlert = function(elem, {title, body}) {
+export const drawWarningAlert = function(elem, {title, body, useSlim}) {
     drawAlert(elem, {
         kind: 'warning',
         title,
-        body
+        body,
+        useSlim
     });
 };
 
@@ -79,10 +84,11 @@ export const drawWarningAlert = function(elem, {title, body}) {
  * @param {String} title
  * @param {String} body
  */
-export const drawErrorAlert = function(elem, {title, body}) {
+export const drawErrorAlert = function(elem, {title, body, useSlim}) {
     drawAlert(elem, {
         kind: 'error',
         title,
-        body
+        body,
+        useSlim
     });
 };
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/download-links.js

@@ -2,6 +2,7 @@
  *  Module with functions for processing and structuring download link URLs
  */
 
+import {select} from 'd3-selection';
 import {DateTime} from 'luxon';
 import {createStructuredSelector} from 'reselect';
 
@@ -11,11 +12,13 @@ import {getServiceURL, getServiceURLMetaData} from 'ui/web-services/instantaneou
 import {getServiceURLStatistics} from 'ui/web-services/statistics-data';
 import {getServiceURLSGroundwater} from 'ui/web-services/groundwater-levels';
 
+import {drawErrorAlert} from 'd3render/alerts';
 import {appendInfoTooltip} from 'd3render/info-tooltip';
+
 import {getInputsForRetrieval} from 'ml/selectors/hydrograph-state-selector';
 import {getTimeRange, getMedianStatisticsData, getGroundwaterLevels, getIVData} from 'ml/selectors/hydrograph-data-selector';
 
-
+import {hasVisibleIVData, hasVisibleMedianStatisticsData, hasVisibleGroundwaterLevels} from './selectors/time-series-data';
 /**
 * Creates a set of links with dynamically populated URLs so that users can download data that is related to the
 * current hydrograph.
@@ -154,3 +157,94 @@ export const drawDownloadLinks = function(elem, store, siteno) {
         compareIVData: getIVData('compare')
     })));
 };
+
+const drawCheckbox = function(container, inputID, label, value) {
+    const checkboxContainer = container.append('div')
+        .attr('class', 'usa-checkbox');
+    checkboxContainer.append('input')
+        .attr('class', 'usa-checkbox__input')
+        .attr('id', inputID)
+        .attr('type', 'checkbox')
+        .attr('value', value);
+    checkboxContainer.append('label')
+        .attr('class', 'usa-checkbox__label')
+        .attr('for', inputID)
+        .text(label);
+};
+
+const drawCheckboxes = function(container, {
+    hasVisiblePrimaryIVData,
+    hasVisibleCompareIVData,
+    hasVisibleMedianData,
+    hasVisibleGroundwaterLevels
+}) {
+    container.select('.download-checkbox-container').remove();
+    const checkboxContainer = container.append('div')
+        .attr('class', 'download-checkbox-container');
+    if (hasVisiblePrimaryIVData) {
+        checkboxContainer.call(drawCheckbox, 'download-primary-iv-data', 'Current IV', 'primary');
+    }
+    if (hasVisibleCompareIVData) {
+        checkboxContainer.call(drawCheckbox, 'download-compare-iv-data', 'Prior year IV', 'compare');
+    }
+    if (hasVisibleMedianData) {
+        checkboxContainer.call(drawCheckbox, 'download-median-data', 'Median', 'median');
+    }
+    if (hasVisibleGroundwaterLevels) {
+        checkboxContainer.call(drawCheckbox, 'download-field-visits', 'Field visits', 'groundwater-levels');
+    }
+    checkboxContainer.call(drawCheckbox, 'download-site-meta-data', 'About this location', 'site');
+};
+
+export const drawDownloadForm = function(container, store, siteno) {
+    const formContainer = container.append('form')
+        .attr('class', 'usa-form')
+        .append('fieldset')
+            .attr('class', 'usa-fieldset');
+    formContainer.append('legend')
+        .attr('class', 'usa-legend')
+        .text('Select data to be downloaded');
+    formContainer.call(link(store, drawCheckboxes, createStructuredSelector({
+        hasVisiblePrimaryIVData: hasVisibleIVData('primary'),
+        hasVisibleCompareIVData: hasVisibleIVData('compare'),
+        hasVisibleMedianData: hasVisibleMedianStatisticsData,
+        hasVisibleGroundwaterLevels: hasVisibleGroundwaterLevels
+    })));
+
+    const downloadButton = container.append('button')
+        .attr('class', 'usa-button download-selected-data')
+        .attr('ga-on', 'click')
+        .attr('ga-event-category', 'download-selected-data')
+        .attr('ga-event-action', 'download')
+        .on('click', function() {
+            container.selectAll('.alert-error-container').remove();
+            const checkedInputs = formContainer.selectAll('input[type="checkbox"]:checked');
+            if (checkedInputs.size()) {
+                checkedInputs.each(function() {
+                    switch (select(this).attr('value')) {
+                        case 'primary':
+                        case 'compare':
+                        case 'median':
+                        case 'groundwater-levels':
+                        case 'site':
+                            console.log(`Downloading data for ${select(this).attr('value')}`);
+                            break;
+                        default:
+                            console.log('Unexpected value');
+                    }
+                });
+            } else {
+                container.insert('div', 'button')
+                    .attr('class', 'alert-error-container')
+                    .call(drawErrorAlert, {
+                        body:'Please select one or more checkboxes',
+                        useSlim: true
+                    });
+            }
+        });
+    downloadButton.append('i')
+        .attr('class', 'fas fa-file-download')
+        .attr('aria-hidden', true)
+        .attr('role', 'img');
+    downloadButton.append('span').text('Download');
+};

assets/src/scripts/monitoring-location/components/hydrograph/index.js

@@ -22,8 +22,6 @@ import {getPreferredIVMethodID} from './selectors/time-series-data';
 
 import {showDataIndicators} from './data-indicator';
 import {drawDataTables} from './data-table';
-import {drawDownloadLinks} from './download-links';
-import {drawDateRangeControls} from './date-controls';
 import {drawGraphBrush} from './graph-brush';
 import {drawGraphControls} from './graph-controls';
 import {drawTimeSeriesLegend} from './legend';
@@ -135,9 +133,6 @@ export const attachToNode = function(store,
             legendControlsContainer.call(drawGraphControls, store, siteno);
             nodeElem.select('.select-actions-container').call(drawSelectActions, store, siteno);
 
-            nodeElem.select('#iv-graph-list-container')
-                .call(drawDownloadLinks, store, siteno);
-
             nodeElem.select('#iv-data-table-container')
                 .call(drawDataTables, store);
 

assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js

 import {select} from 'd3-selection';
 
+import {getSelectedCustomDateRange, getSelectedDateRange} from 'ml/selectors/hydrograph-state-selector';
+
 import {drawDateRangeControls} from './date-controls';
-import {drawDownloadLinks} from './download-links';
-import {getSelectedCustomDateRange, getSelectedDateRange} from '../../selectors/hydrograph-state-selector';
+import {drawDownloadForm} from './download-links';
 
 const appendButton = function(listContainer, {faIcon, buttonLabel, idOfDivToControl}) {
     const button = listContainer.append('li')
@@ -64,5 +65,5 @@ export const drawSelectActions = function(container, store, siteno) {
     container.append('div')
         .attr('id', 'download-graph-data-container')
         .attr('hidden', true)
-        .call(drawDownloadLinks, store, siteno);
+        .call(drawDownloadForm, store, siteno);
 };
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/selectors/time-series-data.js

@@ -40,7 +40,7 @@ export const isVisible = memoize(dataKind => createSelector(
  * @param {String} dataKind - 'primary' or 'compare'
  * @return {Function}
  */
-const hasVisibleIVData = memoize(dataKind => createSelector(
+export const hasVisibleIVData = memoize(dataKind => createSelector(
     isVisible(dataKind),
     getIVData(dataKind),
     getSelectedIVMethodID,
@@ -50,13 +50,13 @@ const hasVisibleIVData = memoize(dataKind => createSelector(
     }
 ));
 
-const hasVisibleMedianStatisticsData = createSelector(
+export const hasVisibleMedianStatisticsData = createSelector(
     isVisible('median'),
     getMedianStatisticsData,
     (isVisible, medianStats) => isVisible && medianStats ? Object.keys(medianStats).length > 0 : false
 );
 
-const hasVisibleGroundwaterLevels = createSelector(
+export const hasVisibleGroundwaterLevels = createSelector(
     getGroundwaterLevels,
     (gwLevels) => gwLevels && gwLevels.values ? gwLevels.values.length > 0 : false
 );