0001-forms-decorate-nearby-field-33680.patch
static/includes/_wcs.scss | ||
---|---|---|
760 | 760 |
} |
761 | 761 |
} |
762 | 762 |
} |
763 | ||
764 |
ul#nearby-forms { |
|
765 |
margin: 0; |
|
766 |
padding: 0; |
|
767 |
li { |
|
768 |
margin: 5px auto; |
|
769 |
display: -ms-flexbox; |
|
770 |
display: flex; |
|
771 |
-ms-align-items: center; |
|
772 |
-ms-flex-align: center; |
|
773 |
align-items: center; |
|
774 |
-ms-flex-line-pack: center; |
|
775 |
align-content: center; |
|
776 |
-ms-flex-pack: space-between; |
|
777 |
-ms-justify-content: space-between; |
|
778 |
justify-content: space-between; |
|
779 |
border: $widget-border; |
|
780 |
padding: 5px; |
|
781 |
} |
|
782 |
span { |
|
783 |
margin: 0 5px; |
|
784 |
&.form-digest { |
|
785 |
width: 60%; |
|
786 |
} |
|
787 |
&.form-datetime { |
|
788 |
width: 20%; |
|
789 |
@media screen and (max-width: $mobile-limit) { |
|
790 |
width: 30%; |
|
791 |
} |
|
792 |
} |
|
793 |
&.marker-counter { |
|
794 |
background: $button-background; |
|
795 |
padding: 5px 10px; |
|
796 |
color: $button-color; |
|
797 |
min-width: 0.5em; |
|
798 |
max-width: 1em; |
|
799 |
border-radius: 3px; |
|
800 |
} |
|
801 |
} |
|
802 |
} |
|
803 |
div.template-nearby-forms div.leaflet-div-icon { |
|
804 |
padding: 3px; |
|
805 |
margin: auto; |
|
806 |
border-radius: 3px; |
|
807 |
display: -ms-flexbox; |
|
808 |
display: flex; |
|
809 |
a { |
|
810 |
line-height: 1; |
|
811 |
margin: auto; |
|
812 |
} |
|
813 |
} |
|
814 | ||
815 |
.signalements-thanks ~ div.buttons { |
|
816 |
div.submit-button, div.previous-button { |
|
817 |
display: none; |
|
818 |
} |
|
819 |
div.cancel-button button { |
|
820 |
text-indent: -9999px; |
|
821 |
line-height: 0; |
|
822 |
&::after { |
|
823 |
text-indent: 0; |
|
824 |
line-height: initial; |
|
825 |
display: block; |
|
826 |
content: 'Continuer'; |
|
827 |
} |
|
828 |
} |
|
829 |
} |
static/js/plus1.js | ||
---|---|---|
1 |
$(function() { |
|
2 |
function user_is_authenticated() { |
|
3 |
return $('body').is('.authenticated-user'); |
|
4 |
} |
|
5 |
if ($('#nearby-forms').length) { |
|
6 |
$(document).on('wcs:maps-ready', function() { |
|
7 |
var $map_widget = $('.qommon-map'); |
|
8 |
var map = $map_widget[0].leaflet_map; |
|
9 |
var geojson_data = Array(); |
|
10 |
$('#nearby-forms li[data-id]').each(function(idx, elem) { |
|
11 |
var feature = { |
|
12 |
type: 'Feature', |
|
13 |
properties: { |
|
14 |
id: $(elem).data('id'), |
|
15 |
counter: $(elem).find('.marker-counter').text() |
|
16 |
}, |
|
17 |
geometry: { |
|
18 |
type: 'Point', |
|
19 |
coordinates: [$(elem).data('geoloc-lon'), $(elem).data('geoloc-lat')] |
|
20 |
} |
|
21 |
}; |
|
22 |
geojson_data.push(feature); |
|
23 |
}); |
|
24 | ||
25 |
$(map).on('zoomend moveend', function() { |
|
26 |
/* filter display of nearby items to match the displayed map area */ |
|
27 |
var nearby_list = $('#nearby-forms'); |
|
28 |
nearby_list.find('li').hide(); |
|
29 |
map.eachLayer(function(layer){ |
|
30 |
if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) { |
|
31 |
if (layer.feature && layer.feature.properties.id) { |
|
32 |
nearby_list.find('li[data-id="' + layer.feature.properties.id + '"]').show(); |
|
33 |
return; |
|
34 |
} |
|
35 |
} |
|
36 |
}); |
|
37 |
}); |
|
38 | ||
39 |
if (geojson_data) { |
|
40 |
var geo_json = L.geoJson(geojson_data, |
|
41 |
{ |
|
42 |
pointToLayer: function (feature, latlng) { |
|
43 |
marker = L.divIcon({ |
|
44 |
iconAnchor: [0, 0], |
|
45 |
popupAnchor: [5, -45], |
|
46 |
html: '<a href="#nearby-' + feature.properties.counter + '" class="demand-map-marker">' + |
|
47 |
feature.properties.counter + '</a>' |
|
48 |
}); |
|
49 |
return L.marker(latlng, {icon: marker}); |
|
50 |
} |
|
51 |
}); |
|
52 |
geo_json.addTo(map); |
|
53 |
$(map).trigger('moveend'); |
|
54 |
} |
|
55 |
$('a.plus1').on('click', function() { |
|
56 |
var plus1_url = $(this).data('plus1-url'); |
|
57 |
var $dialog = null; |
|
58 |
if (user_is_authenticated()) { |
|
59 |
$dialog = $('<div id="plus1-dialog">' |
|
60 |
+ '<p>Vous allez confirmer le signalement.' |
|
61 |
+ 'Vous pouvez également décider de recevoir un message une fois celui-ci pris en charge.</p>' |
|
62 |
+ '<label><input type="checkbox">Recevoir un message</input></label>' |
|
63 |
+ '</div>'); |
|
64 |
} else { |
|
65 |
$dialog = $('<div id="plus1-dialog">' |
|
66 |
+ '<p>Vous allez confirmer le signalement.</p>' |
|
67 |
+ '</div>'); |
|
68 |
} |
|
69 |
$dialog.dialog({ |
|
70 |
modal: true, |
|
71 |
buttons: [ |
|
72 |
{text: 'Annuler', |
|
73 |
'class': 'cancel-button', |
|
74 |
click: function() { |
|
75 |
$(this).dialog('destroy'); |
|
76 |
} |
|
77 |
}, |
|
78 |
{text: 'Confirmer', |
|
79 |
click: function() { |
|
80 |
var checked = ($(this).find('[type=checkbox]:checked').length > 0); |
|
81 |
$.ajax({ |
|
82 |
url: plus1_url, |
|
83 |
data: JSON.stringify({'checked': checked}), |
|
84 |
type: 'POST', |
|
85 |
contentType: 'application/json; charset=utf-8', |
|
86 |
dataType: 'json', |
|
87 |
success: function(resp) { |
|
88 |
$dialog.dialog('destroy'); |
|
89 |
$map_widget.parent().find('[type=hidden]').val('0;0'); |
|
90 |
$('div.buttons button[name=submit]').click(); |
|
91 |
} |
|
92 |
}); |
|
93 |
} |
|
94 |
} |
|
95 |
], |
|
96 |
close: function() {} |
|
97 |
}); |
|
98 |
return false; |
|
99 |
}); |
|
100 |
}); |
|
101 |
} |
|
102 |
}) |
templates/qommon/forms/widgets/nearby-forms.html | ||
---|---|---|
1 |
{% extends "qommon/forms/widgets/map.html" %} |
|
2 |
{% load qommon l10n static %} |
|
3 | ||
4 |
{% block widget-title %} |
|
5 |
{% endblock %} |
|
6 | ||
7 |
{% block widget-content %} |
|
8 |
{% if form %} |
|
9 |
<input type="hidden" name="{{widget.name}}$latlng"> |
|
10 |
<div id="map-{{widget.name}}" class="qommon-map" |
|
11 |
data-readonly="true" |
|
12 |
{% for key, value in widget.map_attributes.items %}{{key}}="{{value}}" {% endfor %} |
|
13 |
{% localize off %} |
|
14 |
data-init-lat="{{ form_var_carte_lat }}" |
|
15 |
data-init-lng="{{ form_var_carte_lon }}" |
|
16 |
{% endlocalize %} |
|
17 |
></div> |
|
18 |
{% block list-header %} |
|
19 |
<h3>Si votre signalement ne figure pas dans la liste ci-dessous, continuez</h3> |
|
20 |
{% endblock %} |
|
21 |
<ul id="nearby-forms"> |
|
22 |
{% with distance=form_option_distance|default:100|add:50 %} |
|
23 |
{% with demands=form.objects.pending|distance_filter:distance %} |
|
24 |
{% for formdata in demands %} |
|
25 |
<li data-id="{{formdata.number}}" |
|
26 |
{% localize off %} |
|
27 |
data-geoloc-lat="{{formdata.geoloc.base.lat}}" |
|
28 |
data-geoloc-lon="{{formdata.geoloc.base.lon}}" |
|
29 |
{% endlocalize %} |
|
30 |
> |
|
31 |
<span class="marker-counter" id="nearby-{{forloop.counter}}">{{forloop.counter}}</span> |
|
32 |
{% block problem-digest %} |
|
33 |
<span class="form-digest">{{ formdata.digest }}</span> |
|
34 |
{% endblock %} |
|
35 |
<span class="form-datetime">Signalé le <time datetime="{{ formdata.receipt_date|datetime|date:"c" }}">{{ formdata.receipt_date }}</time></span> |
|
36 |
{% if activate_plus1_action == "True" %} |
|
37 |
<a class="plus1 pk-button" href="#" data-plus1-url="{{formdata.api_url}}hooks/plus1/" aria-label="Même signalement">+1</a> |
|
38 |
{% endif %} |
|
39 |
</li> |
|
40 |
{% endfor %} |
|
41 |
{% endwith %} |
|
42 |
{% endwith %} |
|
43 |
</ul> |
|
44 |
<script src="{% static 'xstatic/jquery-ui.js' %}"></script> |
|
45 |
<script src="{% static "js/plus1.js" %}"></script> |
|
46 |
{% else %} {# no form, this is the admin preview #} |
|
47 |
<div class="infonotice"> |
|
48 |
{% block preview-impossible %} |
|
49 |
Signalements à proximité, prévisualisation impossible. |
|
50 |
{% endblock %} |
|
51 |
</div> |
|
52 |
{% endif %} |
|
53 | ||
54 |
{% endblock %} |
|
55 | ||
0 |
- |