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

.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,6 +2,7 @@
 
 // https://bl.ocks.org/mbostock/3884955
 function createLineGraph(containerId, raceData){
+
   // Rough input validation
   if(raceData.raceInfo === undefined) {
     console.error(["Sorry, that raceData is empty. :-(", raceData]);
@@ -11,7 +12,7 @@ function createLineGraph(containerId, raceData){
   }
 
   var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
-  console.log(enhancedLapData);
+
 
   // Configuration
   var height = 720;
@@ -109,7 +110,7 @@ function createLineGraph(containerId, raceData){
       d3.axisLeft(y)
         .ticks(raceData.drivers.length)
         .tickFormat(function(d) {
-          console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d);
+          //console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d);
           return getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d;
         })
     );
@@ -119,7 +120,7 @@ function createLineGraph(containerId, raceData){
         d3.axisRight(y)
           .ticks(raceData.drivers.length)
           .tickFormat(function(d) {
-            console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d);
+            //console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d);
             return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ;
           })
       )

js/main.js

@@ -4,11 +4,10 @@
  * 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 = {
+var slyelement = {
+  obj: {},
+  el: '.frame',
+  options: {
    horizontal: 1,
 	itemNav: 'basic',
 	smart: 1,
@@ -17,22 +16,51 @@ preprocessor.load(function(data) {
 	touchDragging: 1,
 	releaseSwing: 1,
 	startAt: 3,
-			scrollBar: $wrap.find('.scrollbar'),
+	scrollBar: $('.strecken-selector').parent().find('.scrollbar'),
 	scrollBy: 1,
-			pagesBar: $wrap.find('.pages'),
+	pagesBar: $('.strecken-selector').parent().find('.pages'),
 	activatePageOn: 'click',
 	speed: 300,
 	elasticBounds: 1,
 	dragHandle: 1,
 	dynamicHandle: 1,
 	clickBar: 1,
+  }
 };
-    $('.frame').sly(options);
+
+
+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));
+  // Someone chose a year
+  yearSelector.change(function(event) {
+    var selectedYear = $(event.target).val();
+    var races = processor.getRacesByYear(selectedYear);
+    $("#courseSelection").empty();
+    for(var race in races) {      
+      $("#courseSelection").append("<li data=\"" + races[race].raceInfo.raceId + "\">" + races[race].raceInfo.name  +" " + races[race].raceInfo.date + "</li>");
+    }
+    $("#courseSelection li").click(function(event) {
+       var race = event.target.attributes.data.value;
+       $("#lineGraphBox").empty();
+       createLineGraph("#lineGraphBox", processor.getRace(race));
+    });
+    slyelement.obj.reload();
+    var raceData = races[0];
+    
+  });
+
+  $(window).resize(function(e) {
+    slyelement.obj.reload();
+  });
+
 });

js/processor.js

@@ -72,7 +72,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

@@ -112,7 +112,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){