89 lines
3.8 KiB
HTML
89 lines
3.8 KiB
HTML
{% extends 'base/layout.html' %}
|
|
|
|
{% block title %}Navigation personalisieren{% endblock %}
|
|
|
|
{% block header %}
|
|
<div class="container-fluid mt-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h1>Navigation personalisieren</h1>
|
|
</div>
|
|
</div>
|
|
{% endblock header %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col col-md-10 col-xl-8">
|
|
<div class="card">
|
|
<div class="card-header"><h2 class="card-title">Linke Navigation</h2></div>
|
|
<div class="card-body">
|
|
{% if not feature_enabled %}
|
|
<div class="alert alert-warning mb-0">
|
|
Die Navigationspersonalisierung wurde durch die NetBox-Konfiguration deaktiviert.
|
|
</div>
|
|
{% else %}
|
|
<p class="text-secondary">
|
|
Verschiebe Menüs mit den Pfeilen und blende nicht benötigte Bereiche aus.
|
|
Berechtigungen von NetBox werden dadurch nicht verändert.
|
|
</p>
|
|
<form method="post" id="navigation-preferences-form">
|
|
{% csrf_token %}
|
|
<div class="list-group mb-3" id="navigation-menu-editor">
|
|
{% for menu in menus %}
|
|
<div class="list-group-item d-flex align-items-center gap-3 navigation-menu-row">
|
|
<input type="hidden" name="menu_order" value="{{ menu.key }}">
|
|
<i class="{{ menu.icon_class }} fs-2" aria-hidden="true"></i>
|
|
<span class="flex-fill fw-medium">{{ menu.label }}</span>
|
|
<label class="form-check form-switch mb-0" title="Menü ausblenden">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
name="hidden_menus"
|
|
value="{{ menu.key }}"
|
|
{% if menu.hidden %}checked{% endif %}
|
|
>
|
|
<span class="form-check-label">Ausblenden</span>
|
|
</label>
|
|
<div class="btn-group" role="group" aria-label="Reihenfolge ändern">
|
|
<button class="btn btn-sm btn-outline-secondary move-up" type="button" title="Nach oben">
|
|
<i class="mdi mdi-arrow-up" aria-hidden="true"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary move-down" type="button" title="Nach unten">
|
|
<i class="mdi mdi-arrow-down" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="alert alert-info mb-0">Für diesen Benutzer sind keine Menüs verfügbar.</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<button class="btn btn-outline-danger" type="submit" name="reset" value="1">
|
|
Zurücksetzen
|
|
</button>
|
|
<button class="btn btn-primary" type="submit">Speichern</button>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const editor = document.getElementById('navigation-menu-editor');
|
|
if (!editor) return;
|
|
editor.addEventListener('click', (event) => {
|
|
const button = event.target.closest('.move-up, .move-down');
|
|
if (!button) return;
|
|
const row = button.closest('.navigation-menu-row');
|
|
if (button.classList.contains('move-up') && row.previousElementSibling) {
|
|
editor.insertBefore(row, row.previousElementSibling);
|
|
}
|
|
if (button.classList.contains('move-down') && row.nextElementSibling) {
|
|
editor.insertBefore(row.nextElementSibling, row);
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock content %}
|