Commit 02993c1e authored by Omar Luna Hernández's avatar Omar Luna Hernández
Browse files

Se agrega el campo para la dirección

parent 4194e2c2

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

+23 −7
Original line number Diff line number Diff line 
import { faWindowClose } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { Dispatch, SetStateAction, useEffect, useState} from "react";

import { useEffect, useState} from "react";

import "./assets/css/styles.css";

import { MapComponent } from "../../map/map";

import { MapComponent, Position } from "../../map/map";

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 { Category } from "../../../infraestructure/entities/category";

import { Geocoding } from "../../geocoding/geocoding";

import { APIProvider } from "@vis.gl/react-google-maps";

import { REACT_APP_GOOGLE_API_KEY } from "../../../constants/api_keys";

import { LoadingSpinner } from "../../loading_spinner/loading_spinner";



interface props {

  setWindowVisibility: (visibility: boolean) => void;
@@ -38,7 +42,8 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories 
    getPlaceById,

    onSubmitRegister,

    onSubmitUpdate,

    clearErrors

    clearErrors,

    getValues

  } = usePlace(forceRenderList, setWindowVisibility);

  const [clickedCategories, setClickedCategories] = useState<boolean[]>(new Array(categoriesList.length).fill(false));  

  const [isLoading, setIsLoading] = useState(false);
@@ -46,6 +51,10 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories 
  const [openHourInput, setOpenHourInput] = useState('');

  const [closeHourInput, setCloseHourInput] = useState('');



  //Maps

  const [position, setPosition] = useState<Position | null>(null);

  const [ isSearching , setIsSearching] = useState(false);



  const onClickCategory = (idCategory: number) => {

    const index = categoriesId.indexOf(idCategory);

    const indexList = categoriesList.findIndex(category => category.idCategory === idCategory);
@@ -88,6 +97,8 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories 
          setValue('closeAt', placeGetted.closeAt);

          setValue('available', placeGetted.available);

          setAvailableDays(placeGetted.available); 

          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){
@@ -273,10 +284,15 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories 




          <div className="map_container">

            <div className="map">

            <div className="google_map">

              <APIProvider apiKey={REACT_APP_GOOGLE_API_KEY}>

                <Geocoding getValues={getValues} register={register} errors={errors} setLoading={setIsSearching} setPosition={setPosition}/>

                {isSearching && <LoadingSpinner/>}

                <div className="map_component">

                  <MapComponent setValue={setValue} setIsLoading={setIsLoading} 

              latitude={actualPlace.latitude} longitude={actualPlace.longitude}

              clearErrors={clearErrors}/>

                    position={position} setPosition={setPosition} clearErrors={clearErrors}/>

                </div>

              </APIProvider>

            </div>

            <div className="map_error_cnt">

              <p className="error">{errors.latitude?.message}</p>

web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css

+9 −1
Original line number Diff line number Diff line
@@ -58,10 +58,18 @@ 
  flex-direction: column;

}



.map{

.google_map{

  height: 95%;

  width: 100%;

  padding: 10px;

  display: flex;

  flex-direction: column;

  position: relative;

}



.map_component{

  width: 100%;

  flex-grow: 1;

}



.map_error_cnt{

web/src/components/geocoding/assets/css/styles.css

0 → 100644
+22 −0
Original line number Diff line number Diff line 
.g_map_cnt{

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

}



.address_input_cnt{

  width: 100%;

  display: flex;

  flex-direction: column;

}



.address_locate_cnt{

  width: 100%;

  display: flex;

  flex-direction: row-reverse;

}



.address_locate_cnt input{

  flex-grow: 1;

}
 
 No newline at end of file

web/src/components/geocoding/geocoding.tsx

0 → 100644
+60 −0
Original line number Diff line number Diff line 
import { useMapsLibrary } from "@vis.gl/react-google-maps";

import { useState, useEffect, Dispatch, SetStateAction, useRef } from "react";

import { UseFormGetValues, UseFormRegister, FieldErrors } from "react-hook-form";

import { Place } from "../../infraestructure/entities/place";

import { Position } from "../map/map";

import './assets/css/styles.css';



interface props{

  getValues: UseFormGetValues<Place>;

  register: UseFormRegister<Place>;

  errors: FieldErrors<Place>;

  setPosition: Dispatch<SetStateAction<Position | null>>

  setLoading: Dispatch<SetStateAction<boolean>>

}



export const Geocoding = ({ getValues, register, errors, setPosition, setLoading}: props) => {

  const geocodingApiLoaded = useMapsLibrary('geocoding');

  const [geocodingService, setGeocodingService] = useState<google.maps.Geocoder>();

  const [geocodingResult, setGeocodingResult] = useState<google.maps.GeocoderResult>();



  const getPositionByAddress = () => {

    const address = getValues('address');

    if(!geocodingService || !address) return;

    setLoading(true);

    geocodingService?.geocode({address}, (results, status) => {

      if(results && status=="OK"){

        setGeocodingResult(results[0]);

      }

    });

    setLoading(false);

  }





  useEffect(()=> {

    if(!geocodingApiLoaded) return;

    setGeocodingService(new window.google.maps.Geocoder());

  },[geocodingApiLoaded])



  useEffect(() => {

    if(!geocodingResult) return;

    setPosition({latitude: geocodingResult.geometry.location.lat(), longitude: geocodingResult.geometry.location.lng()})

  }, [geocodingResult])



  return (

    <div className="address_input_cnt">

      <label>Dirección</label>

      <div className="address_locate_cnt">

        <button type="button" onClick={getPositionByAddress}> Ubicar</button>

        <input type="text" {...register('address')} 

        onKeyDown={(event)=>{

          if(event.key === 'Enter'){

            getPositionByAddress();

          }

        }}

        />

      </div>

      <p className="error">{errors.address?.message}</p>

    </div>

  )

}
 
 No newline at end of file