ethiele/signage
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standortauswahl und Multi Logo und Action Button

Browse Source
This commit is contained in:
Erik Thiele
2026-06-05 12:55:01 +02:00
parent 4733c11832
commit d7bebf1226
13 changed files with 1562 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
templates/admin.html
View File

@@ -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,199 +71,81 @@
.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">
<div class="container-xl">
<a class="navbar-brand d-flex align-items-center"
href="/admin">
{% set brand_subtitle = "Admin Dashboard" %}
{% set site_dropdown_url_prefix = "/admin/" %}
{% include "_header.html" %}
<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>
</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>
<!-- 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 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>
</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>
<a class="btn btn-white" href="javascript:void(0)"
onclick="var n=prompt('Name des neuen Screens:'); if(n&&n.trim()) location.href='/admin/{{ current_site }}/add-screen?name='+encodeURIComponent(n.trim().toLowerCase());"
title="Neuen Screen anlegen"><i class="ti ti-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="page-wrapper">
<div class="container-xl mt-4">
<!-- ========================= -->
<!-- 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">
<span>
<div class="page-title">Screen:
<div class="page-title">Screen:
<div class="text-uppercase">&nbsp- {{ 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"
@@ -351,7 +235,7 @@
</form>
<hr>
<!-- Playlist -->
<h2>Playlist Reihenfolge - {{ screen }}</h2>
@@ -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>