From 291cdf8e7bd826ce6cb8c950d3e1423c86ba700f Mon Sep 17 00:00:00 2001
From: Klaus-Uwe Mitterer <git@kumi.email>
Date: Sun, 21 Oct 2018 19:06:14 +0200
Subject: [PATCH] Allow simultaneous exports

---
 server/static/index.html | 10 +++++++--
 server/static/worker.js  | 44 +++++++++++++++++++++++++++++++++-------
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/server/static/index.html b/server/static/index.html
index 14ba491..b8677db 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -40,8 +40,14 @@
       </div>
     </div>
   </div>
- 
- <div class="modal"></div>
+
+<div class="py-5">
+  <div class="container">
+    <div class="row" id="cards"></div>
+  </div>
+</div>
+
+<div class="modal"></div>
 
   <script src="jquery-3.3.1.min.js"></script>
   <script src="bootstrap.min.js"></script>
diff --git a/server/static/worker.js b/server/static/worker.js
index 3360e68..11ccb17 100644
--- a/server/static/worker.js
+++ b/server/static/worker.js
@@ -16,6 +16,34 @@ function unlockform() {
 	$body.removeClass("loading");
 }
 
+function deletecard(jobid) {
+        if ( $("#" + jobid).length ) {
+                $("#" + jobid).remove();
+        };
+}
+
+
+function addcard(jobid) {
+        var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <img class="card-img-top img-fluid" src="/spinner.gif" alt="Creating Image"> </div> </div>';
+        $('#cards').append(text);
+	$('#' + jobid).show();
+}
+
+function failcard(jobid) {
+        deletecard(jobid);
+
+        var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <div style="text-align: center; color: red; font-weight: bold;" class="card-block">Export failed.</div><div style="text-align: center;" class="card-block"> <a style="color: white;" onclick="deletecard(\'' + jobid + '\');" class="btn btn-danger">Hide</a></div> </div> </div>';
+        $('#cards').append(text);
+}
+
+
+function finishcard(jobid) {
+	deletecard(jobid);
+
+	var text = '<div class="col-sm-3" id="' + jobid + '"> <div class="card"> <img class="card-img-top img-fluid" src="/getjob/' + jobid + '" alt="Final Image"> <div style="text-align: center; color: white;" class="card-block"> <a href="/getjob/' + jobid + '" class="btn btn-primary">Download</a> <a onclick="deletecard(\'' + jobid + '\');" class="btn btn-danger">Hide</a></div> </div> </div>';
+	$('#cards').append(text);
+}
+
 $('#theform').submit(function(event){
 	event.preventDefault();
 	if(this.checkValidity()) { 
@@ -24,9 +52,10 @@ $('#theform').submit(function(event){
 			url: "/addjob",
 			data: $('#theform').serialize(),
 			success: function(msg){
-				lockform();
-				interval = setInterval(checkServerForFile,3000,msg);
+				var interval = setInterval(checkServerForFile,3000,msg);
 				window.panaxworking = false;
+				addcard(msg);
+
 				function checkServerForFile(jobid) {
 					if (!window.panaxworking) {
 						window.panaxworking = true;
@@ -37,17 +66,18 @@ $('#theform').submit(function(event){
 							statusCode: {
 								404: function() {
 									clearInterval(interval);
-									unlockform();
+									failcard(jobid);
+									return;
 								},
 								200: function() {
 									clearInterval(interval);
-									unlockform();
-									window.location.href = "/getjob/" + jobid;
+									finishcard(jobid);
+									return;
 								},
 								500: function() {
 									clearInterval(interval);
-									window.alert("Failed to process request. The URL may be incorrect or unsupported.")
-									unlockform();
+									failcard(jobid);
+									return;
 								}
 							}
 						});