Skip to content

Commit

Permalink
Merge pull request #20 from iic2154-uc-cl/post-page-info
Browse files Browse the repository at this point in the history 
Post page info
  • Loading branch information
@gustfernandez
gustfernandez authored Nov 4, 2024
2 parents 62af5e3 + 240457c commit 6e96eb3
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 27 deletions.
4 changes: 2 additions & 2 deletions src/Router.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 NewPublicacionInfo from './components/NewPublicacionInfo.jsx';

function Router() {

Expand All @@ -30,8 +31,7 @@ function Router() {
<Route path="/notificaciones" element={<Notification />} />
<Route path="/mapa-navegacion" element={<NewMapa />} />
<Route path="/calendario" element={<Calendario />} />


<Route path="/publicacion/:id" element={<NewPublicacionInfo />} />

</Routes>
</BrowserRouter>
Expand Down
101 changes: 91 additions & 10 deletions src/components/NewPublicacionInfo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import React, {useState} from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import { Calendar, ChevronLeft, ChevronRight, MapPin } from 'lucide-react';
import { useEffect } from 'react';
import { MapPin } from 'lucide-react'
import lugares from './lugares';
import '../styles/calendario.css';
import { useParams } from 'react-router-dom';

const NewPublicacionInfo = ({ id }) => {
const NewPublicacionInfo = ({id}) => {
// definir un estado para guardar la información de la publicación
const [publicacion, setPublicacion] = useState(null);
//const [publicacion, setPublicacion] = useState(null);

/*
// realizar get request a la API para obtener la información de la publicación con el id
useEffect(() => {
fetch(`http://localhost:3000/publicaciones/${id}`)
Expand All @@ -20,17 +24,94 @@ const NewPublicacionInfo = ({ id }) => {
});
}
, [id]);
*/
// si id es undefined
let pid = id;
// obtener el id de la publicación de la URL. pasar a int
if (!pid) {
pid = parseInt(useParams().id);
}

// seleccionar publicacion con el id
console.log("id: ", pid);
const selectedEvent = lugares.find(lugar => lugar.id === pid);

// si id es undefined, no renderizamos nada
return (
id ? (
<div className="publicacion-info">
<h2>Información de la publicación</h2>
<p>Id: {id}</p>
<p></p>
<>
<Navbar />
<div className="event-page">
{selectedEvent ? (
<div className='event-info'>
<div className='event-image-container'>
<img src={selectedEvent.imagen} alt={selectedEvent.nombre} className='event-image' />
</div>
<div className='event-text-container'>
{/* titulo */}
<p className='event-title'>{selectedEvent.nombre}</p>
{/* subcategoría */}
<p className='event-subtitle'>{selectedEvent.subcategoria}</p>

{/* rating ★★★☆☆☆ */}
<p className='event-rating'>
{Array.from({ length: 5 }, (_, index) => (
<span key={index}>
{selectedEvent.rating - index >= 1 ? '★' : selectedEvent.rating - index > 0 ? '☆' : '☆'}
</span>
))} ({selectedEvent.rating} estrellas)
</p>

{/* Fecha - Hora */}
<p className='event-description'>Horario: {selectedEvent.horario_apertura} - {selectedEvent.horario_cierre}</p>

{/* dirección */}
<div className='event-container'>
<MapPin size={50} />
<p className='event-description'>{selectedEvent.direccion}</p>
</div>
{/* boton de registrarse / cancelar */}
<button className='event-button'>
Guardar
</button>

{/* Descripción */}
<p className='event-subtitle'>Información sobre el evento</p>
<hr /> {/* linea separadora */}
<p className='event-description'> {selectedEvent.descripcion}</p>
<p className='event-description'>Contacto: {selectedEvent.contacto}</p>

{/* reviews */}
<p className='event-subtitle'>Reseñas</p>
<hr /> {/* linea separadora */}
{selectedEvent.reseñas.map((review, index) => (
<div key={index} className='event-reviews'>
<p className='event-description'>
{review.puntuacion} ★ - {review.comentario}
</p>
</div>
))}
{/* link a Google Maps */}
<a
href={`https://www.google.com/maps/search/?api=1&query=${selectedEvent.lat},${selectedEvent.lng}`}
className='event-subtitle'
target='_blank'
rel='noreferrer'
>
Ver ubicación en Google Maps
</a>
<hr /> {/* linea separadora */}
{/* Reportar */}
<button className='little-button'>Reportar</button>
</div>
</div>
) : (
<h2>Publicación no encontrada</h2>
)}
</div>
) : null
<Footer />
</>
)
}



export default NewPublicacionInfo
54 changes: 46 additions & 8 deletions src/components/lugares.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { rating } from "@material-tailwind/react";
import { sub } from "date-fns";

const lugares = [
// HOSPEDAJE
{
id: 1,
nombre: 'Cabañas El Patagón',
lat: -45.4150,
lng: -73.1221,
Expand All @@ -17,9 +16,14 @@ const lugares = [
horario_apertura: '24 horas',
horario_cierre: '24 horas',
imagen: 'https://www.chaletcerrocastillo.com/wp-content/uploads/2020/08/chalet-.jpg',
rating: 4.5
rating: 4.5,
reseñas: [
{ autor: 'Juan Pérez', comentario: 'Increíble lugar para relajarse y desconectar del mundo.', puntuacion: 5 },
{ autor: 'Carla Soto', comentario: 'Muy cómodo y excelente atención. La naturaleza es impresionante.', puntuacion: 4 }
]
},
{
id: 2,
nombre: 'Hostal La Cabaña',
lat: -29.5173,
lng: -71.6684,
Expand All @@ -33,9 +37,14 @@ const lugares = [
horario_apertura: '24 horas',
horario_cierre: '24 horas',
imagen: 'https://dynamic-media-cdn.tripadvisor.com/media/photo-o/18/35/2e/46/cosmo-elqui-valley.jpg?w=1200&h=-1&s=1',
rating: 4.2
rating: 4.2,
reseñas: [
{ autor: 'Pedro Lagos', comentario: 'Lugar muy acogedor y limpio. Perfecto para descansar.', puntuacion: 4 },
{ autor: 'Ana Torres', comentario: 'Me encantó el ambiente y la ubicación. Definitivamente volveré.', puntuacion: 5 }
]
},
{
{
id: 3,
nombre: 'Refugio de montaña Los Cóndores',
lat: -41.0401,
lng: -72.0761,
Expand All @@ -49,11 +58,16 @@ const lugares = [
horario_apertura: '24 horas',
horario_cierre: '24 horas',
imagen: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6cUNSEn5h0esrXV4MVwCF5WWPnFCmqtcuA&s',
rating: 4.0
rating: 4.0,
reseñas: [
{ autor: 'Lucía Fernández', comentario: 'Perfecto para los amantes de la naturaleza. Muy básico, pero hermoso.', puntuacion: 4 },
{ autor: 'Daniel Muñoz', comentario: 'Buen lugar para una escapada, aunque algo difícil de acceder.', puntuacion: 4 }
]
},

// CENTROS DEPORTIVOS
{
id: 4,
nombre: 'Centro Deportivo Valle del Elqui',
lat: -30.0580,
lng: -70.7314,
Expand All @@ -67,9 +81,14 @@ const lugares = [
horario_apertura: '08:00 AM',
horario_cierre: '08:00 PM',
imagen: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjTW-VOWKLZrxP-o_em3DDN-PUKQLy32WtMg&s',
rating: 5.0
rating: 5.0,
reseñas: [
{ autor: 'Carlos Sandoval', comentario: 'Excelente centro deportivo, muy bien equipado.', puntuacion: 5 },
{ autor: 'Marta Díaz', comentario: 'Las instalaciones son de primera. Ideal para entrenar.', puntuacion: 5 }
]
},
{
id: 5,
nombre: 'Club Deportivo Río Claro',
lat: -35.5794,
lng: -71.0542,
Expand All @@ -83,11 +102,16 @@ const lugares = [
horario_apertura: '09:00 AM',
horario_cierre: '09:00 PM',
imagen: 'https://ralfvanveen.com/wp-content/uploads/2021/06/Placeholder-_-Glossary.svg',
rating: 4.8
rating: 4.8,
reseñas: [
{ autor: 'Roberto Peña', comentario: 'Lugar perfecto para ir en familia y hacer deporte.', puntuacion: 4.5 },
{ autor: 'Sofía Vargas', comentario: 'Gran ambiente y personal muy amable. Recomendado.', puntuacion: 5 }
]
},

// EVENTOS
{
id: 6,
nombre: 'Fiesta del Viento',
lat: -35.7533,
lng: -71.7033,
Expand All @@ -104,6 +128,7 @@ const lugares = [
rating: 's/n'
},
{
id: 7,
nombre: 'Feria Costumbrista de Las Cabras',
lat: -34.6581,
lng: -70.4460,
Expand All @@ -122,6 +147,7 @@ const lugares = [

// GASTRONOMIA
{
id: 8,
nombre: 'Restaurante Casa de Campo',
lat: -34.1204,
lng: -70.8196,
Expand All @@ -138,6 +164,7 @@ const lugares = [
rating: 4.3
},
{
id: 9,
nombre: 'Comida Típica del Sur',
lat: -39.6286,
lng: -73.1557,
Expand All @@ -156,6 +183,7 @@ const lugares = [

// SERVICIOS COMUNITARIOS
{
id: 10,
nombre: 'Centro Comunitario de Coyhaique',
lat: -45.5712,
lng: -72.0655,
Expand All @@ -169,6 +197,7 @@ const lugares = [
horario_cierre: '05:00 PM'
},
{
id: 11,
nombre: 'Junta de Vecinos San Vicente',
lat: -33.6902,
lng: -70.7806,
Expand All @@ -184,6 +213,7 @@ const lugares = [

// OFICIOS
{
id: 12,
nombre: 'Carpintería La Madera',
lat: -36.7276,
lng: -72.0521,
Expand All @@ -197,6 +227,7 @@ const lugares = [
horario_cierre: '06:00 PM'
},
{
id: 13,
nombre: 'Maestro Chasquilla El Alto',
lat: -33.6143,
lng: -70.4552,
Expand All @@ -212,6 +243,7 @@ const lugares = [

// TURISMO
{
id: 14,
nombre: 'Parque Nacional Altos de Lircay',
lat: -35.7240,
lng: -71.3924,
Expand All @@ -228,6 +260,7 @@ const lugares = [
rating: 4.9
},
{
id: 15,
nombre: 'Salto del Laja',
lat: -37.2244,
lng: -71.3010,
Expand All @@ -241,6 +274,7 @@ const lugares = [
horario_cierre: '24 horas'
},
{
id: 16,
nombre: 'Laguna del Laja',
lat: -37.7111,
lng: -71.5293,
Expand All @@ -254,6 +288,7 @@ const lugares = [
horario_cierre: '06:00 PM'
},
{
id: 17,
nombre: 'Termas de Chillán',
lat: -36.8532,
lng: -71.4482,
Expand All @@ -270,6 +305,7 @@ const lugares = [
rating: 5
},
{
id: 18,
nombre: 'Cerro San Pedro',
lat: -40.2500,
lng: -73.0833,
Expand All @@ -283,6 +319,7 @@ const lugares = [
horario_cierre: '24 horas'
},
{
id: 19,
nombre: 'Aldea Los Ríos',
lat: -39.7330,
lng: -73.1260,
Expand All @@ -296,6 +333,7 @@ const lugares = [
horario_cierre: '24 horas'
},
{
id: 20,
nombre: 'Río Yelcho',
lat: -43.4281,
lng: -72.9292,
Expand Down
16 changes: 11 additions & 5 deletions src/pages/calendario.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Publicaciones from '../components/NewPublicaciones';
const Calendario = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
const [selectedEvent, setSelectedEvent] = useState(null);
const [selectedEventAssist, setSelectedEventAssist] = useState(true);
const [assistStatus, setAssistStatus] = useState({});

// Datos de ejemplo
const events = [
Expand Down Expand Up @@ -129,8 +129,13 @@ const Calendario = () => {
};

// boton de registrarse / cancelar
const handleEventAsist = () => {
setSelectedEventAssist(!selectedEventAssist);
const handleEventAssist = () => {
if (selectedEvent) {
setAssistStatus(prevStatus => ({
...prevStatus,
[selectedEvent.nombre]: !prevStatus[selectedEvent.nombre]
}));
}
};

// pasar al mes siguiente
Expand Down Expand Up @@ -273,8 +278,9 @@ const Calendario = () => {
</div>

{/* boton de registrarse / cancelar */}
<button className='event-button'>
{selectedEventAssist ? 'Cancelar Asistencia' : 'Registrarse'}
<button className={`event-button ${assistStatus[selectedEvent.nombre]? 'cancel-button' : ''}`} onClick={handleEventAssist}>

{assistStatus[selectedEvent.nombre] ? 'Cancelar Asistencia' : 'Registrarse'}
</button>

{/* Descripción */}
Expand Down
Loading

0 comments on commit 6e96eb3

Please sign in to comment.