Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Post page info #20

Merged
merged 2 commits into from
Nov 4, 2024
Merged

Post page info #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0d3f92
fix: button asistir calendario
gustfernandez Nov 4, 2024
240457c
feat: view structure of publication
gustfernandez Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Router.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading