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

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;

index.html

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

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("<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()
 });

js/util.js

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