Evento
-{evento && evento.description}
+{events[0].tipo}
+
-
+ {/*
+ */}
{/*
*/}
-
+
+
-
diff --git a/src/Components/Evento.jsx b/src/Components/Evento.jsx
index fd0cdc2..1083164 100644
--- a/src/Components/Evento.jsx
+++ b/src/Components/Evento.jsx
@@ -1,20 +1,26 @@
import React from "react";
-import Ambulancia from "../assets//IconsImages/Ambulancia.png";
-import { MapContainer, TileLayer, Marker, Popup, Circle } from "react-leaflet";
+import alerta from "../assets/alerta.png";
+import dateFormater from "../utils/dateFormater";
+import { NavLink } from "react-router-dom";
+
const Evento = ({ evento }) => {
return (
Fecha y Hora
-{evento && evento.date}
+{events[0].fecha}
Recomendaciones
-{evento && evento.recomendaciones}
-{"por programar"}
+Lugar
@@ -38,9 +43,11 @@ const Detalles = ({ evento }) => {Todo va a estar bien
+
- 
+ 
@@ -92,16 +104,16 @@ const Map = ({ latitud, longitud, eventosMapa }) => {
iconCreateFunction={createClusterCustomIcon}
>
{/*{ lat: marker.latitud, lng: marker.longitud } */}
- {eventosMapa &&
- markers.map((marker) => (
+ {events &&
+ events.map((marker) => (
- Ver más
+ Ver más
diff --git a/src/Components/MapEvents.jsx b/src/Components/MapEvents.jsx
index f702fa3..20672e6 100644
--- a/src/Components/MapEvents.jsx
+++ b/src/Components/MapEvents.jsx
@@ -1,13 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
import "leaflet/dist/leaflet.css";
import Map from "./Map";
import Evento from "./Evento";
+import useEventsStore from "../store/eventsData";
+
+
const MapEvents = ({ latitud, longitud, eventos }) => {
+ const {events} = useEventsStore();
+ useEffect(() => {
+ console.log(events, "eventos desde eventDetails");
+ }
+ ,[events]);
+
return (
);
diff --git a/src/store/eventsData.js b/src/store/eventsData.js
new file mode 100644
index 0000000..4d2fa1c
--- /dev/null
+++ b/src/store/eventsData.js
@@ -0,0 +1,10 @@
+import { create } from "zustand";
+
+const useEventsStore = create((set) => ({
+ events: [],
+ addEvent: (newEvent) => set((state) => ({
+ events: [...state.events, newEvent]
+ })),
+ }));
+
+ export default useEventsStore;
\ No newline at end of file
diff --git a/src/utils/dateFormater.js b/src/utils/dateFormater.js
new file mode 100644
index 0000000..50fefc2
--- /dev/null
+++ b/src/utils/dateFormater.js
@@ -0,0 +1,39 @@
+export default function tiempoTranscurrido(fechaString) {
+ // Parsear el string de fecha en un objeto Date
+ const fecha = new Date(fechaString);
+ const ahora = new Date();
+
+ // Calcular la diferencia en milisegundos
+ const diferencia = ahora - fecha;
+
+ // Definir los milisegundos en una unidad de tiempo
+ const unSegundo = 1000;
+ const unMinuto = unSegundo * 60;
+ const unaHora = unMinuto * 60;
+ const unDia = unaHora * 24;
+ const unaSemana = unDia * 7;
+ const unMes = unDia * 30;
+ const unAno = unDia * 365;
+
+ if (diferencia < unMinuto) {
+ return "Hace un momento";
+ } else if (diferencia < unaHora) {
+ const minutos = Math.floor(diferencia / unMinuto);
+ return `Hace ${minutos} ${minutos === 1 ? 'minuto' : 'minutos'}`;
+ } else if (diferencia < unDia) {
+ const horas = Math.floor(diferencia / unaHora);
+ return `Hace ${horas} ${horas === 1 ? 'hora' : 'horas'}`;
+ } else if (diferencia < unaSemana) {
+ const dias = Math.floor(diferencia / unDia);
+ return `Hace ${dias} ${dias === 1 ? 'día' : 'días'}`;
+ } else if (diferencia < unMes) {
+ const semanas = Math.floor(diferencia / unaSemana);
+ return `Hace ${semanas} ${semanas === 1 ? 'semana' : 'semanas'}`;
+ } else if (diferencia < unAno) {
+ const meses = Math.floor(diferencia / unMes);
+ return `Hace ${meses} ${meses === 1 ? 'mes' : 'meses'}`;
+ } else {
+ const anos = Math.floor(diferencia / unAno);
+ return `Hace ${anos} ${anos === 1 ? 'año' : 'años'}`;
+ }
+}
\ No newline at end of file
-
diff --git a/src/Components/Map.jsx b/src/Components/Map.jsx
index cd8f8c8..f9d9cf0 100644
--- a/src/Components/Map.jsx
+++ b/src/Components/Map.jsx
@@ -13,6 +13,14 @@ import EventosEspeciales from "../assets/IconsImages/EventosEspeciales.png";
import MaterialesPeligrosos from "../assets/IconsImages/MaterialesPeligrosos.png";
import Sismo from "../assets/IconsImages/Sismo.png";
import { NavLink, useNavigate } from "react-router-dom";
+import useEventsStore from "../store/eventsData";
+
+const customIcon = new Icon({
+ // iconUrl: "https://cdn-icons-png.flaticon.com/512/447/447031.png",
+ iconUrl: "https://cdn-icons-png.flaticon.com/512/447/447031.png",
+ iconSize: [38, 38], // size of the icon
+});
+/*
const customAbulanciaIcon = new Icon({
iconUrl: ambulanceIcon,
@@ -42,7 +50,8 @@ const customSismoIcon = new Icon({
iconUrl: Sismo,
iconSize: [38, 38], // size of the icon
});
-
+*/
+/*
let markers = [
{
geocode: [-12.092918, -77.025284],
@@ -62,7 +71,7 @@ let markers = [
type: customSismoIcon,
id: 3,
},
-];
+];*/
const createClusterCustomIcon = function (cluster) {
return new divIcon({
html: ``,
@@ -73,8 +82,11 @@ const createClusterCustomIcon = function (cluster) {
const Map = ({ latitud, longitud, eventosMapa }) => {
const position = [latitud, longitud];
+ const { events } = useEventsStore();
const navigate = useNavigate();
-
+ useEffect(() => {
+ console.log(events, "eventos desde map");
+ }, [events]);
return (
-
{evento.titulo}
-{evento.tiempo}
+
+
+ {evento.tipo.split(" ").slice(0, 2).join(" ")} +
+{dateFormater(evento.fecha)}
-
+
+
{evento.descripcion}
- +{evento.tipo}
+
-
- {eventos &&
- eventos.map((evento) =>
);
};
diff --git a/src/api/peticiones.api.js b/src/api/peticiones.api.js
new file mode 100644
index 0000000..a2fa0a0
--- /dev/null
+++ b/src/api/peticiones.api.js
@@ -0,0 +1,19 @@
+import { instanseAxios } from "./useAxios.js";
+
+export const getByStatus = async () => {
+ try {
+ const { data } = await instanseAxios.get(`/eventos/get_eventos_by_state`);
+ return data;
+ } catch (error) {
+ console.error(error);
+ }
+};
+
+export const getById = async (id) => {
+ try {
+ const { data } = await instanseAxios.get(`/eventos/get_evento/${id}`);
+ return data;
+ } catch (error) {
+ console.error(error);
+ }
+};
\ No newline at end of file
diff --git a/src/api/useAxios.js b/src/api/useAxios.js
new file mode 100644
index 0000000..e6ddc96
--- /dev/null
+++ b/src/api/useAxios.js
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export const instanseAxios = axios.create({
+ baseURL: "http://127.0.0.1:8000",
+ headers: {
+ "Content-Type": "application/json",
+ },
+});
\ No newline at end of file
diff --git a/src/assets/alerta.png b/src/assets/alerta.png
new file mode 100644
index 0000000..7980e1a
Binary files /dev/null and b/src/assets/alerta.png differ
diff --git a/src/assets/placeholder.png b/src/assets/placeholder.png
new file mode 100644
index 0000000..27e56f4
Binary files /dev/null and b/src/assets/placeholder.png differ
diff --git a/src/class.jsx b/src/class.jsx
index 1df90d6..b818169 100644
--- a/src/class.jsx
+++ b/src/class.jsx
@@ -6,12 +6,14 @@ import {
createBrowserRouter,
useLoaderData,
} from "react-router-dom";
-import Notification from "./Components/Notification";
+import { getById, getByStatus } from "./api/peticiones.api";
import { useEffect, useState } from "react";
import Detalles from "./Components/Detalles";
import MapEvents from "./Components/MapEvents";
import Loading from "./Components/Loading";
import { useNavigate } from "react-router-dom";
+import ContainerNotification from "./Components/ContainerNotification";
+import useEventsStore from "./store/eventsData";
const router = createBrowserRouter([
{
@@ -30,7 +32,32 @@ const router = createBrowserRouter([
]);
export default function App() {
- return
+
+ );
}
function Root() {
diff --git a/src/main.jsx b/src/main.jsx
index 6e83fd9..ffbdf84 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -4,7 +4,5 @@ import "./index.css";
import App from "./class";
ReactDOM.createRoot(document.getElementById("root")).render(
-