Merge branch 'csv-download'

Author: softwareengineerprogrammer

geophires/geophires-ui.css

@@ -60,6 +60,18 @@ a:not([href]) {
     cursor: help;
 }
 
-#params-deeplink {
+#result-actions {
     font-size: 0.5em;
+    margin-left: 1em;
+}
+
+#result-actions a, #result-actions a:hover {
+    cursor: pointer;
+    color: #2196F3 !important;
+}
+
+#download-csv.loading::after {
+    content: '\21BB';
+    display: inline-block;
+    animation: rotating 2s linear infinite
 }

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 () {
@@ -235,7 +235,8 @@ function submitForm(oFormElement) {
 
     xhr.open(oFormElement.method, oFormElement.getAttribute("action"))
     xhr.send(JSON.stringify({
-        'geophires_input_parameters': parsed_params
+        'geophires_input_parameters': parsed_params,
+        'output_format': 'json'
     }))
 
     setLoading(true)
@@ -247,6 +248,7 @@ function submitForm(oFormElement) {
     let url = new URL(location.href)
     url.hash = btoa(hashParams.toString())
     $('#params-deeplink').attr('href', url)
+    $('#download-csv').attr('data-geophires_input_parameters', JSON.stringify(parsed_params))
 
     return false
 }

geophires/geophires.vue.js

@@ -13,7 +13,41 @@ createApp({
     data() {
         return {
             locationOrigin: `${getLocationOrigin()}?ref=geophires-ui`,
-            locationHost: getLocationHost()
+            locationHost: getLocationHost(),
+            isCsvDownloading: ref(false)
+        }
+    },
+    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) {
+            if(!this.isCsvDownloading) {
+                this.isCsvDownloading = ref(true)
+                fetch(
+                    document.querySelector('#geophires_param_form').getAttribute('action'),
+                    {
+                        method: 'POST',
+                        body: JSON.stringify({
+                            geophires_input_parameters: JSON.parse(event.target.dataset.geophires_input_parameters),
+                            output_format: 'csv'
+                        })
+                    }
+                )
+                    .then(response => {
+                        this.isCsvDownloading = ref(false)
+                        console.debug('CSV download got response:', response)
+                        return response.json()
+                    })
+                    .then(data => {
+                        this.downloadURI(`data:text/csv,${encodeURI(data['csv'])}`, 'geophires-result.csv')
+                    });
+            }
         }
     }
 }).mount('#app')

geophires/index.html

@@ -53,7 +53,8 @@ <h1 class="mui--text-title">
             <div class="mui-divider"></div>
             <br/>
 
-            <img src="earth-core-logo.png" alt="GEOPHIRES logo" id="header-core-o"/><span class="header-text">GEOPHIRES</span>
+            <img src="earth-core-logo.png" alt="GEOPHIRES logo" id="header-core-o"/><span
+                class="header-text">GEOPHIRES</span>
         </h1>
 
         <div class="mui--text-body1">
@@ -75,7 +76,8 @@ <h1 class="mui--text-title">
                     href='https://github.com/NREL/python-geophires-x'>github.com/NREL/python-geophires-x</a>.
             </p>
             <p>
-                You may also be interested in the <a href="/geothermal/hip-ra">HIP RA (Heat in Place calculation)</a> tool.
+                You may also be interested in the <a href="/geothermal/hip-ra">HIP RA (Heat in Place calculation)</a>
+                tool.
             </p>
         </div>
     </div>
@@ -86,9 +88,9 @@ <h1 class="mui--text-title">
 
                 <h3>
                     <sup><a
-                        href="https://softwareengineerprogrammer.github.io/GEOPHIRES-X/parameters.html"
-                        target="_blank"
-                        title="Open Parameters Reference in a separate tab">&#8505;</a>
+                            href="https://softwareengineerprogrammer.github.io/GEOPHIRES-X/parameters.html"
+                            target="_blank"
+                            title="Open Parameters Reference in a separate tab">&#8505;</a>
                     </sup>
 
                     Parameters
@@ -101,7 +103,8 @@ <h3>
                     <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-2">Guided</a>
                     </li>
                     <li><a data-mui-toggle="tab" data-mui-controls="pane-default-3">Text</a></li>
-                    <li><a id="json-input-tab" class="hidden" data-mui-toggle="tab" data-mui-controls="pane-default-4">JSON</a></li>
+                    <li><a id="json-input-tab" class="hidden" data-mui-toggle="tab" data-mui-controls="pane-default-4">JSON</a>
+                    </li>
                 </ul>
                 <div class="mui-tabs__pane" id="pane-default-1">
                     <br/>
@@ -147,10 +150,22 @@ <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"
+                        :class="{ loading: isCsvDownloading }">
+                        <!--&DownArrowBar;-->
+                       csv
+                    </a>
+                    </span>
+
                 </h3>
                 <span id="loading" class="hidden loader">Running...</span>
                 <div id="results"></div>