From efc662360b270697cb5913f36575e65bc5708dde Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Tue, 25 Jul 2023 19:22:45 +1000
Subject: [PATCH] Convert exercise/person search on settings page to
 hyperscript

---
 templates/settings.html | 48 +++++++----------------------------------
 1 file changed, 8 insertions(+), 40 deletions(-)

diff --git a/templates/settings.html b/templates/settings.html
index 3fa5d30..75584b8 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -37,7 +37,10 @@
                                             </div>
                                             <input type="search" id="people-search"
                                                 class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                                placeholder="Search users...">
+                                                placeholder="Search users..." _="on input
+                                                show <tbody>tr/> in closest <table/>
+                                                  when its textContent.toLowerCase() contains my value.toLowerCase()
+                                               ">
 
                                         </div>
                                     </th>
@@ -50,25 +53,6 @@
                                 name=p['Name'])}}
                                 {% endfor %}
                             </tbody>
-                            <script>
-                                (function () {
-                                    let searchInput = document.querySelector('#people-search')
-
-                                    let rows = Array.from(document.querySelectorAll('#new-person tr'))
-
-                                    searchInput.addEventListener("input", e => {
-                                        rows.filter(r => predicate(r, e.target.value)).forEach(r => {
-                                            r.classList.remove('hidden')
-                                        })
-
-                                        rows.filter(r => !predicate(r, e.target.value)).forEach(r => {
-                                            r.classList.add('hidden')
-                                        })
-                                    });
-
-                                    let predicate = (row, text) => row.querySelector('td').innerText.toLowerCase().includes(text.toLowerCase())
-                                })();
-                            </script>
                         </table>
                     </div>
                 </div>
@@ -143,7 +127,10 @@
                                             </div>
                                             <input type="search" id="exercise-search"
                                                 class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                                placeholder="Search exercises...">
+                                                placeholder="Search exercises..." _="on input
+                                                show <tbody>tr/> in closest <table/>
+                                                  when its textContent.toLowerCase() contains my value.toLowerCase()
+                                               ">
 
                                         </div>
                                     </th>
@@ -156,25 +143,6 @@
                                 name=e['Name'])}}
                                 {% endfor %}
                             </tbody>
-                            <script>
-                                (function () {
-                                    let searchInput = document.querySelector('#exercise-search')
-
-                                    let rows = Array.from(document.querySelectorAll('#new-exercise tr'))
-
-                                    searchInput.addEventListener("input", e => {
-                                        rows.filter(r => predicate(r, e.target.value)).forEach(r => {
-                                            r.classList.remove('hidden')
-                                        })
-
-                                        rows.filter(r => !predicate(r, e.target.value)).forEach(r => {
-                                            r.classList.add('hidden')
-                                        })
-                                    });
-
-                                    let predicate = (row, text) => row.querySelector('td').innerText.toLowerCase().includes(text.toLowerCase())
-                                })();
-                            </script>
                         </table>
                     </div>
                 </div>