diff --git a/src/pages/CadastrarItinerario/CadastrarItinerario.tsx b/src/pages/CadastrarItinerario/CadastrarItinerario.tsx index 1f6dbc2..84850b9 100644 --- a/src/pages/CadastrarItinerario/CadastrarItinerario.tsx +++ b/src/pages/CadastrarItinerario/CadastrarItinerario.tsx @@ -11,6 +11,7 @@ import { IonInput, IonItem, IonLabel, + IonList, IonPage, IonSelect, IonSelectOption, @@ -18,7 +19,7 @@ import { IonSlides, IonTitle, IonToast, - IonToolbar + IonToolbar, } from "@ionic/react"; import { addCircleOutline, @@ -27,10 +28,14 @@ import { checkmark, close, informationCircle, - removeCircleOutline + locateOutline, + locationOutline, + removeCircleOutline, + trash, } 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"; @@ -60,6 +65,10 @@ interface Address { lng: number; } +interface Destinations extends Address { + is_final?: boolean; +} + export default function CadastrarItinerario() { const minDate = new Date(); @@ -83,9 +92,9 @@ export default function CadastrarItinerario() { //Infos const [initialAddress, setInitialAddress] = useState
(); - const [neighborhoods, setNeighborhoods] = useState>([]); + const [neighborhoods, setNeighborhoods] = useState([]); const [finalAddress, setFinalAddress] = useState
(); - const [destinations, setDestinations] = useState>([]); + const [destinations, setDestinations] = useState([]); const [daysOfWeek, setDaysOfWeek] = useState("0000000"); const [specificDay, setSpecificDay] = useState(""); const [departureTime, setDepartureTime] = useState("00:00"); @@ -168,21 +177,33 @@ 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]); - // useEffect(() => { - // if (finalAddress) { - // nextButton3.current!.disabled = false; - // } else { - // nextButton3.current!.disabled = true; - // } - // }, [finalAddress]); + useEffect(() => { + if (finalAddress) { + nextButton3.current!.disabled = false; + } else { + nextButton3.current!.disabled = true; + } + }, [finalAddress]); + + useEffect(() => { + if (van) { + nextButton6.current!.disabled = false; + } else { + nextButton6.current!.disabled = true; + } + }, [van]); + + useEffect(() => { + + }, [destinations]); function addNeighborhood(address: Address) { setNeighborhoods((arr) => [...arr, address]); @@ -206,47 +227,137 @@ export default function CadastrarItinerario() { setDestinations(newDestionations); } - function setDayOfWeekSeleted(day:string) { + function setDayOfWeekSeleted(day: string, checked: boolean) { switch (day) { + case "Domingo": + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[0] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[0] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); + break; case "Segunda": - + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[1] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[1] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); break; case "Terça": - + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[2] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[2] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); break; case "Quarta": - + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[3] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[3] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); break; case "Quinta": - + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[4] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[4] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); break; case "Sexta": - + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[5] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[5] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); break; case "Sábado": - - break; - case "Domingo": - + setDaysOfWeek((value) => { + if (checked) { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[6] = "1"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } else { + let newDaysOfWeek = value.split(""); + newDaysOfWeek[6] = "0"; + let finalString = newDaysOfWeek.join(""); + return finalString; + } + }); break; } } + useEffect(() => {}, [daysOfWeek]); + async function cadastrar() { + let newDestinations: Destinations[] = [{...finalAddress!, is_final: true}]; + newDestinations = newDestinations.concat(destinations); + let itinerary: CreateItineraryRequest = { vehicle_plate: van, days_of_week: daysOfWeek, - specific_day: specificDay, - estimate_departure_time: departureTime, - estimate_arrival_time: arrivalTime, + specific_day: specificDate ? specificDay : undefined, + estimated_departure_time: departureTime, + estimated_arrival_time: arrivalTime, monthly_price: monthlyPrice, daily_price: dailyPrice, + accept_daily: singleVacancy, itinerary_nickname: nickname, estimated_departure_address: initialAddress!.formatted_address, departure_latitude: initialAddress!.lat, departure_longitude: initialAddress!.lng, - neighboorhoods_served: neighborhoods, - destinations: destinations, + neighborhoods_served: neighborhoods, + destinations: newDestinations, }; await createItinerary(itinerary) @@ -257,15 +368,19 @@ export default function CadastrarItinerario() { setShowToast(true); } + setToastColor("success"); + setToastMessage(response.message); + setShowToast(true); + history.push({ pathname: "/meus-itinerarios", - state: { - redirectData: { - showToastMessage: true, - toastColor: "success", - toastMessage: "Itinerário cadastrado com sucesso!", - }, - }, + // state: { + // redirectData: { + // showToastMessage: true, + // toastColor: "success", + // toastMessage: "Itinerário cadastrado com sucesso!", + // }, + // }, }); }) .catch((err: any) => { @@ -288,7 +403,7 @@ export default function CadastrarItinerario() { - {/* +

