Migrate loadmask to Bootstrap

This commit is contained in:
Jan Philipp Timme 2017-11-15 21:22:05 +01:00
parent 6c58f3a67f
commit 66b059fa01
Signed by untrusted user: JPT
GPG Key ID: 5F2C85EC6F3754B7
2 changed files with 19 additions and 2 deletions

View File

@ -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>

View File

@ -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');
});