mapa_forms - gestion_sol - mejoras

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() {
         <Route path="/notificaciones" element={<Notification />} />
         <Route path="/mapa-navegacion" element={<NewMapa />} />
         <Route path="/calendario" element={<Calendario />} />
+        <Route path="/gestion-solicitudes" element={<GestionSolicitudes />} />
 
 
 

src/components/Navbar.jsx

@@ -32,6 +32,8 @@ function NavBar() {
                             <Link to="/publicaciones" className="footer-link">Mis Publicaciones</Link>
                             <Link to="/favoritos" className="footer-link">Mis Favoritos</Link>
                             <Link to="/notificaciones" className="footer-link">Enviar notificaciones a usuarios</Link>
+                            <Link to="/gestion-solicitudes" className="footer-link">Gestión de Solicitudes</Link>
+
                         </>
                     )}
 

src/pages/GestionSolicitudes.jsx

@@ -0,0 +1,99 @@
+// GestionSolicitudes.jsx
+import React, { useState } from 'react';
+import '../styles/gestionSolicitudes.css';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+
+const GestionSolicitudes = () => {
+  const [solicitudes, setSolicitudes] = useState([
+    { id: 1, tipo: 'Evento', descripcion: 'Concierto en el parque', estado: 'Pendiente', comentario: '', fecha: '2024-11-01' },
+    { id: 2, tipo: 'Publicación', descripcion: 'Casa en la playa', estado: 'Pendiente', comentario: '', fecha: '2024-11-02' },
+    { id: 3, tipo: 'Notificación', descripcion: 'Nuevo mensaje', estado: 'Pendiente', comentario: '', fecha: '2024-11-03' },
+    // Añadir más solicitudes de diferentes tipos y fechas
+  ]);
+
+  const [filtroFecha, setFiltroFecha] = useState('');
+  const [filtroTipo, setFiltroTipo] = useState('');
+
+  const handleAction = (id, action) => {
+    setSolicitudes(prevSolicitudes =>
+      prevSolicitudes.map(solicitud =>
+        solicitud.id === id ? { ...solicitud, estado: action } : solicitud
+      )
+    );
+  };
+
+  const handleComentarioChange = (id, comentario) => {
+    setSolicitudes(prevSolicitudes =>
+      prevSolicitudes.map(solicitud =>
+        solicitud.id === id ? { ...solicitud, comentario } : solicitud
+      )
+    );
+  };
+
+  const solicitudesFiltradas = solicitudes.filter(solicitud => {
+    const coincideFecha = filtroFecha ? solicitud.fecha === filtroFecha : true;
+    const coincideTipo = filtroTipo ? solicitud.tipo === filtroTipo : true;
+    return coincideFecha && coincideTipo;
+  });
+
+  return (
+    <div>
+      <Navbar />
+      <div className="gestion-solicitudes-container">
+        <h1>Gestión de Solicitudes</h1>
+        <div className="GS-content">
+          {/* Filtros */}
+          <div className="filters">
+            <h3>Filtros</h3>
+            <label>Fecha solicitud:</label>
+            <input
+              type="date"
+              value={filtroFecha}
+              onChange={(e) => setFiltroFecha(e.target.value)}
+            />
+            <label>Tipo:</label>
+            <select
+              value={filtroTipo}
+              onChange={(e) => setFiltroTipo(e.target.value)}
+            >
+              <option value="">Todos</option>
+              <option value="Evento">Eventos</option>
+              <option value="Publicación">Publicaciones</option>
+              <option value="Notificación">Notificaciones</option>
+            </select>
+          </div>
+
+          {/* Lista de solicitudes */}
+          <div className="solicitudes-list">
+            {solicitudesFiltradas.map(solicitud => (
+              <div key={solicitud.id} className="solicitud-item">
+                <h2>{solicitud.tipo}</h2>
+                <p>{solicitud.descripcion}</p>
+                <p>Fecha solicitud: {solicitud.fecha}</p>
+                <p>Estado: {solicitud.estado}</p>
+                <textarea
+                  placeholder="Escribe un comentario (opcional)"
+                  value={solicitud.comentario}
+                  onChange={(e) => handleComentarioChange(solicitud.id, e.target.value)}
+                  className="comentario-input"
+                />
+                <div className="actions">
+                    <button className="button-aceptar" onClick={() => handleAction(solicitud.id, 'Aceptada')}>Aceptar</button>
+                    <button className="button-rechazar" onClick={() => handleAction(solicitud.id, 'Rechazada')}>Rechazar</button>
+                    <button className="button-objetar" onClick={() => handleAction(solicitud.id, 'Objetada')}>Objetar</button>
+                </div>
+                {solicitud.estado === 'Objetada' && solicitud.comentario && (
+                  <p>Comentario: {solicitud.comentario}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default GestionSolicitudes;

src/pages/servicios.jsx

@@ -43,7 +43,7 @@ const Servicios = () => {
         <div className="intro-section">
           <img src={empanadas} alt="Servicio" className="intro-image" />
           <div className="intro-text">
-            <h1>Servicios en GeoRent</h1>
+            <h1>Servicios en GeoMapp</h1>
             <h2 className="subtitle">GeoRent, aplicación social, permite georreferenciar toda la oferta de servicios y comercio afín que se encuentra en tu sector.</h2>
             <p>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.</p>
             <p>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.</p>

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 }) {
     <form className="form-container" onSubmit={handleSubmit}>
       <h1>Camping</h1>
       <h2>Ingresa la información de tu publicación</h2>
-
       <TextField
         fullWidth
         label="Título"
@@ -101,7 +154,6 @@ function CampingForm({ formData, errors, onInputChange, onNext }) {
         error={Boolean(errors.titulo)}
         helperText={errors.titulo || 'Campo Obligatorio'}
       />
-
       <TextField
         fullWidth
         label="Descripción"
@@ -113,38 +165,33 @@ function CampingForm({ formData, errors, onInputChange, onNext }) {
         error={Boolean(errors.descripcion)}
         helperText={errors.descripcion || 'Campo Obligatorio'}
       />
-
       <div className="direccion-container">
         <TextField
           fullWidth
+          className="ubicacion"
           label="Ubicación: Calle 123, Comuna, Ciudad"
           value={formData.ubicacion}
-          onChange={(e) => onInputChange('ubicacion', e.target.value)}
+          onChange={(e) => handleInputChange('ubicacion', e.target.value)}
           margin="normal"
           error={Boolean(errors.ubicacion)}
           helperText={errors.ubicacion || 'Campo Obligatorio'}
         />
-
         <TextField
           fullWidth
+          className='numeroUbicacion'
           label="Número Casa/Depto"
           value={formData.numeroUbicacion}
-          onChange={(e) => onInputChange('numeroUbicacion', e.target.value)}
+          onChange={(e) => handleInputChange('numeroUbicacion', e.target.value)}
           margin="normal"
         />
       </div>
+      <LoadScript googleMapsApiKey="AIzaSyAJuzF9SX5VP6CU38hq-lgRopJ66jYgb5E">
+
+
+
 
-      <LoadScript googleMapsApiKey="TU_API_KEY_AQUÍ">
-        <GoogleMap
-          mapContainerStyle={mapContainerStyle}
-          center={markerPosition}
-          zoom={18}
-          onClick={handleMapClick}
-        >
-          <Marker position={markerPosition} />
-        </GoogleMap>
-      </LoadScript>
 
+<div className="contacto-container">
       <TextField
         fullWidth
         label="Nombre de Contacto"