cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 Fix a bugs of merge with develop

Browse Source
This commit is contained in:
Hugo Falcao
2022-09-11 23:56:20 -03:00
parent 81395f2827
commit 3d5aa1e144
7 changed files with 12629 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -1 +1,7 @@
# tcc-vamos-frontend # tcc-vamos-frontend
# Primeiros passos para iniciar o desenvolvimento
- Rode o comando ```yarn``` para instalar as dependencias do projeto
- Para iniciar o desenvolvimento de uma nova funcionalidade crie uma branch
- Ao terminar o desenvolvimento abra um pull request para a branch "develop" e resolva os conflitos caso tenha

1
package.json
View File

@@ -25,6 +25,7 @@
"@types/react-router": "^5.1.11", "@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7", "@types/react-router-dom": "^5.1.7",
"axios": "^0.26.1", "axios": "^0.26.1",
"caniuse-lite": "1.0.30001393",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"ionicons": "^5.4.0", "ionicons": "^5.4.0",
"lodash.isequal": "^4.5.0", "lodash.isequal": "^4.5.0",

137
src/pages/BuscarItinerario.tsx
View File

@@ -26,15 +26,21 @@ import "./BuscarItinerario.css";
import itinerariesService from "../services/functions/itinerariesService"; import itinerariesService from "../services/functions/itinerariesService";
import { useEffect, useState } from "react"; import { useState } from "react";
import { useHistory } from "react-router"; import { useHistory } from "react-router";
import { geocodeByAddress, getLatLng } from "react-google-places-autocomplete";
import { PageHeader } from "../components/PageHeader"; import { PageHeader } from "../components/PageHeader";
import { Itinerary } from "../models/itinerary.model"; import { Itinerary } from "../models/itinerary.model";
import { closeToast } from "../services/utils"; import { closeToast } from "../services/utils";
import { Color } from "@ionic/core"; import { Color } from "@ionic/core";
import AutoCompleteInput from "../components/AutoCompleteInput";
interface Address {
formatted_address: string;
lat: number;
lng: number;
}
const BuscarItinerario: React.FC = () => { const BuscarItinerario: React.FC = () => {
const history = useHistory(); const history = useHistory();
@@ -43,9 +49,9 @@ const BuscarItinerario: React.FC = () => {
const [messageToast, setMessageToast] = useState(""); const [messageToast, setMessageToast] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary"); const [toastColor, setToastColor] = useState<Color>("primary");
const [addressFrom, setAddressFrom] = useState<any>(""); const [addressFrom, setAddressFrom] = useState<Address>();
const [coordinatesFrom, setCoordinatesFrom] = useState<any>(""); const [coordinatesFrom, setCoordinatesFrom] = useState<any>("");
const [addressTo, setAddressTo] = useState<any>(""); const [addressTo, setAddressTo] = useState<Address>();
const [coordinatesTo, setCoordinatesTo] = useState<any>(""); const [coordinatesTo, setCoordinatesTo] = useState<any>("");
const [showModalEnd, setShowModalEnd] = useState(false); const [showModalEnd, setShowModalEnd] = useState(false);
const [addressResults, setAddressResults] = useState<any[]>([]); const [addressResults, setAddressResults] = useState<any[]>([]);
@@ -88,24 +94,8 @@ const BuscarItinerario: React.FC = () => {
// setShowModalEnd(false); // setShowModalEnd(false);
// } // }
useEffect(() => {
if (addressFrom.label && addressFrom.label.length > 0) {
geocodeByAddress(addressFrom.label)
.then((results) => getLatLng(results[0]))
.then(({ lat, lng }) => setCoordinatesFrom({ lat, lng }));
}
}, [addressFrom]);
useEffect(() => {
if (addressTo.label && addressTo.label.length > 0) {
geocodeByAddress(addressTo.label)
.then((results) => getLatLng(results[0]))
.then(({ lat, lng }) => setCoordinatesTo({ lat, lng }));
}
}, [addressTo]);
async function buscarItinerarios() { async function buscarItinerarios() {
if (!coordinatesFrom || !coordinatesTo || !addressFrom || !addressTo) { if (!addressFrom || !addressTo) {
return; return;
} }
@@ -120,16 +110,16 @@ const BuscarItinerario: React.FC = () => {
setRecentSearches((arr) => [ setRecentSearches((arr) => [
...arr, ...arr,
{ {
addressFrom: addressFrom.label, addressFrom: addressFrom.formatted_address,
addressTo: addressTo.label, addressTo: addressTo.formatted_address,
time: Date.now(), time: Date.now(),
}, },
]); ]);
await itinerariesService await itinerariesService
.searchItineraries({ .searchItineraries({
coordinatesFrom, coordinatesFrom: addressFrom,
coordinatesTo, coordinatesTo: addressTo,
}) })
.then((response) => { .then((response) => {
// if (response.status === "error") { // if (response.status === "error") {
@@ -166,41 +156,21 @@ const BuscarItinerario: React.FC = () => {
<IonCardContent> <IonCardContent>
<div className="inputs-from-to"> <div className="inputs-from-to">
<IonIcon icon={locateOutline}></IonIcon> <IonIcon icon={locateOutline}></IonIcon>
{/* <IonSearchbar <AutoCompleteInput
showClearButton="never" placeholder="R. José Paulino, 1234"
onClick={() => setInputActiveOpenModal("from")} className="ml-2"
value={addressFrom} onAddressSelected={(address: Address) =>
placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001" setAddressFrom(address)
/> */} }
{/* <GooglePlacesAutocomplete />
apiKey={process.env.REACT_APP_KEY_API}
apiOptions={{ language: "pt-br", region: "br" }}
selectProps={{
value: addressFrom,
onChange: setAddressFrom,
className: "input-autocomplete",
placeholder: "R. José Paulino, 1234",
}}
/> */}
</div> </div>
<div className="inputs-from-to"> <div className="inputs-from-to">
<IonIcon icon={locationOutline}></IonIcon> <IonIcon icon={locationOutline}></IonIcon>
{/* <IonSearchbar <AutoCompleteInput
showClearButton="never"
onClick={() => setInputActiveOpenModal("to")}
value={addressTo}
placeholder="PUC Campinas" placeholder="PUC Campinas"
/> */} className="ml-2"
{/* <GooglePlacesAutocomplete onAddressSelected={(address: Address) => setAddressTo(address)}
apiKey={process.env.REACT_APP_KEY_API} />
apiOptions={{ language: "pt-br", region: "br" }}
selectProps={{
value: addressTo,
onChange: setAddressTo,
className: "input-autocomplete",
placeholder: "PUC Campinas",
}}
/> */}
</div> </div>
<div className="button-search"> <div className="button-search">
<IonButton color="primary" onClick={() => buscarItinerarios()}> <IonButton color="primary" onClick={() => buscarItinerarios()}>
@@ -216,35 +186,32 @@ const BuscarItinerario: React.FC = () => {
<IonRow class="latest-searches"> <IonRow class="latest-searches">
{recentSearches.map((search, index) => { {recentSearches.map((search, index) => {
return ( return (
<> <div key={index}>
<div> <IonRow
<IonRow class="latest-searches"
key={index} onClick={() => {
class="latest-searches" fillSearchBars(search.addressFrom, search.addressTo);
onClick={() => { }}
fillSearchBars(search.addressFrom, search.addressTo); >
}} <IonIcon
> className="icon-align-vcenter"
<IonIcon size="large"
className="icon-align-vcenter" icon={timeOutline}
size="large" ></IonIcon>
icon={timeOutline} <div className="div_from_to">
></IonIcon> <span>{search.addressFrom}</span>
<div className="div_from_to"> <IonIcon icon={arrowForwardOutline}></IonIcon>
<span>{search.addressFrom}</span> <span>{search.addressTo}</span>
<IonIcon icon={arrowForwardOutline}></IonIcon> <br />
<span>{search.addressTo}</span> <small>{search.time}</small>
<br /> </div>
<small>{search.time}</small> <IonIcon
</div> className="icon-forward icon-align-vcenter"
<IonIcon size="large"
className="icon-forward icon-align-vcenter" icon={chevronForwardOutline}
size="large" ></IonIcon>
icon={chevronForwardOutline} </IonRow>
></IonIcon> </div>
</IonRow>
</div>
</>
); );
})} })}
</IonRow> </IonRow>

26
src/pages/CadastrarItinerario/CadastrarItinerario.tsx
View File

@@ -1,9 +1,12 @@
import { Color } from "@ionic/core"; import { Color } from "@ionic/core";
import { import {
IonBackButton,
IonButton, IonButton,
IonButtons,
IonCheckbox, IonCheckbox,
IonContent, IonContent,
IonDatetime, IonDatetime,
IonHeader,
IonIcon, IonIcon,
IonInput, IonInput,
IonItem, IonItem,
@@ -15,7 +18,9 @@ import {
IonSelectOption, IonSelectOption,
IonSlide, IonSlide,
IonSlides, IonSlides,
IonTitle,
IonToast, IonToast,
IonToolbar,
} from "@ionic/react"; } from "@ionic/react";
import { import {
add, add,
@@ -23,6 +28,7 @@ import {
arrowBack, arrowBack,
arrowForward, arrowForward,
checkmark, checkmark,
close,
informationCircle, informationCircle,
locateOutline, locateOutline,
locationOutline, locationOutline,
@@ -31,7 +37,7 @@ import {
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useHistory } from "react-router"; import { useHistory } from "react-router";
import AutoCompleteInput from "../../components/AutoCompleteInput"; import AutoCompleteInput from "../../components/AutoCompleteInput";
import * as vansRoutes from "../../services/api/vans"; import * as vehiclesRoutes from "../../services/api/vehicles";
import sessionsService from "../../services/functions/sessionsService"; import sessionsService from "../../services/functions/sessionsService";
const slideOpts = { const slideOpts = {
@@ -143,9 +149,9 @@ export default function CadastrarItinerario() {
userId = refreshSessionRes.userId; userId = refreshSessionRes.userId;
} }
vansRoutes vehiclesRoutes
.getByUserId(userId) .getByUserId(userId)
.then((response) => { .then((response: any) => {
if (response.status === "error") { if (response.status === "error") {
setToastColor("danger"); setToastColor("danger");
setToastMessage(response.message); setToastMessage(response.message);
@@ -156,7 +162,7 @@ export default function CadastrarItinerario() {
setVans(response.data); setVans(response.data);
}) })
.catch((err) => { .catch((err: any) => {
setToastColor("danger"); setToastColor("danger");
setToastMessage(err); setToastMessage(err);
setShowToast(true); setShowToast(true);
@@ -178,10 +184,14 @@ export default function CadastrarItinerario() {
return ( return (
<IonPage> <IonPage>
<PageHeader <IonHeader>
pageName="Cadastrar itinerário" <IonToolbar>
backButtonPageUrl="/perfil" <IonTitle>Cadastrar Itinerário</IonTitle>
></PageHeader> <IonButtons slot="start">
<IonBackButton icon={close} text="" defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen> <IonContent fullscreen>
<IonSlides ref={mySlides} options={slideOpts}> <IonSlides ref={mySlides} options={slideOpts}>

32
src/pages/VeiculoCadastro.tsx
View File

@@ -1,22 +1,16 @@
import { import {
IonToast,
IonItem,
IonLabel,
IonInput,
IonBackButton,
IonButton, IonButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonToolbar,
IonTitle,
IonList,
IonCheckbox, IonCheckbox,
IonListHeader, IonContent,
IonInput,
IonItem,
IonItemDivider,
IonLabel,
IonList,
IonPage,
IonSelect, IonSelect,
IonSelectOption, IonSelectOption,
IonItemDivider, IonToast,
} from "@ionic/react"; } from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react"; import React, { useEffect, useReducer, useState } from "react";
@@ -28,10 +22,10 @@ import carsService from "../services/functions/carsService";
import * as vehiclesRoutes from "../services/api/vehicles"; import * as vehiclesRoutes from "../services/api/vehicles";
import "./VeiculoCadastro.css";
import { Color } from "@ionic/core"; import { Color } from "@ionic/core";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader"; import { PageHeader } from "../components/PageHeader";
import { closeToast } from "../services/utils";
import "./VeiculoCadastro.css";
const VeiculoCadastro: React.FC = () => { const VeiculoCadastro: React.FC = () => {
const history = useHistory(); const history = useHistory();
@@ -209,7 +203,7 @@ const VeiculoCadastro: React.FC = () => {
} }
history.push({ history.push({
pathname: "/minhas-vehicles", pathname: "/veiculos/meus",
state: { state: {
redirectData: { redirectData: {
showToastMessage: true, showToastMessage: true,
@@ -262,7 +256,9 @@ const VeiculoCadastro: React.FC = () => {
<IonContent> <IonContent>
<IonList lines="full" class="ion-no-margin"> <IonList lines="full" class="ion-no-margin">
<IonItemDivider color={"primary"}>Informações do veículo</IonItemDivider> <IonItemDivider color={"primary"}>
Informações do veículo
</IonItemDivider>
<IonItem> <IonItem>
<IonLabel position="fixed">Placa </IonLabel> <IonLabel position="fixed">Placa </IonLabel>
<IonInput <IonInput

30
src/services/functions/itinerariesService.ts
View File

@@ -1,14 +1,16 @@
import * as itinerariesRoutes from '../api/itineraries'; import * as itinerariesRoutes from "../api/itineraries";
interface CoordinatesRequest { interface CoordinatesRequest {
coordinatesFrom: { coordinatesFrom: {
lat: number, formatted_address: string;
lng: number lat: number;
}, lng: number;
};
coordinatesTo: { coordinatesTo: {
lat: number, formatted_address: string;
lng: number lat: number;
} lng: number;
};
} }
export async function getAllItineraries(): Promise<any> { export async function getAllItineraries(): Promise<any> {
@@ -20,19 +22,21 @@ export async function getAllItineraries(): Promise<any> {
// TODO // TODO
} }
return res.data return res.data;
} }
export async function searchItineraries({
export async function searchItineraries({ coordinatesFrom, coordinatesTo }: CoordinatesRequest): Promise<any> { coordinatesFrom,
let res: any coordinatesTo,
}: CoordinatesRequest): Promise<any> {
let res: any;
try { try {
res = await itinerariesRoutes.search(coordinatesFrom, coordinatesTo); res = await itinerariesRoutes.search(coordinatesFrom, coordinatesTo);
} catch (error) { } catch (error) {
// TODO // TODO
} }
return res.data return res.data;
} }
export default { getAllItineraries, searchItineraries } export default { getAllItineraries, searchItineraries };

12521
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff