diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss index 01416dc..b43c2de 100644 --- a/avisstage/sass/screen.scss +++ b/avisstage/sass/screen.scss @@ -482,3 +482,51 @@ div.as-results { #map_addlieu { height: 500px; } + +.window { + display:none; + position:fixed; + width: 100%; + height: 100%; + overflow: hidden; + top: 0; + left: 0; + z-index: 10; + + &.visible { + display:block; + } + + .window-bg { + background: #000; + opacity: 0.7; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: -1; + } + + .window-content { + position: relative; + margin: 0 auto; + padding: 20px; + margin-top: 50vh; + transform: translateY(-50%); + z-index: 1; + background: #eee; + max-width: 600px; + width: 90%; + max-height: 100%; + overflow: auto; + + } +} + +.lieu-ui { + .map { + height: 400px; + width: 100%; + } +} diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index fdb212a..cd35435 100644 --- a/avisstage/static/css/screen.css +++ b/avisstage/static/css/screen.css @@ -552,3 +552,50 @@ div.as-results ul li.as-message { #map_addlieu { height: 500px; } + +/* line 486, ../../sass/screen.scss */ +.window { + display: none; + position: fixed; + width: 100%; + height: 100%; + overflow: hidden; + top: 0; + left: 0; + z-index: 10; +} +/* line 496, ../../sass/screen.scss */ +.window.visible { + display: block; +} +/* line 500, ../../sass/screen.scss */ +.window .window-bg { + background: #000; + opacity: 0.7; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: -1; +} +/* line 511, ../../sass/screen.scss */ +.window .window-content { + position: relative; + margin: 0 auto; + padding: 20px; + margin-top: 50vh; + transform: translateY(-50%); + z-index: 1; + background: #eee; + max-width: 600px; + width: 90%; + max-height: 100%; + overflow: auto; +} + +/* line 528, ../../sass/screen.scss */ +.lieu-ui .map { + height: 400px; + width: 100%; +} diff --git a/avisstage/static/js/select_lieu.js b/avisstage/static/js/select_lieu.js new file mode 100644 index 0000000..afc4a3c --- /dev/null +++ b/avisstage/static/js/select_lieu.js @@ -0,0 +1,194 @@ +function SelectLieuWidget(STATIC_ROOT, target, callback) { + var map, input, autocomplete; + var $el = $(target); + var ui_el = $el.find('.lieu-ui'); + var form_el = $el.find('form'); + var content_el = $el.find('.window-content'); + var ui_ready = false; + var lieux_db = {}; + + form_el.detach(); + form_el.on("submit", nouveauLieu); + + function initUI(){ + $.each(ui_el.children(), function(i, item){$(item).remove();}); + + var map_el = $("
", {class: "map"}); + input = $("", + {type:"text", + placeholder:"Chercher un établissement..."}); + + ui_el.append(input); + ui_el.append(map_el); + + // Affiche la carte + map = L.map(map_el[0]).setView([48.8422411,2.3430553], 13); + var layer = new L.StamenTileLayer("terrain"); + map.addLayer(layer); + + // Autocomplete + autocomplete = new google.maps.places.Autocomplete(input[0]); + autocomplete.setTypes(["geocode", "establishment"]); + autocomplete.addListener('place_changed', handlePlaceSearch); + } + + this.showWidget = function() { + $el.addClass("visible").removeClass("ajout"); + if(!ui_ready) + initUI(); + form_el.detach(); + } + + this.closeWidget = function() { + $el.removeClass("visible"); + } + + // Icones + function makeIcon(couleur){ + return L.icon({ + iconUrl: STATIC_ROOT + 'images/marker-'+couleur+'.png', + iconSize: [36, 46], + iconAnchor: [18, 45], + popupAnchor: [0, -48] + }) + } + var greenIcon = makeIcon('green'); + var redIcon = makeIcon('red'); + var blueIcon = makeIcon('blue'); + + // Callback de l'autocomplete + function handlePlaceSearch() { + var place = autocomplete.getPlace(); + if (!place.geometry) { + return; + } + console.log(place); + + if (lieux_db.suggestion !== undefined) { + lieux_db.suggestion.marqueur.remove(); + lieux_db.suggestion = undefined; + } + + // Processing du lieu + var data = {}; + $.each(place.address_components, function(i, obj) { + for (var j=0; j").append($("

").text(data.nom)) + .append($("

").text(data.ville+", "+data.pays)); + var activeBtn = $("", {href:"javascript:void(0);"}) + .prop("_lieustage_data", data) + .on("click", choixLieuStage); + + if(!fromSuggestion) { + activeBtn.text("Choisir ce lieu"); + } else { + var resetBtn = $("", {href:"javascript:void(0);"}) + .text("Réinitialiser la position") + .prop("_lieustage_data", data) + .on("click", resetOrigLieu); + desc.append($("

").append(resetBtn)) + activeBtn.text("Créer un nouveau lieu ici"); + } + desc.append($("

").append(activeBtn)); + + marqueur.bindPopup(desc[0]).addTo(map); + } + + function resetOrigLieu() { + var data = this._lieustage_data; + data.marqueur.setLatLng(data.orig_coord); + map.panTo(data.orig_coord); + } + + function choixLieuStage() { + var choix = this._lieustage_data; + if(!choix.fromSuggestion) + callback(choix); + else + showForm(choix); + } + + function showForm(choix) { + $el.addClass("ajout"); + content_el.append(form_el); + form_el.find("#id_nom").val(choix.nom); + form_el.find("#id_ville").val(choix.ville); + form_el.find("#id_pays").val(choix.pays); + form_el.find("#id_coord_0").val(choix.coord.lat); + form_el.find("#id_coord_1").val(choix.coord.lng); + } + + function nouveauLieu() { + var coord = lieux_db.suggestion.marqueur.getLatLng(); + form_el.find("#id_coord_0").val(coord.lat); + form_el.find("#id_coord_1").val(coord.lng); + $.post(form_el.attr("action")+"?format=json", + form_el.serialize(), + onLieuCreated); + form_el.detach(); + content_el.append($("

").text("Envoi en cours...")); + return false; + } + + function onLieuCreated(data) { + console.log(data); + if(data.success = false) + content_el.append(form_el); + else { + lieux_db.suggestion.id = data.id; + callback(lieux_db.suggestion); + } + } +} diff --git a/avisstage/templates/avisstage/formulaires/stage.html b/avisstage/templates/avisstage/formulaires/stage.html index 557923f..391a44b 100644 --- a/avisstage/templates/avisstage/formulaires/stage.html +++ b/avisstage/templates/avisstage/formulaires/stage.html @@ -1,19 +1,18 @@ {% extends "avisstage/base.html" %} -{% load staticfiles %} +{% load staticfiles avisstage_tags %} {% block extra_head %} - - - + + + + + + +