Hochschulprojekte/f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Merge branch 'master' of https://github.com/F1Vis/f1vis

Browse Source
This commit is contained in:
Maschell 2017-12-31 13:08:02 +01:00
commit 141c15bf7f
4 changed files with 228 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
css/main.css
View File

@ -104,3 +104,113 @@ body {
width: 1%;
height: 1%;
}
#overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 2;
cursor: pointer;
opacity: 1;
}
#loading-header{
position: fixed;
top: 43%;
left: 49%;
margin: -14px 0 0 -42px;
padding: 10px;
color: black;
z-index: 6;
}
.loading {
position: fixed;
top: 50%;
left: 50%;
margin: -14px 0 0 -42px;
padding: 10px;
background: rgba(20, 20, 20, 0.9);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
-ms-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
-o-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
}
.loading-dot {
float: left;
width: 8px;
height: 8px;
margin: 0 4px;
background: white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0;
-webkit-box-shadow: 0 0 2px black;
-moz-box-shadow: 0 0 2px black;
-ms-box-shadow: 0 0 2px black;
-o-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
-webkit-animation: loadingFade 1s infinite;
-moz-animation: loadingFade 1s infinite;
animation: loadingFade 1s infinite;
}
.loading-dot:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.loading-dot:nth-child(2) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading-dot:nth-child(3) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dot:nth-child(4) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes loadingFade {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}
@-moz-keyframes loadingFade {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}
@keyframes loadingFade {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}

15
index.html
View File

@ -13,6 +13,7 @@
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wrap">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">F1Vis</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
@ -104,9 +105,20 @@
</main><!-- /.container -->
<div id="overlay">
<div class="loading">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
</div>
<!-- Other utility infrastructure -->
<!--
<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-dialog modal-m">
<div class="modal-content">
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
<div class="modal-body">
@ -116,6 +128,7 @@
</div>
</div>
</div>
</div>-->
</div>
<!-- Placed at the end of the document so the pages load faster -->

2
js/preprocessor.js
View File

@ -280,8 +280,6 @@ var preprocessor = {
// Starts the fetch+preprocess step, calls back given function with results.
load: function(callback) {
// Show loading dialog
loadingDialog.show(13);
// Create a queue, add all the fetch&process functions and await their results
d3.queue()
.defer(preprocessor.fetchCircuits)

30
js/util.js
View File

@ -22,35 +22,19 @@ function germanDateString(inputDate) {
/* Define global structure for the loading dialog */
var loadingDialog = {
id: "#loading-dialog",
progressItems: 1,
progressItemsDone: 0,
// Initialize+Show the loading dialog with a number of items to progress
show: function(progressItems = 1) {
console.log("show");
this.progressItems = progressItems;
this.progressItemsDone = 0;
this._updateProgressBar();
//$(this.id).modal('show');
},
// Function to signal that another item was progressed
itemFinished: function() {
this.progressItemsDone++;
this._updateProgressBar();
},
// Hide the dialog
hide: function() {
console.log("hide");
//$(this.id).modal('hide');
},
// Private function to update the progress bar shown
_updateProgressBar: function() {
var percentage = (this.progressItemsDone / this.progressItems) * 100;
if(percentage < 0 || isNaN(percentage)) percentage = 0;
if(percentage > 100) percentage = 100;
$(this.id + " .progress-bar").attr("style", "width: " + percentage + "%;");
},
$(document).ready(function($) {
$("#overlay").fadeOut(350, "linear", function(){
$("#overlay").css("display", "none");
});
});
}
};
// transforms the raceData to a format, with which lineDataDefinition can work