feat: Add time-based scheduling for playlist items
This commit is contained in:
Erik Thiele
@@ -240,18 +240,21 @@
|
||||
{% if file.enabled %}checked{% endif %}
|
||||
title="Element aktivieren">
|
||||
|
||||
<!-- Dateiname (mit Tooltip-Vorschau) -->
|
||||
<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 %}{% if file.type == "url" %}{% if file.get('passthrough', False) %} <i class="ti ti-link" style="color:#6c757d;" title="Query-Parameter werden übergeben"></i>{% else %} <i class="ti ti-link-off" style="color:#adb5bd;" title="Query-Parameter werden nicht übergeben"></i>{% endif %}{% endif %}
|
||||
</span>
|
||||
<!-- Dateiname (mit Tooltip-Vorschau) -->
|
||||
<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 %}"{% if file.schedule %}
|
||||
data-bs-custom-class="schedule-tooltip"
|
||||
data-bs-title="Zeitsteuerung: {% if file.schedule.mode == 'once' %}Einmalig: {{ file.schedule.start }} bis {{ file.schedule.end }}{% elif file.schedule.mode == 'daily' %}Täglich: {{ file.schedule.start.split('T')[1][:5] }} bis {{ file.schedule.end.split('T')[1][:5] }}{% elif file.schedule.mode == 'weekly' %}Wöchentlich: {{ file.schedule.start.split('T')[1][:5] }} bis {{ file.schedule.end.split('T')[1][:5] }} an {% for day in file.schedule.days %}{{ ['Mo','Di','Mi','Do','Fr','Sa','So'][int(day)] }}{% if not loop.last %}, {% endif %}{% endfor %}{% endif %}"
|
||||
{% endif %}>
|
||||
{{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}{% if file.type == "url" %}{% if file.get('passthrough', False) %} <i class="ti ti-link" style="color:#6c757d;" title="Query-Parameter werden übergeben"></i>{% else %} <i class="ti ti-link-off" style="color:#adb5bd;" title="Query-Parameter werden nicht übergeben"></i>{% endif %}{% endif %}
|
||||
{% if file.schedule %}<span class="badge bg-info text-white ms-1">Zeit</span>{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Typ-Badge -->
|
||||
{% if file.type == "image" %}
|
||||
@@ -271,32 +274,33 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<!-- Löschen -->
|
||||
<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>
|
||||
<!-- Löschen -->
|
||||
<form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
|
||||
method="post" style="margin: 0; padding: 0;">
|
||||
<button type="submit"
|
||||
class="btn btn-outline-danger btn-sm"
|
||||
onclick="return confirm('Datei wirklich löschen?')">
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Bearbeiten (nur URLs) -->
|
||||
{% if file.type == "url" %}
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary btn-sm edit-url-btn"
|
||||
title="URL bearbeiten"
|
||||
data-name="{{ file.name | e }}"
|
||||
data-zoom="{{ file.zoom | default(1.0) }}"
|
||||
data-site="{{ current_site }}"
|
||||
data-screen="{{ screen }}"
|
||||
data-oldname="{{ file.name | e }}"
|
||||
data-passthrough="{{ 'true' if file.get('passthrough', False) else 'false' }}">
|
||||
Edit
|
||||
</button>
|
||||
{% else %}
|
||||
<span></span>
|
||||
{% endif %}
|
||||
<!-- Bearbeiten (nur URLs) -->
|
||||
{% if file.type == "url" %}
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary btn-sm edit-url-btn"
|
||||
title="URL bearbeiten"
|
||||
data-name="{{ file.name | e }}"
|
||||
data-zoom="{{ file.zoom | default(1.0) }}"
|
||||
data-site="{{ current_site }}"
|
||||
data-screen="{{ screen }}"
|
||||
data-oldname="{{ file.name | e }}"
|
||||
data-passthrough="{{ 'true' if file.get('passthrough', False) else 'false' }}"
|
||||
data-schedule="{{ file.schedule | tojson }}">
|
||||
Edit
|
||||
</button>
|
||||
{% else %}
|
||||
<span></span>
|
||||
{% endif %}
|
||||
|
||||
<!-- Drag-Handle (SortableJS) -->
|
||||
<span class="drag-handle" title="Reihenfolge ändern">⇅</span>
|
||||
@@ -482,18 +486,87 @@
|
||||
|
||||
<hr>
|
||||
<h3>URL hinzufügen</h3>
|
||||
<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-primary" type="submit">URL hinzufügen</button>
|
||||
</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>
|
||||
|
||||
<!-- Zeitsteuerung -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="schedule-enabled-{{ screen }}" name="schedule_enabled">
|
||||
<label class="form-check-label" for="schedule-enabled-{{ screen }}">
|
||||
Zeitgesteuerte Wiedergabe
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" id="schedule-options-{{ screen }}" style="display: none;">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Wiederholung</label>
|
||||
<select class="form-select" name="schedule_mode">
|
||||
<option value="once">Einmalig</option>
|
||||
<option value="daily">Täglich</option>
|
||||
<option value="weekly">Wöchentlich</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label class="form-label">Start</label>
|
||||
<input type="datetime-local" class="form-control" name="schedule_start" required>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Ende</label>
|
||||
<input type="datetime-local" class="form-control" name="schedule_end" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="schedule-days-{{ screen }}" style="display: none;">
|
||||
<label class="form-label">Wochentage</label>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="0" id="mon-{{ screen }}">
|
||||
<label class="form-check-label" for="mon-{{ screen }}">Mo</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="1" id="tue-{{ screen }}">
|
||||
<label class="form-check-label" for="tue-{{ screen }}">Di</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="2" id="wed-{{ screen }}">
|
||||
<label class="form-check-label" for="wed-{{ screen }}">Mi</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="3" id="thu-{{ screen }}">
|
||||
<label class="form-check-label" for="thu-{{ screen }}">Do</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="4" id="fri-{{ screen }}">
|
||||
<label class="form-check-label" for="fri-{{ screen }}">Fr</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="5" id="sat-{{ screen }}">
|
||||
<label class="form-check-label" for="sat-{{ screen }}">Sa</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="schedule_days" value="6" id="sun-{{ screen }}">
|
||||
<label class="form-check-label" for="sun-{{ screen }}">So</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit">URL hinzufügen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Tab: Info (Client-Informationen) ═══ -->
|
||||
@@ -543,20 +616,51 @@
|
||||
/* ─── Playlist-Item bearbeiten (URL + Zoom) ─── */
|
||||
var editState = { site: "", screen: "", oldName: "" };
|
||||
|
||||
/* Event-Delegation für Edit-Buttons (global, sofort aktiv) */
|
||||
document.addEventListener("click", function (e) {
|
||||
var btn = e.target.closest(".edit-url-btn");
|
||||
if (!btn) return;
|
||||
e.preventDefault();
|
||||
editState.site = btn.dataset.site;
|
||||
editState.screen = btn.dataset.screen;
|
||||
editState.oldName = btn.dataset.oldname;
|
||||
document.getElementById("edit-url-input").value = btn.dataset.oldname;
|
||||
document.getElementById("edit-zoom-input").value = btn.dataset.zoom;
|
||||
document.getElementById("edit-passthrough-input").checked = btn.dataset.passthrough === "true";
|
||||
document.getElementById("edit-url-error").style.display = "none";
|
||||
new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
|
||||
});
|
||||
/* Event-Delegation für Edit-Buttons (global, sofort aktiv) */
|
||||
document.addEventListener("click", function (e) {
|
||||
var btn = e.target.closest(".edit-url-btn");
|
||||
if (!btn) return;
|
||||
e.preventDefault();
|
||||
editState.site = btn.dataset.site;
|
||||
editState.screen = btn.dataset.screen;
|
||||
editState.oldName = btn.dataset.oldname;
|
||||
document.getElementById("edit-url-input").value = btn.dataset.oldname;
|
||||
document.getElementById("edit-zoom-input").value = btn.dataset.zoom;
|
||||
document.getElementById("edit-passthrough-input").checked = btn.dataset.passthrough === "true";
|
||||
|
||||
// Zeitsteuerung aus Daten setzen
|
||||
const schedule = JSON.parse(btn.dataset.schedule || 'null');
|
||||
const enabledEl = document.getElementById("edit-schedule-enabled");
|
||||
const optionsEl = document.getElementById("edit-schedule-options");
|
||||
|
||||
if (schedule) {
|
||||
enabledEl.checked = true;
|
||||
optionsEl.style.display = "";
|
||||
document.getElementById("edit-schedule-mode").value = schedule.mode || "once";
|
||||
document.getElementById("edit-schedule-start").value = schedule.start || "";
|
||||
document.getElementById("edit-schedule-end").value = schedule.end || "";
|
||||
|
||||
// Wochentage setzen
|
||||
const days = schedule.days || [];
|
||||
document.getElementById("edit-mon").checked = days.includes("0");
|
||||
document.getElementById("edit-tue").checked = days.includes("1");
|
||||
document.getElementById("edit-wed").checked = days.includes("2");
|
||||
document.getElementById("edit-thu").checked = days.includes("3");
|
||||
document.getElementById("edit-fri").checked = days.includes("4");
|
||||
document.getElementById("edit-sat").checked = days.includes("5");
|
||||
document.getElementById("edit-sun").checked = days.includes("6");
|
||||
|
||||
// Wochentage-Anzeige entsprechend Modus aktualisieren
|
||||
updateScheduleDaysVisibility();
|
||||
} else {
|
||||
enabledEl.checked = false;
|
||||
optionsEl.style.display = "none";
|
||||
updateScheduleDaysVisibility();
|
||||
}
|
||||
|
||||
document.getElementById("edit-url-error").style.display = "none";
|
||||
new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
@@ -610,6 +714,25 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
/* ─── Zeitsteuerung: Anzeige der Wochentage entsprechend Modus ─── */
|
||||
function updateScheduleDaysVisibility() {
|
||||
const mode = document.getElementById("edit-schedule-mode").value;
|
||||
const daysEl = document.getElementById("edit-schedule-days");
|
||||
daysEl.style.display = mode === "weekly" ? "" : "none";
|
||||
}
|
||||
|
||||
/* ─── Zeitsteuerung: Änderungs-Events verarbeiten ─── */
|
||||
document.getElementById("edit-schedule-enabled").addEventListener("change", function() {
|
||||
document.getElementById("edit-schedule-options").style.display = this.checked ? "" : "none";
|
||||
});
|
||||
|
||||
document.getElementById("edit-schedule-mode").addEventListener("change", function() {
|
||||
updateScheduleDaysVisibility();
|
||||
});
|
||||
|
||||
// Initiale Anzeige
|
||||
updateScheduleDaysVisibility();
|
||||
|
||||
/* ─── Edit-URL-Modal: Speichern-Button ─── */
|
||||
document.getElementById("edit-url-save").addEventListener("click", function () {
|
||||
@@ -625,6 +748,40 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
errorEl.style.display = "none";
|
||||
|
||||
// Zeitsteuerung sammeln
|
||||
const scheduleEnabled = document.getElementById("edit-schedule-enabled").checked;
|
||||
let schedule = null;
|
||||
|
||||
if (scheduleEnabled) {
|
||||
const mode = document.getElementById("edit-schedule-mode").value;
|
||||
const start = document.getElementById("edit-schedule-start").value;
|
||||
const end = document.getElementById("edit-schedule-end").value;
|
||||
|
||||
if (!start || !end) {
|
||||
errorEl.textContent = "Start- und Endzeit müssen angegeben werden";
|
||||
errorEl.style.display = "block";
|
||||
return;
|
||||
}
|
||||
|
||||
schedule = {
|
||||
mode: mode,
|
||||
start: start,
|
||||
end: end
|
||||
};
|
||||
|
||||
if (mode === "weekly") {
|
||||
const days = [];
|
||||
if (document.getElementById("edit-mon").checked) days.push("0");
|
||||
if (document.getElementById("edit-tue").checked) days.push("1");
|
||||
if (document.getElementById("edit-wed").checked) days.push("2");
|
||||
if (document.getElementById("edit-thu").checked) days.push("3");
|
||||
if (document.getElementById("edit-fri").checked) days.push("4");
|
||||
if (document.getElementById("edit-sat").checked) days.push("5");
|
||||
if (document.getElementById("edit-sun").checked) days.push("6");
|
||||
schedule.days = days;
|
||||
}
|
||||
}
|
||||
|
||||
fetch("/admin/" + editState.site + "/update-playlist-item/" + editState.screen, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
@@ -632,7 +789,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
old_name: editState.oldName,
|
||||
new_url: newUrl,
|
||||
zoom: zoom,
|
||||
passthrough: document.getElementById("edit-passthrough-input").checked
|
||||
passthrough: document.getElementById("edit-passthrough-input").checked,
|
||||
schedule: schedule
|
||||
})
|
||||
}).then(function (r) {
|
||||
if (r.ok) {
|
||||
@@ -652,7 +810,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Modal: URL bearbeiten -->
|
||||
<!-- Modal: URL bearbeiten -->
|
||||
<div class="modal fade" id="edit-url-modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
@@ -673,6 +831,75 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
<input type="checkbox" class="form-check-input" id="edit-passthrough-input">
|
||||
<label class="form-check-label" for="edit-passthrough-input">Query-Parameter an diese URL übergeben</label>
|
||||
</div>
|
||||
|
||||
<!-- Zeitsteuerung -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="edit-schedule-enabled">
|
||||
<label class="form-check-label" for="edit-schedule-enabled">
|
||||
Zeitgesteuerte Wiedergabe
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" id="edit-schedule-options" style="display: none;">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Wiederholung</label>
|
||||
<select class="form-select" id="edit-schedule-mode">
|
||||
<option value="once">Einmalig</option>
|
||||
<option value="daily">Täglich</option>
|
||||
<option value="weekly">Wöchentlich</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label class="form-label">Start</label>
|
||||
<input type="datetime-local" class="form-control" id="edit-schedule-start">
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Ende</label>
|
||||
<input type="datetime-local" class="form-control" id="edit-schedule-end">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="edit-schedule-days" style="display: none;">
|
||||
<label class="form-label">Wochentage</label>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="0" id="edit-mon">
|
||||
<label class="form-check-label" for="edit-mon">Mo</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="1" id="edit-tue">
|
||||
<label class="form-check-label" for="edit-tue">Di</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="2" id="edit-wed">
|
||||
<label class="form-check-label" for="edit-wed">Mi</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="3" id="edit-thu">
|
||||
<label class="form-check-label" for="edit-thu">Do</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="4" id="edit-fri">
|
||||
<label class="form-check-label" for="edit-fri">Fr</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="5" id="edit-sat">
|
||||
<label class="form-check-label" for="edit-sat">Sa</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="6" id="edit-sun">
|
||||
<label class="form-check-label" for="edit-sun">So</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger py-2" id="edit-url-error" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
Reference in New Issue
Block a user