Choix du ou des lieux opé

avisstage/api.py

@@ -10,7 +10,7 @@ class LieuResource(ModelResource):
         queryset = Lieu.objects.all()
         resource_name = "lieu"
 
-    def build_filters(self, filters=None):
+    def build_filters(self, filters=None, **kwargs):
         if filters is None:
             filters = {}
 

avisstage/forms.py

@@ -41,6 +41,9 @@ class AvisLieuForm(HTMLTrimmerForm):
             "les_plus": u"Les meilleures raisons de partir à cet endroit",
             "les_moins": u"Ce qui vous a gêné ou manqué là-bas",
         }
+        widgets = {
+            "lieu": forms.HiddenInput(attrs={"class":"lieu-hidden"})
+        }
 
 class StageForm(forms.ModelForm):
     date_widget = forms.DateInput(attrs={"class":"datepicker"})

avisstage/sass/screen.scss

@@ -529,4 +529,11 @@ div.as-results {
         height: 400px;
         width: 100%;
     }
+    .hidden {
+        display: none;
+    }
+}
+
+#avis_lieu_vide {
+    display:none;
 }

avisstage/static/css/screen.css

@@ -599,3 +599,12 @@ div.as-results ul li.as-message {
   height: 400px;
   width: 100%;
 }
+/* line 532, ../../sass/screen.scss */
+.lieu-ui .hidden {
+  display: none;
+}
+
+/* line 537, ../../sass/screen.scss */
+#avis_lieu_vide {
+  display: none;
+}

avisstage/static/js/select_lieu.js

