refactoring

iic2154-uc-cl · Oct 9, 2024 · 6f7a51c · 6f7a51c
1 parent e313dcb
commit 6f7a51c
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 32 deletions.
diff --git a/geomapp/src/components/GoogleMap.jsx b/geomapp/src/components/GoogleMap.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
 import UpdateLocationButton from './MapsButton'; // Asegúrate de importar el componente del botón
 
+
 /* Ajusta los estilos del contenedor principal para eliminar márgenes y padding */
 // Ajusta los estilos del contenedor principal para eliminar márgenes y padding
 const containerStyle = {
@@ -40,19 +41,95 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => {
   const [map, setMap] = useState(null);
   const [userLocation, setUserLocation] = useState(center);
   const [selectedPlace, setSelectedPlace] = useState(null);
+  const [showInfoPanel, setShowInfoPanel] = useState(false);
 
   const lugares = [
-    { nombre: 'Costanera Center', lat: -33.4175, lng: -70.6067, tipo: 'tiendas', descripcion: 'Centro comercial más grande de Santiago y torre más alta de Latinoamérica.'},
-    { nombre: 'Parque Bicentenario', lat: -33.3989, lng: -70.6001, tipo: 'alojamientos', descripcion: 'Un hermoso parque en Vitacura, ideal para actividades al aire libre.'},
-    { nombre: 'Restaurante El Buen Sabor', lat: -33.4372, lng: -70.6506, tipo: 'restaurantes', descripcion: 'Un restaurante con deliciosa comida local.'},
-    // Añade más lugares aquí...
-  ];
-
+    {
+        nombre: 'Costanera Center',
+        lat: -33.4175,
+        lng: -70.6067,
+        tipo: 'tiendas',
+        descripcion: 'Centro comercial más grande de Santiago y torre más alta de Latinoamérica.',
+        precio: 'Entrada libre',
+        contacto: '+56 2 2916 9200',
+        direccion: 'Avenida Andrés Bello 2425, Providencia',
+        categoria: 'Centro Comercial',
+        horario_apertura: '10:00 AM',
+        horario_cierre: '09:00 PM'
+    },
+    {
+        nombre: 'Parque Bicentenario',
+        lat: -33.3989,
+        lng: -70.6001,
+        tipo: 'alojamientos',
+        descripcion: 'Un hermoso parque en Vitacura, ideal para actividades al aire libre.',
+        precio: 'Entrada libre',
+        contacto: '+56 2 2216 9121',
+        direccion: 'Avenida Bicentenario 3236, Vitacura',
+        categoria: 'Parque',
+        horario_apertura: '07:00 AM',
+        horario_cierre: '08:00 PM'
+    },
+    {
+        nombre: 'Restaurante El Buen Sabor',
+        lat: -33.4372,
+        lng: -70.6506,
+        tipo: 'restaurantes',
+        descripcion: 'Un restaurante con deliciosa comida local.',
+        precio: 'Precio promedio: $15,000 CLP',
+        contacto: '+56 2 2234 5678',
+        direccion: 'Calle Falsa 123, Santiago Centro',
+        categoria: 'Restaurante',
+        horario_apertura: '12:00 PM',
+        horario_cierre: '11:00 PM'
+    },
+    {
+        nombre: 'Museo Nacional de Bellas Artes',
+        lat: -33.4367,
+        lng: -70.6417,
+        tipo: 'cultura',
+        descripcion: 'Museo con una impresionante colección de arte chileno y latinoamericano.',
+        precio: '$1,000 CLP',
+        contacto: '+56 2 2496 1224',
+        direccion: 'José Miguel de La Barra 650, Santiago Centro',
+        categoria: 'Museo',
+        horario_apertura: '10:00 AM',
+        horario_cierre: '06:00 PM'
+    },
+    {
+        nombre: 'Cerro San Cristóbal',
+        lat: -33.4299,
+        lng: -70.6344,
+        tipo: 'turismo',
+        descripcion: 'Uno de los cerros más grandes de Santiago, con vistas panorámicas de la ciudad.',
+        precio: 'Entrada libre',
+        contacto: '+56 2 2738 8600',
+        direccion: 'Pio Nono 450, Recoleta',
+        categoria: 'Turismo',
+        horario_apertura: '08:30 AM',
+        horario_cierre: '08:00 PM'
+    },
+    {
+        nombre: 'Mercado Central',
+        lat: -33.4361,
+        lng: -70.6483,
+        tipo: 'comida',
+        descripcion: 'Famoso mercado donde se puede disfrutar de mariscos frescos y cocina local.',
+        precio: 'Precio varía por restaurante',
+        contacto: '+56 2 2698 1719',
+        direccion: 'San Pablo 967, Santiago Centro',
+        categoria: 'Mercado',
+        horario_apertura: '09:00 AM',
+        horario_cierre: '05:00 PM'
+    }
+];
   // Filtrar los lugares según el filtro seleccionado
   const lugaresFiltrados = lugares.filter((lugar) => {
     return filterType === '' || lugar.tipo === filterType;
   });
 
+
+
   // Obtener ubicación actual del usuario
   useEffect(() => {
     if (navigator.geolocation) {
@@ -107,11 +184,23 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => {
 
       {/* Panel de información del lugar seleccionado */}
       {selectedPlace && (
-        <div style={infoPanelStyle}>
-          <h2>{selectedPlace.nombre}</h2>
-          <p>{selectedPlace.descripcion}</p>
+      <div className="info-panel">
+        <h2>{selectedPlace.nombre}</h2>
+        <p className="description">{selectedPlace.descripcion}</p>
+        <div className="details">
+          <p><strong>Precio:</strong> {selectedPlace.precio}</p>
+          <p><strong>Categoría:</strong> {selectedPlace.categoria}</p>
+          <p><strong>Horario de Apertura:</strong> {selectedPlace.horario_apertura}</p>
+          <p><strong>Horario de Cierre:</strong> {selectedPlace.horario_cierre}</p>
+          <p><strong>Dirección:</strong> {selectedPlace.direccion}</p>
+          <p><strong>Contacto:</strong> {selectedPlace.contacto}</p>
+          <br></br>
+          <button className="update-location-btnn">Más información</button>
         </div>
-      )}
+      </div>)}
+
+
+
     </div>
   );
 };

diff --git a/geomapp/src/pages/mapa.jsx b/geomapp/src/pages/mapa.jsx
@@ -12,8 +12,13 @@ const Mapa = () => {
     const [selectedPlace, setSelectedPlace] = useState(null);
     const [userLocation, setUserLocation] = useState(null);
     const [mapInstance, setMapInstance] = useState(null); // Estado para almacenar el objeto map
+    const [showInfoPanel, setShowInfoPanel] = useState(false)
     const [filterType, setFilterType] = useState('');
 
+    const handleCloseClick = () => {
+      setShowInfoPanel(false); // Cierra el panel
+    };
+
 
   const rightPanelStyle = {
     width: '25%', // Ancho del panel lateral

diff --git a/geomapp/src/pages/servicios.jsx b/geomapp/src/pages/servicios.jsx
@@ -36,9 +36,11 @@ const Servicios = () => {
         <img src={turismo}></img>
         <br></br>
         <br></br>
+        <br></br>
         <button className="button" onClick={handleClick}>
           Publica tu servicio aquí
         </button>
+        <br></br>
     </div>
     <Footer />
 </div>

diff --git a/geomapp/src/pages/users/perfil.jsx b/geomapp/src/pages/users/perfil.jsx
@@ -19,9 +19,14 @@ const Perfil = () => {
           <h1>Mi Perfil</h1>
           <img src={user.picture} alt={user.name} className="perfil-avatar" />
           <h2>{user.name}</h2>
-          <p>Email: {user.email}</p>
-          {/* Puedes agregar más información de perfil aquí si es necesario */}
+          <p>Correo: {user.email}</p>
+          <p>Dirección: Calle Sin Salida 987, Santiago, Chile</p>
+          <p>Publicaciones activas: 3</p>
+          <p>Publicaciones por vencer: 1</p>
+          <p>Publicaciones vencidas: 1</p>
+
         </div>
+
         <Footer />
       </div>
     ) : (

diff --git a/geomapp/src/styles/mapa.css b/geomapp/src/styles/mapa.css
@@ -59,20 +59,10 @@
     align-items: left;
   }
 
-  .map-container {
-    position: relative;
-    width: 60%;
-    height: 600px;
-  }
+
 
   /* Contenedor principal que alinea mapa e información */
-.map-info-container {
-    display: flex;
-    align-items: flex-start; /* Alinea los elementos en la parte superior */
-    justify-content: space-between; /* Separa los elementos */
-    width: 100%; /* Utiliza todo el ancho disponible */
-    margin: 20px 0;
-  }
+
 
   /* Estilo del mapa */
 
@@ -81,7 +71,7 @@
 
   /* Estilo del contenedor de información */
   .info-lugar {
-    flex: 1;  /* Ocupa 1 parte del espacio disponible */
+    flex: 0;  /* Ocupa 1 parte del espacio disponible */
     height: 700px; /* Altura para alinear con el mapa */
     overflow-y: auto; /* Permite desplazamiento si el contenido es largo */
     padding: 15px;
@@ -107,10 +97,7 @@
     color: #555;
   }
 
-/* Botón "Centrar Mapa" (actualizado) */
-.center-map-btn {
-
-}
+
 
 
 .buttons-container {
@@ -123,6 +110,70 @@
 
 
 
+.info-panel h2 {
+  color: #714dc9; /* Título en morado */
+  font-family: 'Montserrat', sans-serif;
+  font-size: 24px;
+  margin-bottom: 15px;
+}
+
+.description {
+  color: #333;
+  font-size: 16px;
+  margin-bottom: 10px;
+
+}
+
+.details {
+  font-size: 15px;
+  text-align: left;
+}
+
+.details p {
+  color: #555;
+  margin: 5px 0;
+}
+
+.details p strong {
+  color: #ff914d; /* Texto destacado en color naranja */
+}
+
+.info-panel p {
+  font-family: 'Montserrat', sans-serif;
+}
+
+.info-panel p:last-child {
+  margin-bottom: 0;
+}
+
+.map-info-container {
+  display: flex;
+  align-items: stretch; /* Esto asegura que ambos hijos tengan la misma altura */
+  justify-content: space-between;
+  width: 100%;
+  margin: 20px 0;
+}
+
+.map-container {
+  flex: 1;  /* Ocupa el espacio disponible */
+  height: 700px; /* Altura específica para el mapa */
+}
+
+.info-panel {
+  width: 400px;  /* Fija el ancho del panel a 400px */
+  height: 660px; /* Misma altura que el mapa */
+  overflow-y: auto; /* Permite desplazamiento si el contenido es largo */
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  background-color: white; /* Fondo blanco para la legibilidad */
+}
+
+
+
+
+
 
 
 
diff --git a/geomapp/src/styles/users/perfil.css b/geomapp/src/styles/users/perfil.css
@@ -10,10 +10,51 @@ html, body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;  /* Asegura que el contenedor mínimo tenga la altura de la ventana */
-    flex: 1;  /* Permite que el contenedor crezca si es necesario */
+    flex: 2;  /* Permite que el contenedor crezca si es necesario */
 }
 
 .perfil-info {
-    flex: 1;  /* Esto asegura que el contenido interno expanda para empujar el footer hacia abajo */
-    /* Asegúrate de no tener un overflow oculto aquí */
+    max-width: 900px; /* Aumenta el ancho máximo para hacer la tarjeta más ancha */
+    width: 100%; /* Asegura que ocupe todo el ancho disponible */
+    margin: 30px auto;
+    padding: 30px; /* Aumenta el padding para que haya más espacio interior */
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+/* Otras clases permanecen igual */
+
+.perfil-title {
+    color: #714dc9;
+    margin-bottom: 20px;
+}
+
+.avatar-container {
+    margin: 20px 0;
+}
+
+.perfil-avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.perfil-name {
+    font-size: 22px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.perfil-item {
+    font-size: 16px;
+    color: #666;
+    margin-bottom: 5px;
+}
+
+.perfil-label {
+    font-weight: bold;
+    color: #333;
 }