From 327b1ee492477caa7b5ed7f08aa4f91cd305bec4 Mon Sep 17 00:00:00 2001 From: Hugo Falcao Date: Wed, 14 Sep 2022 20:52:09 -0300 Subject: [PATCH] wip --- src/components/AutoCompleteInput.tsx | 3 +- src/pages/BuscarItinerario.tsx | 12 +- .../CadastrarItinerario.tsx | 340 ++++++++++++------ src/pages/Transportes/Transportes.tsx | 4 +- src/services/api/itineraries.ts | 69 +++- src/services/functions/itinerariesService.ts | 10 +- 6 files changed, 304 insertions(+), 134 deletions(-) diff --git a/src/components/AutoCompleteInput.tsx b/src/components/AutoCompleteInput.tsx index d6f208d..521e04a 100644 --- a/src/components/AutoCompleteInput.tsx +++ b/src/components/AutoCompleteInput.tsx @@ -32,11 +32,12 @@ interface AddressSelected { interface AutoCompleteInputProps extends InputHTMLAttributes { onAddressSelected: (address: AddressSelected) => void; + clearAfterSelect?: boolean; } function AutoCompleteInput(props: AutoCompleteInputProps) { const searchInput = useRef(null); - const { onAddressSelected, ...othersProps } = props; + const { onAddressSelected, clearAfterSelect, ...othersProps } = props; // do something on address change const onChangeAddress = (autocomplete: any) => { diff --git a/src/pages/BuscarItinerario.tsx b/src/pages/BuscarItinerario.tsx index 74eb350..760935e 100644 --- a/src/pages/BuscarItinerario.tsx +++ b/src/pages/BuscarItinerario.tsx @@ -24,8 +24,6 @@ import { } from "ionicons/icons"; import "./BuscarItinerario.css"; -import itinerariesService from "../services/functions/itinerariesService"; - import { useState } from "react"; import { useHistory } from "react-router"; @@ -35,6 +33,7 @@ import { closeToast } from "../services/utils"; import { Color } from "@ionic/core"; import AutoCompleteInput from "../components/AutoCompleteInput"; +import { searchItineraries } from "../services/functions/itinerariesService"; interface Address { formatted_address: string; @@ -116,11 +115,10 @@ const BuscarItinerario: React.FC = () => { }, ]); - await itinerariesService - .searchItineraries({ - coordinatesFrom: addressFrom, - coordinatesTo: addressTo, - }) + await searchItineraries({ + coordinatesFrom: addressFrom, + coordinatesTo: addressTo, + }) .then((response) => { // if (response.status === "error") { // setToastColor("danger"); diff --git a/src/pages/CadastrarItinerario/CadastrarItinerario.tsx b/src/pages/CadastrarItinerario/CadastrarItinerario.tsx index 4b65d83..89750d6 100644 --- a/src/pages/CadastrarItinerario/CadastrarItinerario.tsx +++ b/src/pages/CadastrarItinerario/CadastrarItinerario.tsx @@ -11,33 +11,29 @@ import { IonInput, IonItem, IonLabel, - IonList, IonPage, - IonRange, IonSelect, IonSelectOption, IonSlide, IonSlides, IonTitle, IonToast, - IonToolbar, + IonToolbar } from "@ionic/react"; import { - add, addCircleOutline, arrowBack, arrowForward, checkmark, close, informationCircle, - locateOutline, - locationOutline, - removeCircleOutline, + removeCircleOutline } from "ionicons/icons"; import { useEffect, useRef, useState } from "react"; import { useHistory } from "react-router"; -import AutoCompleteInput from "../../components/AutoCompleteInput"; +import { CreateItineraryRequest } from "../../services/api/itineraries"; import * as vehiclesRoutes from "../../services/api/vehicles"; +import { createItinerary } from "../../services/functions/itinerariesService"; import sessionsService from "../../services/functions/sessionsService"; const slideOpts = { @@ -58,11 +54,6 @@ interface VanInfo { locator_state: string; } -interface Coords { - lat: number; - lng: number; -} - interface Address { formatted_address: string; lat: number; @@ -74,28 +65,33 @@ export default function CadastrarItinerario() { const history = useHistory(); + const [showToast, setShowToast] = useState(false); + const [toastMessage, setToastMessage] = useState(""); + const [toastColor, setToastColor] = useState("primary"); + const mySlides = useRef(null); const nextButton1 = useRef(null); const nextButton2 = useRef(null); + const nextButton3 = useRef(null); + const nextButton4 = useRef(null); + const nextButton5 = useRef(null); + const nextButton6 = useRef(null); const [specificDate, setSpecificDate] = useState(false); const [singleVacancy, setSingleVacancy] = useState(false); const [vans, setVans] = useState(); - const [showToast, setShowToast] = useState(false); - const [toastMessage, setToastMessage] = useState(""); - const [toastColor, setToastColor] = useState("primary"); + //Infos const [initialAddress, setInitialAddress] = useState
(); - const [initialCoords, setInitialCoords] = useState(); - const [neighborhoods, setNeighborhoods] = useState>([]); - const [finalAddress, setFinalAddress] = useState(""); - const [destinations, setDestinations] = useState>([]); - const [daysOfWeek, setDaysOfWeek] = useState(); - const [specificDay, setSpecificDay] = useState(); - const [departureTime, setDepartureTime] = useState(); - const [arrivalTime, setArrivalTime] = useState(); - const [monthlyPrice, setMonthlyPrice] = useState(0); - const [dailyPrice, setDailyPrice] = useState(0); + const [neighborhoods, setNeighborhoods] = useState>([]); + const [finalAddress, setFinalAddress] = useState
(); + const [destinations, setDestinations] = useState>([]); + const [daysOfWeek, setDaysOfWeek] = useState("0000000"); + const [specificDay, setSpecificDay] = useState(""); + const [departureTime, setDepartureTime] = useState("00:00"); + const [arrivalTime, setArrivalTime] = useState("00:00"); + const [monthlyPrice, setMonthlyPrice] = useState(100); + const [dailyPrice, setDailyPrice] = useState(40); const [van, setVan] = useState(""); const [nickname, setNickname] = useState(""); @@ -149,7 +145,7 @@ export default function CadastrarItinerario() { userId = refreshSessionRes.userId; } - vehiclesRoutes + await vehiclesRoutes .getByUserId(userId) .then((response: any) => { if (response.status === "error") { @@ -172,15 +168,90 @@ export default function CadastrarItinerario() { getUserVans(); }, []); - useEffect(() => { - if (initialAddress) { - nextButton1.current!.disabled = false; - } else { - nextButton1.current!.disabled = true; - } - }, [initialAddress]); + // useEffect(() => { + // if (initialAddress) { + // nextButton1.current!.disabled = false; + // } else { + // nextButton1.current!.disabled = true; + // } + // }, [initialAddress]); - function addNeighborhoodToList() {} + // useEffect(() => { + // if (finalAddress) { + // nextButton3.current!.disabled = false; + // } else { + // nextButton3.current!.disabled = true; + // } + // }, [finalAddress]); + + function addNeighborhood(address: Address) { + setNeighborhoods((arr) => [...arr, address]); + nextButton2.current!.disabled = false; + } + + function removeNeighborhood(index: number) { + const newNeighborhoods = [...neighborhoods]; + newNeighborhoods.splice(index, 1); + setNeighborhoods(newNeighborhoods); + if (newNeighborhoods.length === 0) { + nextButton2.current!.disabled = true; + } else { + nextButton2.current!.disabled = false; + } + } + + function removeDestionation(index: number) { + const newDestionations = [...destinations]; + newDestionations.splice(index, 1); + setDestinations(newDestionations); + } + + function (params:type) { + + } + + async function cadastrar() { + let itinerary: CreateItineraryRequest = { + vehicle_plate: van, + days_of_week: daysOfWeek, + specific_day: specificDay, + estimate_departure_time: departureTime, + estimate_arrival_time: arrivalTime, + monthly_price: monthlyPrice, + daily_price: dailyPrice, + itinerary_nickname: nickname, + estimated_departure_address: initialAddress!.formatted_address, + departure_latitude: initialAddress!.lat, + departure_longitude: initialAddress!.lng, + neighboorhoods_served: neighborhoods, + destinations: destinations, + }; + + await createItinerary(itinerary) + .then((response: any) => { + if (response.status === "error") { + setToastColor("danger"); + setToastMessage(response.message); + setShowToast(true); + } + + history.push({ + pathname: "/meus-itinerarios", + state: { + redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: "Itinerário cadastrado com sucesso!", + }, + }, + }); + }) + .catch((err: any) => { + setToastColor("danger"); + setToastMessage(err); + setShowToast(true); + }); + } return ( @@ -195,7 +266,7 @@ export default function CadastrarItinerario() { - + {/*

Digite o endereço de onde você iniciará a rota do itinerário @@ -247,31 +318,37 @@ export default function CadastrarItinerario() { console.log(address)} + onAddressSelected={(address: Address) => + addNeighborhood(address) + } />

-
- - - -
- - - - Taquaral - - - - Barão Geraldo - + + {neighborhoods.map((neighborhood, index) => ( + + removeNeighborhood(index)} + > + + + {neighborhood.formatted_address} + + ))}
onBtnClicked("prev")} color="primary"> - onBtnClicked("next")} color="primary"> + onBtnClicked("next")} + color="primary" + >
@@ -298,7 +375,9 @@ export default function CadastrarItinerario() { console.log(address)} + onAddressSelected={(address: Address) => + setFinalAddress(address) + } />
@@ -306,8 +385,8 @@ export default function CadastrarItinerario() { onBtnClicked("next")} color="primary" > @@ -337,24 +416,25 @@ export default function CadastrarItinerario() { console.log(address)} + onAddressSelected={(address: Address) => + setDestinations((arr) => [...arr, address]) + } />
-
- - - -
- - - - Unicamp - - - - CPFL - + + {destinations.map((destination, index) => ( + + removeDestionation(index)} + > + + + {destination.formatted_address} + + ))}
@@ -377,26 +457,60 @@ export default function CadastrarItinerario() {
- + */}

Escolha o(s) dia(s) da semana ou um dia específico que o itinerário será realizado

-