Entwicklung/xxx-sphere-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfixes im Dating und im Profil
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Mario Störmer
2026-04-04 15:45:55 +02:00
parent d386f5a7a9
commit b81ad25c9f
427 changed files with 4796 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
bin/main/static/konto/einstellungen.html
View File

@@ -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) {

27
bin/main/static/konto/profile.html
View File

@@ -367,6 +367,24 @@
<button class="full-width" id="saveBtn" onclick="saveProfile()">Profil speichern</button>
<div id="datingInfoSection" style="display:none;margin-top:1.5rem;">
<div class="gallery-section-label">Dating</div>
<div style="display:flex;flex-direction:column;gap:0.5rem;background:var(--color-secondary);border-radius:8px;padding:0.85rem 1rem;font-size:0.9rem;">
<div style="display:flex;align-items:center;gap:0.5rem;">
<span style="color:var(--color-muted);min-width:90px;">Wohnort</span>
<span id="datingInfoStadt" style="font-weight:600;">—</span>
</div>
<div style="display:flex;align-items:baseline;gap:0.5rem;">
<span style="color:var(--color-muted);min-width:90px;">Suche nach</span>
<div id="datingInfoGeschlechter" style="display:flex;flex-wrap:wrap;gap:0.35rem;"></div>
</div>
</div>
<a href="/konto/einstellungen.html#sec-dating"
style="display:inline-block;margin-top:0.5rem;font-size:0.8rem;color:var(--color-muted);">
→ Dating-Einstellungen ändern
</a>
</div>
<div class="gallery-section-label" style="margin-top:1.5rem;">Vorlieben</div>
<p class="vorlieben-hint">Wähle für jede Vorliebe aus, wie du dazu stehst. Nicht ausgefüllte Einträge werden nicht angezeigt.</p>
<div id="vorliebenSection"><p style="color:var(--color-muted);font-size:0.85rem;">Wird geladen…</p></div>
@@ -422,6 +440,15 @@
updateCharCount();
}
myUserId = user.userId;
if (user.datingAktiv) {
document.getElementById('datingInfoSection').style.display = '';
document.getElementById('datingInfoStadt').textContent = user.datingStadt || '—';
const g = user.datingGeschlechter || [];
const labels = { WEIBLICH: '♀ weiblich', MAENNLICH: '♂ männlich', DIVERS: '⚧ divers' };
document.getElementById('datingInfoGeschlechter').innerHTML = g.length
? g.map(v => `<span style="padding:0.15rem 0.55rem;border-radius:20px;background:var(--color-card);font-size:0.8rem;">${labels[v] || v}</span>`).join('')
: '<span style="color:var(--color-muted);">—</span>';
}
loadOwnGallery();
loadVorliebenEdit();
})