From f1c36f3c99172a19a6372b3c64874e51c0405ed7 Mon Sep 17 00:00:00 2001
From: Erik Thiele <erik.thiele@cancom.de>
Date: Fri, 10 Jul 2026 16:34:16 +0200
Subject: [PATCH] Switch to event delegation for edit button (robuster) +
 btn-outline-secondary

---
 templates/admin.html    | 30 ++++++++++++++++++------------
 templates/priority.html | 32 +++++++++++++++++++-------------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/templates/admin.html b/templates/admin.html
index f5e6035..119e2f6 100755
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -274,11 +274,13 @@
                   <!-- Bearbeiten (nur URLs) -->
                   {% if file.type == "url" %}
                   <button type="button"
-                          class="btn btn-ghost-secondary btn-sm edit-url-btn"
+                          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) }}"
-                          onclick="editPlaylistItem('{{ current_site }}', '{{ screen }}', this.dataset.name, this.dataset.zoom)">
+                          data-site="{{ current_site }}"
+                          data-screen="{{ screen }}"
+                          data-oldname="{{ file.name | e }}">
                     Edit
                   </button>
                   {% endif %}
@@ -592,16 +594,6 @@ document.addEventListener("DOMContentLoaded", function () {
 /* ─── Playlist-Item bearbeiten (URL + Zoom) ─── */
 var editState = { site: "", screen: "", oldName: "" };
 
-function editPlaylistItem(site, screen, oldName, zoom) {
-  editState.site = site;
-  editState.screen = screen;
-  editState.oldName = oldName;
-  document.getElementById("edit-url-input").value = oldName;
-  document.getElementById("edit-zoom-input").value = zoom;
-  document.getElementById("edit-url-error").style.display = "none";
-  new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
-}
-
 document.addEventListener("DOMContentLoaded", function () {
 
   /* ─── SortableJS Drag & Drop initialisieren ─── */
@@ -655,6 +647,20 @@ document.addEventListener("DOMContentLoaded", function () {
     return new bootstrap.Tooltip(tooltipTriggerEl);
   });
 
+  /* ─── Edit-URL-Button: Modal öffnen (Event-Delegation) ─── */
+  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-url-error").style.display = "none";
+    new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
+  });
+
   /* ─── Edit-URL-Modal: Speichern-Button ─── */
   document.getElementById("edit-url-save").addEventListener("click", function () {
     const newUrl = document.getElementById("edit-url-input").value.trim();
diff --git a/templates/priority.html b/templates/priority.html
index 86c8816..cd50b0e 100644
--- a/templates/priority.html
+++ b/templates/priority.html
@@ -174,11 +174,13 @@
               <!-- Bearbeiten (nur URLs) -->
               {% if file.type == "url" %}
               <button type="button"
-                      class="btn btn-ghost-secondary btn-sm edit-url-btn"
+                      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) }}"
-                      onclick="editPlaylistItem('{{ current_site }}', 'priority', this.dataset.name, this.dataset.zoom)">
+                      data-site="{{ current_site }}"
+                      data-screen="priority"
+                      data-oldname="{{ file.name | e }}">
                 Edit
               </button>
               {% endif %}
@@ -296,6 +298,20 @@ document.addEventListener("DOMContentLoaded", function () {
     return new bootstrap.Tooltip(tooltipTriggerEl);
   });
 
+  /* ─── Edit-URL-Button: Modal öffnen (Event-Delegation) ─── */
+  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-url-error").style.display = "none";
+    new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
+  });
+
   /* ─── Edit-URL-Modal: Speichern-Button ─── */
   document.getElementById("edit-url-save").addEventListener("click", function () {
     const newUrl = document.getElementById("edit-url-input").value.trim();
@@ -335,18 +351,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
 });
 
-/* ─── Global: editState + editPlaylistItem ─── */
+/* ─── Global: editState ─── */
 var editState = { site: "", screen: "", oldName: "" };
-
-function editPlaylistItem(site, screen, oldName, zoom) {
-  editState.site = site;
-  editState.screen = screen;
-  editState.oldName = oldName;
-  document.getElementById("edit-url-input").value = oldName;
-  document.getElementById("edit-zoom-input").value = zoom;
-  document.getElementById("edit-url-error").style.display = "none";
-  new bootstrap.Modal(document.getElementById("edit-url-modal")).show();
-}
 </script>
 
 <!-- Modal: URL bearbeiten -->