Se crea un componente y sus estilos para visualizar la información de un punto de interes (a8e6aa74) · Commits · Lorenzo Trujillo Rojas / PueblosMagicosConIAFK

web/src/components/admin_panel_poi/admin_panel_poi_list/admin_panel_poi_list.tsx

+17 −9

Original line number	Diff line number	Diff line
		@@ -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<SetStateAction<PointOfInterest \| undefined>>;
		setIsRegisterPane: Dispatch<SetStateAction<boolean>>;
		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<PointOfInterest>[] = [
		{
		name: "Identificador",
		@@ -49,8 +53,12 @@ export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => {
		name: "Acciones",
		cell: (row) => {
		return (
		<FontAwesomeIcon style={{cursor: 'pointer'}} icon={faEdit}

		<FontAwesomeIcon style={{cursor: 'pointer'}} icon={faEye}
		onClick={()=> {
		if(!isWindowActive){
		handleViewSelectedPoint(row);
		}
		}}
		/>
		);
		}
		@@ -103,7 +111,7 @@ export const AdminPanelPoiList = ({idTown, isWindowActive}: props) => {
		progressComponent={
		<LoadingSpinner style={{display: 'flex'}}/>
		}
		columns={columns} data={poiList} selectableRows className="data_table"
		columns={columns} data={poiList} selectableRows
		/>
		</div>
		</div>

web/src/components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen.tsx

+18 −8

Original line number	Diff line number	Diff line
		@@ -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<PointOfInterest \| undefined>();
		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
		</div>
		<div className="panel_poi_body">
		{
		isPlaceRegisterWindowActive && <AdminPanelPoiRegister
		isRegisterWindowActive && <AdminPanelPoiRegister
		idTown={town?.idTown \|\| -1}
		setWindowVisibility={setWindowVisibility}
		setWindowVisibility={setWindowVisibilityRegister}
		forceRenderList={forceRenderList}
		isRegister={isRegisterPane}
		form={actualPoint}
		/>
		}
		{
		isViewerWindowActive && <AdminPanelPoiViewer pointId={actualPoint?.idPoint \|\| -1} setWindowVisibility={setWindowVisibilityViewer}/>
		}
		<AdminPanelPoiList idTown={town?.idTown \|\| -1} key={renderCount}
		isWindowActive={isWindowActive} setWindowVisibility={setWindowVisibility}
		setActualPoint={setActualPoint} setIsRegisterPane={setIsRegisterPane}/>
		setActualPoint={setActualPoint} setWindowVisibilityViewer={setWindowVisibilityViewer}
		isWindowActive={isWindowActive}/>
		</div>
		</div>
		);

web/src/components/admin_panel_poi/admin_panel_poi_viewer/admin_panel_poi_viewer.tsx

0 → 100644

+176 −0

Original line number	Diff line number	Diff line
		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<PointOfInterest \| null>(null);
		const [isLoading, setIsLoading] = useState(false);
		const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0);
		const [languageDirectionsIndexSelected, setLanguageDirectionsIndexSelected] = useState(0);
		const [descriptions, setDescriptions] = useState<string[]>(new Array(languaguesList.length).fill(""));
		const [directions, setDirections] = useState<string[]>(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 (
		<div className="poi_viewer_wrap">
		<div className="poi_viewer_header">
		Información del punto de interés
		<FontAwesomeIcon icon={faWindowClose} className="close_btn"
		onClick={() => setWindowVisibility(false)}/>
		</div>
		{isLoading \|\| point === null
		?
		<LoadingScreen/>
		:
		<div className="poi_viewer_body">
		<div className="inputs_container">
		<div className="input">
		<div className="input_header">
		Nombre del punto de interés
		</div>
		<input
		type="text"
		disabled
		readOnly
		defaultValue={point.name}
		/>
		</div>
		<div className="input">
		<div className="input_header">
		Descripción del punto de interés
		<select name="language_description_select" onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
		{languaguesList.map((language, index) => {
		return (
		<option key={index} value={index}>{language}</option>
		);
		})}
		</select>
		</div>
		{
		languaguesList.map((language, index) => {
		if(index===languageDescriptionIndexSelected){
		return (
		<textarea id={index.toString()}
		className="poi_description"
		defaultValue={descriptions[index]}
		disabled
		readOnly
		key={language}
		/>
		);
		}
		})
		}
		</div>

		<div className="input">
		<div className="input_header">
		Direcciones hacia el siguiente punto de interés
		<select name="language_description_select" onChange={(e) => setLanguageDirectionsIndexSelected(Number(e.target.value))}>
		{languaguesList.map((language, index) => {
		return (
		<option key={index} value={index}>{language}</option>
		);
		})}
		</select>
		</div>
		{
		languaguesList.map((language, index) => {
		if(index===languageDirectionsIndexSelected){
		return (
		<textarea id={index.toString()}
		className="poi_description"
		defaultValue={directions[index]}
		readOnly
		disabled
		key={language}
		/>
		);
		}
		})
		}
		</div>

		<div className="input">
		<div className="input_header">
		Nombre del lugar al que pertenece el punto de interés
		</div>
		<input
		type="text"
		disabled
		readOnly
		defaultValue={placeName}
		/>
		</div>
		</div>
		<div className="image_cnt">
		<div className="input_header">
		Nombre del punto de interés
		</div>
		<div className="image">
		<img src={point.image as string}/>
		</div>
		</div>
		</div>
		}
		</div>
		);
		}
		No newline at end of file

web/src/components/admin_panel_poi/admin_panel_poi_viewer/assets/css/styles.css

0 → 100644

+113 −0

Original line number	Diff line number	Diff line
		.poi_viewer_wrap{
		position: absolute;
		z-index: 99;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 75vw;
		height: 70vh;
		display: flex;
		flex-direction: column;
		background: white;
		border: solid 2px black;
		}

		.poi_viewer_header{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding: 5px;
		background: #ccc;
		height: 7%;
		}

		.close_btn{
		display: inline-block;
		cursor: pointer;
		height: 3%;
		position: absolute;
		right: 5px;
		}

		.poi_viewer_body{
		height: 93%;
		width: 100%;
		display: flex;
		flex-direction: row;
		}

		.inputs_container{
		height: 100%;
		width: 60%;
		}

		.image_cnt{
		height: 100%;
		width: 40%;
		display: flex;
		align-items: center;
		flex-direction: column;
		}

		.image_cnt .input_header{
		width: 100%;
		height: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		}

		.image {
		width: 100%;
		height: 90%;
		}

		.image img{
		height: 100%;
		width: 100%;
		object-fit: contain;
		}

		.input{
		width: 100%;
		display: flex;
		flex-direction: column;
		}

		.input_header{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		}

		.poi_description{
		height: 100px;
		padding: 5px;
		overflow-y: auto;
		resize: none;
		}

		.town_select_cnt{
		display: flex;
		width: 100%;
		}

		.input_body{
		display: flex;
		width: 100%;
		flex-direction: row;
		}

		.input_body div{
		height: 100%;
		width: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}