Merge pull request #124 from zooniverse/fix-115-119-120-122

Fixes for Issues #115, #119, #120, #122 - Better CSV labelling and handling plus HTTP stuff

src/constants/mapExplorer.config.json

@@ -18,12 +18,12 @@
   "baseLayers": [
     {
       "name": "Terrain",
-      "url": "http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
+      "url": "//{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
       "attribution": "&copy; <a href=\"http://www.opencyclemap.org\">OpenCycleMap</a>, &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
     },
     {
       "name": "Satellite",
-      "url": "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+      "url": "//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
       "attribution": "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
     }
   ],

src/containers/MapExplorer-SelectorPanel.jsx

@@ -285,7 +285,7 @@ export default class SelectorPanel extends React.Component {
     this.setState({
       downloadDialog: {
         status: DialogScreen.DIALOG_ACTOVE,
-        message: 'Preparing CSV file...',
+        message: 'Preparing data file...',
         data: null
     }});
 
@@ -323,7 +323,7 @@ export default class SelectorPanel extends React.Component {
         this.setState({
           downloadDialog: {
             status: DialogScreen.DIALOG_ACTIVE,
-            message: 'CSV ready!',
+            message: 'Data file ready!',
             data: data
         }});
       })

src/presentational/DialogScreen-Download.jsx

@@ -6,6 +6,8 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
   constructor(props) {
     super(props);
     this.downloadCsv = this.downloadCsv.bind(this);
+    this.blobbifyCsvData = this.blobbifyCsvData.bind(this);
+    this.generateFilename = this.generateFilename.bind(this);
   }
 
   render() {
@@ -19,7 +21,11 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
           : null}
 
           {(this.props.data)
-          ? <div><a className="btn" onClick={this.downloadCsv}>Download</a></div>
+          ? <div><a className="btn" href={window.URL.createObjectURL(this.blobbifyCsvData())} download={this.generateFilename()} onClick={this.downloadCsv}>Download</a></div>
+          : null}
+
+          {(this.props.data)
+          ? <div className="note">(Depending on your computer setup, you may need to right-click on the link above and choose "Save As", then open the downloaded file in Excel.)</div>
           : null}
 
         </div>
@@ -28,13 +34,34 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
     );
   }
 
+  //NOTE: The onClick=downloadCsv() feature is required because, by default,
+  //React 'eats' the click event of <a download>s which would otherwise trigger
+  //a native browser download event.
   downloadCsv(e) {
     if (this.props.data) {
-      let dataBlob = new Blob([this.props.data], {type: 'text/csv'});
-      saveAs(dataBlob, 'wildcam.csv');
+      let dataBlob = this.blobbifyCsvData();
+      let filename = this.generateFilename();
+      saveAs(dataBlob, filename);
       this.closeMe();
     } else {
       console.error('Download CSV Error: no CSV');
     }
   }
+
+  blobbifyCsvData() {
+    if (this.props.data) {
+      let dataBlob = new Blob([this.props.data], {type: 'text/csv'});
+      return dataBlob;
+    }
+    return null;
+  }
+
+  generateFilename(extension = '.csv') {
+    let timeString = new Date();
+    timeString =
+      timeString.getDate() +
+      ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][timeString.getMonth()] +
+      timeString.getFullYear();
+    return 'wildcam-' + timeString + extension;
+  }
 }

src/styles/components/dialog-screen.styl

@@ -25,3 +25,8 @@
 
     > div
       text-align: center
+
+    .note
+      color: #999
+      font-size: 0.8em
+      max-width: 20em