From ae51a594a79663cea6979307232ec1652a500a34 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Mon, 29 Aug 2022 03:05:06 -0300 Subject: [PATCH] =?UTF-8?q?Inclui=20p=C3=A1ginas=20base=20de=20Buscas=20e?= =?UTF-8?q?=20Buscar=20Itiner=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 8 +- src/pages/BuscarItinerario.tsx | 191 +++++++++++++++++++++++++++++++++ src/pages/Buscas.tsx | 59 ++++++++++ 3 files changed, 257 insertions(+), 1 deletion(-) create mode 100644 src/pages/BuscarItinerario.tsx create mode 100644 src/pages/Buscas.tsx diff --git a/src/App.tsx b/src/App.tsx index 2f57f5a..82719d9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import { IonReactRouter } from '@ionic/react-router'; import Cadastro from './pages/Cadastro/Cadastro'; import Login from './pages/Login'; import Home from './pages/Home'; +import Buscas from './pages/Buscas'; import Perfil from './pages/Perfil'; import PerfilEditar from './pages/PerfilEditar'; import CadastroVan from './pages/CadastroVan'; @@ -52,6 +53,7 @@ import React from 'react'; import MinhasVans from './pages/MinhasVans'; import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios'; import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario'; +import BuscarItinerario from './pages/BuscarItinerario'; setupIonicReact(); @@ -62,6 +64,8 @@ const routes = ( + + @@ -71,6 +75,8 @@ const routes = ( + + @@ -109,7 +115,7 @@ const IonicApp: React.FC = () => { {routes} - + Buscar diff --git a/src/pages/BuscarItinerario.tsx b/src/pages/BuscarItinerario.tsx new file mode 100644 index 0000000..28158d8 --- /dev/null +++ b/src/pages/BuscarItinerario.tsx @@ -0,0 +1,191 @@ +import { + IonBackButton, + IonButtons, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonContent, + IonGrid, + IonHeader, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonPage, + IonRow, + IonSelect, + IonSelectOption, + IonTitle, + IonToolbar, +} from "@ionic/react"; + +import { useEffect, useState } from "react"; +import { useHistory } from "react-router"; + +interface coordinates { + lat: number; + lgn: number; +} + +interface Itinerario { + motorista: string; + valor: string; + lugares: string; + avaliacao: string; + bairros_atendidos: coordinates[]; + destinos: coordinates[]; +} + +const BuscarItinerario: React.FC = () => { + const [selectedBairro, setSelectedBairro] = useState(""); + const [selectedFaculdade, setSelectedFaculdade] = useState(""); + + const [itinerarios, setItinerarios] = useState(); + + useEffect(() => { + setItinerarios([ + { + motorista: "João", + valor: "R$ 150,00", + lugares: "2", + avaliacao: "4.5", + bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + { + motorista: "Ricardo", + valor: "R$ 180,00", + lugares: "5", + avaliacao: "4.0", + bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + { + motorista: "Luiz", + valor: "R$ 200,00", + lugares: "1", + avaliacao: "4.3", + bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + { + motorista: "Marcos", + valor: "R$ 199,00", + lugares: "6", + avaliacao: "4.9", + bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + { + motorista: "Orandi", + valor: "R$ 210,00", + lugares: "8", + avaliacao: "5.0", + bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + { + motorista: "Pedro", + valor: "R$ 189,00", + lugares: "4", + avaliacao: "4.1", + bairros_atendidos: [{ lat: -22.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + { + motorista: "Pericles", + valor: "R$ 220,00", + lugares: "19", + avaliacao: "4.5", + bairros_atendidos: [{ lat: -23.873432, lgn: -47.142274 }], + destinos: [{ lat: -22.833645, lgn: -47.048905 }], + }, + ]); + }, []); + + return ( + + + + Buscar itinerários + + + + + + + + {/* + */} + + Filtros de busca + + Bairro de origem + { + setSelectedBairro(e.detail.value!); + }} + > + Vila Marieta + Botafogo + Cambuí + + + + + Instituição de ensino de destino + { + setSelectedFaculdade(e.detail.value!); + }} + > + + PUC Campinas (campus 1) + + Unicamp + UNIP + + + + {/* */} + + {/* */} + {selectedBairro && selectedFaculdade ? ( + <> + {itinerarios ? ( + itinerarios.map((itinerario, index) => { + return ( + + + +

Bairros atendidos: {itinerario.bairros_atendidos[0].lat},{itinerario.bairros_atendidos[0].lgn}

+

Instituições de ensino atendidas: {itinerario.destinos[0].lat},{itinerario.destinos[0].lgn}

+ + +

Vagas disponíveis: {itinerario.lugares}

+

Motorista: {itinerario.motorista}

+

Valor: {itinerario.valor}

+ + + + ); + }) + ) : ( + <> + )} + + ) : ( + <> + )} + {/* + */} + + + ); +}; + +export default BuscarItinerario; diff --git a/src/pages/Buscas.tsx b/src/pages/Buscas.tsx new file mode 100644 index 0000000..ee136ad --- /dev/null +++ b/src/pages/Buscas.tsx @@ -0,0 +1,59 @@ +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonPage } from "@ionic/react"; + +import { useEffect, useState } from "react"; +import { useHistory } from "react-router"; + +const Buscas: React.FC = () => { + useEffect(() => {}, []); + const history = useHistory(); + + return ( + + + history.push({ pathname: "/buscar/itinerario"}) }> + + + Buscar itinerários + + + + Clique aqui para buscar por itinerários + + + + history.push({ pathname: "/buscar/passageiro"}) }> + + + Buscar passageiros + + + + Clique aqui para buscar por passageiros + + + + history.push({ pathname: "/buscar-transporte"}) }> + + /buscar-transporte + + + + Clique aqui para buscar por transportes + + + + history.push({ pathname: "/buscar-passageiro"}) }> + + /buscar-passageiro + + + + Clique aqui para buscar por passageiros + + + + + ); +}; + +export default Buscas;