henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Merge branch '114-suchleiste-vorschlage-anzeigen' into 'master'

Browse Source 
Resolve "Suchleiste - Vorschläge anzeigen!"

Closes #114

See merge request enrichment-2024/qivip!70
This commit is contained in:
ben8
2025-05-10 10:53:30 +00:00
parent 8133eaa439 0062f88167
commit c014003062
6 changed files with 91 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
django/templates/partials/_nav.html
View File

@@ -11,7 +11,7 @@
<!-- Desktop Search (centered on screen) - Hidden on mobile -->
<div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40">
<form method="get" action="{% url 'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md">
<input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
<input id="quiz-search-desktop" list="quiz-names-desktop" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base">
<button class="py-1 text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
@@ -53,7 +53,7 @@
<!-- Search in mobile menu -->
<form method="get" action="{% url 'library:overview_quiz' %}" class="px-4 mb-4">
<div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
<input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
<input id="quiz-search-mobile" list="quiz-names-mobile" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
class="w-full text-sm px-2 text-black bg-transparent focus:outline-none">
<button class="text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -63,6 +63,78 @@
</svg>
</button>
</div>
<datalist id="quiz-names-desktop">
{% for quiz in quiz_names %}
<option value="{{ quiz.name }}">
{% endfor %}
</datalist>
<datalist id="quiz-names-mobile">
{% for quiz in quiz_names %}
<button value="{{ quiz.name }}" onclick="performSearch(this.value)"><option value="{{ quiz.name }}" ></option></button>
{% endfor %}
</datalist>
{{ quiz_names|json_script:"quiz-names-data" }}
<script>
async function fetchQuizNames() {
try {
const response = await fetch("{% url 'library:quiz_names_json' %}");
if (!response.ok) throw new Error("Netzwerkfehler");
const data = await response.json();
if (Array.isArray(data)) return data;
} catch (err) {
console.error("Fehler beim Laden der Quiz-Namen:", err);
}
return [];
}
function setupAutocomplete(inputId, datalistId, quizNames) {
const searchInput = document.getElementById(inputId);
const datalist = document.getElementById(datalistId);
if (!searchInput || !datalist) return;
// Wenn der Benutzer den Text ändert, Filter anwenden
searchInput.addEventListener('input', () => {
const value = searchInput.value.toLowerCase();
datalist.innerHTML = '';
quizNames
.filter(name => name.toLowerCase().includes(value))
.slice(0, 10)
.forEach(name => {
const option = document.createElement('option');
option.value = name;
datalist.appendChild(option);
});
});
}
// Funktion zum Durchführen der Suche
function performSearch(query) {
datalist.innerHTML = '';
// Hier kann deine Logik zur Verarbeitung der Suche eingefügt werden
// Falls du die Seite zu einer Suchergebnisseite weiterleiten möchtest:
window.location.href = `{% url 'library:overview_quiz' %}?search=${query}`;
}
document.addEventListener('DOMContentLoaded', async () => {
const quizNames = await fetchQuizNames();
setupAutocomplete('quiz-search-desktop', 'quiz-names-desktop', quizNames);
setupAutocomplete('quiz-search-mobile', 'quiz-names-mobile', quizNames);
});
</script>
</form>
<!-- Mobile Navigation Links -->

2
django/templates/play/join_game.html
View File

@@ -7,7 +7,7 @@
<form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
{% csrf_token %}
<div class="flex gap-3 items-center justify-center">
<input type="text" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider" autofocus>
<input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider" autofocus>
<button type="submit" class="h-12 px-6 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-95 group" disabled>
<span class="hidden sm:block">Beitreten</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 transition-transform group-hover:translate-x-1">