Add second iteration of json download

app/corpora/CQiWrapper/CQiWrapper.py

@@ -94,6 +94,7 @@ class CQiWrapper(CQiClient):
         cpos match positions, produced by the query
         query -- query written in cqp query language
         '''
+        self.query = query
         self.cqp_query(self.corpus_name, result_subcorpus_name, query)
         self.result_subcorpus = (self.corpus_name
                                  + ':'
@@ -198,7 +199,8 @@ class CQiWrapper(CQiClient):
         self.results = {'matches': all_matches,
                         'cpos_lookup': all_cpos_infos,
                         'text_lookup': text_lookup,
-                        'total_nr_matches': self.total_nr_matches}
+                        'total_nr_matches': self.total_nr_matches,
+                        'query': self.query}
         return self.results
 
     def get_cpos_infos(self, all_cpos):

app/templates/corpora/analyse_corpus.html.j2

@@ -107,25 +107,31 @@
 </form>
 
 <div id="export-query-results-modal" class="modal modal-fixed-footer no-autoinit">
-  <!-- <form id="download-query-results-form" method="post"> -->
-    <div class="modal-content">
-      {{ query_download_form.hidden_tag() }}
-      <h4>Download current query Results</h4>
-      <p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
-      <div class="input-field">
-        <i class="material-icons prefix">insert_drive_file</i>
-        {{ query_download_form.file_type() }}
-        {{ query_download_form.file_type.label }}
-        {% for error in query_download_form.file_type.errors %}
-        <span class="helper-text red-text">{{ error }}</span>
-        {% endfor %}
-      </div>
-    </div>
-    <div class="modal-footer">
-      <!-- <button class="btn waves-effect waves-light" id="download-form-submit" type="submit">Download</button> -->
-      <a class="btn waves-effect waves-light" id="downloadAnchorElem">Download</a>
-    </div>
-  <!-- </form> -->
+  <div class="modal-content">
+    {{ query_download_form.hidden_tag() }}
+    <h4>Download current query Results</h4>
+    <p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
+    <table>
+      <tr>
+        <td>JSON</td>
+        <td><a class="btn waves-effect waves-light" id="download-results">Download</a></td>
+      </tr>
+      <tr>
+        <td>CSV</td>
+        <td><a class="btn waves-effect waves-light disabled">Download</a></td>
+      </tr>
+      <tr>
+        <td>EXCEL</td>
+        <td><a class="btn waves-effect waves-light disabled">Download</a></td>
+      </tr>
+      <tr>
+        <td>HTML</td>
+        <td><a class="btn waves-effect waves-light disabled">Download</a></td>
+      </tr>
+    </table>
+  </div>
+  <div class="modal-footer">
+  </div>
 </div>
 
 <div class="row">
@@ -240,8 +246,8 @@
 
   var queryFormElement = document.getElementById("query-form");
   var queryResultsElement = document.getElementById("query-results");
-  var queryResultsMetadataElement = document.getElementById("query-results-metadata")
-  var exportQueryResults = document.getElementById("export-query-results")
+  var queryResultsMetadataElement = document.getElementById("query-results-metadata");
+  var exportQueryResults = document.getElementById("export-query-results");
   exportQueryResults.onclick = function() {
     exportModal.open();
   };
@@ -387,21 +393,42 @@
                                  }],
                      valueNames: ["text-titles", "left-context", "hit", "right-context"]};
       var userList = new List('result-list', options);
+
       var inspectBtns = document.getElementsByClassName("inspect");
       for(var i = 0; i < inspectBtns.length; i++) {
         var inspectBtn = inspectBtns[i];
         var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
         inspectBtn.onclick = function() {
-          exportModal.open();
+          contextModal.open();
           nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
         };
       }
-    // download results as JSON
-    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(message, undefined, 2));
-    console.log(dataStr);
-    var downloadAnchorElem = document.getElementById("downloadAnchorElem");
-    downloadAnchorElem.setAttribute("href", dataStr);
-    downloadAnchorElem.setAttribute("download", "results.json");
+
+    // Function to download data to a file
+    function download(downloadElem, data, filename, type) {
+        var file = new Blob([data], {type: type});
+        if (window.navigator.msSaveOrOpenBlob) // IE10+
+            window.navigator.msSaveOrOpenBlob(file, filename);
+        else { // Others
+            var url = URL.createObjectURL(file);
+            downloadElem.href = url;
+            downloadElem.download = filename;
+        }
+    }
+    // create json filename for download
+    var today = new Date();
+    var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
+    var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
+    var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
+    var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
+    // get a where download is served
+    var downloadResults = document.getElementById("download-results");
+    // stringify JSON object for json download
+    var dataStr = JSON.stringify(message, undefined, 2);
+    downloadResults.onclick = download(downloadResults,
+                                       dataStr,
+                                       resultFilename,
+                                       "text/json");
   });