Hochschulprojekte
/
f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Prepare templating mechanism for driver infobox

This commit is contained in:
Jan Philipp Timme 2017-12-30 01:16:47 +01:00
parent 22a7c4d29e
commit f71459307a
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -93,7 +93,7 @@
<!-- Driver info card --> <!-- Driver info card -->
<div class="card" id="driver-card"> <div class="card" id="driver-card">
<div class="card-header">Rennteilnehmer</div> <div class="card-header">Rennteilnehmer</div>
<div class="card-body" id="race-driverbox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body --> <div class="card-body" id="driver-infobox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body -->
</div> <!-- card --> </div> <!-- card -->

6
js/main.js
View File

@ -64,9 +64,11 @@ preprocessor.load(function(data) {
$(event.currentTarget).addClass("selected"); $(event.currentTarget).addClass("selected");
// Fetch race data // Fetch race data
var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0]; 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 $("#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(); $("#lineGraphBox").empty();
createLineGraph("#lineGraphBox", rdata); createLineGraph("#lineGraphBox", rdata);
}); });

16
js/util.js
View File

@ -163,3 +163,19 @@ function renderRaceInfoBox(race) {
content += "</div>"; content += "</div>";
return content; return content;
} }
function renderDriverInfoBox(race) {
var raceInfo = race.raceInfo;
var circuit = preprocessor.getResults().circuits[raceInfo.circuitId];
console.log(raceInfo);
var content = "";
content = "<h1 data-toggle=\"tooltip\" data-placement=\"top\" title=\"#"+raceInfo.raceId+"\">"+raceInfo.name+"</h1>";
content += "<h5>"+circuit.name+" ("+circuit.location+", "+circuit.country+")</h5>";
content += "<h6>"+raceInfo.date.toLocaleDateString("de-DE")+"</h6>"
content += "<div class=\"text-right\">";
content += "<a class=\"btn btn-primary\" target=\"_blank\" href=\""+raceInfo.url+"\" role=\"button\">See Race on Wikipedia</a> ";
content += "<a class=\"btn btn-primary\" target=\"_blank\" href=\""+circuit.url+"\" role=\"button\">See Circuit on Wikipedia</a>";
content += "</div>";
return content;
}