CSV browser download.

Author: softwareengineerprogrammer

geophires/geophires-ui.css

@@ -60,10 +60,12 @@ a:not([href]) {
     cursor: help;
 }
 
-#params-deeplink {
+#result-actions {
     font-size: 0.5em;
+    margin-left: 1em;
 }
 
-#download-csv, #download-csv:hover {
+#result-actions a, #result-actions a:hover {
     cursor: pointer;
+    color: #2196F3 !important;
 }

geophires/geophires-ui.js

@@ -3,7 +3,7 @@ function setLoading(isLoading) {
     if (isLoading) {
         setVisible(loader, true)
         resetGenerationProfileGraphs()
-        setVisible($('#params-deeplink'), false)
+        setVisible($('#result-actions'), false)
     } else {
         setVisible(loader, false)
     }
@@ -225,7 +225,7 @@ function submitForm(oFormElement) {
 
         renderGenerationProfileGraphs(resultsData)
 
-        setVisible($('#params-deeplink'), true)
+        setVisible($('#result-actions'), true)
     }
 
     xhr.onerror = function () {

geophires/geophires.vue.js

@@ -17,8 +17,15 @@ createApp({
         }
     },
     methods: {
+        downloadURI: function (uri, name) {
+            let link = document.createElement('a')
+            link.download = name
+            link.href = uri
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+        },
         downloadCsv: function (event) {
-
             fetch(
                 document.querySelector('#geophires_param_form').getAttribute('action'),
                 {
@@ -30,7 +37,10 @@ createApp({
                 }
             )
                 .then(response => response.json())
-                .then(data => alert(data));
+                .then(data => {
+                    console.debug('CSV download got data:',data)
+                    this.downloadURI(`data:text/csv,${encodeURI(data['csv'])}`, 'geophires-result.csv')
+                });
         }
     }
 }).mount('#app')

geophires/index.html

@@ -150,15 +150,20 @@ <h3>
                 <h3>
                     Result
 
+                    <span id="result-actions" class="hidden">
                     <a id="params-deeplink"
-                       class="hidden"
-                       title="Right-click to copy a deeplink to the parameters for this result"
-                    >&#128279;</a>
-
+                       title="Right-click to copy a deeplink to the parameters for this result">
+                        <!--&#128279;-->
+                       link
+                    </a>
+                    &nbsp;&centerdot;&nbsp;
                     <a id="download-csv"
                        title="Download result as CSV"
-                       @click="downloadCsv"
-                    >&DownArrowBar;</a>
+                       @click="downloadCsv">
+                        <!--&DownArrowBar;-->
+                       csv
+                    </a>
+                    </span>
 
                 </h3>
                 <span id="loading" class="hidden loader">Running...</span>