From 66b059fa0176f1406984a6b82e613f41adde8875 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Wed, 15 Nov 2017 21:22:05 +0100
Subject: [PATCH] Migrate loadmask to Bootstrap

---
 index.html | 16 +++++++++++++++-
 js/main.js |  5 ++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index d51b96c..7bee651 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@
       </div>
     </nav>
 
+
     <main role="main" class="container">
 
       <div class="starter-template">
@@ -54,9 +55,22 @@
 
     </main><!-- /.container -->
 
+
+    <div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
+      <div class="modal-dialog modal-m">
+        <div class="modal-content">
+          <div class="modal-header">Denkpause ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
+          <div class="modal-body">
+            <div class="progress progress-striped active" style="margin-bottom:0;">
+              <div class="progress-bar" style="width:100%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Placed at the end of the document so the pages load faster -->
     <!-- Bootstrap core JavaScript
     ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
     <script src="js/jquery/jquery-3.2.1.min.js"></script>
     <script src="js/popper/popper.min.js"></script>
     <script src="js/bootstrap/bootstrap.min.js"></script>
diff --git a/js/main.js b/js/main.js
index fedcb17..79da464 100644
--- a/js/main.js
+++ b/js/main.js
@@ -139,6 +139,9 @@ function fetchStatus(callback) {
 /* This is where the actual control flow is defined */
 console.log("Let's load and preprocess all data properly.");
 
+// Enable loading modal
+$("#loading-dialog").modal('show');
+
 // Create a queue, add all the fetch&process functions and await their results
 d3.queue()
   .defer(fetchCircuits)
@@ -161,6 +164,6 @@ d3.queue()
     // Throw errors so we can see them
     if(error) throw error;
     // Hide the loadmask
-    d3.select("#loadmask").style("display", "none");
+    $("#loading-dialog").modal('hide');
   });