From b56da36893c23c902770cd3d3b5c602572c7a8d6 Mon Sep 17 00:00:00 2001
From: flifloo <flifloo@gmail.com>
Date: Fri, 3 Dec 2021 06:19:58 +0100
Subject: [PATCH] Dynamic search

---
 boat/views.py              |  3 ++-
 rescue/views.py            |  3 ++-
 static/css/style.css       |  2 +-
 static/js/search.js        | 49 ++++++++++++++++++++++++++++++++++++++
 templates/quicksearch.html | 49 +-------------------------------------
 5 files changed, 55 insertions(+), 51 deletions(-)
 create mode 100644 static/js/search.js

diff --git a/boat/views.py b/boat/views.py
index bb6ef29..f7c92fd 100644
--- a/boat/views.py
+++ b/boat/views.py
@@ -1,4 +1,5 @@
 from django.contrib.auth.decorators import login_required
+from django.core import serializers
 from django.db.models import Q
 from django.http import Http404, HttpResponseRedirect, HttpResponseBadRequest, JsonResponse
 from django.shortcuts import render
@@ -62,4 +63,4 @@ def edit(request, boat_id: int):
 
 
 def ajax_search(request, text: str):
-    return JsonResponse(Boat.objects.filter(Q(name__icontains=text) | Q(description__icontains=text)))
+    return JsonResponse(serializers.serialize("json", Boat.objects.filter(Q(name__icontains=text) | Q(description__icontains=text))), safe=False)
diff --git a/rescue/views.py b/rescue/views.py
index 8e26770..3685fc7 100644
--- a/rescue/views.py
+++ b/rescue/views.py
@@ -1,4 +1,5 @@
 from django.contrib.auth.decorators import login_required
+from django.core import serializers
 from django.db.models import Q
 from django.http import Http404, HttpResponseRedirect, HttpResponseBadRequest, JsonResponse
 from django.shortcuts import render
@@ -58,4 +59,4 @@ def edit(request, rescue_id: int):
 
 
 def ajax_search(request, text: str):
-    return JsonResponse(Rescue.objects.filter(Q(name__icontains=text) | Q(date__icontains=text) | Q(resume__icontains=text)))
+    return JsonResponse(serializers.serialize("json", Rescue.objects.filter(Q(name__icontains=text) | Q(date__icontains=text) | Q(resume__icontains=text))), safe=False)
diff --git a/static/css/style.css b/static/css/style.css
index 68038d9..a1b2b52 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -356,7 +356,7 @@ nav .right .search:hover {
           justify-content: space-evenly;
   -webkit-box-align: center;
       -ms-flex-align: center;
-          align-items: center;
+          align-items: baseline;
 }
 #quicksearch .fast-search .flex-search .search-col {
   -webkit-box-flex: 0;
diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 0000000..7f70fd4
--- /dev/null
+++ b/static/js/search.js
@@ -0,0 +1,49 @@
+let input = document.querySelector(".search-bar input");
+let typingTimer;
+let doneTypingInterval = 2000;
+
+
+input.addEventListener('keyup', () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+});
+
+input.addEventListener('keydown', () => {
+    clearTimeout(typingTimer);
+});
+
+function httpGetAsync(theUrl, callback)
+{
+    let xmlHttp = new XMLHttpRequest();
+    xmlHttp.responseType = 'json';
+
+    xmlHttp.onreadystatechange = function() {
+        if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
+            callback(xmlHttp.response);
+    }
+    xmlHttp.open("GET", theUrl, true); // true for asynchronous
+    xmlHttp.send(null);
+}
+
+function insertSearch(number, name, id, id_l) {
+    document.querySelectorAll(`#quicksearch > div.fast-search > div > div:nth-child(${number}) div`).forEach(el => el.remove());
+    document.querySelector(`#quicksearch > div.fast-search > div > div:nth-child(${number})`).insertAdjacentHTML("beforeend", `<a href="/${id_l}/${id}/"><div class="search-card">
+                    <img src="/static/images/pesquet.jpg">
+                    <p class="name">${name}</p>
+                </div></a>`)
+}
+
+function doneTyping () {
+    httpGetAsync("/a/ajax/search/"+input.value+"/", j => {
+        for (const i of JSON.parse(j))
+            insertSearch(2, i.fields.name, i.pk, "a")
+    });
+    httpGetAsync("/p/ajax/search/"+input.value+"/", j => {
+        for (const i of JSON.parse(j))
+            insertSearch(1, i.fields.first_name + " " + i.fields.last_name, i.pk, "p")
+    });
+    httpGetAsync("/b/ajax/search/"+input.value+"/", j => {
+        for (const i of JSON.parse(j))
+            insertSearch(3, i.fields.name, i.pk, "b")
+    });
+}
diff --git a/templates/quicksearch.html b/templates/quicksearch.html
index 52e73e1..11802fd 100644
--- a/templates/quicksearch.html
+++ b/templates/quicksearch.html
@@ -12,61 +12,14 @@
         <div class="flex-search">
             <div class="search-col">
                 <p class="titre">Personnes</p>
-                <div class="search-card">
-                    <img src="{% static 'images/pesquet.jpg' %}">
-                    <p class="name">Thomas Pesquet</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/pesquet.jpg' %}">
-                    <p class="name">Thomas Pesquet</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/pesquet.jpg' %}">
-                    <p class="name">Thomas Pesquet</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/pesquet.jpg' %}">
-                    <p class="name">Thomas Pesquet</p>
-                </div>
             </div>
             <div class="search-col">
                 <p class="titre">Sauvetages</p>
-                <div class="search-card">
-                    <img src="{% static 'images/sauvetage.png' %}">
-                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/sauvetage.png' %}">
-                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/sauvetage.png' %}">
-                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/sauvetage.png' %}">
-                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
-                </div>
             </div>
             <div class="search-col">
                 <p class="titre">Bateaux</p>
-                <div class="search-card">
-                    <img src="{% static 'images/bateau.jpg' %}">
-                    <p class="name">SNS 147</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/bateau.jpg' %}">
-                    <p class="name">SNS 147</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/bateau.jpg' %}">
-                    <p class="name">SNS 147</p>
-                </div>
-                <div class="search-card">
-                    <img src="{% static 'images/bateau.jpg' %}">
-                    <p class="name">SNS 147</p>
-                </div>
             </div>
         </div>
     </div>
+    <script src="{% static "js/search.js" %}"></script>
 </div>
\ No newline at end of file