Standortauswahl und Multi Logo und Action Button
This commit is contained in:
Erik Thiele
40
AGENTS.md
40
AGENTS.md
@@ -8,26 +8,58 @@ python app.py
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
`python app.py` serves on `http://localhost:5005`. `app.py` runs Flask with `debug=True`, `host="0.0.0.0"`, and `port=5005`.
|
||||
`python app.py` (via `.venv/bin/python app.py`) serves on `http://localhost:5005`. `app.py` runs Flask with `debug=True`, `host="0.0.0.0"`, and `port=5005`.
|
||||
|
||||
## Source Of Truth
|
||||
|
||||
- Single Flask app in `app.py`; there is no database.
|
||||
- Persistent state is `config.json` plus files under `media/<screen>/`.
|
||||
- Persistent state is `config.json` plus files under `media/<site>/<screen>/`.
|
||||
- `README.md` is stale on the port number; trust `app.py`.
|
||||
- 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)
|
||||
|
||||
Standorte (sites) sind die oberste Organisationsebene und gruppieren Screens.
|
||||
|
||||
| Route | Beschreibung |
|
||||
|-------|-------------|
|
||||
| `GET /player/<site>/<screen>` | Player für Screen an einem Standort |
|
||||
| `GET /admin` | Redirect zum ersten Standort |
|
||||
| `GET /admin/<site>` | Admin-Dashboard für einen Standort |
|
||||
| `GET /admin/<site>/priority` | Priority-Playlist als separate Seite |
|
||||
| `GET /media/<site>/<screen>/<file>` | Medien-Datei ausliefern |
|
||||
| `GET /media/priority/<file>` | Priority-Medien (global) |
|
||||
| `GET /playlist/<site>/<screen>/hash` | Playlist-Checksumme für Auto-Reload |
|
||||
| `GET /willkommen?site=<site>` | Willkommensseite für Standort generieren |
|
||||
| `POST /api/customer` | API-Endpunkt (JSON mit "site"-Feld) |
|
||||
| `GET /admin/<site>/add-screen?name=<name>` | Neuen Screen anlegen |
|
||||
| `POST /admin/<site>/delete-screen/<screen>` | Screen + Medien löschen |
|
||||
|
||||
## Behavior To Preserve
|
||||
|
||||
- `GET /player/<screen>` renders the playlist and auto-reloads from `/playlist/<screen>/hash`.
|
||||
- `GET /player/<site>/<screen>` renders the playlist and auto-reloads from `/playlist/<site>/<screen>/hash`.
|
||||
- `GET /admin` requires login; `config.json.admin` holds the credentials.
|
||||
- URL playlist items are stored as dicts like `{"url": "https://...", "zoom": 0.8}` and the zoom value must survive save/reorder flows.
|
||||
- `.html` items in `media/` are rendered inline as content, not in an iframe.
|
||||
- `config.priority.enabled` makes the priority playlist show on every screen.
|
||||
- `POST /api/customer` generates `welcome.html` and inserts it at the front of the lobby playlist.
|
||||
- `POST /api/customer` generates `welcome.html` and inserts it at the front of the lobby playlist for the specified site.
|
||||
- New standorte can be added by creating `media/<neuer-standort>/<screen>/` directories and optionally adding config to `config.json["sites"][<neuer-standort>]`.
|
||||
- Priority playlist (`config.priority`) is global and affects all sites/screens.
|
||||
- Willkommensseite (`customer.html`) accepts up to 3 customer names; logos are fetched via OpenAI→Brandfetch and displayed in a flex row.
|
||||
- `generate_welcome_html(customer_names, logo_urls)` takes lists for up to 3 customers; logos have equal width (280px) with `max-height: 180px`.
|
||||
- `customer_names` are preserved in form fields after POST (via `value`-Attribute).
|
||||
- Admin-UI nutzt keyadmin-Design: `brand-surface` (#2b2f36), `nav-surface` (rot #DA002D), Dark Mode per `localStorage("signage-theme")`.
|
||||
- Gemeinsame HTML-Bausteine: `_header.html`, `_footer.html`, `_styles.html` (CSS-Variablen `--ccm-*`, Dark Mode, Card-Border-Radius 1rem).
|
||||
- `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.
|
||||
|
||||
## Repo Quirks
|
||||
|
||||
- `media/` and media file extensions are gitignored.
|
||||
- The app has no configured tests, lint, typecheck, formatter, or CI.
|
||||
- Hardcoded secrets exist in tracked files; do not commit new secrets or reshuffle them casually.
|
||||
- Wichtige Helper-Funktionen in `app.py`: `load_config()`, `save_config()`, `get_site_list()`, `get_screen_config()`, `is_url()`, `normalize_url()`, `playlist_item_name()`, `playlist_item_enabled()`, `load_priority_files()`, `prio_redirect()`.
|
||||
- `welcome.html` wird in `media/<site>/lobby/` gespeichert.
|
||||
- `search_customer_logo` in `generate_welcome_page.py` nutzt OpenAI GPT-4 + Brandfetch CDN.
|
||||
|
||||
239
README.md
239
README.md
@@ -1,85 +1,95 @@
|
||||
# 📺 CANCOM Simple Signage
|
||||
# CANCOM Simple Signage
|
||||
|
||||
**CANCOM Simple Signage** ist ein leichtgewichtiges, browserbasiertes Digital-Signage-System auf Basis von **Python + Flask**.
|
||||
|
||||
Ziel ist eine **einfache, robuste und wartbare Lösung** für interne Info-Screens, ohne die Komplexität klassischer Digital-Signage-Plattformen.
|
||||
Browserbasiertes Digital-Signage-System für interne Info-Screens.
|
||||
|
||||
---
|
||||
|
||||
## ✨ Features
|
||||
## Features
|
||||
|
||||
- ✅ Browser-basierter Player (kein nativer Client erforderlich)
|
||||
- ✅ Bilder & Videos (MP4, H.264)
|
||||
- ✅ Pro Screen eine eigene Playlist
|
||||
- ✅ Drag-&-Drop-Reihenfolge im Admin-Portal
|
||||
- ✅ Automatischer Player-Reload bei Änderungen
|
||||
- ✅ Upload & Löschen von Medien
|
||||
- ✅ Screen-Status (aktiv / leer)
|
||||
- ✅ CI-konformes Admin-UI (CANCOM)
|
||||
- ✅ Läuft lokal, in VMs oder auf Proxmox
|
||||
- Browserbasierter Player (Kiosk-Modus, Chromium, Firefox)
|
||||
- Bilder, Videos (MP4/H.264), HTML-Seiten, URL-Playlist-Einträge
|
||||
- **Multi-Standort**: Standorte (sites) gruppieren Screens
|
||||
- **Priority-Playlist**: globale Inhalte wirken auf alle Player
|
||||
- **Willkommensseite**: bis zu 3 Kundenlogos via OpenAI + Brandfetch
|
||||
- Pro Screen eigene Playlist mit Drag-&-Drop-Reihenfolge
|
||||
- Auto-Reload bei Playlist-Änderungen
|
||||
- Newsticker pro Screen
|
||||
- **Custom-URL-Button**: pro Screen konfigurierbarer Aktions-Button oben links im Player (öffnet URL in iframe-Overlay mit Zurück-Button oder per Direkt-Weiterleitung)
|
||||
- Dark Mode (localStorage-persistiert)
|
||||
- CI-konformes Admin-UI (CANCOM-Design: `brand-surface`, `nav-surface` rot)
|
||||
|
||||
---
|
||||
|
||||
## 🧱 Architektur
|
||||
## Architektur
|
||||
|
||||
```
|
||||
Browser (Player)
|
||||
│
|
||||
▼
|
||||
Flask App (Server)
|
||||
├── Admin UI
|
||||
├── Player UI
|
||||
├── Admin UI /admin/<site>
|
||||
├── Player UI /player/<site>/<screen>
|
||||
├── Priority-Seite /admin/<site>/priority
|
||||
├── config.json
|
||||
└── media/
|
||||
└── <screen-name>/
|
||||
├── bild.jpg
|
||||
└── video.mp4
|
||||
├── media/
|
||||
│ ├── <site>/
|
||||
│ │ ├── <screen>/
|
||||
│ │ │ ├── bild.jpg
|
||||
│ │ │ ├── video.mp4
|
||||
│ │ │ └── welcome.html
|
||||
│ └── priority/
|
||||
└── generate_welcome_page.py
|
||||
```
|
||||
|
||||
- **Server:** Python 3 + Flask
|
||||
- **Player:** Jeder moderne Browser (Chrome, Edge, Firefox, Kiosk-Modus)
|
||||
- **Player:** Jeder moderne Browser (Chrome Kiosk, Edge, Firefox)
|
||||
- **State:** `config.json` + Dateisystem
|
||||
- **Frontend:** Tabler + SortableJS (CDN)
|
||||
- **Frontend:** Tabler Core + Tabler Icons + SortableJS (CDN)
|
||||
|
||||
---
|
||||
|
||||
## 📂 Projektstruktur
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
signage/
|
||||
├── app.py
|
||||
├── config.json
|
||||
├── app.py # Flask-App (alle Routen)
|
||||
├── generate_welcome_page.py # Logo-Suche + Willkommensseite-Generierung
|
||||
├── config.json # Persistente Konfiguration
|
||||
├── media/
|
||||
│ ├── lobby/
|
||||
│ └── meetingroom/
|
||||
│ ├── <site>/
|
||||
│ │ ├── lobby/
|
||||
│ │ ├── casino/
|
||||
│ │ └── videosysteme/
|
||||
│ └── priority/
|
||||
├── templates/
|
||||
│ ├── admin.html
|
||||
│ ├── player.html
|
||||
│ └── login.html
|
||||
│ ├── admin.html # Admin-Dashboard (Übersicht)
|
||||
│ ├── priority.html # Priority-Playlist (eigene Seite)
|
||||
│ ├── customer.html # Willkommensseite-Formular
|
||||
│ ├── player.html # Player-Ansicht
|
||||
│ ├── login.html
|
||||
│ ├── _header.html # Gemeinsamer Header
|
||||
│ ├── _footer.html # Gemeinsamer Footer
|
||||
│ └── _styles.html # Zentrale CSS (Variablen, Dark Mode)
|
||||
├── static/
|
||||
└── README.md
|
||||
│ ├── cancom.svg
|
||||
│ └── wallpaper.png
|
||||
└── AGENTS.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installation
|
||||
## Installation
|
||||
|
||||
### Voraussetzungen
|
||||
|
||||
- Python ≥ 3.9
|
||||
- pip
|
||||
- ffmpeg
|
||||
|
||||
```bash
|
||||
sudo apt install python3 python3-pip ffmpeg
|
||||
```
|
||||
- ffmpeg (optional, für Videokonvertierung)
|
||||
|
||||
### Setup
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd signage
|
||||
pip install flask flask-login werkzeug
|
||||
pip install flask flask-login werkzeug openai
|
||||
```
|
||||
|
||||
### Starten
|
||||
@@ -88,72 +98,134 @@ pip install flask flask-login werkzeug
|
||||
python app.py
|
||||
```
|
||||
|
||||
Server läuft auf:
|
||||
Server läuft auf `http://localhost:5005`.
|
||||
|
||||
```
|
||||
http://localhost:5005
|
||||
### Docker
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Betrieb
|
||||
## Routen
|
||||
|
||||
| Route | Beschreibung |
|
||||
|-------|-------------|
|
||||
| `GET /` | 404 – kein Root-Endpunkt |
|
||||
| `GET /login` | Admin-Login |
|
||||
| `GET /logout` | Ausloggen |
|
||||
| `GET /admin` | Redirect zum ersten konfigurierten Standort |
|
||||
| `GET /admin/<site>` | Admin-Dashboard für einen Standort |
|
||||
| `GET /admin/<site>/priority` | Priority-Playlist (separate Seite) |
|
||||
| `GET /admin/<site>/update/<screen>` | Screen-Einstellungen speichern (POST) |
|
||||
| `GET /admin/<site>/upload/<screen>` | Medien hochladen (POST) |
|
||||
| `GET /admin/<site>/add-url/<screen>` | URL zur Playlist hinzufügen (POST) |
|
||||
| `GET /admin/<site>/delete/<screen>/<filename>` | Datei löschen (POST) |
|
||||
| `GET /admin/<site>/playlist/<screen>` | Playlist-Reihenfolge speichern (POST JSON) |
|
||||
| `GET /player/<site>/<screen>` | Player-Ansicht |
|
||||
| `GET /playlist/<site>/<screen>/hash` | Playlist-Checksumme (für Auto-Reload) |
|
||||
| `GET /willkommen?site=<site>` | Willkommensseite-Formular (GET + POST) |
|
||||
| `POST /api/customer` | API-Endpunkt für Willkommensseite (JSON) |
|
||||
| `GET /media/<site>/<screen>/<file>` | Medien-Datei ausliefern |
|
||||
| `GET /media/priority/<file>` | Priority-Medien (global) |
|
||||
|
||||
### Admin-Portal
|
||||
|
||||
```
|
||||
/admin
|
||||
http://localhost:5005/admin/<standort>
|
||||
```
|
||||
|
||||
- Screens konfigurieren
|
||||
- Medien hochladen / löschen
|
||||
- Playlist per Drag & Drop sortieren
|
||||
- Priority-Playlist verwalten
|
||||
- Willkommensseite generieren (bis zu 3 Kundenlogos)
|
||||
- Custom-URL-Aktionsbutton pro Screen konfigurieren (iframe-Overlay oder Weiterleitung)
|
||||
|
||||
### Player-URLs
|
||||
### Player-URL
|
||||
|
||||
```
|
||||
/player/<screen-name>
|
||||
http://localhost:5005/player/<standort>/<screen>
|
||||
```
|
||||
|
||||
Beispiel:
|
||||
```
|
||||
http://localhost:5005/player/stuttgart/lobby
|
||||
```
|
||||
|
||||
### Willkommensseite
|
||||
|
||||
```
|
||||
http://server:5000/player/lobby
|
||||
http://localhost:5005/willkommen?site=stuttgart
|
||||
```
|
||||
|
||||
Maximal 3 Kunden eingeben → Logos werden via OpenAI + Brandfetch gesucht → `welcome.html` wird in der Lobby-Playlist vorne eingefügt.
|
||||
|
||||
---
|
||||
|
||||
## Konfiguration (`config.json`)
|
||||
|
||||
```json
|
||||
{
|
||||
"admin": { "username": "...", "password": "..." },
|
||||
"sites": {
|
||||
"stuttgart": {
|
||||
"screens": {
|
||||
"lobby": { "playlist": [...], "interval": 10 },
|
||||
"casino": { "playlist": [...], "interval": 15 }
|
||||
}
|
||||
}
|
||||
},
|
||||
"priority": {
|
||||
"enabled": true,
|
||||
"playlist": [...]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Automatischer Reload
|
||||
## Helper-Funktionen (`app.py`)
|
||||
|
||||
Der Player aktualisiert sich selbst, wenn:
|
||||
|
||||
- Medien hinzugefügt oder gelöscht werden
|
||||
- Playlist-Reihenfolge geändert wird
|
||||
- Screen-Einstellungen angepasst werden
|
||||
- `load_config()` / `save_config()` – JSON lesen/schreiben
|
||||
- `get_site_list(cfg)` – alle Standorte sortiert
|
||||
- `get_screen_config(cfg, site, screen)` – Screen-Konfiguration mit Defaults
|
||||
- `is_url(item)` – prüft ob Item eine URL ist
|
||||
- `normalize_url(item)` – normalisiert URL-Item zu `{"url", "zoom"}`
|
||||
- `playlist_item_name(item)` – Name aus String oder Dict extrahieren
|
||||
- `playlist_item_enabled(item)` – Enabled-Status prüfen
|
||||
- `load_priority_files()` – Priority-Playlist + Dateien laden
|
||||
- `prio_redirect(site)` – Redirect-Pfad zur Priority-Seite
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Git & Medien
|
||||
## Dark Mode
|
||||
|
||||
> **Dieses Repository ist für Code gedacht, nicht für Medien.**
|
||||
|
||||
Empfohlene `.gitignore`:
|
||||
|
||||
```gitignore
|
||||
media/
|
||||
*.mp4
|
||||
*.mov
|
||||
*.jpg
|
||||
*.jpeg
|
||||
*.png
|
||||
```
|
||||
Wird über `localStorage("signage-theme")` persistiert. Umschalt-Button im Header. CSS-Variablen `--ccm-*` in `_styles.html`.
|
||||
|
||||
---
|
||||
|
||||
## 🎞️ Video-Empfehlungen
|
||||
## Sicherheit
|
||||
|
||||
- Format: MP4
|
||||
- Codec: H.264
|
||||
- Auflösung: max. 1920x1080
|
||||
- Admin-Bereich per Flask-Login geschützt
|
||||
- Player-Seiten Read-Only
|
||||
- Externe Nutzung via Reverse Proxy + TLS empfohlen
|
||||
|
||||
---
|
||||
|
||||
## Git & Medien
|
||||
|
||||
> Das Repository ist für Code gedacht, nicht für Medien.
|
||||
|
||||
`media/` und Medien-Dateiendungen sind in `.gitignore` ausgeschlossen.
|
||||
|
||||
---
|
||||
|
||||
## Video-Empfehlungen
|
||||
|
||||
- Format: MP4 (H.264)
|
||||
- Auflösung: max. 1920×1080
|
||||
|
||||
```bash
|
||||
ffmpeg -i input.mov -c:v libx264 -pix_fmt yuv420p -movflags +faststart output.mp4
|
||||
@@ -161,25 +233,6 @@ ffmpeg -i input.mov -c:v libx264 -pix_fmt yuv420p -movflags +faststart output.mp
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Sicherheit
|
||||
## Maintainer
|
||||
|
||||
- Admin-Bereich per Login geschützt
|
||||
- Player-Seiten Read-Only
|
||||
- Externe Nutzung via Reverse Proxy + TLS empfohlen
|
||||
|
||||
---
|
||||
|
||||
## 🧭 Roadmap
|
||||
|
||||
- Zeitsteuerung pro Playlist-Eintrag
|
||||
- Vorschau im Admin-Portal
|
||||
- Mehrere Admin-User
|
||||
- SQLite statt config.json
|
||||
- Docker-Compose Setup
|
||||
|
||||
---
|
||||
|
||||
## 👤 Maintainer
|
||||
|
||||
**CANCOM Simple Signage**
|
||||
Interne Lösung – nicht für externe Weitergabe bestimmt.
|
||||
**CANCOM Simple Signage** – Interne Lösung, nicht für externe Weitergabe bestimmt.
|
||||
|
||||
540
app.py
540
app.py
@@ -26,7 +26,7 @@ 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")
|
||||
|
||||
APP_VERSION = "4.1.1"
|
||||
APP_VERSION = "5.1.0"
|
||||
UPLOAD_EXTENSIONS = {".jpg", ".jpeg", ".png", ".mp4"}
|
||||
|
||||
app = Flask(__name__)
|
||||
@@ -40,7 +40,7 @@ login_manager.login_view = "login"
|
||||
# -------------------------------------------------
|
||||
def load_config():
|
||||
if not os.path.exists(CONFIG_FILE):
|
||||
return {"admin": {}, "screens": {}}
|
||||
return {"admin": {}, "sites": {}}
|
||||
with open(CONFIG_FILE) as f:
|
||||
return json.load(f)
|
||||
|
||||
@@ -48,38 +48,117 @@ def save_config(cfg):
|
||||
with open(CONFIG_FILE, "w") as f:
|
||||
json.dump(cfg, f, indent=2)
|
||||
f.flush()
|
||||
os.fsync(f.fileno())
|
||||
print("✅ config.json gespeichert")
|
||||
|
||||
|
||||
def is_url(value):
|
||||
"""Check if value is a URL (string or dict with 'url' key)"""
|
||||
if isinstance(value, str):
|
||||
return value.lower().startswith(("http://", "https://"))
|
||||
if isinstance(value, dict) and "url" in value:
|
||||
url = value.get("url", "")
|
||||
return isinstance(url, str) and url.lower().startswith(("http://", "https://"))
|
||||
return False
|
||||
def get_site_list(cfg):
|
||||
return sorted(cfg.get("sites", {}).keys())
|
||||
|
||||
def normalize_url(value):
|
||||
"""Convert URL string to dict with zoom factor, or return existing dict"""
|
||||
if isinstance(value, dict) and "url" in value:
|
||||
return value
|
||||
if isinstance(value, str) and value.lower().startswith(("http://", "https://")):
|
||||
return {"url": value, "zoom": 1.0}
|
||||
|
||||
def get_screen_config(cfg, site, screen):
|
||||
return (
|
||||
cfg
|
||||
.setdefault("sites", {})
|
||||
.setdefault(site, {})
|
||||
.setdefault("screens", {})
|
||||
.setdefault(screen, {})
|
||||
)
|
||||
|
||||
|
||||
def is_url(item):
|
||||
if isinstance(item, str):
|
||||
return item.startswith("http://") or item.startswith("https://")
|
||||
return isinstance(item, dict) and "url" in item
|
||||
|
||||
|
||||
def normalize_url(item):
|
||||
if isinstance(item, str):
|
||||
return {"url": item, "zoom": 1.0}
|
||||
if isinstance(item, dict):
|
||||
return {"url": item["url"], "zoom": item.get("zoom", 1.0)}
|
||||
return None
|
||||
|
||||
|
||||
def playlist_item_enabled(item):
|
||||
return not (isinstance(item, dict) and item.get("enabled") is False)
|
||||
|
||||
|
||||
def playlist_item_name(item):
|
||||
if isinstance(item, dict):
|
||||
return item.get("url") or item.get("name")
|
||||
if isinstance(item, str):
|
||||
return item
|
||||
if isinstance(item, dict):
|
||||
return item.get("url") or item.get("name", "")
|
||||
return ""
|
||||
|
||||
|
||||
def playlist_item_enabled(item):
|
||||
if isinstance(item, (str,)):
|
||||
return True
|
||||
if isinstance(item, dict):
|
||||
return item.get("enabled", True)
|
||||
return True
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Priority-Helper
|
||||
# -------------------------------------------------
|
||||
def load_priority_files():
|
||||
cfg = load_config()
|
||||
prio_dir = os.path.join(MEDIA_DIR, "priority")
|
||||
os.makedirs(prio_dir, exist_ok=True)
|
||||
|
||||
priority_files = []
|
||||
prio_playlist = cfg.get("priority", {}).get("playlist", [])
|
||||
|
||||
for item in prio_playlist:
|
||||
item_name = playlist_item_name(item)
|
||||
if is_url(item):
|
||||
url_data = normalize_url(item)
|
||||
if url_data:
|
||||
priority_files.append({
|
||||
"name": url_data["url"],
|
||||
"type": "url",
|
||||
"size": "URL",
|
||||
"zoom": url_data.get("zoom", 1.0),
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
continue
|
||||
|
||||
file_path = os.path.join(prio_dir, item_name)
|
||||
if not os.path.exists(file_path):
|
||||
continue
|
||||
|
||||
ext = os.path.splitext(item_name)[1].lower()
|
||||
ftype = "video" if ext == ".mp4" else "image"
|
||||
size = os.path.getsize(file_path) // 1024
|
||||
|
||||
priority_files.append({
|
||||
"name": item_name,
|
||||
"type": ftype,
|
||||
"size": size,
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
|
||||
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("._"):
|
||||
continue
|
||||
|
||||
file_path = os.path.join(prio_dir, f)
|
||||
ext = os.path.splitext(f)[1].lower()
|
||||
ftype = "video" if ext == ".mp4" else "image"
|
||||
size = os.path.getsize(file_path) // 1024
|
||||
|
||||
priority_files.append({
|
||||
"name": f,
|
||||
"type": ftype,
|
||||
"size": size
|
||||
})
|
||||
|
||||
return priority_files
|
||||
|
||||
|
||||
def prio_redirect(site):
|
||||
return f"/admin/{site}/priority"
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# User & Login
|
||||
# -------------------------------------------------
|
||||
# Auth / Benutzer
|
||||
# -------------------------------------------------
|
||||
@@ -117,34 +196,62 @@ def logout():
|
||||
# -------------------------------------------------
|
||||
# Customer / Willkommensseite
|
||||
# -------------------------------------------------
|
||||
@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"""
|
||||
error = None
|
||||
success = None
|
||||
logo_url = 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
|
||||
if not site:
|
||||
config = load_config()
|
||||
sites = get_site_list(config)
|
||||
site = sites[0] if sites else ""
|
||||
|
||||
if request.method == "POST":
|
||||
customer_name = request.form.get("customer_name", "").strip()
|
||||
print(f"🔍 APP.PY - Suche nach Kunde: '{customer_name}'")
|
||||
if not customer_name:
|
||||
error = "Kundenname erforderlich"
|
||||
customer_names = [
|
||||
request.form.get("customer_name_1", "").strip(),
|
||||
request.form.get("customer_name_2", "").strip(),
|
||||
request.form.get("customer_name_3", "").strip(),
|
||||
]
|
||||
filled_names = [n for n in customer_names if n]
|
||||
|
||||
print(f"🔍 APP.PY - Suche nach Kunden: {filled_names} (site: {site})")
|
||||
|
||||
if not filled_names:
|
||||
error = "Mindestens ein Kundenname erforderlich"
|
||||
elif not site:
|
||||
error = "Kein Standort ausgewählt"
|
||||
else:
|
||||
try:
|
||||
# Search for logo
|
||||
logo_url = generate_welcome_page.search_customer_logo(customer_name)
|
||||
found_logos = []
|
||||
for name in filled_names:
|
||||
logo = generate_welcome_page.search_customer_logo(name)
|
||||
found_logos.append(logo)
|
||||
|
||||
if not logo_url:
|
||||
error = "Logo konnte nicht gefunden werden"
|
||||
valid = [(n, l) for n, l in zip(filled_names, found_logos) if l]
|
||||
|
||||
if not valid:
|
||||
error = "Kein Logo konnte gefunden werden"
|
||||
else:
|
||||
# Generate and save welcome page
|
||||
html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url)
|
||||
valid_names = [n for n, l in valid]
|
||||
valid_urls = [l for n, l in valid]
|
||||
for i, name in enumerate(customer_names):
|
||||
for j, (vn, vu) in enumerate(zip(valid_names, valid_urls)):
|
||||
if vn == name:
|
||||
logo_urls[i] = vu
|
||||
break
|
||||
|
||||
html_filename = generate_welcome_page.save_welcome_page(valid_names, valid_urls, site=site)
|
||||
|
||||
if html_filename:
|
||||
# Add to lobby playlist
|
||||
if generate_welcome_page.add_customer_to_lobby_playlist(html_filename):
|
||||
success = f"✅ Kunde '{customer_name}' erfolgreich hinzugefügt!"
|
||||
if generate_welcome_page.add_customer_to_lobby_playlist(html_filename, site=site):
|
||||
success = f"✅ Willkommensseite mit {len(valid_names)} Kunden erstellt!"
|
||||
else:
|
||||
error = "Fehler beim Hinzufügen zur Playliste"
|
||||
else:
|
||||
@@ -154,7 +261,21 @@ def add_customer():
|
||||
except Exception as e:
|
||||
error = f"Fehler: {str(e)}"
|
||||
|
||||
return render_template("customer.html", error=error, success=success, logo_url=logo_url)
|
||||
config = load_config()
|
||||
site_list = get_site_list(config)
|
||||
return render_template(
|
||||
"customer.html",
|
||||
error=error,
|
||||
success=success,
|
||||
logo_urls=logo_urls,
|
||||
customer_names=customer_names,
|
||||
site=site,
|
||||
site_list=site_list,
|
||||
current_site=site,
|
||||
version=APP_VERSION,
|
||||
year=datetime.now().year,
|
||||
hostname=os.uname().nodename
|
||||
)
|
||||
|
||||
@app.route("/api/customer", methods=["POST"])
|
||||
# @login_required
|
||||
@@ -163,29 +284,37 @@ def api_add_customer():
|
||||
try:
|
||||
data = request.get_json()
|
||||
customer_name = data.get("customer_name", "").strip()
|
||||
site = data.get("site", "").strip()
|
||||
|
||||
if not customer_name:
|
||||
return jsonify({"error": "Customer name required"}), 400
|
||||
|
||||
# Search for logo
|
||||
# Default to first site
|
||||
if not site:
|
||||
config = load_config()
|
||||
sites = get_site_list(config)
|
||||
site = sites[0] if sites else ""
|
||||
|
||||
if not site:
|
||||
return jsonify({"error": "No site configured"}), 400
|
||||
|
||||
logo_url = generate_welcome_page.search_customer_logo(customer_name)
|
||||
|
||||
if not logo_url:
|
||||
return jsonify({"error": "Logo not found"}), 400
|
||||
|
||||
# Generate and save welcome page
|
||||
html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url)
|
||||
html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url, site=site)
|
||||
|
||||
if not html_filename:
|
||||
return jsonify({"error": "Failed to create welcome page"}), 500
|
||||
|
||||
# Add to lobby playlist
|
||||
if generate_welcome_page.add_customer_to_lobby_playlist(html_filename):
|
||||
if generate_welcome_page.add_customer_to_lobby_playlist(html_filename, site=site):
|
||||
return jsonify({
|
||||
"success": True,
|
||||
"message": f"Customer '{customer_name}' added successfully",
|
||||
"welcome_page": html_filename,
|
||||
"logo_url": logo_url
|
||||
"logo_url": logo_url,
|
||||
"site": site
|
||||
}), 201
|
||||
else:
|
||||
return jsonify({"error": "Failed to add to playlist"}), 500
|
||||
@@ -198,25 +327,36 @@ def api_add_customer():
|
||||
# -------------------------------------------------
|
||||
# Medien ausliefern
|
||||
# -------------------------------------------------
|
||||
@app.route("/media/<screen>/<path:filename>")
|
||||
def media(screen, filename):
|
||||
path = os.path.join(MEDIA_DIR, screen)
|
||||
@app.route("/media/priority/<path:filename>")
|
||||
def media_priority(filename):
|
||||
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):
|
||||
path = os.path.join(MEDIA_DIR, site, screen)
|
||||
return send_from_directory(path, filename)
|
||||
|
||||
# -------------------------------------------------
|
||||
# Player
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/player/<screen>")
|
||||
def player(screen):
|
||||
@app.route("/player/<site>/<screen>")
|
||||
def player(site, screen):
|
||||
config = load_config()
|
||||
screens_cfg = config.setdefault("screens", {})
|
||||
sites_cfg = config.setdefault("sites", {})
|
||||
site_cfg = sites_cfg.get(site)
|
||||
|
||||
if not site_cfg:
|
||||
abort(404)
|
||||
|
||||
screens_cfg = site_cfg.setdefault("screens", {})
|
||||
screen_cfg = screens_cfg.get(screen)
|
||||
|
||||
if not screen_cfg:
|
||||
abort(404)
|
||||
|
||||
folder = os.path.join(MEDIA_DIR, screen)
|
||||
folder = os.path.join(MEDIA_DIR, site, screen)
|
||||
playlist = screen_cfg.get("playlist", [])
|
||||
|
||||
show_images = screen_cfg.get("show_images", True)
|
||||
@@ -267,7 +407,6 @@ def player(screen):
|
||||
|
||||
# ------------------------------
|
||||
# Priority-Playlist (global)
|
||||
# WICHTIG: IMMER definieren!
|
||||
# ------------------------------
|
||||
priority_cfg = config.get("priority", {})
|
||||
|
||||
@@ -291,26 +430,30 @@ def player(screen):
|
||||
|
||||
return render_template(
|
||||
"player.html",
|
||||
site=site,
|
||||
screen=screen,
|
||||
normal_files=[item for item in normal_files if item.get("enabled", True)],
|
||||
prio_files=[item for item in prio_files if item.get("enabled", True)],
|
||||
interval=screen_cfg.get("interval", 10),
|
||||
newsticker_text=screen_cfg.get("newsticker_text", ""),
|
||||
newsticker_enabled=screen_cfg.get("newsticker_enabled", False)
|
||||
newsticker_enabled=screen_cfg.get("newsticker_enabled", False),
|
||||
custom_url=screen_cfg.get("custom_url", ""),
|
||||
custom_url_label=screen_cfg.get("custom_url_label", ""),
|
||||
custom_url_enabled=screen_cfg.get("custom_url_enabled", False),
|
||||
custom_url_target=screen_cfg.get("custom_url_target", "overlay")
|
||||
)
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Hash für automatisches Player-Reload
|
||||
# -------------------------------------------------
|
||||
@app.route("/playlist/<screen>/hash")
|
||||
def playlist_hash(screen):
|
||||
@app.route("/playlist/<site>/<screen>/hash")
|
||||
def playlist_hash(site, screen):
|
||||
config = load_config()
|
||||
|
||||
# ✅ Globaler Hash über ALLE relevanten Daten
|
||||
relevant = {
|
||||
"screens": {
|
||||
screen: config["screens"].get(screen, {})
|
||||
"sites": {
|
||||
site: config.get("sites", {}).get(site, {})
|
||||
},
|
||||
"priority": config.get("priority", {})
|
||||
}
|
||||
@@ -325,33 +468,66 @@ def playlist_hash(screen):
|
||||
|
||||
@app.route("/admin")
|
||||
@login_required
|
||||
def admin():
|
||||
def admin_redirect():
|
||||
"""Redirect to first available site"""
|
||||
cfg = load_config()
|
||||
sites = get_site_list(cfg)
|
||||
if sites:
|
||||
return redirect(f"/admin/{sites[0]}")
|
||||
return "<h1>Kein Standort konfiguriert</h1><p>Bitte lege einen Standort im media-Verzeichnis an.</p>", 200
|
||||
|
||||
|
||||
@app.route("/admin/<site>")
|
||||
@login_required
|
||||
def admin(site):
|
||||
cfg = load_config()
|
||||
|
||||
site_list = get_site_list(cfg)
|
||||
|
||||
# Validate site exists
|
||||
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)
|
||||
site_list = get_site_list(cfg)
|
||||
else:
|
||||
abort(404)
|
||||
|
||||
current_site = site
|
||||
screens = {}
|
||||
media_files = {}
|
||||
screen_status = {}
|
||||
|
||||
for screen in os.listdir(MEDIA_DIR):
|
||||
if screen == "priority":
|
||||
continue # ✅ kein echter Screen
|
||||
site_media_base = os.path.join(MEDIA_DIR, current_site)
|
||||
|
||||
path = os.path.join(MEDIA_DIR, screen)
|
||||
if not os.path.isdir(path):
|
||||
continue
|
||||
# Discover screens: from config + filesystem
|
||||
known_screens = set()
|
||||
site_cfg = cfg.setdefault("sites", {}).setdefault(current_site, {"screens": {}})
|
||||
config_screens = site_cfg.setdefault("screens", {})
|
||||
|
||||
# Merge with filesystem directories
|
||||
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
|
||||
for s in config_screens:
|
||||
known_screens.add(s)
|
||||
|
||||
for screen_name in sorted(known_screens):
|
||||
path = os.path.join(site_media_base, screen_name)
|
||||
os.makedirs(path, exist_ok=True)
|
||||
|
||||
files = []
|
||||
screen_cfg = cfg.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": []
|
||||
})
|
||||
screen_cfg = get_screen_config(cfg, current_site, screen_name)
|
||||
playlist = screen_cfg.get("playlist", [])
|
||||
screen_cfg["newsticker_text"] = screen_cfg.get("newsticker_text", "")
|
||||
screen_cfg["newsticker_enabled"] = screen_cfg.get("newsticker_enabled", False)
|
||||
|
||||
# 1️⃣ Playlist-Reihenfolge
|
||||
# 1 Playlist-Reihenfolge
|
||||
for item in playlist:
|
||||
item_name = playlist_item_name(item)
|
||||
|
||||
@@ -388,7 +564,7 @@ def admin():
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
|
||||
# 2️⃣ Neue Dateien anhängen (nicht in Playlist)
|
||||
# 2 Neue Dateien 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("._"):
|
||||
@@ -405,72 +581,40 @@ def admin():
|
||||
"size": size
|
||||
})
|
||||
|
||||
screens[screen] = screen_cfg
|
||||
media_files[screen] = files
|
||||
screen_status[screen] = "active" if files else "empty"
|
||||
|
||||
|
||||
# --- PRIORITY EXTENSION: Admin ---
|
||||
prio_dir = os.path.join(MEDIA_DIR, "priority")
|
||||
os.makedirs(prio_dir, exist_ok=True)
|
||||
|
||||
priority_files = []
|
||||
prio_playlist = cfg["priority"].get("playlist", [])
|
||||
|
||||
# 1️⃣ Playlist-Reihenfolge
|
||||
for item in prio_playlist:
|
||||
item_name = playlist_item_name(item)
|
||||
if is_url(item):
|
||||
url_data = normalize_url(item)
|
||||
if url_data:
|
||||
priority_files.append({
|
||||
"name": url_data["url"],
|
||||
"type": "url",
|
||||
"size": "URL",
|
||||
"zoom": url_data.get("zoom", 1.0),
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
continue
|
||||
|
||||
file_path = os.path.join(prio_dir, item_name)
|
||||
if not os.path.exists(file_path):
|
||||
continue
|
||||
|
||||
ext = os.path.splitext(item_name)[1].lower()
|
||||
ftype = "video" if ext == ".mp4" else "image"
|
||||
size = os.path.getsize(file_path) // 1024
|
||||
|
||||
priority_files.append({
|
||||
"name": item_name,
|
||||
"type": ftype,
|
||||
"size": size,
|
||||
"enabled": playlist_item_enabled(item)
|
||||
})
|
||||
|
||||
# 2️⃣ Neue Dateien anhängen (nicht in Playlist)
|
||||
for f in sorted(os.listdir(prio_dir)):
|
||||
if f in prio_playlist or f.startswith("._"):
|
||||
continue
|
||||
|
||||
file_path = os.path.join(prio_dir, f)
|
||||
ext = os.path.splitext(f)[1].lower()
|
||||
ftype = "video" if ext == ".mp4" else "image"
|
||||
size = os.path.getsize(file_path) // 1024
|
||||
|
||||
priority_files.append({
|
||||
"name": f,
|
||||
"type": ftype,
|
||||
"size": size
|
||||
})
|
||||
|
||||
screens[screen_name] = screen_cfg
|
||||
media_files[screen_name] = files
|
||||
screen_status[screen_name] = "active" if files else "empty"
|
||||
|
||||
return render_template(
|
||||
"admin.html",
|
||||
site_list=site_list,
|
||||
current_site=current_site,
|
||||
screens=screens,
|
||||
media_files=media_files,
|
||||
screen_status=screen_status,
|
||||
version=APP_VERSION,
|
||||
year=datetime.now().year,
|
||||
hostname=os.uname().nodename
|
||||
)
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Priority-Playlist (separate Seite)
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/<site>/priority")
|
||||
@login_required
|
||||
def admin_priority(site):
|
||||
cfg = load_config()
|
||||
site_list = sorted(cfg.get("sites", {}).keys())
|
||||
|
||||
priority_files = load_priority_files()
|
||||
|
||||
return render_template(
|
||||
"priority.html",
|
||||
site_list=site_list,
|
||||
current_site=site,
|
||||
version=APP_VERSION,
|
||||
year=datetime.now().year,
|
||||
hostname=os.uname().nodename,
|
||||
priority_files=priority_files
|
||||
)
|
||||
@@ -479,57 +623,105 @@ def admin():
|
||||
# -------------------------------------------------
|
||||
# Admin: Screen-Einstellungen speichern
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/update/<screen>", methods=["POST"])
|
||||
@app.route("/admin/<site>/update/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def update_screen(screen):
|
||||
def update_screen(site, screen):
|
||||
config = load_config()
|
||||
cfg = config.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": []
|
||||
})
|
||||
cfg = get_screen_config(config, site, screen)
|
||||
|
||||
cfg["interval"] = int(request.form.get("interval", 10))
|
||||
cfg["interval"] = int(request.form.get("interval") or 10)
|
||||
cfg["show_images"] = "show_images" in request.form
|
||||
cfg["show_videos"] = "show_videos" in request.form
|
||||
cfg["newsticker_text"] = request.form.get("newsticker_text", "")
|
||||
cfg["newsticker_enabled"] = "newsticker_enabled" in request.form
|
||||
cfg["custom_url"] = request.form.get("custom_url", "").strip()
|
||||
cfg["custom_url_label"] = request.form.get("custom_url_label", "").strip()
|
||||
cfg["custom_url_enabled"] = "custom_url_enabled" in request.form
|
||||
cfg["custom_url_target"] = request.form.get("custom_url_target", "overlay")
|
||||
|
||||
save_config(config)
|
||||
return redirect("/admin")
|
||||
return redirect(f"/admin/{site}")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Screen löschen
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/<site>/delete-screen/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def delete_screen(site, screen):
|
||||
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
|
||||
shutil.rmtree(screen_dir)
|
||||
|
||||
return redirect(f"/admin/{site}")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Neuen Screen anlegen
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/<site>/add-screen", methods=["GET"])
|
||||
@login_required
|
||||
def add_screen(site):
|
||||
screen_name = request.args.get("name", "").strip().lower()
|
||||
if not screen_name:
|
||||
return redirect(f"/admin/{site}")
|
||||
|
||||
config = load_config()
|
||||
|
||||
os.makedirs(os.path.join(MEDIA_DIR, site, screen_name), exist_ok=True)
|
||||
|
||||
screens_cfg = config.setdefault("sites", {}).setdefault(site, {}).setdefault("screens", {})
|
||||
if screen_name not in screens_cfg:
|
||||
screens_cfg[screen_name] = {"playlist": [], "interval": 10, "show_images": True, "show_videos": True}
|
||||
|
||||
save_config(config)
|
||||
return redirect(f"/admin/{site}#screen-{screen_name}")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Upload
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/upload/<screen>", methods=["POST"])
|
||||
@app.route("/admin/<site>/upload/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def upload(screen):
|
||||
def upload(site, screen):
|
||||
file = request.files.get("file")
|
||||
if not file:
|
||||
return redirect("/admin")
|
||||
return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
|
||||
|
||||
ext = os.path.splitext(file.filename)[1].lower()
|
||||
if ext not in UPLOAD_EXTENSIONS:
|
||||
return "Ungültiger Dateityp", 400
|
||||
|
||||
filename = secure_filename(file.filename)
|
||||
file.save(os.path.join(MEDIA_DIR, screen, filename))
|
||||
|
||||
return redirect("/admin")
|
||||
if screen == "priority":
|
||||
file.save(os.path.join(MEDIA_DIR, "priority", filename))
|
||||
else:
|
||||
file.save(os.path.join(MEDIA_DIR, site, screen, filename))
|
||||
|
||||
return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: URL hinzufügen
|
||||
# -------------------------------------------------
|
||||
@app.route("/admin/add-url/<screen>", methods=["POST"])
|
||||
@app.route("/admin/<site>/add-url/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def add_url(screen):
|
||||
def add_url(site, screen):
|
||||
url = request.form.get("url", "").strip()
|
||||
zoom = request.form.get("zoom", "1.0").strip()
|
||||
|
||||
if not is_url(url):
|
||||
return redirect("/admin")
|
||||
return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
|
||||
|
||||
try:
|
||||
zoom_factor = float(zoom)
|
||||
@@ -538,83 +730,73 @@ def add_url(screen):
|
||||
except (ValueError, TypeError):
|
||||
zoom_factor = 1.0
|
||||
|
||||
# Store as object with zoom factor
|
||||
url_data = {"url": url, "zoom": zoom_factor}
|
||||
|
||||
config = load_config()
|
||||
if screen == "priority":
|
||||
config.setdefault("priority", {}).setdefault("playlist", []).append(url_data)
|
||||
else:
|
||||
screen_cfg = config.setdefault("screens", {}).setdefault(screen, {
|
||||
"interval": 10,
|
||||
"show_images": True,
|
||||
"show_videos": True,
|
||||
"playlist": []
|
||||
})
|
||||
screen_cfg.setdefault("playlist", []).append(url_data)
|
||||
cfg = get_screen_config(config, site, screen)
|
||||
cfg.setdefault("playlist", []).append(url_data)
|
||||
|
||||
save_config(config)
|
||||
return redirect("/admin")
|
||||
return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Datei löschen
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/admin/delete/<screen>/<path:filename>", methods=["POST"])
|
||||
@app.route("/admin/<site>/delete/<screen>/<path:filename>", methods=["POST"])
|
||||
@login_required
|
||||
def delete_file(screen, filename):
|
||||
def delete_file(site, screen, filename):
|
||||
cfg = load_config()
|
||||
|
||||
# Datei löschen
|
||||
path = os.path.join(MEDIA_DIR, screen, filename)
|
||||
if os.path.exists(path):
|
||||
os.remove(path)
|
||||
|
||||
# --- Playlist bereinigen ---
|
||||
if screen == "priority":
|
||||
path = os.path.join(MEDIA_DIR, "priority", filename)
|
||||
playlist = cfg.get("priority", {}).get("playlist", [])
|
||||
# Remove both string URLs and dict-based URLs
|
||||
playlist[:] = [item for item in playlist if not (
|
||||
(isinstance(item, str) and item == filename) or
|
||||
(isinstance(item, dict) and item.get("url") == filename)
|
||||
)]
|
||||
else:
|
||||
playlist = cfg["screens"].get(screen, {}).get("playlist", [])
|
||||
# Remove both string URLs and dict-based URLs
|
||||
path = os.path.join(MEDIA_DIR, site, screen, filename)
|
||||
screens_cfg = cfg.get("sites", {}).get(site, {}).get("screens", {})
|
||||
playlist = screens_cfg.get(screen, {}).get("playlist", [])
|
||||
playlist[:] = [item for item in playlist if not (
|
||||
(isinstance(item, str) and item == filename) or
|
||||
(isinstance(item, dict) and item.get("url") == filename)
|
||||
)]
|
||||
|
||||
if os.path.exists(path):
|
||||
os.remove(path)
|
||||
|
||||
save_config(cfg)
|
||||
return redirect("/admin")
|
||||
return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
|
||||
|
||||
|
||||
# -------------------------------------------------
|
||||
# Admin: Playlist speichern
|
||||
# -------------------------------------------------
|
||||
|
||||
@app.route("/admin/playlist/<screen>", methods=["POST"])
|
||||
@app.route("/admin/<site>/playlist/<screen>", methods=["POST"])
|
||||
@login_required
|
||||
def save_playlist(screen):
|
||||
def save_playlist(site, screen):
|
||||
cfg = load_config()
|
||||
data = request.get_json()
|
||||
new_order = data["playlist"] # List of filenames/URLs as strings
|
||||
new_order = data["playlist"]
|
||||
enabled_map = data.get("enabled", {})
|
||||
|
||||
# Get the current playlist with all data (including zoom factors)
|
||||
if screen == "priority":
|
||||
old_playlist = cfg.get("priority", {}).get("playlist", [])
|
||||
else:
|
||||
old_playlist = cfg.get("screens", {}).get(screen, {}).get("playlist", [])
|
||||
screens_cfg = cfg.get("sites", {}).get(site, {}).get("screens", {})
|
||||
old_playlist = screens_cfg.get(screen, {}).get("playlist", [])
|
||||
|
||||
# Create a mapping: filename/url -> full item (preserves zoom factor)
|
||||
item_map = {}
|
||||
for item in old_playlist:
|
||||
item_map[playlist_item_name(item)] = item
|
||||
|
||||
# Build new playlist: use the mapping to preserve zoom factors
|
||||
new_playlist = []
|
||||
for key in new_order:
|
||||
if key in item_map:
|
||||
@@ -627,7 +809,7 @@ def save_playlist(screen):
|
||||
if screen == "priority":
|
||||
cfg.setdefault("priority", {})["playlist"] = new_playlist
|
||||
else:
|
||||
cfg.setdefault("screens", {}).setdefault(screen, {})["playlist"] = new_playlist
|
||||
cfg.setdefault("sites", {}).setdefault(site, {}).setdefault("screens", {}).setdefault(screen, {})["playlist"] = new_playlist
|
||||
|
||||
save_config(cfg)
|
||||
return "", 204
|
||||
|
||||
46
config.json
46
config.json
@@ -9,6 +9,8 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"sites": {
|
||||
"stuttgart": {
|
||||
"screens": {
|
||||
"lobby": {
|
||||
"interval": 10,
|
||||
@@ -16,10 +18,6 @@
|
||||
"show_videos": false,
|
||||
"playlist": [
|
||||
"welcome.html",
|
||||
{
|
||||
"name": "welcome.html",
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
|
||||
"zoom": 1.0,
|
||||
@@ -27,20 +25,20 @@
|
||||
},
|
||||
{
|
||||
"name": "Cancom_Leitsatz.JPG",
|
||||
"enabled": false
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"url": "http://localhost:5005/static/heise.html",
|
||||
"zoom": 0.9,
|
||||
"enabled": false
|
||||
},
|
||||
{
|
||||
"name": "heise.html",
|
||||
"enabled": false
|
||||
}
|
||||
],
|
||||
"newsticker_text": "Herzlich Willkommen bei der CANCOM - wir begr\u00fc\u00dfen unsere G\u00e4ste und w\u00fcnschen Ihnen einen angenehmen Tag! !",
|
||||
"newsticker_enabled": true
|
||||
"newsticker_enabled": true,
|
||||
"custom_url": "https://dva-stage.cancom-ds.de/voice-agent",
|
||||
"custom_url_label": "Welcome Agent",
|
||||
"custom_url_enabled": true,
|
||||
"custom_url_target": "redirect"
|
||||
},
|
||||
"casino": {
|
||||
"interval": 15,
|
||||
@@ -58,7 +56,10 @@
|
||||
}
|
||||
],
|
||||
"newsticker_text": "Herzlich willkommen bei der CANCOM - wir w\u00fcnschen ihnen einen sch\u00f6nen Tag",
|
||||
"newsticker_enabled": true
|
||||
"newsticker_enabled": true,
|
||||
"custom_url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
|
||||
"custom_url_label": "Wetter",
|
||||
"custom_url_enabled": false
|
||||
},
|
||||
"videosysteme": {
|
||||
"interval": 20,
|
||||
@@ -68,9 +69,32 @@
|
||||
"newsticker_text": "Hallo dies ist ein Test f\u00fcr Michael",
|
||||
"newsticker_enabled": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"karlsruhe": {
|
||||
"screens": {
|
||||
"lobby": {
|
||||
"playlist": [
|
||||
"welcome.html"
|
||||
],
|
||||
"interval": 10,
|
||||
"show_images": false,
|
||||
"show_videos": false,
|
||||
"newsticker_text": "Herzlich Willkommen bei der CANCOM - wir begr\u00fc\u00dfen unsere G\u00e4ste und w\u00fcnschen Ihnen einen angenehmen Tag!",
|
||||
"newsticker_enabled": true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"admin": {
|
||||
"username": "admin",
|
||||
"password": "cancom@2026!"
|
||||
},
|
||||
"screens": {
|
||||
"lobby": {
|
||||
"playlist": [
|
||||
"welcome.html"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,9 +6,8 @@ from openai import OpenAI
|
||||
# Customer / Willkommensseite
|
||||
# -------------------------------------------------
|
||||
|
||||
WELCOME_DIR = os.path.join(os.path.dirname(__file__), "media", "lobby")
|
||||
|
||||
os.makedirs(WELCOME_DIR, exist_ok=True)
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
MEDIA_DIR = os.path.join(BASE_DIR, "media")
|
||||
|
||||
WELCOME_FILENAME = "welcome.html"
|
||||
|
||||
@@ -73,129 +72,82 @@ def search_customer_logo(customer_name):
|
||||
return None
|
||||
|
||||
|
||||
def generate_welcome_html(customer_name, logo_url):
|
||||
print(f"✅ Generate - Willkommensseite wird generiert für: {customer_name} mit Logo: {logo_url}")
|
||||
"""Generate a welcome page HTML with full-screen design"""
|
||||
# CANCOM SVG logo inline
|
||||
def generate_welcome_html(customer_names, logo_urls, site="stuttgart"):
|
||||
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})")
|
||||
site_display = site.capitalize()
|
||||
cancom_svg = '''<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xcs="https://www.xtool.com/pages/software" version="1.1" preserveAspectRatio="xMinYMin meet" width="61.682394106284505mm" height="9.909010347638684mm" viewBox="136.55880294685778 209.2954948261807 61.682394106284505 9.909010347638684" xcs:version="2.7.22"><style></style><path transform="matrix(0.158038,0,0,0.158038,133.2558,163.322122)" stroke="none" fill="currentColor" data-view-type="laser" d="M125.9,352.1h18.9L119,291.7h-16.2l-25,60.4h18.2l14.6-38.9L125.9,352.1z M323.6,322 c0,8.8-6.1,16.4-15.4,16.4c-9.1,0-15.4-7.6-15.4-16.4s6.1-16.4,15.2-16.4C317,305.6,323.6,313.4,323.6,322 M340.5,322.3 c0-17.4-13.4-31.3-32.3-31.3c-18.7,0-32.3,14.1-32.3,31.3c0,17.4,13.4,31.3,32.3,31.3C326.9,353.6,340.5,339.4,340.5,322.3 M230.4,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.2,0-31.6,14.1-31.6,31.3 c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C236.5,338.4,230.4,331.4,230.4,322.5 M38,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.4,0-31.8,14.1-31.8,31.3 c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C44,338.4,38,331.4,38,322.5 M191.8,352.1h14.4v-59.8H190v33.1l-25-33.1h-15.4v60.1h16.2v-34.1L191.8,352.1z M411.2,352.1v-59.8h-17.7l-14.4,23.2l-14.4-23.2 h-17.7v60.1h16.4V318l15.4,23.2h0.3l15.4-23.5v34.6L411.2,352.1L411.2,352.1z" fill-rule="nonzero"></path></svg>'''
|
||||
|
||||
logo_html = ""
|
||||
for i, (name, url) in enumerate(zip(customer_names, logo_urls)):
|
||||
if url:
|
||||
logo_html += f'''
|
||||
<div class="customer-logo-item">
|
||||
<img src="{url}" alt="{name}" class="customer-logo" crossorigin="anonymous">
|
||||
</div>'''
|
||||
|
||||
html_content = f"""<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willkommen bei CANCOM</title>
|
||||
|
||||
<!-- Tabler CSS -->
|
||||
<link rel="stylesheet"
|
||||
href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
|
||||
<!-- Tabler JS -->
|
||||
<script defer
|
||||
src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}}
|
||||
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
|
||||
body {{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
width: 100vw; height: 100vh; overflow: hidden;
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
|
||||
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background-image: url("/static/wallpaper.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat; background-size: cover;
|
||||
}}
|
||||
.screen {{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
width: 100%; height: 100%; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: flex-end; justify-content: space-between;
|
||||
padding: 60px;
|
||||
background-size: cover;
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
}}
|
||||
.logo-section {{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
z-index: 10;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: flex-end; gap: 10px; z-index: 10;
|
||||
}}
|
||||
.cancom-logo {{
|
||||
width: 235px;
|
||||
height: auto;
|
||||
color: #DA002D;
|
||||
width: 235px; height: auto; color: #DA002D;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
}}
|
||||
.meets {{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
margin-top: -8px;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 1px;
|
||||
font-size: 2.5rem; font-weight: 400; color: #000;
|
||||
margin-top: -8px; margin-bottom: 10px; letter-spacing: 1px;
|
||||
}}
|
||||
.customer-logos {{
|
||||
display: flex; flex-direction: row;
|
||||
align-items: center; justify-content: flex-end;
|
||||
gap: 48px; max-width: 100%;
|
||||
}}
|
||||
.customer-logo-item {{
|
||||
flex: 0 0 280px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
min-height: 100px;
|
||||
}}
|
||||
.customer-logo {{
|
||||
max-width: 300px;
|
||||
width: 100%; height: auto;
|
||||
max-height: 180px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
|
||||
margin-top: 18px;
|
||||
}}
|
||||
.customer-logo {{
|
||||
max-width: 300px;
|
||||
max-height: 180px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
|
||||
}}
|
||||
.content {{
|
||||
text-align: right;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}}
|
||||
.headline {{
|
||||
font-size: 4.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
|
||||
}}
|
||||
.headline .red {{
|
||||
color: #DA002D;
|
||||
font-weight: 700;
|
||||
}}
|
||||
.meets {{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: 1px;
|
||||
text-align: right; z-index: 10;
|
||||
}}
|
||||
.welcome-block {{
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: #000;
|
||||
font-size: 4rem; font-weight: 700;
|
||||
line-height: 1.3; color: #000;
|
||||
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
|
||||
}}
|
||||
</style>
|
||||
@@ -205,13 +157,15 @@ def generate_welcome_html(customer_name, logo_url):
|
||||
<div class="logo-section">
|
||||
<div class="cancom-logo">{cancom_svg}</div>
|
||||
<div class="meets">meets</div>
|
||||
{f'<img src="{logo_url}" alt="Kundenlogo" class="customer-logo" crossorigin="anonymous">' if logo_url else ''}
|
||||
<div class="customer-logos">
|
||||
{logo_html}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="welcome-block">
|
||||
Herzlich <span style="color: #DA002D;">Willkommen</span><br>
|
||||
<span style="color: #DA002D;">in</span> unserer<br>
|
||||
Niederlassung <span style="color: #DA002D;">Stuttgart!</span>
|
||||
Niederlassung <span style="color: #DA002D;">{site_display}!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -220,42 +174,51 @@ def generate_welcome_html(customer_name, logo_url):
|
||||
return html_content
|
||||
|
||||
|
||||
def save_welcome_page(customer_name, logo_url):
|
||||
def save_welcome_page(customer_names, logo_urls, site="stuttgart"):
|
||||
"""Save welcome page and return filename"""
|
||||
try:
|
||||
filepath = os.path.join(os.path.abspath(WELCOME_DIR), WELCOME_FILENAME)
|
||||
html_content = generate_welcome_html(customer_name, logo_url)
|
||||
welcome_dir = os.path.join(MEDIA_DIR, site, "lobby")
|
||||
os.makedirs(welcome_dir, exist_ok=True)
|
||||
filepath = os.path.join(os.path.abspath(welcome_dir), WELCOME_FILENAME)
|
||||
html_content = generate_welcome_html(customer_names, logo_urls, site=site)
|
||||
|
||||
with open(filepath, "w", encoding="utf-8") as f:
|
||||
f.write(html_content)
|
||||
if os.path.getsize(filepath) == 0:
|
||||
raise IOError("File not written")
|
||||
print(f"✅ Generate - Willkommensseite generiert für: {customer_name}")
|
||||
names_str = ", ".join(customer_names)
|
||||
print(f"✅ Generate - Willkommensseite generiert für: {names_str} (site: {site})")
|
||||
print(f"✅ Generate - Willkommensseite gespeichert in: {filepath}")
|
||||
print(f"✅ Generate - Willkommensseite gespeichert: {WELCOME_FILENAME}")
|
||||
return WELCOME_FILENAME
|
||||
except Exception as e:
|
||||
print(f"❌ Error saving welcome page: {e}")
|
||||
return None
|
||||
|
||||
|
||||
def add_customer_to_lobby_playlist(html_filename):
|
||||
"""Add customer welcome page to lobby playlist"""
|
||||
def add_customer_to_lobby_playlist(html_filename, site="stuttgart"):
|
||||
"""Add customer welcome page to lobby playlist for a specific site"""
|
||||
try:
|
||||
# Import here to avoid circular imports
|
||||
from app import load_config, save_config
|
||||
|
||||
config = load_config()
|
||||
screens = config.setdefault("screens", {})
|
||||
sites_cfg = config.setdefault("sites", {})
|
||||
site_cfg = sites_cfg.setdefault(site, {"screens": {}})
|
||||
screens = site_cfg.setdefault("screens", {})
|
||||
lobby = screens.setdefault("lobby", {})
|
||||
playlist = lobby.setdefault("playlist", [])
|
||||
|
||||
full_filename = f"{html_filename}"
|
||||
if full_filename in playlist:
|
||||
playlist.remove(full_filename)
|
||||
playlist[:] = [
|
||||
item for item in playlist
|
||||
if not (
|
||||
(isinstance(item, str) and item == full_filename) or
|
||||
(isinstance(item, dict) and item.get("name") == full_filename)
|
||||
)
|
||||
]
|
||||
playlist.insert(0, full_filename)
|
||||
save_config(config)
|
||||
print(f"✅ Generate - Willkommensseite in Lobby-Playliste platziert")
|
||||
print(f"✅ Generate - Willkommensseite in Lobby-Playliste platziert (site: {site})")
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"❌ Generate - Error adding to playlist: {e}")
|
||||
|
||||
12
templates/_footer.html
Normal file
12
templates/_footer.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!-- Footer -->
|
||||
<footer class="app-footer">
|
||||
<div class="app-footer-inner">
|
||||
<span>Autor Erik Thiele</span>
|
||||
<span class="app-footer-separator">|</span>
|
||||
<span>© {{ year }} CANCOM GmbH</span>
|
||||
<span class="app-footer-separator">|</span>
|
||||
<span>Version {{ version }}</span>
|
||||
<span class="app-footer-separator">|</span>
|
||||
<span>Host {{ hostname }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
33
templates/_header.html
Normal file
33
templates/_header.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!-- Header -->
|
||||
<header class="navbar navbar-expand-md d-print-none brand-surface">
|
||||
<div class="container-xl">
|
||||
<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">
|
||||
<strong>Simple Signage</strong>
|
||||
<span>{{ brand_subtitle }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="navbar-nav flex-row order-md-last top-actions">
|
||||
<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>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% for s in site_list %}
|
||||
<a class="dropdown-item{% if s == current_site %} active{% endif %}"
|
||||
href="{{ site_dropdown_url_prefix }}{{ s }}">{{ s | capitalize }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-outline-secondary theme-toggle" id="theme-toggle" title="Dark Mode umschalten">
|
||||
<i class="ti ti-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ms-2">
|
||||
<a href="/logout" class="btn btn-outline-secondary"><i class="ti ti-logout me-1"></i>Abmelden</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
239
templates/_styles.html
Normal file
239
templates/_styles.html
Normal file
@@ -0,0 +1,239 @@
|
||||
<style>
|
||||
:root {
|
||||
--ccm-bg: #f4f6f8;
|
||||
--ccm-text: #212121;
|
||||
--ccm-primary: #da002d;
|
||||
--ccm-primary-hover: #b00024;
|
||||
--ccm-header: #2b2f36;
|
||||
--ccm-surface: #ffffff;
|
||||
--ccm-border: #d9dee3;
|
||||
--ccm-muted: #6b7280;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--ccm-bg: #15181d;
|
||||
--ccm-text: #e5e7eb;
|
||||
--ccm-header: #0f1720;
|
||||
--ccm-surface: #15181d;
|
||||
--ccm-border: #2b3440;
|
||||
--ccm-muted: #9aa4b2;
|
||||
}
|
||||
|
||||
html { font-size: 16px; }
|
||||
|
||||
body {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.card-title,
|
||||
.navbar-brand-wordmark strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.navbar-brand-wordmark {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.1;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.navbar-brand-logo {
|
||||
height: 1.85rem;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand-surface {
|
||||
background-color: var(--ccm-header);
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-surface,
|
||||
.brand-surface .navbar-brand-wordmark,
|
||||
.brand-surface .navbar-brand-wordmark strong,
|
||||
.brand-surface .navbar-brand-wordmark span,
|
||||
.brand-surface .btn:not(.btn-primary) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-actions .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-surface {
|
||||
background-color: var(--ccm-primary);
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-surface .btn-white {
|
||||
color: var(--ccm-primary);
|
||||
border-color: rgba(255, 255, 255, 0.9);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.nav-surface .btn-white:hover,
|
||||
.nav-surface .btn-white:focus {
|
||||
background-color: #e9ecef;
|
||||
border-color: #e9ecef;
|
||||
color: var(--ccm-primary-hover);
|
||||
}
|
||||
|
||||
.nav-surface .btn.active {
|
||||
background-color: #ffffff;
|
||||
border-color: #ffffff;
|
||||
color: var(--ccm-primary-hover);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.nav-surface .ti {
|
||||
font-size: 1rem;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
margin-top: 1rem;
|
||||
padding: 0.65rem 1.5rem 0.95rem;
|
||||
color: var(--ccm-muted);
|
||||
font-size: 0.82rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.app-footer-inner {
|
||||
width: 100%;
|
||||
max-width: 1320px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.2rem 0.75rem;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
--tblr-card-border-radius: 1rem;
|
||||
--tblr-card-inner-border-radius: 1rem;
|
||||
border: 1px solid var(--ccm-border);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-footer-separator {
|
||||
color: #b0b7c3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #eeeeee;
|
||||
border-left: 6px solid var(--ccm-primary);
|
||||
padding-left: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
--tblr-btn-bg: var(--ccm-primary);
|
||||
--tblr-btn-hover-bg: var(--ccm-primary-hover);
|
||||
--tblr-btn-border-color: var(--ccm-primary);
|
||||
--tblr-btn-hover-border-color: var(--ccm-primary-hover);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--ccm-primary);
|
||||
border-color: var(--ccm-primary);
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(218, 0, 45, 0.25);
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active {
|
||||
background-color: var(--ccm-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] body {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card,
|
||||
[data-bs-theme="dark"] .dropdown-menu {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-header {
|
||||
background-color: #1a1e24;
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control,
|
||||
[data-bs-theme="dark"] .form-select {
|
||||
background-color: #11161d;
|
||||
color: var(--ccm-text);
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control::placeholder {
|
||||
color: var(--ccm-muted);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .text-muted {
|
||||
color: var(--ccm-muted) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .list-group-item {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > :not(caption) > * > * {
|
||||
border-color: var(--ccm-border);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .page-subtitle {
|
||||
color: var(--ccm-muted);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-secondary {
|
||||
background-color: #1a1e24;
|
||||
color: var(--ccm-text);
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-success {
|
||||
background-color: #0d2b1d;
|
||||
color: #a3d9b1;
|
||||
border-color: #1a4730;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-danger {
|
||||
background-color: #2d0d0d;
|
||||
color: #f0a0a0;
|
||||
border-color: #4a1a1a;
|
||||
}
|
||||
</style>
|
||||
@@ -5,71 +5,47 @@
|
||||
<title>CANCOM Simple Signage Admin</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<!-- Tabler CSS -->
|
||||
<script>
|
||||
(() => {
|
||||
const stored = window.localStorage.getItem("signage-theme");
|
||||
const theme = stored === "dark" || stored === "light" ? stored : "light";
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
|
||||
|
||||
<!-- Tabler JS -->
|
||||
<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>
|
||||
|
||||
<!-- SortableJS -->
|
||||
<script defer
|
||||
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
||||
|
||||
{% include "_styles.html" %}
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #F4F6F8;
|
||||
/* Tooltip Styling */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Top Navigation */
|
||||
.navbar {
|
||||
background-color: #DA002D;
|
||||
}
|
||||
.navbar-brand {
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* CANCOM CI – Variante 1 */
|
||||
.card-header {
|
||||
background-color: #eeeeee;
|
||||
border-left: 6px solid #DA002D;
|
||||
padding-left: 1rem;
|
||||
/* font-size: 1.1rem; /* leicht größer */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #DA002D;
|
||||
border-color: #DA002D;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #B00024;
|
||||
border-color: #B00024;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #DA002D;
|
||||
border-color: #DA002D;
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(218, 0, 45, 0.25);
|
||||
}
|
||||
|
||||
/* Playlist als Grid (eine Zeile, tabellarisch) */
|
||||
/* Playlist als Grid */
|
||||
.playlist-row {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
28px /* Enabled */
|
||||
1fr /* Name */
|
||||
90px /* Typ */
|
||||
80px /* Größe */
|
||||
90px /* Delete */
|
||||
32px; /* Drag */
|
||||
28px 1fr 90px 80px 90px 32px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
@@ -95,178 +71,53 @@
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* CANCOM CI Tooltip Styling */
|
||||
.tooltip {
|
||||
--bs-tooltip-border-color: #DA002D;
|
||||
}
|
||||
.tooltip .tooltip-inner {
|
||||
border: 1px solid #DA002D;
|
||||
background-color: #ffffff;
|
||||
color: #212121;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tooltip .tooltip-arrow::before {
|
||||
border-top-color: #DA002D;
|
||||
border-bottom-color: #DA002D;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="navbar navbar-expand-md">
|
||||
{% set brand_subtitle = "Admin Dashboard" %}
|
||||
{% set site_dropdown_url_prefix = "/admin/" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<!-- Second Nav -->
|
||||
<div class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse show">
|
||||
<div class="navbar navbar-dark nav-surface">
|
||||
<div class="container-xl">
|
||||
|
||||
<a class="navbar-brand d-flex align-items-center"
|
||||
href="/admin">
|
||||
|
||||
<img src="{{ url_for('static', filename='cancom.svg') }}"
|
||||
alt="CANCOM"
|
||||
height="32"
|
||||
class="me-2">
|
||||
|
||||
<!--<span class="text-white fw-semibold">-->
|
||||
<span class="page-pretitle text-white">
|
||||
Admin Dashboard
|
||||
<h2 class="page-title text-white">Simple Signage</h2>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="d-none d-sm-inline">
|
||||
<a href="/customer" class="btn">Willkommensseite</a>
|
||||
<a href="/logout" class="btn">Logout</a>
|
||||
<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</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>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- PRIORITY / GLOBAL PLAYLIST -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-6 border border-danger">
|
||||
<div class="card-header d-flex justify-content-between align-items-center"
|
||||
style="background:#fff5f5;">
|
||||
<span>
|
||||
<div class="page-title" style="color:#DA002D;">⚠ PRIORITY Playlist</div>
|
||||
<div class="page-subtitle">wirkt auf alle Player</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">
|
||||
Inhalte dieser Playlist werden <strong>auf allen Playern</strong>
|
||||
zusätzlich zur normalen Playlist angezeigt.
|
||||
<br>
|
||||
Die Wiedergabe erfolgt <strong>abwechselnd</strong>
|
||||
(Normal → Priority → Normal → …).
|
||||
</p>
|
||||
|
||||
<!-- Upload -->
|
||||
<h4>Medien hochladen - ⚠ PRIORITY Playlist</h4>
|
||||
<form action="/admin/upload/priority"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-primary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/add-url/priority" method="post" class="mb-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||||
</div>
|
||||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
|
||||
<!-- Playlist -->
|
||||
<h4>Playlist Reihenfolge - ⚠ PRIORITY Playlist</h4>
|
||||
|
||||
<ul class="list-group mb-3" id="playlist-priority">
|
||||
{% for file in priority_files %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<input class="form-check-input playlist-enabled"
|
||||
type="checkbox"
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" or file.type == "html" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
|
||||
<form action="{{ url_for('delete_file', screen='priority', filename=file.name) }}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
onmousedown="event.stopPropagation()">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
<!-- Drag -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('priority')">
|
||||
Priority-Playlist speichern
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- SCREENS -->
|
||||
<!-- ========================= -->
|
||||
|
||||
{% for screen, cfg in screens.items() %}
|
||||
<div class="card mb-6">
|
||||
<div class="card mb-6" id="screen-{{ screen }}">
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
@@ -274,20 +125,27 @@
|
||||
<div class="page-title">Screen:
|
||||
<div class="text-uppercase"> - {{ screen }} -</div>
|
||||
</div>
|
||||
<div class="page-subtitle">https://signage.ccmake.de/player/{{ screen }}</div>
|
||||
<div class="page-subtitle">http://localhost:5005/player/{{ current_site }}/{{ screen }}</div>
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
{% if screen_status[screen] == "active" %}
|
||||
<span class="badge bg-green text-green-fg">Aktiv</span>
|
||||
{% else %}
|
||||
<span class="badge bg-warning text-dark">Leer</span>
|
||||
{% endif %}
|
||||
<form action="/admin/{{ current_site }}/delete-screen/{{ screen }}"
|
||||
method="post" class="d-inline"
|
||||
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>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Einstellungen -->
|
||||
<h2>Einstellungen</h2>
|
||||
<form action="/admin/update/{{ screen }}" method="post">
|
||||
<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"
|
||||
@@ -320,6 +178,32 @@
|
||||
<label class="form-check-label">Videos anzeigen</label>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h3>Aktions-Button (Player)</h3>
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
name="custom_url_enabled"
|
||||
{% if cfg.custom_url_enabled %}checked{% endif %}>
|
||||
<label class="form-check-label">Aktions-Button anzeigen</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Button-URL</label>
|
||||
<input type="url" name="custom_url" class="form-control"
|
||||
placeholder="https://example.com" value="{{ cfg.custom_url|default('') }}">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Button-Beschriftung</label>
|
||||
<input type="text" name="custom_url_label" class="form-control"
|
||||
placeholder="z. B. Infos" value="{{ cfg.custom_url_label|default('') }}" maxlength="50">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Verhalten bei Klick</label>
|
||||
<select name="custom_url_target" class="form-select">
|
||||
<option value="overlay" {% if cfg.custom_url_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
|
||||
<option value="redirect" {% if cfg.custom_url_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Einstellungen speichern
|
||||
</button>
|
||||
@@ -329,7 +213,7 @@
|
||||
|
||||
<!-- Upload -->
|
||||
<h2>Medien hochladen / URL hinzufügen - {{ screen }}</h2>
|
||||
<form action="/admin/upload/{{ screen }}"
|
||||
<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>
|
||||
@@ -337,7 +221,7 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/add-url/{{ screen }}" method="post" class="mb-4">
|
||||
<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"
|
||||
@@ -369,7 +253,7 @@
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
title="<img src='/media/{{ current_site }}/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
@@ -394,7 +278,7 @@
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ url_for('delete_file', screen=screen, filename=file.name) }}"
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
|
||||
method="post">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
@@ -410,7 +294,7 @@
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('{{ screen }}')">
|
||||
onclick="savePlaylist('{{ current_site }}', '{{ screen }}')">
|
||||
Playlist speichern
|
||||
</button>
|
||||
|
||||
@@ -422,11 +306,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer footer-transparent mt-4">
|
||||
<div class="container-xl text-muted">
|
||||
© {{ year }} CANCOM GmbH · Version {{ version }} · {{ hostname }}
|
||||
</div>
|
||||
</footer>
|
||||
{% include "_footer.html" %}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -450,12 +330,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
initSortable("{{ screen }}");
|
||||
{% endfor %}
|
||||
|
||||
// ✅ Priority explizit
|
||||
initSortable("priority");
|
||||
|
||||
|
||||
|
||||
function savePlaylist(screen) {
|
||||
function savePlaylist(site, screen) {
|
||||
const items = document.querySelectorAll(
|
||||
"#playlist-" + screen + " li"
|
||||
);
|
||||
@@ -469,7 +344,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
playlist.push(fileName);
|
||||
});
|
||||
|
||||
fetch("/admin/playlist/" + screen, {
|
||||
fetch("/admin/" + site + "/playlist/" + screen, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
@@ -487,6 +362,28 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Dark Mode Toggle
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
const syncThemeToggle = () => {
|
||||
const theme = root.getAttribute("data-bs-theme") || "light";
|
||||
if (!themeToggle) return;
|
||||
themeToggle.innerHTML = theme === "dark"
|
||||
? '<i class="ti ti-sun"></i>'
|
||||
: '<i class="ti ti-moon"></i>';
|
||||
};
|
||||
|
||||
if (themeToggle) {
|
||||
syncThemeToggle();
|
||||
themeToggle.addEventListener("click", () => {
|
||||
const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-bs-theme", nextTheme);
|
||||
window.localStorage.setItem("signage-theme", nextTheme);
|
||||
syncThemeToggle();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -3,70 +3,72 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Kunde hinzufügen</title>
|
||||
<title>Willkommensseite</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const stored = window.localStorage.getItem("signage-theme");
|
||||
const theme = stored === "dark" || stored === "light" ? stored : "light";
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
{% include "_styles.html" %}
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #F4F6F8;
|
||||
color: #212121;
|
||||
.form-label { font-weight: 600; }
|
||||
.card { box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
|
||||
.logo-preview-box {
|
||||
border: 2px dashed var(--ccm-border);
|
||||
border-radius: 0.75rem;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: var(--ccm-surface);
|
||||
}
|
||||
.navbar {
|
||||
background-color: #DA002D;
|
||||
.logo-preview-box img {
|
||||
max-height: 100px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.navbar-brand,
|
||||
.navbar-brand h2,
|
||||
.navbar-brand .page-pretitle {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.card-header {
|
||||
background-color: #eeeeee;
|
||||
border-left: 6px solid #DA002D;
|
||||
padding-left: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #DA002D;
|
||||
border-color: #DA002D;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #B00024;
|
||||
border-color: #B00024;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
.card {
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
|
||||
.logo-preview-box .placeholder {
|
||||
color: var(--ccm-muted);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="navbar navbar-expand-md">
|
||||
|
||||
{% set brand_subtitle = "Willkommensseite" %}
|
||||
{% set site_dropdown_url_prefix = "/willkommen?site=" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<!-- Second Nav -->
|
||||
<div class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse show">
|
||||
<div class="navbar navbar-dark nav-surface">
|
||||
<div class="container-xl">
|
||||
<a class="navbar-brand d-flex align-items-center"
|
||||
href="/admin">
|
||||
<img src="{{ url_for('static', filename='cancom.svg') }}"
|
||||
alt="CANCOM"
|
||||
height="32"
|
||||
class="me-2">
|
||||
<span class="page-pretitle text-white">
|
||||
Admin Dashboard
|
||||
<h2 class="page-title text-white">Simple Signage</h2>
|
||||
</span>
|
||||
</a>
|
||||
<div class="d-none d-sm-inline">
|
||||
<a href="/admin" class="btn">Zurück</a>
|
||||
<a href="/logout" class="btn">Logout</a>
|
||||
<div class="d-flex flex-wrap gap-2 py-2">
|
||||
<a class="btn btn-white" 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</a>
|
||||
<a class="btn btn-white active" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
@@ -75,59 +77,99 @@
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="page-pretitle">Willkommensseite</div>
|
||||
<h2 class="page-title">Kundeninformationen eingeben</h2>
|
||||
<h2 class="page-title">Kundeninformationen eingeben (max. 3)</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div class="alert alert-danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="alert alert-success">
|
||||
{{ success }}
|
||||
</div>
|
||||
<div class="alert alert-success">{{ success }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if logo_url %}
|
||||
<div class="alert alert-secondary d-flex align-items-center gap-3">
|
||||
<div>
|
||||
<strong>Logo Vorschau</strong>
|
||||
<div class="text-muted">Wenn das Logo erfolgreich gefunden wurde, wird es hier angezeigt.</div>
|
||||
</div>
|
||||
<img src="{{ logo_url }}"
|
||||
alt="Logo Vorschau"
|
||||
class="img-fluid border"
|
||||
style="max-height: 120px; max-width: 240px; object-fit: contain;">
|
||||
</div>
|
||||
<!-- Logo Previews -->
|
||||
<div class="row g-3 mb-4">
|
||||
{% for i in range(3) %}
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Logo {{ i + 1 }}</label>
|
||||
<div class="logo-preview-box">
|
||||
{% if logo_urls and logo_urls[i] %}
|
||||
<img src="{{ logo_urls[i] }}" alt="Logo {{ i + 1 }}">
|
||||
{% else %}
|
||||
<div class="placeholder">kein Logo</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<form method="POST">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="customer_name">Kundenname</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="customer_name"
|
||||
name="customer_name"
|
||||
placeholder="z. B. Beispiel GmbH"
|
||||
required>
|
||||
<input type="hidden" name="site" value="{{ site }}">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="customer_name_1">Kunde 1</label>
|
||||
<input type="text" class="form-control" id="customer_name_1"
|
||||
name="customer_name_1" placeholder="z. B. Beispiel GmbH"
|
||||
value="{{ customer_names[0] if customer_names else '' }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="customer_name_2">Kunde 2 (optional)</label>
|
||||
<input type="text" class="form-control" id="customer_name_2"
|
||||
name="customer_name_2" placeholder="z. B. Muster AG"
|
||||
value="{{ customer_names[1] if customer_names else '' }}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="customer_name_3">Kunde 3 (optional)</label>
|
||||
<input type="text" class="form-control" id="customer_name_3"
|
||||
name="customer_name_3" placeholder="z. B. Firma GmbH"
|
||||
value="{{ customer_names[2] if customer_names else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 text-muted">
|
||||
<p class="mb-1">Das System sucht automatisch nach dem Kundenlogo</p>
|
||||
<p class="mb-1">Das System sucht automatisch nach den Kundenlogos</p>
|
||||
<p class="mb-0">und erstellt eine angepasste Willkommensseite für die Lobby-Playlist.</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Kundenlogo & Willkommensseite generieren
|
||||
<i class="ti ti-file-plus me-1"></i>Logos & Willkommensseite generieren
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
{% include "_footer.html" %}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
const syncThemeToggle = () => {
|
||||
const theme = root.getAttribute("data-bs-theme") || "light";
|
||||
if (!themeToggle) return;
|
||||
themeToggle.innerHTML = theme === "dark"
|
||||
? '<i class="ti ti-sun"></i>'
|
||||
: '<i class="ti ti-moon"></i>';
|
||||
};
|
||||
|
||||
if (themeToggle) {
|
||||
syncThemeToggle();
|
||||
themeToggle.addEventListener("click", () => {
|
||||
const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-bs-theme", nextTheme);
|
||||
window.localStorage.setItem("signage-theme", nextTheme);
|
||||
syncThemeToggle();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img, video, iframe {
|
||||
img, video, #iframe {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: black;
|
||||
@@ -28,7 +28,7 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
img, iframe {
|
||||
img, #iframe {
|
||||
object-fit: contain;
|
||||
border: 0;
|
||||
}
|
||||
@@ -71,6 +71,36 @@
|
||||
|
||||
<body>
|
||||
|
||||
<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;
|
||||
padding:8px 16px;background:#DA002D;color:#fff;
|
||||
border:none;border-radius:6px;font-size:1rem;cursor:pointer;">
|
||||
← Zurück
|
||||
</button>
|
||||
<iframe id="overlay-iframe" style="width:100%;height:100%;border:none;display:block;"></iframe>
|
||||
</div>
|
||||
|
||||
{% 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 %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<img id="image">
|
||||
<video id="video" muted autoplay playsinline></video>
|
||||
@@ -88,6 +118,20 @@
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
let playerTimer = null;
|
||||
|
||||
function openOverlay(url) {
|
||||
if (playerTimer) clearTimeout(playerTimer);
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
document.getElementById("overlay-iframe").src = url;
|
||||
}
|
||||
|
||||
function closeOverlay() {
|
||||
document.getElementById("overlay").style.display = "none";
|
||||
document.getElementById("overlay-iframe").src = "";
|
||||
playNext();
|
||||
}
|
||||
|
||||
// Newsticker Uhrzeit
|
||||
function updateClock() {
|
||||
const el = document.getElementById('newsticker-clock');
|
||||
@@ -104,6 +148,7 @@ const normalFiles = {{ normal_files | tojson }};
|
||||
const prioFiles = {{ prio_files | tojson }};
|
||||
const interval = {{ interval }} * 1000;
|
||||
const screen = "{{ screen }}";
|
||||
const site = "{{ site }}";
|
||||
|
||||
/* -----------------------------
|
||||
Player State
|
||||
@@ -233,11 +278,11 @@ function playNext() {
|
||||
iframe.style.height = `100vh`;
|
||||
iframe.style.transform = `translate(-50%, -50%)`;
|
||||
}
|
||||
setTimeout(playNext, interval);
|
||||
playerTimer = setTimeout(playNext, interval);
|
||||
return;
|
||||
}
|
||||
|
||||
const src = `/media/${basePath}/${item.name}`;
|
||||
const src = entry.isPrio ? `/media/priority/${item.name}` : `/media/${site}/${basePath}/${item.name}`;
|
||||
if (isVideo(item)) {
|
||||
vid.style.display = "block";
|
||||
vid.src = src;
|
||||
@@ -249,11 +294,11 @@ function playNext() {
|
||||
iframe.style.width = `100vw`;
|
||||
iframe.style.height = `100vh`;
|
||||
iframe.style.transform = `translate(-50%, -50%)`;
|
||||
setTimeout(playNext, interval);
|
||||
playerTimer = setTimeout(playNext, interval);
|
||||
} else {
|
||||
img.style.display = "block";
|
||||
img.src = src;
|
||||
setTimeout(playNext, interval);
|
||||
playerTimer = setTimeout(playNext, interval);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -264,7 +309,7 @@ let lastHash = null;
|
||||
|
||||
async function checkForUpdates() {
|
||||
try {
|
||||
const res = await fetch(`/playlist/${screen}/hash`, { cache: "no-store" });
|
||||
const res = await fetch(`/playlist/${site}/${screen}/hash`, { cache: "no-store" });
|
||||
const hash = await res.text();
|
||||
|
||||
if (lastHash && lastHash !== hash) {
|
||||
|
||||
279
templates/priority.html
Normal file
279
templates/priority.html
Normal file
@@ -0,0 +1,279 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>CANCOM Simple Signage – Priority Playlist</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const stored = window.localStorage.getItem("signage-theme");
|
||||
const theme = stored === "dark" || stored === "light" ? stored : "light";
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<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>
|
||||
.playlist-row {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
28px 1fr 90px 80px 90px 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;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
{% set brand_subtitle = "Priority Playlist" %}
|
||||
{% set site_dropdown_url_prefix = "/admin/" %}
|
||||
{% include "_header.html" %}
|
||||
|
||||
<!-- Second Nav -->
|
||||
<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" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
|
||||
<a class="btn btn-white active" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority</a>
|
||||
<a class="btn btn-white" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- PRIORITY / GLOBAL PLAYLIST -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-6">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span>
|
||||
<div class="page-title" style="color:#DA002D;">⚠ PRIORITY Playlist</div>
|
||||
<div class="page-subtitle">wirkt auf alle Player</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">
|
||||
Inhalte dieser Playlist werden <strong>auf allen Playern</strong>
|
||||
zusätzlich zur normalen Playlist angezeigt.
|
||||
<br>
|
||||
Die Wiedergabe erfolgt <strong>abwechselnd</strong>
|
||||
(Normal → Priority → Normal → …).
|
||||
</p>
|
||||
|
||||
<!-- Upload -->
|
||||
<h4>Medien hochladen</h4>
|
||||
<form action="/admin/{{ current_site }}/upload/priority"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button class="btn btn-primary" type="submit">Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/admin/{{ current_site }}/add-url/priority" method="post" class="mb-3">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" name="url" class="form-control"
|
||||
placeholder="https://example.com" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||||
</div>
|
||||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
|
||||
<!-- Playlist -->
|
||||
<h4>Playlist Reihenfolge</h4>
|
||||
|
||||
<ul class="list-group mb-3" id="playlist-priority">
|
||||
{% for file in priority_files %}
|
||||
<li class="list-group-item playlist-row"
|
||||
data-file="{{ file.name }}">
|
||||
|
||||
<input class="form-check-input playlist-enabled"
|
||||
type="checkbox"
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<span class="playlist-name"
|
||||
{% if file.type == "image" %}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-html="true"
|
||||
title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
|
||||
{% elif file.type == "url" %}
|
||||
data-bs-toggle="tooltip"
|
||||
title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
|
||||
</span>
|
||||
|
||||
{% if file.type == "image" %}
|
||||
<span class="badge bg-purple text-purple-fg">Bild</span>
|
||||
{% elif file.type == "url" or file.type == "html" %}
|
||||
<span class="badge bg-blue text-blue-fg">URL</span>
|
||||
{% else %}
|
||||
<span class="badge bg-orange text-orange-fg">Video</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="playlist-size">
|
||||
{% if file.type == "url" %}
|
||||
{{ file.size }}
|
||||
{% else %}
|
||||
{{ file.size }} KB
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen='priority', filename=file.name) }}"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
onmousedown="event.stopPropagation()">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Drag -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary"
|
||||
onclick="savePlaylist('{{ current_site }}', 'priority')">
|
||||
Priority-Playlist speichern
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
{% include "_footer.html" %}
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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"
|
||||
});
|
||||
}
|
||||
|
||||
initSortable("priority");
|
||||
|
||||
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;
|
||||
|
||||
// Initialize tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Dark Mode Toggle
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
const syncThemeToggle = () => {
|
||||
const theme = root.getAttribute("data-bs-theme") || "light";
|
||||
if (!themeToggle) return;
|
||||
themeToggle.innerHTML = theme === "dark"
|
||||
? '<i class="ti ti-sun"></i>'
|
||||
: '<i class="ti ti-moon"></i>';
|
||||
};
|
||||
|
||||
if (themeToggle) {
|
||||
syncThemeToggle();
|
||||
themeToggle.addEventListener("click", () => {
|
||||
const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-bs-theme", nextTheme);
|
||||
window.localStorage.setItem("signage-theme", nextTheme);
|
||||
syncThemeToggle();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user