appstore: basic filter implementation

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>')

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 %}