Fix #139: Auto-Reload-Button durch iOS-artigen Toggle-Switch ersetzt

Changes.md

@@ -2,6 +2,12 @@
 
 ---
 
+## 2026-07-27 – Fix: Auto-Reload-Button der Ereignisanzeige durch iOS-artigen Toggle-Switch ersetzt (Issue #139)
+
+- Rückmeldung zu #139: Der Text-Button „Auto-Reload: An/Aus" war nicht intuitiv genug.
+- **`src/Views/ereignisse/nextcloud_import.php`:** Button durch einen runden Schiebeschalter (Checkbox + CSS, keine externe Bibliothek) ersetzt – links/grau = aus, rechts/grün = ein. Verhalten (Polling, `localStorage`-Persistenz) unverändert.
+- **`tests/58_EreignisAutoReloadTest.php`:** Test an die neue Toggle-Switch-Struktur (Checkbox statt Button, `change`- statt `click`-Event) angepasst.
+
 ## 2026-07-26 – Feature: Dritte Eingabezeile ohne USt. in der Essensbeleg-Buchungsvorlage (Issue #140)
 
 - Die Buchungsvorlage „Essensbeleg n. abzugsfähig (nur USt.)" hatte nur Eingabezeilen für 7 % und 19 % USt. – Beträge ohne USt. (z. B. Trinkgeld) ließen sich damit nicht erfassen.

src/Views/ereignisse/nextcloud_import.php

@@ -1,9 +1,28 @@
+<style>
+    .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
+    .switch input { opacity: 0; width: 0; height: 0; }
+    .switch .switch-track {
+        position: absolute; inset: 0; cursor: pointer;
+        background: var(--color-muted, #94a3b8); border-radius: 999px;
+        transition: background .15s ease;
+    }
+    .switch .switch-track::before {
+        content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
+        background: #fff; border-radius: 50%; transition: transform .15s ease;
+    }
+    .switch input:checked + .switch-track { background: var(--color-success); }
+    .switch input:checked + .switch-track::before { transform: translateX(18px); }
+</style>
+
 <div class="card">
     <div style="display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--color-border)">
         <strong>Nextcloud-Import</strong>
         <div style="display:flex;align-items:center;gap:.75rem">
             <span id="events-count" class="text-muted text-sm"><?= count($events) ?> Einträge (neueste zuerst)</span>
-            <button type="button" id="events-autoreload-toggle" class="btn btn-sm btn-secondary"></button>
+            <label class="switch" title="Automatische Aktualisierung">
+                <input type="checkbox" id="events-autoreload-toggle">
+                <span class="switch-track"></span>
+            </label>
         </div>
     </div>
     <div id="events-body">
@@ -26,10 +45,7 @@
     }
 
     function renderToggle() {
-        var on = isEnabled();
+        toggle.checked = isEnabled();
-        toggle.textContent = on ? 'Auto-Reload: An' : 'Auto-Reload: Aus';
-        toggle.classList.toggle('btn-success', on);
-        toggle.classList.toggle('btn-secondary', !on);
     }
 
     function poll() {
@@ -57,9 +73,8 @@
         }
     }
 
-    toggle.addEventListener('click', function () {
+    toggle.addEventListener('change', function () {
-        localStorage.setItem(STORAGE_KEY, isEnabled() ? 'off' : 'on');
+        localStorage.setItem(STORAGE_KEY, toggle.checked ? 'on' : 'off');
-        renderToggle();
         if (isEnabled()) {
             poll();
             start();

tests/58_EreignisAutoReloadTest.php

@@ -35,8 +35,13 @@ class EreignisAutoReloadTest extends TestCase
         );
 
         $this->assert(
-            str_contains($view, "toggle.addEventListener('click'"),
+            str_contains($view, "toggle.addEventListener('change'"),
-            'Button schaltet Auto-Reload per Klick ein/aus'
+            'Toggle-Switch schaltet Auto-Reload per Umlegen ein/aus'
+        );
+
+        $this->assert(
+            str_contains($view, 'class="switch"') && str_contains($view, 'type="checkbox"'),
+            'Auto-Reload wird als iOS-artiger Toggle-Switch (Checkbox) dargestellt'
         );
 
         // Partial für Tabellen-Body existiert und wird sowohl beim initialen