From 590d7fc3fc52308ffc182a05f5ebb1614a1e1210 Mon Sep 17 00:00:00 2001 From: LUZ MARIA GARCIA URZUA Date: Mon, 4 Nov 2024 18:28:24 -0300 Subject: [PATCH] hospedaje y camping con boton --- src/pages/users/publicar.jsx | 162 ++++++++++++++--------- src/pages/users/zcamping.jsx | 219 +++++++++++++------------------- src/pages/users/zhospedaje.jsx | 65 +++++----- src/styles/users/zhospedaje.css | 57 --------- 4 files changed, 228 insertions(+), 275 deletions(-) diff --git a/src/pages/users/publicar.jsx b/src/pages/users/publicar.jsx index af73530..79e1505 100644 --- a/src/pages/users/publicar.jsx +++ b/src/pages/users/publicar.jsx @@ -102,7 +102,6 @@ function Publicar() { }); const [formDataCamping, setFormDataCamping] = useState({ - subcategoria: '', titulo: '', descripcion: '', ubicacion: '', @@ -169,7 +168,7 @@ function Publicar() { if (!formDataHospedaje.cantidadMaxima) newErrors.cantidadMaxima = 'Ingresa cantidad máxima de personas para la acomodación.'; if (!formDataHospedaje.cantidadMinima) newErrors.cantidadMinima = 'Ingresa cantidad mínima de personas para la acomodación.'; - if (!formDataHospedaje.celularContacto && !formData.mailContacto) { + if (!formDataHospedaje.celularContacto && !formDataHospedaje.mailContacto) { newErrors.contacto = 'Debes incluir al menos el número de celular o el mail de contacto.'; } else { if (formDataHospedaje.celularContacto && !/^\d+$/.test(formDataHospedaje.celularContacto)) { @@ -190,70 +189,110 @@ function Publicar() { if (activeStep === 0 && !selectedType) { setError('Por favor selecciona tu tipo de publicación'); } else if (activeStep === 1) { - // Ejecuta la validación del formulario según el tipo seleccionado - if (selectedType === 'propiedad' && !validateFormHospedaje()) { - console.log(errors); // Revisa los errores de validación - return; // Detén el avance si la validación de Hospedaje falla - } else if (selectedType === 'camping' && !validateFormCamping()) { - console.log(errors); // Revisa los errores de validación - return; // Detén el avance si la validación de Camping falla - } else if (selectedType === 'eventos' && !validateFormEventos()) { - console.log(errors); - return; + console.log('Errores antes de la validación:', errors); // Verifica el estado de errors + + let isValid = true; + + if (selectedType === 'propiedad') { + isValid = validateFormHospedaje(); + } else if (selectedType === 'camping') { + isValid = validateFormCamping(); + } else if (selectedType === 'eventos') { + isValid = validateFormEventos(); + if (isValid) { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + } } - setActiveStep((prevActiveStep) => prevActiveStep + 1); - } else { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - } - }; + if (!isValid) { + console.log('Errores después de la validación:', errors); // Muestra errores + return; // Detiene el avance si hay errores + } + } + // Solo avanza si todas las validaciones pasaron + setActiveStep((prevActiveStep) => prevActiveStep + 1); + }; const validateFormCamping = () => { const newErrors = {}; - - if (!formDataCamping.titulo) {newErrors.titulo = 'Escribe un título.';} - if (!formDataCamping.descripcion) {newErrors.descripcion = 'Escribe una descripción.';} + + // Validar campos requeridos + if (!formDataCamping.titulo) newErrors.titulo = 'Escribe un título.'; + if (!formDataCamping.descripcion) newErrors.descripcion = 'Escribe una descripción.'; + + // Validación para la ubicación if (!formDataCamping.ubicacion) { - newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).'; - } else if (!/^[\w\s,.-]+$/.test(formDataCamping.ubicacion)) { // Simple regex for address format - newErrors.ubicacion = 'Debes seguir el formato de dirección: Calle 123, Comuna, Ciudad.'; + newErrors.ubicacion = 'Escribe una ubicación (Ej: Calle 123, Comuna, Ciudad).'; } + // Validación del nombre de contacto + if (!formDataCamping.nombreContacto) { + newErrors.nombreContacto = 'Escribe el nombre de contacto.'; + } + + // Validación de contacto (teléfono o correo) if (!formDataCamping.celularContacto && !formDataCamping.mailContacto) { - newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.'; + newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.'; } else { - if (formDataCamping.celularContacto && !/^\d+$/.test(formDataCamping.celularContacto)) { // Validar que solo incluya números - newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.'; - } - if (formDataCamping.mailContacto && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formDataCamping.mailContacto)) { // Simple regex for email - newErrors.mailContacto = 'Escribir el email en su debido formato. Ej: usuario@dominio.com'; - } + if (formDataCamping.celularContacto && !/^\d+$/.test(formDataCamping.celularContacto)) { + newErrors.celularContacto = 'El número de celular debe contener solo números. Ej: 9 8765 4321.'; + } + if (formDataCamping.mailContacto && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(formDataCamping.mailContacto)) { + newErrors.mailContacto = 'Escribir el email en su debido formato. Ej: usuario@dominio.com'; + } } + + // Validación del precio if (!formDataCamping.precioPorNoche) { - newErrors.precioPorNoche = 'Se debe escribir un precio por noche.'; + newErrors.precioPorNoche = 'Se debe escribir un precio por noche.'; } + + // Validación de la disponibilidad + if (formDataCamping.disponible === undefined) { + newErrors.disponible = 'Debes indicar si está disponible o no.'; + } + + // Validación de la página web (opcional) if (formDataCamping.paginaWeb && !/^(https?:\/\/)?([\w\-]+\.)+[\w\-]{2,4}(\/[\w\-\.]*)*$/.test(formDataCamping.paginaWeb)) { - newErrors.paginaWeb = 'Debes escribir en el formato indicado de página web. Ej: https://www.ejemplo.com'; + 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; - }; + }; + - const handleInputChangeHospedaje = (field, value) => { + + + + + + + + + + + + + + const handleInputChangeHospedaje = (field, value) => { setFormDataHospedaje((prev) => ({ ...prev, [field]: value })); + // Si el campo tiene un error asociado, lo eliminamos if (errors[field]) { setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined })); } }; + const handleInputChangeCamping = (field, value) => { + console.log(`Campo actualizado: ${field}, Valor: ${value}`); // Para depuración setFormDataCamping((prev) => ({ ...prev, [field]: value })); if (errors[field]) { setErrors((prevErrors) => ({ ...prevErrors, [field]: undefined })); } }; + const handleInputChangeEventos = (field, value) => { setEventDetails((prev) => ({ ...prev, [field]: value })); @@ -433,34 +472,35 @@ function Publicar() { )}
- {getStepContent(activeStep)} - - {/* Mostrar botón "Siguiente" solo en el primer paso para "notificaciones" */} - {(selectedType !== 'notificaciones' || activeStep === 0) && ( - - {activeStep > 0 && selectedType !== 'notificaciones' && ( - - )} - {activeStep === steps.length - 1 && selectedType !== 'notificaciones' ? ( - - - - ) : ( - - )} - + {getStepContent(activeStep)} + + {/* Mostrar botón "Siguiente" solo si no es "notificaciones" */} + {(selectedType !== 'notificaciones' || activeStep === 0) && ( + + {activeStep > 0 && selectedType !== 'notificaciones' && ( + )} -
+ {activeStep === steps.length - 1 && selectedType !== 'notificaciones' ? ( + + + + ) : ( + + )} + + )} + + diff --git a/src/pages/users/zcamping.jsx b/src/pages/users/zcamping.jsx index 169dc04..91d2ab2 100644 --- a/src/pages/users/zcamping.jsx +++ b/src/pages/users/zcamping.jsx @@ -19,35 +19,14 @@ const center = { lng: -70.6693 }; -function CampingForm({ onNext }) { +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 apiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Reemplaza con tu 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 ''; - } + return data.results && data.results.length > 0 ? data.results[0].formatted_address : ''; }; const handleMapClick = async (event) => { @@ -56,7 +35,9 @@ function CampingForm({ onNext }) { setMarkerPosition({ lat, lng }); const address = await getAddressFromLatLng(lat, lng); - setFormData((prev) => ({ ...prev, ubicacion: address })); + if (address) { + onInputChange('ubicacion', address); // Actualiza el campo de ubicación + } }; useEffect(() => { @@ -66,59 +47,43 @@ function CampingForm({ onNext }) { 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 })); + if (address) { + onInputChange('ubicacion', address); // Actualiza la ubicación en el estado + } }, () => { alert("No se pudo obtener la ubicación."); }); } else { alert("Geolocalización no es soportada en este navegador."); } - }, []); + }, [onInputChange]); 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).'; - } - if (!formData.celularContacto && !formData.mailContacto) { - newErrors.contacto = 'Debes incluir al menos el número de celular de contacto o el mail de contacto.'; - } - setErrors(newErrors); - return Object.keys(newErrors).length === 0; + onInputChange(field, value); // Utiliza la función pasada como prop }; const handleSubmit = (event) => { event.preventDefault(); - if (validateForm()) { + // Llama a onNext si no hay errores + if (Object.keys(errors).length === 0) { onNext(); - } else { - console.log('Errores en el formulario:', errors); } }; return (
-

Camping

-

Ingresa la información de tu publicación

+ Camping + Ingresa la información de tu publicación handleInputChange('titulo', e.target.value)} margin="normal" + multiline error={Boolean(errors.titulo)} helperText={errors.titulo || 'Campo Obligatorio'} /> @@ -139,6 +104,7 @@ function CampingForm({ onNext }) { className="ubicacion" label="Ubicación: Calle 123, Comuna, Ciudad" value={formData.ubicacion} + multiline onChange={(e) => handleInputChange('ubicacion', e.target.value)} margin="normal" error={Boolean(errors.ubicacion)} @@ -148,6 +114,7 @@ function CampingForm({ onNext }) { fullWidth className='numeroUbicacion' label="Número Casa/Depto" + multiline value={formData.numeroUbicacion} onChange={(e) => handleInputChange('numeroUbicacion', e.target.value)} margin="normal" @@ -158,106 +125,102 @@ function CampingForm({ onNext }) { mapContainerStyle={mapContainerStyle} center={markerPosition} zoom={18} + multiline onClick={handleMapClick} > -{/* hola */} -
- handleInputChange('nombreContacto', e.target.value)} - margin="normal" - /> - - handleInputChange('celularContacto', e.target.value)} - margin="normal" - type = "number" - error={Boolean(errors.celularContacto)} - helperText={errors.celularContacto} - /> - - handleInputChange('mailContacto', e.target.value)} - margin="normal" - error={Boolean(errors.mailContacto)} - helperText={errors.mailContacto} - /> +
+ handleInputChange('nombreContacto', e.target.value)} + margin="normal" + /> + handleInputChange('celularContacto', e.target.value)} + margin="normal" + type="number" + error={Boolean(errors.celularContacto)} + helperText={errors.celularContacto} + /> + handleInputChange('mailContacto', e.target.value)} + margin="normal" + error={Boolean(errors.mailContacto)} + helperText={errors.mailContacto} + />
- - {errors.contacto && {errors.contacto} || 'Incluir al menos el número de celular o mail de contacto'} {/* Mensaje de error de contacto */} - + {errors.contacto && {errors.contacto}}
- handleInputChange('instagram', e.target.value)} - margin="normal" - /> - - handleInputChange('facebook', e.target.value)} - margin="normal" - /> - - handleInputChange('paginaWeb', e.target.value)} - margin="normal" - error={Boolean(errors.paginaWeb)} - helperText={errors.paginaWeb} - /> + handleInputChange('instagram', e.target.value)} + margin="normal" + /> + handleInputChange('facebook', e.target.value)} + margin="normal" + /> + handleInputChange('paginaWeb', e.target.value)} + margin="normal" + multiline + error={Boolean(errors.paginaWeb)} + helperText={errors.paginaWeb} + />
- handleInputChange('precioPorNoche', e.target.value)} margin="normal" error={Boolean(errors.precioPorNoche)} - helperText={errors.precioPorNoche|| 'Campo Obligatorio'} - /> - -
- handleInputChange('disponible', e.target.checked)} - className='checkboxs-orange' - /> - } - label="Actualmente Disponible" + helperText={errors.precioPorNoche || 'Campo Obligatorio'} /> - +
+ handleInputChange('disponible', e.target.checked)} + /> + } + label="Actualmente Disponible" + />
-{/* - hola */} - {/* */} ); } CampingForm.propTypes = { - onNext: PropTypes.func.isRequired, + formData: PropTypes.object.isRequired, + errors: PropTypes.object.isRequired, + onInputChange: PropTypes.func.isRequired }; export default CampingForm; diff --git a/src/pages/users/zhospedaje.jsx b/src/pages/users/zhospedaje.jsx index ff693b4..39d2eb5 100644 --- a/src/pages/users/zhospedaje.jsx +++ b/src/pages/users/zhospedaje.jsx @@ -24,21 +24,17 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { const apiKey = "AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E"; // Reemplaza con tu 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; // Retorna la dirección formateada - } else { - return ''; - } + return data.results && data.results.length > 0 ? data.results[0].formatted_address : ''; }; const handleMapClick = async (event) => { const lat = event.latLng.lat(); const lng = event.latLng.lng(); - setMarkerPosition({ lat, lng }); // Actualiza la posición del marcador + setMarkerPosition({ lat, lng }); - const address = await getAddressFromLatLng(lat, lng); // Obtiene la dirección + const address = await getAddressFromLatLng(lat, lng); if (address) { - onInputChange('ubicacion', address); // Actualiza el campo de ubicación en el formulario + onInputChange('ubicacion', address); } }; @@ -50,11 +46,11 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { lat: position.coords.latitude, lng: position.coords.longitude, }; - setMarkerPosition(newLocation); // Actualiza la posición del marcador + setMarkerPosition(newLocation); const address = await getAddressFromLatLng(newLocation.lat, newLocation.lng); if (address) { - onInputChange('ubicacion', address); // Actualiza el campo de ubicación en el formulario + onInputChange('ubicacion', address); } }, () => { alert("No se pudo obtener la ubicación."); @@ -66,7 +62,10 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { const handleSubmit = (event) => { event.preventDefault(); - onNext(); // Llama a la función de siguiente paso + // Solo llama a onNext si no hay errores + if (Object.keys(errors).length === 0) { + onNext(); + } }; return ( @@ -92,6 +91,7 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { onInputChange('titulo', e.target.value)} @@ -119,24 +119,27 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { value={formData.ubicacion} onChange={(e) => onInputChange('ubicacion', e.target.value)} margin="normal" + multiline error={Boolean(errors.ubicacion)} helperText={errors.ubicacion || 'Campo Obligatorio'} /> onInputChange('numeroUbicacion', e.target.value)} margin="normal" /> - + {/* Reemplaza con tu API key */} @@ -148,8 +151,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { label="Cantidad Mínima de Personas" type="number" value={formData.cantidadMinima} - onChange={(e) => handleInputChange('cantidadMinima', e.target.value)} + onChange={(e) => onInputChange('cantidadMinima', e.target.value)} margin="normal" + multiline error={Boolean(errors.cantidadMinima)} helperText={errors.cantidadMinima || 'Campo Obligatorio'} /> @@ -157,8 +161,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { fullWidth label="Cantidad Máxima de Personas" type="number" + multiline value={formData.cantidadMaxima} - onChange={(e) => handleInputChange('cantidadMaxima', e.target.value)} + onChange={(e) => onInputChange('cantidadMaxima', e.target.value)} margin="normal" error={Boolean(errors.cantidadMaxima)} helperText={errors.cantidadMaxima || 'Campo Obligatorio'} @@ -170,8 +175,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { fullWidth label="Dormitorios" type="number" + multiline value={formData.dormitorios} - onChange={(e) => handleInputChange('dormitorios', e.target.value)} + onChange={(e) => onInputChange('dormitorios', e.target.value)} margin="normal" error={Boolean(errors.dormitorios)} helperText={errors.dormitorios || 'Campo Obligatorio'} @@ -181,8 +187,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { label="Camas Simples" type="number" value={formData.camasSimples} - onChange={(e) => handleInputChange('camasSimples', e.target.value)} + onChange={(e) => onInputChange('camasSimples', e.target.value)} margin="normal" + multiline error={Boolean(errors.camasSimples)} helperText={errors.camasSimples || 'Campo Obligatorio'} /> @@ -191,8 +198,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { label="Camas Dobles" type="number" value={formData.camasDobles} - onChange={(e) => handleInputChange('camasDobles', e.target.value)} + onChange={(e) => onInputChange('camasDobles', e.target.value)} margin="normal" + multiline error={Boolean(errors.camasDobles)} helperText={errors.camasDobles || 'Campo Obligatorio'} /> @@ -203,8 +211,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { fullWidth label="Celular de Contacto" value={formData.celularContacto} - onChange={(e) => handleInputChange('celularContacto', e.target.value)} + onChange={(e) => onInputChange('celularContacto', e.target.value)} margin="normal" + multiline error={Boolean(errors.celularContacto)} helperText={errors.celularContacto} /> @@ -212,8 +221,9 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { fullWidth label="Mail de Contacto" value={formData.mailContacto} - onChange={(e) => handleInputChange('mailContacto', e.target.value)} + onChange={(e) => onInputChange('mailContacto', e.target.value)} margin="normal" + multiline error={Boolean(errors.mailContacto)} helperText={errors.mailContacto} /> @@ -225,30 +235,27 @@ function HospedajeForm({ formData, errors, onInputChange, onNext }) { label="Precio por Noche" type="number" value={formData.precioPorNoche} - onChange={(e) => handleInputChange('precioPorNoche', e.target.value)} + onChange={(e) => onInputChange('precioPorNoche', e.target.value)} margin="normal" + multiline error={Boolean(errors.precioPorNoche)} helperText={errors.precioPorNoche || 'Campo Obligatorio'} /> handleInputChange('disponible', e.target.checked)} />} + control={ onInputChange('disponible', e.target.checked)} />} label="Actualmente Disponible" /> handleInputChange('incluyeDesayuno', e.target.checked)} />} + control={ onInputChange('incluyeDesayuno', e.target.checked)} />} label="Incluye Desayuno" /> handleInputChange('incluyeToallasSabanas', e.target.checked)} />} + control={ onInputChange('incluyeToallasSabanas', e.target.checked)} />} label="Incluye Toallas y Sábanas" /> - - {/* */} ); } @@ -257,7 +264,7 @@ HospedajeForm.propTypes = { formData: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, onInputChange: PropTypes.func.isRequired, - onNext: PropTypes.func.isRequired, + onNext: PropTypes.func.isRequired, // Asegúrate de que onNext sea requerido }; export default HospedajeForm; diff --git a/src/styles/users/zhospedaje.css b/src/styles/users/zhospedaje.css index 6402f29..e69de29 100644 --- a/src/styles/users/zhospedaje.css +++ b/src/styles/users/zhospedaje.css @@ -1,57 +0,0 @@ -html, body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Usar San Francisco */ -} - -.form-container { - width: 60%; - margin: 0 auto; - padding: 20px; - border-radius: 8px; -} -.bedroom-container { - display: flex; - justify-content: space-between; /* Espacio igual entre los campos */ - align-items: flex-start; /* Alinea los campos en la parte superior */ - gap: 16px; /* Espacio entre los campos */ -} - -.bedroom-container .MuiTextField-root { - flex: 1; /* Asegura que todos los campos ocupen el mismo espacio */ -} - -.contacto-container { - display: flex; - justify-content: space-between; /* Espacio igual entre los campos */ - align-items: flex-start; /* Alinea los campos en la parte superior */ - gap: 16px; /* Espacio entre los campos */ -} - -.contacto-container .MuiTextField-root { - flex: 1; /* Asegura que todos los campos ocupen el mismo espacio */ -} -.personas-container { - display: flex; - justify-content: space-between; /* Espacio igual entre los campos */ - align-items: flex-start; /* Alinea los campos en la parte superior */ - gap: 16px; /* Espacio entre los campos */ -} - -.personas-container .MuiTextField-root { - flex: 1; /* Asegura que todos los campos ocupen el mismo espacio */ -} - -.redes-container { - display: flex; - justify-content: space-between; /* Espacio igual entre los campos */ - align-items: flex-start; /* Alinea los campos en la parte superior */ - gap: 16px; /* Espacio entre los campos */ -} - -.redes-container .MuiTextField-root { - flex: 1; /* Asegura que todos los campos ocupen el mismo espacio */ -} -.direccion-container { - display: flex; - align-items: flex-start; /* Alinea los campos en la parte superior */ - gap: 16px; /* Espacio entre los campos */ -}