Un peu de mise en forme

monstage/static/style.css

@@ -0,0 +1,144 @@
+@charset "utf-8";
+@import url(http://fonts.googleapis.com/css?family=Lato:300,700,300italic);
+
+body {
+	font: 18px 'Lato', sans-serif;
+	background:#4FB088;
+}
+
+a {
+	font-weight:bold;
+	color:#4FB088;
+	text-decoration:none;
+}
+
+h1 {
+	margin-top:0;
+}
+
+#content {
+	width:80%;
+	max-width:700px;
+	padding:30px;
+	margin:0 auto;
+	background:#eee;
+}
+
+#stage_present {
+	display:table;
+	background: #fff;
+	border-spacing:20px;
+	width:100%;
+}
+
+#stage_misc {
+	display:table-cell;
+	min-width:300px;
+}
+
+#stage_map {
+	display:table-cell;
+	min-width:300px;
+}
+
+
+/* formulaires */
+label {
+	font-weight:bold;
+}
+
+form p {
+	padding:10px;
+	margin:0;
+}
+
+form p:nth-child(2n) {
+	background:#fff;
+}
+
+form p:nth-child(2n+1) {
+	background:#ddd;
+}
+
+form textarea, form input, form select {
+	display:block;
+	font:16px 'Lato', sans-serif;
+	margin-right:0;
+	margin-left:auto;
+	margin-top:10px;
+}
+
+form textarea {
+	width:90%;
+}
+
+.helptext {
+	display:block;
+	font-size:0.8em;
+	color:#333;
+	text-align:right;
+	margin-top:10px;
+	width:100%;
+}
+
+/* lieux */
+#map_addlieu {
+	width:100%;
+	height:300px;
+}
+
+input#addlieu {
+	font-size:20px;
+	padding:15px;
+	width:70%;
+	margin:0 auto;
+}
+
+div.lieuform {
+	display:block;
+	border:1px solid #337359;
+	padding:10px;
+	margin-bottom:20px;
+}
+
+div.lieuform h3 {
+	margin:0px;
+	margin-bottom:5px;
+}
+
+div.lieuform p {
+	background:none;
+	padding:0;
+}
+
+div#candidats ul {
+	list-style:none;
+	padding:0;
+	margin:0;
+}
+
+div#candidats li, div#candidats #addcandidat {
+	list-style:none;
+	display:block;
+	overflow:hidden;
+	background:#5AC99C;
+	cursor:pointer;
+	padding:10px;
+	border:2px #fff;
+}
+
+div#candidats #addcandidat {
+	width:90%;
+	margin:15px auto;
+}
+
+div#candidats li input {
+	float:right;
+	background:none;
+	text-decoration:underline;
+	border:none;
+}
+
+div#candidats #addcandidat {
+	font-size:20px;
+}

monstage/templates/monstage/stage.html

@@ -1,15 +1,43 @@
 {% extends "skeleton.html" %}
 
+{% block extra_head %}
+  <script src="http://maps.googleapis.com/maps/api/js"></script>
+  <script>
+  function initialize() {
+    var lieux = [ {% for coords in lieux_latlng %}
+      new google.maps.LatLng({{ coords }}) {% if not forloop.last %},{% endif %}
+      {% endfor %} ];
+    var mapProp = {
+      center:new google.maps.LatLng({{ lieux_latlng.0 }}),
+      zoom:7,
+      mapTypeId:google.maps.MapTypeId.ROADMAP
+    };
+    var map = new google.maps.Map(document.getElementById("stage_map"),mapProp);
+    for (var i in lieux) {
+       var marker = new google.maps.Marker({
+           position:lieux[i],
+       });
+       marker.setMap(map);
+    }
+  }
+  google.maps.event.addDomListener(window, 'load', initialize);
+  </script>
+{% endblock %}
+
 {% block content %}
-  <h1>{{ stage.sujet }}</h1>
   <p><a href="{% url 'monstage:index' %}">Retour</a></p>
+  <h1>{{ stage.sujet }}</h1>
+  <div id="stage_present">
+    <div id="stage_map"></div>
+    <div id="stage_misc">
       {% if modifiable %}<p><a href="{% url 'monstage:stage_edit_desc' stage.id %}">Modifier la description du stage (sujet, ...)</a></p>{% endif %}
-  <p>Stage de <a href="{% url 'monstage:profil' stage.profil_user.user.username %}">{{ stage.profil_user.user.first_name }} {{ stage.profil_user.user.last_name }}</a></p>
+      <p><a href="{% url 'monstage:profil' stage.profil_user.user.username %}">{{ stage.profil_user.user.first_name }} {{ stage.profil_user.user.last_name }}</a> a fait ce stage du {{ stage.start_date }} au {{ stage.end_date }}</p>
-  <p>Du {{ stage.start_date }} au {{ stage.end_date }}</p>
       <p>Matières : {% for matiere in stage.matieres.all %}{% if not forloop.first %}, {% endif %}{{ matiere.name }}{% endfor %}</p>
       <p>Thématiques : {% for tag in stage.thematiques.names %}{% if not forloop.first %}, {% endif %}{{ tag }}{% endfor %}</p>
