diff --git a/src/Router.jsx b/src/Router.jsx
index 5d8a440..8bad33a 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -11,6 +11,7 @@ import Favoritos from './pages/users/favoritos.jsx';
import Notification from './pages/users/notificaciones.jsx';
import NewMapa from './pages/newMapa.jsx';
import Calendario from './pages/calendario.jsx';
+import GestionSolicitudes from './pages/GestionSolicitudes.jsx';
function Router() {
@@ -30,6 +31,7 @@ function Router() {
{solicitud.descripcion}
+Fecha solicitud: {solicitud.fecha}
+Estado: {solicitud.estado}
+Locatarios y pequeños emprendedores de cada lugar podrán georreferenciar sus locales y negocios de una manera rápida y sencilla, potenciando su visibilidad frente a la demanda de productos y servicios que se generan durante todo el año; sobre todo, en los períodos de incremento de veraneantes en época estival.
La solución de búsqueda de servicios en mapas geolocalizados, permite, durante todo el año, ser un elemento de vital importancia para la potenciación de cada negocio de la zona, y al mismo tiempo, fomentar la aparición de nuevos emprendimientos que den crecimiento al sector y su gente.
diff --git a/src/pages/users/zcamping.jsx b/src/pages/users/zcamping.jsx index bcb7857..5e3ce19 100644 --- a/src/pages/users/zcamping.jsx +++ b/src/pages/users/zcamping.jsx @@ -15,31 +15,73 @@ const mapContainerStyle = { }; const center = { - lat: -33.4489, // Cambia esto a la latitud de tu ubicación inicial - lng: -70.6693 // Cambia esto a la longitud de tu ubicación inicial + lat: -33.4489, + lng: -70.6693 }; + function CampingForm({ formData, errors, onInputChange, onNext }) { const [markerPosition, setMarkerPosition] = useState(center); const [userLocation, setUserLocation] = useState(null); + const [formData, setFormData] = useState({ + subcategoria: '', + titulo: '', + descripcion: '', + ubicacion: '', + numeroUbicacion: '', + nombreContacto: '', + celularContacto: '', + mailContacto: '', + instagram: '', + facebook: '', + paginaWeb: '', + precioPorNoche: '', + disponible: false + }); + const [errors, setErrors] = useState({}); + + const getAddressFromLatLng = async (lat, lng) => { + const apiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Replace with your API key + const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`); + const data = await response.json(); + if (data.results && data.results.length > 0) { + return data.results[0].formatted_address; + } else { + return ''; + } + }; + + const handleMapClick = (event) => { const lat = event.latLng.lat(); const lng = event.latLng.lng(); setMarkerPosition({ lat, lng }); + + + const address = await getAddressFromLatLng(lat, lng); + setFormData((prev) => ({ ...prev, ubicacion: address })); + onInputChange('ubicacion', `Lat: ${lat}, Lng: ${lng}`); + }; useEffect(() => { if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(position => { + navigator.geolocation.getCurrentPosition(async (position) => { const newLocation = { lat: position.coords.latitude, lng: position.coords.longitude, }; setUserLocation(newLocation); setMarkerPosition(newLocation); + + + const address = await getAddressFromLatLng(newLocation.lat, newLocation.lng); + setFormData((prev) => ({ ...prev, ubicacion: address })); + onInputChange('ubicacion', `Lat: ${position.coords.latitude}, Lng: ${position.coords.longitude}`); + }, () => { alert("No se pudo obtener la ubicación."); }); @@ -48,18 +90,30 @@ function CampingForm({ formData, errors, onInputChange, onNext }) { } }, []); + + const handleInputChange = (field, value) => { + setFormData(prev => ({ ...prev, [field]: value })); + if (errors[name]) { + setErrors((prevErrors) => ({ ...prevErrors, [name]: undefined })); + } + }; + + const validateForm = () => { const newErrors = {}; if (!formData.titulo) newErrors.titulo = 'Escribe un título.'; if (!formData.descripcion) newErrors.descripcion = 'Escribe una descripción.'; if (!formData.ubicacion) { newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).'; + } else if (!/^[\w\s,.-]+$/.test(formData.ubicacion)) { newErrors.ubicacion = 'Debes seguir el formato de dirección: Calle 123, Comuna, Ciudad.'; - } + } if (!formData.celularContacto && !formData.mailContacto) { newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.'; + + } else { if (formData.celularContacto && !/^\d+$/.test(formData.celularContacto)) { newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.'; @@ -72,8 +126,8 @@ function CampingForm({ formData, errors, onInputChange, onNext }) { if (!formData.precioPorNoche) newErrors.precioPorNoche = 'Se debe escribir un precio por noche.'; if (formData.paginaWeb && !/^(https?:\/\/)?([\w\-]+\.)+[\w\-]{2,4}(\/[\w\-\.]*)*$/.test(formData.paginaWeb)) { newErrors.paginaWeb = 'Debes escribir en el formato indicado de página web. Ej: https://www.ejemplo.com'; - } + } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; @@ -91,7 +145,6 @@ function CampingForm({ formData, errors, onInputChange, onNext }) {