@@ -1,4 +1,4 @@
-function SelectLieuWidget(STATIC_ROOT, target, callback) {
+function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
     var map, input, autocomplete;
     var $el = $(target);
     var ui_el = $el.find('.lieu-ui');
@@ -6,6 +6,7 @@ function SelectLieuWidget(STATIC_ROOT, target, callback) {
     var content_el = $el.find('.window-content');
     var ui_ready = false;
     var lieux_db = {};
+    var message_el = $el.find(".lieu-message");
 
     form_el.detach();
     form_el.on("submit", nouveauLieu);
@@ -32,11 +33,34 @@ function SelectLieuWidget(STATIC_ROOT, target, callback) {
         autocomplete.addListener('place_changed', handlePlaceSearch);
     }
 
-    this.showWidget = function() {
+    function setLieuOrigine (lieu) {
+        map.panTo(lieu.coord);
+        lieuSurCarte(lieu, greenIcon);
+    }
+    
+    this.showWidget = function(lieu_id) {
         $el.addClass("visible").removeClass("ajout");
         if(!ui_ready)
             initUI();
+        ui_el.removeClass("hidden");
         form_el.detach();
+        if (lieu_id === undefined) {
+            $el.find("h3").text("Ajouter un lieu");
+        } else {
+            lieu_id = lieu_id * 1;
+            $el.find("h3").text("Modifier le lieu");
+            if(lieux_db[lieu_id] === undefined) {
+                $.getJSON(API_LIEU + lieu_id + "/?format=json",
+                          function(data) {
+                              lieux_db[data.id] = data;
+                              setLieuOrigine(data);
+                              askForSuggestions(data.coord);
+                          });
+                ui_el.addClass("hidden");
+            } else {
+                setLieuOrigine(lieux_db[lieu_id]);
+            }
+        }
     }
 
     this.closeWidget = function() {
@@ -92,9 +116,13 @@ function SelectLieuWidget(STATIC_ROOT, target, callback) {
         lieux_db.suggestion = data;
         
 		map.panTo(data.coord);
-        lieuSurCarte(data);
+        lieuSurCarte(data, redIcon);
         
         // Affichage des suggestions
+        askForSuggestions(location);
+    }
+
+    function askForSuggestions (location) {
         $.getJSON("/api/v1/lieu/", {"format":"json",
                                     "lat":location.lat,
                                     "lng":location.lng}, showPropositions);
@@ -102,23 +130,27 @@ function SelectLieuWidget(STATIC_ROOT, target, callback) {
 
     // Callback suggestions
     function showPropositions(data) {
-        // TODO gérer les appels concurrents
         $.each(data.objects, function(i, item) {
-            lieuSurCarte(item);
+            var plieu = lieux_db[item.id];
+            if(plieu !== undefined)
+                item = plieu;
+            else
+                lieux_db[item.id] = item;
+            lieuSurCarte(item, blueIcon);
         });
     }
 
-    function lieuSurCarte(data) {
+    function lieuSurCarte(data, icone) {
         // data : des données sur un lieu, sérialisé comme par tastypie
-        if(data.marqueur !== undefined)
+        if(data.marqueur !== undefined) {
-            data.marqueur.remove();
+            if(map.hasLayer(data.marqueur))
-
+                return;
-        var icone = blueIcon;
+        }
+        
         var fromSuggestion = false;
         
         // Si c'est un résultat d'autocomplete
         if(data.fromSuggestion === true) {
-            icone = redIcon;
             fromSuggestion = true;
         }
         var marqueur = L.marker(data.coord,

avisstage/templates/avisstage/formulaires/stage.html

@@ -66,17 +66,59 @@
          });
 
          // Widget du choix du lieu
-         var lieu_select = new SelectLieuWidget("{{ STATIC_URL|escapejs }}",
+         var lieu_select = new SelectLieuWidget(
-                                            $("#lieu_widget"), lieuChoisi);
+             "{{ STATIC_URL|escapejs }}",
-         $("#stage-addlieu").prop("_lieustage_data", "new")
+             "{% url 'avisstage:api_dispatch_list' resource_name="lieu" api_name="v1" %}",
-                            .on("click", lieu_select.showWidget);
+             $("#lieu_widget"), lieuChoisi);
+
+         var avis_lieu_template = $("#avis_lieu_vide").remove().html();
+         
+         var lieux_liste = $("#lieux-selector");
+         lieux_liste.find(".lieu-change")
+                    .on("click", clickLieu);
+         
          var lieu_focus;
          function clickLieu() {
-             lieu_focus = this;
+             var form_id = undefined;
-             lieu_select.showWidget();
+             var lieu_id = undefined;
+             if(this.id != "lieu-ajout") {
+                 form_id = this.id.split("-");
+                 form_id = form_id[form_id.length-1];
+                 var dest_form = $("#avis-lieux-"+form_id);
+                 lieu_id = dest_form.find("input.lieu-hidden").val();
+             }
+             lieu_focus = form_id;
+             
+             lieu_select.showWidget(lieu_id);
          }
+         
          function lieuChoisi(lieu) {
-             // TODO
+             var dest_form, dest_btn;
+             console.log(lieu);
+             console.log(lieu_focus);
+             if(lieu_focus === undefined) {
+                 // Créer un nouveau lieu
+                 var cnt = $("#id_lieux-TOTAL_FORMS");
+                 var i_form = cnt.val()*1;
+                 dest_form = $("<div>").html(avis_lieu_template.replace(/__prefix__/g, i_form));
+                 dest_btn = $("<a>", {href:"javascript:void(0);",
+                                      class:"lieu-change",
+                                      id:"change-lieux-"+i_form})
+                     .on("click", clickLieu);
+                 lieux_liste.children().last().before(dest_btn);
+                 
+                 cnt.val(i_form+1);
+                 $("#avis_lieu_container").append(dest_form);
+             } else {
+                 // Changer le lieu
+                 dest_form = $("#avis-lieux-"+lieu_focus);
+                 dest_btn = lieux_liste.find("#change-lieux-"+lieu_focus);
+             }
+             dest_form.find(".lieu-nom")
+                      .text(lieu.nom+" ("+lieu.ville+")");
+             dest_btn.text(lieu.nom+" ("+lieu.ville+")");
+             dest_form.find("input.lieu-hidden")
+                      .val(lieu.id);
              lieu_select.closeWidget();
          }
          
@@ -118,12 +160,14 @@
         {% endfor %}
         {# Lieux #}
         <div class="field">
-            <label>Lieux du stage</label>
+            <label>Lieu(x) du stage</label>
             <div class="input">
-                {% for fform in avis_lieu_formset %}
+                <div id="lieux-selector">
-                    {{ fform.lieu }}
+                    {% for fform in avis_lieu_formset %}
-                {% endfor %}
+                        <a id="change-{{ fform.prefix }}" class="lieu-change" href="javascript:void(0)">{{ fform.instance.lieu }}</a>
-                <a href="javascript:void(0);" id="stage-addlieu">Ajouter un lieu</a>
+                    {% endfor %}
+                    <a id="lieu-ajout" class="lieu-change ajout" href="javascript:void(0)">Ajouter un lieu</a>
+                </div>
             </div>
         </div>
         
@@ -147,40 +191,13 @@
         {{ avis_lieu_formset.management_form }}
         <div id="avis_lieu_container">
             {% for fform in avis_lieu_formset %}
-                <div class="avis_lieu">
+                <div class="avis_lieu" id="avis-{{ fform.prefix }}">
-                    <h2>Commentaire sur le lieu</h2>
+                    <h2>Commentaire sur le lieu "<span class="lieu-nom">{{ fform.instance.lieu }}</span>"</h2>
                     {{ fform.non_field_errors }}
                     {% for field in fform.hidden_fields %}
                         {{ field }}
                     {% endfor %}
                     {% for field in fform.visible_fields %}
-                        {% if not field.name == "lieu" %}
-                            {{ field.errors }}
-                            <div class="field">
-                                <div class="label">
-                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
-                                    {% if field.help_text %}
-                                        <p class="help_text">{{ field.help_text }}</p>
-                                    {% endif %}
-                                </div>
-                                <div class="input">
-                                    {{ field }}
-                                </div>
-                            </div>
-                        {% endif %}
-                    {% endfor %}
-                </div>
-            {% endfor %}
-        </div>
-        <div id="avis_lieu_vide">
-            {% with avis_lieu_formset.empty_form as fform %}
-                <h2>Commentaire sur le lieu</h2>
-                {{ fform.non_field_errors }}
-                {% for field in fform.hidden_fields %}
-                    {{ field }}
-                {% endfor %}
-                {% for field in fform.visible_fields %}
-                    {% if not field.name == "lieu" %}
                         {{ field.errors }}
                         <div class="field">
                             <div class="label">
@@ -193,7 +210,30 @@
                                 {{ field }}
                             </div>
                         </div>
-                    {% endif %}
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        </div>
+        <div id="avis_lieu_vide">
+            {% with avis_lieu_formset.empty_form as fform %}
+                <h2>Commentaire sur le lieu "<span class="lieu-nom"></span>"</h2>
+                {{ fform.non_field_errors }}
+                {% for field in fform.hidden_fields %}
+                    {{ field }}
+                {% endfor %}
+                {% for field in fform.visible_fields %}
+                    {{ field.errors }}
+                    <div class="field">
+                        <div class="label">
+                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+                            {% if field.help_text %}
+                                <p class="help_text">{{ field.help_text }}</p>
+                            {% endif %}
+                        </div>
+                        <div class="input">
+                            {{ field }}
+                        </div>
+                    </div>
                 {% endfor %}
             {% endwith %}
         </div>