From 21e968f0ba4e56560114248090b5181fddeafe30 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Sat, 26 Aug 2023 11:29:02 +0200
Subject: [PATCH] appstore: basic filter implementation

---
 store/app.py                 |  2 +-
 store/templates/catalog.html | 42 ++++++++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/store/app.py b/store/app.py
index 2cb0a11e..c3816f6e 100644
--- a/store/app.py
+++ b/store/app.py
@@ -119,7 +119,7 @@ def index():
 
 @app.route('/catalog')
 def browse_catalog(category_filter=None):
-    return render_template("catalog.html", user=session.get('user', {}), catalog=catalog)
+    return render_template("catalog.html", user=session.get('user', {}), catalog=catalog, timestamp_now=int(time.time()))
 
 
 @app.route('/app/<app_id>')
diff --git a/store/templates/catalog.html b/store/templates/catalog.html
index 59c1e4c0..09b9cc09 100644
--- a/store/templates/catalog.html
+++ b/store/templates/catalog.html
@@ -66,10 +66,10 @@
 
 <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 max-w-screen-lg mx-auto pt-10">
     {% for app, infos in catalog['apps'].items() %}
-    <div>
+    <div class="search" data-addedincatalog="{{ ((timestamp_now - infos['added_in_catalog']) / 3600 / 24) | int }}">
         <a
             href="{{ url_for('app_info', app_id=app) }}"
-            class="relative block overflow-hidden rounded-lg p-2 hover:bg-gray-200 "
+            class="relative block overflow-hidden rounded-lg p-2 hover:bg-gray-200"
             >
             <div class="sm:flex sm:justify-between sm:gap-4">
                 <div class="sm:shrink-0">
@@ -89,6 +89,7 @@
                             {{ infos['manifest']['name'] }}
                         </h3>
                         <span class="pt-1 pr-2 text-xs">
+
                             {% if infos['level'] == 0 %}
                             <i class="fa fa-exclamation-circle text-red-500 py-0.5" aria-hidden="true"></i>
                             {% elif infos['level']|int <= 4 %}
@@ -105,6 +106,9 @@
                     <p class="max-w-[40ch] text-xs text-gray-500">
                         {{ infos['manifest']['description']['en'] }}
                     </p>
+                    <div class="hidden">
+                        {{ infos["potential_alternative_to"]|join(', ') }}
+                    </div>
                     {% if infos['category'] %}
                     <span class="rounded-full px-2.5 py-0.5 text-[10px]  border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
                         {{ catalog['categories'][infos['category']]['title'][locale].lower() }}
@@ -116,4 +120,38 @@
     </div>
     {% endfor %}
 </div>
+
+<script>
+    // A little delay
+    let typingTimer;
+    let typeInterval = 500; // Half a second
+    let searchInput = document.getElementById('search');
+
+    function liveSearch() {
+        // Locate the card elements
+        let entries = document.querySelectorAll('.search')
+        // Locate the search input
+        let search_query = searchInput.value;
+        // Loop through the entries
+        for (var i = 0; i < entries.length; i++) {
+            // If the text is within the card...
+            if(entries[i].textContent.toLowerCase()
+                // ...and the text matches the search query...
+                .includes(search_query.toLowerCase())) {
+                // ...remove the `.is-hidden` class.
+                entries[i].classList.remove("hidden");
+            } else {
+                // Otherwise, add the class.
+                entries[i].classList.add("hidden");
+            }
+        }
+    }
+
+    searchInput.addEventListener('keyup', () => {
+      clearTimeout(typingTimer);
+      typingTimer = setTimeout(liveSearch, typeInterval);
+    });
+
+</script>
+
 {% endblock %}