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

Added Loading screen.

This commit is contained in:
sirsandmann 2017-12-31 02:36:50 +01:00
parent 1a9c796c12
commit 34b9d69a46
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

@ -109,3 +109,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; }
}

207
index.html
View File

@ -13,109 +13,122 @@
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<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">
<span class="navbar-toggler-icon"></span>
</button>
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(aktuelle Seite)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Coding-Guidlines!</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Einrückungen mit zwei Leerzeichen</a>
<a class="dropdown-item" href="#">Charset ist UTF-8</a>
<a class="dropdown-item" href="#">Keine Panik!</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(aktuelle Seite)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Coding-Guidlines!</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Einrückungen mit zwei Leerzeichen</a>
<a class="dropdown-item" href="#">Charset ist UTF-8</a>
<a class="dropdown-item" href="#">Keine Panik!</a>
</div>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<!-- Navigation card -->
<div class="card" id="selector-card">
<div class="card-header">Welches Rennen interessiert dich?</div>
<div class="card-body">
<!-- Year selector -->
<form>
<div class="form-group">
<label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
<select class="form-control" id="seasonByYearSelector">
<!-- This is filled using JS. -->
</select>
</div>
</form>
<!-- Course selector -->
<div class="strecken-selector">
<div class="frame">
<ul class="slidee" id="courseSelection"><!-- This will be filled by JS. --></ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
</li>
</ul>
</div> <!-- card-body -->
<div class="card-footer" style="padding:0;">
<div id="toggle-btn">
<svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
<polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
<polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
</svg>
</div>
</div> <!-- card-footer -->
</div> <!-- card -->
<br>
<!-- Diagram card -->
<div class="card" id="diagram-card">
<div class="card-body" id="race-infobox"><!-- Race info box automatically filled by JS.--></div> <!-- card-body -->
<div class="card-footer text-muted">
<div class="content-box chart-box">
<div id="lineGraphBox"></div>
<div id="race-statistics">
</div>
</div>
</div> <!-- card-footer -->
</div> <!-- card -->
<br>
<!-- Driver info card -->
<div class="card" id="driver-card">
<div class="card-header">Rennteilnehmer</div>
<div class="card-body" id="driver-infobox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body -->
</div> <!-- card -->
</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>
</nav>
<main role="main" class="container">
<!-- Navigation card -->
<div class="card" id="selector-card">
<div class="card-header">Welches Rennen interessiert dich?</div>
<div class="card-body">
<!-- Year selector -->
<form>
<div class="form-group">
<label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
<select class="form-control" id="seasonByYearSelector">
<!-- This is filled using JS. -->
</select>
</div>
</form>
<!-- Course selector -->
<div class="strecken-selector">
<div class="frame">
<ul class="slidee" id="courseSelection"><!-- This will be filled by JS. --></ul>
</div>
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
</div> <!-- card-body -->
<div class="card-footer" style="padding:0;">
<div id="toggle-btn">
<svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
<polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
<polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
</svg>
</div>
</div> <!-- card-footer -->
</div> <!-- card -->
<br>
<!-- Diagram card -->
<div class="card" id="diagram-card">
<div class="card-body" id="race-infobox"><!-- Race info box automatically filled by JS.--></div> <!-- card-body -->
<div class="card-footer text-muted">
<div class="content-box chart-box">
<div id="lineGraphBox"></div>
<div id="race-statistics">
</div>
</div>
</div> <!-- card-footer -->
</div> <!-- card -->
<br>
<!-- Driver info card -->
<div class="card" id="driver-card">
<div class="card-header">Rennteilnehmer</div>
<div class="card-body" id="driver-infobox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body -->
</div> <!-- card -->
</main><!-- /.container -->
<!-- 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-content">
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
<div class="modal-body">
<div class="progress" style="margin-bottom:0;">
<div class="progress-bar progress-bar-striped progress-bar-animated active" style="width:100%"></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-content">
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
<div class="modal-body">
<div class="progress" style="margin-bottom:0;">
<div class="progress-bar progress-bar-striped progress-bar-animated active" style="width:100%"></div>
</div>
</div>
</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