diff --git a/src/constants/mapExplorer.config.json b/src/constants/mapExplorer.config.json index 267e951..1b0d7a1 100644 --- a/src/constants/mapExplorer.config.json +++ b/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": "© OpenCycleMap, © OpenStreetMap" }, { "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 © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" } ], diff --git a/src/containers/MapExplorer-SelectorPanel.jsx b/src/containers/MapExplorer-SelectorPanel.jsx index 82a0e48..a3d766c 100644 --- a/src/containers/MapExplorer-SelectorPanel.jsx +++ b/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 }}); }) diff --git a/src/presentational/DialogScreen-Download.jsx b/src/presentational/DialogScreen-Download.jsx index 1d2a21b..7f41d9a 100644 --- a/src/presentational/DialogScreen-Download.jsx +++ b/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) - ?
Download
+ ?
Download
+ : null} + + {(this.props.data) + ?
(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.)
: null} @@ -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 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; + } } diff --git a/src/styles/components/dialog-screen.styl b/src/styles/components/dialog-screen.styl index 87bff6d..2e52b24 100644 --- a/src/styles/components/dialog-screen.styl +++ b/src/styles/components/dialog-screen.styl @@ -25,3 +25,8 @@ > div text-align: center + + .note + color: #999 + font-size: 0.8em + max-width: 20em