From 5275e9036a462541e38acb5db50fa6f212061fc0 Mon Sep 17 00:00:00 2001
From: Evarin <bonjour@robin-champenois.fr>
Date: Sun, 30 Dec 2018 20:33:44 +0100
Subject: [PATCH] Formulaire choix de lieu plus clair

---
 avisstage/api.py                              |   8 +-
 avisstage/sass/screen.scss                    |  98 ++++++-
 avisstage/static/css/screen.css               | 242 ++++++++++++------
 avisstage/static/js/select_lieu.js            |  98 +++++--
 avisstage/templates/avisstage/base.html       |   5 +-
 .../avisstage/formulaires/stage.html          |   2 +-
 .../avisstage/templatetags/widget_lieu.html   |  17 +-
 avisstage/utils.py                            |  10 +
 8 files changed, 361 insertions(+), 119 deletions(-)

diff --git a/avisstage/api.py b/avisstage/api.py
index 9738ce2..a1e4c0e 100644
--- a/avisstage/api.py
+++ b/avisstage/api.py
@@ -8,6 +8,7 @@ from django.contrib.gis import geos
 from django.urls import reverse
 
 from .models import Lieu, Stage, Normalien, StageMatiere
+from .utils import approximate_distance
 
 class EnScolariteAuthentication(SessionAuthentication):
     def is_authenticated(self, request, **kwargs):
@@ -60,9 +61,10 @@ class LieuResource(ModelResource):
         bundle.data['coord'] = {'lat': float(obj.coord.y),
                                 'lng': float(obj.coord.x)}
 
-        # Distance au point recherché (inutile en fait)
-        #if "lat" in bundle.request.GET and "lng" in bundle.request.GET:
-        #    bundle.data['distance'] = self.reference_point.distance(bundle.obj.coord)
+        # Distance au point recherché
+        if "lat" in bundle.request.GET and "lng" in bundle.request.GET:
+            bundle.data['distance'] = approximate_distance(
+                self.reference_point, bundle.obj.coord)
         
         # Autres infos utiles
         bundle.data["pays_nom"] = obj.get_pays_display()
diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss
index 39c8320..9147b3a 100644
--- a/avisstage/sass/screen.scss
+++ b/avisstage/sass/screen.scss
@@ -270,19 +270,19 @@ p.warning {
                 }
             }
         }
-        
-        a.hoverlink {
-            position: absolute;
-            display: block;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-        }
     }
 }
 
