From c1f4ec1de716f5a2cdf8cdbc7b102c9da98dd517 Mon Sep 17 00:00:00 2001 From: Gemini Agent Date: Sat, 6 Dec 2025 16:40:58 +0000 Subject: [PATCH] Fix: UI/UX Verbesserungen und Critical Fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add_packing_list.php: Critical Fix für Browser-Freeze (MutationObserver ersetzt). - packing_list_detail.php: Chart-Design optimiert (Kontrast, Rahmen entfernt). - backpacks.php: Button-Farbe angepasst. - README.md: Changelog aktualisiert. --- README.md | 8 +++++--- src/add_packing_list.php | 23 +++++++---------------- src/backpacks.php | 2 +- src/packing_list_detail.php | 4 ++-- 4 files changed, 15 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index f35a263..f7fd944 100644 --- a/README.md +++ b/README.md @@ -168,13 +168,15 @@ Das Projekt basiert auf bewährten Web-Standards: ### 06.12.2025 * **Rucksäcke:** * Neues Feld für Hersteller-Link (Product URL) hinzugefügt. - * "Info"-Button in der Übersicht öffnet den hinterlegten Link. + * "Info"-Button in der Übersicht öffnet den hinterlegten Link (Design angepasst auf Grün). * Fix: Eingabefeld für neue Hersteller erscheint nun zuverlässig. * **Artikel:** * Komfort-Funktion: Auswahl aus den letzten 24 hochgeladenen Bildern beim Erstellen neuer Artikel hinzugefügt. * **Packlisten:** * **Editor:** Filter-Optionen ("Alle Kategorien", "Alle Hersteller") korrigiert und erweitert. - * **Erstellung:** Validierung hinzugefügt, die verhindert, dass ein Rucksack mehrfach zugewiesen wird. + * **Erstellung:** + * Validierung hinzugefügt, die verhindert, dass ein Rucksack mehrfach zugewiesen wird. + * **Critical Fix:** Browser-Freeze durch Endlosschleife bei der Validierung behoben. * **Details:** - * Design-Update: Diagramme verwenden nun Grüntöne passend zum Thema. + * Design-Update: Diagramme verwenden nun kontrastreiche Grüntöne passend zum Thema (ohne weiße Rahmen). * Statistik: Klickbare Trägernamen öffnen ein Modal mit detaillierten Gewichtsstatistiken pro Kategorie. diff --git a/src/add_packing_list.php b/src/add_packing_list.php index c456d6d..a116ef0 100644 --- a/src/add_packing_list.php +++ b/src/add_packing_list.php @@ -239,27 +239,18 @@ document.addEventListener('DOMContentLoaded', function() { } } - // Observe changes. - // The modal script updates the hidden input. We can listen to a custom event or use MutationObserver. - // Or simply listen to clicks on the "Select" buttons in the modal, but the modal logic is separate. - // However, the `render_backpack_modal_script` updates the UI and the hidden input. - // We can attach a MutationObserver to the form to detect value changes or DOM changes in the backpack cards. - - const observer = new MutationObserver(function(mutations) { - validateBackpacks(); - }); - - observer.observe(document.querySelector('.card-body'), { - subtree: true, - attributes: true, // value change might not trigger attribute change in DOM for inputs, but innerHTML changes of cards do - childList: true - }); - // Also listen to participation checkboxes document.querySelectorAll('.participation-check').forEach(chk => { chk.addEventListener('change', validateBackpacks); }); + // Listen for modal close/hide events (bootstrap specific) to re-validate + // Since the backpack selection happens in a modal, validating on modal hide is efficient. + // We use event delegation or attach to body since modals might be dynamically inserted/removed (though here they are static in footer usually) + document.body.addEventListener('hidden.bs.modal', function (event) { + validateBackpacks(); + }); + // Initial check validateBackpacks(); }); diff --git a/src/backpacks.php b/src/backpacks.php index 4e13ee7..be2f0ac 100644 --- a/src/backpacks.php +++ b/src/backpacks.php @@ -126,7 +126,7 @@ while ($row = $result->fetch_assoc()) {
- Info + Info
diff --git a/src/packing_list_detail.php b/src/packing_list_detail.php index ec3653c..cd84124 100644 --- a/src/packing_list_detail.php +++ b/src/packing_list_detail.php @@ -416,12 +416,12 @@ document.addEventListener('DOMContentLoaded', function() { const catCtx = document.getElementById('categoryWeightChart'); if (catCtx) { - new Chart(catCtx, { type: 'doughnut', data: { labels: , datasets: [{ data: , backgroundColor: greenColors, borderWidth: 2, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } }); + new Chart(catCtx, { type: 'doughnut', data: { labels: , datasets: [{ data: , backgroundColor: greenColors, borderWidth: 0, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } }); } const carrierCtx = document.getElementById('carrierWeightChart'); if (carrierCtx) { - new Chart(carrierCtx, { type: 'doughnut', data: { labels: , datasets: [{ data: , backgroundColor: greenColors, borderWidth: 2, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } }); + new Chart(carrierCtx, { type: 'doughnut', data: { labels: , datasets: [{ data: , backgroundColor: greenColors, borderWidth: 0, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } }); } // Collapsible Tree Logic