Bugfixes im Dating und im Profil

bin/main/static/konto/einstellungen.html

@@ -512,6 +512,38 @@
                             </label>
                         </div>
                     </div>
+                    <div class="settings-row" style="flex-direction:column;align-items:flex-start;gap:0.5rem;">
+                        <div class="settings-row-info">
+                            <div class="settings-row-label">Standard-Umkreis</div>
+                            <div class="settings-row-desc">Maximale Entfernung als Standardwert im Dating-Filter.</div>
+                        </div>
+                        <div style="width:100%;max-width:320px;">
+                            <div style="display:flex;justify-content:space-between;font-size:0.82rem;color:var(--color-muted);margin-bottom:0.25rem;">
+                                <span>Umkreis</span><span id="datingDistValDisplay" style="color:var(--color-text);">50 km</span>
+                            </div>
+                            <input type="range" id="datingMaxDistanz" min="5" max="500" value="50" step="5"
+                                   style="width:100%;accent-color:var(--color-primary);padding:0;background:none;border:none;"
+                                   oninput="document.getElementById('datingDistValDisplay').textContent=this.value+' km'">
+                        </div>
+                    </div>
+                    <div class="settings-row" style="flex-direction:column;align-items:flex-start;gap:0.5rem;">
+                        <div class="settings-row-info">
+                            <div class="settings-row-label">Standard-Altersbereich</div>
+                            <div class="settings-row-desc">Gesuchter Altersbereich als Standardwert im Dating-Filter.</div>
+                        </div>
+                        <div style="width:100%;max-width:320px;">
+                            <div style="display:flex;justify-content:space-between;font-size:0.82rem;color:var(--color-muted);margin-bottom:0.25rem;">
+                                <span>Alter</span><span id="datingAgeValDisplay" style="color:var(--color-text);">18 – 60</span>
+                            </div>
+                            <div style="position:relative;height:20px;margin:0.25rem 0;" id="datingAgeSlider">
+                                <div style="position:absolute;top:50%;left:0;right:0;height:4px;background:var(--color-secondary);border-radius:2px;transform:translateY(-50%);">
+                                    <div id="datingAgeRange" style="position:absolute;top:0;height:100%;background:var(--color-primary);border-radius:2px;"></div>
+                                </div>
+                                <div id="datingThumbMin" tabindex="0" style="position:absolute;top:50%;width:18px;height:18px;background:var(--color-primary);border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,0.4);touch-action:none;"></div>
+                                <div id="datingThumbMax" tabindex="0" style="position:absolute;top:50%;width:18px;height:18px;background:var(--color-primary);border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,0.4);touch-action:none;"></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div id="datingStadtRow" style="display:none;">
                     <div class="settings-row" style="flex-wrap:wrap;gap:0.5rem;">
@@ -774,6 +806,20 @@
     </div>
 </div>
 
+<!-- Dating-Alter-Hinweis Modal -->
+<div class="modal-backdrop" id="datingAlterModal">
+    <div class="modal" style="max-width:360px;text-align:center;">
+        <h2>Geburtsdatum erforderlich</h2>
+        <p style="font-size:0.9rem;color:var(--color-muted);margin:0.5rem 0 1rem;">
+            Um Dating zu aktivieren, musst du zuerst dein Geburtsdatum hinterlegen.
+        </p>
+        <div class="modal-actions">
+            <button class="secondary" onclick="closeDatingAlterModal()">Abbrechen</button>
+            <button onclick="closeDatingAlterModal(); openGeburtsdatumDialog();">Jetzt eintragen</button>
+        </div>
+    </div>
+</div>
+
 <!-- Geburtsdatum Modal -->
 <div class="modal-backdrop" id="geburtsdatumModal">
     <div class="modal">
@@ -1035,7 +1081,7 @@
     }
 
     // Modal-Backdrop-Klick schließt Modals
