From 23e7ce324bd19d4eb48c483a75351043c2de8ef5 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 00:15:53 +0100 Subject: [PATCH 1/7] Add state to courseSelector --- css/main.css | 8 ++++++++ js/main.js | 17 ++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 0a6dd99..a42e659 100644 --- a/css/main.css +++ b/css/main.css @@ -15,6 +15,14 @@ body { /*border: 1px solid grey;*/ } +#courseSelection li.hover { + background-color: #e2eaff; +} + +#courseSelection li.selected { + border-color: #aaaaff; +} + /* This container will allow scaling svg, so we don't need to care about it in d3.js */ .svg-container { display: inline-block; diff --git a/js/main.js b/js/main.js index 19358aa..7e50ed4 100644 --- a/js/main.js +++ b/js/main.js @@ -44,8 +44,9 @@ preprocessor.load(function(data) { yearSelector.change(function(event) { var selectedYear = $(event.target).val(); slyelement.curRaces = processor.getRacesByYear(selectedYear); + // Empty the course selector $("#courseSelection").empty(); - // Add all the races to the selector + // ... and fill it with fresh races to choose from for(var race in slyelement.curRaces) { var raceD = slyelement.curRaces[race]; $("#courseSelection").append("
  • " + @@ -53,6 +54,11 @@ preprocessor.load(function(data) { "
    " + raceD.raceInfo.date.toLocaleDateString("de-DE") + "
    • "); $("#courseSelection li").click(function(event) { + // Clear previously selected courses + $("#courseSelection .selected").removeClass("selected"); + // Mark selected course + $(event.currentTarget).addClass("selected"); + // Hand off to diagram rendering var raceI = event.currentTarget.attributes.data.value; if(slyelement.curRaceId == raceI){ return; } slyelement.curRaceId = raceI; @@ -62,7 +68,16 @@ preprocessor.load(function(data) { }); slyelement.obj.reload(); } + // Refresh carousell after building the selector slyelement.obj.reload(); + // Register hover event + $("#courseSelection li").hover(function(event){ + // handlerIn + $(event.currentTarget).addClass("hover"); + }, function(event) { + // handlerOut + $(event.currentTarget).removeClass("hover"); + }); // TODO: Now add all the images without disturbing the user for(var race in slyelement.curRaces) { From 6b315b3b2b0d8430cf43e52a63e30ff4f67af5d5 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 00:25:23 +0100 Subject: [PATCH 2/7] Add base structure to put details in later --- index.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d6a0945..9f2c901 100644 --- a/index.html +++ b/index.html @@ -76,13 +76,18 @@ +
    + TODO: Put diagram details here. +
    + +
    -
    + From 7d7f35d3ca9907718aa4fd20429cdf586e17dbe1 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 00:35:25 +0100 Subject: [PATCH 3/7] More preparations to place race infos later --- index.html | 2 +- js/main.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 9f2c901..0413df5 100644 --- a/index.html +++ b/index.html @@ -77,7 +77,7 @@ -
    +
    TODO: Put diagram details here.
    diff --git a/js/main.js b/js/main.js index 7e50ed4..4d22b41 100644 --- a/js/main.js +++ b/js/main.js @@ -54,15 +54,19 @@ preprocessor.load(function(data) { "
    " + raceD.raceInfo.date.toLocaleDateString("de-DE") + ""); $("#courseSelection li").click(function(event) { + var raceI = event.currentTarget.attributes.data.value; + // Internal check if element was already selected + if(slyelement.curRaceId == raceI){ return true; } + slyelement.curRaceId = raceI; // Clear previously selected courses $("#courseSelection .selected").removeClass("selected"); // Mark selected course $(event.currentTarget).addClass("selected"); - // Hand off to diagram rendering - var raceI = event.currentTarget.attributes.data.value; - if(slyelement.curRaceId == raceI){ return; } - slyelement.curRaceId = raceI; + // Fetch race data var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; + // Put information about race into info box + $("#race-infobox").html("joah"); + // Hand off to diagram rendering $("#lineGraphBox").empty(); createLineGraph("#lineGraphBox", rdata); }); From 7bcf0eb078bfef0f17031cf84c09dac5819a41e7 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 00:46:43 +0100 Subject: [PATCH 4/7] Show very basic info about current race in diagram box --- js/main.js | 4 +++- js/util.js | 12 ++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 4d22b41..1ade6cf 100644 --- a/js/main.js +++ b/js/main.js @@ -65,7 +65,7 @@ preprocessor.load(function(data) { // Fetch race data var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; // Put information about race into info box - $("#race-infobox").html("joah"); + $("#race-infobox").html(renderRaceInfoBox(rdata)); // See util.js // Hand off to diagram rendering $("#lineGraphBox").empty(); createLineGraph("#lineGraphBox", rdata); @@ -126,4 +126,6 @@ preprocessor.load(function(data) { // Select most recent year by default $("#seasonByYearSelector").val($("#seasonByYearSelector option").first().val()).change(); + // Enable tooltips + $('[data-toggle="tooltip"]').tooltip() }); diff --git a/js/util.js b/js/util.js index f8161c8..2e8e435 100644 --- a/js/util.js +++ b/js/util.js @@ -147,3 +147,15 @@ function getImageFromWikipedia(data,pageName,imagesize,callback){ } }); }; + +function renderRaceInfoBox(race) { + var raceInfo = race.raceInfo; + //console.log(raceInfo); + var content = ""; + + content = "

    "+raceInfo.name+"

    "; + content += "
    "+raceInfo.date.toLocaleDateString("de-DE")+"
    "; + content += "See on Wikipedia"; + + return content; +} From 9c00932e504bae56ed01582c2babd9ebc72d3529 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 01:09:10 +0100 Subject: [PATCH 5/7] Improve race infobox a bit --- js/util.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/js/util.js b/js/util.js index 2e8e435..e62fb32 100644 --- a/js/util.js +++ b/js/util.js @@ -150,12 +150,16 @@ function getImageFromWikipedia(data,pageName,imagesize,callback){ function renderRaceInfoBox(race) { var raceInfo = race.raceInfo; + var circuit = preprocessor.getResults().circuits[raceInfo.circuitId]; //console.log(raceInfo); var content = ""; content = "

    "+raceInfo.name+"

    "; - content += "
    "+raceInfo.date.toLocaleDateString("de-DE")+"
    "; - content += "See on Wikipedia"; - + content += "
    "+circuit.name+" ("+circuit.location+", "+circuit.country+")
    "; + content += "
    "+raceInfo.date.toLocaleDateString("de-DE")+"
    " + content += "
    "; + content += "See Race on Wikipedia "; + content += "See Circuit on Wikipedia"; + content += "
    "; return content; } From 22a7c4d29e1cabb4b0508acfe270d6d56c76a20a Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 01:13:26 +0100 Subject: [PATCH 6/7] Add empty driver info box --- index.html | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0413df5..9447c2d 100644 --- a/index.html +++ b/index.html @@ -77,9 +77,7 @@
    -
    - TODO: Put diagram details here. -
    +
    @@ -87,9 +85,18 @@
    - + +
    + + +
    +
    Rennteilnehmer
    +
    +
    + + From f71459307aeb7eaee72a76d3e7a0041ea5c97a8a Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Sat, 30 Dec 2017 01:16:47 +0100 Subject: [PATCH 7/7] Prepare templating mechanism for driver infobox --- index.html | 2 +- js/main.js | 6 ++++-- js/util.js | 16 ++++++++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9447c2d..c275959 100644 --- a/index.html +++ b/index.html @@ -93,7 +93,7 @@
    Rennteilnehmer
    -
    +
    diff --git a/js/main.js b/js/main.js index 1ade6cf..d2b7a0c 100644 --- a/js/main.js +++ b/js/main.js @@ -64,9 +64,11 @@ preprocessor.load(function(data) { $(event.currentTarget).addClass("selected"); // Fetch race data var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; - // Put information about race into info box + // Put information about race into race info box $("#race-infobox").html(renderRaceInfoBox(rdata)); // See util.js - // Hand off to diagram rendering + // Put information about drivers into driver info box + $("#driver-infobox").html(renderDriverInfoBox(rdata)); // See util.js + // Hand off to diagram rendering $("#lineGraphBox").empty(); createLineGraph("#lineGraphBox", rdata); }); diff --git a/js/util.js b/js/util.js index e62fb32..ed03079 100644 --- a/js/util.js +++ b/js/util.js @@ -163,3 +163,19 @@ function renderRaceInfoBox(race) { content += ""; return content; } + +function renderDriverInfoBox(race) { + var raceInfo = race.raceInfo; + var circuit = preprocessor.getResults().circuits[raceInfo.circuitId]; + console.log(raceInfo); + var content = ""; + + content = "

    "+raceInfo.name+"

    "; + content += "
    "+circuit.name+" ("+circuit.location+", "+circuit.country+")
    "; + content += "
    "+raceInfo.date.toLocaleDateString("de-DE")+"
    " + content += "
    "; + content += "See Race on Wikipedia "; + content += "See Circuit on Wikipedia"; + content += "
    "; + return content; +}