cliss21
/
wagtail-maps
Archivé
5
0
Bifurcation 0

feat(ui): add a button to calculate the map's center

main
Jérôme Lebleu 2021-10-13 19:11:41 +02:00
Parent 61371f9f49
révision f9c0de2377
4 fichiers modifiés avec 59 ajouts et 1 suppressions

Voir le fichier

@ -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"),
),

Voir le fichier

@ -0,0 +1,3 @@
.center-calculate .button {
width: 100%;
}

Voir le fichier

@ -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;
});
});

Voir le fichier

@ -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>