Merge pull request #32 from common-workflow-language/ajax-ro-download

Add AJAX loading for research object bundle download

Author: MarkRobbo

src/main/resources/static/css/main.css

@@ -21,6 +21,10 @@ body {
     padding-top: 61px;
 }
 
+.hide {
+    display: none;
+}
+
 :target {
     padding-top: 61px;
     margin-top: -61px;

src/main/resources/static/js/workflow.js renamed to src/main/resources/static/js/main.js

@@ -110,4 +110,36 @@ require(['jquery', 'bootstrap.modal', 'renderer'],
             // Stop default button action
             event.preventDefault();
         });
-    });
+    });
+
+/**
+ * Code for including the link to the Research Object Bundle download
+ * without refresh once generated
+ */
+require(['jquery'],
+    function ($) {
+        // AJAX function to add download link to page if generated
+        function getDownloadLink() {
+            $.ajax({
+                type: 'HEAD',
+                url: $('#download').attr('href'),
+                dataType: "json",
+                success: function (data) {
+                    $("#generating").addClass("hide");
+                    $("#generated").removeClass("hide");
+                },
+                error: function () {
+                    // Retry in 5 seconds if still not generated
+                    setTimeout(function () {
+                        getDownloadLink();
+                    }, 5000)
+                }
+            });
+        }
+
+        // If ajaxRequired exists on the page the RO bundle link is not generated
+        // at time of page load
+        if ($("#ajaxRequired").length) {
+            getDownloadLink();
+        }
+    });

src/main/resources/templates/workflow.html

@@ -105,9 +105,10 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
                     <img id="githubLogo" src="../static/img/GitHub-Mark-32px.png" th:src="@{/img/GitHub-Mark-32px.png}" width="24" height="24" />
                 </a>
                 <i>Fetched <span th:text="${{workflow.retrievedOn}}">01/12/16 at 21:00</span></i>
-                <span th:if="${workflow.roBundle == null}"> - Generating download link&hellip; [<a th:href="@{'/workflows/' + ${workflow.id}}" href="#">Refresh</a>]</span>
-                <span th:if="${workflow.roBundle != null}">
-                    - <a th:href="@{'/workflows/' + ${workflow.id} + '/download'}" href="#" download="bundle.zip">Download as Research Object Bundle</a>
+                <span th:if="${workflow.roBundle == null}" id="ajaxRequired"></span>
+                <span th:class="${workflow.roBundle != null} ? hide : ''" id="generating"> - Generating download link <img alt="loading" src="/img/loading.svg" width="20" height="20" /></span>
+                <span th:class="${workflow.roBundle == null} ? hide : ''" id="generated">
+                    - <a th:href="@{'/workflows/' + ${workflow.id} + '/download'}" id="download" href="#" download="bundle.zip">Download as Research Object Bundle</a>
                     <a href="http://www.researchobject.org/" rel="noopener" target="_blank">[?]</a>
                 </span>
             </p>
@@ -173,6 +174,6 @@ <h2>Outputs</h2>
 
 <div th:replace="fragments/footer :: copy"></div>
 
-<script src="/bower_components/requirejs/require.js" data-main="/js/workflow.js"></script>
+<script src="/bower_components/requirejs/require.js" data-main="/js/main.js"></script>
 </body>
 </html>