Added export button to Pipework

Layout/default/Pipework/Index.php

@@ -30,7 +30,7 @@
           <div class="card-body mb-3">
             <h4 class="header-title mb-3">Filter</h4>
             
-            <form method="get" action="<?=self::getUrl("Pipework")?>">
+            <form method="get" id="filterform" action="<?=self::getUrl("Pipework")?>">
               <div class="row">
                 <div class="col-1">
                   <label class="form-label" for="filter_network_id">Netzgebiet</label>
@@ -91,10 +91,23 @@
                 
               </div>
               <div class="row mt-2">
-                <div class="col">
+                <div>
                   <button type="submit" class="btn btn-primary">Filter anwenden</button>
                   <a class="btn btn-secondary" href="<?=self::getUrl("Pipework")?>">Filter zurücksetzen</a>
                 </div>
+                <div style="width: 512px;">
+                  <?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" 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>
+
+                  <?php endif; ?>
+                </div>
               </div>
             </form>
             
@@ -293,6 +306,105 @@ $('select[name=wfitem_pipework_finished]').each(function() {
   });
 });
 
+
+  var export_uid = "";
+  var export_progress = 0;
+  var downloadUrl;
+  
+  $('#filterform').change(function() {
+    downloadUrl = "";
+  });
+  
+  /*
+   * Eport button click
+   */
+  function exportButtonClick() {
+    if(downloadUrl) {
+      document.location.href = '<?=self::getUrl("Pipework","downloadExport")?>?uid=' + export_uid
+      return;
+    }
+    
+    
+    var form = $('#filterform');
+    var actionUrl = '<?=self::getUrl("Pipework", "export")?>';
+    
+    $.ajax({
+      type: "POST",
+      url: actionUrl,
+      data: form.serialize(),
+      dataType: "json",
+      success: function(success) {
+        if(success.status = "OK") {
+          if(success.uid) {
+            export_uid = success.uid;
+            export_progress = success.progress;
+            //$('#progress-bar-wrapper').show();
+            $('#export-button-label').hide();
+            $('#progress-bar').show();
+            setTimeout(updateExportProgress, 200);
+            $('#export-button').addClass("bg-dark");
+            $('#export-button').prop("onclick", null).off("click");
+            //$('#export-button').prop("disabled", true);
+          } else {
+            console.log("no uid returned");
+          }
+        }
+      }
+
+    });
+  }
+  
+  function updateExportProgress() {
+    if(!export_uid) {
+      return false;
+    }
+    
+    $.get("<?=self::getUrl("Pipework", "exportProgress")?>",
+      {
+        uid: export_uid
+      },
+      function(success) {
+        if(success.status == "OK") {
+          updateProgressBar(success.progress);
+          if(success.progress >= 100) {
+            downloadUrl = '<?=self::getUrl("Pipework","downloadExport")?>?uid=' + export_uid;
+            setTimeout(() => {document.location.href = '<?=self::getUrl("Pipework","downloadExport")?>?uid=' + export_uid}, 200);
+            setTimeout(clearProgressBar, 5000);
+          } else {
+            setTimeout(updateExportProgress, 500);
+          }
+        }
+      },
+      "json"
+    );
+  }
+  
+  function updateProgressBar(progress) {
+    $('#progress-bar').css("width", progress + "%");
+    $('#progress-bar').text("Bitte warten... " + progress + "%");
+    
+    /*if(progress > 50) {
+      $('#progress-bar').removeClass("text-secondary");
+    }*/
+    
+    if(progress >= 100) {
+      $('#progress-bar').addClass("bg-success").removeClass("bg-primary");
+    }
+    
+  }
+  
+  function clearProgressBar() {
+    //$('#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-dark");
+    $('#export-button').click(exportButtonClick);
+    $('#export-button-label').show();
+  }
+
 </script>