Hilfetexte ergänzt
This commit is contained in:
Erik Thiele
@@ -14,7 +14,7 @@ docker compose up -d
|
||||
|
||||
- Single Flask app in `app.py`; there is no database.
|
||||
- Persistent state is `config.json` plus files under `media/<site>/<screen>/`.
|
||||
- `README.md` is stale on the port number; trust `app.py`.
|
||||
- Port 5005; `README.md` hat den korrekten Port.
|
||||
- Existing repo instructions in this file are the main local guidance; there is no `opencode.json` or workflow config in this repo.
|
||||
|
||||
## Multi-Standort-URL-Struktur (seit v4.2.0)
|
||||
@@ -55,7 +55,7 @@ Standorte (sites) sind die oberste Organisationsebene und gruppieren Screens.
|
||||
- `add_customer_to_lobby_playlist` entfernt `welcome.html` sowohl als String als auch als Dict aus der Playlist vor dem Einfügen.
|
||||
- `add_screen` legt ein Verzeichnis unter `media/<site>/<screen>/` an und einen Config-Eintrag.
|
||||
- `delete_screen` entfernt den Screen aus der Config und löscht das Verzeichnis rekursiv.
|
||||
- Custom-URL-Button: pro Screen konfigurierbar (`custom_url` + `custom_url_label` + `custom_url_target`) im Admin-Formular; wird im Player als Button oben links angezeigt und öffnet die URL wahlweise in einem iframe-Overlay mit Zurück-Button (`overlay`) oder per Direkt-Weiterleitung (`redirect`); Player pausiert während das Overlay geöffnet ist.
|
||||
- Custom-URL-Button: pro Screen konfigurierbar (`custom_url` + `custom_url_label` + `custom_url_enabled` + `custom_url_target`) im Admin-Formular; wird im Player als Button oben links angezeigt und öffnet die URL wahlweise in einem iframe-Overlay mit Zurück-Button (`overlay`) oder per Direkt-Weiterleitung (`redirect`); Player pausiert während das Overlay geöffnet ist.
|
||||
- Neue Standorte können über den `+`-Button im Header oder über `GET /add-site?name=<name>` angelegt werden.
|
||||
- `delete_site` entfernt den Standort aus Config und löscht das Medienverzeichnis rekursiv.
|
||||
- `config.json["server_url"]` (z. B. `http://signage.ccmake.de`) wird in der Admin-Ansicht für die Player-URLs verwendet.
|
||||
|
||||
32
README.md
32
README.md
@@ -91,7 +91,7 @@ signage/
|
||||
### Setup
|
||||
|
||||
```bash
|
||||
pip install flask flask-login werkzeug openai
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### Starten
|
||||
@@ -135,8 +135,6 @@ docker compose up -d
|
||||
| `POST /api/customer` | API-Endpunkt für Willkommensseite (JSON) |
|
||||
| `GET /media/<site>/<screen>/<file>` | Medien-Datei ausliefern |
|
||||
| `GET /media/priority/<file>` | Priority-Medien (global) |
|
||||
| `GET /add-site?name=<name>` | Neuen Standort anlegen |
|
||||
| `POST /admin/<site>/delete-site` | Standort + alle Screens/Medien löschen |
|
||||
|
||||
### Admin-Portal
|
||||
|
||||
@@ -182,7 +180,18 @@ Maximal 3 Kunden eingeben → Logos werden via OpenAI + Brandfetch gesucht → `
|
||||
"sites": {
|
||||
"stuttgart": {
|
||||
"screens": {
|
||||
"lobby": { "playlist": [...], "interval": 10 },
|
||||
"lobby": {
|
||||
"playlist": [...],
|
||||
"interval": 10,
|
||||
"show_images": true,
|
||||
"show_videos": true,
|
||||
"newsticker_text": "...",
|
||||
"newsticker_enabled": false,
|
||||
"custom_url_enabled": false,
|
||||
"custom_url": "https://...",
|
||||
"custom_url_label": "Infos",
|
||||
"custom_url_target": "overlay"
|
||||
},
|
||||
"casino": { "playlist": [...], "interval": 15 }
|
||||
}
|
||||
}
|
||||
@@ -196,6 +205,21 @@ Maximal 3 Kunden eingeben → Logos werden via OpenAI + Brandfetch gesucht → `
|
||||
|
||||
---
|
||||
|
||||
## Screen-Konfiguration (pro Screen in `config.json`)
|
||||
|
||||
| Feld | Typ | Beschreibung |
|
||||
|------|-----|-------------|
|
||||
| `playlist` | Array | Playlist-Einträge (Strings oder Dicts mit `url`/`zoom`) |
|
||||
| `interval` | int | Anzeige-Intervall in Sekunden |
|
||||
| `show_images` | bool | Bilder anzeigen |
|
||||
| `show_videos` | bool | Videos anzeigen |
|
||||
| `newsticker_text` | string | Text für Newsticker (max. 200 Zeichen) |
|
||||
| `newsticker_enabled` | bool | Newsticker anzeigen |
|
||||
| `custom_url_enabled` | bool | Custom-URL-Button im Player anzeigen |
|
||||
| `custom_url` | string | URL des Aktions-Buttons |
|
||||
| `custom_url_label` | string | Button-Beschriftung |
|
||||
| `custom_url_target` | string | `"overlay"` (iframe) oder `"redirect"` |
|
||||
|
||||
## Helper-Funktionen (`app.py`)
|
||||
|
||||
- `load_config()` / `save_config()` – JSON lesen/schreiben
|
||||
|
||||
157
app.py
157
app.py
@@ -1,8 +1,17 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
CANCOM Simple Signage – Flask-App für Digital-Signage-Anzeigen.
|
||||
──────────────────────────────────────────────────────────────
|
||||
Diese App verwaltet mehrere Standorte (sites) mit jeweils mehreren
|
||||
Screens. Jeder Screen hat eine eigene Playlist aus Bildern, Videos,
|
||||
HTML-Seiten und URLs. Optional kann eine globale Priority-Playlist
|
||||
zugeschaltet werden, die auf allen Playern abwechselnd eingeblendet wird.
|
||||
"""
|
||||
|
||||
import os
|
||||
import json
|
||||
import hashlib
|
||||
# Import welcome page functions
|
||||
import generate_welcome_page
|
||||
import generate_welcome_page # Logo-Suche und Willkommensseite-Generierung
|
||||
|
||||
from datetime import datetime
|
||||
|
||||
@@ -23,8 +32,8 @@ from werkzeug.utils import secure_filename
|
||||
# Grundkonfiguration
|
||||
# -------------------------------------------------
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
MEDIA_DIR = os.path.join(BASE_DIR, "media")
|
||||
CONFIG_FILE = os.path.join(BASE_DIR, "config.json")
|
||||
MEDIA_DIR = os.path.join(BASE_DIR, "media") # Medien-Dateien je Standort/Screen
|
||||
CONFIG_FILE = os.path.join(BASE_DIR, "config.json") # Persistente Konfiguration
|
||||
|
||||
APP_VERSION = "5.1.0"
|
||||
UPLOAD_EXTENSIONS = {".jpg", ".jpeg", ".png", ".mp4"}
|
||||
@@ -33,28 +42,35 @@ app = Flask(__name__)
|
||||
app.secret_key = "CHANGE_THIS_SECRET!!!"
|
||||
|
||||
login_manager = LoginManager(app)
|
||||
login_manager.login_view = "login"
|
||||
login_manager.login_view = "login" # Nicht eingeloggte User werden zum Login umgeleitet
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Config Helpers
|
||||
# Config-Helfer
|
||||
# -------------------------------------------------
|
||||
def load_config():
|
||||
"""Liest die config.json und gibt das Dict zurück. Legt ein leeres an, falls nicht vorhanden."""
|
||||
if not os.path.exists(CONFIG_FILE):
|
||||
return {"admin": {}, "sites": {}}
|
||||
with open(CONFIG_FILE) as f:
|
||||
return json.load(f)
|
||||
|
||||
|
||||
def save_config(cfg):
|
||||
"""Schreibt das Config-Dict zurück in die config.json."""
|
||||
with open(CONFIG_FILE, "w") as f:
|
||||
json.dump(cfg, f, indent=2)
|
||||
f.flush()
|
||||
|
||||
|
||||
def get_site_list(cfg):
|
||||
"""Gibt eine sortierte Liste aller konfigurierten Standort-Namen zurück."""
|
||||
return sorted(cfg.get("sites", {}).keys())
|
||||
|
||||
|
||||
def get_screen_config(cfg, site, screen):
|
||||
"""Holt die Konfiguration für einen bestimmten Screen.
|
||||
Erzeugt automatisch fehlende Dict-Ebenen (sites → site → screens → screen)."""
|
||||
return (
|
||||
cfg
|
||||
.setdefault("sites", {})
|
||||
@@ -65,12 +81,15 @@ def get_screen_config(cfg, site, screen):
|
||||
|
||||
|
||||
def is_url(item):
|
||||
"""Prüft, ob ein Playlist-Eintrag eine URL ist (String mit http/https) oder ein Dict mit "url"-Key."""
|
||||
if isinstance(item, str):
|
||||
return item.startswith("http://") or item.startswith("https://")
|
||||
return isinstance(item, dict) and "url" in item
|
||||
|
||||
|
||||
def normalize_url(item):
|
||||
"""Normalisiert einen URL-Eintrag zu einem Dict mit "url" und "zoom".
|
||||
Zoom wird aus Dict übernommen oder defaultmäßig auf 1.0 gesetzt."""
|
||||
if isinstance(item, str):
|
||||
return {"url": item, "zoom": 1.0}
|
||||
if isinstance(item, dict):
|
||||
@@ -79,6 +98,7 @@ def normalize_url(item):
|
||||
|
||||
|
||||
def playlist_item_name(item):
|
||||
"""Ermittelt den Anzeigenamen eines Playlist-Eintrags (String → direkt, Dict → "url" oder "name")."""
|
||||
if isinstance(item, str):
|
||||
return item
|
||||
if isinstance(item, dict):
|
||||
@@ -87,6 +107,8 @@ def playlist_item_name(item):
|
||||
|
||||
|
||||
def playlist_item_enabled(item):
|
||||
"""Prüft, ob ein Playlist-Eintrag aktiviert ist.
|
||||
Strings sind immer aktiv, Dicts haben ein optionales "enabled"-Feld (default: True)."""
|
||||
if isinstance(item, (str,)):
|
||||
return True
|
||||
if isinstance(item, dict):
|
||||
@@ -95,9 +117,12 @@ def playlist_item_enabled(item):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Priority-Helper
|
||||
# Priority-Playlist-Helfer
|
||||
# -------------------------------------------------
|
||||
def load_priority_files():
|
||||
"""Lädt die Priority-Playlist aus config.json plus die dazugehörigen Dateien
|
||||
aus media/priority/. Gibt eine Liste von Dicts mit name/type/size/enabled zurück.
|
||||
Neue Dateien im Ordner, die noch nicht in der Playlist sind, werden angehängt."""
|
||||
cfg = load_config()
|
||||
prio_dir = os.path.join(MEDIA_DIR, "priority")
|
||||
os.makedirs(prio_dir, exist_ok=True)
|
||||
@@ -105,6 +130,7 @@ def load_priority_files():
|
||||
priority_files = []
|
||||
prio_playlist = cfg.get("priority", {}).get("playlist", [])
|
||||
|
||||
# 1. Einträge aus der config.json-Playlist
|
||||
for item in prio_playlist:
|
||||
item_name = playlist_item_name(item)
|
||||
if is_url(item):
|
||||
@@ -134,6 +160,7 @@ def load_priority_files():
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
|
||||
# 2. Neue Dateien aus dem Ordner, die noch nicht in der Playlist sind
|
||||
playlist_names = {playlist_item_name(item) for item in prio_playlist}
|
||||
for f in sorted(os.listdir(prio_dir)):
|
||||
if f in playlist_names or f.startswith("._"):
|
||||
@@ -154,26 +181,30 @@ def load_priority_files():
|
||||
|
||||
|
||||
def prio_redirect(site):
|
||||
"""Gibt den Redirect-Pfad zurück, der nach Priority-Operationen aufgerufen wird."""
|
||||
return f"/admin/{site}/priority"
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# User & Login
|
||||
# -------------------------------------------------
|
||||
# Auth / Benutzer
|
||||
# User & Login (Flask-Login)
|
||||
# -------------------------------------------------
|
||||
class Admin(UserMixin):
|
||||
"""Einfacher Admin-User. Es gibt nur einen Admin (keine DB)."""
|
||||
id = 1
|
||||
|
||||
|
||||
@login_manager.user_loader
|
||||
def load_user(user_id):
|
||||
"""Lädt den Admin-User für Flask-Login. user_id wird ignoriert – es gibt nur einen User."""
|
||||
return Admin()
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Login / Logout
|
||||
# -------------------------------------------------
|
||||
@app.route("/login", methods=["GET", "POST"])
|
||||
def login():
|
||||
"""Login-Seite. Bei POST werden die Zugangsdaten aus config.json.admin geprüft."""
|
||||
config = load_config()
|
||||
error = None
|
||||
|
||||
@@ -188,26 +219,33 @@ def login():
|
||||
|
||||
return render_template("login.html", error=error)
|
||||
|
||||
|
||||
@app.route("/logout")
|
||||
def logout():
|
||||
"""Loggt den Admin aus und leitet zur Login-Seite weiter."""
|
||||
logout_user()
|
||||
return redirect("/login")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Customer / Willkommensseite
|
||||
# Willkommensseite (Kunden-Logos + Generierung)
|
||||
# -------------------------------------------------
|
||||
@app.route("/willkommen", methods=["GET", "POST"])
|
||||
@app.route("/customer", methods=["GET", "POST"])
|
||||
# @login_required
|
||||
def add_customer():
|
||||
"""Add new customer with logo search and welcome page"""
|
||||
"""
|
||||
Formular für die Willkommensseite:
|
||||
- Bis zu 3 Kundennamen eingeben
|
||||
- Logos per OpenAI → Brandfetch suchen
|
||||
- welcome.html wird generiert und in der Lobby-Playlist vorne platziert
|
||||
"""
|
||||
error = None
|
||||
success = None
|
||||
logo_urls = [None, None, None]
|
||||
customer_names = ["", "", ""]
|
||||
site = request.args.get("site") or request.form.get("site") or ""
|
||||
|
||||
# Default to first site if not specified
|
||||
# Fallback auf ersten Standort, wenn keiner angegeben
|
||||
if not site:
|
||||
config = load_config()
|
||||
sites = get_site_list(config)
|
||||
@@ -277,10 +315,14 @@ def add_customer():
|
||||
hostname=os.uname().nodename
|
||||
)
|
||||
|
||||
|
||||
@app.route("/api/customer", methods=["POST"])
|
||||
# @login_required
|
||||
def api_add_customer():
|
||||
"""API endpoint for customer creation"""
|
||||
"""
|
||||
API-Endpunkt für die Willkommensseite (JSON).
|
||||
Erwartet: {"customer_name": "...", "site": "..."}
|
||||
Gibt die Logo-URL und den Status zurück.
|
||||
"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
customer_name = data.get("customer_name", "").strip()
|
||||
@@ -289,7 +331,7 @@ def api_add_customer():
|
||||
if not customer_name:
|
||||
return jsonify({"error": "Customer name required"}), 400
|
||||
|
||||
# Default to first site
|
||||
# Default auf ersten Standort
|
||||
if not site:
|
||||
config = load_config()
|
||||
sites = get_site_list(config)
|
||||
@@ -324,25 +366,34 @@ def api_add_customer():
|
||||
except Exception as e:
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Medien ausliefern
|
||||
# Medien ausliefern (statische Dateien)
|
||||
# -------------------------------------------------
|
||||
@app.route("/media/priority/<path:filename>")
|
||||
def media_priority(filename):
|
||||
"""Liefert globale Priority-Medien aus media/priority/ aus."""
|
||||
path = os.path.join(MEDIA_DIR, "priority")
|
||||
return send_from_directory(path, filename)
|
||||
|
||||
|
||||
@app.route("/media/<site>/<screen>/<path:filename>")
|
||||
def media(site, screen, filename):
|
||||
"""Liefert Medien-Dateien für einen bestimmten Screen aus."""
|
||||
path = os.path.join(MEDIA_DIR, site, screen)
|
||||
return send_from_directory(path, filename)
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Player
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/player/<site>/<screen>")
|
||||
def player(site, screen):
|
||||
"""
|
||||
Player-Ansicht für einen Screen.
|
||||
Baut die Playlist (normal + optional priority) zusammen und rendert player.html.
|
||||
Der Player zeigt abwechselnd Bilder, Videos, HTML-Seiten und URLs an.
|
||||
"""
|
||||
config = load_config()
|
||||
sites_cfg = config.setdefault("sites", {})
|
||||
site_cfg = sites_cfg.get(site)
|
||||
@@ -363,6 +414,7 @@ def player(site, screen):
|
||||
show_videos = screen_cfg.get("show_videos", True)
|
||||
|
||||
def allowed_file(name):
|
||||
"""Prüft, ob eine Datei angezeigt werden darf (abhängig von show_images / show_videos)."""
|
||||
if name.startswith("._"):
|
||||
return False
|
||||
ext = name.lower()
|
||||
@@ -374,12 +426,10 @@ def player(site, screen):
|
||||
return True
|
||||
return False
|
||||
|
||||
# ------------------------------
|
||||
# Normale Screen-Playlist
|
||||
# ------------------------------
|
||||
# ─── Normale Screen-Playlist ───
|
||||
normal_files = []
|
||||
|
||||
# 1. Playlist-Reihenfolge
|
||||
# 1. Playlist-Reihenfolge aus config.json
|
||||
for item in playlist:
|
||||
if not playlist_item_enabled(item):
|
||||
continue
|
||||
@@ -397,7 +447,7 @@ def player(site, screen):
|
||||
item["name"] for item in normal_files if item["kind"] == "file"
|
||||
}
|
||||
|
||||
# 2. Neue Dateien hintendran
|
||||
# 2. Neue Dateien aus dem Medien-Ordner (ohne Playlist-Eintrag) hinten anhängen
|
||||
if not playlist:
|
||||
for f in sorted(os.listdir(folder)):
|
||||
if f in existing_file_names or f.startswith("._"):
|
||||
@@ -405,9 +455,7 @@ def player(site, screen):
|
||||
if allowed_file(f):
|
||||
normal_files.append({"kind": "file", "name": f})
|
||||
|
||||
# ------------------------------
|
||||
# Priority-Playlist (global)
|
||||
# ------------------------------
|
||||
# ─── Priority-Playlist (global) ───
|
||||
priority_cfg = config.get("priority", {})
|
||||
|
||||
if priority_cfg.get("enabled", False):
|
||||
@@ -446,9 +494,14 @@ def player(site, screen):
|
||||
|
||||
# -------------------------------------------------
|
||||
# Hash für automatisches Player-Reload
|
||||
# ─────────────────────────────────────────────────
|
||||
# Der Player pollt alle 5s diese Route.
|
||||
# Wenn sich der Hash ändert, wird neu geladen.
|
||||
# -------------------------------------------------
|
||||
@app.route("/playlist/<site>/<screen>/hash")
|
||||
def playlist_hash(site, screen):
|
||||
"""Berechnet einen MD5-Hash über die aktuelle Konfiguration (Screen + Priority).
|
||||
Ändert sich der Hash, lädt der Player automatisch neu."""
|
||||
config = load_config()
|
||||
|
||||
relevant = {
|
||||
@@ -463,13 +516,13 @@ def playlist_hash(site, screen):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin Dashboard
|
||||
# Admin
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/admin")
|
||||
@login_required
|
||||
def admin_redirect():
|
||||
"""Redirect to first available site"""
|
||||
"""Leitet zum ersten konfigurierten Standort weiter."""
|
||||
cfg = load_config()
|
||||
sites = get_site_list(cfg)
|
||||
if sites:
|
||||
@@ -480,6 +533,7 @@ def admin_redirect():
|
||||
@app.route("/add-site")
|
||||
@login_required
|
||||
def add_site():
|
||||
"""Legt einen neuen Standort an (Verzeichnis + Config-Eintrag)."""
|
||||
name = request.args.get("name", "").strip().lower()
|
||||
if not name:
|
||||
return redirect("/admin")
|
||||
@@ -495,6 +549,7 @@ def add_site():
|
||||
@app.route("/admin/<site>/delete-site", methods=["POST"])
|
||||
@login_required
|
||||
def delete_site(site):
|
||||
"""Löscht einen Standort inkl. aller Screens und Medien (Config + Verzeichnis)."""
|
||||
cfg = load_config()
|
||||
cfg.get("sites", {}).pop(site, None)
|
||||
save_config(cfg)
|
||||
@@ -511,13 +566,16 @@ def delete_site(site):
|
||||
@app.route("/admin/<site>")
|
||||
@login_required
|
||||
def admin(site):
|
||||
"""
|
||||
Admin-Dashboard für einen Standort.
|
||||
Zeigt alle Screens als Cards mit Tabler-Tabs (Playlist, Einstellungen, Medien).
|
||||
"""
|
||||
cfg = load_config()
|
||||
|
||||
site_list = get_site_list(cfg)
|
||||
|
||||
# Validate site exists
|
||||
# Prüfen, ob der Standort existiert
|
||||
if site not in site_list:
|
||||
# Create default site config if filesystem dir exists but no config
|
||||
if os.path.isdir(os.path.join(MEDIA_DIR, site)):
|
||||
cfg.setdefault("sites", {})[site] = {"screens": {}}
|
||||
save_config(cfg)
|
||||
@@ -532,19 +590,19 @@ def admin(site):
|
||||
|
||||
site_media_base = os.path.join(MEDIA_DIR, current_site)
|
||||
|
||||
# Discover screens: from config + filesystem
|
||||
# Screens erkennen: aus Config + Dateisystem
|
||||
known_screens = set()
|
||||
site_cfg = cfg.setdefault("sites", {}).setdefault(current_site, {"screens": {}})
|
||||
config_screens = site_cfg.setdefault("screens", {})
|
||||
|
||||
# Merge with filesystem directories
|
||||
# Ordner im Medienverzeichnis = Screens
|
||||
if os.path.isdir(site_media_base):
|
||||
for entry in os.listdir(site_media_base):
|
||||
entry_path = os.path.join(site_media_base, entry)
|
||||
if os.path.isdir(entry_path) and not entry.startswith("._"):
|
||||
known_screens.add(entry)
|
||||
|
||||
# Add screens from config that might not have a directory yet
|
||||
# Screens aus Config ergänzen (auch ohne Ordner)
|
||||
for s in config_screens:
|
||||
known_screens.add(s)
|
||||
|
||||
@@ -558,7 +616,7 @@ def admin(site):
|
||||
screen_cfg["newsticker_text"] = screen_cfg.get("newsticker_text", "")
|
||||
screen_cfg["newsticker_enabled"] = screen_cfg.get("newsticker_enabled", False)
|
||||
|
||||
# 1 Playlist-Reihenfolge
|
||||
# 1. Playlist-Einträge in Config-Reihenfolge
|
||||
for item in playlist:
|
||||
item_name = playlist_item_name(item)
|
||||
|
||||
@@ -595,7 +653,7 @@ def admin(site):
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
|
||||
# 2 Neue Dateien anhängen
|
||||
# 2. Neue Dateien (ohne Playlist-Eintrag) anhängen
|
||||
playlist_names = {playlist_item_name(item) for item in playlist}
|
||||
for f in sorted(os.listdir(path)):
|
||||
if f in playlist_names or f.startswith("._"):
|
||||
@@ -631,11 +689,12 @@ def admin(site):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Priority-Playlist (separate Seite)
|
||||
# Admin: Priority-Playlist (eigene Seite)
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/<site>/priority")
|
||||
@login_required
|
||||
def admin_priority(site):
|
||||
"""Zeigt die Priority-Playlist-Seite mit Tabs (Playlist + Medien)."""
|
||||
cfg = load_config()
|
||||
site_list = sorted(cfg.get("sites", {}).keys())
|
||||
priority_files = load_priority_files()
|
||||
@@ -658,6 +717,7 @@ def admin_priority(site):
|
||||
@app.route("/admin/<site>/update/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def update_screen(site, screen):
|
||||
"""Speichert die Einstellungen für einen Screen (Intervall, Newsticker, Show-Bilder/Videos, Custom-URL)."""
|
||||
config = load_config()
|
||||
cfg = get_screen_config(config, site, screen)
|
||||
|
||||
@@ -681,14 +741,13 @@ def update_screen(site, screen):
|
||||
@app.route("/admin/<site>/delete-screen/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def delete_screen(site, screen):
|
||||
"""Löscht einen Screen (Config-Eintrag + Medien-Verzeichnis)."""
|
||||
config = load_config()
|
||||
|
||||
# Aus config.json entfernen
|
||||
screens_cfg = config.get("sites", {}).get(site, {}).get("screens", {})
|
||||
screens_cfg.pop(screen, None)
|
||||
save_config(config)
|
||||
|
||||
# Medien-Verzeichnis löschen
|
||||
screen_dir = os.path.join(MEDIA_DIR, site, screen)
|
||||
if os.path.isdir(screen_dir):
|
||||
import shutil
|
||||
@@ -703,6 +762,7 @@ def delete_screen(site, screen):
|
||||
@app.route("/admin/<site>/add-screen", methods=["GET"])
|
||||
@login_required
|
||||
def add_screen(site):
|
||||
"""Legt einen neuen Screen an (Verzeichnis + Config-Eintrag)."""
|
||||
screen_name = request.args.get("name", "").strip().lower()
|
||||
if not screen_name:
|
||||
return redirect(f"/admin/{site}")
|
||||
@@ -720,11 +780,12 @@ def add_screen(site):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Upload
|
||||
# Admin: Medien-Upload
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/<site>/upload/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def upload(site, screen):
|
||||
"""Lädt eine Datei hoch (Bild oder Video). Bei screen="priority" ins globale Verzeichnis."""
|
||||
file = request.files.get("file")
|
||||
if not file:
|
||||
return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
|
||||
@@ -744,11 +805,12 @@ def upload(site, screen):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: URL hinzufügen
|
||||
# Admin: URL zur Playlist hinzufügen
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/<site>/add-url/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def add_url(site, screen):
|
||||
"""Fügt eine URL (mit Zoom-Faktor) zur Playlist eines Screens oder der Priority-Playlist hinzu."""
|
||||
url = request.form.get("url", "").strip()
|
||||
zoom = request.form.get("zoom", "1.0").strip()
|
||||
|
||||
@@ -776,12 +838,12 @@ def add_url(site, screen):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Datei löschen
|
||||
# Admin: Datei aus Playlist löschen
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/admin/<site>/delete/<screen>/<path:filename>", methods=["POST"])
|
||||
@login_required
|
||||
def delete_file(site, screen, filename):
|
||||
"""Löscht eine Datei aus der Playlist (Config + Dateisystem)."""
|
||||
cfg = load_config()
|
||||
|
||||
if screen == "priority":
|
||||
@@ -808,12 +870,15 @@ def delete_file(site, screen, filename):
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Playlist speichern
|
||||
# Admin: Playlist-Reihenfolge speichern (Drag & Drop)
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/admin/<site>/playlist/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def save_playlist(site, screen):
|
||||
"""
|
||||
Speichert die über SortableJS per Drag & Drop neu sortierte Playlist.
|
||||
Der Client schickt ein JSON mit der neuen Reihenfolge und enabled-Status.
|
||||
"""
|
||||
cfg = load_config()
|
||||
data = request.get_json()
|
||||
new_order = data["playlist"]
|
||||
@@ -825,10 +890,12 @@ def save_playlist(site, screen):
|
||||
screens_cfg = cfg.get("sites", {}).get(site, {}).get("screens", {})
|
||||
old_playlist = screens_cfg.get(screen, {}).get("playlist", [])
|
||||
|
||||
# Mapping: Name → Original-Item (für Zoom etc.)
|
||||
item_map = {}
|
||||
for item in old_playlist:
|
||||
item_map[playlist_item_name(item)] = item
|
||||
|
||||
# Neue Playlist in der gewünschten Reihenfolge bauen
|
||||
new_playlist = []
|
||||
for key in new_order:
|
||||
if key in item_map:
|
||||
|
||||
@@ -1,40 +1,61 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Willkommensseite-Generierung für CANCOM Simple Signage.
|
||||
───────────────────────────────────────────────────────
|
||||
Diese Hilfsdatei sucht anhand von Kundennamen Logos (via OpenAI + Brandfetch),
|
||||
generiert daraus eine HTML-Willkommensseite und fügt sie in die Lobby-Playlist ein.
|
||||
"""
|
||||
|
||||
import os
|
||||
import json
|
||||
from openai import OpenAI
|
||||
|
||||
# -------------------------------------------------
|
||||
# Customer / Willkommensseite
|
||||
# -------------------------------------------------
|
||||
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
MEDIA_DIR = os.path.join(BASE_DIR, "media")
|
||||
|
||||
WELCOME_FILENAME = "welcome.html"
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# OpenAI-Client
|
||||
# -------------------------------------------------
|
||||
|
||||
def get_openai_client():
|
||||
"""Initialize OpenAI client from environment variable"""
|
||||
# api_key = os.getenv("OPENAI_API_KEY")
|
||||
"""Initialisiert den OpenAI-Client mit dem API-Key.
|
||||
Der Key ist aktuell direkt im Code hinterlegt – sollte in env var ausgelagert werden."""
|
||||
api_key = "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"
|
||||
if not api_key:
|
||||
raise ValueError("OPENAI_API_KEY environment variable not set")
|
||||
return OpenAI(api_key=api_key)
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Brandfetch-Logo-Suche
|
||||
# -------------------------------------------------
|
||||
|
||||
def get_brandfetch_logo(domain):
|
||||
"""Try to fetch a logo URL from Brandfetch CDN."""
|
||||
"""Versucht, ein Firmenlogo über Brandfetch CDN abzurufen.
|
||||
Baut eine direkte CDN-URL: https://cdn.brandfetch.io/{domain}/logo"""
|
||||
print(f"🔍 Generate - Versuche Brandfetch für Domain: {domain}")
|
||||
# Direct CDN URL construction - Brandfetch provides logos via cdn.brandfetch.io
|
||||
logo_url = f"https://cdn.brandfetch.io/{domain}/logo?c=1idyd4Tpb2nKaXIIc8T"
|
||||
|
||||
# if validate_logo_url(logo_url):
|
||||
print(f"✅ Generate - Brandfetch Logo gefunden: {logo_url}")
|
||||
return logo_url
|
||||
|
||||
# return None
|
||||
|
||||
# -------------------------------------------------
|
||||
# Logo-Ermittlung via OpenAI
|
||||
# -------------------------------------------------
|
||||
|
||||
def search_customer_logo(customer_name):
|
||||
"""
|
||||
Sucht das Logo eines Kunden über einen zweistufigen Prozess:
|
||||
1. OpenAI GPT-4 ermittelt die Domain des Unternehmens
|
||||
2. Brandfetch CDN liefert das Logo zur Domain
|
||||
|
||||
Gibt die Logo-URL zurück oder None, wenn nichts gefunden wurde.
|
||||
"""
|
||||
print(f"✅ Generate - Suche nach Kundenlogo für: {customer_name}")
|
||||
"""Search for customer logo URL using OpenAI and web search"""
|
||||
try:
|
||||
client = get_openai_client()
|
||||
|
||||
@@ -57,7 +78,7 @@ def search_customer_logo(customer_name):
|
||||
)
|
||||
|
||||
logo_url = response.choices[0].message.content.strip()
|
||||
print (f"🔍 OpenAI Logo-URL: {logo_url}")
|
||||
print(f"🔍 OpenAI Logo-URL: {logo_url}")
|
||||
if logo_url.upper() == "FALLBACK":
|
||||
logo_url = None
|
||||
|
||||
@@ -72,7 +93,20 @@ def search_customer_logo(customer_name):
|
||||
return None
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# HTML-Generierung
|
||||
# -------------------------------------------------
|
||||
|
||||
def generate_welcome_html(customer_names, logo_urls, site="stuttgart"):
|
||||
"""
|
||||
Generiert den HTML-Code für die Willkommensseite.
|
||||
- Links oben: CANCOM-Logo + "meets" + Kundenlogos (280px Breite)
|
||||
- Rechts unten: "Herzlich Willkommen in unserer Niederlassung {Standort}"
|
||||
|
||||
customer_names: Liste der Kundennamen (max. 3)
|
||||
logo_urls: Liste der Logo-URLs (gleiche Reihenfolge)
|
||||
site: Standort-Name für die Anzeige
|
||||
"""
|
||||
site_display = site.capitalize()
|
||||
names_str = ", ".join(customer_names) if customer_names else "Unbekannt"
|
||||
print(f"✅ Generate - Willkommensseite wird generiert für: {names_str} (site: {site})")
|
||||
@@ -174,8 +208,13 @@ def generate_welcome_html(customer_names, logo_urls, site="stuttgart"):
|
||||
return html_content
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Speichern + Playlist-Einfügung
|
||||
# -------------------------------------------------
|
||||
|
||||
def save_welcome_page(customer_names, logo_urls, site="stuttgart"):
|
||||
"""Save welcome page and return filename"""
|
||||
"""Speichert die generierte Willkommensseite als welcome.html im Lobby-Verzeichnis.
|
||||
Gibt den Dateinamen zurück oder None bei Fehler."""
|
||||
try:
|
||||
welcome_dir = os.path.join(MEDIA_DIR, site, "lobby")
|
||||
os.makedirs(welcome_dir, exist_ok=True)
|
||||
@@ -196,9 +235,10 @@ def save_welcome_page(customer_names, logo_urls, site="stuttgart"):
|
||||
|
||||
|
||||
def add_customer_to_lobby_playlist(html_filename, site="stuttgart"):
|
||||
"""Add customer welcome page to lobby playlist for a specific site"""
|
||||
"""Fügt die Willkommensseite (welcome.html) an Position 0 in die Lobby-Playlist ein.
|
||||
Entfernt vorher alle vorhandenen welcome.html-Einträge (als String oder Dict).
|
||||
Importiert load_config/save_config aus app.py (kein Zirkelimport)."""
|
||||
try:
|
||||
# Import here to avoid circular imports
|
||||
from app import load_config, save_config
|
||||
|
||||
config = load_config()
|
||||
@@ -208,7 +248,8 @@ def add_customer_to_lobby_playlist(html_filename, site="stuttgart"):
|
||||
lobby = screens.setdefault("lobby", {})
|
||||
playlist = lobby.setdefault("playlist", [])
|
||||
|
||||
full_filename = f"{html_filename}"
|
||||
full_filename = f"{html_filename}"
|
||||
# Alte welcome.html-Einträge entfernen (sowohl String- als auch Dict-Form)
|
||||
playlist[:] = [
|
||||
item for item in playlist
|
||||
if not (
|
||||
@@ -222,4 +263,4 @@ def add_customer_to_lobby_playlist(html_filename, site="stuttgart"):
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"❌ Generate - Error adding to playlist: {e}")
|
||||
return False
|
||||
return False
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<!-- Footer -->
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
FOOTER – Wird von allen Seiten eingebunden.
|
||||
Zeigt Autor, Copyright, Version und Hostname.
|
||||
Erwartet im Kontext: year, version, hostname
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<footer class="app-footer">
|
||||
<div class="app-footer-inner">
|
||||
<span>Autor Erik Thiele</span>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<!-- Header -->
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
HEADER – Wird von admin.html, priority.html und customer.html eingebunden.
|
||||
Zeigt CANCOM-Logo, Standort-Dropdown, Theme-Toggle und Logout.
|
||||
Erwartet im Kontext: site_list, current_site, brand_subtitle, site_dropdown_url_prefix
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<header class="navbar navbar-expand-md d-print-none brand-surface">
|
||||
<div class="container-xl">
|
||||
<!-- Logo + Titel -->
|
||||
<div class="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
|
||||
<img class="navbar-brand-logo me-3" src="{{ url_for('static', filename='cancom.svg') }}" alt="CANCOM Logo">
|
||||
<span class="navbar-brand-wordmark">
|
||||
@@ -8,7 +13,10 @@
|
||||
<span>{{ brand_subtitle }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Aktionen: Standort-Dropdown, +Button, Theme, Logout -->
|
||||
<div class="navbar-nav flex-row order-md-last top-actions">
|
||||
<!-- Standort-Auswahl -->
|
||||
<div class="dropdown me-2">
|
||||
<a class="btn btn-outline-secondary" href="#" data-bs-toggle="dropdown">
|
||||
<i class="ti ti-building me-1"></i>{{ current_site | capitalize }} <i class="ti ti-chevron-down"></i>
|
||||
@@ -20,15 +28,21 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Neuen Standort anlegen (+ Button) -->
|
||||
<a class="btn btn-outline-secondary me-2" href="javascript:void(0)"
|
||||
onclick="var n=prompt('Name des neuen Standorts:'); if(n&&n.trim()) location.href='/add-site?name='+encodeURIComponent(n.trim().toLowerCase());"
|
||||
title="Neuen Standort anlegen"
|
||||
style="display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;min-height:2.5rem;"><i class="ti ti-plus"></i></a>
|
||||
|
||||
<!-- Dark-Mode-Toggle (persistiert in localStorage("signage-theme")) -->
|
||||
<div>
|
||||
<button class="btn btn-outline-secondary theme-toggle" id="theme-toggle" title="Dark Mode umschalten">
|
||||
<i class="ti ti-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Logout -->
|
||||
<div class="ms-2">
|
||||
<a href="/logout" class="btn btn-outline-secondary"><i class="ti ti-logout me-1"></i>Abmelden</a>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<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");
|
||||
@@ -13,6 +14,7 @@
|
||||
})();
|
||||
</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"
|
||||
@@ -25,7 +27,7 @@
|
||||
{% include "_styles.html" %}
|
||||
|
||||
<style>
|
||||
/* Tooltip Styling */
|
||||
/* ─── Tooltip-Styling (CANCOM-rot) ─── */
|
||||
.tooltip {
|
||||
--bs-tooltip-border-color: var(--ccm-primary);
|
||||
}
|
||||
@@ -41,7 +43,7 @@
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Playlist als Grid */
|
||||
/* ─── Playlist-Zeile als Grid (Checkbox | Name | Typ | Größe | Löschen | Drag) ─── */
|
||||
.playlist-row {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
@@ -62,6 +64,7 @@
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* ─── Player-URL im Screen-Header als Link (grau, rot bei Hover) ─── */
|
||||
.page-subtitle a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@@ -70,6 +73,7 @@
|
||||
color: var(--ccm-primary);
|
||||
}
|
||||
|
||||
/* ─── Drag-Handle für SortableJS ─── */
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
font-size: 1.2em;
|
||||
@@ -80,6 +84,7 @@
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* ─── Tab-Styling (extend to card edges, unified background) ─── */
|
||||
.card-body .nav-tabs {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
@@ -108,7 +113,10 @@
|
||||
{% set site_dropdown_url_prefix = "/admin/" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<!-- Second Nav -->
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
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">
|
||||
@@ -127,6 +135,7 @@
|
||||
{% 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>
|
||||
@@ -136,13 +145,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
CONTENT
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- STANDORT VERWALTUNG -->
|
||||
<!-- ========================= -->
|
||||
<!-- ─── Standort löschen (Button oben rechts) ─── -->
|
||||
<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.')">
|
||||
@@ -151,13 +160,13 @@
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- SCREENS -->
|
||||
<!-- SCREEN-CARDS -->
|
||||
<!-- ========================= -->
|
||||
|
||||
{% for screen, cfg in screens.items() %}
|
||||
<div class="card mb-6" id="screen-{{ screen }}">
|
||||
|
||||
<!-- Card Header -->
|
||||
<!-- 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 }}: <span class="fw-normal">Screen</span> <span class="text-uppercase">- {{ screen }}</span></div>
|
||||
@@ -177,6 +186,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card-Body: Tabs (Playlist | Einstellungen | Medien) -->
|
||||
<div class="card-body">
|
||||
|
||||
<ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
|
||||
@@ -199,18 +209,20 @@
|
||||
|
||||
<div class="tab-content mt-3">
|
||||
|
||||
<!-- Tab: Playlist -->
|
||||
<!-- ═══ 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"
|
||||
@@ -223,6 +235,7 @@
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% 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" %}
|
||||
@@ -231,6 +244,7 @@
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<!-- Größe -->
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
@@ -239,7 +253,7 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<!-- Löschen -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
|
||||
method="post">
|
||||
<button type="submit"
|
||||
@@ -249,7 +263,7 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Drag -->
|
||||
<!-- Drag-Handle (SortableJS) -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@@ -261,7 +275,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Einstellungen -->
|
||||
<!-- ═══ Tab: Einstellungen ═══ -->
|
||||
<div class="tab-pane" id="settings-{{ screen }}" role="tabpanel">
|
||||
<form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
|
||||
<div class="mb-2">
|
||||
@@ -328,7 +342,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Medien -->
|
||||
<!-- ═══ Tab: Medien ═══ -->
|
||||
<div class="tab-pane" id="media-{{ screen }}" role="tabpanel">
|
||||
<h3>Medien hochladen</h3>
|
||||
<form action="/admin/{{ current_site }}/upload/{{ screen }}"
|
||||
@@ -355,23 +369,24 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!-- /tab-content -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /card-body -->
|
||||
</div> <!-- /card -->
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- /page-wrapper -->
|
||||
|
||||
<!-- Footer -->
|
||||
{% include "_footer.html" %}
|
||||
|
||||
</div>
|
||||
</div> <!-- /page -->
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
/* ─── SortableJS Drag & Drop initialisieren ─── */
|
||||
function initSortable(name) {
|
||||
const el = document.getElementById("playlist-" + name);
|
||||
if (!el || typeof Sortable === "undefined") return;
|
||||
@@ -384,11 +399,13 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ Normale Screens
|
||||
// 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"
|
||||
@@ -415,13 +432,13 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
window.savePlaylist = savePlaylist;
|
||||
|
||||
// Initialize tooltips
|
||||
/* ─── Bootstrap Tooltips initialisieren ─── */
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Dark Mode Toggle
|
||||
/* ─── Dark Mode Toggle (persistiert in localStorage) ─── */
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<title>Willkommensseite</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");
|
||||
@@ -26,6 +27,7 @@
|
||||
<style>
|
||||
.form-label { font-weight: 600; }
|
||||
.card { box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
|
||||
/* ─── Logo-Vorschau-Box (gestrichelte Border) ─── */
|
||||
.logo-preview-box {
|
||||
border: 2px dashed var(--ccm-border);
|
||||
border-radius: 0.75rem;
|
||||
@@ -61,7 +63,9 @@
|
||||
{% set site_dropdown_url_prefix = "/willkommen?site=" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<!-- Second Nav -->
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
Navigation (zweite Zeile)
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<div class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse show">
|
||||
<div class="navbar navbar-dark nav-surface">
|
||||
@@ -76,6 +80,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
CONTENT – Willkommensseite-Formular
|
||||
Bis zu 3 Kundennamen eingeben → Logos via OpenAI + Brandfetch
|
||||
→ welcome.html wird generiert und in Lobby-Playlist platziert
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
<div class="card mb-4">
|
||||
@@ -95,7 +104,7 @@
|
||||
<div class="alert alert-success">{{ success }}</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Logo Previews -->
|
||||
<!-- ─── Logo-Vorschau (wird nach POST angezeigt) ─── -->
|
||||
<div class="row g-3 mb-4">
|
||||
{% for i in range(3) %}
|
||||
<div class="col-md-4">
|
||||
@@ -111,6 +120,7 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- ─── Eingabeformular (bis zu 3 Kunden) ─── -->
|
||||
<form method="POST">
|
||||
<input type="hidden" name="site" value="{{ site }}">
|
||||
<div class="row g-3 mb-3">
|
||||
@@ -155,6 +165,7 @@
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
/* ─── Dark Mode Toggle ─── */
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
background-color: #F4F6F8;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #DA002D;
|
||||
border-color: #DA002D;
|
||||
@@ -23,15 +22,18 @@
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!-- ─── Login-Seite (zentriert) ─── -->
|
||||
<body class="d-flex align-items-center justify-content-center" style="height:100vh;">
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<h2 class="text-center mb-4">Signage Admin</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger text-center" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Benutzername</label>
|
||||
@@ -46,4 +48,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<style>
|
||||
/* ─── Player-Grundlayout ───
|
||||
Alle Medien (img/video/iframe) werden zentriert auf Vollbild angezeigt.
|
||||
Standardmäßig ausgeblendet – nur das aktive Element ist sichtbar. */
|
||||
html, body {
|
||||
font-family: system-ui, sans-serif;
|
||||
margin: 0;
|
||||
@@ -37,6 +40,7 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ─── Newsticker (Laufband) ─── */
|
||||
.newsticker-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
@@ -47,11 +51,9 @@
|
||||
.newsticker-track {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
animation: ticker-scroll 40s linear infinite;
|
||||
@@ -65,12 +67,16 @@
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-100vw); }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════
|
||||
OVERLAY / Custom-URL (iframe-Modus)
|
||||
Wenn der Aktions-Button angeklickt wird, öffnet
|
||||
sich dieser Overlay-Bereich mit Zurück-Button.
|
||||
═══════════════════════════════════════════════════ -->
|
||||
<div id="overlay" style="display:none;position:fixed;inset:0;z-index:99999;background:#fff;">
|
||||
<button onclick="closeOverlay()"
|
||||
style="position:absolute;top:16px;left:16px;z-index:10;
|
||||
@@ -81,31 +87,35 @@
|
||||
<iframe id="overlay-iframe" style="width:100%;height:100%;border:none;display:block;"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- ─── Custom-URL-Button (oben links) ─── -->
|
||||
{% if custom_url and custom_url_enabled %}
|
||||
{% if custom_url_target == "redirect" %}
|
||||
<a href="{{ custom_url }}"
|
||||
style="position:fixed;top:16px;left:16px;z-index:9999;
|
||||
padding:10px 20px;background:#DA002D;color:#fff;
|
||||
border:none;border-radius:8px;font-size:1rem;cursor:pointer;
|
||||
text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);">
|
||||
{{ custom_url_label or "Info" }}
|
||||
</a>
|
||||
{% else %}
|
||||
<button onclick='openOverlay({{ custom_url | tojson }})'
|
||||
style="position:fixed;top:16px;left:16px;z-index:9999;
|
||||
padding:10px 20px;background:#DA002D;color:#fff;
|
||||
border:none;border-radius:8px;font-size:1rem;cursor:pointer;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,0.3);">
|
||||
{{ custom_url_label or "Info" }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if custom_url_target == "redirect" %}
|
||||
<!-- Direkt-Weiterleitung (verlässt den Player) -->
|
||||
<a href="{{ custom_url }}"
|
||||
style="position:fixed;top:16px;left:16px;z-index:9999;
|
||||
padding:10px 20px;background:#DA002D;color:#fff;
|
||||
border:none;border-radius:8px;font-size:1rem;cursor:pointer;
|
||||
text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);">
|
||||
{{ custom_url_label or "Info" }}
|
||||
</a>
|
||||
{% else %}
|
||||
<!-- iframe-Overlay (bleibt im Player, Zurück-Button) -->
|
||||
<button onclick='openOverlay({{ custom_url | tojson }})'
|
||||
style="position:fixed;top:16px;left:16px;z-index:9999;
|
||||
padding:10px 20px;background:#DA002D;color:#fff;
|
||||
border:none;border-radius:8px;font-size:1rem;cursor:pointer;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,0.3);">
|
||||
{{ custom_url_label or "Info" }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- ─── Medien-Elemente (eines ist jeweils sichtbar) ─── -->
|
||||
<img id="image">
|
||||
<video id="video" muted autoplay playsinline></video>
|
||||
<iframe id="iframe"></iframe>
|
||||
|
||||
<!-- ─── Newsticker (optional, Laufband unten) ─── -->
|
||||
{% if newsticker_enabled %}
|
||||
<div id="newsticker-bar" style="position:fixed;left:0;right:0;bottom:0;height:40px;z-index:10000;background:#DA002D;color:#fff;display:flex;align-items:center;overflow:hidden;">
|
||||
<div id="newsticker-text" class="newsticker-text">
|
||||
@@ -117,9 +127,15 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<script>
|
||||
// ═════════════════════════════════════════════════════
|
||||
// Player-JavaScript
|
||||
// ═════════════════════════════════════════════════════
|
||||
|
||||
let playerTimer = null;
|
||||
|
||||
// ─── Custom-URL-Overlay ───
|
||||
function openOverlay(url) {
|
||||
if (playerTimer) clearTimeout(playerTimer);
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
@@ -132,7 +148,7 @@ function closeOverlay() {
|
||||
playNext();
|
||||
}
|
||||
|
||||
// Newsticker Uhrzeit
|
||||
// ─── Newsticker-Uhr (aktuelle Uhrzeit) ───
|
||||
function updateClock() {
|
||||
const el = document.getElementById('newsticker-clock');
|
||||
if (!el) return;
|
||||
@@ -141,29 +157,23 @@ function updateClock() {
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
/* -----------------------------
|
||||
Daten vom Server
|
||||
----------------------------- */
|
||||
|
||||
// ─── Vom Server übergebene Daten ───
|
||||
const normalFiles = {{ normal_files | tojson }};
|
||||
const prioFiles = {{ prio_files | tojson }};
|
||||
const interval = {{ interval }} * 1000;
|
||||
const screen = "{{ screen }}";
|
||||
const site = "{{ site }}";
|
||||
|
||||
/* -----------------------------
|
||||
Player State
|
||||
----------------------------- */
|
||||
// ─── Player-Status ───
|
||||
let normalIndex = 0;
|
||||
let prioIndex = 0;
|
||||
let mode = "normal"; // "normal" oder "prio"
|
||||
|
||||
let mode = "normal"; // "normal" | "prio"
|
||||
const img = document.getElementById("image");
|
||||
const vid = document.getElementById("video");
|
||||
const iframe = document.getElementById("iframe");
|
||||
|
||||
/* -----------------------------
|
||||
Hilfsfunktionen
|
||||
----------------------------- */
|
||||
// ─── Hilfsfunktionen ───
|
||||
function normalizeItem(item) {
|
||||
if (typeof item === "string") {
|
||||
const lower = item.toLowerCase();
|
||||
@@ -172,7 +182,6 @@ function normalizeItem(item) {
|
||||
}
|
||||
return { kind: "file", name: item };
|
||||
}
|
||||
// Item is already an object (from backend) - ensure zoom is set
|
||||
if (item.kind === "url" && !("zoom" in item)) {
|
||||
item.zoom = 1.0;
|
||||
}
|
||||
@@ -185,65 +194,51 @@ function normalizeItem(item) {
|
||||
function isVideo(item) {
|
||||
return item.kind === "file" && item.name.toLowerCase().endsWith(".mp4");
|
||||
}
|
||||
|
||||
function isImage(item) {
|
||||
return item.kind === "file" && /\.(jpg|jpeg|png)$/i.test(item.name);
|
||||
}
|
||||
|
||||
function isHtml(item) {
|
||||
return item.kind === "file" && /\.(html?|htm)$/i.test(item.name);
|
||||
}
|
||||
|
||||
// ─── Nächstes Element aus der Playlist holen ───
|
||||
// Ablauf: Normal-Playlist → Priority → Normal → …
|
||||
function getNextItem() {
|
||||
const normalizedNormal = normalFiles.map(normalizeItem);
|
||||
const normalizedPrio = prioFiles.map(normalizeItem);
|
||||
const activeNormal = normalizedNormal.filter(item => item.enabled !== false);
|
||||
const activePrio = normalizedPrio.filter(item => item.enabled !== false);
|
||||
|
||||
// ✅ Sonderfall: nur Priority vorhanden
|
||||
// Nur Priority vorhanden
|
||||
if (activeNormal.length === 0 && activePrio.length > 0) {
|
||||
return {
|
||||
item: activePrio[prioIndex++ % activePrio.length],
|
||||
isPrio: true
|
||||
};
|
||||
return { item: activePrio[prioIndex++ % activePrio.length], isPrio: true };
|
||||
}
|
||||
|
||||
// ✅ Sonderfall: nur normale Playlist vorhanden
|
||||
// Nur normale Playlist vorhanden
|
||||
if (activePrio.length === 0 && activeNormal.length > 0) {
|
||||
return {
|
||||
item: activeNormal[normalIndex++ % activeNormal.length],
|
||||
isPrio: false
|
||||
};
|
||||
return { item: activeNormal[normalIndex++ % activeNormal.length], isPrio: false };
|
||||
}
|
||||
|
||||
// ✅ Normal-Phase
|
||||
// Normal-Phase
|
||||
if (mode === "normal") {
|
||||
const item = activeNormal[normalIndex++];
|
||||
if (normalIndex >= activeNormal.length) {
|
||||
normalIndex = 0;
|
||||
if (activePrio.length > 0) {
|
||||
mode = "prio"; // ➜ nach kompletter Normal-Playlist wechseln
|
||||
}
|
||||
if (activePrio.length > 0) mode = "prio";
|
||||
}
|
||||
return { item, isPrio: false };
|
||||
}
|
||||
|
||||
// ✅ Priority-Phase
|
||||
// Priority-Phase
|
||||
if (mode === "prio") {
|
||||
const item = activePrio[prioIndex++];
|
||||
if (prioIndex >= activePrio.length) {
|
||||
prioIndex = 0;
|
||||
mode = "normal"; // ➜ nach kompletter Priority zurück
|
||||
mode = "normal";
|
||||
}
|
||||
return { item, isPrio: true };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Medien abspielen
|
||||
----------------------------- */
|
||||
// ─── Aktuelles Medium abspielen ───
|
||||
function playNext() {
|
||||
const entry = getNextItem();
|
||||
if (!entry) return;
|
||||
@@ -251,25 +246,22 @@ function playNext() {
|
||||
const item = entry.item;
|
||||
const basePath = entry.isPrio ? "priority" : screen;
|
||||
|
||||
// Alle Elemente ausblenden
|
||||
img.style.display = "none";
|
||||
vid.style.display = "none";
|
||||
iframe.style.display = "none";
|
||||
vid.pause();
|
||||
vid.src = "";
|
||||
iframe.src = "";
|
||||
iframe.style.transform = "scale(1)"; // Reset zoom
|
||||
iframe.style.transform = "scale(1)";
|
||||
|
||||
// URL im iframe anzeigen (mit Zoom-Unterstützung)
|
||||
if (item.kind === "url") {
|
||||
iframe.style.display = "block";
|
||||
iframe.src = item.url;
|
||||
// Apply zoom factor with browser-like behavior
|
||||
// Zoom < 1.0: mehr Inhalt sichtbar (wie Browser herauszoomen)
|
||||
// Zoom > 1.0: weniger Inhalt sichtbar (wie Browser reinzoomen)
|
||||
const zoom = item.zoom || 1.0;
|
||||
|
||||
if (zoom !== 1.0) {
|
||||
// Adjust iframe size and scale to simulate real browser zoom
|
||||
const scale = 1 / zoom; // Inverted for proper zoom behavior
|
||||
const scale = 1 / zoom;
|
||||
iframe.style.width = `${100 * scale}vw`;
|
||||
iframe.style.height = `${100 * scale}vh`;
|
||||
iframe.style.transform = `translate(-50%, -50%) scale(${zoom})`;
|
||||
@@ -282,6 +274,7 @@ function playNext() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Datei aus dem Medienverzeichnis
|
||||
const src = entry.isPrio ? `/media/priority/${item.name}` : `/media/${site}/${basePath}/${item.name}`;
|
||||
if (isVideo(item)) {
|
||||
vid.style.display = "block";
|
||||
@@ -296,22 +289,20 @@ function playNext() {
|
||||
iframe.style.transform = `translate(-50%, -50%)`;
|
||||
playerTimer = setTimeout(playNext, interval);
|
||||
} else {
|
||||
// Bild (jpg/png)
|
||||
img.style.display = "block";
|
||||
img.src = src;
|
||||
playerTimer = setTimeout(playNext, interval);
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Auto-Reload bei Änderungen
|
||||
----------------------------- */
|
||||
// ─── Auto-Reload bei Playlist-Änderungen ───
|
||||
let lastHash = null;
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const res = await fetch(`/playlist/${site}/${screen}/hash`, { cache: "no-store" });
|
||||
const hash = await res.text();
|
||||
|
||||
if (lastHash && lastHash !== hash) {
|
||||
location.reload();
|
||||
}
|
||||
@@ -321,9 +312,7 @@ async function checkForUpdates() {
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------
|
||||
Start
|
||||
----------------------------- */
|
||||
// ─── Start ───
|
||||
playNext();
|
||||
setInterval(checkForUpdates, 5000);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user