diff --git a/geotrek/common/forms.py b/geotrek/common/forms.py index 1b013ffde3..7cf44919c2 100644 --- a/geotrek/common/forms.py +++ b/geotrek/common/forms.py @@ -23,7 +23,7 @@ from geotrek.authent.models import (StructureOrNoneRelated, StructureRelated, default_structure) from geotrek.common.mixins.models import PublishableMixin -from geotrek.common.models import AccessibilityAttachment, HDViewPoint +from geotrek.common.models import AccessibilityAttachment, AnnotationCategory, HDViewPoint from geotrek.common.utils.translation import get_translated_fields from .mixins.models import NoDeleteMixin @@ -472,6 +472,11 @@ class Meta: class HDViewPointAnnotationForm(forms.ModelForm): annotations = forms.JSONField(label=False) + annotations_categories = forms.JSONField(label=False) + annotation_category = forms.ModelChoiceField( + required=False, + queryset=AnnotationCategory.objects.all() + ) def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) @@ -490,6 +495,20 @@ def __init__(self, *args, **kwargs): 'style': 'display: none;' } ) + self.fields['annotations_categories'].required = False + self.fields['annotations_categories'].widget = forms.Textarea( + attrs={ + 'name': 'annotations_categories', + 'rows': '15', + 'type': 'textarea', + 'autocomplete': 'off', + 'autocorrect': 'off', + 'autocapitalize': 'off', + 'spellcheck': 'false', + # Do not show GEOJson textarea to users + 'style': 'display: none;' + } + ) self._init_layout() def _init_layout(self): @@ -502,6 +521,8 @@ def _init_layout(self): leftpanel = Div( 'annotations', + 'annotations_categories', + 'annotation_category', css_id="modelfields", ) formactions = FormActions( @@ -530,4 +551,4 @@ def _init_layout(self): class Meta: model = HDViewPoint - fields = ('annotations', ) + fields = ('annotations', 'annotations_categories' ) diff --git a/geotrek/common/models.py b/geotrek/common/models.py index 5c0058bdf7..84ce749556 100755 --- a/geotrek/common/models.py +++ b/geotrek/common/models.py @@ -328,6 +328,7 @@ class HDViewPoint(TimeStampedModelMixin, MapEntityMixin): content_type = models.ForeignKey(ContentType, on_delete=models.PROTECT) content_object = GenericForeignKey('content_type', 'object_id') annotations = models.JSONField(verbose_name=_("Annotations"), blank=True, default=dict) + annotations_categories = models.JSONField(blank=True, default=dict) uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True) author = models.CharField(blank=True, default='', max_length=128, verbose_name=_('Author'), diff --git a/geotrek/common/static/common/js/annotations.js b/geotrek/common/static/common/js/annotations.js index 72d3b6eade..4c229404cc 100644 --- a/geotrek/common/static/common/js/annotations.js +++ b/geotrek/common/static/common/js/annotations.js @@ -238,7 +238,13 @@ function initAnnotationsWidget(map) { } var entry = $('#annotationlist .entry#sample').clone(); entry.attr({ id: '', 'annotation-id': id }); - entry.on('click', edit_label); + entry.find('.entry-name').on('click', edit_label); + if (annotation.type() == 'point') { + var category_selector = $('#id_annotation_category').clone(); + category_selector.attr('for-annotation', id); + category_selector.on("change", update_annotation_category_event) + entry.find('.entry-name').after(category_selector); + } entry.find('.entry-name').text(annotation.name()); if (query.editing == id) { entry.find('.entry-adjust').hide(); @@ -258,10 +264,26 @@ function initAnnotationsWidget(map) { } } + function update_annotation_category(annotation_id, category_id) { + var annotations_categories = JSON.parse($("#div_id_annotations_categories textarea").val()) + if (category_id == "") { + delete annotations_categories[annotation_id] + } else { + annotations_categories[annotation_id] = category_id + } + $("#div_id_annotations_categories textarea").val(JSON.stringify(annotations_categories)) + } + + function update_annotation_category_event(e) { + category_id = e.target.value + annotation_id = e.target.getAttribute('for-annotation') + update_annotation_category(annotation_id, category_id) + } + function edit_label(event) { - var entry = $(event.currentTarget); + var span = $(event.currentTarget); + entry = span.closest('.entry') // When clicking annotation name, display text input allowing to change it - var span = entry.find('.entry-name') if (span.find('input').length) { return } @@ -327,6 +349,7 @@ function initAnnotationsWidget(map) { handleAnnotationChange(evt); break; case 'remove': + update_annotation_category(id, "") layer.removeAnnotation(annotation); break; case 'remove-all': diff --git a/geotrek/common/static/common/style.css b/geotrek/common/static/common/style.css index 93c3730170..ae54c302b1 100644 --- a/geotrek/common/static/common/style.css +++ b/geotrek/common/static/common/style.css @@ -38,6 +38,14 @@ fieldset { flex-basis: 55%; } +#div_id_annotation_category { + display: none; +} + +#id_annotation_category { + width: 25rem; +} + .loader-wrapper { display: table; margin: 0 auto;