Positionen Action Button und DVA Button hinzugefügt

This commit is contained in:
Erik Thiele
2026-06-19 12:09:50 +02:00
parent 59be0fd789
commit 35e22718e3
10 changed files with 2940 additions and 2308 deletions

View File

@@ -73,6 +73,24 @@
color: var(--ccm-primary);
}
/* ─── Dropdown-Hover (grauer Hintergrund) ─── */
.dropdown-item:hover,
.dropdown-item:focus {
background-color: #e9ecef !important;
color: inherit !important;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: #e9ecef !important;
color: inherit !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
background-color: #3a3f45 !important;
}
/* ─── Drag-Handle für SortableJS ─── */
.drag-handle {
cursor: grab;
@@ -186,7 +204,7 @@
</div>
</div>
<!-- Card-Body: Tabs (Playlist | Einstellungen | Medien) -->
<!-- Card-Body: Tabs (Playlist | Einstellungen | Aktionen | Digital Voice Agent | Medien) -->
<div class="card-body">
<ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
@@ -205,6 +223,11 @@
<i class="ti ti-click me-1"></i>Aktionen
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#voice-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
<i class="ti ti-robot me-1"></i>Digital Voice Agent
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#media-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
<i class="ti ti-upload me-1"></i>Medien
@@ -315,6 +338,13 @@
<label class="form-check-label">Videos anzeigen</label>
</div>
<div class="form-check form-switch mb-4">
<input class="form-check-input" type="checkbox"
name="stay_on_first"
{% if cfg.stay_on_first %}checked{% endif %}>
<label class="form-check-label">Auf erstem Element stehen bleiben (kein Refresh)</label>
</div>
<button type="submit" class="btn btn-primary">
Einstellungen speichern
</button>
@@ -323,7 +353,7 @@
<!-- ═══ Tab: Aktionen ═══ -->
<div class="tab-pane" id="actions-{{ screen }}" role="tabpanel">
<form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
<form action="/admin/{{ current_site }}/update-actions/{{ screen }}" method="post">
<h3>Aktions-Button (Player)</h3>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox"
@@ -348,6 +378,84 @@
<option value="redirect" {% if cfg.custom_url_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
</select>
</div>
<div class="mb-4">
<label class="form-label">Position</label>
<select name="custom_url_position" class="form-select">
<optgroup label="Oben">
<option value="top-left" {% if cfg.custom_url_position|default('top-left') == 'top-left' %}selected{% endif %}>Oben links</option>
<option value="top-center" {% if cfg.custom_url_position|default('top-left') == 'top-center' %}selected{% endif %}>Oben mitte</option>
<option value="top-right" {% if cfg.custom_url_position|default('top-left') == 'top-right' %}selected{% endif %}>Oben rechts</option>
</optgroup>
<optgroup label="Mitte">
<option value="middle-left" {% if cfg.custom_url_position|default('top-left') == 'middle-left' %}selected{% endif %}>Mitte links</option>
<option value="middle-center" {% if cfg.custom_url_position|default('top-left') == 'middle-center' %}selected{% endif %}>Mitte zentriert</option>
<option value="middle-right" {% if cfg.custom_url_position|default('top-left') == 'middle-right' %}selected{% endif %}>Mitte rechts</option>
</optgroup>
<optgroup label="Unten">
<option value="bottom-left" {% if cfg.custom_url_position|default('top-left') == 'bottom-left' %}selected{% endif %}>Unten links</option>
<option value="bottom-center" {% if cfg.custom_url_position|default('top-left') == 'bottom-center' %}selected{% endif %}>Unten mitte</option>
<option value="bottom-right" {% if cfg.custom_url_position|default('top-left') == 'bottom-right' %}selected{% endif %}>Unten rechts</option>
</optgroup>
</select>
</div>
<button type="submit" class="btn btn-primary">
Einstellungen speichern
</button>
</form>
</div>
<!-- ═══ Tab: Digital Voice Agent (pro Screen: Enabled, Label, Ziel, Position, Bild) ═══ -->
<div class="tab-pane" id="voice-{{ screen }}" role="tabpanel">
<form action="/admin/{{ current_site }}/update-voice/{{ screen }}" method="post">
<h3>Digital Voice Agent</h3>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox"
name="voice_agent_enabled"
{% if cfg.voice_agent_enabled %}checked{% endif %}>
<label class="form-check-label">Voice Agent anzeigen</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox"
name="voice_agent_show_image"
{% if cfg.voice_agent_show_image %}checked{% endif %}>
<label class="form-check-label">Bild (dva.png) über dem Button anzeigen <span class="badge bg-warning text-dark ms-1">Beta</span></label>
</div>
<div class="mb-2">
<label class="form-label">URL (fest in config.json definiert)</label>
<input type="url" class="form-control" value="{{ voice_agent_url|default('') }}" readonly>
</div>
<div class="mb-4">
<label class="form-label">Button-Beschriftung</label>
<input type="text" name="voice_agent_label" class="form-control"
placeholder="z. B. Digitaler Assistent" value="{{ cfg.voice_agent_label|default('Digitaler Assistent') }}" maxlength="50">
</div>
<div class="mb-4">
<label class="form-label">Verhalten bei Klick</label>
<select name="voice_agent_target" class="form-select">
<option value="overlay" {% if cfg.voice_agent_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
<option value="redirect" {% if cfg.voice_agent_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
</select>
</div>
<div class="mb-4">
<label class="form-label">Position</label>
<select name="voice_agent_position" class="form-select">
<optgroup label="Oben">
<option value="top-left" {% if cfg.voice_agent_position|default('top-left') == 'top-left' %}selected{% endif %}>Oben links</option>
<option value="top-center" {% if cfg.voice_agent_position|default('top-left') == 'top-center' %}selected{% endif %}>Oben mitte</option>
<option value="top-right" {% if cfg.voice_agent_position|default('top-left') == 'top-right' %}selected{% endif %}>Oben rechts</option>
</optgroup>
<optgroup label="Mitte">
<option value="middle-left" {% if cfg.voice_agent_position|default('top-left') == 'middle-left' %}selected{% endif %}>Mitte links</option>
<option value="middle-center" {% if cfg.voice_agent_position|default('top-left') == 'middle-center' %}selected{% endif %}>Mitte zentriert</option>
<option value="middle-right" {% if cfg.voice_agent_position|default('top-left') == 'middle-right' %}selected{% endif %}>Mitte rechts</option>
</optgroup>
<optgroup label="Unten">
<option value="bottom-left" {% if cfg.voice_agent_position|default('top-left') == 'bottom-left' %}selected{% endif %}>Unten links</option>
<option value="bottom-center" {% if cfg.voice_agent_position|default('top-left') == 'bottom-center' %}selected{% endif %}>Unten mitte</option>
<option value="bottom-right" {% if cfg.voice_agent_position|default('top-left') == 'bottom-right' %}selected{% endif %}>Unten rechts</option>
</optgroup>
</select>
</div>
<button type="submit" class="btn btn-primary">
Einstellungen speichern
</button>