402 lines
15 KiB
HTML
Executable File
402 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') }}">
|
|
|
|
<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>
|
|
/* 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;
|
|
}
|
|
|
|
/* Playlist als Grid */
|
|
.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 = "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">
|
|
<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>
|
|
|
|
<!-- Content -->
|
|
<div class="page-wrapper">
|
|
<div class="container-xl mt-4">
|
|
|
|
<!-- ========================= -->
|
|
<!-- STANDORT VERWALTUNG -->
|
|
<!-- ========================= -->
|
|
<div class="d-flex justify-content-end mb-3">
|
|
<form action="/admin/{{ current_site }}/delete-site" method="post"
|
|
onsubmit="return confirm('Standort »{{ current_site }}« wirklich löschen? Alle Screens und Medien werden gelöscht.')">
|
|
<button type="submit" class="btn btn-outline-danger btn-sm"><i class="ti ti-building-off me-1"></i>Standort löschen</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- ========================= -->
|
|
<!-- SCREENS -->
|
|
<!-- ========================= -->
|
|
|
|
{% for screen, cfg in screens.items() %}
|
|
<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="text-uppercase"> - {{ screen }} -</div>
|
|
</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/{{ current_site }}/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>
|
|
|
|
<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>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<!-- Upload -->
|
|
<h2>Medien hochladen / URL hinzufügen - {{ screen }}</h2>
|
|
<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>
|
|
<button class="btn btn-primary" type="submit">Upload</button>
|
|
</div>
|
|
</form>
|
|
|
|
<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"
|
|
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 }}">
|
|
|
|
<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/{{ 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 %}"
|
|
{% 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=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('{{ current_site }}', '{{ screen }}')">
|
|
Playlist speichern
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</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"
|
|
});
|
|
}
|
|
|
|
// ✅ Normale Screens
|
|
{% for screen in screens.keys() %}
|
|
initSortable("{{ screen }}");
|
|
{% endfor %}
|
|
|
|
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>
|