From a90986cf183ae51f947a078d50cc33207946ffcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 16:56:16 -0600 Subject: [PATCH 01/10] Se movio el componente que muestra las notificaciones hacia la raiz --- web/src/App.tsx | 9 +++++++++ web/src/components/image_dropzone/image_dropzone.tsx | 11 +---------- web/src/pages/home/admin_page/admin_home_page.tsx | 9 --------- .../home/super_admin_page/super_admin_home_page.tsx | 10 ---------- 4 files changed, 10 insertions(+), 29 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 8dff12f1..043cee41 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -3,6 +3,7 @@ import './App.css'; import { AuthContextProvider } from './context/auth_context'; import { MessageContextProvider } from './context/message_context'; import { router } from './router/router'; +import { ToastContainer } from 'react-toastify'; function App() { @@ -13,6 +14,14 @@ function App() { + ); } diff --git a/web/src/components/image_dropzone/image_dropzone.tsx b/web/src/components/image_dropzone/image_dropzone.tsx index 278a5b71..cb55cf7c 100644 --- a/web/src/components/image_dropzone/image_dropzone.tsx +++ b/web/src/components/image_dropzone/image_dropzone.tsx @@ -1,4 +1,4 @@ -import { ToastContainer, toast } from 'react-toastify'; +import { toast } from 'react-toastify'; import { useDropzone } from "react-dropzone"; import './assets/css/styles.css'; import { Dispatch, SetStateAction } from 'react'; @@ -52,15 +52,6 @@ export const ImageDropzone = ({setImage, preview, setPreview}: props) => {

Arrastra tu imagen o seleccionala dando click aquí.

)} - - ); } \ No newline at end of file diff --git a/web/src/pages/home/admin_page/admin_home_page.tsx b/web/src/pages/home/admin_page/admin_home_page.tsx index a8852459..53b1d26d 100644 --- a/web/src/pages/home/admin_page/admin_home_page.tsx +++ b/web/src/pages/home/admin_page/admin_home_page.tsx @@ -10,7 +10,6 @@ import { useAdminHomePage } from "../../../hooks/useAdminHomePage"; import { LoadingScreen } from "../../../components/loading_screen/loading_screen"; import { ErrorWindow } from "../../../components/error_window/error_window"; import { LoadingSpinner } from "../../../components/loading_spinner/loading_spinner"; -import { ToastContainer } from "react-toastify"; import { AdminTownInfo } from "../../../components/admin_town_info/admin_town_info"; import { AdminPanelPoiScreen } from "../../../components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen"; @@ -88,14 +87,6 @@ export const AdminHomePage = () => { } })()} -
diff --git a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx index 1cfdbf55..0b357fa9 100644 --- a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx +++ b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx @@ -7,7 +7,6 @@ import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header import { SuperadminPanelTownScreen } from "../../../components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen"; import { SuperadminPanelAdminScreen } from "../../../components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen"; import { LoadingScreen } from "../../../components/loading_screen/loading_screen"; -import { ToastContainer } from "react-toastify"; import { ErrorWindow } from "../../../components/error_window/error_window"; import { LoadingSpinner } from "../../../components/loading_spinner/loading_spinner"; import { SuperAdminSelectedPanel } from "../../../constants/selected_panel"; @@ -26,7 +25,6 @@ export const SuperAdminHomePage = () => { error, errorMessage, statesList, - } = useSuperAdminHomePage(); if(isLoading) return ; @@ -98,14 +96,6 @@ export const SuperAdminHomePage = () => { return null; } })()} -
-- GitLab From e674b9ab31b892ba76521639c24f764c64c752c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 18:03:27 -0600 Subject: [PATCH 02/10] Se agrega el valor de direccion --- backend/src/place/place.service.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/backend/src/place/place.service.ts b/backend/src/place/place.service.ts index 6f258c3c..d13a40dc 100644 --- a/backend/src/place/place.service.ts +++ b/backend/src/place/place.service.ts @@ -166,6 +166,7 @@ export class PlaceService { place.name = updatePlaceReqDto.name; place.openAt = updatePlaceReqDto.openAt; place.imageName = updatePlaceReqDto.image.filename; + place.address = updatePlaceReqDto.address; // Update categories const categories: Category[] = []; -- GitLab From 8576dea2ba8d3aa9ee30059476ed1f3ab73fa79e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 18:04:11 -0600 Subject: [PATCH 03/10] Se modifica para que se cierren las ventanas una vez se haya completado exitosamente una tarea --- web/src/hooks/useAdmin.tsx | 14 ++++++++----- web/src/hooks/useCategory.tsx | 17 ++++++++-------- web/src/hooks/usePlace.tsx | 36 +++++++++++++++++++--------------- web/src/hooks/useTown.tsx | 37 +++++++++++++++++++++++------------ 4 files changed, 62 insertions(+), 42 deletions(-) diff --git a/web/src/hooks/useAdmin.tsx b/web/src/hooks/useAdmin.tsx index b45bccd3..6d37e0ae 100644 --- a/web/src/hooks/useAdmin.tsx +++ b/web/src/hooks/useAdmin.tsx @@ -80,32 +80,36 @@ export const useAdmin = () => { handleSubmit, formState: {errors}, } = useForm({resolver}); - const [errorMessage, setErrorMessage] = useState(''); const onSubmit: SubmitHandler = (data: AdminFormValues) => { const fetch = async () => { try{ await adminRepository.registerAdmin(data); }catch(error: any){ + let errorMessage: string = "Ha ocurrido un error"; if(axios.isAxiosError(error)){ error as AxiosError; switch(error.code){ case(axios.AxiosError.ERR_BAD_REQUEST): - setErrorMessage("Acceso no autorizado"); + errorMessage = "Acceso no autorizado"; break; case(axios.AxiosError.ERR_NETWORK): - setErrorMessage("Conexión con el servidor fallida"); + errorMessage = "Conexión con el servidor fallida"; break; } } - throw new Error(); + throw new Error(errorMessage); } } toast.promise( fetch(),{ pending: "Subiendo datos...", success: "Los datos se han subido correctamente", - error: errorMessage + error: { + render({data}){ + return (data as Error).message; + } + } } ) } diff --git a/web/src/hooks/useCategory.tsx b/web/src/hooks/useCategory.tsx index 183e2f31..932de41a 100644 --- a/web/src/hooks/useCategory.tsx +++ b/web/src/hooks/useCategory.tsx @@ -43,7 +43,6 @@ export const useCategory = (forceRenderList?: () => void, handleClickToClose?: ( clearErrors, resetField, } = useForm({resolver}); - const [errorMessage, setErrorMessage] = useState(""); const [pending, setPending] = useState(false); const [isLoading, setIsLoading] = useState(false); const [categoriesList, setCategoriesList] = useState([]); @@ -59,28 +58,30 @@ export const useCategory = (forceRenderList?: () => void, handleClickToClose?: ( } }); }catch(error: any){ + let errorMessage: string = "Ha ocurrido un error"; if(axios.isAxiosError(error)){ error as AxiosError; switch(error.code){ case(axios.AxiosError.ERR_BAD_REQUEST): - setErrorMessage("Acceso no autorizado"); + errorMessage = "Acceso no autorizado"; break; case(axios.AxiosError.ERR_NETWORK): - setErrorMessage("Conexión con el servidor fallida"); - break; - default: - setErrorMessage(error.message); + errorMessage = "Conexión con el servidor fallida"; break; } } - throw new Error(); + throw new Error(errorMessage); } } toast.promise( fetch(),{ pending: "Subiendo datos...", success: "Los datos se han subido correctamente", - error: errorMessage + error: { + render({data}){ + return (data as Error).message; + } + } } ) } diff --git a/web/src/hooks/usePlace.tsx b/web/src/hooks/usePlace.tsx index 550365e1..ed2db530 100644 --- a/web/src/hooks/usePlace.tsx +++ b/web/src/hooks/usePlace.tsx @@ -145,7 +145,6 @@ setIsWindowActive?: (visibility: boolean) => void) => { resetField, getValues } = useForm({resolver}); - const [errorMessage, setErrorMessage] = useState(""); const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0); const [descriptions, setDescriptions] = useState(new Array(languaguesList.length).fill("")); const [availableDays, setAvailableDays] = useState(AvailableDays.WEEKEND); @@ -170,28 +169,30 @@ setIsWindowActive?: (visibility: boolean) => void) => { } }); }catch(error: any){ + let errorMessage: string = "Ha ocurrido un error"; if(axios.isAxiosError(error)){ error as AxiosError; switch(error.code){ case(axios.AxiosError.ERR_BAD_REQUEST): - setErrorMessage("Acceso no autorizado"); + errorMessage = "Acceso no autorizado"; break; case(axios.AxiosError.ERR_NETWORK): - setErrorMessage("Conexión con el servidor fallida"); - break; - default: - setErrorMessage(error.message); + errorMessage = "Conexión con el servidor fallida"; break; } } - throw new Error(); + throw new Error(errorMessage); } } toast.promise( fetch(),{ pending: "Subiendo datos...", success: "Los datos se han subido correctamente", - error: errorMessage + error: { + render({data}){ + return (data as Error).message; + } + } } ) } @@ -200,32 +201,35 @@ setIsWindowActive?: (visibility: boolean) => void) => { const fetch = async () => { try{ await placeRepository.updatePlace(data); - if(forceRenderList){ + if(forceRenderList && setIsWindowActive){ forceRenderList(); + setIsWindowActive(false); } }catch(error: any){ + let errorMessage: string = "Ha ocurrido un error"; if(axios.isAxiosError(error)){ error as AxiosError; switch(error.code){ case(axios.AxiosError.ERR_BAD_REQUEST): - setErrorMessage("Acceso no autorizado"); + errorMessage = "Acceso no autorizado"; break; case(axios.AxiosError.ERR_NETWORK): - setErrorMessage("Conexión con el servidor fallida"); - break; - default: - setErrorMessage(error.message); + errorMessage = "Conexión con el servidor fallida"; break; } } - throw new Error(); + throw new Error(errorMessage); } } toast.promise( fetch(),{ pending: "Subiendo datos...", success: "Los datos se han subido correctamente", - error: errorMessage + error: { + render({data}){ + return (data as Error).message; + } + } } ) } diff --git a/web/src/hooks/useTown.tsx b/web/src/hooks/useTown.tsx index 3d7a7587..cbc1dde8 100644 --- a/web/src/hooks/useTown.tsx +++ b/web/src/hooks/useTown.tsx @@ -55,7 +55,7 @@ const resolver: Resolver = async (data) => { }; }; -export const useTown = (forceRenderList?: () => void) => { +export const useTown = (forceRenderList?: () => void, closeActualWindow?: () => void) => { const { register, handleSubmit, @@ -63,67 +63,78 @@ export const useTown = (forceRenderList?: () => void) => { setValue } = useForm({resolver}); const [townsList, setTownsList] = useState([]); - const [errorMessage, setErrorMessage] = useState(""); const {getStateById} = useGetStatesList(); const onSubmitRegister: SubmitHandler = (data: Town) => { const fetch = async () => { try{ await townRepository.registerTown(data); - if(forceRenderList){ + if(forceRenderList && closeActualWindow){ forceRenderList(); + closeActualWindow(); } }catch(error: any){ + let errorMessage: string = "Ha ocurrido un error"; if(axios.isAxiosError(error)){ error as AxiosError; switch(error.code){ case(axios.AxiosError.ERR_BAD_REQUEST): - setErrorMessage("Acceso no autorizado"); + errorMessage = "Acceso no autorizado"; break; case(axios.AxiosError.ERR_NETWORK): - setErrorMessage("Conexión con el servidor fallida"); + errorMessage = "Conexión con el servidor fallida"; break; } } - throw new Error(); + throw new Error(errorMessage); } } toast.promise( fetch(),{ pending: "Subiendo datos...", success: "Los datos se han subido correctamente", - error: errorMessage + error: { + render({data}){ + return (data as Error).message; + } + } } - ) + ); } const onSubmitUpdate: SubmitHandler = (data: Town) => { const fetch = async () => { try{ await townRepository.updateTown(data); - if(forceRenderList){ + if(forceRenderList && closeActualWindow){ forceRenderList(); + closeActualWindow(); } }catch(error: any){ + let errorMessage: string = "Ha ocurrido un error"; if(axios.isAxiosError(error)){ error as AxiosError; switch(error.code){ case(axios.AxiosError.ERR_BAD_REQUEST): - setErrorMessage("Acceso no autorizado"); + errorMessage = "Acceso no autorizado"; break; case(axios.AxiosError.ERR_NETWORK): - setErrorMessage("Conexión con el servidor fallida"); + errorMessage = "Conexión con el servidor fallida"; break; } } - throw new Error(); + throw new Error(errorMessage); } } toast.promise( fetch(),{ pending: "Subiendo datos...", success: "Los datos se han subido correctamente", - error: errorMessage + error: { + render({data}){ + return (data as Error).message; + } + } } ) } -- GitLab From 431d550a327e35928c932bc88cf7a6ac59cfa195 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 18:06:34 -0600 Subject: [PATCH 04/10] Se modifica para que se cierre la ventana cuando se actualice o registre de manera exitosa --- .../sa_panel_town_register.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx index f7726b29..5717fed5 100644 --- a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx +++ b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx @@ -19,6 +19,18 @@ interface props { export const SuperadminPanelTownRegister = ({setWindowActive, statesList, forceRenderList, isRegister, form, setActualWindowActive }:props) => { + const [isEnglish, setIsEnglish] = useState(false); + const [spanishDescription, setSpanishDescription] = useState(""); + const [englishDescription, setEnglishDescription] = useState(""); + const [preview, setPreview] = useState(null); + const [image, setImage] = useState(null); + const [actualWindowVisibility, setActualWindowVisibility] = useState(true); + + const closeActualWindow = () => { + setWindowActive(false); + setActualWindowActive(false); + } + const { register, setValue, @@ -26,12 +38,7 @@ export const SuperadminPanelTownRegister = ({setWindowActive, statesList, forceR handleSubmit, onSubmitRegister, onSubmitUpdate, - } = useTown(forceRenderList); - const [isEnglish, setIsEnglish] = useState(false); - const [spanishDescription, setSpanishDescription] = useState(""); - const [englishDescription, setEnglishDescription] = useState(""); - const [preview, setPreview] = useState(null); - const [image, setImage] = useState(null); + } = useTown(forceRenderList, closeActualWindow); useEffect(()=> { if(!isRegister && form){ @@ -65,7 +72,7 @@ export const SuperadminPanelTownRegister = ({setWindowActive, statesList, forceR
{isRegister ? "Registra el pueblo mágico": "Actualiza tu pueblo mágico"} {setWindowActive(false); setActualWindowActive(false);}}/> + onClick={() => closeActualWindow()}/>
-- GitLab From aec5fd013626b7af3eab6be324f79821fce173b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 18:06:59 -0600 Subject: [PATCH 05/10] Se mofica para que haya un cargador antes de mostrar los datos --- .../admin_panel_place_register.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx index 2b123a85..9a2e93cc 100644 --- a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx +++ b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx @@ -47,7 +47,7 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories } = usePlace(forceRenderList, setWindowVisibility); const [clickedCategories, setClickedCategories] = useState(new Array(categoriesList.length).fill(false)); const [isLoading, setIsLoading] = useState(false); - const [actualPlace, setActualPlace] = useState(EmptyPlace); + const [actualPlace, setActualPlace] = useState(null); const [openHourInput, setOpenHourInput] = useState(''); const [closeHourInput, setCloseHourInput] = useState(''); @@ -126,7 +126,7 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories onClick={() => setWindowVisibility(false)}/>
- {isLoading + {isLoading || (!isRegister && actualPlace===null) ? : @@ -223,7 +223,7 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories > {availableDaysList.map((option, index) => { return ( - + ); })} @@ -237,13 +237,13 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories Inicio Cierre
@@ -277,7 +277,7 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories

{errors.categoriesId?.message}

- +

{errors.imagesList?.message}

-- GitLab From 9b762d2a53c64b72db03bc3198f6de8de7179e2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 18:07:53 -0600 Subject: [PATCH 06/10] Se elimina variables innecesarias --- .../admin_panel_poi_register/admin_panel_poi_register.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web/src/components/admin_panel_poi/admin_panel_poi_register/admin_panel_poi_register.tsx b/web/src/components/admin_panel_poi/admin_panel_poi_register/admin_panel_poi_register.tsx index d8f653e1..25b25c85 100644 --- a/web/src/components/admin_panel_poi/admin_panel_poi_register/admin_panel_poi_register.tsx +++ b/web/src/components/admin_panel_poi/admin_panel_poi_register/admin_panel_poi_register.tsx @@ -35,7 +35,6 @@ export const AdminPanelPoiRegister = ({setWindowVisibility, idTown,forceRenderLi setLanguageDirectionsIndexSelected, } = usePointOfInterest(forceRenderList, setWindowVisibility); const [isLoading, setIsLoading] = useState(false); - const [actualPOI, setActualPOI] = useState(EmptyPointOfInterest); const [preview, setPreview] = useState(null); const [image, setImage] = useState(null); const { @@ -56,7 +55,6 @@ export const AdminPanelPoiRegister = ({setWindowVisibility, idTown,forceRenderLi if (!isRegister && form) { const pointGetted = await getPointById(form.idPoint || 0); if(pointGetted){ - setActualPOI(pointGetted); setValue('idPoint', pointGetted.idPlace); setValue('name', pointGetted.name); setValue('contentEN', pointGetted.contentEN); @@ -194,7 +192,7 @@ export const AdminPanelPoiRegister = ({setWindowVisibility, idTown,forceRenderLi
- Nombre del punto de interés + Imagén relacionada

{errors.image?.message}

-- GitLab From a8e6aa74e6b0198be0689f2f9472564f39f04ab0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx> Date: Mon, 9 Sep 2024 18:36:20 -0600 Subject: [PATCH 07/10] =?UTF-8?q?Se=20crea=20un=20componente=20y=20sus=20e?= =?UTF-8?q?stilos=20para=20visualizar=20la=20informaci=C3=B3n=20de=20un=20?= =?UTF-8?q?punto=20de=20interes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin_panel_poi_list.tsx | 26 ++- .../admin_panel_poi_screen.tsx | 26 ++- .../admin_panel_poi_viewer.tsx | 176 ++++++++++++++++++ .../assets/css/styles.css | 113 +++++++++++ 4 files changed, 324 insertions(+), 17 deletions(-) create mode 100644 web/src/components/admin_panel_poi/admin_panel_poi_viewer/admin_panel_poi_viewer.tsx create mode 100644 web/src/components/admin_panel_poi/admin_panel_poi_viewer/assets/css/styles.css diff --git a/web/src/components/admin_panel_poi/admin_panel_poi_list/admin_panel_poi_list.tsx b/web/src/components/admin_panel_poi/admin_panel_poi_list/admin_panel_poi_list.tsx index 0ec33afc..6ec09d94 100644 --- a/web/src/components/admin_panel_poi/admin_panel_poi_list/admin_panel_poi_list.tsx +++ b/web/src/components/admin_panel_poi/admin_panel_poi_list/admin_panel_poi_list.tsx @@ -2,7 +2,7 @@ import DataTable, { TableColumn } from 'react-data-table-component'; import { usePlace } from '../../../hooks/usePlace'; import './assets/css/styles.css'; import { LoadingSpinner } from '../../loading_spinner/loading_spinner'; -import { faEdit } from '@fortawesome/free-solid-svg-icons'; +import { faEye } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { usePointOfInterest } from '../../../hooks/usePointOfInterest'; @@ -11,12 +11,11 @@ import { PointOfInterest } from '../../../infraestructure/entities/poi'; interface props{ idTown: number; isWindowActive: boolean; - setWindowVisibility: (visibility: boolean) => void; setActualPoint: Dispatch>; - setIsRegisterPane: Dispatch>; + setWindowVisibilityViewer: (visibility: boolean) => void; } -export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => { +export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWindowVisibilityViewer}: props) => { const [isLoading, setIsLoading] = useState(false); const { placeList, @@ -29,6 +28,11 @@ export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => { poiList } = usePointOfInterest(); + const handleViewSelectedPoint = (point: PointOfInterest) => { + setActualPoint(point); + setWindowVisibilityViewer(true); + } + const columns : TableColumn[] = [ { name: "Identificador", @@ -41,7 +45,7 @@ export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => { sortable: true }, { - name: "Descripción", + name: "Descripción", selector: row => row.contentES, sortable: true }, @@ -49,8 +53,12 @@ export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => { name: "Acciones", cell: (row) => { return ( - { + if(!isWindowActive){ + handleViewSelectedPoint(row); + } + }} /> ); } @@ -99,11 +107,11 @@ export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => {
} - columns={columns} data={poiList} selectableRows className="data_table" + columns={columns} data={poiList} selectableRows />
diff --git a/web/src/components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen.tsx b/web/src/components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen.tsx index 57d32b8f..3bc6ab52 100644 --- a/web/src/components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen.tsx +++ b/web/src/components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen.tsx @@ -4,6 +4,7 @@ import "./assets/css/styles.css"; import { AdminPanelPoiList } from "../admin_panel_poi_list/admin_panel_poi_list"; import { Town } from "../../../infraestructure/entities/town"; import { PointOfInterest } from "../../../infraestructure/entities/poi"; +import { AdminPanelPoiViewer } from "../admin_panel_poi_viewer/admin_panel_poi_viewer"; interface props { isWindowActive: boolean; @@ -15,15 +16,21 @@ export const AdminPanelPoiScreen = ({isWindowActive,setIsWindowActive, town}: pr const [renderCount, setRenderCount] = useState(0); const [isRegisterPane, setIsRegisterPane] = useState(true); const [actualPoint, setActualPoint] = useState(); - const [isPlaceRegisterWindowActive, setIsPlaceRegisterWindowActive] = useState(false); + const [isRegisterWindowActive, setIsRegisterWindowActive] = useState(false); + const [isViewerWindowActive, setIsViewerWindowActive] = useState(false); const forceRenderList = () =>{ setRenderCount(prevCount => prevCount + 1); setIsWindowActive(false); } - const setWindowVisibility = (visibility: boolean) => { - setIsPlaceRegisterWindowActive(visibility); + const setWindowVisibilityRegister = (visibility: boolean) => { + setIsRegisterWindowActive(visibility); + setIsWindowActive(visibility); + } + + const setWindowVisibilityViewer = (visibility: boolean) => { + setIsViewerWindowActive(visibility); setIsWindowActive(visibility); } @@ -35,7 +42,7 @@ export const AdminPanelPoiScreen = ({isWindowActive,setIsWindowActive, town}: pr disabled={isWindowActive || !town} onClick={() => { setIsRegisterPane(true); - setWindowVisibility(true); + setWindowVisibilityRegister(true); }} > Registrar punto @@ -43,17 +50,20 @@ export const AdminPanelPoiScreen = ({isWindowActive,setIsWindowActive, town}: pr
{ - isPlaceRegisterWindowActive && } + { + isViewerWindowActive && + } + setActualPoint={setActualPoint} setWindowVisibilityViewer={setWindowVisibilityViewer} + isWindowActive={isWindowActive}/>
); diff --git a/web/src/components/admin_panel_poi/admin_panel_poi_viewer/admin_panel_poi_viewer.tsx b/web/src/components/admin_panel_poi/admin_panel_poi_viewer/admin_panel_poi_viewer.tsx new file mode 100644 index 00000000..e06694a0 --- /dev/null +++ b/web/src/components/admin_panel_poi/admin_panel_poi_viewer/admin_panel_poi_viewer.tsx @@ -0,0 +1,176 @@ +import { useEffect, useState } from "react"; +import { PointOfInterest } from "../../../infraestructure/entities/poi"; +import { usePointOfInterest } from "../../../hooks/usePointOfInterest"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faWindowClose } from "@fortawesome/free-solid-svg-icons"; +import { LoadingScreen } from "../../loading_screen/loading_screen"; +import { languaguesList } from "../../../constants/languages"; +import { usePlace } from "../../../hooks/usePlace"; +import './assets/css/styles.css'; + +interface props{ + pointId: number; + setWindowVisibility: (visibility: boolean) => void; +} + +export const AdminPanelPoiViewer = ({pointId, setWindowVisibility}: props) => { + const [point, setPoint] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0); + const [languageDirectionsIndexSelected, setLanguageDirectionsIndexSelected] = useState(0); + const [descriptions, setDescriptions] = useState(new Array(languaguesList.length).fill("")); + const [directions, setDirections] = useState(new Array(languaguesList.length).fill("")); + const [placeName, setPlaceName] = useState(''); + + const { + getPointById + } = usePointOfInterest(); + + const{ + getPlaceById + } = usePlace(); + + useEffect(()=>{ + fetchData(); + },[]); + + const fetchData = async () => { + setIsLoading(true); + const result = await getPointById(pointId); + if(result){ + setPoint(result); + const newDescriptions = descriptions.map((element, index) => { + if(index===0){ + return result.contentES; + }else if(index === 1){ + return result.contentEN; + }else{ + return element; + } + }); + setDescriptions(newDescriptions); + + const newDirections = directions.map((element, index) => { + if(index===0){ + return result.directionsES; + }else if(index === 1){ + return result.directionsEN; + }else{ + return element; + } + }); + setDirections(newDirections); + + const place = await getPlaceById(result.idPlace); + if(place){ + setPlaceName(place.name); + } + } + setIsLoading(false); + } + + return ( +
+
+ Información del punto de interés + setWindowVisibility(false)}/> +
+ {isLoading || point === null + ? + + : +
+
+
+
+ Nombre del punto de interés +
+ +
+
+
+ Descripción del punto de interés + +
+ { + languaguesList.map((language, index) => { + if(index===languageDescriptionIndexSelected){ + return ( +