Standortauswahl und Multi Logo und Action Button
This commit is contained in:
Erik Thiele
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,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"> - {{ 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>
|
||||
|
||||
|
||||
@@ -3,131 +3,173 @@
|
||||
<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">
|
||||
<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>
|
||||
|
||||
{% 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">
|
||||
<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>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl mt-4">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
<!-- 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>
|
||||
<img src="{{ logo_url }}"
|
||||
alt="Logo Vorschau"
|
||||
class="img-fluid border"
|
||||
style="max-height: 120px; max-width: 240px; object-fit: contain;">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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