Files
signage/templates/admin.html
Erik Thiele f540458b74 fix: Zeitsteuerung reparieren und vervollstaendigen
Der vorige Commit 26efed8 war nicht lauffaehig - fehlgeschlagene
Patch-Anwendungen hatten Zeilen aus ihren Bloecken geschoben.

Reparaturen:
- admin(): zerschossene Playlist-Schleife neu aufgebaut
- player(): return render_template war in den else-Zweig gerutscht,
  wodurch die View bei aktiver Priority-Playlist None lieferte (HTTP 500)
- playlist_item_enabled() existierte nicht mehr (umbenannt zu
  is_item_active), zwei Aufrufe im Player blieben stehen -> NameError
- update_playlist_item(): Absturz bei new_url=null, und der
  enabled-Status ging beim Bearbeiten verloren
- Dateityp-Erkennung mit else-Fallback, ftype konnte ungebunden bleiben

Zeitsteuerung:
- Zeitfenster ueber Mitternacht (22:00-02:00) funktionieren; bei weekly
  gehoert ein solches Fenster zum Wochentag seines Starts
- Optionaler Gueltigkeitszeitraum (valid_from/valid_until) fuer daily
  und weekly, beide Grenzen einzeln optional und inklusiv
- daily/weekly speichern nur noch die Uhrzeit ("08:00") statt eines
  Zeitstempels mit bedeutungslosem Datumsanteil; _schedule_time() liest
  weiterhin auch Altbestaende mit vollem ISO-Zeitstempel
- playlist_hash() bezieht den ausgewerteten Aktiv-Zustand ein, sonst
  bemerkt der Player ein ablaufendes Zeitfenster erst beim naechsten
  Reload aus anderem Grund
- Zeitsteuerung auch fuer Datei-Eintraege, nicht nur URLs
- Neuer Filter schedule_text fuer den Tooltip am "Zeit"-Badge

Oberflaeche:
- required lag auf ausgeblendeten Feldern und blockierte das Absenden
  des Formulars "URL hinzufuegen" ohne sichtbare Meldung
- updateScheduleDaysVisibility() war innerhalb von DOMContentLoaded
  definiert, der Edit-Handler darueber -> ReferenceError bei jedem Klick
- data-schedule mit tojson zerlegte das Attribut, da tojson " nicht
  escaped
- Zeitsteuerungs-Block als schlichte Formularzeilen statt als card, die
  global den roten Rand und grauen Header erhaelt
- Zeitsteuerung auch in der Priority-Playlist

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-29 19:42:03 +02:00

1047 lines
50 KiB
HTML
Executable File

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CANCOM Simple Signage Admin</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<!-- ─── Dark Mode: Theme vor dem Rendern setzen ─── -->
<script>
(() => {
const stored = window.localStorage.getItem("signage-theme");
const theme = stored === "dark" || stored === "light" ? stored : "light";
document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>
<!-- ─── Externe Bibliotheken (Tabler CSS/JS, SortableJS) ─── -->
<link rel="stylesheet"
href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<script defer
src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
<script defer
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
{% include "_styles.html" %}
<style>
/* ─── Tooltip-Styling (CANCOM-rot) ─── */
.tooltip {
--bs-tooltip-border-color: var(--ccm-primary);
}
.tooltip .tooltip-inner {
border: 1px solid var(--ccm-primary);
background-color: #ffffff;
color: #212121;
box-shadow: none;
}
.tooltip .tooltip-arrow::before {
border-top-color: var(--ccm-primary);
border-bottom-color: var(--ccm-primary);
background-color: #ffffff;
}
/* ─── Playlist-Zeile als Grid (Checkbox | Name | Typ | Größe | Löschen | Edit | Drag) ─── */
.playlist-row {
display: grid;
grid-template-columns:
28px 1fr 90px 80px 50px 40px 32px;
align-items: center;
gap: 0.75rem;
}
.playlist-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.playlist-size {
color: #6c757d;
font-size: 0.9em;
}
/* ─── Player-URL im Screen-Header als Link (grau, rot bei Hover) ─── */
.page-subtitle a {
color: inherit;
text-decoration: none;
}
.page-subtitle a:hover {
color: var(--ccm-primary);
}
/* ─── Drag-Handle für SortableJS ─── */
.drag-handle {
cursor: grab;
font-size: 1.2em;
text-align: center;
user-select: none;
}
.drag-handle:active {
cursor: grabbing;
}
/* ─── Tab-Styling (extend to card edges, unified background) ─── */
.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>
<div class="page">
{% set brand_subtitle = "Admin Dashboard" %}
{% set site_dropdown_url_prefix = "/admin/" %}
{% include "_header.html" %}
<!-- ═══════════════════════════════════════════════════
Navigation (zweite Zeile)
Übersicht | Priority | Willkommensseite | Screens-Dropdown | +
═══════════════════════════════════════════════════ -->
<div class="navbar-expand-md">
<div class="collapse navbar-collapse show">
<div class="navbar navbar-dark nav-surface">
<div class="container-xl">
<div class="d-flex flex-wrap gap-2 py-2">
<a class="btn btn-white active" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
<a class="btn btn-white" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority Playlist</a>
<a class="btn btn-white" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
<div class="dropdown d-inline-block">
<button class="btn btn-white" type="button" data-bs-toggle="dropdown">
<i class="ti ti-device-desktop me-1"></i>Screens <i class="ti ti-chevron-down"></i>
</button>
<div class="dropdown-menu">
{% for s in screens.keys() %}
<a class="dropdown-item" href="#screen-{{ s }}"><i class="ti ti-device-desktop me-1"></i>{{ s | capitalize }}</a>
{% endfor %}
</div>
</div>
<!-- + Button: Neuen Screen anlegen (prompt → /admin/<site>/add-screen?name=...) -->
<a class="btn btn-white" href="javascript:void(0)"
onclick="var n=prompt('Name des neuen Screens:'); if(n&&n.trim()) location.href='/admin/{{ current_site }}/add-screen?name='+encodeURIComponent(n.trim().toLowerCase());"
title="Neuen Screen anlegen"><i class="ti ti-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════
CONTENT
═══════════════════════════════════════════════════ -->
<div class="page-wrapper">
<div class="container-xl mt-4">
<!-- ─── Standort löschen (Button oben rechts, nur für Admins) ─── -->
{% if current_user.is_admin %}
<div class="d-flex justify-content-end mb-3">
<form action="/admin/{{ current_site }}/delete-site" method="post"
onsubmit="return confirm('Standort »{{ current_site }}« wirklich löschen? Alle Screens und Medien werden gelöscht.')">
<button type="submit" class="btn btn-outline-danger btn-sm"><i class="ti ti-building-off me-1"></i>Standort löschen</button>
</form>
</div>
{% endif %}
<!-- ========================= -->
<!-- SCREEN-CARDS -->
<!-- ========================= -->
{% for screen, cfg in screens.items() %}
<div class="card mb-6" id="screen-{{ screen }}">
<!-- Card-Header: Screen-Name, Status-Badge, Player-URL, Löschen -->
<div class="card-header d-flex justify-content-between align-items-center">
<span>
<div class="page-title">{{ current_site | capitalize }}:&nbsp;<span class="fw-normal">Screen</span>&nbsp;<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] == "online" %}
<button type="button" class="btn btn-sm btn-success" onclick="return false;"
title="Browser: {{ client_info[screen].get('ua', '?')[:60] }}&#10;Auflösung: {{ client_info[screen].get('resolution', '?') }}&#10;IP: {{ client_info[screen].get('ip', '?') }}&#10;Zuletzt: {{ client_info[screen].get('last_seen', '?') }}">Online</button>
{% else %}
<button type="button" class="btn btn-sm btn-danger" onclick="return false;">Offline</button>
{% endif %}
<form action="/admin/{{ current_site }}/delete-screen/{{ screen }}"
method="post" class="d-inline m-0 p-0"
onsubmit="return confirm('Screen »{{ screen }}« wirklich löschen? Alle Medien werden gelöscht.')">
<button type="submit" class="btn btn-outline-danger btn-sm">Löschen</button>
</form>
</div>
</div>
<!-- Card-Body: Tabs (Playlist | Einstellungen | Aktionen | Digital Voice Agent | Medien | Info) -->
<div class="card-body">
<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="#actions-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
<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
</a>
</li>
<li class="nav-item" role="presentation">
<a href="#info-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
<i class="ti ti-info-circle me-1"></i>Info
</a>
</li>
</ul>
<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 }}">
<!-- Aktiv-Checkbox -->
<input class="form-check-input playlist-enabled"
type="checkbox"
{% if file.enabled %}checked{% endif %}
title="Element aktivieren">
<!-- Dateiname (mit Tooltip-Vorschau) -->
<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'>"
{% else %}
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 %}{% if file.type == "url" %}{% if file.get('passthrough', False) %} <i class="ti ti-link" style="color:#6c757d;" title="Query-Parameter werden übergeben"></i>{% else %} <i class="ti ti-link-off" style="color:#adb5bd;" title="Query-Parameter werden nicht übergeben"></i>{% endif %}{% endif %}
{% if file.schedule %}<span class="badge bg-info text-white ms-1" title="{{ file.schedule | schedule_text }}">Zeit</span>{% endif %}
</span>
<!-- Typ-Badge -->
{% 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 %}
<!-- Größe -->
<span class="playlist-size">
{% if file.type == "url" %}
{{ file.size }}
{% else %}
{{ file.size }} KB
{% endif %}
</span>
<!-- Löschen -->
<form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
method="post" style="margin: 0; padding: 0;">
<button type="submit"
class="btn btn-outline-danger btn-sm"
onclick="return confirm('Datei wirklich löschen?')">
Löschen
</button>
</form>
<!-- Bearbeiten (nur URLs) -->
<button type="button"
class="btn btn-outline-secondary btn-sm edit-url-btn"
title="Bearbeiten"
data-name="{{ file.name | e }}"
data-type="{{ file.type }}"
data-zoom="{{ file.zoom | default(1.0) }}"
data-site="{{ current_site }}"
data-screen="{{ screen }}"
data-oldname="{{ file.name | e }}"
data-passthrough="{{ 'true' if file.get('passthrough', False) else 'false' }}"
data-schedule='{{ file.schedule | tojson }}'>
Edit
</button>
<!-- Drag-Handle (SortableJS) -->
<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>
<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>
</form>
</div>
<!-- ═══ Tab: Aktionen ═══ -->
<div class="tab-pane" id="actions-{{ screen }}" role="tabpanel">
<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"
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>
<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>
</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>
<!-- Zeitsteuerung -->
<hr class="mt-4 mb-3">
<h3>Zeitsteuerung</h3>
<div class="mb-2 form-check">
<input class="form-check-input" type="checkbox" id="schedule-enabled-{{ screen }}" name="schedule_enabled">
<label class="form-check-label" for="schedule-enabled-{{ screen }}">Zeitgesteuerte Wiedergabe</label>
</div>
<div class="mb-3" id="schedule-options-{{ screen }}" style="display: none;">
<div class="mb-3">
<label class="form-label">Wiederholung</label>
<select class="form-select" name="schedule_mode">
<option value="once">Einmalig</option>
<option value="daily">Täglich</option>
<option value="weekly">Wöchentlich</option>
</select>
</div>
<!-- Einmalig: Datum + Uhrzeit -->
<div class="row mb-3" id="schedule-datetime-{{ screen }}">
<div class="col">
<label class="form-label">Start</label>
<input type="datetime-local" class="form-control" name="schedule_start">
</div>
<div class="col">
<label class="form-label">Ende</label>
<input type="datetime-local" class="form-control" name="schedule_end">
</div>
</div>
<!-- Täglich / Wöchentlich: nur Uhrzeit -->
<div class="row mb-3" id="schedule-time-{{ screen }}" style="display: none;">
<div class="col">
<label class="form-label">Von</label>
<input type="time" class="form-control" name="schedule_start_time">
</div>
<div class="col">
<label class="form-label">Bis</label>
<input type="time" class="form-control" name="schedule_end_time">
</div>
</div>
<div class="mb-3" id="schedule-validity-{{ screen }}" style="display: none;">
<label class="form-label">Gültig von / bis <span class="text-muted">(optional)</span></label>
<div class="row">
<div class="col">
<input type="date" class="form-control" name="schedule_valid_from">
</div>
<div class="col">
<input type="date" class="form-control" name="schedule_valid_until">
</div>
</div>
<small class="form-hint">Ohne Angabe läuft die Wiedergabe unbefristet.</small>
</div>
<div class="mb-3" id="schedule-days-{{ screen }}" style="display: none;">
<label class="form-label">Wochentage</label>
<div class="d-flex gap-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="0" id="mon-{{ screen }}">
<label class="form-check-label" for="mon-{{ screen }}">Mo</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="1" id="tue-{{ screen }}">
<label class="form-check-label" for="tue-{{ screen }}">Di</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="2" id="wed-{{ screen }}">
<label class="form-check-label" for="wed-{{ screen }}">Mi</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="3" id="thu-{{ screen }}">
<label class="form-check-label" for="thu-{{ screen }}">Do</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="4" id="fri-{{ screen }}">
<label class="form-check-label" for="fri-{{ screen }}">Fr</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="5" id="sat-{{ screen }}">
<label class="form-check-label" for="sat-{{ screen }}">Sa</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="schedule_days" value="6" id="sun-{{ screen }}">
<label class="form-check-label" for="sun-{{ screen }}">So</label>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">URL hinzufügen</button>
</form>
</div>
<!-- ═══ Tab: Info (Client-Informationen) ═══ -->
<div class="tab-pane" id="info-{{ screen }}" role="tabpanel">
<h3>Client-Informationen</h3>
{% if client_info[screen] %}
<table class="table table-sm">
<tbody>
<tr>
<th style="width:140px">IP-Adresse</th>
<td><code>{{ client_info[screen].get('ip', '') }}</code></td>
</tr>
<tr>
<th>Browser</th>
<td style="word-break:break-all"><small>{{ client_info[screen].get('ua', '') }}</small></td>
</tr>
<tr>
<th>Auflösung</th>
<td>{{ client_info[screen].get('resolution', '') }}</td>
</tr>
<tr>
<th>Zuletzt gesehen</th>
<td>{{ client_info[screen].get('last_seen', '') }}</td>
</tr>
</tbody>
</table>
{% else %}
<p class="text-muted">Noch keine Client-Daten vorhanden. Der Player muss mindestens einmal die Playlist aufgerufen haben.</p>
{% endif %}
</div>
</div> <!-- /tab-content -->
</div> <!-- /card-body -->
</div> <!-- /card -->
{% endfor %}
</div> <!-- /container -->
</div> <!-- /page-wrapper -->
<!-- Footer -->
{% include "_footer.html" %}
</div> <!-- /page -->
<script>
/* ─── Playlist-Item bearbeiten (URL + Zoom + Zeitsteuerung) ─── */
var editState = { site: "", screen: "", oldName: "", type: "url" };
/* Zeitsteuerung: Wochentage nur im Modus "weekly" zeigen.
Muss auf Top-Level stehen - der Edit-Handler unten läuft ausserhalb
von DOMContentLoaded und würde die Funktion sonst nicht finden. */
/* Uhrzeit aus "HH:MM" oder einem vollen ISO-Zeitstempel herausziehen */
function scheduleClock(value) {
if (!value) return "";
var text = String(value).replace(" ", "T");
var idx = text.indexOf("T");
if (idx !== -1) text = text.substring(idx + 1);
return text.substring(0, 5);
}
function updateScheduleDaysVisibility() {
var modeEl = document.getElementById("edit-schedule-mode");
if (!modeEl) return;
var wiederkehrend = modeEl.value === "daily" || modeEl.value === "weekly";
var daysEl = document.getElementById("edit-schedule-days");
var validityEl = document.getElementById("edit-schedule-validity");
var datetimeEl = document.getElementById("edit-schedule-datetime");
var timeEl = document.getElementById("edit-schedule-time");
// Wochentage nur bei "wöchentlich" - bei "täglich" gilt ohnehin jeder Tag
if (daysEl) daysEl.style.display = modeEl.value === "weekly" ? "" : "none";
// Gültigkeitszeitraum ergänzt die Tageszeit; bei "einmalig" steckt das
// Datum bereits in Start und Ende.
if (validityEl) validityEl.style.display = wiederkehrend ? "" : "none";
if (datetimeEl) datetimeEl.style.display = wiederkehrend ? "none" : "";
if (timeEl) timeEl.style.display = wiederkehrend ? "" : "none";
}
/* Event-Delegation für Edit-Buttons (global, sofort aktiv) */
document.addEventListener("click", function (e) {
var btn = e.target.closest(".edit-url-btn");
if (!btn) return;
e.preventDefault();
editState.site = btn.dataset.site;
editState.screen = btn.dataset.screen;
editState.oldName = btn.dataset.oldname;
editState.type = btn.dataset.type || "url";
var isUrl = editState.type === "url";
document.getElementById("edit-url-input").value = btn.dataset.oldname;
document.getElementById("edit-zoom-input").value = btn.dataset.zoom;
document.getElementById("edit-passthrough-input").checked = btn.dataset.passthrough === "true";
/* Bei Dateien gibt es keine URL, keinen Zoom und kein Passthrough -
dann bleibt nur die Zeitsteuerung übrig. */
document.getElementById("edit-url-row").style.display = isUrl ? "" : "none";
document.getElementById("edit-zoom-row").style.display = isUrl ? "" : "none";
document.getElementById("edit-passthrough-row").style.display = isUrl ? "" : "none";
document.getElementById("edit-url-modal-title").textContent =
isUrl ? "URL bearbeiten" : "Zeitsteuerung: " + btn.dataset.oldname;
// Zeitsteuerung aus Daten setzen
const schedule = JSON.parse(btn.dataset.schedule || 'null');
const enabledEl = document.getElementById("edit-schedule-enabled");
const optionsEl = document.getElementById("edit-schedule-options");
if (schedule) {
enabledEl.checked = true;
optionsEl.style.display = "";
document.getElementById("edit-schedule-mode").value = schedule.mode || "once";
var wiederkehrend = (schedule.mode === "daily" || schedule.mode === "weekly");
document.getElementById("edit-schedule-start").value = wiederkehrend ? "" : (schedule.start || "");
document.getElementById("edit-schedule-end").value = wiederkehrend ? "" : (schedule.end || "");
document.getElementById("edit-schedule-start-time").value = scheduleClock(schedule.start);
document.getElementById("edit-schedule-end-time").value = scheduleClock(schedule.end);
document.getElementById("edit-schedule-valid-from").value = schedule.valid_from || "";
document.getElementById("edit-schedule-valid-until").value = schedule.valid_until || "";
// Wochentage setzen
const days = schedule.days || [];
document.getElementById("edit-mon").checked = days.includes("0");
document.getElementById("edit-tue").checked = days.includes("1");
document.getElementById("edit-wed").checked = days.includes("2");
document.getElementById("edit-thu").checked = days.includes("3");
document.getElementById("edit-fri").checked = days.includes("4");
document.getElementById("edit-sat").checked = days.includes("5");
document.getElementById("edit-sun").checked = days.includes("6");
// Wochentage-Anzeige entsprechend Modus aktualisieren
updateScheduleDaysVisibility();
} else {
enabledEl.checked = false;
optionsEl.style.display = "none";
document.getElementById("edit-schedule-valid-from").value = "";
document.getElementById("edit-schedule-valid-until").value = "";
document.getElementById("edit-schedule-start-time").value = "";
document.getElementById("edit-schedule-end-time").value = "";
updateScheduleDaysVisibility();
}
document.getElementById("edit-url-error").style.display = "none";
new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
});
document.addEventListener("DOMContentLoaded", function () {
function initSortable(name) {
const el = document.getElementById("playlist-" + name);
if (!el || typeof Sortable === "undefined") return;
new Sortable(el, {
animation: 150,
handle: ".drag-handle",
ghostClass: "bg-light",
chosenClass: "bg-light"
});
}
// Für jeden Screen eine Sortable-Instanz
{% for screen in screens.keys() %}
initSortable("{{ screen }}");
{% endfor %}
/* ─── Playlist-Reihenfolge speichern ───
Sendet die aktuelle Sortierung als JSON an /admin/<site>/playlist/<screen> */
function savePlaylist(site, screen) {
const items = document.querySelectorAll(
"#playlist-" + screen + " li"
);
const playlist = [];
const enabled = {};
items.forEach((item) => {
const checkbox = item.querySelector(".playlist-enabled");
const fileName = item.dataset.file;
enabled[fileName] = !!(checkbox && checkbox.checked);
playlist.push(fileName);
});
fetch("/admin/" + site + "/playlist/" + screen, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
playlist: playlist,
enabled: enabled
})
}).then(() => location.reload());
}
window.savePlaylist = savePlaylist;
/* ─── Bootstrap Tooltips initialisieren ─── */
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
/* ─── Zeitsteuerung: Änderungs-Events verarbeiten ─── */
document.getElementById("edit-schedule-enabled").addEventListener("change", function() {
document.getElementById("edit-schedule-options").style.display = this.checked ? "" : "none";
});
document.getElementById("edit-schedule-mode").addEventListener("change", function() {
updateScheduleDaysVisibility();
});
// Initiale Anzeige
updateScheduleDaysVisibility();
/* ─── "URL hinzufügen"-Formular: Zeitsteuerungs-Felder ein-/ausblenden ───
Läuft pro Screen, die IDs sind mit dem Screen-Namen suffigiert. */
document.querySelectorAll('[id^="schedule-enabled-"]').forEach(function (cb) {
var suffix = cb.id.substring("schedule-enabled-".length);
var optionsEl = document.getElementById("schedule-options-" + suffix);
var daysEl = document.getElementById("schedule-days-" + suffix);
var validityEl = document.getElementById("schedule-validity-" + suffix);
var datetimeEl = document.getElementById("schedule-datetime-" + suffix);
var timeEl = document.getElementById("schedule-time-" + suffix);
var modeEl = cb.closest("form") ? cb.closest("form").querySelector('[name="schedule_mode"]') : null;
function sync() {
var mode = modeEl ? modeEl.value : "once";
var wiederkehrend = (mode === "daily" || mode === "weekly");
if (optionsEl) optionsEl.style.display = cb.checked ? "" : "none";
if (daysEl) daysEl.style.display = (cb.checked && mode === "weekly") ? "" : "none";
if (validityEl) validityEl.style.display = (cb.checked && wiederkehrend) ? "" : "none";
if (datetimeEl) datetimeEl.style.display = wiederkehrend ? "none" : "";
if (timeEl) timeEl.style.display = wiederkehrend ? "" : "none";
}
cb.addEventListener("change", sync);
if (modeEl) modeEl.addEventListener("change", sync);
sync();
});
/* ─── Edit-URL-Modal: Speichern-Button ─── */
document.getElementById("edit-url-save").addEventListener("click", function () {
const isUrl = editState.type === "url";
const newUrl = document.getElementById("edit-url-input").value.trim();
const zoom = parseFloat(document.getElementById("edit-zoom-input").value) || 1.0;
const errorEl = document.getElementById("edit-url-error");
if (isUrl && !newUrl.startsWith("http://") && !newUrl.startsWith("https://")) {
errorEl.textContent = "Ungültige URL (muss mit http:// oder https:// beginnen)";
errorEl.style.display = "block";
return;
}
errorEl.style.display = "none";
// Zeitsteuerung sammeln
const scheduleEnabled = document.getElementById("edit-schedule-enabled").checked;
let schedule = null;
if (scheduleEnabled) {
const mode = document.getElementById("edit-schedule-mode").value;
const wiederkehrend = (mode === "daily" || mode === "weekly");
// Einmalig arbeitet mit Datum + Uhrzeit, täglich/wöchentlich nur mit Uhrzeit
const start = wiederkehrend
? document.getElementById("edit-schedule-start-time").value
: document.getElementById("edit-schedule-start").value;
const end = wiederkehrend
? document.getElementById("edit-schedule-end-time").value
: document.getElementById("edit-schedule-end").value;
if (!start || !end) {
errorEl.textContent = wiederkehrend
? "Von- und Bis-Uhrzeit müssen angegeben werden"
: "Start und Ende müssen angegeben werden";
errorEl.style.display = "block";
return;
}
schedule = {
mode: mode,
start: start,
end: end
};
if (mode === "daily" || mode === "weekly") {
const validFrom = document.getElementById("edit-schedule-valid-from").value;
const validUntil = document.getElementById("edit-schedule-valid-until").value;
if (validFrom && validUntil && validFrom > validUntil) {
errorEl.textContent = "\"Gültig von\" liegt nach \"Gültig bis\"";
errorEl.style.display = "block";
return;
}
if (validFrom) schedule.valid_from = validFrom;
if (validUntil) schedule.valid_until = validUntil;
}
if (mode === "weekly") {
const days = [];
if (document.getElementById("edit-mon").checked) days.push("0");
if (document.getElementById("edit-tue").checked) days.push("1");
if (document.getElementById("edit-wed").checked) days.push("2");
if (document.getElementById("edit-thu").checked) days.push("3");
if (document.getElementById("edit-fri").checked) days.push("4");
if (document.getElementById("edit-sat").checked) days.push("5");
if (document.getElementById("edit-sun").checked) days.push("6");
schedule.days = days;
}
}
fetch("/admin/" + editState.site + "/update-playlist-item/" + editState.screen, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
old_name: editState.oldName,
new_url: isUrl ? newUrl : null,
zoom: zoom,
passthrough: isUrl ? document.getElementById("edit-passthrough-input").checked : null,
schedule: schedule || {}
})
}).then(function (r) {
if (r.ok) {
location.reload();
} else {
return r.json().then(function (d) {
errorEl.textContent = d.error || "Fehler beim Speichern";
errorEl.style.display = "block";
});
}
}).catch(function () {
errorEl.textContent = "Netzwerkfehler";
errorEl.style.display = "block";
});
});
});
</script>
<!-- Modal: URL bearbeiten -->
<div class="modal fade" id="edit-url-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-url-modal-title">URL bearbeiten</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3" id="edit-url-row">
<label class="form-label">URL</label>
<input type="url" class="form-control" id="edit-url-input">
</div>
<div class="mb-3" id="edit-zoom-row">
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
<input type="number" class="form-control" id="edit-zoom-input" step="0.1" min="0.1" value="1.0">
</div>
<div class="mb-3 form-check" id="edit-passthrough-row">
<input type="checkbox" class="form-check-input" id="edit-passthrough-input">
<label class="form-check-label" for="edit-passthrough-input">Query-Parameter an diese URL übergeben</label>
</div>
<!-- Zeitsteuerung: gleiche schlichte Zeilen wie der Rest des Dialogs -->
<div class="mb-3 form-check">
<input class="form-check-input" type="checkbox" id="edit-schedule-enabled">
<label class="form-check-label" for="edit-schedule-enabled">Zeitgesteuerte Wiedergabe</label>
</div>
<div id="edit-schedule-options" style="display: none;">
<div class="mb-3">
<label class="form-label">Wiederholung</label>
<select class="form-select" id="edit-schedule-mode">
<option value="once">Einmalig</option>
<option value="daily">Täglich</option>
<option value="weekly">Wöchentlich</option>
</select>
</div>
<!-- Einmalig: Datum + Uhrzeit -->
<div class="row mb-3" id="edit-schedule-datetime">
<div class="col">
<label class="form-label">Start</label>
<input type="datetime-local" class="form-control" id="edit-schedule-start">
</div>
<div class="col">
<label class="form-label">Ende</label>
<input type="datetime-local" class="form-control" id="edit-schedule-end">
</div>
</div>
<!-- Täglich / Wöchentlich: nur Uhrzeit -->
<div class="row mb-3" id="edit-schedule-time" style="display: none;">
<div class="col">
<label class="form-label">Von</label>
<input type="time" class="form-control" id="edit-schedule-start-time">
</div>
<div class="col">
<label class="form-label">Bis</label>
<input type="time" class="form-control" id="edit-schedule-end-time">
</div>
</div>
<div class="mb-3" id="edit-schedule-validity" style="display: none;">
<label class="form-label">Gültig von / bis <span class="text-muted">(optional)</span></label>
<div class="row">
<div class="col">
<input type="date" class="form-control" id="edit-schedule-valid-from">
</div>
<div class="col">
<input type="date" class="form-control" id="edit-schedule-valid-until">
</div>
</div>
<small class="form-hint">Ohne Angabe läuft die Wiedergabe unbefristet.</small>
</div>
<div class="mb-3" id="edit-schedule-days" style="display: none;">
<label class="form-label">Wochentage</label>
<div class="d-flex gap-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="0" id="edit-mon">
<label class="form-check-label" for="edit-mon">Mo</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="edit-tue">
<label class="form-check-label" for="edit-tue">Di</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" id="edit-wed">
<label class="form-check-label" for="edit-wed">Mi</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="3" id="edit-thu">
<label class="form-check-label" for="edit-thu">Do</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="4" id="edit-fri">
<label class="form-check-label" for="edit-fri">Fr</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="5" id="edit-sat">
<label class="form-check-label" for="edit-sat">Sa</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="6" id="edit-sun">
<label class="form-check-label" for="edit-sun">So</label>
</div>
</div>
</div>
</div>
<div class="alert alert-danger py-2" id="edit-url-error" style="display:none"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary" id="edit-url-save">Speichern</button>
</div>
</div>
</div>
</div>
</body>
</html>