From d38a14c2118735a437efae935abb1d9bd9b83cac Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Thu, 16 Nov 2017 23:08:14 +0100 Subject: [PATCH] Move loading dialog logic to util.js --- index.html | 1 + js/main.js | 53 +++++++++++++++++++++++++++++++++++------------------ js/util.js | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 18 deletions(-) create mode 100644 js/util.js diff --git a/index.html b/index.html index 027916a..6ecfd36 100644 --- a/index.html +++ b/index.html @@ -78,6 +78,7 @@ + \ No newline at end of file diff --git a/js/main.js b/js/main.js index 2693318..3e81003 100644 --- a/js/main.js +++ b/js/main.js @@ -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(); }); diff --git a/js/util.js b/js/util.js new file mode 100644 index 0000000..a99ba62 --- /dev/null +++ b/js/util.js @@ -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 + "%;"); + }, +}; + +