peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert exercise/person search on settings page to hyperscript

Browse Source
This commit is contained in:
Peter Stockings
2023-07-25 19:22:45 +10:00
parent c22e3e2090
commit efc662360b
1 changed files with 8 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
templates/settings.html
View File

@@ -37,7 +37,10 @@
</div> </div>
<input type="search" id="people-search" <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" 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> </div>
</th> </th>
@@ -50,25 +53,6 @@
name=p['Name'])}} name=p['Name'])}}
{% endfor %} {% endfor %}
</tbody> </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> </table>
</div> </div>
</div> </div>
@@ -143,7 +127,10 @@
</div> </div>
<input type="search" id="exercise-search" <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" 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> </div>
</th> </th>
@@ -156,25 +143,6 @@
name=e['Name'])}} name=e['Name'])}}
{% endfor %} {% endfor %}
</tbody> </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> </table>
</div> </div>
</div> </div>