Linework xls export progress bar made a lot more fancy

Layout/default/Linework/Index.php

@@ -107,12 +107,10 @@
                   <?php if($me->isAdmin()): ?>
                   <div class="row">
                     <div class="col-6">
-                      <button type="button" id="export-button" class="form-control btn btn-outline-success ml-2"><i class="fas fa-download mr-1"></i> Download als .xls</button>
-                    </div>
-                    <div class="col-6">
-                      <div id="progress-bar-wrapper" class="progress progress-xl mt-2 hidden">
-                        <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary text-secondary" style="width: 0%;">Bitte warten... 0%</div>
-                      </div>
+                      <button type="button" id="export-button" class="form-control btn btn-outline-success ml-2" onclick="exportButtonClick()">
+                        <div id="export-button-label"><i class="fas fa-download mr-1"></i> Download als .xls</div>
+                        <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary hidden" style="width: 0%;">Bitte warten... 0%</div>
+                      </button>
                     </div>
                   </div>
                     
@@ -680,8 +678,22 @@ function validateWorkflowItem(id) {
 
   var export_uid = "";
   var export_progress = 0;
-
-  $('#export-button').click(function() {
+  var downloadUrl;
+  
+  $('#filterform').change(function() {
+    downloadUrl = "";
+  });
+  
+  /*
+   * Eport button click
+   */
+  function exportButtonClick() {
+    if(downloadUrl) {
+      document.location.href = '<?=self::getUrl("Linework","downloadExport")?>?uid=' + export_uid
+      return;
+    }
+    
+    
     var form = $('#filterform');
     var actionUrl = '<?=self::getUrl("Linework", "export")?>';
     /*var formdata = new FormData(form);
@@ -702,9 +714,13 @@ function validateWorkflowItem(id) {
           if(success.uid) {
             export_uid = success.uid;
             export_progress = success.progress;
-            $('#progress-bar-wrapper').show();
+            //$('#progress-bar-wrapper').show();
+            $('#export-button-label').hide();
+            $('#progress-bar').show();
             setTimeout(updateExportProgress, 200);
-            $('#export-button').prop("disabled", true);
+            $('#export-button').addClass("bg-secondary");
+            $('#export-button').prop("onclick", null).off("click");
+            //$('#export-button').prop("disabled", true);
           } else {
             console.log("no uid returned");
           }
@@ -712,7 +728,7 @@ function validateWorkflowItem(id) {
       }
 
     });
-  });
+  }
   
   function updateExportProgress() {
     if(!export_uid) {
@@ -727,6 +743,7 @@ function validateWorkflowItem(id) {
         if(success.status == "OK") {
           updateProgressBar(success.progress);
           if(success.progress >= 100) {
+            downloadUrl = '<?=self::getUrl("Linework","downloadExport")?>?uid=' + export_uid;
             setTimeout(() => {document.location.href = '<?=self::getUrl("Linework","downloadExport")?>?uid=' + export_uid}, 200);
             setTimeout(clearProgressBar, 5000);
           } else {
@@ -742,9 +759,9 @@ function validateWorkflowItem(id) {
     $('#progress-bar').css("width", progress + "%");
     $('#progress-bar').text("Bitte warten... " + progress + "%");
     
-    if(progress > 50) {
+    /*if(progress > 50) {
       $('#progress-bar').removeClass("text-secondary");
-    }
+    }*/
     
     if(progress >= 100) {
       $('#progress-bar').addClass("bg-success").removeClass("bg-primary");
@@ -753,11 +770,15 @@ function validateWorkflowItem(id) {
   }
   
   function clearProgressBar() {
-    $('#progress-bar-wrapper').hide();
+    //$('#progress-bar-wrapper').hide();
     $('#progress-bar').css("width", "0%");
     $('#progress-bar').text("Bitte warten... 0%");
     $('#progress-bar').addClass("bg-primary").removeClass("bg-success");
     $('#export-button').prop("disabled", false);
+    $('#progress-bar').hide();
+    $('#export-button').removeClass("bg-secondary");
+    $('#export-button').click(exportButtonClick);
+    $('#export-button-label').show();
   }
 
 </script>