Ajout de lieu presque fonctionnel

avisstage/templates/avisstage/formulaires/lieu_raw.html

@@ -11,6 +11,7 @@
         <link rel="stylesheet" type="text/css" href="{% static "css/leaflet.css" %}" />
     {% endblock %}
     
+    <p><input id="addlieu" type="text" placeholder="Chercher un établissement" /></p>
     <div id="map_addlieu"></div>
     <div id="candidats"></div>
     
@@ -29,42 +30,138 @@
     <input type="submit" />
     <script type="text/javascript">
      $(function(){
-         var map = L.map('map_addlieu').setView([51.505, -0.09], 13);
+         var STATIC_ROOT = "{{ STATIC_URL }}";
+
+         // Affiche la carte
+         var map = L.map('map_addlieu').setView([48.8422411,2.3430553], 13);
          var layer = new L.StamenTileLayer("terrain");
          map.addLayer(layer);
+         
+         // Autocomplete
+         var input = document.getElementById('addlieu');
+         var autocomplete = new google.maps.places.Autocomplete(input);
+         autocomplete.setTypes(["geocode", "establishment"]);
+         autocomplete.addListener('place_changed', handlePlaceSearch);
+
+         // Préparation de la suite
          var mainmarker;
-         var propositions = [];
+         var suggestion_actuelle;
+         var propositions_data = [];
+         var propositions_markers = [];
+         var choix_actuel;
 
-         new L.Control.GPlaceAutocomplete({
+         // Icones
-	         position: "topleft",
+         var iconProps = {
-	         callback: function(place){
+             iconSize: [36, 46],
-		         // object of google place is given
+             iconAnchor: [18, 45],
-                 var location = {lat: place.geometry.location.lat(),
+             popupAnchor: [0, -48]
-                                 lng: place.geometry.location.lng()};
+         };
-		         map.panTo(location);
+         var greenIcon = L.icon($.extend({}, iconProps, {iconUrl: STATIC_ROOT + 'images/marker-green.png'}));
-                 if(mainmarker===undefined)
+         var redIcon = L.icon($.extend({}, iconProps, {iconUrl: STATIC_ROOT + 'images/marker-red.png'}));
-                     mainmarker = L.marker(location, {draggable:true}).addTo(map);
+         var blueIcon = L.icon($.extend({}, iconProps, {iconUrl: STATIC_ROOT + 'images/marker-blue.png'}));
-                 else
-                     mainmarker.setLatLng(location);
-                 console.log(place);
-                 $.getJSON("/api/v1/lieu/", {"format":"json",
-                                             "lat":location.lat,
-                                             "lng":location.lng}, showPropositions);
-	         }
-         })
-              .addTo(map);
 
-         function showPropositions(data) {
+         // Callback autocomplete
-             $.each(propositions, function(i, item) { item.remove(); });
+         function handlePlaceSearch() {
-             propositions = [];
+             var place = autocomplete.getPlace();
-             $.each(data.objects, function(i, item) {
+             if (!place.geometry) {
-                 var mark = L.marker([item.coord.lat, item.coord.lng]);
+                 window.alert("No details available for input: '" + place.name + "'");
-                 mark.addTo(map).bindPopup("<b>"+item.nom+"</b><br />"+
+                 return;
-                                             item.ville+", "+item.pays);
+             }
-                 propositions.push(mark);
+
+             // Processing du lieu
+             var data = {};
+             $.each(place.address_components, function(i, obj) {
+                 for (var j=0; j<obj.types.length; j++) {
+                     switch(obj.types[j]) {
+                         case "locality":
+                             data.ville = obj.long_name;
+                             break;
+                         case "country":
+                             data.pays = obj.short_name;
+                             break;
+                     }
+                 }
              });
+             data.nom = place.name;
+             data.coord = {lng: place.geometry.location.lng(),
+                           lat: place.geometry.location.lat()};
+             data.orig_coord = data.coord;
+             suggestion_actuelle = data;
+             console.log(place);
+             
+             var location = data.coord;
+		     map.panTo(location);
+             
+             if(mainmarker===undefined) {
+                 mainmarker = L.marker(location,
+                                       {draggable: true,
+                                        icon: redIcon}).addTo(map);
+                 mainmarker.on("dragend", refreshSuggestedPosition);
+             } else
+                 mainmarker.setLatLng(location);
+             mainmarker.bindPopup(popupText(data, ""));
+
+             // Affichage des suggestions
+             $.getJSON("/api/v1/lieu/", {"format":"json",
+                                         "lat":location.lat,
+                                         "lng":location.lng}, showPropositions);
+             
+         }
+
+         // Callback suggestions
+         function showPropositions(data) {
+             // TODO gérer les appels concurrents
+             $.each(propositions_markers, function(i, item) { item.remove(); });
+             propositions_markers = [];
+             propositions_data = data.objects;
+             $.each(data.objects, function(i, item) {
+                 var mark = L.marker([item.coord.lat, item.coord.lng],
+                                     {icon: blueIcon});
+                 mark.addTo(map).bindPopup(popupText(item, i));
+                 propositions_markers.push(mark);
+             });
+         }
+
+         
+         function popupText(data, ilieu) {
+             var desc = "<div><b>" + data.nom +"</b><br />"+data.ville+", "+data.pays+"<br />";
+             if(ilieu !== "") {
+                 desc += "<a href=\"javascript:choixLieuStage("+ilieu+")\">Choisir ce lieu</a></div>"
+             } else {
+                 desc += "<a href=\"javascript:restoreSuggestedPosition()\">Restaurer la position originale</a><br/>"
+                 desc += "<a href=\"javascript:choixLieuStage()\">Créer un nouveau lieu</a></div>"
+             }
+             return desc;
+         }
+
+         function refreshSuggestedPosition() {
+             var coord = mainmarker.getLatLng();
+             suggestion_actuelle.coord = {lat:coord.lat, lng:coord.lng};
+             if (choix_actuel == suggestion_actuelle) {
+                 $("#id_coord_0").val(choix_actuel.coord.lat);
+                 $("#id_coord_1").val(choix_actuel.coord.lng);
+             }
+         }
+
+         window.restoreSuggestedPosition = function() {
+             mainmarker.setLatLng(suggestion_actuelle.orig_coord);
+             refreshSuggestedPosition();
+         }
+
+         window.choixLieuStage = function(ilieu) {
+             var choix;
+             if(ilieu === undefined)
+                 choix = suggestion_actuelle;
+             else
+                 choix = propositions_data[ilieu];
+             $("#id_nom").val(choix.nom);
+             $("#id_ville").val(choix.ville);
+             $("#id_pays").val(choix.pays);
+             $("#id_coord_0").val(choix.coord.lat);
+             $("#id_coord_1").val(choix.coord.lng);
+             choix_actuel = choix;
          }
      });
      
-    </script>
+        </script>
 </form>