Commit d23e26eb authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Merge branch 'main' into 'main' 

Se agregó una función al agregar un lugar

See merge request !62
parents 903a103c 5de74108

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

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

+6 −0
Original line number Diff line number Diff line 
.spinner{

    z-index: 999;

    position: absolute;

    width: 150px;

    padding: 20px;

    aspect-ratio: 1;
@@ -13,5 +14,10 @@ 
    -webkit-mask-composite: source-out;

            mask-composite: subtract;

    animation: l3 1s infinite linear;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

}

@keyframes l3 {to{transform: rotate(1turn)}}
 
 No newline at end of file