API, Backend & Frontend

This commit is contained in:
Ichitux
2026-04-01 01:18:21 +02:00
parent 331c04fbef
commit 0fe8ec9bc0
44 changed files with 10060 additions and 0 deletions
@@ -0,0 +1,629 @@
import React, { useState, useEffect, useMemo } from 'react';
import './AdminComponents.css';
/** Distance in metres between two WGS84 points */
function haversineMeters(lat1, lon1, lat2, lon2) {
const R = 6371000;
const toRad = (d) => (d * Math.PI) / 180;
const dLat = toRad(lat2 - lat1);
const dLon = toRad(lon2 - lon1);
const a =
Math.sin(dLat / 2) ** 2 +
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
return 2 * R * Math.asin(Math.sqrt(Math.min(1, a)));
}
const REGION_PRESETS = [
{ id: 'custom', label: 'Custom coordinates', lat: '', lon: '', radio: '' },
{
id: 'rubi',
label: 'Example: Rubí area (1.5 km)',
lat: '41.5631',
lon: '2.0038',
radio: '1500',
},
];
async function geocodeErrorMessage(response) {
const text = await response.text();
let body = {};
try {
body = text ? JSON.parse(text) : {};
} catch {
/* non-JSON */
}
if (typeof body.error === 'string' && body.error.trim()) return body.error;
if (response.status === 401) {
return 'Session expired or not logged in. Sign in again on Admin, then retry.';
}
if (response.status === 404) {
const looksLikeHtml = /<!DOCTYPE|<html[\s>]/i.test(text || '');
if (looksLikeHtml) {
return 'The app could not reach the API (404). Use http://localhost:3000 with both frontend and backend running, or configure your server to proxy /api to the backend.';
}
return 'Geocode service not found. Update the backend and restart it.';
}
return `Lookup failed (HTTP ${response.status}).`;
}
function PharmacyManagement() {
const [pharmacies, setPharmacies] = useState([]);
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
const [showForm, setShowForm] = useState(false);
const [editingPharmacy, setEditingPharmacy] = useState(null);
const [formData, setFormData] = useState({
name: '',
address: '',
phone: '',
latitude: '',
longitude: '',
});
const [cityQuery, setCityQuery] = useState('');
const [cityLookupLoading, setCityLookupLoading] = useState(false);
const [cityLookupMessage, setCityLookupMessage] = useState(null);
const [regionLat, setRegionLat] = useState('41.5631');
const [regionLon, setRegionLon] = useState('2.0038');
const [regionRadio, setRegionRadio] = useState('1500');
const [regionPreset, setRegionPreset] = useState('rubi');
const [filterByRegion, setFilterByRegion] = useState(false);
const [importing, setImporting] = useState(false);
const [importFeedback, setImportFeedback] = useState(null);
/** @type {'webhook' | 'osm' | 'openData'} */
const [importMode, setImportMode] = useState('osm');
const [openDataUrl, setOpenDataUrl] = useState('');
useEffect(() => {
fetchPharmacies();
}, []);
const fetchPharmacies = async () => {
setLoading(true);
try {
const response = await fetch('/api/pharmacies', {
credentials: 'include',
});
const data = await response.json();
setPharmacies(data);
} catch (error) {
console.error('Error fetching pharmacies:', error);
alert('Error loading pharmacies');
} finally {
setLoading(false);
}
};
const applyPreset = (id) => {
setRegionPreset(id);
const p = REGION_PRESETS.find((x) => x.id === id);
if (!p || id === 'custom') return;
setRegionLat(p.lat);
setRegionLon(p.lon);
setRegionRadio(p.radio);
};
const displayedPharmacies = useMemo(() => {
if (!filterByRegion) return pharmacies;
const lat = parseFloat(regionLat);
const lon = parseFloat(regionLon);
const r = parseFloat(regionRadio);
if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(r)) {
return pharmacies;
}
return pharmacies.filter((p) => {
if (p.latitude == null || p.longitude == null) return false;
return haversineMeters(lat, lon, p.latitude, p.longitude) <= r;
});
}, [pharmacies, filterByRegion, regionLat, regionLon, regionRadio]);
const handleCityLookup = async (e) => {
e?.preventDefault();
const q = cityQuery.trim();
if (!q) {
setCityLookupMessage({ type: 'err', text: 'Enter a city or place name.' });
return;
}
setCityLookupLoading(true);
setCityLookupMessage(null);
try {
const response = await fetch(`/api/admin/geocode?q=${encodeURIComponent(q)}`, {
credentials: 'include',
});
if (!response.ok) {
throw new Error(await geocodeErrorMessage(response));
}
const data = await response.json();
setRegionLat(String(data.lat));
setRegionLon(String(data.lon));
setRegionRadio(String(data.radius));
setRegionPreset('custom');
setCityLookupMessage({
type: 'ok',
text: `Using: ${data.displayName} — radius ~${data.radius} m (you can edit below).`,
});
} catch (err) {
setCityLookupMessage({ type: 'err', text: err.message });
} finally {
setCityLookupLoading(false);
}
};
const handlePharmacyImport = async () => {
setImporting(true);
setImportFeedback(null);
try {
if (importMode === 'webhook') {
const body = {};
const lat = parseFloat(regionLat);
const lon = parseFloat(regionLon);
const radio = parseFloat(regionRadio);
if (Number.isFinite(lat) && Number.isFinite(lon) && Number.isFinite(radio)) {
body.lat = lat;
body.lon = lon;
body.radio = radio;
}
const response = await fetch('/api/admin/pharmacies/import-webhook', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(body),
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || `Import failed (${response.status})`);
}
setImportFeedback({
type: 'success',
text: `[n8n] Imported ${data.inserted} new. Skipped ${data.skipped} duplicate(s). ${data.invalid || 0} invalid. ${data.totalReceived} from webhook.`,
});
await fetchPharmacies();
return;
}
if (importMode === 'openData') {
const url = openDataUrl.trim();
if (!url) {
throw new Error('Paste an open-data JSON URL (array or GeoJSON).');
}
const response = await fetch('/api/admin/pharmacies/import-external', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({ source: 'openData', openDataUrl: url }),
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || `Import failed (${response.status})`);
}
const label = data.message || `openData: ${data.totalReceived} rows`;
setImportFeedback({
type: 'success',
text: `${label}. Inserted ${data.inserted}, skipped ${data.skipped}, invalid ${data.invalid || 0}.`,
});
await fetchPharmacies();
return;
}
const lat = parseFloat(regionLat);
const lon = parseFloat(regionLon);
const radio = parseFloat(regionRadio);
if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(radio)) {
throw new Error('Set latitude, longitude and radius (use Find city or a preset).');
}
const response = await fetch('/api/admin/pharmacies/import-external', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({
source: importMode,
lat,
lon,
radio,
}),
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(data.error || `Import failed (${response.status})`);
}
const src = data.source === 'osm' ? 'OSM' : 'OpenStreetMap';
setImportFeedback({
type: 'success',
text: `[${src}] ${data.message || `Received ${data.totalReceived} pharmacies.`} Inserted ${data.inserted}, skipped ${data.skipped}, invalid ${data.invalid || 0}.`,
});
await fetchPharmacies();
} catch (error) {
setImportFeedback({ type: 'error', text: error.message });
} finally {
setImporting(false);
}
};
const handleSubmit = async (e) => {
e.preventDefault();
if (saving) return;
setSaving(true);
try {
const payload = {
...formData,
latitude: formData.latitude ? parseFloat(formData.latitude) : null,
longitude: formData.longitude ? parseFloat(formData.longitude) : null,
};
if (editingPharmacy) {
const response = await fetch(`/api/admin/pharmacies/${editingPharmacy.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(payload),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to update pharmacy');
}
} else {
const response = await fetch('/api/admin/pharmacies', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(payload),
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error || 'Failed to create pharmacy');
}
}
resetForm();
fetchPharmacies();
alert(editingPharmacy ? 'Pharmacy updated successfully!' : 'Pharmacy added successfully!');
} catch (error) {
console.error('Error saving pharmacy:', error);
alert(`Error saving pharmacy: ${error.message}`);
} finally {
setSaving(false);
}
};
const handleEdit = (pharmacy) => {
setEditingPharmacy(pharmacy);
setFormData({
name: pharmacy.name || '',
address: pharmacy.address || '',
phone: pharmacy.phone || '',
latitude: pharmacy.latitude ?? '',
longitude: pharmacy.longitude ?? '',
});
setShowForm(true);
};
const handleDelete = async (id) => {
if (!confirm('Are you sure you want to delete this pharmacy?')) return;
try {
const response = await fetch(`/api/admin/pharmacies/${id}`, {
method: 'DELETE',
credentials: 'include',
});
if (!response.ok) throw new Error('Failed to delete pharmacy');
fetchPharmacies();
alert('Pharmacy deleted successfully!');
} catch (error) {
console.error('Error deleting pharmacy:', error);
alert('Error deleting pharmacy');
}
};
const resetForm = () => {
setFormData({
name: '',
address: '',
phone: '',
latitude: '',
longitude: '',
});
setEditingPharmacy(null);
setShowForm(false);
};
const onRegionFieldChange = (setter) => (e) => {
setRegionPreset('custom');
setter(e.target.value);
};
return (
<div className="admin-section">
<div className="section-header">
<h2>Manage Pharmacies</h2>
<button
type="button"
className="btn-primary"
onClick={() => {
resetForm();
setShowForm(true);
}}
>
+ Add New Pharmacy
</button>
</div>
<div className="pharmacy-tools-card">
<h3>City, region &amp; import</h3>
<p className="pharmacy-tools-hint">
<strong>Find city</strong> sets latitude, longitude and radius for the map filter and for imports.
Choose a <strong>data source</strong> below: <strong>OpenStreetMap</strong> is free (no key);{' '}
<strong>Open data URL</strong> loads JSON you host (array or GeoJSON). Geocoding uses{' '}
<a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">
OpenStreetMap
</a>{' '}
(Nominatim).
</p>
<form className="city-lookup-form" onSubmit={handleCityLookup}>
<div className="form-group city-lookup-input-wrap">
<label htmlFor="city-finder">Find city</label>
<input
id="city-finder"
type="search"
placeholder="e.g. Rubí, Spain — or Madrid, Valencia…"
value={cityQuery}
onChange={(e) => {
setCityQuery(e.target.value);
setCityLookupMessage(null);
}}
autoComplete="address-level2"
/>
</div>
<button
type="submit"
className="btn-secondary city-lookup-submit"
disabled={cityLookupLoading}
>
{cityLookupLoading ? 'Looking up…' : 'Look up city'}
</button>
</form>
{cityLookupMessage && (
<p
className={`city-lookup-feedback ${cityLookupMessage.type === 'ok' ? 'ok' : 'err'}`}
role="status"
>
{cityLookupMessage.text}
</p>
)}
<div className="region-presets">
<label htmlFor="region-preset">Area preset</label>
<select
id="region-preset"
value={regionPreset}
onChange={(e) => applyPreset(e.target.value)}
>
{REGION_PRESETS.map((p) => (
<option key={p.id} value={p.id}>
{p.label}
</option>
))}
</select>
</div>
<div className="region-grid">
<div className="form-group">
<label htmlFor="region-lat">Latitude</label>
<input
id="region-lat"
type="text"
inputMode="decimal"
value={regionLat}
onChange={onRegionFieldChange(setRegionLat)}
placeholder="41.5631"
/>
</div>
<div className="form-group">
<label htmlFor="region-lon">Longitude</label>
<input
id="region-lon"
type="text"
inputMode="decimal"
value={regionLon}
onChange={onRegionFieldChange(setRegionLon)}
placeholder="2.0038"
/>
</div>
<div className="form-group">
<label htmlFor="region-radio">Radius (m)</label>
<input
id="region-radio"
type="text"
inputMode="numeric"
value={regionRadio}
onChange={onRegionFieldChange(setRegionRadio)}
placeholder="1500"
/>
</div>
</div>
<div className="import-mode-row">
<div className="form-group import-mode-select-wrap">
<label htmlFor="import-mode">Data source</label>
<select
id="import-mode"
value={importMode}
onChange={(e) => {
setImportMode(e.target.value);
setImportFeedback(null);
}}
>
<option value="osm">OpenStreetMap (Overpass, free)</option>
<option value="webhook">n8n webhook (legacy)</option>
<option value="openData">Open data JSON URL</option>
</select>
</div>
</div>
{importMode === 'openData' && (
<div className="form-group open-data-url-row">
<label htmlFor="open-data-url">JSON URL</label>
<input
id="open-data-url"
type="url"
placeholder="https://…/pharmacies.json"
value={openDataUrl}
onChange={(e) => setOpenDataUrl(e.target.value)}
autoComplete="off"
/>
</div>
)}
<div className="tool-actions-row">
<button
type="button"
className="btn-primary btn-import-webhook"
onClick={handlePharmacyImport}
disabled={importing}
>
{importing
? 'Importing…'
: importMode === 'webhook'
? 'Import from webhook'
: importMode === 'openData'
? 'Import from URL'
: `Import from ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`}
</button>
<label className="filter-region-toggle">
<input
type="checkbox"
checked={filterByRegion}
onChange={(e) => setFilterByRegion(e.target.checked)}
/>
Show only pharmacies inside radius
</label>
</div>
{importFeedback && (
<div
className={`import-feedback ${importFeedback.type === 'success' ? 'success' : 'error'}`}
role="status"
>
{importFeedback.text}
</div>
)}
</div>
{showForm && (
<form className="admin-form" onSubmit={handleSubmit}>
<h3>{editingPharmacy ? 'Edit Pharmacy' : 'Add New Pharmacy'}</h3>
<div className="form-group">
<label>Name *</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
required
/>
</div>
<div className="form-group">
<label>Address *</label>
<input
type="text"
value={formData.address}
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
required
/>
</div>
<div className="form-group">
<label>Phone</label>
<input
type="text"
value={formData.phone}
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
/>
</div>
<div className="form-row">
<div className="form-group">
<label>Latitude</label>
<input
type="number"
step="any"
value={formData.latitude}
onChange={(e) => setFormData({ ...formData, latitude: e.target.value })}
/>
</div>
<div className="form-group">
<label>Longitude</label>
<input
type="number"
step="any"
value={formData.longitude}
onChange={(e) => setFormData({ ...formData, longitude: e.target.value })}
/>
</div>
</div>
<div className="form-actions">
<button type="submit" className="btn-primary" disabled={saving}>
{saving ? 'Saving...' : editingPharmacy ? 'Update' : 'Add'} Pharmacy
</button>
<button type="button" className="btn-secondary" onClick={resetForm} disabled={saving}>
Cancel
</button>
</div>
</form>
)}
{loading ? (
<div className="loading">Loading pharmacies...</div>
) : (
<div className="admin-list">
<p className="list-meta">
Showing {displayedPharmacies.length} of {pharmacies.length} pharmacies
{filterByRegion && ' (inside radius)'}
</p>
{displayedPharmacies.length === 0 ? (
<p className="empty-state">
{pharmacies.length === 0
? 'No pharmacies yet. Import from webhook or add one manually.'
: 'No pharmacies in this radius with coordinates. Widen the radius, look up a different city, or turn off the region filter.'}
</p>
) : (
displayedPharmacies.map((pharmacy) => (
<div key={pharmacy.id} className="admin-item">
<div className="item-content">
<h4>{pharmacy.name}</h4>
<p>📍 {pharmacy.address}</p>
{pharmacy.phone && <p>📞 {pharmacy.phone}</p>}
{(pharmacy.latitude != null || pharmacy.longitude != null) && (
<p>
🌐 {pharmacy.latitude}, {pharmacy.longitude}
</p>
)}
</div>
<div className="item-actions">
<button type="button" className="btn-edit" onClick={() => handleEdit(pharmacy)}>
Edit
</button>
<button type="button" className="btn-delete" onClick={() => handleDelete(pharmacy.id)}>
Delete
</button>
</div>
</div>
))
)}
</div>
)}
</div>
);
}
export default PharmacyManagement;