Tabs in der Admin UI
This commit is contained in:
Erik Thiele
@@ -62,6 +62,14 @@
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.page-subtitle a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.page-subtitle a:hover {
|
||||
color: var(--ccm-primary);
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
font-size: 1.2em;
|
||||
@@ -71,6 +79,26 @@
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.card-body .nav-tabs {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
padding: 0 1rem;
|
||||
border-bottom-color: var(--ccm-border);
|
||||
}
|
||||
.card-body .nav-tabs .nav-link {
|
||||
background: transparent;
|
||||
color: var(--ccm-muted);
|
||||
}
|
||||
.card-body .nav-tabs .nav-link.active {
|
||||
background: var(--ccm-surface);
|
||||
border-color: var(--ccm-border) var(--ccm-border) var(--ccm-surface);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
.card-body .tab-content {
|
||||
background: var(--ccm-surface);
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -132,10 +160,8 @@
|
||||
<!-- Card Header -->
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span>
|
||||
<div class="page-title">Screen:
|
||||
<div class="text-uppercase"> - {{ screen }} -</div>
|
||||
</div>
|
||||
<div class="page-subtitle">http://localhost:5005/player/{{ current_site }}/{{ screen }}</div>
|
||||
<div class="page-title">{{ current_site | capitalize }}: <span class="fw-normal">Screen</span> <span class="text-uppercase">- {{ screen }}</span></div>
|
||||
<div class="page-subtitle"><a href="{{ server_url }}/player/{{ current_site }}/{{ screen }}">{{ server_url }}/player/{{ current_site }}/{{ screen }}</a></div>
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
{% if screen_status[screen] == "active" %}
|
||||
@@ -153,160 +179,183 @@
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Einstellungen -->
|
||||
<h2>Einstellungen</h2>
|
||||
<form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Intervall (Sekunden)</label>
|
||||
<input type="number" class="form-control"
|
||||
name="interval" min="1" value="{{ cfg.interval }}">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Newsticker-Text</label>
|
||||
<input type="text" class="form-control" name="newsticker_text" value="{{ cfg.newsticker_text|default('') }}" maxlength="200">
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="newsticker_enabled"
|
||||
{% if cfg.newsticker_enabled %}checked{% endif %}>
|
||||
<label class="form-check-label">Newsticker anzeigen</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="show_images"
|
||||
{% if cfg.show_images %}checked{% endif %}>
|
||||
<label class="form-check-label">Bilder anzeigen</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-4">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="show_videos"
|
||||
{% if cfg.show_videos %}checked{% endif %}>
|
||||
<label class="form-check-label">Videos anzeigen</label>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h3>Aktions-Button (Player)</h3>
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="custom_url_enabled"
|
||||
{% if cfg.custom_url_enabled %}checked{% endif %}>
|
||||
<label class="form-check-label">Aktions-Button anzeigen</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Button-URL</label>
|
||||
<input type="url" name="custom_url" class="form-control"
|
||||
placeholder="https://example.com" value="{{ cfg.custom_url|default('') }}">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Button-Beschriftung</label>
|
||||
<input type="text" name="custom_url_label" class="form-control"
|
||||
placeholder="z. B. Infos" value="{{ cfg.custom_url_label|default('') }}" maxlength="50">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Verhalten bei Klick</label>
|
||||
<select name="custom_url_target" class="form-select">
|
||||
<option value="overlay" {% if cfg.custom_url_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
|
||||
<option value="redirect" {% if cfg.custom_url_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Einstellungen speichern
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Upload -->
|
||||
<h2>Medien hochladen / URL hinzufügen - {{ screen }}</h2>
|
||||
<form action="/admin/{{ current_site }}/upload/{{ screen }}"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-primary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/{{ current_site }}/add-url/{{ screen }}" method="post" class="mb-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||||
</div>
|
||||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Playlist -->
|
||||
<h2>Playlist Reihenfolge - {{ screen }}</h2>
|
||||
|
||||
<ul class="list-group mb-3" id="playlist-{{ screen }}">
|
||||
{% for file in media_files[screen] %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<input class="form-check-input playlist-enabled"
|
||||
type="checkbox"
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/{{ current_site }}/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" or file.type == "html" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
|
||||
method="post">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Drag -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
<ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a href="#tab-playlist-{{ screen }}" class="nav-link active" data-bs-toggle="tab" role="tab">
|
||||
<i class="ti ti-list me-1"></i>Playlist
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a href="#settings-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
|
||||
<i class="ti ti-settings me-1"></i>Einstellungen
|
||||
</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
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('{{ current_site }}', '{{ screen }}')">
|
||||
Playlist speichern
|
||||
</button>
|
||||
<div class="tab-content mt-3">
|
||||
|
||||
<!-- Tab: Playlist -->
|
||||
<div class="tab-pane active" id="tab-playlist-{{ screen }}" role="tabpanel">
|
||||
<ul class="list-group mb-3" id="playlist-{{ screen }}">
|
||||
{% for file in media_files[screen] %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<input class="form-check-input playlist-enabled"
|
||||
type="checkbox"
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/{{ current_site }}/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" or file.type == "html" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
|
||||
method="post">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Drag -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('{{ current_site }}', '{{ screen }}')">
|
||||
Playlist speichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Einstellungen -->
|
||||
<div class="tab-pane" id="settings-{{ screen }}" role="tabpanel">
|
||||
<form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Intervall (Sekunden)</label>
|
||||
<input type="number" class="form-control"
|
||||
name="interval" min="1" value="{{ cfg.interval }}">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Newsticker-Text</label>
|
||||
<input type="text" class="form-control" name="newsticker_text" value="{{ cfg.newsticker_text|default('') }}" maxlength="200">
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="newsticker_enabled"
|
||||
{% if cfg.newsticker_enabled %}checked{% endif %}>
|
||||
<label class="form-check-label">Newsticker anzeigen</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="show_images"
|
||||
{% if cfg.show_images %}checked{% endif %}>
|
||||
<label class="form-check-label">Bilder anzeigen</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-4">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="show_videos"
|
||||
{% if cfg.show_videos %}checked{% endif %}>
|
||||
<label class="form-check-label">Videos anzeigen</label>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h3>Aktions-Button (Player)</h3>
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="custom_url_enabled"
|
||||
{% if cfg.custom_url_enabled %}checked{% endif %}>
|
||||
<label class="form-check-label">Aktions-Button anzeigen</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Button-URL</label>
|
||||
<input type="url" name="custom_url" class="form-control"
|
||||
placeholder="https://example.com" value="{{ cfg.custom_url|default('') }}">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Button-Beschriftung</label>
|
||||
<input type="text" name="custom_url_label" class="form-control"
|
||||
placeholder="z. B. Infos" value="{{ cfg.custom_url_label|default('') }}" maxlength="50">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Verhalten bei Klick</label>
|
||||
<select name="custom_url_target" class="form-select">
|
||||
<option value="overlay" {% if cfg.custom_url_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
|
||||
<option value="redirect" {% if cfg.custom_url_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Einstellungen speichern
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Medien -->
|
||||
<div class="tab-pane" id="media-{{ screen }}" role="tabpanel">
|
||||
<h3>Medien hochladen</h3>
|
||||
<form action="/admin/{{ current_site }}/upload/{{ screen }}"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-primary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
<h3>URL hinzufügen</h3>
|
||||
<form action="/admin/{{ current_site }}/add-url/{{ screen }}" method="post" class="mb-4">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,6 +55,26 @@
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.card-body .nav-tabs {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
padding: 0 1rem;
|
||||
border-bottom-color: var(--ccm-border);
|
||||
}
|
||||
.card-body .nav-tabs .nav-link {
|
||||
background: transparent;
|
||||
color: var(--ccm-muted);
|
||||
}
|
||||
.card-body .nav-tabs .nav-link.active {
|
||||
background: var(--ccm-surface);
|
||||
border-color: var(--ccm-border) var(--ccm-border) var(--ccm-surface);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
.card-body .tab-content {
|
||||
background: var(--ccm-surface);
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -95,100 +115,114 @@
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">
|
||||
Inhalte dieser Playlist werden <strong>auf allen Playern</strong>
|
||||
zusätzlich zur normalen Playlist angezeigt.
|
||||
<br>
|
||||
Die Wiedergabe erfolgt <strong>abwechselnd</strong>
|
||||
(Normal → Priority → Normal → …).
|
||||
</p>
|
||||
|
||||
<!-- Upload -->
|
||||
<h4>Medien hochladen</h4>
|
||||
<form action="/admin/{{ current_site }}/upload/priority"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-primary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/{{ current_site }}/add-url/priority" method="post" class="mb-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||||
</div>
|
||||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
|
||||
<!-- Playlist -->
|
||||
<h4>Playlist Reihenfolge</h4>
|
||||
|
||||
<ul class="list-group mb-3" id="playlist-priority">
|
||||
{% for file in priority_files %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<input class="form-check-input playlist-enabled"
|
||||
type="checkbox"
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" or file.type == "html" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen='priority', filename=file.name) }}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
onmousedown="event.stopPropagation()">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Drag -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
<ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a href="#tab-prio-playlist" class="nav-link active" data-bs-toggle="tab" role="tab">
|
||||
<i class="ti ti-list me-1"></i>Playlist
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a href="#tab-prio-media" class="nav-link" data-bs-toggle="tab" role="tab">
|
||||
<i class="ti ti-upload me-1"></i>Medien
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('{{ current_site }}', 'priority')">
|
||||
Priority-Playlist speichern
|
||||
</button>
|
||||
<div class="tab-content">
|
||||
|
||||
<!-- Tab: Playlist -->
|
||||
<div class="tab-pane active" id="tab-prio-playlist" role="tabpanel">
|
||||
<ul class="list-group mb-3" id="playlist-priority">
|
||||
{% for file in priority_files %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<input class="form-check-input playlist-enabled"
|
||||
type="checkbox"
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" or file.type == "html" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen='priority', filename=file.name) }}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
onmousedown="event.stopPropagation()">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Drag -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('{{ current_site }}', 'priority')">
|
||||
Priority-Playlist speichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Medien -->
|
||||
<div class="tab-pane" id="tab-prio-media" role="tabpanel">
|
||||
<h3>Medien hochladen</h3>
|
||||
<form action="/admin/{{ current_site }}/upload/priority"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-primary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
<h3>URL hinzufügen</h3>
|
||||
<form action="/admin/{{ current_site }}/add-url/priority" method="post" class="mb-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user