activated tag functionality in the front-end

Author: ddunc23

memorymap_toolkit/settings/base.py

@@ -39,6 +39,7 @@
     'mmt_api',
     # 3rd Party
     'easy_thumbnails',
+    'rest_framework',
     'filer',
     'mptt',
     'ckeditor',

mmt_api/urls.py

@@ -12,6 +12,7 @@
 	path('1.0/features/<str:source_layer>/<int:pk>', views.feature, name='feature'),
 	path('1.0/features/search/', views.search_features, name='search_features'),
 	path('1.0/features/theme/', views.get_features_by_theme, name='get_features_by_theme'),
+	path('1.0/features/tag/', views.get_features_by_tag, name='get_features_by_tag'),
     path('1.0/features/attachments/documents/<int:pk>', views.document, name='document'),
     path('1.0/features/<str:source_layer>/<int:pk>/attachments/', views.feature_attachments, name='attachments'),
     path('1.0/pages/<str:slug>', views.page, name='page'),

mmt_api/views.py

@@ -202,6 +202,56 @@ def get_features_by_theme(request):
 
 
 
+@api_view()
+def get_features_by_tag(request):
+	"""
+	Returns a JSON list of features in a particular theme.
+	"""
+
+	try:
+		tags = request.GET['tags'].split(',')
+		print(tags)
+	except:
+		return Response('No tags', status=status.HTTP_404_NOT_FOUND)
+
+
+
+	points = Point.objects.filter(tags__name__in=tags)
+	lines = Line.objects.filter(tags__name__in=tags)
+	polygons = Polygon.objects.filter(tags__name__in=tags)
+
+	points_serializer = PointSerializer(points, many=True)
+	lines_serializer = LineSerializer(lines, many=True)
+	polygons_serializer = PolygonSerializer(polygons, many=True)
+
+	points_data = points_serializer.data
+	lines_data = lines_serializer.data
+	polygons_data = polygons_serializer.data
+
+	features = points_data['features'] + lines_data['features'] + polygons_data['features']
+	sorted_features = sorted(features, key=lambda x: x['properties']['name'])
+
+	paginator = Paginator(sorted_features, 20)
+
+	try:
+		page = request.GET['page']
+
+	except:
+		page = 1
+
+	if int(page) > paginator.num_pages:
+		page = paginator.num_pages
+
+	features_list = {
+		'page': page,
+		'totalPages': paginator.num_pages,
+		'features': paginator.page(page).object_list
+	} 
+
+	return Response(features_list)
+
+
+
 @api_view()
 def feature_attachments(request, pk, source_layer):
 	"""

mmt_map/admin.py

@@ -2,7 +2,7 @@
 from django.contrib.gis import admin
 
 # Memory Map Toolkit
-from .models import Theme, Point, Polygon, Line, Document, Image, AudioFile
+from .models import Theme, Point, Polygon, Line, Document, Image, AudioFile, TagList
 from .forms import PointForm, PolygonForm, LineForm
 
 # 3rd Party
@@ -137,8 +137,8 @@ class Meta:
 
 
 
-
 admin.site.register(Theme, ThemeAdmin)
 admin.site.register(Point, PointAdmin)
 admin.site.register(Polygon, PolygonAdmin)
-admin.site.register(Line, LineAdmin)
+admin.site.register(Line, LineAdmin)
+admin.site.register(TagList)

mmt_map/migrations/0029_taglist.py

@@ -0,0 +1,22 @@
+# Generated by Django 3.1.13 on 2022-12-15 15:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('taggit', '0003_taggeditem_add_unique_index'),
+        ('mmt_map', '0028_auto_20200806_1153'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='TagList',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=64)),
+                ('tags', models.ManyToManyField(to='taggit.Tag')),
+            ],
+        ),
+    ]

mmt_map/migrations/0030_auto_20221215_1536.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.1.13 on 2022-12-15 15:36
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mmt_map', '0029_taglist'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='taglist',
+            name='order',
+            field=models.PositiveSmallIntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='taglist',
+            name='published',
+            field=models.BooleanField(default=False),
+        ),
+    ]

mmt_map/models.py

@@ -38,6 +38,17 @@ def __str__(self):
 		return self.name
 
 
+class TagList(models.Model):
+	"""A list of tag instances for display in a dropdown in the frontend"""
+	name = models.CharField(max_length=64)
+	tags = models.ManyToManyField(Tag)
+	published = models.BooleanField(default=False)
+	order = models.PositiveSmallIntegerField(default=0)
+
+	def __str__(self):
+		return self.name
+
+
 class AbstractFeature(models.Model):
 	"""The model class from which all feature objects derive"""
 	name = models.CharField(max_length=140)

mmt_map/views.py

@@ -17,7 +17,7 @@
 from constance import config
 
 # Memory Map Toolkit
-from .models import Point, Line, Polygon, Theme, Document, Image, AudioFile
+from .models import Point, Line, Polygon, Theme, Document, Image, AudioFile, TagList
 from mmt_pages.models import Page
 from mmt_api.serializers import PointSerializer, PolygonSerializer, PointDetailSerializer, DocumentSerializer
 from .vector_tile_helpers import tileIsValid, tileToEnvelope
@@ -28,6 +28,7 @@ def index(request):
 
 	themes = Theme.objects.all()
 	pages = Page.objects.all().order_by('order')
+	tag_lists = TagList.objects.filter(published=True).order_by('order')
 
 	bounds = None
 
@@ -36,15 +37,16 @@ def index(request):
 		bounds = [[config.BOUNDS_SW_LONGITUDE,config.BOUNDS_SW_LATITUDE],[config.BOUNDS_NE_LONGITUDE,config.BOUNDS_NE_LATITUDE]]
 
 
-	return render(request, 'mmt_map/index.html', {'themes': themes, 'bounds': bounds})
+	return render(request, 'mmt_map/index.html', {'themes': themes, 'bounds': bounds, 'tag_lists': tag_lists})
 
 
 def text_only_feature_list(request):
 	"""A text only representation of features to provide access to memory map content for blind and partially-sighted users"""
 
 	themes = Theme.objects.all()
+	tag_lists = TagList.objects.filter(published=True).order_by('order')
 
-	return render(request, 'mmt_map/feature_list.html', {'themes': themes})
+	return render(request, 'mmt_map/feature_list.html', {'themes': themes, 'tag_lists': tag_lists})
 
 
 # Vector tiles are optionally cached to stop the database being spammed to heavily.

project_static/js/accessibleFeatureListHandler.js

@@ -8,8 +8,15 @@ for (let i=0; i < MmtMap.themes.length; i++) {
     $('#themes').append(theme);
 }
 
-
-
+// Add the tags to the menu bar, in the correct tag lists
+
+for (let i=0; i < MmtMap.tagLists.length; i++) {
+    let tl = MmtMap.tagLists[i];
+    $(tl.id).append('<a href="#" class="tag dropdown-item">All</a>');
+    tl.tags.forEach((tag) => {
+        $(tl.id).append('<a href="#" class="tag dropdown-item" ' +'data-tag="' + tag +'">' + tag + '</a>');
+    });
+}
 
 MmtFeatureList.populateList = function(url, params) {
 

project_static/js/accessibleFeatureSearchHandler.js

@@ -52,4 +52,23 @@ $('.theme').click(function(e) {
 		$('.results_title').html('Places in Theme ' + theme);
 		MmtFeatureList.allSites = false;
 	}
+});
+
+/* Tag filtering */
+
+$('.tag').click(function(e) {
+	e.preventDefault();
+	tag = $(this).data('tag');
+	if (tag == undefined) {
+		$('.feature_list').empty();
+		MmtFeatureList.populateList(MmtFeatureList.listUrl, {page: 1});
+		$('.results_title').html('Place Index');
+		MmtFeatureList.allSites = true;
+	} else {
+		$('.feature_list').empty();
+		url = MmtFeatureList.tagUrl;
+		MmtFeatureList.populateList(url, {tags: tag, page: 1});
+		$('.results_title').html('Places Tagged "' + tag + '"');
+		MmtFeatureList.allSites = false;
+	}
 });

project_static/js/filters.js

@@ -33,4 +33,24 @@ $('.theme').click(function(e) {
             $(this).css('color', color);
         });
     }
-});
+});
+
+// Filter features by tag
+
+$('.tag').click(function(e) {
+    e.preventDefault();
+    let tag = $(this).data('tag');
+    if (tag != undefined) {
+        map.setFilter('polygons', ['in', tag, ['get', 'tag_str']]);
+        map.setFilter('polygon_outlines', ['in', tag, ['get', 'tag_str']]);
+        map.setFilter('points', ['in', tag, ['get', 'tag_str']]);
+        map.setFilter('points_labels', tag, ['in', ['get', 'tag_str']]);
+        map.setFilter('polygon_labels', ['in', tag, ['get', 'tag_str']]);
+    } else {
+        map.setFilter('polygons');
+        map.setFilter('polygon_outlines');
+        map.setFilter('points');
+        map.setFilter('points_labels');
+        map.setFilter('polygon_labels');
+    }
+})

project_static/js/mapHandler.js

@@ -1,13 +1,24 @@
 // Add the themes to the menu bar
 
-$('#themes').append('<a href="#" class="theme dropdown-item">All</a>')
+$('#themes').append('<a href="#" class="theme dropdown-item">All</a>');
 
 for (let i=0; i < MmtMap.themes.length; i++) {
     let themes = MmtMap.themes;
     let theme = '<a href="#" class="theme dropdown-item ' + themes[i].name +  '" data-key="' + themes[i].id + '" data-color="' + themes[i].color +'" style="color: '+ themes[i].color +'">' + themes[i].name + '</a>';
     $('#themes').append(theme);
 }
 
+// Add the tags to the menu bar, in the correct tag lists
+
+for (let i=0; i < MmtMap.tagLists.length; i++) {
+    let tl = MmtMap.tagLists[i];
+    $(tl.id).append('<a href="#" class="tag dropdown-item">All</a>');
+    tl.tags.forEach((tag) => {
+        $(tl.id).append('<a href="#" class="tag dropdown-item" ' +'data-tag="' + tag +'">' + tag + '</a>');
+    });
+}
+
+
 
 // If there are switchable layers, add a #maps dropdown to the menu bar
 

templates/mmt_map/base.html

@@ -91,6 +91,17 @@
 							</div>
 						</li>
 						{% endif %}
+						{% if tag_lists %}
+							{% for tl in tag_lists %}
+							<li class="nav-item dropdown">
+								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+									{{ tl.name }}
+								</a>
+								<div class="dropdown-menu" id="taglist_{{ tl.id }}" aria-labelledby="navbarDropdown">
+								</div>
+							</li>
+							{% endfor %}
+						{% endif %}
 					</ul>
 					<form class="form-inline my-2 my-lg-0">
 						<input class="form-control mr-sm-2" placeholder="Search" aria-label="Search" id="map_search">

templates/mmt_map/feature_list.html

@@ -27,6 +27,7 @@ <h1 class="results_title">Place Index</h1>
 		listUrl: '{% url 'feature_list' %}',
 		themeUrl: '{% url 'get_features_by_theme' %}',
 		searchUrl: '{% url 'search_features' %}',
+		tagUrl: '{% url 'get_features_by_tag' %}',
 		allSites: true
 	}
 
@@ -39,6 +40,16 @@ <h1 class="results_title">Place Index</h1>
 				'color': '{{ theme.color }}'
 			},
 			{% endfor %}
+		],
+
+		tagLists: [
+			{% for tl in tag_lists %}
+			{
+				'id': '#taglist_{{ tl.id }}',
+				'name': '{{ tl.name }}',
+				'tags': [{% for tag in tl.tags.all %}"{{ tag }}",{% endfor %}]
+			},
+			{% endfor %}
 		]
 	}
 

templates/mmt_map/index.html

@@ -44,6 +44,16 @@
 		{% endfor %}
 	],
 
+	tagLists: [
+		{% for tl in tag_lists %}
+		{
+			'id': '#taglist_{{ tl.id }}',
+			'name': '{{ tl.name }}',
+			'tags': [{% for tag in tl.tags.all %}"{{ tag }}",{% endfor %}]
+		},
+		{% endfor %}
+	],
+
 	{% if themes %}
 	themeStyleExpressions: [
     'case',