DasUnternehmen/templates/admin/questions.html
2026-04-13 13:32:31 +02:00

144 lines
5.7 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div class="content-card">
<div class="page-header">
<h1>Fragen</h1>
<a class="btn" href="{{ url_for('admin_question_new') }}">Neue Frage</a>
</div>
<div class="filter-bar">
<div class="form-group filter-item">
<label for="filter-thema">Thema</label>
<select id="filter-thema">
<option value="">Alle Themen</option>
{% for t in themen %}
<option value="{{ t.id }}">{{ t.kurztitel }} - {{ t.titel }}</option>
{% endfor %}
</select>
</div>
<div class="form-group filter-item">
<label for="filter-branche">Branche</label>
<select id="filter-branche">
<option value="">Alle Branchen</option>
{% for b in branchen %}
<option value="{{ b.branchenname }}">{{ b.branchenname }}</option>
{% endfor %}
</select>
</div>
<div class="form-group filter-item">
<label for="filter-text">Suche</label>
<input type="text" id="filter-text" placeholder="Frage durchsuchen">
</div>
</div>
<div id="question-groups">
{% for thema in themen %}
{% set group_questions = fragen | selectattr("thema_id", "equalto", thema.id) | list %}
{% if group_questions %}
<div class="question-group"
data-thema-id="{{ thema.id }}"
data-thema-name="{{ thema.kurztitel }} {{ thema.titel }}">
<div class="question-group-header">
<div>
<h2>{{ thema.kurztitel }} - {{ thema.titel }}</h2>
<p class="muted">Fragen: {{ group_questions|length }}</p>
</div>
<a class="btn btn-small btn-secondary"
href="{{ url_for('admin_question_new_for_thema', thema_id=thema.id) }}">
Frage zu diesem Thema
</a>
</div>
<div class="question-list">
{% for f in group_questions %}
<div class="question-item"
data-thema-id="{{ f.thema_id }}"
data-branchen="{{ f.branchen|lower }}"
data-text="{{ f.text|lower }}">
<div class="question-item-main">
<div class="question-meta">
<span class="question-id">#{{ f.id }}</span>
{% if f.branchen %}
<span class="question-branch">{{ f.branchen }}</span>
{% else %}
<span class="question-branch muted">Keine Branche zugeordnet</span>
{% endif %}
</div>
<div class="question-text">
{{ f.text }}
</div>
</div>
<div class="question-actions">
<a class="btn btn-small"
href="{{ url_for('admin_question_edit', frage_id=f.id) }}">
Bearbeiten
</a>
<form method="post"
action="{{ url_for('admin_question_delete', frage_id=f.id) }}"
style="display:inline;"
onsubmit="return confirm('Frage löschen?');">
<button type="submit" class="btn btn-small btn-danger">Löschen</button>
</form>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const themaFilter = document.getElementById("filter-thema");
const brancheFilter = document.getElementById("filter-branche");
const textFilter = document.getElementById("filter-text");
const groups = document.querySelectorAll(".question-group");
function applyFilters() {
const selectedThema = themaFilter.value.trim();
const selectedBranche = brancheFilter.value.trim().toLowerCase();
const searchText = textFilter.value.trim().toLowerCase();
groups.forEach(group => {
const questionItems = group.querySelectorAll(".question-item");
let visibleCount = 0;
questionItems.forEach(item => {
const itemThemaId = item.dataset.themaId;
const itemBranchen = item.dataset.branchen || "";
const itemText = item.dataset.text || "";
const themaMatch = !selectedThema || itemThemaId === selectedThema;
const brancheMatch = !selectedBranche || itemBranchen.includes(selectedBranche);
const textMatch = !searchText || itemText.includes(searchText);
const visible = themaMatch && brancheMatch && textMatch;
item.style.display = visible ? "" : "none";
if (visible) {
visibleCount++;
}
});
group.style.display = visibleCount > 0 ? "" : "none";
});
}
themaFilter.addEventListener("change", applyFilters);
brancheFilter.addEventListener("change", applyFilters);
textFilter.addEventListener("input", applyFilters);
applyFilters();
});
</script>
{% endblock %}