-  <p>A {% for lieu in stage.lieux.all %}{% if not forloop.first %}{% if forloop.last %} et {% else %}, {% endif %}{% endif %}{{ lieu.name }} ({{ lieu.ville }}){% endfor %}</p>
+      <p>À {% for lieu in stage.lieux.all %}{% if not forloop.first %}{% if forloop.last %} et {% else %}, {% endif %}{% endif %}{{ lieu.name }} ({{ lieu.ville }}){% endfor %}</p>
       {% if modifiable %}<p><a href="{% url 'monstage:stage_edit_lieu' stage.id %}">Modifier les lieux du stage</a></p>{% endif %}
+    </div>
+  </div>
   {% if modifiable %}<p><a href="{% url 'monstage:stage_edit_feedback' stage.id %}">Modifier les avis sur le stage</a></p>{% endif %}
   <h2>Ressenti sur le stage</h2>
   {% if stage.avis_encadrants %}

monstage/templates/monstage/stage_edit_lieu.html

@@ -5,53 +5,50 @@
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
    <script src="{% static 'script/jquery-1.11.1.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'script/jquery.geocomplete.min.js' %}" type="text/javascript"></script>
-   <style type="text/css">
-   #map_canvas {
-    width:300px;
-    height:300px;
-   }
-   </style>
 {% endblock %}
 
 {% block content %}
-  <h1>Lieux du stage "{{ stage.sujet }}"</h1>
+  <h1>Modifier les lieux du stage "{{ stage.sujet }}"</h1>
   <p><a href="{% url 'monstage:stage' stage.id %}">Retour</a></p>
-  <p>{{ debug }}</p>
+
-  <div id="map_canvas"></div>
-  <input id="geocomplete" type="text" placeholder="Chercher un établissement" />
-  <div id="candidats"></div>
-  <input type="button" value="Créer un nouveau lieu" onclick="addFieldSet(predata);" />
   <form action="{% url 'monstage:stage_edit_lieu' stage.id %}" method="post">
   {% csrf_token %}
   <input type="hidden" id="numplaces" name="numplaces" value="{{ numforms }}" />
   <div id="places">
+  <h2>Liste des lieux de ce stage</h2>
   {% for lieuform in lieuforms %}
-    <div class="form">
+    <div class="lieuform">
       <h3>{{ lieuform.0.name }}</h3>
       <p>{{ lieuform.0.ville }}, {{ lieuform.0.get_pays_display }}</p> 
       {{ lieuform.1.as_p }}
     </div>
   {% endfor %}
-  
-  
-  
   </div>
-  <input type="submit" value="Etape suivante" />
+  
+  <h2>Ajouter un autre lieu</h2>
+  <p><input id="addlieu" type="text" placeholder="Chercher un établissement" /></p>
+  <div id="map_addlieu"></div>
+  <div id="candidats"></div>
+
+  <input type="submit" value="Enregistrer" />
   </form>
+  
   <script>
       var emptyform = "{{ emptyform |safe }}";
       var emptylieu = "{{ emptylieu |safe }}";
+      
       $(function(){
-        $("#geocomplete").geocomplete({
+        $("#addlieu").geocomplete({
-          map: "#map_canvas",
+          map: "#map_addlieu",
           types: ["geocode", "establishment"],
-        }).on("geocode:result", function(event, result){ digere(result); console.log(result); });
+        }).on("geocode:result", function(event, result){ $("#map_addlieu").css("display", "block"); digere(result); console.log(result); });
       });
       var fieldcount = {{ numforms }};
       var places = $("#places");
