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

Merge branch 'master' of https://github.com/F1Vis/f1vis

This commit is contained in:
sirsandmann 2017-12-30 01:19:05 +01:00
parent 002d8fcb90 f71459307a
commit 6cc1e3eee2
4 changed files with 79 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/main.css
View File

@ -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;

16
index.html
View File

@ -76,7 +76,10 @@
</svg>
</div>
</div>
<div class="card-body">
<div class="card-body" id="race-infobox"><!-- Race info box automatically filled by JS.--></div> <!-- card-body -->
<div class="card-footer text-muted">
<div class="content-box chart-box">
<div id="lineGraphBox"></div>
@ -84,9 +87,18 @@
</div>
</div>
</div> <!-- card-body -->
</div> <!-- card-footer -->
</div> <!-- card -->
<br>
<!-- Driver info card -->
<div class="card" id="driver-card">
<div class="card-header">Rennteilnehmer</div>
<div class="card-body" id="driver-infobox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body -->
</div> <!-- card -->
</main><!-- /.container -->
<!-- Other utility infrastructure -->

27
js/main.js
View File

@ -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("<li data=\"" + raceD.raceInfo.raceId + "\">" +
@ -54,15 +55,35 @@ preprocessor.load(function(data) {
$("#courseSelection li").click(function(event) {
var raceI = event.currentTarget.attributes.data.value;
if(slyelement.curRaceId == raceI){ return; }
// 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");
// Fetch race data
var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0];
// Put information about race into race info box
$("#race-infobox").html(renderRaceInfoBox(rdata)); // See util.js
// 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);
});
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) {
@ -107,4 +128,6 @@ preprocessor.load(function(data) {
// Select most recent year by default
$("#seasonByYearSelector").val($("#seasonByYearSelector option").first().val()).change();
// Enable tooltips
$('[data-toggle="tooltip"]').tooltip()
});

32
js/util.js
View File

@ -147,3 +147,35 @@ 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 = "<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;
}
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;
}