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 <!-- D3.js and our own JavaScript
================================================== --> ================================================== -->
<script type="text/javascript" src="js/d3/d3.min.js"></script> <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> <script type="text/javascript" src="js/main.js"></script>
</body> </body>
</html> </html>

View File

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