+a.hoverlink {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+
 ul.infos {
     margin: 0 -3px;
     padding: 0;
@@ -516,15 +516,20 @@ form {
 
 // taggit autosuggest
 
-ul.as-selections {
+ul.as-selections,
+.selectize-control.multi {
     display: flex;
     flex-wrap: wrap;
 
     li {
         display:inline-block;
     }
-    
-    .as-selection-item {
+    .selectize-input, .selectize-dropdown {
+        font-size: 100%;
+        line-height: 1.1;
+    }
+    .as-selection-item,
+    .selectize-input > div {
         padding: 0 5px;
         background: $compl;
         color: #fff;
@@ -648,8 +653,16 @@ div.as-results {
 // Widget choix et ajout de lieux
 
 #lieu_widget {
+    .window-content {
+        max-width: 800px;
+    }
+    
     .lieu-ui {
         position: relative;
+        width: 100%;
+        min-width: 150px;
+        flex: 2;
+        
         .map {
             height: 400px;
             width: 100%;
@@ -662,9 +675,66 @@ div.as-results {
         }
     }
 
-    .lieu-choixmodif {
+    .lieu-choixmodif, .lieu-options {
         display: none;
     }
+    
+    .lieu-global {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        &.with-options {
+            .lieu-options {
+                display: block;
+            }
+        }
+    }
+
+    &.modif, &.edit {
+        .lieu-global.with-options .lieu-options {
+            display: none;
+        }
+    }
+
+    .lieu-options {
+        padding: 7px;
+        max-width: 350px;
+        flex: 3;
+        
+        .lieu-suggestions {
+            max-height: 300px;
+            overflow-y: auto;
+            
+            li {
+                position: relative;
+                background: #fff;
+                margin: 2px;
+                padding: 4px;
+                font-size: 0.9em;
+                &:hover {
+                    background: #ccc;
+                }
+                p {
+                    margin: 2px 0;
+                }
+                .lieu-nom {
+                    font-weight: bold;
+                }
+                .lieu-infos {
+                    font-size: 0.8em;
+                    display:flex;
+                    width: 100%;
+                    justify-content: space-between;
+                    
+                    span {
+                        display: inline-block;
+                        text-overflow: ellipsis;
+                        overlow: hidden;
+                    }
+                }
+            }
+        }
+    }
 
     &.modif {
         .lieu-choixmodif {
diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css
index eccdbed..0acc127 100644
--- a/avisstage/static/css/screen.css
+++ b/avisstage/static/css/screen.css
@@ -399,8 +399,9 @@ p.warning {
 .stage-liste li .misc-hdr .dates svg text {
   font-size: 0.8;
 }
-/* line 274, ../../sass/screen.scss */
-.stage-liste li a.hoverlink {
+
+/* line 276, ../../sass/screen.scss */
+a.hoverlink {
   position: absolute;
   display: block;
   top: 0;
@@ -929,16 +930,28 @@ form .field .input {
 }
 
 /* line 519, ../../sass/screen.scss */
-ul.as-selections {
+ul.as-selections,
+.selectize-control.multi {
   display: flex;
   flex-wrap: wrap;
 }
-/* line 523, ../../sass/screen.scss */
-ul.as-selections li {
+/* line 524, ../../sass/screen.scss */
+ul.as-selections li,
+.selectize-control.multi li {
   display: inline-block;
 }
 /* line 527, ../../sass/screen.scss */
-ul.as-selections .as-selection-item {
+ul.as-selections .selectize-input, ul.as-selections .selectize-dropdown,
+.selectize-control.multi .selectize-input,
+.selectize-control.multi .selectize-dropdown {
+  font-size: 100%;
+  line-height: 1.1;
+}
+/* line 531, ../../sass/screen.scss */
+ul.as-selections .as-selection-item,
+ul.as-selections .selectize-input > div,
+.selectize-control.multi .as-selection-item,
+.selectize-control.multi .selectize-input > div {
   padding: 0 5px;
   background: #f99b20;
   color: #fff;
@@ -946,53 +959,61 @@ ul.as-selections .as-selection-item {
   border-radius: 2px;
   font-weight: 500;
 }
-/* line 535, ../../sass/screen.scss */
-ul.as-selections .as-selection-item a.as-close {
+/* line 540, ../../sass/screen.scss */
+ul.as-selections .as-selection-item a.as-close,
+ul.as-selections .selectize-input > div a.as-close,
+.selectize-control.multi .as-selection-item a.as-close,
+.selectize-control.multi .selectize-input > div a.as-close {
   color: #fff;
   -webkit-cursor: pointer;
   cursor: pointer;
   margin-right: 5px;
 }
-/* line 542, ../../sass/screen.scss */
-ul.as-selections .as-selection-item.selected {
+/* line 547, ../../sass/screen.scss */
+ul.as-selections .as-selection-item.selected,
+ul.as-selections .selectize-input > div.selected,
+.selectize-control.multi .as-selection-item.selected,
+.selectize-control.multi .selectize-input > div.selected {
   background: #8fcc33;
 }
-/* line 547, ../../sass/screen.scss */
-ul.as-selections .as-original {
+/* line 552, ../../sass/screen.scss */
+ul.as-selections .as-original,
+.selectize-control.multi .as-original {
   flex-grow: 1;
   min-width: 200px;
 }
-/* line 551, ../../sass/screen.scss */
-ul.as-selections .as-original input {
+/* line 556, ../../sass/screen.scss */
+ul.as-selections .as-original input,
+.selectize-control.multi .as-original input {
   width: 100%;
 }
 
-/* line 557, ../../sass/screen.scss */
+/* line 562, ../../sass/screen.scss */
 div.as-results {
   position: relative;
   z-index: 2;
 }
-/* line 561, ../../sass/screen.scss */
+/* line 566, ../../sass/screen.scss */
 div.as-results ul {
   position: absolute;
   width: 100%;
   background: #fff;
   border: 1px solid #d2ebad;
 }
-/* line 568, ../../sass/screen.scss */
+/* line 573, ../../sass/screen.scss */
 div.as-results ul li {
   padding: 3px 5px;
 }
-/* line 574, ../../sass/screen.scss */
+/* line 579, ../../sass/screen.scss */
 div.as-results ul li.as-result-item.active {
   background: #fddeb5;
 }
-/* line 579, ../../sass/screen.scss */
+/* line 584, ../../sass/screen.scss */
 div.as-results ul li.as-message {
   font-style: italic;
 }
 
-/* line 589, ../../sass/screen.scss */
+/* line 594, ../../sass/screen.scss */
 .window {
   display: none;
   position: fixed;
@@ -1003,11 +1024,11 @@ div.as-results ul li.as-message {
   left: 0;
   z-index: 50;
 }
-/* line 599, ../../sass/screen.scss */
+/* line 604, ../../sass/screen.scss */
 .window.visible {
   display: block;
 }
-/* line 603, ../../sass/screen.scss */
+/* line 608, ../../sass/screen.scss */
 .window .window-bg {
   background: #000;
   opacity: 0.7;
@@ -1018,7 +1039,7 @@ div.as-results ul li.as-message {
   top: 0;
   z-index: -1;
 }
-/* line 614, ../../sass/screen.scss */
+/* line 619, ../../sass/screen.scss */
 .window .window-content {
   position: relative;
   margin: 0 auto;
@@ -1032,11 +1053,11 @@ div.as-results ul li.as-message {
   max-height: 100%;
   overflow: auto;
 }
-/* line 628, ../../sass/screen.scss */
+/* line 633, ../../sass/screen.scss */
 .window .window-content form label, .window .window-content form .label {
   width: 150px;
 }
-/* line 634, ../../sass/screen.scss */
+/* line 639, ../../sass/screen.scss */
 .window .window-closer {
   position: absolute;
   top: 0;
@@ -1044,65 +1065,130 @@ div.as-results ul li.as-message {
   padding: 12px;
   z-index: 3;
 }
-/* line 640, ../../sass/screen.scss */
+/* line 645, ../../sass/screen.scss */
 .window .window-closer:after {
   content: "×";
 }
 
-/* line 651, ../../sass/screen.scss */
+/* line 656, ../../sass/screen.scss */
+#lieu_widget .window-content {
+  max-width: 800px;
+}
+/* line 660, ../../sass/screen.scss */
 #lieu_widget .lieu-ui {
   position: relative;
+  width: 100%;
+  min-width: 150px;
+  flex: 2;
 }
-/* line 653, ../../sass/screen.scss */
+/* line 666, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .map {
   height: 400px;
   width: 100%;
 }
-/* line 657, ../../sass/screen.scss */
+/* line 670, ../../sass/screen.scss */
 #lieu_widget .lieu-ui.hidden {
   display: none;
 }
-/* line 660, ../../sass/screen.scss */
+/* line 673, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .masked {
   visibility: hidden;
 }
-/* line 665, ../../sass/screen.scss */
-#lieu_widget .lieu-choixmodif {
-  display: none;
-}
-/* line 670, ../../sass/screen.scss */
-#lieu_widget.modif .lieu-choixmodif {
-  display: unset;
-}
-/* line 675, ../../sass/screen.scss */
-#lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
+/* line 678, ../../sass/screen.scss */
+#lieu_widget .lieu-choixmodif, #lieu_widget .lieu-options {
   display: none;
 }
 /* line 682, ../../sass/screen.scss */
+#lieu_widget .lieu-global {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+/* line 687, ../../sass/screen.scss */
+#lieu_widget .lieu-global.with-options .lieu-options {
+  display: block;
+}
+/* line 694, ../../sass/screen.scss */
+#lieu_widget.modif .lieu-global.with-options .lieu-options, #lieu_widget.edit .lieu-global.with-options .lieu-options {
+  display: none;
+}
+/* line 699, ../../sass/screen.scss */
+#lieu_widget .lieu-options {
+  padding: 7px;
+  max-width: 350px;
+  flex: 3;
+}
+/* line 704, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions {
+  max-height: 300px;
+  overflow-y: auto;
+}
+/* line 708, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions li {
+  position: relative;
+  background: #fff;
+  margin: 2px;
+  padding: 4px;
+  font-size: 0.9em;
+}
+/* line 714, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions li:hover {
+  background: #ccc;
+}
+/* line 717, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions li p {
+  margin: 2px 0;
+}
+/* line 720, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions li .lieu-nom {
+  font-weight: bold;
+}
+/* line 723, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions li .lieu-infos {
+  font-size: 0.8em;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+/* line 729, ../../sass/screen.scss */
+#lieu_widget .lieu-options .lieu-suggestions li .lieu-infos span {
+  display: inline-block;
+  text-overflow: ellipsis;
+  overlow: hidden;
+}
+/* line 740, ../../sass/screen.scss */
+#lieu_widget.modif .lieu-choixmodif {
+  display: unset;
+}
+/* line 745, ../../sass/screen.scss */
+#lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
+  display: none;
+}
+/* line 752, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .lieu-acinput {
   display: none;
 }
-/* line 685, ../../sass/screen.scss */
+/* line 755, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .map {
   height: 200px;
 }
-/* line 691, ../../sass/screen.scss */
+/* line 761, ../../sass/screen.scss */
 #lieu_widget #avis_lieu_vide {
   display: none;
 }
-/* line 695, ../../sass/screen.scss */
+/* line 765, ../../sass/screen.scss */
 #lieu_widget .message {
   background: #fddeb5;
   padding: 5px;
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 701, ../../sass/screen.scss */
+/* line 771, ../../sass/screen.scss */
 #lieu_widget .message.hidden {
   display: none;
 }
 
-/* line 707, ../../sass/screen.scss */
+/* line 777, ../../sass/screen.scss */
 a.lieu-change {
   color: #fff;
   background: #f99b20;
@@ -1115,25 +1201,25 @@ a.lieu-change {
   border-radius: 5px;
   margin-right: 7px;
 }
-/* line 719, ../../sass/screen.scss */
+/* line 789, ../../sass/screen.scss */
 a.lieu-change.ajout:before {
   content: "+";
   margin-right: 5px;
 }
 
-/* line 725, ../../sass/screen.scss */
+/* line 795, ../../sass/screen.scss */
 #stages-map {
   width: 100%;
   height: 600px;
   max-height: 90vh;
 }
 
-/* line 732, ../../sass/screen.scss */
+/* line 802, ../../sass/screen.scss */
 #id_stage-thematiques {
   display: none;
 }
 
-/* line 738, ../../sass/screen.scss */
+/* line 808, ../../sass/screen.scss */
 .homeh1 {
   display: flex;
   justify-content: space-between;
@@ -1143,26 +1229,26 @@ a.lieu-change.ajout:before {
   border-bottom: 3px solid #000;
   margin-bottom: 15px;
 }
-/* line 747, ../../sass/screen.scss */
+/* line 817, ../../sass/screen.scss */
 .homeh1 h1 {
   margin-bottom: 3px;
 }
-/* line 751, ../../sass/screen.scss */
+/* line 821, ../../sass/screen.scss */
 .homeh1 > * {
   display: inline-block;
 }
-/* line 754, ../../sass/screen.scss */
+/* line 824, ../../sass/screen.scss */
 .homeh1 p {
   text-align: right;
 }
 
-/* line 759, ../../sass/screen.scss */
+/* line 829, ../../sass/screen.scss */
 .betacadre {
   background: #fa6cae;
   padding: 10px;
 }
 
-/* line 764, ../../sass/screen.scss */
+/* line 834, ../../sass/screen.scss */
 .entrer {
   background: #fff;
   max-width: 500px;
@@ -1170,7 +1256,7 @@ a.lieu-change.ajout:before {
   text-align: center;
   margin: 15px auto;
 }
-/* line 771, ../../sass/screen.scss */
+/* line 841, ../../sass/screen.scss */
 .entrer .archicubes {
   border-top: 2px solid #1a82dd;
   margin-top: 5px;
@@ -1178,84 +1264,84 @@ a.lieu-change.ajout:before {
   font-size: 0.9em;
 }
 
-/* line 779, ../../sass/screen.scss */
+/* line 849, ../../sass/screen.scss */
 article.promo {
   display: block;
   font-size: 1.1em;
 }
-/* line 783, ../../sass/screen.scss */
+/* line 853, ../../sass/screen.scss */
 article.promo .explications {
   display: table;
 }
-/* line 786, ../../sass/screen.scss */
+/* line 856, ../../sass/screen.scss */
 article.promo .explications:first-child {
   direction: rtl;
 }
-/* line 788, ../../sass/screen.scss */
+/* line 858, ../../sass/screen.scss */
 article.promo .explications:first-child > * {
   direction: ltr;
 }
-/* line 793, ../../sass/screen.scss */
+/* line 863, ../../sass/screen.scss */
 article.promo .explications > div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }
-/* line 798, ../../sass/screen.scss */
+/* line 868, ../../sass/screen.scss */
 article.promo .explications > div p {
   margin: 15px 15px;
 }
 
-/* line 806, ../../sass/screen.scss */
+/* line 876, ../../sass/screen.scss */
 .faq-toc {
   font-family: "Lato", sans-serif;
   display: block;
   max-width: 700px;
   margin: 0 auto;
 }
-/* line 811, ../../sass/screen.scss */
+/* line 881, ../../sass/screen.scss */
 .faq-toc ul {
   margin: 20px;
 }
-/* line 815, ../../sass/screen.scss */
+/* line 885, ../../sass/screen.scss */
 .faq-toc ul li a {
   color: #000;
   display: block;
   padding: 5px;
 }
-/* line 821, ../../sass/screen.scss */
+/* line 891, ../../sass/screen.scss */
 .faq-toc ul li.toc-h1 {
   display: none;
 }
-/* line 825, ../../sass/screen.scss */
+/* line 895, ../../sass/screen.scss */
 .faq-toc ul li.toc-h2 a {
   background: #fcc883;
 }
-/* line 829, ../../sass/screen.scss */
+/* line 899, ../../sass/screen.scss */
 .faq-toc ul li.toc-h3 a {
   padding-left: 10px;
   background: #fff;
   font-weight: normal;
 }
-/* line 835, ../../sass/screen.scss */
+/* line 905, ../../sass/screen.scss */
 .faq-toc ul li a:hover {
   color: #395214;
   background: #bce085 !important;
 }
 
-/* line 844, ../../sass/screen.scss */
+/* line 914, ../../sass/screen.scss */
 .faq article {
   background: #fff;
   padding: 15px;
 }
-/* line 847, ../../sass/screen.scss */
+/* line 917, ../../sass/screen.scss */
 .faq article h2 {
   background-color: #fcc883;
   color: #ae6505;
   margin: -15px;
   padding: 15px;
 }
-/* line 854, ../../sass/screen.scss */
+/* line 924, ../../sass/screen.scss */
 .faq article h3 {
   color: #0f4c82;
   background-color: #9dcbf3;
@@ -1263,19 +1349,19 @@ article.promo .explications > div p {
   margin-top: 30px;
   padding: 10px 15px;
 }
-/* line 861, ../../sass/screen.scss */
+/* line 931, ../../sass/screen.scss */
 .faq article h3:nth-child(2) {
   margin-top: 0;
 }
-/* line 866, ../../sass/screen.scss */
+/* line 936, ../../sass/screen.scss */
 .faq article ul {
   padding-left: 20px;
 }
-/* line 868, ../../sass/screen.scss */
+/* line 938, ../../sass/screen.scss */
 .faq article ul li {
   list-style: initial;
 }
-/* line 873, ../../sass/screen.scss */
+/* line 943, ../../sass/screen.scss */
 .faq article p, .faq article ul {
   font-family: "Lato", sans-serif;
   font-size: 18px;
@@ -1284,20 +1370,20 @@ article.promo .explications > div p {
   margin-right: 5%;
 }
 
-/* line 887, ../../sass/screen.scss */
+/* line 957, ../../sass/screen.scss */
 table.stats {
   width: 100%;
   background: #fff;
   margin: 20px 0;
   cellspacing: 1px;
 }
-/* line 892, ../../sass/screen.scss */
+/* line 962, ../../sass/screen.scss */
 table.stats th {
   font-weight: bold;
   border-top: 1px solid #000;
   border-bottom: 1px solid #999;
 }
-/* line 897, ../../sass/screen.scss */
+/* line 967, ../../sass/screen.scss */
 table.stats td, table.stats th {
   padding: 5px 3px;
   text-align: center;
diff --git a/avisstage/static/js/select_lieu.js b/avisstage/static/js/select_lieu.js
index 8fcba29..d604d90 100644
--- a/avisstage/static/js/select_lieu.js
+++ b/avisstage/static/js/select_lieu.js
@@ -15,6 +15,10 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
     var message_el = $el.find(".lieu-message");
     var closer = $el.find(".window-closer");
     var cmodif_el = $el.find(".lieu-choixmodif");
+    var lieuglobal_el = $el.find(".lieu-global");
+    var lieuoptions_el = $el.find(".lieu-options");
+    var suggestions_el = $el.find(".lieu-suggestions");
+    var newlieubtn_el = $el.find(".new-lieu-btn");
     var marqueurs = L.markerClusterGroup();
 
     // Variables globales
@@ -59,7 +63,12 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
 
         // Affiche la carte
         map = L.map(map_el[0]).setView([48.8422411,2.3430553], 15);
-        var layer = new L.TileLayer("https://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {attribution: 'Map tiles by <a href="http://korona.geog.uni-heidelberg.de/">GIScience Heidelberg</a>'});
+        var layer = new L.TileLayer(
+            "https://korona.geog.uni-heidelberg.de/"
+            + "tiles/roads/x={x}&y={y}&z={z}",
+            {attribution: 'Map tiles by ' +
+                          '<a href="http://korona.geog.uni-heidelberg.de/">' +
+                          'GIScience Heidelberg</a>'});
         map.addLayer(layer);
         map.addLayer(marqueurs);
         
@@ -149,8 +158,10 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         
         lieux_db.suggestion = data;
         
-		map.panTo(data.coord);
+        panMapTo(data.coord);
         lieuSurCarte(data, redIcon);
+        newlieubtn_el.prop("_lieustage_data", data)
+                     .on("click", choixLieuStage);
         
         // Affichage des suggestions
         askForSuggestions(place.geometry.location);
@@ -166,17 +177,52 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
 
     // Callback suggestions
     function showPropositions(data) {
-        showMessage("Cliquez sur un des lieux déjà existants (en bleu) pour le choisir, ou sur votre recherche (en rouge) pour créer un nouveau lieu");
+        showMessage("Cliquez sur un des lieux déjà existants (en bleu) " +
+                    "pour le choisir, ou sur votre recherche (en rouge) " +
+                    "pour créer un nouveau lieu");
+        suggestions_el.html("");
+        lieuglobal_el.addClass("with-options");
+        map.invalidateSize();
+        data.objects.sort(function(a,b){ return a.distance-b.distance; });
 
+        function showdistance (dist) {
+            if(dist<1000) return Math.round(dist) + "m";
+            else return (Math.round(dist/100)/10) + "km";
+        }
         // Affichage sur la carte
         $.each(data.objects, function(i, item) {
             var plieu = lieux_db[item.id];
-            if(plieu !== undefined)
+            if(plieu !== undefined) {
+                plieu.distance = item.distance;
                 item = plieu;
-            else
+            } else
                 lieux_db[item.id] = item;
+            var option_el = $("<li>", {class: "lieu-option"})
+                .append($("<p>", {class: "lieu-nom"}).text(item.nom))
+                .append($("<p>", {class: "lieu-infos"})
+                    .append($("<span>", {class: "numstages"})
+                        .text((item.num_stages || 0) + " stage"
+                            + (item.num_stages>1 ? "s" : "") + " ici"))
+                    .append($("<span>", {class: "ville"})
+                        .text(item.ville+", "+item.pays_nom))
+                    .append($("<span>", {class: "distance"})
+                        .text("à "+showdistance(item.distance))))
+                .append($("<a>", {class: "hoverlink",
+                                  href: "javascript:void(0)"}))
+                .prop("_lieustage_data", item)
+                .on("click", choixLieuStage);
+            suggestions_el.append(option_el);
             lieuSurCarte(item, blueIcon);
         });
+
+        if (data.objects.length == 0) {
+            var option_el = $("<li>", {class: "lieu-option"})
+                .append($("<p>", {class: "lieu-infos"})
+                    .text("Aucun lieu déjà connu à proximité"));
+            suggestions_el.append(option_el);
+        }
+        
+		panMapTo(lieux_db.suggestion.coord);
     }
 
     // Affiche un lieu sur la carte
@@ -201,10 +247,14 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         data.marqueur = marqueur;
         
         // Création de la description
-        var desc = $("<div>").append($("<h3>").text(data.nom))
-                             .append($("<p>").text(data.ville+", "+data.pays_nom));
+        var desc = $("<div>").append($("<h4>").text(data.nom))
+                             .append($("<p>")
+                                 .text(data.ville+", "+data.pays_nom));
         if (data.num_stages !== undefined)
-            desc.append($("<p>").text(data.num_stages + (data.num_stages > 1 ? " stages" : " stage") + " à cet endroit"));
+            desc.append($("<p>")
+                .text(data.num_stages
+                    + (data.num_stages > 1 ? " stages" : " stage")
+                    + " à cet endroit"));
         
         var activeBtn = $("<a>", {href:"javascript:void(0);"})
             .prop("_lieustage_data", data)
@@ -229,7 +279,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
     function resetOrigLieu() {
         var data = this._lieustage_data;
         data.marqueur.setLatLng(data.orig_coord);
-        map.panTo(data.orig_coord);
+        panMapTo(data.orig_coord);
     }
 
     //
@@ -248,12 +298,15 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         if (modification == true) {
             setUIMode("ajout");
             form_el.find("#id_id").val(choix.id);
-            form_el.find("h3").text("Modifier un lieu");
+            form_el.find(".form-title").text("Modifier un lieu");
         } else {
             setUIMode("edit");
             form_el.find("#id_id").val('');
-            form_el.find("h3").text("Créer un lieu");
+            form_el.find(".form-title").text("Créer un lieu");
         }
+        
+        map.invalidateSize();
+        panMapTo(choix.coord);
     }
 
     // Envoi du formulaire
@@ -306,9 +359,9 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         var lieu = lieux_db[modiflieu_id];
 
         lieu.fromSuggestion = true;
-        map.panTo(lieu.coord);
+        panMapTo(lieu.coord);
         lieuSurCarte(lieu, greenIcon);
-                
+        
         showForm(lieu, true);
     }
 
@@ -318,9 +371,13 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         var lieu = lieux_db[modiflieu_id];
 
         lieu.fromSuggestion = false;
-        map.panTo(lieu.coord);
-        lieuSurCarte(lieu, greenIcon);
         
+        map.invalidateSize();
+        panMapTo(lieu.coord);
+        lieuSurCarte(lieu, greenIcon);
+        newlieubtn_el.prop("_lieustage_data", lieu)
+                     .on("click", choixLieuStage);
+        lieux_db.suggestion = lieu;
         askForSuggestions(lieu.coord);
     }
 
@@ -332,6 +389,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
             initUI();
 
         input.val('');
+        lieuglobal_el.removeClass("with-options");
         
         // Nettoyage
         hideMessage();
@@ -344,14 +402,14 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         if (lieu_id === undefined) {
             // Choix d'un nouveau lieu : pas grand-chose à faire
             ui_mode_creation = true;
-            $el.find("h3").text("Ajouter un lieu");
+            $el.find(".window-title").text("Ajouter un lieu");
             map_el.addClass("masked");
         } else {
             // Lieu déjà existant
             lieu_id = lieu_id * 1;
             ui_mode_creation = false;
             modiflieu_id = lieu_id;
-            $el.find("h3").text("Modifier le lieu");
+            $el.find(".window-title").text("Modifier le lieu");
 
             // Chargement des infos
             if(lieux_db[lieu_id] === undefined) {
@@ -364,6 +422,10 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
         }
     }
 
+    function panMapTo(coord) {
+        map.panTo(coord);
+    }
+
     // Fermeture du widget
     function closeWidget () {
         $el.removeClass("visible");
@@ -373,7 +435,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
     // Le lieu est choisi, on appelle le callback
     function choixLieuStage() {
         var choix = this._lieustage_data;
-        if(!choix.fromSuggestion)
+        if(!choix.fromSuggestion && this !== newlieubtn_el[0])
             callback(choix);
         else
             showForm(choix);
diff --git a/avisstage/templates/avisstage/base.html b/avisstage/templates/avisstage/base.html
index 9d14082..33eda80 100644
--- a/avisstage/templates/avisstage/base.html
+++ b/avisstage/templates/avisstage/base.html
@@ -5,8 +5,6 @@
         <meta charset="utf-8" />
         <title>{% block title %}ExperiENS{% endblock %}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;">
-        <link type="text/css" rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}" />
-        <link type="text/css" rel="stylesheet" href="{% static 'css/screen.css' %}" />
         <script type="text/javascript" src="{% static "js/jquery-3.2.0.min.js" %}"></script>
         <script type="text/javascript" src="{% static "js/jquery-ui.min.js" %}"></script>
         {% if request.user.is_authenticated %}
@@ -16,6 +14,9 @@
         {% endif %}
         
         {% block extra_head %}{% endblock %}
+        
+        <link type="text/css" rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}" />
+        <link type="text/css" rel="stylesheet" href="{% static 'css/screen.css' %}" />
     </head>
   
     <body class="{% block bodyclass %}{% endblock %}">
diff --git a/avisstage/templates/avisstage/formulaires/stage.html b/avisstage/templates/avisstage/formulaires/stage.html
index 27e66ed..554bdfa 100644
--- a/avisstage/templates/avisstage/formulaires/stage.html
+++ b/avisstage/templates/avisstage/formulaires/stage.html
@@ -17,7 +17,7 @@
     <script type="text/javascript" src="{% static "js/selectize.min.js" %}"></script>
     <link rel="stylesheet" type="text/css" href="{% static "css/selectize.css" %}" />
     <link href="{% static "jquery-autosuggest/css/autoSuggest-upshot.css" %}" type="text/css" media="all" rel="stylesheet" />
-    <script type="text/javascript" src="{% static "js/editstage.js" %}"></script>
+    <script type="text/javascript" src="{% static "js/editstage.js" %}?v2"></script>
     <script type="text/javascript">
      $(function(){
          initEditStage(
diff --git a/avisstage/templates/avisstage/templatetags/widget_lieu.html b/avisstage/templates/avisstage/templatetags/widget_lieu.html
index 1917d7a..1e7997f 100644
--- a/avisstage/templates/avisstage/templatetags/widget_lieu.html
+++ b/avisstage/templates/avisstage/templatetags/widget_lieu.html
@@ -4,14 +4,25 @@
     <div class="window-bg"></div>
     <div class="window-content">
         <a class="window-closer" href="javascript:void(0);"></a>
-        <h2>Choisir un lieu</h2>
+        <h2 class="window-title">Choisir un lieu</h2>
         
         <p>Restez général dans le lieu : choisissez l'université plutôt que le laboratoire, l'incubateur plutôt que la startup...</p>
 
         <div class="message"></div>
 
         {# UI avec carte et autocomplete #}
-        <div class="lieu-ui">
+        <div class="lieu-global">
+            <div class="lieu-ui">
+            </div>
+
+            <div class="lieu-options">
+                <h3>Choisir un lieu existant</h3>
+                <ul class="lieu-suggestions">
+                </ul>
+                <h3>Aucune suggestion correcte ?</h3>
+                <a href="javascript:void(0)" class="btn new-lieu-btn">
+                    Créer un nouveau lieu ici</a>
+            </div>
         </div>
 
         {# En cas de modification #}
@@ -26,7 +37,7 @@
         {# Formulaire de création/modification #}
         <div class="lieu-form">{% load staticfiles %}
             <form action="{% url 'avisstage:lieu_ajout' %}" method="post" id="lieu_ajout">
-                <h2>Ajouter un lieu</h2>
+                <h2 class="form-title">Ajouter un lieu</h2>
                 <p class="help_text">Vous pouvez déplacer le curseur pour indiquer précisément la bonne position</p>
                 {% csrf_token %}
                 {% for field in form.hidden_fields %}
diff --git a/avisstage/utils.py b/avisstage/utils.py
index 328f5c3..9aad26d 100644
--- a/avisstage/utils.py
+++ b/avisstage/utils.py
@@ -2,9 +2,19 @@
 
 from allauth.socialaccount.models import SocialAccount
 from functools import reduce
+from math import cos, radians, sqrt
 
 def choices_length (choices):
     return reduce (lambda m, choice: max (m, len (choice[0])), choices, 0)
 
 def en_scolarite(user):
     return user.profil.en_scolarite
+
+def approximate_distance(a, b):
+    lat_a = radians(a.y)
+    lat_b = radians(b.y)
+    dlon = radians(b.x - a.x)
+    dlon = dlon * cos((lat_a + lat_b)/2)
+    dlat = (lat_a - lat_b)
+    distance = 6371000 * sqrt(dlon*dlon + dlat*dlat)
+    return distance