Added course images. On click event broken =(

cors_webserver.py

@@ -1,19 +0,0 @@
-#!/usr/bin/env python3
-try:
-    # Python 3
-    from http.server import HTTPServer, SimpleHTTPRequestHandler, test as test_orig
-    import sys
-    def test (*args):
-        test_orig(*args, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
-except ImportError: # Python 2
-    from BaseHTTPServer import HTTPServer, test
-    from SimpleHTTPServer import SimpleHTTPRequestHandler
-
-class CORSRequestHandler (SimpleHTTPRequestHandler):
-    def end_headers (self):
-        self.send_header('Access-Control-Allow-Origin', '*')
-        SimpleHTTPRequestHandler.end_headers(self)
-
-if __name__ == '__main__':
-    test(CORSRequestHandler, HTTPServer)
-

css/main.css

@@ -39,7 +39,7 @@ body {
 
 .frame { width: 100%; height: 160px; padding: 0; }
 .frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
-.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px; height: 100%; }
+.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 150px; height: 100%; }
 
 .scrollbar {
     width: 100%;
@@ -55,3 +55,22 @@ body {
 .slidee li {
     border: 1px solid black;
 }
+
+.coursename {
+    font-size: 8pt;
+    font-weight: bold;
+}
+
+.courseimagecontainer {
+    height: 75%;
+    width: 100%;
+    height: 7em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.courseimage {
+    margin-left: auto;
+    margin-right: auto;
+}

js/main.js

@@ -49,7 +49,20 @@ preprocessor.load(function(data) {
     $("#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>");
+        
+        var url = raceD.raceInfo.url;
+        var pathName = url.substring(url.lastIndexOf("/")+1);
+        getImageFromWikipedia(raceD,pathName,100,(raceD1,imageURL) => {
+            $("#courseSelection").append("<li data=\"" + raceD1.raceInfo.raceId + "\">" +
+                "<span class=\"coursename\">" + raceD1.raceInfo.name  +"</span>"+
+                    "<div class=courseimagecontainer>" +
+                        "<img src=\"" + imageURL + "\"class=\"courseimage\"/> "
+                    + "</div>"
+                    + raceD1.raceInfo.date.toLocaleDateString("en-US") +                 
+                "</li>");
+            slyelement.obj.reload();
+        });
+      
     }
     $("#courseSelection li").click(function(event) {
        var raceI = event.target.attributes.data.value;
@@ -57,7 +70,7 @@ preprocessor.load(function(data) {
        $("#lineGraphBox").empty();
        createLineGraph("#lineGraphBox", rdata);
     });
-    slyelement.obj.reload();    
+    slyelement.obj.reload();
   });
 
   $(window).resize(function(e) {

js/util.js

@@ -118,3 +118,32 @@ function getColorValue(index, all){
 
   return "hsl(" + colorValue + ", " + 100 + "%, 35% )";
 }
+
+/**
+
+data - own user data
+pagename - the page where the image will be taken from
+imagesize - target image size
+callback(data,imageURL) - callback that will be called. Arguments are the provided
+                          user data (data) and the final imageURL.
+
+**/
+function getImageFromWikipedia(data,pageName,imagesize,callback){
+    $.ajax({
+        url: "https://en.wikipedia.org/w/api.php",
+        data: {
+            format: "json",
+            action: "query",
+            titles: pageName,
+            prop:"pageimages",
+            pithumbsize:imagesize,
+        },
+        dataType: 'jsonp',
+        success: function (dataResult) {
+    		for(var key in dataResult.query.pages){
+        	    var d = dataResult.query.pages[key];
+                callback(data,d.thumbnail.source);
+            }
+        }
+    });
+};