476 lines
15 KiB
HTML
Executable File
476 lines
15 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CANCOM Simple Signage Admin</title>
|
||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||
|
||
<!-- 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>
|
||
|
||
<!-- SortableJS -->
|
||
<script defer
|
||
src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
||
|
||
<style>
|
||
body {
|
||
background-color: #F4F6F8;
|
||
color: #212121;
|
||
}
|
||
|
||
/* 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-row {
|
||
display: grid;
|
||
grid-template-columns:
|
||
1fr /* Name */
|
||
90px /* Typ */
|
||
80px /* Größe */
|
||
90px /* Delete */
|
||
32px; /* Drag */
|
||
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;
|
||
}
|
||
|
||
/* 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">
|
||
|
||
<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>
|
||
</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 }}">
|
||
|
||
<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-Reihenfolge speichern
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ========================= -->
|
||
<!-- SCREENS -->
|
||
<!-- ========================= -->
|
||
|
||
{% for screen, cfg in screens.items() %}
|
||
<div class="card mb-6">
|
||
|
||
<!-- Card Header -->
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<span>
|
||
<div class="page-title">Screen:
|
||
<div class="text-uppercase"> - {{ screen }} -</div>
|
||
</div>
|
||
<div class="page-subtitle">https://signage.ccmake.de/player/{{ screen }}</div>
|
||
</span>
|
||
{% 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 %}
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<!-- Einstellungen -->
|
||
<h2>Einstellungen</h2>
|
||
<form action="/admin/update/{{ screen }}" method="post">
|
||
<div class="mb-2">
|
||
<label class="form-label">Intervall (Sekunden)</label>
|
||
<input type="number" class="form-control"
|
||
name="interval" min="1" value="{{ cfg.interval }}">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="form-label">Newsticker-Text</label>
|
||
<input type="text" class="form-control" name="newsticker_text" value="{{ cfg.newsticker_text|default('') }}" maxlength="200">
|
||
</div>
|
||
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox"
|
||
name="newsticker_enabled"
|
||
{% if cfg.newsticker_enabled %}checked{% endif %}>
|
||
<label class="form-check-label">Newsticker anzeigen</label>
|
||
</div>
|
||
|
||
<div class="form-check form-switch mb-2">
|
||
<input class="form-check-input" type="checkbox"
|
||
name="show_images"
|
||
{% if cfg.show_images %}checked{% endif %}>
|
||
<label class="form-check-label">Bilder anzeigen</label>
|
||
</div>
|
||
|
||
<div class="form-check form-switch mb-4">
|
||
<input class="form-check-input" type="checkbox"
|
||
name="show_videos"
|
||
{% if cfg.show_videos %}checked{% endif %}>
|
||
<label class="form-check-label">Videos anzeigen</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">
|
||
Einstellungen speichern
|
||
</button>
|
||
</form>
|
||
|
||
<hr>
|
||
|
||
<!-- Upload -->
|
||
<h2>Medien hochladen / URL hinzufügen - {{ screen }}</h2>
|
||
<form action="/admin/upload/{{ screen }}"
|
||
method="post" enctype="multipart/form-data">
|
||
<div class="input-group mb-3">
|
||
<input type="file" name="file" class="form-control" required>
|
||
<button class="btn btn-primary" type="submit">Upload</button>
|
||
</div>
|
||
</form>
|
||
|
||
<form action="/admin/add-url/{{ screen }}" method="post" class="mb-4">
|
||
<div class="mb-2">
|
||
<label class="form-label">URL</label>
|
||
<input type="url" name="url" class="form-control"
|
||
placeholder="https://example.com" required>
|
||
</div>
|
||
<div class="mb-2">
|
||
<label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
|
||
<input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
|
||
</div>
|
||
<button class="btn btn-secondary" type="submit">URL hinzufügen</button>
|
||
</form>
|
||
|
||
<hr>
|
||
|
||
<!-- Playlist -->
|
||
<h2>Playlist Reihenfolge - {{ screen }}</h2>
|
||
|
||
<ul class="list-group mb-3" id="playlist-{{ screen }}">
|
||
{% for file in media_files[screen] %}
|
||
<li class="list-group-item playlist-row"
|
||
data-file="{{ file.name }}">
|
||
|
||
<span class="playlist-name"
|
||
{% 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'>"
|
||
{% 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=screen, filename=file.name) }}"
|
||
method="post">
|
||
<button type="submit"
|
||
class="btn btn-outline-danger btn-sm"
|
||
onclick="return confirm('Datei wirklich löschen?')">
|
||
Löschen
|
||
</button>
|
||
</form>
|
||
|
||
<!-- Drag -->
|
||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
|
||
<button class="btn btn-primary"
|
||
onclick="savePlaylist('{{ screen }}')">
|
||
Reihenfolge speichern
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer footer-transparent mt-4">
|
||
<div class="container-xl text-muted">
|
||
© {{ year }} CANCOM GmbH · Version {{ version }} · {{ hostname }}
|
||
</div>
|
||
</footer>
|
||
|
||
</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"
|
||
});
|
||
}
|
||
|
||
// ✅ Normale Screens
|
||
{% for screen in screens.keys() %}
|
||
initSortable("{{ screen }}");
|
||
{% endfor %}
|
||
|
||
// ✅ Priority explizit
|
||
initSortable("priority");
|
||
|
||
|
||
|
||
function savePlaylist(screen) {
|
||
const items = document.querySelectorAll(
|
||
"#playlist-" + screen + " li"
|
||
);
|
||
|
||
fetch("/admin/playlist/" + screen, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
playlist: Array.from(items).map(i => i.dataset.file)
|
||
})
|
||
}).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);
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|