Se cambia el nombre del componente a MapGoogleComponent (3b319e49) · Commits · Omar Luna / PueblosMagicosConIA

web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx

+266 −191

Original line number	Diff line number	Diff line
		@@ -2,12 +2,17 @@ import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { useEffect, useState } from "react";
		import "./assets/css/styles.css";
		import { MapComponent, Position } from "../../map/map";
		import { MapGoogleComponent, Position } from "../../map/map_google";
		import { usePlace } from "../../../hooks/usePlace";
		import { languaguesList } from "../../../constants/languages";
		import { LoadingScreen } from "../../loading_screen/loading_screen";
		import { MultipleImagesDropzone } from "../../multiple_images_dropzone/multiple_images_dropzone";
		import { AvailableDays, availableDaysList, EmptyPlace, Place } from "../../../infraestructure/entities/place";
		import {
		AvailableDays,
		availableDaysList,
		EmptyPlace,
		Place,
		} from "../../../infraestructure/entities/place";
		import { Category } from "../../../infraestructure/entities/category";
		import { Geocoding } from "../../geocoding/geocoding";
		import { APIProvider } from "@vis.gl/react-google-maps";
		@@ -23,7 +28,14 @@ interface props {
		form?: Place;
		}

		export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categoriesList, forceRenderList, isRegister, form}: props) => {
		export const AdminPanelPlaceRegister = ({
		setWindowVisibility,
		idTown,
		categoriesList,
		forceRenderList,
		isRegister,
		form,
		}: props) => {
		const {
		register,
		handleSubmit,
		@@ -43,13 +55,15 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
		onSubmitRegister,
		onSubmitUpdate,
		clearErrors,
		getValues
		getValues,
		} = usePlace(forceRenderList, setWindowVisibility);
		const [clickedCategories, setClickedCategories] = useState<boolean[]>(new Array(categoriesList.length).fill(false));
		const [clickedCategories, setClickedCategories] = useState<boolean[]>(
		new Array(categoriesList.length).fill(false)
		);
		const [isLoading, setIsLoading] = useState(false);
		const [actualPlace, setActualPlace] = useState<Place \| null>(null);
		const [openHourInput, setOpenHourInput] = useState('');
		const [closeHourInput, setCloseHourInput] = useState('');
		const [openHourInput, setOpenHourInput] = useState("");
		const [closeHourInput, setCloseHourInput] = useState("");

		//Maps
		const [position, setPosition] = useState<Position \| null>(null);
		@@ -57,48 +71,57 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories

		const onClickCategory = (idCategory: number) => {
		const index = categoriesId.indexOf(idCategory);
		const indexList = categoriesList.findIndex(category => category.idCategory === idCategory);
		const clickedCategoriesBackup = clickedCategories.map((clickedCategory, index)=> {
		const indexList = categoriesList.findIndex(
		(category) => category.idCategory === idCategory
		);
		const clickedCategoriesBackup = clickedCategories.map(
		(clickedCategory, index) => {
		if (index === indexList) {
		return !clickedCategory;
		} else {
		return clickedCategory;
		}
		})
		if(index > -1){
		setCategoriesId(
		categoriesId.filter(cat => cat !== idCategory)
		}
		);
		if (index > -1) {
		setCategoriesId(categoriesId.filter((cat) => cat !== idCategory));
		} else {
		setCategoriesId(
		[...categoriesId,
		idCategory
		]
		)
		setCategoriesId([...categoriesId, idCategory]);
		}
		setClickedCategories(clickedCategoriesBackup);
		}
		};

		useEffect(() => {
		setIsLoading(true);
		const fetchData = async () => {
		setValue('idTown', idTown);
		setValue("idTown", idTown);
		if (!isRegister && form) {
		const placeGetted = await getPlaceById(form.idPlace \|\| 0);
		if (placeGetted) {
		setActualPlace(placeGetted);
		setValue('idPlace', placeGetted.idPlace);
		setValue('name', placeGetted.name);
		setValue('descriptions', placeGetted.descriptions);
		setDescriptions(placeGetted.descriptions \|\| ['', '']);
		setValue('openAt', placeGetted.openAt);
		setOpenHourInput(placeGetted.openAt < 10 ? `0${placeGetted.openAt}:00` : `${placeGetted.openAt}:00`);
		setCloseHourInput(placeGetted.closeAt < 10 ? `0${placeGetted.closeAt}:00` : `${placeGetted.closeAt}:00`);
		setValue('closeAt', placeGetted.closeAt);
		setValue('available', placeGetted.available);
		setValue("idPlace", placeGetted.idPlace);
		setValue("name", placeGetted.name);
		setValue("descriptions", placeGetted.descriptions);
		setDescriptions(placeGetted.descriptions \|\| ["", ""]);
		setValue("openAt", placeGetted.openAt);
		setOpenHourInput(
		placeGetted.openAt < 10
		? `0${placeGetted.openAt}:00`
		: `${placeGetted.openAt}:00`
		);
		setCloseHourInput(
		placeGetted.closeAt < 10
		? `0${placeGetted.closeAt}:00`
		: `${placeGetted.closeAt}:00`
		);
		setValue("closeAt", placeGetted.closeAt);
		setValue("available", placeGetted.available);
		setAvailableDays(placeGetted.available);
		setPosition({latitude: Number(placeGetted.latitude), longitude: Number(placeGetted.longitude)});
		setValue('address', placeGetted.address);
		setPosition({
		latitude: Number(placeGetted.latitude),
		longitude: Number(placeGetted.longitude),
		});
		setValue("address", placeGetted.address);
		const clickedCategoriesBackup: boolean[] = [];
		categoriesList.forEach((category) => {
		if (placeGetted.categoriesId.indexOf(category.idCategory) > -1) {
		@@ -111,7 +134,7 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
		setCategoriesId(placeGetted.categoriesId);
		}
		} else {
		setValue('available', availableDays, { shouldValidate: true });
		setValue("available", availableDays, { shouldValidate: true });
		}
		};
		fetchData();
		@@ -122,44 +145,53 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
		<div className="place_register_wrap">
		<div className="place_register_header">
		Registra el lugar
		<FontAwesomeIcon icon={faWindowClose} className="close_btn"
		onClick={() => setWindowVisibility(false)}/>
		<FontAwesomeIcon
		icon={faWindowClose}
		className="close_btn"
		onClick={() => setWindowVisibility(false)}
		/>
		</div>
		<div className="place_register_body">
		{isLoading \|\| (!isRegister && actualPlace===null)
		?
		{isLoading \|\| (!isRegister && actualPlace === null) ? (
		<LoadingScreen />
		:
		<form onSubmit={handleSubmit(isRegister ? onSubmitRegister : onSubmitUpdate)}>
		) : (
		<form
		onSubmit={handleSubmit(
		isRegister ? onSubmitRegister : onSubmitUpdate
		)}
		>
		<div className="inputs_container">
		<div className="input">
		<div className="input_header">
		Nombre del lugar
		</div>
		<input
		type="text"
		{...register('name')}
		autoComplete="off"
		/>
		<div className="input_header">Nombre del lugar</div>
		<input type="text" {...register("name")} autoComplete="off" />
		<p className="error">{errors.name?.message}</p>
		</div>

		<div className="input">
		<div className="input_header">
		Descripción del lugar
		<select name="language_description_select" onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
		<select
		name="language_description_select"
		onChange={(e) =>
		setLanguageDescriptionIndexSelected(
		Number(e.target.value)
		)
		}
		>
		{languaguesList.map((language, index) => {
		return (
		<option key={index} value={index}>{language}</option>
		<option key={index} value={index}>
		{language}
		</option>
		);
		})}
		</select>
		</div>
		{
		languaguesList.map((language, index) => {
		{languaguesList.map((language, index) => {
		if (index === languageDescriptionIndexSelected) {
		return (
		<textarea id={index.toString()}
		<textarea
		id={index.toString()}
		className="place_description"
		value={descriptions[index]}
		key={language}
		@@ -167,20 +199,19 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
		const updatedDescriptionsList = [...descriptions];
		updatedDescriptionsList[index] = e.target.value;
		setDescriptions(updatedDescriptionsList);
		setValue("descriptions", updatedDescriptionsList, {shouldValidate: true});
		setValue("descriptions", updatedDescriptionsList, {
		shouldValidate: true,
		});
		}}
		/>
		);
		}
		})
		}
		})}
		<p className="error">{errors.descriptions?.message}</p>
		</div>

		<div className="input">
		<div className="input_header">
		Horario
		</div>
		<div className="input_header">Horario</div>
		<div className="input_body">
		<div>
		Hora de apertura
		@@ -208,89 +239,133 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
		/>
		</div>
		</div>
		<p className="error">{errors.openAt?.message \|\| errors.closeAt?.message}</p>
		<p className="error">
		{errors.openAt?.message \|\| errors.closeAt?.message}
		</p>
		Dias disponibles
		<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
		<div
		style={{
		width: "100%",
		display: "flex",
		justifyContent: "center",
		}}
		>
		<div>
		<select name="days_select"
		<select
		name="days_select"
		onChange={(e) => {
		const selectedOption = availableDaysList[Number(e.target.value)];
		const selectedOption =
		availableDaysList[Number(e.target.value)];
		setAvailableDays(selectedOption.option);
		resetField('startDate');
		resetField('endDate');
		setValue('available', selectedOption.option,{shouldValidate:true});
		resetField("startDate");
		resetField("endDate");
		setValue("available", selectedOption.option, {
		shouldValidate: true,
		});
		}}
		>
		{availableDaysList.map((option, index) => {
		return (
		<option key={index} selected={option.option===actualPlace?.available} value={index}>{option.name}</option>
		<option
		key={index}
		selected={option.option === actualPlace?.available}
		value={index}
		>
		{option.name}
		</option>
		);
		})}
		</select>
		</div>

		<div>
		{
		availableDays === AvailableDays.CUSTOM
		&&
		<div style={{width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
		{availableDays === AvailableDays.CUSTOM && (
		<div
		style={{
		width: "100%",
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		}}
		>
		Inicio
		<input
		type="date"
		defaultValue={actualPlace?.startDate?.toString().substring(0,10)}
		{...register('startDate')}
		defaultValue={actualPlace?.startDate
		?.toString()
		.substring(0, 10)}
		{...register("startDate")}
		/>
		Cierre
		<input
		type="date"
		defaultValue={actualPlace?.endDate?.toString().substring(0,10)}
		{...register('endDate')}
		defaultValue={actualPlace?.endDate
		?.toString()
		.substring(0, 10)}
		{...register("endDate")}
		/>
		</div>

		}
		)}
		</div>
		</div>
		<p className="error">{errors.available?.message \|\| errors.startDate?.message \|\| errors.endDate?.message}</p>
		<p className="error">
		{errors.available?.message \|\|
		errors.startDate?.message \|\|
		errors.endDate?.message}
		</p>
		</div>

		<div className="input">
		<div className="input_header">
		Categorías
		</div>
		<div className="input_header">Categorías</div>
		<div className="categories_cnt">
		<div className="categories_grid">
		{
		categoriesList.map((category, index) => {
		{categoriesList.map((category, index) => {
		return (
		<div className="category_item"
		<div
		className="category_item"
		onClick={() => onClickCategory(category.idCategory)}
		style={clickedCategories[index] ? {border: '2px solid blue'} : {border: '1px solid black'}}
		style={
		clickedCategories[index]
		? { border: "2px solid blue" }
		: { border: "1px solid black" }
		}
		>
		{category.nameES + " " + category.idCategory}
		</div>
		);
		})
		}
		})}
		</div>
		</div>
		<p className="error">{errors.categoriesId?.message}</p>
		</div>

		<MultipleImagesDropzone setValue={setValue} imagesList={actualPlace?.imagesList}/>
		<MultipleImagesDropzone
		setValue={setValue}
		imagesList={actualPlace?.imagesList}
		/>
		<p className="error">{errors.imagesList?.message}</p>
		<input type="submit" />
		</div>


		<div className="map_container">
		<div className="google_map">
		<APIProvider apiKey={REACT_APP_GOOGLE_API_KEY}>
		<Geocoding getValues={getValues} register={register} errors={errors} setLoading={setIsSearching} setPosition={setPosition}/>
		<Geocoding
		getValues={getValues}
		register={register}
		errors={errors}
		setLoading={setIsSearching}
		setPosition={setPosition}
		/>
		{isSearching && <LoadingSpinner />}
		<div className="map_component">
		<MapComponent setValue={setValue} setIsLoading={setIsLoading}
		position={position} setPosition={setPosition} clearErrors={clearErrors}/>
		<MapGoogleComponent
		setValue={setValue}
		setIsLoading={setIsLoading}
		position={position}
		setPosition={setPosition}
		clearErrors={clearErrors}
		/>
		</div>
		</APIProvider>
		</div>
		@@ -299,8 +374,8 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
		</div>
		</div>
		</form>
		}
		)}
		</div>
		</div>
		);
		}
		No newline at end of file
		};

web/src/components/map/map.tsx→web/src/components/map/map_google.tsx

+63 −0

Original line number	Diff line number	Diff line
		@@ -16,39 +16,48 @@ export interface Position{
		longitude: number;
		}


		export const MapComponent = ({setValue, setIsLoading, position, setPosition, clearErrors}: props) => {
		export const MapGoogleComponent = ({
		setValue,
		setIsLoading,
		position,
		setPosition,
		clearErrors,
		}: props) => {
		const defaultCenter = { lat: 23.687, lng: -102.74 };
		const mapRef = useMap();

		useEffect(() => {
		if (position && position.latitude !== 0 && position.longitude !== 0) {
		setValue('latitude',position.latitude);
		setValue('longitude',position.longitude);
		setValue("latitude", position.latitude);
		setValue("longitude", position.longitude);
		if (mapRef) {
		mapRef.setCenter({ lat: position.latitude, lng: position.longitude });
		mapRef.setZoom(16);
		}
		clearErrors('latitude');
		clearErrors('longitude');
		clearErrors("latitude");
		clearErrors("longitude");
		}
		}, [position]);

		return (
		<div style={{width: '100%', height: '100%'}}>
		<Map defaultCenter={defaultCenter}
		<div style={{ width: "100%", height: "100%" }}>
		<Map
		defaultCenter={defaultCenter}
		defaultZoom={8}
		gestureHandling={'greedy'}
		gestureHandling={"greedy"}
		disableDefaultUI={true}
		onClick={(event) => {
		const lat = event.detail.latLng?.lat \|\| 0.0;
		const lng = event.detail.latLng?.lng \|\| 0.0;
		setPosition({ latitude: lat, longitude: lng });
		}}

		>
		{position && <Marker position={{lat: position.latitude, lng: position.longitude}}/>}
		{position && (
		<Marker
		position={{ lat: position.latitude, lng: position.longitude }}
		/>
		)}
		</Map>
		</div>
		);
		}
		No newline at end of file
		};