Merge pull request #25 from ronardcaktus/country-comparison

Country comparison

.gitignore

@@ -9,3 +9,6 @@ apps/__pycache__
 apps/countries/__pycache__
 debt_visual/__pycache__
 .coverage
+
+importer_script.py
+test_countries.csv

apps/countries/templates/base.html

@@ -55,10 +55,10 @@
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                     <li class="nav-item active">
-                        <a class="nav-link" aria-current="page" href="#intro"> 🔍 Country</a>
+                        <a class="nav-link" aria-current="page" href="{% url 'home' %}"> 🔍 Country</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#" rel="nofollow">Compare Debt</a>
+                        <a class="nav-link" href="{% url 'countries-comparison' %}" rel="nofollow">Compare Debt</a>
                     </li>
                     <li class="nav-item dropdown">
                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

apps/countries/templates/country/autocomplete_country_1.html

@@ -0,0 +1,16 @@
+<table id="autocomplete-comparison-list" class="table table-borderless">
+    <tbody class="text-start">
+        <tr>
+            {% for country in countries %}
+            <td><a class="lead text-decoration-none" href="{% url 'comparison_country_1' country_id=country.id %}"
+                    style="color: black;">
+                    {{ country.flag }} {{ country.name }}</a>
+            </td>
+            <td><a class="lead text-decoration-none" href="{% url 'comparison_country_1' country_id=country.id %}"
+                    style="color: black;">
+                    {{ country.region_formatted}}</a>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>

apps/countries/templates/country/autocomplete_country_2.html

@@ -0,0 +1,16 @@
+<table style="margin-left: 8em" class="table table-borderless">
+    <tbody class="text-start">
+        <tr>
+            {% for country in countries %}
+            <td><a class="lead text-decoration-none" href="{% url 'comparison_country_2' country_id=country.id %}"
+                    style="color: black;">
+                    {{ country.flag }} {{ country.name }}</a>
+            </td>
+            <td><a class="lead text-decoration-none" href="{% url 'comparison_country_2' country_id=country.id %}"
+                    style="color: black;">
+                    {{ country.region_formatted}}</a>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>

apps/countries/templates/country/display_country_1.html

@@ -0,0 +1,2 @@
+<span>{{ country.flag }}</span>
+<h2> {{ country.name }} </h2>

apps/countries/templates/country/display_country_2.html

@@ -0,0 +1,2 @@
+<span>{{ country.flag }}</span>
+<h2> {{ country.name }} </h2>

apps/countries/templates/country/match_countries.html

@@ -0,0 +1,40 @@
+{% extends "base.html" %}
+
+{% block title %} Compare Countries {% endblock title %}
+
+{% block content %}
+<!-- HTML forms -->
+<div class="container py-4 pt-5">
+    <div class="row justify-content-center align-items-center">
+        <div class="col-md-5">
+            <div class="input-group">
+                <input class="form-control border-end-0 border rounded-pill form-control-lg" autocomplete="off"
+                    name="q_country_1" type="text" placeholder="Search..." hx-get="{% url 'search_countries' %}"
+                    hx-include="[name='q_country_1']" hx-trigger="keyup changed delay:200ms, search"
+                    hx-target="#country-search-1" />
+            </div>
+        </div>
+        <div class="col-md-2 text-center">
+            <h3 class="lead text-muted">vs.</h3>
+        </div>
+        <div class="col-md-5">
+            <div class="input-group">
+                <input class="form-control border-end-0 border rounded-pill form-control-lg" autocomplete="off"
+                    name="q_country_2" type="text" placeholder="Search..." hx-get="{% url 'search_countries' %}"
+                    hx-include="[name='q_country_2']" hx-trigger="keyup changed delay:200ms, search"
+                    hx-target="#country-search-2" />
+            </div>
+        </div>
+        <!-- Autocomplete results -->
+        <div class="row">
+            <div class="col">
+                <div id="country-search-1"></div>
+            </div>
+            <div class="col">
+                <div id="country-search-2"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock content %}

apps/countries/urls.py

@@ -4,6 +4,23 @@
 
 urlpatterns = [
     path("", views.index, name="home"),
+    path(
+        "countries-comparison/",
+        views.match_countries,
+        name="countries-comparison",
+    ),
     path("search/", views.search_countries, name="search_countries"),
-    path("country-detail/<int:country_id>/", views.country_detail, name="country_details"),
+    path(
+        "country-detail/<int:country_id>/", views.country_detail, name="country_details"
+    ),
+    path(
+        "compare-country/<int:country_id>/",
+        views.comparison_country_1,
+        name="comparison_country_1",
+    ),
+    path(
+        "compare-country-2/<int:country_id>/",
+        views.comparison_country_2,
+        name="comparison_country_2",
+    ),
 ]

apps/countries/views.py

@@ -1,4 +1,4 @@
-from django.shortcuts import render
+from django.shortcuts import get_object_or_404, render
 
 from apps.countries.models import Country, GDPTrend
 
@@ -24,8 +24,53 @@ def country_detail(request, country_id):
 
 
 def search_countries(request):
-    query = request.GET.get("q")
     countries = []
-    if query:
-        countries = Country.objects.filter(name__icontains=query)
-    return render(request, "country/list.html", {"countries": countries})
+    search_keys = list(request.GET.keys())
+    search_key = search_keys[0] if search_keys else None
+    if search_key == "q":
+        query = request.GET.get("q")
+        if query:
+            countries = Country.objects.filter(name__icontains=query)
+        return render(request, "country/list.html", {"countries": countries})
+    # I resisted creating two templates, one for each country's autocomplete
+    # results, but I could not get the alignment to work solely by passing
+    # a variable and using a conditional.
+    elif search_key == "q_country_1":
+        query = request.GET.get("q_country_1")
+        if query:
+            countries = Country.objects.filter(name__icontains=query)
+        return render(
+            request,
+            "country/autocomplete_country_1.html",
+            {"countries": countries},
+        )
+    else:
+        query = request.GET.get("q_country_2")
+        if query:
+            countries = Country.objects.filter(name__icontains=query)
+        return render(
+            request,
+            "country/autocomplete_country_2.html",
+            {"countries": countries},
+        )
+
+
+def match_countries(request):
+    return render(request, "country/match_countries.html")
+
+
+def comparison_country_1(request, country_id):
+    country = get_object_or_404(Country, id=country_id)
+    request.session["debt_to_gdp_ratio"] = str(country.debt_to_gpd_ratio)
+    return render(request, "country/display_country_1.html", {"country": country})
+
+
+def comparison_country_2(request, country_id):
+    country = get_object_or_404(Country, id=country_id)
+    country_1_debt_to_gdp_ratio = (
+        request.session.get("debt_to_gdp_ratio")
+        if request.session.get("debt_to_gdp_ratio")
+        else None
+    )
+    print(country_1_debt_to_gdp_ratio)  # TODO: Delete me later
+    return render(request, "country/display_country_2.html", {"country": country})