From 52ccf2c9422d7b3302ac1fefe16ff165b167d4f7 Mon Sep 17 00:00:00 2001
From: "user@node5.net" <user@node5.net>
Date: Mon, 8 Dec 2025 21:03:21 +0100
Subject: Search bar

---
 .../drinks/templates/drinks_overview.html          | 39 +++++++++++++++++++---
 1 file changed, 35 insertions(+), 4 deletions(-)

(limited to 'web_interface')

diff --git a/web_interface/drinks/templates/drinks_overview.html b/web_interface/drinks/templates/drinks_overview.html
index cc80881..7bee2d7 100644
--- a/web_interface/drinks/templates/drinks_overview.html
+++ b/web_interface/drinks/templates/drinks_overview.html
@@ -2,11 +2,42 @@
 
 {% block content %}
 
-  <div class="grid">
+<div class="field label prefix border">
+  <i>search</i>
+  <input type="text" id="search-bar">
+  <label>Search</label>
+  <i class="front" style="visibility: hidden" id="search-clear" onclick="document.getElementById('search-bar').value = ''; Search('')">close</i>
+</div>
+
+<script>
+  const searchBar = document.getElementById('search-bar');
+
+  function Search(value) {
+    const drinks = document.getElementById('drinks').children;
+    document.getElementById('search-clear').style.visibility = searchBar.value.length > 0 ? '' : 'hidden';
+    // Loop through all list items and hide those that don't match the filter
+    for (let i = 0; i < drinks.length; i++) {
+      const itemText = drinks[i].textContent.toLowerCase();
+      // Show item if it matches the filter, hide otherwise
+      if (itemText.includes(value.toLowerCase())) {
+        drinks[i].style.display = '';
+      } else {
+        drinks[i].style.display = 'none';
+      }
+    }
+  }
+
+  searchBar.addEventListener('input', function() {
+    Search(this.value)
+});
+</script>
+
+
+<div class="grid" id="drinks">
 
   {% for drink in drinks %}
 
-    <div id="drinks" class="s12 l6">
+  <div id="drink" class="s12 l6">
 
     <article class="no-padding">
       <div class="grid no-space">
@@ -41,6 +72,6 @@
 
   {% endfor %}
 
-  </div>
+</div>
 
-{% endblock %} 
+{% endblock %}
-- 
cgit v1.2.3