Un peu de mise en forme
This commit is contained in:
champeno
parent
9df6082e16
commit
f9fb3561dd
5 changed files with 246 additions and 42 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
{% 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>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>
|
||||
{% if modifiable %}<p><a href="{% url 'monstage:stage_edit_lieu' stage.id %}">Modifier les lieux du stage</a></p>{% endif %}
|
||||
<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><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>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>À {% 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 %}
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
map: "#map_canvas",
|
||||
$("#addlieu").geocomplete({
|
||||
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();
|
||||
candi.append(liste);
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{% block content %}{% endblock %}
|
||||
<div id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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)
|
||||
return render(request, 'monstage/stage.html', {'stage': stage, 'modifiable': stage_mod})
|
||||
lieux_latlng = []
|
||||
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]
|
||||
self.fields['longitude'].initial = lieu.coord.coords[1]
|
||||
# GEOS Format : (longitude, latitude)
|
||||
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')
|
||||
|
|
|
|||
Loading…
Reference in a new issue