-    ['nameModal','geburtsdatumModal','emailModal','deleteModal'].forEach(id => {
+    ['nameModal','geburtsdatumModal','emailModal','deleteModal','datingAlterModal'].forEach(id => {
         document.getElementById(id).addEventListener('click', e => {
             if (e.target === document.getElementById(id)) document.getElementById(id).classList.remove('visible');
         });
@@ -1213,10 +1259,13 @@
 
     // ── Dating ──────────────────────────────────────────────────────────────
 
+    let _myAge = null;
+
     async function loadDating() {
         const res = await fetch('/login/me');
         if (!res.ok) return;
         const user = await res.json();
+        if (user.alter != null) _myAge = user.alter;
         document.getElementById('datingAktiv').checked = !!user.datingAktiv;
         if (user.datingStadt) {
             const input = document.getElementById('datingStadt');
@@ -1233,12 +1282,119 @@
         document.getElementById('sucheWeiblich').checked  = aktiveGeschlechter.includes('WEIBLICH');
         document.getElementById('sucheMaennlich').checked = aktiveGeschlechter.includes('MAENNLICH');
         document.getElementById('sucheDivers').checked    = aktiveGeschlechter.includes('DIVERS');
+
+        if (user.datingMaxDistanzKm != null) {
+            document.getElementById('datingMaxDistanz').value = user.datingMaxDistanzKm;
+            document.getElementById('datingDistValDisplay').textContent = user.datingMaxDistanzKm + ' km';
+        }
+        if (user.datingMinAlter != null) _datingAgeFrom = user.datingMinAlter;
+        if (user.datingMaxAlter != null) _datingAgeTo   = user.datingMaxAlter;
+        updateDatingAgeSlider();
+    }
+
+    // ── Dating-Alters-Slider ──
+    const _DATING_AGE_MIN = 18, _DATING_AGE_MAX = 99;
+    let _datingAgeFrom = 18, _datingAgeTo = 60;
+
+    function _datingAgePct(v) { return (v - _DATING_AGE_MIN) / (_DATING_AGE_MAX - _DATING_AGE_MIN) * 100; }
+
+    function updateDatingAgeSlider() {
+        const lo = _datingAgePct(_datingAgeFrom), hi = _datingAgePct(_datingAgeTo);
+        document.getElementById('datingThumbMin').style.left = lo + '%';
+        document.getElementById('datingThumbMax').style.left = hi + '%';
+        document.getElementById('datingAgeRange').style.left  = lo + '%';
+        document.getElementById('datingAgeRange').style.width = (hi - lo) + '%';
+        document.getElementById('datingAgeValDisplay').textContent = _datingAgeFrom + ' – ' + _datingAgeTo;
+    }
+
+    (function initDatingAgeSlider() {
+        const slider = document.getElementById('datingAgeSlider');
+        function makeThumb(thumbId, isMin) {
+            const thumb = document.getElementById(thumbId);
+            function onMove(clientX) {
+                const rect  = slider.getBoundingClientRect();
+                const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+                const raw   = _DATING_AGE_MIN + Math.round(ratio * (_DATING_AGE_MAX - _DATING_AGE_MIN));
+                if (isMin) _datingAgeFrom = Math.min(raw, _datingAgeTo - 1);
+                else       _datingAgeTo   = Math.max(raw, _datingAgeFrom + 1);
+                updateDatingAgeSlider();
+            }
+            thumb.addEventListener('mousedown', e => {
+                e.preventDefault();
+                const move = ev => onMove(ev.clientX);
+                const up   = () => { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', up); };
+                document.addEventListener('mousemove', move);
+                document.addEventListener('mouseup', up);
+            });
+            thumb.addEventListener('touchstart', e => {
+                e.preventDefault();
+                const move = ev => onMove(ev.touches[0].clientX);
+                const end  = () => { document.removeEventListener('touchmove', move); document.removeEventListener('touchend', end); };
+                document.addEventListener('touchmove', move, { passive: false });
+                document.addEventListener('touchend', end);
+            }, { passive: false });
+            thumb.addEventListener('keydown', e => {
+                if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+                    if (isMin) _datingAgeFrom = Math.max(_DATING_AGE_MIN, _datingAgeFrom - 1);
+                    else       _datingAgeTo   = Math.max(_datingAgeFrom + 1, _datingAgeTo - 1);
+                    updateDatingAgeSlider(); e.preventDefault();
+                } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+                    if (isMin) _datingAgeFrom = Math.min(_datingAgeTo - 1, _datingAgeFrom + 1);
+                    else       _datingAgeTo   = Math.min(_DATING_AGE_MAX, _datingAgeTo + 1);
+                    updateDatingAgeSlider(); e.preventDefault();
+                }
+            });
+        }
+        makeThumb('datingThumbMin', true);
+        makeThumb('datingThumbMax', false);
+        updateDatingAgeSlider();
+    })();
+
+    function closeDatingAlterModal() {
+        document.getElementById('datingAlterModal').classList.remove('visible');
     }
 
     function onDatingToggle() {
-        const show = document.getElementById('datingAktiv').checked ? '' : 'none';
-        document.getElementById('datingStadtRow').style.display = show;
-        document.getElementById('datingSucheRow').style.display = show;
+        const aktiv = document.getElementById('datingAktiv').checked;
+
+        if (aktiv && _myAge == null) {
+            document.getElementById('datingAktiv').checked = false;
+            document.getElementById('datingAlterModal').classList.add('visible');
+            return;
+        }
+
+        document.getElementById('datingStadtRow').style.display  = aktiv ? '' : 'none';
+        document.getElementById('datingSucheRow').style.display  = aktiv ? '' : 'none';
+
+        if (!aktiv) {
+            // Alle Felder zurücksetzen
+            const stadtInput = document.getElementById('datingStadt');
+            stadtInput.value    = '';
+            stadtInput.readOnly = false;
+            document.getElementById('datingStadtClear').style.display = 'none';
+            _datingLat = null;
+            _datingLon = null;
+            document.getElementById('sucheWeiblich').checked  = false;
+            document.getElementById('sucheMaennlich').checked = false;
+            document.getElementById('sucheDivers').checked    = false;
+            document.getElementById('datingMaxDistanz').value = 50;
+            document.getElementById('datingDistValDisplay').textContent = '50 km';
+            _datingAgeFrom = 18;
+            _datingAgeTo   = 60;
+            updateDatingAgeSlider();
+        } else {
+            // Standardwerte setzen
+            document.getElementById('datingMaxDistanz').value = 50;
+            document.getElementById('datingDistValDisplay').textContent = '50 km';
+            if (_myAge != null) {
+                _datingAgeFrom = Math.max(18, _myAge - 10);
+                _datingAgeTo   = _myAge + 10;
+            } else {
+                _datingAgeFrom = 18;
+                _datingAgeTo   = 60;
+            }
+            updateDatingAgeSlider();
+        }
     }
 
     let _stadtSuggestTimer = null;
@@ -1338,6 +1494,13 @@
             msgEl.style.color = 'var(--color-primary)';
             return;
         }
+        const geschlechter = ['sucheWeiblich','sucheMaennlich','sucheDivers']
+            .filter(id => document.getElementById(id).checked);
+        if (aktiv && geschlechter.length === 0) {
+            msgEl.textContent = 'Bitte mindestens ein Geschlecht auswählen.';
+            msgEl.style.color = 'var(--color-primary)';
+            return;
+        }
         const btn = document.getElementById('saveDatingBtn');
         btn.disabled = true;
         try {
@@ -1349,9 +1512,10 @@
                     datingStadt: stadt || null,
                     datingLat: _datingLat,
                     datingLon: _datingLon,
-                    datingGeschlechter: ['sucheWeiblich','sucheMaennlich','sucheDivers']
-                        .filter(id => document.getElementById(id).checked)
-                        .map(id => document.getElementById(id).value)
+                    datingGeschlechter: geschlechter.map(id => document.getElementById(id).value),
+                    datingMaxDistanzKm: parseInt(document.getElementById('datingMaxDistanz').value),
+                    datingMinAlter: _datingAgeFrom,
+                    datingMaxAlter: _datingAgeTo
                 })
             });
             if (res.ok) {