Fix: Standort-Fehlermeldung schliessbar, manuelle Standorteingabe
Behebt Gitea Issue #1 "Eigenen Standort verwenden" (zwei Teilprobleme): 1. Die Fehlermeldung bei fehlgeschlagener Geolocation-Abfrage (#app-status) liess sich bisher nicht schliessen und blockierte dauerhaft die UI. Neuer Schliessen-Button (#app-status-close), unabhaengig vom restlichen Bootstrap-Ablauf verdrahtet, damit er auch bei einem fruehen Init-Fehler funktioniert. 2. Es gab keine Moeglichkeit, den Standort manuell zu setzen, wenn die Browser-Geolocation fehlschlaegt oder nicht verfuegbar ist. Neues Modal (js/ui/manualLocation.js) mit Breiten-/Laengengrad-Eingabe, Validierung (aria-invalid/Inline-Fehler analog zum Ausflugsziel-Formular), setzt bei gueltiger Eingabe state.userLocation direkt - Karte, Liste und Entfernungsfilter reagieren automatisch darauf.
This commit is contained in:
+43
-3
@@ -3,15 +3,42 @@
|
||||
(function () {
|
||||
const { initStore } = EventMap.store;
|
||||
const { initMap, centerOnCoords, requestUserLocation } = EventMap.map;
|
||||
const { initList, initDetail, initForm, initFilterPanel, initPromptGenerator } = EventMap.ui;
|
||||
const {
|
||||
initList,
|
||||
initDetail,
|
||||
initForm,
|
||||
initManualLocationForm,
|
||||
initFilterPanel,
|
||||
initPromptGenerator,
|
||||
} = EventMap.ui;
|
||||
|
||||
function showFatalError(message) {
|
||||
const status = document.getElementById('app-status');
|
||||
if (!status) return;
|
||||
status.textContent = message;
|
||||
const statusText = document.getElementById('app-status-text');
|
||||
if (!status || !statusText) return;
|
||||
statusText.textContent = message;
|
||||
status.hidden = false;
|
||||
}
|
||||
|
||||
function hideStatus() {
|
||||
const status = document.getElementById('app-status');
|
||||
const statusText = document.getElementById('app-status-text');
|
||||
if (!status || !statusText) return;
|
||||
status.hidden = true;
|
||||
statusText.textContent = '';
|
||||
}
|
||||
|
||||
// Verdrahtet den Schließen-Button der Statusmeldung unabhängig vom
|
||||
// restlichen Bootstrap-Ablauf, damit er auch dann funktioniert, wenn
|
||||
// bootstrap() selbst fehlschlägt und showFatalError() aus dem
|
||||
// catch-Handler heraus aufgerufen wird (siehe Gitea Issue #1: die
|
||||
// Fehlermeldung war bisher dauerhaft nicht schließbar).
|
||||
function setupStatusClose() {
|
||||
const closeBtn = document.getElementById('app-status-close');
|
||||
if (!closeBtn) return;
|
||||
closeBtn.addEventListener('click', hideStatus);
|
||||
}
|
||||
|
||||
function setupGeolocationButton() {
|
||||
const button = document.getElementById('locate-btn');
|
||||
if (!button) return;
|
||||
@@ -39,6 +66,15 @@
|
||||
});
|
||||
}
|
||||
|
||||
function setupManualLocationButton() {
|
||||
const button = document.getElementById('manual-location-btn');
|
||||
if (!button) return;
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
EventMap.ui.openManualLocationForm();
|
||||
});
|
||||
}
|
||||
|
||||
function setupAddPlaceButton() {
|
||||
const button = document.getElementById('add-place-btn');
|
||||
if (!button) return;
|
||||
@@ -64,12 +100,16 @@
|
||||
initList('place-list');
|
||||
initDetail('detail-modal');
|
||||
initForm('place-form-modal');
|
||||
initManualLocationForm('manual-location-modal');
|
||||
initPromptGenerator('prompt-generator-modal');
|
||||
setupGeolocationButton();
|
||||
setupManualLocationButton();
|
||||
setupAddPlaceButton();
|
||||
setupPromptGeneratorButton();
|
||||
}
|
||||
|
||||
setupStatusClose();
|
||||
|
||||
bootstrap().catch((err) => {
|
||||
console.error('EventMap: Initialisierung fehlgeschlagen.', err);
|
||||
showFatalError('Die Anwendung konnte nicht geladen werden. Bitte Seite neu laden.');
|
||||
|
||||
@@ -0,0 +1,271 @@
|
||||
// Modal zur manuellen Eingabe des Nutzerstandorts (Bugfix, Gitea Issue #1
|
||||
// "Eigenen Standort verwenden"): Bislang gab es keine Möglichkeit,
|
||||
// state.userLocation zu setzen, wenn die Browser-Geolocation fehlschlägt
|
||||
// oder gar nicht verfügbar ist (fehlende Berechtigung, kein HTTPS, Desktop
|
||||
// ohne GPS, ...).
|
||||
//
|
||||
// Aufbau/Muster analog zu js/ui/form.js (Modal mit Backdrop, Escape schließt,
|
||||
// Fokus auf erstes Feld beim Öffnen, Validierung + Inline-Fehlermeldungen
|
||||
// über dieselben .form-field-Klassen aus css/form.css). Rendering
|
||||
// ausschließlich über textContent/DOM-APIs (el()), niemals innerHTML.
|
||||
//
|
||||
// API: EventMap.ui.initManualLocationForm(containerId) initialisiert das
|
||||
// Modal einmalig. EventMap.ui.openManualLocationForm() öffnet es, vorbefüllt
|
||||
// mit dem aktuellen state.userLocation (falls vorhanden).
|
||||
|
||||
(function () {
|
||||
const { getState, setState, updateSettings } = EventMap.store;
|
||||
const { el, isValidCoordinate } = EventMap.utils;
|
||||
const { centerOnCoords } = EventMap.map;
|
||||
|
||||
const ERROR_FIELDS = ['latitude', 'longitude'];
|
||||
|
||||
let container = null;
|
||||
let refs = null;
|
||||
|
||||
function fieldWrapper(id, labelText, inputNode, { required = false } = {}) {
|
||||
inputNode.id = id;
|
||||
if (required) {
|
||||
inputNode.setAttribute('required', '');
|
||||
inputNode.setAttribute('aria-required', 'true');
|
||||
}
|
||||
|
||||
const errorEl = el('p', {
|
||||
className: 'form-field__error',
|
||||
attrs: { id: `${id}-error`, role: 'alert' },
|
||||
});
|
||||
errorEl.hidden = true;
|
||||
inputNode.setAttribute('aria-describedby', `${id}-error`);
|
||||
|
||||
const labelChildren = [labelText];
|
||||
if (required) {
|
||||
labelChildren.push(
|
||||
el('span', { className: 'form-field__required', attrs: { 'aria-hidden': 'true' } }, [' *'])
|
||||
);
|
||||
}
|
||||
|
||||
const wrapper = el('div', { className: 'form-field' }, [
|
||||
el('label', { className: 'form-field__label', attrs: { for: id } }, labelChildren),
|
||||
inputNode,
|
||||
errorEl,
|
||||
]);
|
||||
|
||||
return { wrapper, input: inputNode, errorEl };
|
||||
}
|
||||
|
||||
function buildSkeleton(rootContainer) {
|
||||
const nodeRefs = {};
|
||||
|
||||
nodeRefs.backdrop = el('div', {
|
||||
className: 'manual-location-modal__backdrop',
|
||||
on: { click: () => closeManualLocationForm() },
|
||||
});
|
||||
|
||||
nodeRefs.closeBtn = el(
|
||||
'button',
|
||||
{
|
||||
className: 'manual-location-modal__close',
|
||||
attrs: { type: 'button', 'aria-label': 'Formular schließen' },
|
||||
on: { click: () => closeManualLocationForm() },
|
||||
},
|
||||
['✕']
|
||||
);
|
||||
|
||||
nodeRefs.title = el('h2', {
|
||||
className: 'manual-location-form__title',
|
||||
attrs: { id: 'manual-location-title' },
|
||||
text: 'Standort manuell eingeben',
|
||||
});
|
||||
|
||||
nodeRefs.intro = el('p', {
|
||||
className: 'manual-location-form__intro',
|
||||
text:
|
||||
'Falls dein Browser den Standort nicht ermitteln kann oder du die Freigabe nicht ' +
|
||||
'erteilen möchtest, gib hier Breiten- und Längengrad direkt ein.',
|
||||
});
|
||||
|
||||
const latitudeField = fieldWrapper(
|
||||
'ml-latitude',
|
||||
'Breitengrad',
|
||||
el('input', { attrs: { type: 'number', step: 'any', min: '-90', max: '90', placeholder: 'z.B. 48.1374' } }),
|
||||
{ required: true }
|
||||
);
|
||||
const longitudeField = fieldWrapper(
|
||||
'ml-longitude',
|
||||
'Längengrad',
|
||||
el('input', { attrs: { type: 'number', step: 'any', min: '-180', max: '180', placeholder: 'z.B. 11.5755' } }),
|
||||
{ required: true }
|
||||
);
|
||||
|
||||
nodeRefs.cancelBtn = el(
|
||||
'button',
|
||||
{ className: 'btn btn--secondary', attrs: { type: 'button' }, on: { click: () => closeManualLocationForm() } },
|
||||
['Abbrechen']
|
||||
);
|
||||
nodeRefs.submitBtn = el(
|
||||
'button',
|
||||
{ className: 'btn btn--primary', attrs: { type: 'submit' } },
|
||||
['Übernehmen']
|
||||
);
|
||||
|
||||
nodeRefs.form = el(
|
||||
'form',
|
||||
{
|
||||
className: 'manual-location-form',
|
||||
attrs: { id: 'manual-location-form', novalidate: '' },
|
||||
on: { submit: handleSubmit },
|
||||
},
|
||||
[
|
||||
latitudeField.wrapper,
|
||||
longitudeField.wrapper,
|
||||
el('div', { className: 'manual-location-form__actions' }, [nodeRefs.cancelBtn, nodeRefs.submitBtn]),
|
||||
]
|
||||
);
|
||||
|
||||
nodeRefs.panel = el(
|
||||
'div',
|
||||
{
|
||||
className: 'manual-location-modal__panel',
|
||||
attrs: { role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'manual-location-title' },
|
||||
},
|
||||
[nodeRefs.closeBtn, nodeRefs.title, nodeRefs.intro, nodeRefs.form]
|
||||
);
|
||||
|
||||
rootContainer.appendChild(nodeRefs.backdrop);
|
||||
rootContainer.appendChild(nodeRefs.panel);
|
||||
|
||||
nodeRefs.latitude = latitudeField.input;
|
||||
nodeRefs.latitudeError = latitudeField.errorEl;
|
||||
nodeRefs.longitude = longitudeField.input;
|
||||
nodeRefs.longitudeError = longitudeField.errorEl;
|
||||
|
||||
return nodeRefs;
|
||||
}
|
||||
|
||||
function parseNumber(raw) {
|
||||
const trimmed = (raw || '').trim();
|
||||
if (trimmed === '') return null;
|
||||
const num = Number(trimmed);
|
||||
return Number.isFinite(num) ? num : NaN;
|
||||
}
|
||||
|
||||
/** Validiert die gelesenen Koordinaten. Gibt ein Objekt {feldname: Fehlermeldung} zurück. */
|
||||
function validate(lat, lng) {
|
||||
const errors = {};
|
||||
|
||||
if (lat === null) {
|
||||
errors.latitude = 'Bitte einen Breitengrad angeben.';
|
||||
} else if (Number.isNaN(lat) || lat < -90 || lat > 90) {
|
||||
errors.latitude = 'Breitengrad muss eine Zahl zwischen -90 und 90 sein.';
|
||||
}
|
||||
|
||||
if (lng === null) {
|
||||
errors.longitude = 'Bitte einen Längengrad angeben.';
|
||||
} else if (Number.isNaN(lng) || lng < -180 || lng > 180) {
|
||||
errors.longitude = 'Längengrad muss eine Zahl zwischen -180 und 180 sein.';
|
||||
}
|
||||
|
||||
if (!errors.latitude && !errors.longitude && !isValidCoordinate(lat, lng)) {
|
||||
errors.latitude = 'Koordinaten sind ungültig.';
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
function clearErrors() {
|
||||
for (const key of ERROR_FIELDS) {
|
||||
const input = refs[key];
|
||||
const errorEl = refs[`${key}Error`];
|
||||
if (!input || !errorEl) continue;
|
||||
input.removeAttribute('aria-invalid');
|
||||
errorEl.textContent = '';
|
||||
errorEl.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
function showErrors(errors) {
|
||||
clearErrors();
|
||||
for (const [key, message] of Object.entries(errors)) {
|
||||
const input = refs[key];
|
||||
const errorEl = refs[`${key}Error`];
|
||||
if (!input || !errorEl) continue;
|
||||
input.setAttribute('aria-invalid', 'true');
|
||||
errorEl.textContent = message;
|
||||
errorEl.hidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
function focusFirstError(errors) {
|
||||
const firstKey = ERROR_FIELDS.find((key) => errors[key]);
|
||||
if (firstKey && refs[firstKey]) refs[firstKey].focus();
|
||||
}
|
||||
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const lat = parseNumber(refs.latitude.value);
|
||||
const lng = parseNumber(refs.longitude.value);
|
||||
const errors = validate(lat, lng);
|
||||
showErrors(errors);
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
focusFirstError(errors);
|
||||
return;
|
||||
}
|
||||
|
||||
setState({ userLocation: { lat, lng } });
|
||||
updateSettings({ userConsentGeo: true });
|
||||
centerOnCoords(lat, lng, 13);
|
||||
closeManualLocationForm();
|
||||
}
|
||||
|
||||
/** Öffnet das Formular, vorbefüllt mit dem aktuellen Nutzerstandort (falls vorhanden). */
|
||||
function openManualLocationForm() {
|
||||
if (!container || !refs) {
|
||||
console.error(
|
||||
'EventMap: Formular für manuellen Standort wurde noch nicht initialisiert (initManualLocationForm()).'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
clearErrors();
|
||||
refs.form.reset();
|
||||
|
||||
const { userLocation } = getState();
|
||||
if (userLocation) {
|
||||
refs.latitude.value = userLocation.lat;
|
||||
refs.longitude.value = userLocation.lng;
|
||||
}
|
||||
|
||||
container.hidden = false;
|
||||
document.body.classList.add('manual-location-modal-open');
|
||||
refs.latitude.focus();
|
||||
}
|
||||
|
||||
function closeManualLocationForm() {
|
||||
if (!container || container.hidden) return;
|
||||
container.hidden = true;
|
||||
document.body.classList.remove('manual-location-modal-open');
|
||||
}
|
||||
|
||||
/** Initialisiert das Modal im Element mit der übergebenen id. */
|
||||
function initManualLocationForm(containerId) {
|
||||
const containerEl = document.getElementById(containerId);
|
||||
if (!containerEl) {
|
||||
console.error(`EventMap: Container #${containerId} für manuellen Standort nicht gefunden.`);
|
||||
return;
|
||||
}
|
||||
|
||||
container = containerEl;
|
||||
refs = buildSkeleton(container);
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && !container.hidden) {
|
||||
closeManualLocationForm();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
EventMap.ui.initManualLocationForm = initManualLocationForm;
|
||||
EventMap.ui.openManualLocationForm = openManualLocationForm;
|
||||
})();
|
||||
Reference in New Issue
Block a user