feat(annonces): ajoute une carte des annonces
Parent
62084a83d8
révision
b055b8f191
|
@ -16,7 +16,7 @@ $(() => {
|
|||
done();
|
||||
}
|
||||
}
|
||||
function prepareMap(map, mapdiv, height, campagne) {
|
||||
function prepareMap(map, mapdiv, height, indexArgName, campagne) {
|
||||
mapdiv.html('');
|
||||
mapdiv.css('height', height);
|
||||
map = L.map(mapdiv[0]).setView([50.004, 2.406], 7);
|
||||
|
@ -24,7 +24,7 @@ $(() => {
|
|||
let fullLink = '';
|
||||
const campagneArg = campagne ? `&campagne=${campagne}` : '';
|
||||
if (!mapdiv.hasClass('leaflet-map-full')) {
|
||||
fullLink = `<a href="/carto-full?evts=${data}${campagneArg}"` +
|
||||
fullLink = `<a href="/carto-full?${indexArgName}=${data}${campagneArg}"` +
|
||||
'target="_blank">Afficher en grand format</a>, ';
|
||||
}
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
|
@ -45,7 +45,7 @@ $(() => {
|
|||
const apiPath = '/api/v2/pages/';
|
||||
const campagne = mapdiv.attr('data-campagne');
|
||||
loadLeaflet(map, () => {
|
||||
map = prepareMap(map, mapdiv, height, campagne);
|
||||
map = prepareMap(map, mapdiv, height, 'evts', campagne);
|
||||
|
||||
const icon = {};
|
||||
for (const theme of ['primary', 'secondary', 'tertiary']) {
|
||||
|
@ -81,4 +81,45 @@ $(() => {
|
|||
});
|
||||
});
|
||||
});
|
||||
$('.leaflet-annonce-map').each(function () {
|
||||
let map;
|
||||
const mapdiv = $(this);
|
||||
const w = $(window);
|
||||
const ratio = Math.max(2 / 3, w.height() / w.width());
|
||||
const height = mapdiv.width() * ratio;
|
||||
const apiPath = '/api/v2/pages/';
|
||||
loadLeaflet(map, () => {
|
||||
map = prepareMap(map, mapdiv, height, 'annonces', false);
|
||||
|
||||
const icon = {};
|
||||
for (const theme of ['primary', 'secondary', 'tertiary']) {
|
||||
icon[theme] = L.divIcon({
|
||||
className: `leaflet-map-icon text-${theme}`,
|
||||
iconSize: [24, 42],
|
||||
iconAnchor: [12, 42],
|
||||
popupAnchor: [0, -30]
|
||||
});
|
||||
}
|
||||
|
||||
mapdiv.attr('data-src').split(',').map((id) => {
|
||||
$.get(`${apiPath}${id}/`, (data) => {
|
||||
data.get_api_queryset.map((evt) => {
|
||||
const theme = evt.get_theme_color;
|
||||
const coords = [evt.latitude, evt.longitude];
|
||||
const content = evt.content;
|
||||
L.marker(coords, {
|
||||
icon: icon[theme]
|
||||
}).addTo(map)
|
||||
.bindPopup(content, {
|
||||
className: 'leaflet-map-popup',
|
||||
maxHeight: height - 120,
|
||||
keepInView: true
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
// Cartes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.leaflet-annonce-map,
|
||||
.leaflet-map {
|
||||
height: 200px;
|
||||
}
|
||||
|
|
|
@ -235,6 +235,14 @@ class Carte(mixins.SetBlockTheme, blocks.StructBlock):
|
|||
)
|
||||
|
||||
|
||||
@register_contenu()
|
||||
class CarteAnnonces(mixins.SetBlockTheme, blocks.StructBlock):
|
||||
class Meta:
|
||||
icon = 'openquote'
|
||||
group = 'media'
|
||||
label = 'carte des annonces'
|
||||
|
||||
|
||||
@register_contenu()
|
||||
class Tableau(mixins.SetBlockTheme, mixins.SetThemeColor, blocks.StructBlock):
|
||||
class Meta:
|
||||
|
|
|
@ -1076,6 +1076,40 @@ class AnnonceIndex(mixins.UniqPage, mixins.SiteCommonIndex, SitePage):
|
|||
|
||||
return qs
|
||||
|
||||
# Export fields over the API
|
||||
# --------------------------
|
||||
|
||||
def get_excerpt(self, a):
|
||||
return render_to_string(
|
||||
'biohdf/includes/annonce.html',
|
||||
context={'annonce': a},
|
||||
)
|
||||
|
||||
@property
|
||||
def get_api_queryset(self):
|
||||
fields = [
|
||||
'id',
|
||||
'url',
|
||||
'title',
|
||||
'geolocalisation',
|
||||
'longitude',
|
||||
'latitude',
|
||||
'get_theme_color',
|
||||
]
|
||||
return [
|
||||
{
|
||||
**{f: getattr(a, f) for f in fields},
|
||||
'model_name': a._meta.model_name,
|
||||
'content': self.get_excerpt(a),
|
||||
}
|
||||
for a in self.get_default_queryset()
|
||||
]
|
||||
|
||||
api_fields = [
|
||||
APIField('get_theme_color'),
|
||||
APIField('get_api_queryset'),
|
||||
]
|
||||
|
||||
|
||||
class Annonce(SitePage, mixins.GeoLocated):
|
||||
"""
|
||||
|
|
|
@ -22,15 +22,19 @@ class CartoView(mixins.ThemeMixin, generic.ListView):
|
|||
except Exception:
|
||||
return False
|
||||
|
||||
evts = self.request.GET.get('evts', '')
|
||||
indexes = models.EvenementIndex.objects.filter(
|
||||
id__in=[int(i) for i in evts.split(',') if can_parse(i)]
|
||||
)
|
||||
campagne = taxonomy.Campagne.objects.filter(
|
||||
slug=self.request.GET.get('campagne', '')
|
||||
).first()
|
||||
return {'indexes': indexes, 'campagne': campagne}
|
||||
|
||||
indexes = []
|
||||
if 'evts' in self.request.GET:
|
||||
evts = self.request.GET.get('evts', '')
|
||||
indexes = models.EvenementIndex.objects.filter(
|
||||
id__in=[int(i) for i in evts.split(',') if can_parse(i)]
|
||||
)
|
||||
campagne = taxonomy.Campagne.objects.filter(
|
||||
slug=self.request.GET.get('campagne', '')
|
||||
).first()
|
||||
return {'indexes': indexes, 'campagne': campagne}
|
||||
elif 'annonces' in self.request.GET:
|
||||
indexes = models.AnnonceIndex.objects.all()
|
||||
return {'indexes': indexes, 'annonces': True}
|
||||
|
||||
class SearchView(mixins.ThemeMixin, generic.ListView):
|
||||
model = models.SitePage
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
{% extends "./_baseblock.html" %}
|
||||
{% load wagtailcore_tags %}
|
||||
|
||||
{% block interieur %}
|
||||
<div class="leaflet-annonce-map" data-src="{{ page.get_current_annonce_index.id }}">
|
||||
Cartographie des annonces engendrés par la page d'index : <a href="{{ page.get_current_annonce_index.url }}"><tt>{{ page.get_current_annonce_index }}</tt></a></li>.
|
||||
</div>
|
||||
{% endblock %}
|
|
@ -5,13 +5,13 @@
|
|||
|
||||
{% block content %}
|
||||
<div class="maincontent">
|
||||
<div class="leaflet-map leaflet-map-full"
|
||||
<div class="{% if annonces %}leaflet-annonce-map{% else %}leaflet-map{% endif %} leaflet-map-full"
|
||||
{% if campagne %}
|
||||
data-campagne="{{ campagne.slug }}"
|
||||
{% endif %}
|
||||
data-src="{% for page in indexes %}{{ page.id }}{% if not forloop.last %},{% endif %}{% endfor %}"
|
||||
>
|
||||
Cartographie des formations et évènements engendrés par les pages d'index :
|
||||
Cartographie des annonces ou formations et évènements engendrés par les pages d'index :
|
||||
<ul>
|
||||
{% for page in value.indexes %}
|
||||
<li><a href="{{ page.url }}"><tt>{{ page.url }}</tt></a></li>
|
||||
|
|
Chargement…
Référencer dans un nouveau ticket