Move loading dialog logic to util.js

This commit is contained in:
Jan Philipp Timme 2017-11-16 23:08:14 +01:00
parent dac3ddf27c
commit d38a14c211
Signed by untrusted user: JPT
GPG Key ID: 5F2C85EC6F3754B7
3 changed files with 74 additions and 18 deletions

View File

@ -78,6 +78,7 @@
<!-- D3.js and our own JavaScript
================================================== -->
<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

View File

@ -1,8 +1,12 @@
"use strict";
/*
* This file contains the main control flow.
*/
/* Globally define the places where the preprocessed data is stored for READ ONLY ACCESS. */
var f1data = {
var f1Data = {
circuits: null,
constructorResults: null,
constructors: null,
@ -29,7 +33,8 @@ function fetchCircuits(callback) {
d["lng"] = parseFloat(d["lng"]);
d["alt"] = parseInt(d["alt"]);
});
f1data.circuits = data; // Store results
f1Data.circuits = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -45,7 +50,8 @@ function fetchConstructorResults(callback) {
d["raceId"] = parseInt(d["raceId"]);
d["status"] = parseInt(d["status"]);
});
f1data.constructorResults = data; // Store results
f1Data.constructorResults = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -57,7 +63,8 @@ function fetchConstructors(callback) {
data.forEach(function(d, i) {
d["constructorId"] = parseInt(d["constructorId"]);
});
f1data.constructors = data;
f1Data.constructors = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -74,7 +81,8 @@ function fetchConstructorStandings(callback) {
d["raceId"] = parseInt(d["raceId"]);
d["wins"] = parseInt(d["wins"]);
});
f1data.constructorStandings = data;
f1Data.constructorStandings = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -88,7 +96,8 @@ function fetchDrivers(callback) {
d["driverId"] = parseInt(d["driverId"]);
d["number"] = parseInt(d["number"]);
});
f1data.drivers = data;
f1Data.drivers = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -105,7 +114,8 @@ function fetchDriverStandings(callback) {
d["raceID"] = parseInt(d["raceId"]);
d["wins"] = parseInt(d["wins"]);
});
f1data.driverStandings = data;
f1Data.driverStandings = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -121,7 +131,8 @@ function fetchLapTimes(callback) {
d["position"] = parseInt(d["position"]);
d["raceId"] = parseInt(d["raceId"]);
});
f1data.lapTimes = data;
f1Data.lapTimes = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -138,7 +149,8 @@ function fetchPitStops(callback) {
d["raceId"] = parseInt(d["raceId"]);
d["stop"] = parseInt(d["stop"]);
});
f1data.pitStops = data;
f1Data.pitStops = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -158,7 +170,8 @@ function fetchQualifying(callback) {
d["qualifyId"] = parseInt(d["qualifyId"]);
d["raceId"] = parseInt(d["raceId"]);
});
f1data.qualifying = data;
f1Data.qualifying = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -175,7 +188,8 @@ function fetchRaces(callback) {
d["time"] = new Date(d["time"]);
d["year"] = parseInt(d["year"]);
});
f1data.races = data;
f1Data.races = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -203,7 +217,8 @@ function fetchResults(callback) {
d["statusId"] = parseInt(d["statusId"]);
d["time"] = new Date(d["time"]);
});
f1data.results = data;
f1Data.results = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -215,7 +230,8 @@ function fetchSeasons(callback) {
data.forEach(function(d, i) {
d["year"] = parseInt(d["year"]);
});
f1data.seasons = data;
f1Data.seasons = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -227,7 +243,8 @@ function fetchStatus(callback) {
data.forEach(function(d, i) {
d["statusId"] = parseInt(d["statusId"]);
});
f1data.status = data;
f1Data.status = data; // Store results
loadingDialog.itemFinished(); // Update loading dialog progress bar
callback(null); // Tell the queue we're done.
});
}
@ -235,8 +252,8 @@ 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');
// Show loading dialog
loadingDialog.show(13);
// Create a queue, add all the fetch&process functions and await their results
d3.queue()
@ -259,7 +276,7 @@ d3.queue()
console.log("All done. Ready.");
// Throw errors so we can see them
if(error) throw error;
// Hide the loadmask
$("#loading-dialog").modal('hide');
// Hide the loading dialog
loadingDialog.hide();
});

38
js/util.js Normal file
View File

@ -0,0 +1,38 @@
"use strict";
/*
* This file contains utility functions, data structures and
* stuff not related to what this project actually does.
*/
/* 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) {
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() {
$(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 + "%;");
},
};