-      function addFieldSet (data) {
+      
+      function addNewPlace (data) {
         if (data == undefined) return;
-        var t = $("<div>")
+        var t = $("<div>", {class:"lieuform"})
         t.html(emptyform.replace(/\{\{ID\}\}/gi, fieldcount));
         places.append(t);
         document.getElementById('id_'+fieldcount+'-name').value = data.name;
@@ -62,10 +59,13 @@
         fieldcount++;
         document.getElementById('numplaces').value = fieldcount;
         predata = undefined;
+        clearCandidats();
+        $("#map_addlieu").css("display", "none");
       }
+      
       function addKnownPlace(data) {
         if (data == undefined) return;
-        var t = $("<div>")
+        var t = $("<div>", {class:"lieuform"})
         t.html(emptylieu.replace(/\{\{ID\}\}/gi, fieldcount));
         t.prepend($("<h3>", {html:data.name}));
         places.append(t);
@@ -73,7 +73,10 @@
         fieldcount++;
         document.getElementById('numplaces').value = fieldcount;
         predata = undefined;
+        clearCandidats();
+        $("#map_addlieu").css("display", "none");
       }
+      
       var predata;
       function digere (gdata) {
         var data = {};
@@ -96,24 +99,40 @@
         predata = data;
         getCandidats(data);
       }
+      
       function getCandidats (data) {
-        $.getJSON("{% url 'monstage:lieux_candidats' %}", {lat:data.latitude, lon:data.longitude}, showCandidats)
+        $.getJSON("{% url 'monstage:lieux_candidats' %}", {lat:data.latitude, lon:data.longitude}, showCandidats);
+        clearCandidats();
+        $("#candidats").append($("<p>", {text:"Recherche des lieux connus..."}));
+        
       }
+      
       function showCandidats (candidats) {
         var liste = $("<ul>");
         for (var i in candidats.lieux) {
             lieu = candidats.lieux[i];
             console.log(lieu)
-            liste.append($("<li>", {html: lieu.name + " ("+lieu.distance+")"}).prop("data", lieu).click(clickCandidat));
+            liste.append($("<li>", {html: lieu.name + " ("+lieu.distance+") <input type=\"button\" value=\"Choisir cet établissement\" />"}).prop("data", lieu).click(clickCandidat));
         }
         var candi = $("#candidats");
         clearCandidats();
+        if (candidats.lieux.length == 0) {
+            candi.append($("<h3>", {text:"(Aucun établissement déjà référencé à proximité)"}));
+            candi.append($("<input>", {id:"addcandidat", type:"button", value:"Enregistrer une nouvelle institution"})
+                         .click(function(){addNewPlace(predata)}) );
+        } else {
+            candi.append($("<h3>", {text:"Choisir parmi les lieux déjà référencés :"}));
             candi.append(liste);
+            candi.append($("<input>", {id:"addcandidat", type:"button", value:"Ou bien créer une nouvelle institution"})
+                         .click(function(){addNewPlace(predata)}) );
         }
+      }
+      
       function clearCandidats () {
         var candi = $("#candidats");
         $.each(candi.children(), function(i, item){$(item).remove()});
       }
+      
       function clickCandidat () {
         addKnownPlace(this.data);
         clearCandidats();

monstage/templates/skeleton.html

@@ -2,13 +2,15 @@
 <!doctype html>
 <html>
   <head>
-    <title>ExperiENS</title>
+    <title>{% block title %}ExperiENS{% endblock %}</title>
     <link type="text/css" rel="stylesheet" href="{% static 'style.css' %}" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     {% block extra_head %}{% endblock %}
   </head>
   
   <body>
+    <div id="content">
     {% block content %}{% endblock %}
+    </div>
   </body>
 </html>

monstage/views.py

@@ -48,8 +48,16 @@ def profil_edit(request):
 
 def stage(request, stage_id):
     stage = get_object_or_404( Stage, pk = stage_id)
-    stage_mod = (stage.profil_user == request.user.profil)
+    lieux_latlng = []
-    return render(request, 'monstage/stage.html', {'stage': stage, 'modifiable': stage_mod})
+    for lieu in stage.lieux.all():
+        # GEOS Format : (longitude, latitude)
+        lieux_latlng.append("%f, %f" % (lieu.coord.y, lieu.coord.x))
+    context = {
+        'stage': stage,
+        'modifiable': (stage.profil_user == request.user.profil),
+        'lieux_latlng': lieux_latlng
+    }
+    return render(request, 'monstage/stage.html', context)
 
 class StageForm(forms.ModelForm):
     class Meta:
@@ -103,8 +111,9 @@ class LieuForm(forms.ModelForm):
         self.fields['longitude'].widget = HiddenInput()
         lieu = kwargs.pop('instance', None)
         if lieu:
-            self.fields['latitude'].initial = lieu.coord.coords[0]
+            # GEOS Format : (longitude, latitude)
-            self.fields['longitude'].initial = lieu.coord.coords[1]
+            self.fields['longitude'].initial = lieu.coord.x
+            self.fields['latitude'].initial = lieu.coord.y
     
     class Meta:
         model = Lieu
@@ -115,7 +124,8 @@ class LieuForm(forms.ModelForm):
     
     def save(self, *args, **kwargs):
         lieu = super(LieuForm, self).save(commit=False, *args, **kwargs)
-        lieu.coord = GEOSGeometry('POINT(%f %f)' % (self.cleaned_data['latitude'], self.cleaned_data['longitude']), srid=4326)
+        # GEOS Format : (longitude, latitude)
+        lieu.coord = GEOSGeometry('POINT(%f %f)' % (self.cleaned_data['longitude'], self.cleaned_data['latitude']), srid=4326)
         return lieu
 
 def lieux_candidats(request):
@@ -123,7 +133,8 @@ def lieux_candidats(request):
         lat = float(request.GET.get('lat', False))
         lon = float(request.GET.get('lon', False))
         if lat and lon:
-            coords = GEOSGeometry('POINT(%f %f)' % (lat, lon), srid=4326)
+            # GEOS Format : (longitude, latitude)
+            coords = GEOSGeometry('POINT(%f %f)' % (lon, lat), srid=4326)
             distance = {'km': 0.5}
             lieux = Lieu.objects.filter(coord__distance_lte=(coords, measure.D(**distance)))
             lieux = lieux.distance(coords).order_by('distance')