Added live search to teams demo page

Live search using ajax

src/mainapp/teams_demo_test.py

@@ -0,0 +1,11 @@
+import names
+from string import ascii_lowercase
+
+created_teams = []
+for char in ascii_lowercase:
+    created_teams.append({
+        "identifier": char.upper(),
+        "members": [{
+            "name": names.get_full_name()
+        } for i in range(9)]
+    })

src/mainapp/templates/teams.html

@@ -16,32 +16,13 @@
             </div>
             <div class="col-md-6 col-xl-4">
                 <div class="input-group mb-4 mb-md-0">
-                    <input type="search" class="form-control" placeholder="Search">
+                    <input type="search" class="form-control" placeholder="Search" id="search">
                     <button type="button" class="btn border"><i class="bi bi-search"></i></button>
                 </div>
             </div>
         </div>
 
-        <div class="row">
+        <div class="row" id="teamsContainer"></div>
-
-            {% for team in teams %}
-                <div class="col-12 col-md-6 col-xl-4 mb-4">
-                    <div class="p-4 bg-body-tertiary rounded h-100">
-                        <h4>{{team.identifier}}</h4>
-                        <ul class="list-unstyled ul-cols-2">
-                            {% for member in team.members %}
-                                <li>
-                                    <span type="button" class="team-member" onclick="javascript:openEditModal('{{member.name}}');">
-                                        {{member.name}}
-                                    </span>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                </div>
-            {% endfor %}
-
-        </div>
     </div>
 
     <!-- Edit Modal -->
@@ -79,6 +60,58 @@
 
 {% block scripts %}
     <script type="text/javascript">
+        $(document).ready(() => {
+            loadTeams();
+
+            var searchTimeout = null;
+
+            $("#search").keyup(() => {
+                clearTimeout(searchTimeout);
+
+                searchTimeout = setTimeout(() => {
+                    loadTeams($("#search").val());
+                }, 500)
+            })
+        })
+
+        function loadTeams(search="") {
+            $.ajax({
+                url: "{% url 'get-teams' %}",
+                type: "post",
+                data: {
+                    "csrfmiddlewaretoken": "{{ csrf_token }}",
+                    "search": search
+                },
+                success: (results) => {
+                    $("#teamsContainer").html("");
+
+                    for (var i = 0; i < results.teams.length; i++) {
+                        var team = results.teams[i];
+                        $("#teamsContainer").append(
+                            "<div class='col-12 col-md-6 col-xl-4 mb-4'>" +
+                                "<div class='p-4 bg-body-tertiary rounded h-100'>" +
+                                    `<h4>${team.identifier}</h4>` +
+                                    "<ul class='list-unstyled ul-cols-2 team-members'>" +
+                                    "</ul>" +
+                                "</div>" +
+                            "</div>"
+                        );
+                        for (var j = 0; j < team.members.length; j++) {
+                            var member = team.members[j];
+                            $("#teamsContainer").find(".team-members").last().append(
+                                "<li>" + 
+                                    `<span type='button' class='team-member' onclick='javascript:openEditModal("${member.name}");'>${member.name}</span>` +
+                                "</li>"
+                            );
+                        }
+                    }
+                },
+                error: (xhr, textStatus, errorThrown) => {
+                    alert(errorThrown);
+                }
+            });
+        }
+
         function openEditModal(name) {
 
             var [first, last] = name.split(" ");

src/mainapp/urls.py

@@ -7,5 +7,6 @@ urlpatterns = [
     path('scoreboard/', views.scoreboard, name='scoreboard'),
     path('teams/', views.teams, name='teams'),
 
-    path('bulk-peg/', views.bulk_create_pegs, name='bulk-peg')
+    path('bulk-peg/', views.bulk_create_pegs, name='bulk-peg'),
+    path('get-teams/', views.get_teams, name='get-teams'),
 ]

src/mainapp/views.py

@@ -2,10 +2,11 @@
 
 from string import ascii_lowercase
 
-import names
 from django.shortcuts import render, redirect
+from django.http import JsonResponse
 
 from .models import Peg
+from .teams_demo_test import created_teams
 
 def index(request):
     return render(request, 'index.html')
@@ -17,18 +18,7 @@ def scoreboard(request):
     return render(request, 'scoreboard.html')
 
 def teams(request):
-
+    return render(request, 'teams.html')
-    teams = []
-    for char in ascii_lowercase:
-        teams.append({
-            "identifier": char.upper(),
-            "members": [{
-                "name": names.get_full_name()
-            } for i in range(9)]
-        })
-
-    context = {"teams": teams}
-    return render(request, 'teams.html', context=context)
 
 def bulk_create_pegs(request):
     """Bulk create pegs"""
@@ -39,3 +29,21 @@ def bulk_create_pegs(request):
 
     # return to previous page
     return redirect(request.META.get('HTTP_REFERER'))
+
+def get_teams(request):
+    """Returns list of teams."""
+
+    if not request.POST:
+        return
+
+    search = request.POST.get("search")
+
+    if search:
+        created_teams.sort(reverse=True, key=lambda team: next((
+            member["name"] for member in team["members"]
+            if search.lower() in member["name"].lower()), ""
+        ))
+    else:
+        created_teams.sort(reverse=False, key=lambda team: team["identifier"])
+
+    return JsonResponse({"teams": created_teams})