Merge branch 'master' into flo_branch

.gitignore

@@ -0,0 +1 @@
+.Rhistory

index.html

@@ -48,26 +48,7 @@
       </div>
       <div class="content-box chart-box strecken-selector">
         <div class="frame">
-	        <ul class="slidee">
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
+	        <ul class="slidee" id="courseSelection">
 	        </ul>
         </div>
         <div class="scrollbar">

js/diagrams.js

@@ -2,8 +2,19 @@
 
 // https://bl.ocks.org/mbostock/3884955
 function createLineGraph(containerId, raceData){
-  console.log(raceData);
 
+  // Rough input validation
+  if(raceData.raceInfo === undefined) {
+    console.error(["Sorry, that raceData is empty. :-(", raceData]);
+    return; // early return to avoid errors
+  } else {
+    console.log(raceData);
+  }
+
+  var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
+
+
+  // Configuration
   var height = 720;
   var width = 1080;
   var linePointSize = 5;

js/main.js

@@ -4,35 +4,64 @@
  * This file contains the main control flow.
  */
 
-preprocessor.load(function(data) {
-		var $frame  = $('.strecken-selector');
-		var $slidee = $frame.children('ul').eq(0);
-		var $wrap   = $frame.parent();
-    var options = {
-			horizontal: 1,
-			itemNav: 'basic',
-			smart: 1,
-			activateOn: 'click',
-			mouseDragging: 1,
-			touchDragging: 1,
-			releaseSwing: 1,
-			startAt: 3,
-			scrollBar: $wrap.find('.scrollbar'),
-			scrollBy: 1,
-			pagesBar: $wrap.find('.pages'),
-			activatePageOn: 'click',
-			speed: 300,
-			elasticBounds: 1,
-			dragHandle: 1,
-			dynamicHandle: 1,
-			clickBar: 1,
-    };
-    $('.frame').sly(options);
+var slyelement = {
+  obj: {},
+  curRaces: {},
+  el: '.frame',
+  options: {
+   horizontal: 1,
+	itemNav: 'basic',
+	smart: 1,
+	activateOn: 'click',
+	mouseDragging: 1,
+	touchDragging: 1,
+	releaseSwing: 1,
+	startAt: 3,
+	scrollBar: $('.strecken-selector').parent().find('.scrollbar'),
+	scrollBy: 1,
+	pagesBar: $('.strecken-selector').parent().find('.pages'),
+	activatePageOn: 'click',
+	speed: 300,
+	elasticBounds: 1,
+	dragHandle: 1,
+	dynamicHandle: 1,
+	clickBar: 1,
+  }
+};
+
+
+preprocessor.load(function(data) {    
+    slyelement.obj = new Sly($(slyelement.el), slyelement.options);  
+    slyelement.obj.init();
+   
 
   // Some sample code for a year selector - TODO: Improve a lot and move somewhere else
   var yearSelector = $("#seasonByYearSelector");
-  var seasons = processor.getSeasonsWithLapData();
-  for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
 
-  createLineGraph("#lineGraphBox", processor.getRace(970));
+  var seasons = processor.getSeasonsWithLapData();
+
+  for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
+  
+  // Someone chose a year
+  yearSelector.change(function(event) {
+    var selectedYear = $(event.target).val();
+    slyelement.curRaces = processor.getRacesByYear(selectedYear);
+    $("#courseSelection").empty();
+    for(var race in slyelement.curRaces) {
+        var raceD = slyelement.curRaces[race];
+      $("#courseSelection").append("<li data=\"" + raceD.raceInfo.raceId + "\">" + raceD.raceInfo.name  +" " + raceD.raceInfo.date + "</li>");
+    }
+    $("#courseSelection li").click(function(event) {
+       var raceI = event.target.attributes.data.value;
+       var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0];
+       $("#lineGraphBox").empty();
+       createLineGraph("#lineGraphBox", rdata);
+    });
+    slyelement.obj.reload();    
+  });
+
+  $(window).resize(function(e) {
+    slyelement.obj.reload();
+  });
+
 });

js/processor.js

@@ -34,7 +34,17 @@ var processor = {
       //Attach Qualifying Data
       lapData.qualifying = processor.getQualifyingForDriver(raceData, driver);
       //add Qualifying Data to the Laps
-      var lap0 = {'driverId': driver.driverId, 'lap': 0, 'position': lapData.qualifying.position};                
+      var lap0 = {'driverId': driver.driverId, 'lap': 0};
+      // Figure out the position of that driver
+      if (lapData.qualifying !== undefined) {
+        // Use qualifying data, if available
+        lap0['position'] = lapData.qualifying.position;
+      } else {
+        // TODO: Easy fallback.
+        // Maybe just take result from first lap - Future: Perhaps leave out that data point at all
+        lap0['position'] = 0;
+      }
+
       var endResult = raceData.results.filter(res => res.driverId == driver.driverId && res.laps == 0);
       if(endResult.length > 0){
         lap0.finished = endResult[0];
@@ -55,6 +65,7 @@ var processor = {
           }
         });
       });
+      lapData.laps.sort((o1,o2) => o1["lap"] - o2["lap"]);
       result.push(lapData);
     });
     return result;
@@ -62,7 +73,9 @@ var processor = {
 
   getRacesByYear: function(year) {
     var races = queries.getRacesByYear(year);
-    return races.map(race => processor.getRace(race.raceId));
+    var racesUnsorted = races.map(race => processor.getRace(race.raceId));
+    racesUnsorted.sort((o1,o2) => o1["raceInfo"]["round"] - o2["raceInfo"]["round"]);
+    return racesUnsorted;
   },
 
   //Gets the position of Driver with driverid in specific lap

js/queries.js

@@ -117,7 +117,12 @@ var queries = {
 
   getRaceById: function(raceId){
     var rawData = preprocessor.getResults();
-    return rawData.races[raceId];
+    for(var key in rawData.races){
+        if(rawData.races[key].raceId == raceId){
+            return rawData.races[key];
+        }
+    }
+    return null;
   },
 
   getRacesByYear: function(year){