Add a Download button.

Goutte
1 parent 077980eb
Showing 5 changed files with 65 additions and 13 deletions Show diff stats
CHANGELOG.md
README.md
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
@@ -4,6 +4,7 @@
 - [ ] Optimize CSV generation (with some vectorization using numpy)
 - [ ] Credit the author of the pixel art planets
 - [ ] Set the log level to _error_ in production (see `web/run.py`)
+- [ ] Add a README to the download tarball
 ## 1.0.0
@@ -21,8 +22,9 @@
 - [ ] Cache cleanup
   - [x] API at /cache/clear
   - [ ] CRON statement to call it
-- [ ] Download raw data (tarball of CSV) for current time interval and targets
+- [x] Download raw data (tarball of CSV) for current time interval and targets
 - [ ] Same via SAMP
+- [ ] Add a warning for users with javascript disabled
 ## 0.0.0
@@ -6,19 +6,15 @@ The sources of the website available at https://spaceweatheronline.cdpp.eu
 ## Web Server
-Build and serve the space weather visualization webpages.
-A flask webserver, serving d3.js visualizations.
-
-
-## Bridge
-
-Gather NetCDF data from AMDA, and serve it as CSV to the javascript plotter.
+Build and serve heliopropa's visualizations.
+It's a `flask` webserver, serving `d3.js` plots written in `livescript`.
+It also gathers NetCDF data from AMDA, and serves it as CSV to the plotter.
 ### Rationale
-- Reading NetCDF from javascript is doable, but still very hacky.
-- The bridge can handle pagination, collecting multiple NetCDF into one CSV.
+- Reading NetCDF from javascript is doable, but still *very* hacky.
+- The bridge can handle pagination and collecting multiple NetCDF into one CSV.
 # How
@@ -27,6 +23,7 @@ Gather NetCDF data from AMDA, and serve it as CSV to the javascript plotter.
 - `config.yml` : the main configuration file.
 - `web/run.py` : the front controller, holding most of the code.
+- `web/view/home.html.jinja2` : the HTML template.
 ## Install
@@ -58,6 +58,24 @@
       url = url.replace('<stopped_at>', stopped_at);
       return url;
     };
+    SpaceWeather.prototype.buildDownloadUrl = function(){
+      var ref$, started_at, stopped_at, targets, t, url;
+      ref$ = this.getDomain(), started_at = ref$[0], stopped_at = ref$[1];
+      targets = (function(){
+        var results$ = [];
+        for (t in this.targets) {
+          if (this.targets[t].active) {
+            results$.push(t);
+          }
+        }
+        return results$;
+      }.call(this)).sort().join('-');
+      url = this.configuration['api']['download'];
+      url = url.replace('<targets>', targets);
+      url = url.replace('<started_at>', started_at.format(API_TIME_FORMAT));
+      url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT));
+      return url;
+    };
     SpaceWeather.prototype.addTarget = function(target){
       this.targets[target.slug] = target;
       return this;
@@ -88,6 +88,15 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     url = url.replace('<stopped_at>', stopped_at)
     url
+  buildDownloadUrl: ->
+    [started_at, stopped_at] = @getDomain()
+    targets = [t for t of @targets when @targets[t].active].sort().join('-')
+    url = @configuration['api']['download']
+    url = url.replace('<targets>', targets)
+    url = url.replace('<started_at>', started_at.format(API_TIME_FORMAT))
+    url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT))
+    url
+
   addTarget: (target) ->
     @targets[target.slug] = target
     this
@@ -88,6 +88,10 @@
     <div class="mdl-grid">
       <div class="mdl-cell mdl-cell--4-col">
         <section id="orbits"></section>
+        <button id="download" class="mdl-button mdl-button--raised mdl-button--primary"
+                title="Download the CSV raw data for each target in a tarball.">
+          Download
+        </button>
       </div>
       <div class="mdl-cell mdl-cell--8-col">
         <section id="time_series">
@@ -117,7 +121,7 @@
 {#      position: relative;#}
     }
     #plots_loader {
-      position: absolute;
+      position: fixed;
       top: 0; left: 0; bottom: 0; right: 0;
       height: 100%;
       width: 100%;
@@ -199,6 +203,11 @@
       animation-delay: .8s;
     }
+    #download {
+      display: block;
+      margin: 3em auto;
+    }
+
     #time_series .help {
       position: absolute;
       text-align: center;
@@ -329,7 +338,8 @@ var configuration = {
   time_series_container: '#time_series',
   orbits_container: '#orbits',
   api : {
-      'data_for_interval': "{{ request.url_root }}<target>_<started_at>_<stopped_at>.csv"
+      'data_for_interval': "{{ request.url_root }}<target>_<started_at>_<stopped_at>.csv",
+      'download': "{{ request.url_root }}<targets>_<started_at>_<stopped_at>.tar.gz"
   },
   sun: {
     img: '{{ static('img/sun_128.png') }}'
@@ -440,7 +450,23 @@ jQuery().ready(function($){
     var stopped_at = moment($("#stopped_at").val());
     sw.resizeDomain(started_at, stopped_at);
     return false;
-  })
+  });
+  $('#download').on("click", function(e){
+    var url = sw.buildDownloadUrl();
+    $.ajax({
+      type: 'GET',
+      url: url,
+      processData: false,
+      success: function (data) {
+        window.location = url;
+      },
+      error: function (xhr) {
+        console.error('Cannot download.', xhr);
+        alert("Our apologies, there was an error while downloading.");
+      }
+    });
+    return false;
+  });
 });
 </script>