Merge pull request #48 from ryaustin/htmx-army-search

gm3dmo · Oct 6, 2023 · b053735 · b053735
2 parents 53cdba6 + 65126b1
commit b053735
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 178 deletions.
diff --git a/cmp/views.py b/cmp/views.py
diff --git a/core/settings.py b/core/settings.py
@@ -58,6 +58,7 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "django_htmx",
     "cmp",
 ]
 
@@ -69,6 +70,7 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
     "debug_toolbar.middleware.DebugToolbarMiddleware",
 ]
 

diff --git a/requirements.in b/requirements.in
@@ -1,6 +1,7 @@
 Django==4.2.5
 django-environ
 django-debug-toolbar
+django-htmx
 pytest-django
 sentry-sdk
 pytest-cov # used to generate coverage report

diff --git a/requirements.txt b/requirements.txt
@@ -1,5 +1,5 @@
 #
-# This file is autogenerated by pip-compile with Python 3.11
+# This file is autogenerated by pip-compile with Python 3.10
 # by the following command:
 #
 #    pip-compile
@@ -18,10 +18,15 @@ django==4.2.5
     # via
     #   -r requirements.in
     #   django-debug-toolbar
+    #   django-htmx
 django-debug-toolbar==4.2.0
     # via -r requirements.in
 django-environ==0.11.2
     # via -r requirements.in
+django-htmx==1.16.0
+    # via -r requirements.in
+exceptiongroup==1.1.3
+    # via pytest
 flake8==6.1.0
     # via -r requirements.in
 iniconfig==2.0.0
@@ -58,5 +63,14 @@ sqlparse==0.4.4
     # via
     #   django
     #   django-debug-toolbar
+tomli==2.0.1
+    # via
+    #   black
+    #   coverage
+    #   pytest
+typing-extensions==4.8.0
+    # via
+    #   asgiref
+    #   black
 urllib3==2.0.6
     # via sentry-sdk
diff --git a/templates/base.html b/templates/base.html
@@ -28,5 +28,6 @@
     {% block content %}{% endblock %}
     {% block scripts %}{% endblock %}
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/templates/cmp/army-number-search.html b/templates/cmp/army-number-search.html
@@ -1,10 +1,10 @@
 {% extends "base.html" %}
+{% load static %}
 {% block title %}Army Number Search{% endblock %}
 {% block content %}
 
 <div>
-{% load static %}
-<img src="/static/cmp/flag.svg" style="width:20%; height:auto;" alt="The Flag of the British Army. A lion wearing a crown on two crossed swords. ">
+<img src="{% static 'cmp/flag.svg' %}" style="width:20%; height:auto;" alt="The Flag of the British Army. A lion wearing a crown on two crossed swords. ">
 <p></p>
 <h2> British Army Number Search Tool</h2>
 <p>
@@ -15,9 +15,11 @@ <h2> British Army Number Search Tool</h2>
 </p>
 </div>
 <div>
-    <form action="{% url 'army-number-search' %}" method="get">
-        <input type="text" name="q" placeholder="Enter army number" value="787569" class="input-text">
-        <input type="submit" value="Search">
+    <form method="post" hx-post="{% url 'army-number-search' %}" hx-target="#query-response">
+        {% csrf_token %}
+        <input type="text" name="q" placeholder="Enter army number" class="input-text">
+        <input type="submit" value="Search" class="btn btn-secondary">
     </form>
 </div>
+<div class="pt-4" id="query-response"></div>
 {% endblock %}