From 8105693b27a398101d681a306ea9a6c5f067f9bb Mon Sep 17 00:00:00 2001 From: Marie Birner Date: Thu, 6 Apr 2023 10:27:04 +0200 Subject: [PATCH] [TASK] implement search on user interface --- frontend/main.ts | 32 ++++++++++++++++++++++++++++ templates/admin/user/index.html.tera | 16 ++++++++++---- templates/base.html.tera | 3 ++- templates/index.html.tera | 8 +++---- 4 files changed, 50 insertions(+), 9 deletions(-) diff --git a/frontend/main.ts b/frontend/main.ts index e4f8eac..3157cfb 100644 --- a/frontend/main.ts +++ b/frontend/main.ts @@ -1 +1,33 @@ import './scss/app.scss' + +document.addEventListener('DOMContentLoaded', function() { + console.log("init"); + initSearch(); +}); + + function initSearch() { + const input = document.querySelector('#filter-js'); + + if(input) { + input.addEventListener('input', () => { + filterElements(input.value); + }); + } +} + +function filterElements(input: string) { + const elements = document.querySelectorAll('form[data-filterable="true"]'); + + Array.prototype.forEach.call(elements, (element: HTMLElement) => { + // set both strings (input & dataset filter) to lowercase to not be case sensitive + let filterString = element.dataset.filter?.toLocaleLowerCase(); + + // bulk show all elements + element.style.display = 'flex'; + + // hide if case doesn't match + if(!filterString?.includes(input.toLocaleLowerCase())) { + element.style.display = 'none'; + } + }); +} diff --git a/templates/admin/user/index.html.tera b/templates/admin/user/index.html.tera index 12c5a1c..414b83e 100644 --- a/templates/admin/user/index.html.tera +++ b/templates/admin/user/index.html.tera @@ -3,10 +3,10 @@ {% extends "base" %} {% block content %} -
+

Users

-
+

Neuen User hinzufügen

@@ -24,8 +24,14 @@
-{% for user in users %} -
+
+ + +
+ +
+ {% for user in users %} +
{{ user.name }}
@@ -45,4 +51,6 @@ {% endfor %}
+
+ {% endblock content %} diff --git a/templates/base.html.tera b/templates/base.html.tera index b2ec392..a09cf91 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -4,7 +4,7 @@ - + {%if loggedin_user %} @@ -14,6 +14,7 @@
{% block content %}{% endblock content %}
+ diff --git a/templates/index.html.tera b/templates/index.html.tera index e56b79e..d3add5b 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -18,8 +18,8 @@

Ausfahrten

{% for day in days %} -
-

{{ day.day }}

+
+

{{ day.day| date(format="%d.%m.%Y") }}

{% for planned_event in day.planned_events %}

Planned event '{{ planned_event.name }}'

@@ -89,7 +89,7 @@ - + {% endif %} @@ -101,7 +101,7 @@ - + {% endif %}