adapting list views

lostplaces/lostplaces_app/models.py

@@ -9,6 +9,7 @@ database.
 import os
 import uuid
 
+from django.urls import reverse
 from django.db import models
 from django.contrib.auth.models import User
 from django.db.models.signals import post_save

lostplaces/lostplaces_app/templates/home.html

@@ -2,8 +2,8 @@
 
 {% load static %}
 {% block additional_head %}
-    <link rel="stylesheet" href="{% static 'maps/ol.css' %}" type="text/css">
+<link rel="stylesheet" href="{% static 'maps/ol.css' %}" type="text/css">
-    <script src="{% static 'maps/ol.js' %}"></script>
+<script src="{% static 'maps/ol.js' %}"></script>
 {% endblock additional_head %}
 
 # {% block title %}Start{% endblock %}
@@ -14,7 +14,7 @@
 <article class="LP-TextSection">
 </article>
 
-{% include 'partials/osm_map.html' %}
+{% include 'partials/osm_map.html' with config=map_config %}
 <div class="LP-PlaceGrid">
     <h1 class="LP-Headline LP-Headline">Explore the latest locations</h1>
     <ul class="LP-PlaceGrid__Grid">

lostplaces/lostplaces_app/templates/partials/osm_map.html

@@ -18,13 +18,13 @@
 
             var vectorSource = new ol.source.Vector({
                 features: [
-                    {% for config.point in point_list %}
+                    {% for point in config.point_list %}
                         new ol.Feature({
                             geometry: new ol.geom.Point(
                                 ol.proj.fromLonLat([{{point.longitude}},{{point.latitude}}])
                             ),
                             url: '{{point.get_absolute_url}}',
-                            name: '{{point.name}}'
+                            name: '  {{point.name}}'
                         }),
                     {% endfor %}
                 ]

lostplaces/lostplaces_app/templates/place/place_list.html

@@ -2,54 +2,54 @@
 {% load static %}
 
 {% block additional_head %}
-    <link rel="stylesheet" href="{% static 'maps/ol.css' %}" type="text/css">
+<link rel="stylesheet" href="{% static 'maps/ol.css' %}" type="text/css">
-    <script src="{% static 'maps/ol.js' %}"></script>
+<script src="{% static 'maps/ol.js' %}"></script>
 {% endblock additional_head %}
 
 {% block title %}Lost Places{% endblock %}
 
 {% block maincontent %}
 
-{% include 'partials/osm_map.html' %}
+{% include 'partials/osm_map.html' with config=map_config %}
 <div class="LP-PlaceList">
     <h1 class="LP-Headline">Listing our places</h1>
     <ul class="LP-PlaceList__List">
         {% for place in place_list %}
-            <li class="LP-PlaceList__Item">
+        <li class="LP-PlaceList__Item">
-                <a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
+            <a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
-                    <article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
+                <article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
-                        <div class="LP-PlaceTeaser__Image">
+                    <div class="LP-PlaceTeaser__Image">
-                            <img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
+                        <img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
+                    </div>
+                    <div class="LP-PlaceTeaser__Meta">
+                        <div class="LP-PlaceTeaser__Info">
+                            <span class="LP-PlaceTeaser__Title">
+                                <h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
+                            </span>
+                            <span class="LP-PlaceTeaser__Detail">
+                                <p class="LP-Paragraph">{{place.location}}</p>
+                            </span>
                         </div>
-                        <div class="LP-PlaceTeaser__Meta">
+                        <div class="LP-PlaceTeaser__Description">
-                            <div class="LP-PlaceTeaser__Info">
+                            <p class="LP-Paragraph">
-                                <span class="LP-PlaceTeaser__Title">
+                                {% if place.description|length > 210 %}
-                                    <h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
+                                {{place.description|truncatechars:210|truncatewords:-1}}
-                                </span>
+                                {% else %}
-                                <span class="LP-PlaceTeaser__Detail">
+                                {{place.description}}
-                                    <p class="LP-Paragraph">{{place.location}}</p>
+                                {% endif %}
-                                </span>
+                            </p>
-                            </div>
+                        </div>
-                            <div class="LP-PlaceTeaser__Description">
+                        <div class="LP-PlaceTeaser__Icons">
-                                <p class="LP-Paragraph">
+                            <ul class="LP-Icon__List">
-                                    {% if place.description|length > 210 %}
+                                <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/favourite.svg' %}" /></li>
-                                        {{place.description|truncatechars:210|truncatewords:-1}}
-                                    {% else %}
-                                        {{place.description}}
-                                    {% endif %}
-                                </p>
-                            </div>
-                            <div class="LP-PlaceTeaser__Icons">
-                                <ul class="LP-Icon__List">
-                                    <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/favourite.svg' %}" /></li>
                                 <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/location.svg' %}" /></li>
                                 <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/flag.svg' %}" /></li>
-                                </ul>
+                            </ul>
-                            </div>
                         </div>
-                    </article>
+                    </div>
-                </a>
+                </article>
-            </li>
+            </a>
+        </li>
         {% endfor %}
     </ul>
 

lostplaces/lostplaces_app/tests/views/test_place_views.py

@@ -68,6 +68,6 @@ class TestPlaceListView(ViewTestCase, TestCase):
         self.client.login(username='testpeter', password='Develop123')
         response = self.client.get(reverse_lazy('place_list'))
         
-        self._test_has_context_key(response, 'place_map_center')
+        self._test_has_context_key(response, 'map_config')
     
     

lostplaces/lostplaces_app/views/place_views.py

@@ -23,7 +23,10 @@ class PlaceListView(IsAuthenticated, ListView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context['place_map_center'] = Place.average_latlon(context['place_list'])
+        context['map_config'] = {
+            'point_list': context['place_list'],
+            'map_center': Place.average_latlon(context['place_list'])
+        }
         return context
 
 class PlaceDetailView(IsAuthenticated, View):

lostplaces/lostplaces_app/views/views.py

@@ -27,10 +27,12 @@ class SignUpView(SuccessMessageMixin, CreateView):
 class HomeView(IsAuthenticated, View):
     def get(self, request, *args, **kwargs):
         place_list = Place.objects.all().order_by('-submitted_when')[:10]
-        place_map_center = Place.average_latlon(place_list)
         context = {
             'place_list': place_list,
-            'place_map_center': place_map_center
+            'map_config': {
+                'point_list': place_list,
+                'map_center': Place.average_latlon(place_list)
+            }
         }
         return render(request, 'home.html', context)