Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

[TASK] implement search on user interface

Browse Source
This commit is contained in:
Marie Birner 2023-04-06 10:27:04 +02:00
parent d04dde15da
commit 8105693b27
4 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/main.ts
View File

@ -1 +1,33 @@
import './scss/app.scss' import './scss/app.scss'
document.addEventListener('DOMContentLoaded', function() {
console.log("init");
initSearch();
});
function initSearch() {
const input = <HTMLInputElement>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';
}
});
}

14
templates/admin/user/index.html.tera
View File

@ -3,10 +3,10 @@
{% extends "base" %} {% extends "base" %}
{% block content %} {% block content %}
<div class="max-w-screen-lg w-full grid gap-4"> <div class="max-w-screen-lg w-full">
<h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Users</h1> <h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Users</h1>
<form action="/admin/user/new" method="post" class="bg-primary-900 text-white px-3 pb-3 pt-2 rounded-md flex items-end md:items-center justify-between"> <form action="/admin/user/new" method="post" class="mt-4 bg-primary-900 rounded-md text-white px-3 pb-3 pt-2 flex items-end md:items-center justify-between">
<div class="w-full"> <div class="w-full">
<h2 class="text-md font-bold mb-2 uppercase tracking-wide">Neuen User hinzufügen</h2> <h2 class="text-md font-bold mb-2 uppercase tracking-wide">Neuen User hinzufügen</h2>
<div class="grid md:grid-cols-3"> <div class="grid md:grid-cols-3">
@ -24,8 +24,14 @@
</div> </div>
</form> </form>
<div class="bg-primary-200 p-3 mt-4 rounded-t-md">
<label for="name" class="sr-only">Suche</label>
<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach..."/>
</div>
<div class="bg-primary-100 p-3 rounded-b-md grid gap-4">
{% for user in users %} {% for user in users %}
<form action="/admin/user" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between"> <form action="/admin/user" data-filterable="true" data-filter="{{ user.name }}" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between">
<div class="w-full"> <div class="w-full">
<input type="hidden" name="id" value="{{ user.id }}" /> <input type="hidden" name="id" value="{{ user.id }}" />
<div class="font-bold mb-1">{{ user.name }}</div> <div class="font-bold mb-1">{{ user.name }}</div>
@ -45,4 +51,6 @@
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endblock content %} {% endblock content %}

3
templates/base.html.tera
View File

@ -4,7 +4,7 @@
<html lang="de"> <html lang="de">
<head> <head>
<link rel="manifest" href="public/manifest.json" /> <link rel="manifest" href="public/manifest.json" />
<link rel="stylesheet" href="/public/main.css"> <link rel="stylesheet" href="/public/main.css" />
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
{%if loggedin_user %} {%if loggedin_user %}
@ -14,6 +14,7 @@
<div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8"> <div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
{% block content %}{% endblock content %} {% block content %}{% endblock content %}
</div> </div>
<script src="/public/main.js"></script>
</body> </body>
</html> </html>

8
templates/index.html.tera
View File

@ -18,8 +18,8 @@
<h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Ausfahrten</h1> <h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Ausfahrten</h1>
{% for day in days %} {% for day in days %}
<div class="bg-white p-3 rounded-md flex items-end md:items-center justify-between"> <div class="bg-white p-3 rounded-md">
<h2>{{ day.day }}</h2> <h2 class="text-md font-bold mb-2 uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }}</h2>
{% for planned_event in day.planned_events %} {% for planned_event in day.planned_events %}
<h3>Planned event '{{ planned_event.name }}'</h3> <h3>Planned event '{{ planned_event.name }}'</h3>
@ -89,7 +89,7 @@
<input type="number" name="max_people" placeholder="Anzahl Ruderer" /> <input type="number" name="max_people" placeholder="Anzahl Ruderer" />
<input type="text" name="notes" placeholder="Anmerkungen" /> <input type="text" name="notes" placeholder="Anmerkungen" />
<input type="submit" /> <input value="Anlegen" class="w-28 rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer" type="submit" />
</form> </form>
{% endif %} {% endif %}
@ -101,7 +101,7 @@
<input type="number" name="max_people" placeholder="Anzahl Ruderer" /> <input type="number" name="max_people" placeholder="Anzahl Ruderer" />
<input type="text" name="notes" placeholder="Anmerkungen" /> <input type="text" name="notes" placeholder="Anmerkungen" />
<input type="submit" /> <input value="Anlegen" class="w-28 rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer" type="submit" />
</form> </form>
{% endif %} {% endif %}