Feat: UI templates for the districts application

pems/districts/templates/districts/district.html

@@ -1,2 +1,24 @@
-<h1>District {{ district }}</h1>
-<p>URL of route: {% url "districts:district" district %}</p>
+{% extends "districts/index.html" %}
+
+{% block headline %}
+    District {{ url_district }} - {{ district_query.name }}
+{% endblock headline %}
+
+{% block district-content %}
+    <div class="row">
+        <div class="col-lg-4 border">
+            <h2>Form</h2>
+        </div>
+        <div class="col-lg-8 border">
+            <h2>Chart</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-4 border">
+            <h2>Details for {{ district_query.name }}</h2>
+        </div>
+        <div class="col-lg-8 border">
+            <h2>Map</h2>
+        </div>
+    </div>
+{% endblock district-content %}

pems/districts/templates/districts/index.html

@@ -1,7 +1,46 @@
 {% extends "core/base.html" %}
+
 {% block headline %}
     Districts
 {% endblock headline %}
+
 {% block inner-content %}
-    <p>Districts</p>
+    <div class="container p-t-lg">
+        <div class="row">
+            <div class="col-lg-2 pb-lg-5" role="complementary">
+                <!-- Side navigation -->
+                <nav aria-labelledby="navigation-list" class="side-navigation">
+                    <ul class="list-navigation">
+                        {% for district in district_queryset %}
+                            <li>
+                                <a href="{% url 'districts:district' district.number %}">District {{ district.number }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </nav>
+            </div>
+            <div class="col-lg-10 pb-lg-5">
+
+                {% block district-content %}
+                    <div class="row">
+                        <div class="col-lg-4 border">
+                            <h2>Form</h2>
+                        </div>
+                        <div class="col-lg-8 border">
+                            <h2>Chart</h2>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-4 border">
+                            <h2>Details</h2>
+                        </div>
+                        <div class="col-lg-8 border">
+                            <h2>Map</h2>
+                        </div>
+                    </div>
+                {% endblock district-content %}
+
+            </div>
+        </div>
+    </div>
 {% endblock inner-content %}

pems/districts/views.py

@@ -1,15 +1,24 @@
 from django.views.generic import TemplateView
 
+from .models import District
+
 
 class IndexView(TemplateView):
     template_name = "districts/index.html"
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["district_queryset"] = District.objects.all()
+        return context
+
 
 class DistrictView(TemplateView):
     template_name = "districts/district.html"
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         district = self.kwargs.get("district")
-        context["district"] = district
+        context["url_district"] = district
+        context["district_queryset"] = District.objects.all()
+        context["district_query"] = District.objects.all().get(number=district)
         return context

tests/pytest/pems/districts/test_views.py

@@ -1,6 +1,26 @@
 import pytest
 
 from pems.districts import views
+from pems.districts.models import District
+
+
+class TestIndexViewView:
+    @pytest.fixture
+    def view(app_request):
+        v = views.IndexView()
+        v.setup(app_request)
+
+        return v
+
+    @pytest.mark.django_db
+    def test_get_context_data(self, view):
+
+        context = view.get_context_data()
+
+        assert set(context["district_queryset"]) == set(District.objects.all())
+
+    def test_template_name(self, view):
+        assert view.template_name == "districts/index.html"
 
 
 class TestDistrictView:
@@ -11,11 +31,13 @@ def view(app_request):
 
         return v
 
+    @pytest.mark.django_db
+    @pytest.mark.usefixtures("model_District")
     def test_get_context_data(self, view):
 
         context = view.get_context_data()
 
-        assert context["district"] == 1
+        assert context["url_district"] == 1
 
     def test_template_name(self, view):
         assert view.template_name == "districts/district.html"