From a2109cbb9d45913031ec9f9a47ec1c44c8da0019 Mon Sep 17 00:00:00 2001 From: Evarin Date: Wed, 19 Apr 2017 01:56:15 +0200 Subject: [PATCH] =?UTF-8?q?Choix=20du=20ou=20des=20lieux=20op=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- avisstage/api.py | 2 +- avisstage/forms.py | 3 + avisstage/sass/screen.scss | 7 + avisstage/static/css/screen.css | 9 ++ avisstage/static/js/select_lieu.js | 54 ++++++-- .../avisstage/formulaires/stage.html | 124 ++++++++++++------ 6 files changed, 145 insertions(+), 54 deletions(-) diff --git a/avisstage/api.py b/avisstage/api.py index 29c1ac7..6c05c34 100644 --- a/avisstage/api.py +++ b/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 = {} diff --git a/avisstage/forms.py b/avisstage/forms.py index c66b394..45dfb84 100644 --- a/avisstage/forms.py +++ b/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"}) diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss index b43c2de..bc7c3ff 100644 --- a/avisstage/sass/screen.scss +++ b/avisstage/sass/screen.scss @@ -529,4 +529,11 @@ div.as-results { height: 400px; width: 100%; } + .hidden { + display: none; + } +} + +#avis_lieu_vide { + display:none; } diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index cd35435..8860e04 100644 --- a/avisstage/static/css/screen.css +++ b/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; +} diff --git a/avisstage/static/js/select_lieu.js b/avisstage/static/js/select_lieu.js index afc4a3c..7cd6962 100644 --- a/avisstage/static/js/select_lieu.js +++ b/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) - data.marqueur.remove(); - - var icone = blueIcon; + if(data.marqueur !== undefined) { + if(map.hasLayer(data.marqueur)) + return; + } + 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, diff --git a/avisstage/templates/avisstage/formulaires/stage.html b/avisstage/templates/avisstage/formulaires/stage.html index 391a44b..825f3c3 100644 --- a/avisstage/templates/avisstage/formulaires/stage.html +++ b/avisstage/templates/avisstage/formulaires/stage.html @@ -66,17 +66,59 @@ }); // Widget du choix du lieu - var lieu_select = new SelectLieuWidget("{{ STATIC_URL|escapejs }}", - $("#lieu_widget"), lieuChoisi); - $("#stage-addlieu").prop("_lieustage_data", "new") - .on("click", lieu_select.showWidget); + var lieu_select = new SelectLieuWidget( + "{{ STATIC_URL|escapejs }}", + "{% url 'avisstage:api_dispatch_list' resource_name="lieu" api_name="v1" %}", + $("#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; - lieu_select.showWidget(); + var form_id = undefined; + 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 = $("
").html(avis_lieu_template.replace(/__prefix__/g, i_form)); + dest_btn = $("", {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 #}
- +
- {% for fform in avis_lieu_formset %} - {{ fform.lieu }} - {% endfor %} - Ajouter un lieu +
+ {% for fform in avis_lieu_formset %} + {{ fform.instance.lieu }} + {% endfor %} + Ajouter un lieu +
@@ -147,40 +191,13 @@ {{ avis_lieu_formset.management_form }}
{% for fform in avis_lieu_formset %} -
-

Commentaire sur le lieu

+
+

Commentaire sur le lieu "{{ fform.instance.lieu }}"

{{ 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 }} -
-
- - {% if field.help_text %} -

{{ field.help_text }}

- {% endif %} -
-
- {{ field }} -
-
- {% endif %} - {% endfor %} -
- {% endfor %} -
-
- {% with avis_lieu_formset.empty_form as fform %} -

Commentaire sur le lieu

- {{ 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 }}
@@ -193,7 +210,30 @@ {{ field }}
- {% endif %} + {% endfor %} +
+ {% endfor %} +
+
+ {% with avis_lieu_formset.empty_form as fform %} +

Commentaire sur le lieu ""

+ {{ fform.non_field_errors }} + {% for field in fform.hidden_fields %} + {{ field }} + {% endfor %} + {% for field in fform.visible_fields %} + {{ field.errors }} +
+
+ + {% if field.help_text %} +

{{ field.help_text }}

+ {% endif %} +
+
+ {{ field }} +
+
{% endfor %} {% endwith %}