Merge branch 'master' of https://github.com/F1Vis/f1vis
This commit is contained in:
Maschell
commit
141c15bf7f
110
css/main.css
110
css/main.css
|
|
@ -104,3 +104,113 @@ body {
|
||||||
width: 1%;
|
width: 1%;
|
||||||
height: 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
207
index.html
|
|
@ -13,109 +13,122 @@
|
||||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
<div class="wrap">
|
||||||
<a class="navbar-brand" href="#">F1Vis</a>
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
<a class="navbar-brand" href="#">F1Vis</a>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
</button>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||||
<ul class="navbar-nav mr-auto">
|
<ul class="navbar-nav mr-auto">
|
||||||
<li class="nav-item active">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(aktuelle Seite)</span></a>
|
<a class="nav-link" href="#">Home <span class="sr-only">(aktuelle Seite)</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<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>
|
<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">
|
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||||
<a class="dropdown-item" href="#">Einrückungen mit zwei Leerzeichen</a>
|
<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="#">Charset ist UTF-8</a>
|
||||||
<a class="dropdown-item" href="#">Keine Panik!</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>
|
</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>
|
</div>
|
||||||
</nav>
|
<!-- Other utility infrastructure -->
|
||||||
|
<!--
|
||||||
<main role="main" class="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">
|
||||||
<!-- Navigation card -->
|
<div class="modal-content">
|
||||||
<div class="card" id="selector-card">
|
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
|
||||||
<div class="card-header">Welches Rennen interessiert dich?</div>
|
<div class="modal-body">
|
||||||
<div class="card-body">
|
<div class="progress" style="margin-bottom:0;">
|
||||||
<!-- Year selector -->
|
<div class="progress-bar progress-bar-striped progress-bar-animated active" style="width:100%"></div>
|
||||||
|
</div>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
* In this file, functions for loading and preprocessing the data are defined.
|
* In this file, functions for loading and preprocessing the data are defined.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Define the functions responsible for fetching+preprocessing data in a preprocessor object
|
* Define the functions responsible for fetching+preprocessing data in a preprocessor object
|
||||||
*/
|
*/
|
||||||
var preprocessor = {
|
var preprocessor = {
|
||||||
|
|
@ -280,8 +280,6 @@ var preprocessor = {
|
||||||
|
|
||||||
// Starts the fetch+preprocess step, calls back given function with results.
|
// Starts the fetch+preprocess step, calls back given function with results.
|
||||||
load: function(callback) {
|
load: function(callback) {
|
||||||
// Show loading dialog
|
|
||||||
loadingDialog.show(13);
|
|
||||||
// Create a queue, add all the fetch&process functions and await their results
|
// Create a queue, add all the fetch&process functions and await their results
|
||||||
d3.queue()
|
d3.queue()
|
||||||
.defer(preprocessor.fetchCircuits)
|
.defer(preprocessor.fetchCircuits)
|
||||||
|
|
|
||||||
30
js/util.js
30
js/util.js
|
|
@ -22,35 +22,19 @@ function germanDateString(inputDate) {
|
||||||
|
|
||||||
/* Define global structure for the loading dialog */
|
/* Define global structure for the loading dialog */
|
||||||
var loadingDialog = {
|
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
|
// Function to signal that another item was progressed
|
||||||
itemFinished: function() {
|
itemFinished: function() {
|
||||||
|
|
||||||
this.progressItemsDone++;
|
|
||||||
this._updateProgressBar();
|
|
||||||
},
|
},
|
||||||
// Hide the dialog
|
// Hide the dialog
|
||||||
hide: function() {
|
hide: function() {
|
||||||
console.log("hide");
|
$(document).ready(function($) {
|
||||||
//$(this.id).modal('hide');
|
$("#overlay").fadeOut(350, "linear", function(){
|
||||||
},
|
$("#overlay").css("display", "none");
|
||||||
// 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 + "%;");
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// transforms the raceData to a format, with which lineDataDefinition can work
|
// transforms the raceData to a format, with which lineDataDefinition can work
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue