adds functionality to handle favourit filling stations

app/static/fillingstations.js

@@ -27,7 +27,6 @@ update_map = function() {
             map.getProjectionObject() // to Spherical Mercator Projection
         );
     map.setCenter (lonLat, zoom);
-    //load_filling_stations();
 }
 
 load_filling_stations = function() {
@@ -47,38 +46,59 @@ load_filling_stations = function() {
     });
 }
 
-clicked_on_filling_station_marker = function(station) {
-    return function() {
-        console.log(station)
-/*
-        var desc =  '<div>'+
-                    '<div class="row">' +
-                    '<div class="col-md-6" style="text-align: left;">' + station.brand + '</div>' +
-                    '<div class="col-md-3" style="text-align: left;">Super:</div>' +
-                    '<div class="col-md-3" style="text-align: left;">'+ station.e5 + '€</div>' +
-                    '</div>' +
-                    '<div class="row">' +
-                    '<div class="col-md-6" style="text-align: left;">' + station.name + '</div>' +
-                    '<div class="col-md-3" style="text-align: left;">Super E10:</div>' +
-                    '<div class="col-md-3" style="text-align: left;">'+ station.e10 + '€</div>' +
-                    '</div>' +
-                    '<div class="row">' +
-                    '<div class="col-md-6"  style="text-align: left;">' + station.street + ' ' + station.houseNumber + '</div>' +
-                    '<div class="col-md-3" style="text-align: left;">Diesel:</div>' +
-                    '<div class="col-md-3" style="text-align: left;">'+ station.diesel + '€</div>' +
-                    '</div>' +
-                    '<div class="row">' +
-                    '<div class="col-md-6"  style="text-align: left;">' + station.postCode + ' ' + station.place + '</div>' +
-                    '<div class="col-md-3" style="text-align: left;">Open:</div>' +
-                    '<div class="col-md-3" style="text-align: left;">'+ station.isOpen + '€</div>' +
-                    '</div>' +
-                    '</div>';
-        $('#station_info').empty();
-        $('#station_info').html(desc);
-*/
+clicked_on_filling_station_marker = function(station, marker) {
+    return function(data) {
+        console.log(station);
+        console.log(marker);
+        $.ajax({
+            type: 'GET',
+            url: '/filling_stations/favourites/toggle/'+station.id,
+            dataType: 'json',
+            timeout: 1000,
+            success: function(data) {
+                console.log(data);
+                if (data.state == 'favourite') {
+                    marker.setUrl('/static/filling_station_favourite_marker.png');
+                } else {
+                    marker.setUrl('/static/filling_station_marker.png');
+                }
+            },
+            contentType : 'application/json'
+        });
     }
 }
 
+display_station_information = function(station) {
+    return function(event) {
+        console.log(station);
+
+        var info = $('#station_info');
+        info.empty();
+        info.addClass('filling_station_info');
+
+        var cell1 = $('<div>', {'class':'col-md-8'})
+        var cell2 = $('<div>', {'class':'col-md-4'})
+
+        var img = $('<img>', {'src': '/static/logos/'+station.brand.toLowerCase()+'.png'});
+
+        var name = $('<div>').text(station.name);
+
+        var street_number = $('<div>').text(station.street + ' ' + station.houseNumber);
+
+        var postcode_place = $('<div>').text(station.postCode + ' ' + station.place);
+
+        info.append(cell1
+                .append(name)
+                .append(street_number)
+                .append(postcode_place))
+            .append(cell2
+                .append(img));
+
+        console.log(cell1.height())
+        cell2.height(cell1.height());
+    };
+}
+
 update_filling_station_markers = function() {
     for(id in filling_stations) {
         var station = filling_stations[id];
@@ -86,15 +106,23 @@ update_filling_station_markers = function() {
             console.log(station.id);
             var lonLat = new OpenLayers.LonLat(station.lng, station.lat)
                             .transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
-			var marker = new OpenLayers.Marker(lonLat);
-			marker.events.register('click', marker, clicked_on_filling_station_marker(station));
+            if (station.state == 'favourite') {
+                var icon = new OpenLayers.Icon('/static/filling_station_favourite_marker.png');
+            } else {
+                var icon = new OpenLayers.Icon('/static/filling_station_marker.png');
+            }
+			var marker = new OpenLayers.Marker(lonLat, icon);
+			marker.events.register('click', marker, clicked_on_filling_station_marker(station, marker));
+			marker.events.register('mouseover', null, display_station_information(station));
+			marker.events.register('mouseout', null, function(e){console.log('out');});
 			filling_station_markers.addMarker(marker);
             station.marker = true;
         }
     }
 }
 
-activate_map = function(map_div_id, button_ids, home_lat, home_long, home_zoom) {
+activate_map = function(map_div_id, button_ids, home_lat, home_long, home_zoom, init_stations) {
+
     // resize to reasonable height
     $('#' + map_div_id).css('height',0.75*($('#' + map_div_id).css('width')));
 
@@ -110,6 +138,11 @@ activate_map = function(map_div_id, button_ids, home_lat, home_long, home_zoom)
     });
     filling_station_markers = new OpenLayers.Layer.Markers('Filling Stations');
     map.addLayer(filling_station_markers);
+
+    // handle initial / favourite stations
+    filling_stations = init_stations;
+    update_filling_station_markers();
+
     update_map();
     if ((home_lat == 0) && (home_long == 0)) {
         query_location(update_map);
@@ -129,9 +162,6 @@ activate_map = function(map_div_id, button_ids, home_lat, home_long, home_zoom)
     // set home button
     $('#'+button_ids[1]).click(function(e){
         console.log('clicked set home');
-        console.log(lon);
-        console.log(lat);
-        console.log(zoom);
         $.ajax({
             type: 'POST',
             url: '/account/home',

app/static/main.css

@@ -92,4 +92,14 @@ and (max-device-width : 568px) {
     #charts_tabs-content {
         display:none;
     }
-}
+}
+
+.filling_station_info {
+    margin: 5px;
+    border: 1px solid;
+}
+
+.filling_station_info img{
+    margin-top: 6px;
+    height:48px;
+}