From f71459307aeb7eaee72a76d3e7a0041ea5c97a8a Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sat, 30 Dec 2017 01:16:47 +0100
Subject: [PATCH] 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 @@
       <!-- Driver info card -->
       <div class="card" id="driver-card">
         <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 -->
 
 
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 += "</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;
+}