feat(ui): add a button to calculate the map's center
Parent
61371f9f49
révision
f9c0de2377
|
@ -3,6 +3,7 @@ from django.utils.translation import gettext_lazy as _
|
|||
from wagtail.admin.edit_handlers import (
|
||||
FieldPanel,
|
||||
FieldRowPanel,
|
||||
HelpPanel,
|
||||
InlinePanel,
|
||||
MultiFieldPanel,
|
||||
PageChooserPanel,
|
||||
|
@ -16,6 +17,8 @@ class MapAdmin(ModelAdmin):
|
|||
model = Map
|
||||
menu_icon = 'map'
|
||||
list_display = ('name', 'points_count')
|
||||
form_view_extra_css = ['wagtail_maps/admin-form.css']
|
||||
form_view_extra_js = ['wagtail_maps/admin-form.js']
|
||||
|
||||
panels = [
|
||||
FieldPanel('name', classname='title'),
|
||||
|
@ -26,7 +29,11 @@ class MapAdmin(ModelAdmin):
|
|||
FieldPanel('center_latitude', heading=_("Latitude")),
|
||||
FieldPanel('center_longitude', heading=_("Longitude")),
|
||||
]
|
||||
)
|
||||
),
|
||||
HelpPanel(
|
||||
template='wagtail_maps/edit_handlers/center_calculate.html',
|
||||
classname='center-calculate',
|
||||
),
|
||||
],
|
||||
heading=_("Center of the map"),
|
||||
),
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
.center-calculate .button {
|
||||
width: 100%;
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
function isNumber(value) {
|
||||
return value === Number(value).toString();
|
||||
}
|
||||
|
||||
function add(accumulator, a) {
|
||||
return accumulator + a;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const latInput = document.getElementById('id_center_latitude');
|
||||
const lngInput = document.getElementById('id_center_longitude');
|
||||
const calcButton = document.getElementById('map-center-calculate');
|
||||
const errorMessage = calcButton.nextElementSibling;
|
||||
|
||||
calcButton.addEventListener('click', () => {
|
||||
const lat = [];
|
||||
const lng = [];
|
||||
|
||||
errorMessage.setAttribute('hidden', '');
|
||||
|
||||
[].slice.call(document.querySelectorAll('#id_points-FORMS > li:not(.deleted)'))
|
||||
.forEach(function (child) {
|
||||
const latitude = child.querySelector('[name$=-latitude]').value;
|
||||
const longitude = child.querySelector('[name$=-longitude]').value;
|
||||
|
||||
if (isNumber(latitude) && isNumber(longitude)) {
|
||||
lat.push(Number(latitude));
|
||||
lng.push(Number(longitude));
|
||||
}
|
||||
});
|
||||
|
||||
if (!lat.length) {
|
||||
errorMessage.removeAttribute('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
latInput.value = lat.reduce(add) / lat.length;
|
||||
lngInput.value = lng.reduce(add) / lng.length;
|
||||
});
|
||||
});
|
|
@ -0,0 +1,8 @@
|
|||
{% load i18n %}
|
||||
<button type="button" class="button button-secondary" id="map-center-calculate">
|
||||
{% trans "Calculate from the points" %}
|
||||
</button>
|
||||
|
||||
<p class="error-message" hidden>
|
||||
{% trans "Unable to calculate the geometric center of the points. Verify that you have at least one point with valid latitude and longitude." %}
|
||||
</p>
|
Référencer dans un nouveau ticket