Digite o endereço de onde você iniciará a rota do itinerário @@ -479,7 +594,7 @@ export default function CadastrarItinerario() {

-
*/} +

@@ -512,25 +627,53 @@ export default function CadastrarItinerario() {

- + + setDayOfWeekSeleted("Domingo", e.target.checked) + } + >
- + + setDayOfWeekSeleted("Segunda", e.target.checked) + } + >
- + + setDayOfWeekSeleted("Terça", e.target.checked) + } + >
- + + setDayOfWeekSeleted("Quarta", e.target.checked) + } + >
- + + setDayOfWeekSeleted("Quinta", e.target.checked) + } + >
- + + setDayOfWeekSeleted("Sexta", e.target.checked) + } + >
- + + setDayOfWeekSeleted("Sábado", e.target.checked) + } + >
@@ -549,6 +692,7 @@ export default function CadastrarItinerario() { min={minDate.toISOString()} presentation="date" hidden={!specificDate} + value={specificDay} onIonChange={(e) => setSpecificDay( typeof e.detail.value === "string" ? e.detail.value : "" @@ -574,7 +718,7 @@ export default function CadastrarItinerario() {
setDepartureTime( typeof event.detail.value === "string" @@ -613,7 +757,7 @@ export default function CadastrarItinerario() {
setArrivalTime( typeof event.detail.value === "string" @@ -694,11 +838,7 @@ export default function CadastrarItinerario() { onBtnClicked("prev")} color="primary"> - onBtnClicked("next")} - color="primary" - > + onBtnClicked("next")} color="primary">
@@ -729,7 +869,8 @@ export default function CadastrarItinerario() { console.log(event.detail.value)} + onIonChange={(event) => setVan(event.detail.value)} + className="w-screen" > {vans ? ( vans.map((van, index) => { diff --git a/src/pages/MeusItinerarios/MeusItinerarios.tsx b/src/pages/MeusItinerarios/MeusItinerarios.tsx index 3a42f7a..4bc7890 100644 --- a/src/pages/MeusItinerarios/MeusItinerarios.tsx +++ b/src/pages/MeusItinerarios/MeusItinerarios.tsx @@ -15,82 +15,46 @@ import { IonToolbar, } from "@ionic/react"; import { add, locateOutline, locationOutline } from "ionicons/icons"; -import { useState } from "react"; +import { useEffect, useState } from "react"; +import { getItineraries } from "../../services/api/itineraries"; import { PageHeader } from "../../components/PageHeader"; import "./MeusItinerarios.css"; +interface Address { + formatted_address: string; + lat: number; + lng: number; +} + +interface Destination extends Address { + is_final?: boolean; +} interface ItineraryInfo { id_itinerary: number; vehicle_plate: string; - days_of_week: number; - specific_day: string; + days_of_week?: string; + specific_day?: string; estimated_departure_time: string; estimated_arrival_time: string; - available_seats: number; - price: number; + monthly_price: number; + daily_price?: number; + accept_daily: boolean; itinerary_nickname: string; + estimated_departure_address: string; + departure_latitude: number; + departure_longitude: number; + neighborhoods_served: Address[]; + destinations: Destination[]; } export default function MeusItinerarios() { - const [routes, setRoutes] = useState( - [ - { - id_itinerary: 1, - vehicle_plate: 'FSS1918', - days_of_week: 3, - specific_day: '24/08/2022', - estimated_departure_time: '10:00', - estimated_arrival_time: '12:00', - available_seats: 20, - price: 108.20, - itinerary_nickname: 'Itinerário teste', - }, - { - id_itinerary: 1, - vehicle_plate: 'FSS1918', - days_of_week: 3, - specific_day: '24/08/2022', - estimated_departure_time: '10:00', - estimated_arrival_time: '12:00', - available_seats: 20, - price: 108.20, - itinerary_nickname: 'Itinerário teste 2', - }, - { - id_itinerary: 1, - vehicle_plate: 'FSS1918', - days_of_week: 3, - specific_day: '24/08/2022', - estimated_departure_time: '10:00', - estimated_arrival_time: '12:00', - available_seats: 20, - price: 108.20, - itinerary_nickname: 'Itinerário teste', - }, - { - id_itinerary: 1, - vehicle_plate: 'FSS1918', - days_of_week: 3, - specific_day: '24/08/2022', - estimated_departure_time: '10:00', - estimated_arrival_time: '12:00', - available_seats: 20, - price: 108.20, - itinerary_nickname: 'Itinerário teste', - }, - { - id_itinerary: 1, - vehicle_plate: 'FSS1918', - days_of_week: 3, - specific_day: '24/08/2022', - estimated_departure_time: '10:00', - estimated_arrival_time: '12:00', - available_seats: 20, - price: 108.20, - itinerary_nickname: 'Itinerário teste', - }, - ] - ); + const [routes, setRoutes] = useState([]); + + useEffect(() => { + getItineraries().then((response) => { + setRoutes(response.data); + }); + }, []) return ( @@ -109,15 +73,23 @@ export default function MeusItinerarios() {
- - Rua Francisco Glicerio, nº 100, Vila Novam aaaaaaaaaaaaaaaaaaaaaaaaaaa + + {itinerary.estimated_departure_address}
|
- - PUC Campinas H15 Campus 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + + {itinerary.destinations.map((destination) => { + if (destination.is_final) { + return ( + <> + {destination.formatted_address} + + ) + } + })}
diff --git a/src/services/api/itineraries.ts b/src/services/api/itineraries.ts index d846fda..5f25b6c 100644 --- a/src/services/api/itineraries.ts +++ b/src/services/api/itineraries.ts @@ -31,21 +31,22 @@ interface Address { export interface CreateItineraryRequest { vehicle_plate: string; - days_of_week: string; - specific_day: string; - estimate_departure_time: string; - estimate_arrival_time: string; + days_of_week?: string; + specific_day?: string; + estimated_departure_time: string; + estimated_arrival_time: string; monthly_price: number; - daily_price: number; + daily_price?: number; + accept_daily: boolean; itinerary_nickname: string; estimated_departure_address: string; departure_latitude: number; departure_longitude: number; - neighboorhoods_served: Array
; + neighborhoods_served: Array
; destinations: Array
; } -export async function get() { +export async function getItineraries() { updateHeader(); const response = await instance.get(transportsRoutes.get.url, { diff --git a/src/services/functions/itinerariesService.ts b/src/services/functions/itinerariesService.ts index 55f9059..76a291a 100644 --- a/src/services/functions/itinerariesService.ts +++ b/src/services/functions/itinerariesService.ts @@ -17,7 +17,7 @@ export async function getAllItineraries(): Promise { let res: any; try { - res = await itinerariesRoutes.get(); + res = await itinerariesRoutes.getItineraries(); } catch (error) { // TODO }