Added linework export with progress bar

Layout/default/Linework/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("Linework")?>">
+            <form method="get" id="filterform" action="<?=self::getUrl("Linework")?>">
               <div class="row">
                 <div class="col-1">
                   <label class="form-label" for="filter_network_id">Netzgebiet</label>
@@ -99,11 +99,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("Linework")?>">Filter zurücksetzen</a>
+                </div>
+                <div style="width: 512px;">
                   <?php if($me->isAdmin()): ?>
-                    <button type="submit" name="export" value="1" class="btn btn-outline-success ml-2"><i class="fas fa-download mr-1"></i> Download als .xls</button>
+                  <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>
+                    </div>
+                  </div>
+                    
                   <?php endif; ?>
                 </div>
               </div>
@@ -665,6 +677,87 @@ function validateWorkflowItem(id) {
     return true;
   }
 
+
+  var export_uid = "";
+  var export_progress = 0;
+
+  $('#export-button').click(function() {
+    var form = $('#filterform');
+    var actionUrl = '<?=self::getUrl("Linework", "export")?>';
+    /*var formdata = new FormData(form);
+    for (const [key, value] of formdata) {
+      //console.log(key + ": " + value);
+    }
+    */
+    
+    console.log(form.serialize());
+    
+    $.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();
+            setTimeout(updateExportProgress, 200);
+          } else {
+            console.log("no uid returned");
+          }
+        }
+      }
+
+    });
+  });
+  
+  function updateExportProgress() {
+    if(!export_uid) {
+      return false;
+    }
+    
+    $.get("<?=self::getUrl("Linework", "exportProgress")?>",
+      {
+        uid: export_uid
+      },
+      function(success) {
+        if(success.status == "OK") {
+          updateProgressBar(success.progress);
+          if(success.progress >= 100) {
+            setTimeout(() => {document.location.href = '<?=self::getUrl("Linework","downloadExport")?>?uid=' + export_uid}, 200);
+            setTimeout(clearProgressBar, 5000);
+          } else {
+            setTimeout(updateExportProgress, 200);
+          }
+        }
+      },
+      "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");
+  }
+
 </script>