Make user selector html only

This commit is contained in:
2026-03-21 21:38:29 +01:00
parent c47a01df22
commit f58c55a1ff
2 changed files with 35 additions and 44 deletions

View File

@@ -17,19 +17,20 @@
<script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
{#
<script src="{{ url_for('static', filename='alpine.min.js') }}" defer></script> #}
{#
<script src="{{ url_for('static', filename='tom-select.complete.min.js') }}"></script> #}
< script src="{{ url_for('static', filename='alpine.min.js') }}" defer>
</script> #}
{#
<script src="{{ url_for('static', filename='tom-select.complete.min.js') }}"></script> #}
<script>
// HTMX error handling
document.addEventListener('htmx:responseError', function (evt) {
const error_dialog = document.querySelector('#error-alert');
error_dialog.querySelector('.modal-title').textContent = 'Error ' + evt.detail.xhr.status;
error_dialog.querySelector('.modal-body').innerHTML = evt.detail.xhr.response;
new bootstrap.Modal(error_dialog).show();
});
</script>
<script>
// HTMX error handling
document.addEventListener('htmx:responseError', function (evt) {
const error_dialog = document.querySelector('#error-alert');
error_dialog.querySelector('.modal-title').textContent = 'Error ' + evt.detail.xhr.status;
error_dialog.querySelector('.modal-body').innerHTML = evt.detail.xhr.response;
new bootstrap.Modal(error_dialog).show();
});
</script>
</head>
@@ -90,6 +91,14 @@
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
htmx.onLoad(function (content) {
content.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function (dropdownToggle) {
new bootstrap.Dropdown(dropdownToggle);
});
})
</script>
</body>
</html>

View File

@@ -14,40 +14,22 @@
<!-- User Selector -->
<div class="navbar-nav ms-auto">
<div class="nav-item dropdown position-static">
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown"
data-bs-boundary="viewport" data-bs-reference="parent">
{% if session.get('viewing_as_user') %}
👤 {{ session.get('viewing_as_user') }}
{% else %}
🌐 All Users
{% endif %}
</button>
<ul class="dropdown-menu dropdown-menu-end mobile-dropdown">
<li>
<h6 class="dropdown-header">View as User</h6>
</li>
<li>
<a class="dropdown-item {% if not session.get('viewing_as_user') %}active{% endif %}"
href="{{ url_for('main.set_viewing_user', username='') }}">
🌐 All Users
</a>
</li>
{% if users %}
<li>
<hr class="dropdown-divider">
</li>
<form action="" method="get" class="d-flex align-items-center">
<label for="user-select" class="text-white me-2 mb-0 d-none d-sm-inline">View as:</label>
<select id="user-select" name="user-select" class="form-select form-select-sm"
onchange="window.location.href=this.value" style="max-width: 120px; min-width: 100px;">
<option value="{{ url_for('main.set_viewing_user', username='') }}" {% if not session.get('viewing_as_user')
%}selected{% endif %}>
🌐 All Users
</option>
{% for user in users %}
<li>
<a class="dropdown-item {% if session.get('viewing_as_user') == user.username %}active{% endif %}"
href="{{ url_for('main.set_viewing_user', username=user.username) }}">
👤 {{ user.username.title() }}
</a>
</li>
<option value="{{ url_for('main.set_viewing_user', username=user.username) }}" {% if
session.get('viewing_as_user')==user.username %}selected{% endif %}>
👤 {{ user.username.title() }}
</option>
{% endfor %}
{% endif %}
</ul>
</div>
</select>
</form>
</div>
</div>
</header>