fixed #7 implementation of marker filtering by promotion available

src/static/js/modules/MapModule.js

@@ -8,7 +8,9 @@
 
 var MapModule = {
 	map : undefined,
-	cluster : L.markerClusterGroup({
+	control : L.control.layers(),
+	selectedPromos : [],
+	clusterGroup : L.markerClusterGroup({
 		iconCreateFunction: function (cluster) {
 			// get all markers of this cluster
 			var markers = cluster.getAllChildMarkers();
@@ -37,6 +39,15 @@ var MapModule = {
 		}
 	}),
 
+	newLocationIcon : function(){
+		return new L.DivIcon({
+			html: '<i class="material-icons">person_pin</i>',
+			className: 'marker-location',
+			popupAnchor:new L.Point(0, -40, false),
+			iconSize: new L.Point(40, 40, false)
+		})
+	},
+
 	init : function(){
 		this.map = L.map('mymap').setView(SETTINGS.GEOPOSITIONS.INSALYON)
 			.setMaxBounds([SETTINGS.GEOPOSITIONS.WORLD_SOUTHWEST, SETTINGS.GEOPOSITIONS.WORLD_NORTHEAST])
@@ -59,42 +70,104 @@ var MapModule = {
 		this.map.on('click', function(e) {
 			UtilsModule.logger("CLICK : Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng);
 		});
+
+		this.control.addTo(this.map);
+		$(MapModule.control.getContainer())
+			.find(".leaflet-control-layers-overlays")
+				.prepend("<h6>Promotions</h6>")
 	},
 
 	loadLocations : function(locations){
-		var locationMarker = new L.DivIcon({
-			html: '<i class="material-icons">person_pin</i>',
-			className: 'marker-location',
-			popupAnchor:new L.Point(0, -40, false),
-			iconSize: new L.Point(40, 40, false)
-		});
-
-		var _module = this;
+		var promotions = [];// array containing array of positions groupped by promotion
 		// add markers for locations of users
+
 		for (var i = 0; i < locations.length; i++) {
-			var location = locations[i].location;
-			var users = locations[i].users;
 
-			var popupText = "<h4>"+users.length+" Insalien"+((users.length>1)?"s":"")
-				+" à "+location.city+" "+location.country.toUpperCase()+"</h4><div class='popupUsers'>";
-			for (var j = 0; j < users.length; j++) {
-				popupText += UtilsModule.toTitleCase(users[j].firstname)+" "+UtilsModule.toTitleCase(users[j].lastname)+" <small> - IF "+users[j].promo+"</small><br>";
+			var marker = this.createMarker(locations[i]);
+			marker.addTo(this.clusterGroup)
+		};
+
+		this.map.addLayer(this.clusterGroup);
+	},
+
+	reloadLocations : function(locations){
+		this.clusterGroup.clearLayers()
+		this.loadLocations(locations);
+	},
+
+	getSelectedLocations : function(){
+		var _module = this;
+		var loc = [];
+		locations.forEach(function(val1, key1, arr1){
+			loc[key1] = {
+				location: val1.location,
+				users: val1.users.filter(function(user, key2, arr2){
+			    	return _module.selectedPromos.indexOf(user.promo) !== -1;
+				})
 			};
-			popupText += "</div>";
+		});
+		return loc.filter(function(val1, key1, arr1){
+			return arr1[key1].users.length > 0;
+		});
+	},
 
-			var marker = L.marker([location.lat, location.lon],{icon: locationMarker});
-			marker.nbIfs = users.length;
-			marker.addTo(this.cluster).bindPopup(popupText).on("click", function(e){
-				/*if(_module.map.getZoom() < 11){
-					_module.map.setView(this.getLatLng(), 11);
-				}
-				else{*/
-					_module.map.panTo(this.getLatLng());
-				//}
-			});
-			// ajouter des binds ?
+	createMarker : function(locationItem){
+		var location = locationItem.location;
+		var users = locationItem.users;
+		var popupText = "<h4>"+users.length+" Insalien"+((users.length>1)?"s":"")
+			+" à "+location.city+" "+location.country.toUpperCase()+"</h4><div class='popupUsers'>";
+		for (var j = 0; j < users.length; j++) {
+			popupText += UtilsModule.toTitleCase(users[j].firstname)+" "+UtilsModule.toTitleCase(users[j].lastname)+" <small> - IF "+users[j].promo+"</small><br>";
 		};
+		popupText += "</div>";
+
+		var marker = L.marker([location.lat, location.lon],{icon: this.newLocationIcon()});
+		marker.nbIfs = users.length;
+		var _module = this;
+		marker.bindPopup(popupText).on("click", function(e){
+			_module.map.panTo(this.getLatLng());
+		});
+		return marker;
+	},
 
-		this.map.addLayer(this.cluster);
+	// factice overlay selector
+	addPromoOverlayToControl: function(promotion){
+		if(typeof promotion !== "string" && typeof promotion !== "undefined" && promotion.toString){
+			promotion = promotion.toString();
+		}
+		var $selector = $('<label><input class="leaflet-control-layers-selector" type="checkbox" checked><span> '+promotion+'</span></label>');
+		var $selectorContainers = $(MapModule.control.getContainer()).find(".leaflet-control-layers-overlays");
+		var _module = this;
+		$selectorContainers.append($selector);
+		$selector.unbind();
+		$selector.find(".leaflet-control-layers-selector").on("change", function(e){
+			e.stopPropagation();
+			var index = _module.selectedPromos.indexOf(promotion);
+			if($(this).is(':checked')){
+				// add promotion
+				if(index === -1){
+					_module.selectedPromos.push(promotion);
+					_module.selectedPromos.sort();
+				}
+			}
+			else{
+				// remove promotion
+				if(index !== -1){
+					_module.selectedPromos.splice(index,1);
+				}
+			}
+			UtilsModule.logger(_module.selectedPromos);
+			_module.reloadLocations(_module.getSelectedLocations());
+		});
+		$selector.click(function(e){e.stopPropagation();});
+		_module.selectedPromos.push(promotion);
+	},
+
+	clearControl: function(){
+		var controlHTML = this.control.getContainer();
+		if(typeof controlHTML !== "undefined"){
+			$(controlHTML).find(".leaflet-control-layers-overlays").empty();
+		}
+		return this.control;
 	}
 };

src/static/js/pages/mapPage.js

@@ -1,8 +1,21 @@
 $(document).one("settings-loaded",function(){
 	/********* MAP *********/
-	
+
 	MapModule.init();
 
+	var promos = [];
+	locations.forEach(function(val1, key1, arr1){
+		val1.users.forEach(function(user, key2, arr2){
+			if(promos.indexOf(user.promo) === -1){
+				promos.push(user.promo);
+			}
+		});
+	});
+
+	promos.sort().forEach(function(year){
+		MapModule.addPromoOverlayToControl(year);
+	});
+
 	MapModule.loadLocations(locations);
 
 

src/templates/map.html

@@ -65,7 +65,6 @@ <h4>Trouver un lieu</h4>
 		{% endfor %}
 		// console.log(users);
 	#}
-	//cant "var connected = {{ session.user is defined }};" Because python and javascript boolean are different : "False" and "false"
 </script>
 {% endblock %}
 

src/utils/db.py

@@ -6,6 +6,7 @@
 # ------------------------------------------------------------------------------------------
 
 import re
+import json
 from sqlalchemy import create_engine
 from sqlalchemy import Column
 from sqlalchemy import Integer
@@ -16,7 +17,8 @@
 from sqlalchemy import Float
 from sqlalchemy import func
 from sqlalchemy import ForeignKey
-from sqlalchemy_utils import database_exists, create_database
+from sqlalchemy_utils import database_exists
+from sqlalchemy_utils import create_database
 from sqlalchemy.orm import sessionmaker
 from sqlalchemy.sql import exists
 from sqlalchemy.schema import MetaData