Ajustes Busca Itinerários
This commit is contained in:
Matheus Albino Brunhara
@@ -24,8 +24,6 @@ import CompletarDocumento from './pages/CadastroCompletar/CompletarDocumento';
|
||||
import CompletarTelefone from './pages/CadastroCompletar/CompletarTelefone';
|
||||
import Transportes from './pages/Transportes/Transportes';
|
||||
import BuscarPassageiro from './pages/BuscarPassageiro/BuscarPassageiro';
|
||||
import BuscarItinerarioList from './pages/BuscarItinerarioList';
|
||||
import Debug from './pages/Debug';
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
import '@ionic/react/css/core.css';
|
||||
|
||||
@@ -57,9 +57,11 @@ const BuscarItinerario: React.FC = () => {
|
||||
const [addressTo, setAddressTo] = useState<any>("");
|
||||
const [coordinatesTo, setCoordinatesTo] = useState<any>("");
|
||||
const [showModalEnd, setShowModalEnd] = useState(false);
|
||||
const [addressResults, setAddressResults] = useState<any>([]);
|
||||
const [addressResults, setAddressResults] = useState<any[]>([]);
|
||||
const [inputActive, setInputActive] = useState("");
|
||||
|
||||
const [recentSearches, setRecentSearches] = useState<any[]>([]);
|
||||
|
||||
const [itinerariesList, setItinerariesList] = useState<Itinerary[]>();
|
||||
|
||||
// const optionsAddress = async (inputValue: any) => {
|
||||
@@ -116,6 +118,21 @@ const BuscarItinerario: React.FC = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const maxRecentSearchesLength = 0
|
||||
|
||||
if (recentSearches.length >= maxRecentSearchesLength) {
|
||||
setRecentSearches(recentSearches.slice(recentSearches.length - maxRecentSearchesLength));
|
||||
}
|
||||
|
||||
setRecentSearches((arr) => [
|
||||
...arr,
|
||||
{
|
||||
addressFrom: addressFrom.label,
|
||||
addressTo: addressTo.label,
|
||||
time: Date.now(),
|
||||
},
|
||||
]);
|
||||
|
||||
await itinerariesService
|
||||
.searchItineraries({
|
||||
coordinatesFrom,
|
||||
@@ -139,6 +156,11 @@ const BuscarItinerario: React.FC = () => {
|
||||
});
|
||||
}
|
||||
|
||||
function fillSearchBars(addressFrom: string, addressTo: string) {
|
||||
// setAddressFrom(addressFrom);
|
||||
// setAddressTo(addressTo);
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<PageHeader
|
||||
@@ -194,19 +216,32 @@ const BuscarItinerario: React.FC = () => {
|
||||
</div>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
|
||||
{recentSearches && recentSearches.length !== 0 ? (
|
||||
<>
|
||||
<IonItemDivider color="dark">Pesquisas recentes</IonItemDivider>
|
||||
<IonRow class="latest-searches">
|
||||
{recentSearches.map((search, index) => {
|
||||
return (
|
||||
<>
|
||||
<div key={index}>
|
||||
<IonRow
|
||||
class="latest-searches"
|
||||
onClick={() => {
|
||||
fillSearchBars(search.addressFrom, search.addressTo);
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
className="icon-align-vcenter"
|
||||
size="large"
|
||||
icon={timeOutline}
|
||||
></IonIcon>
|
||||
<div className="div_from_to">
|
||||
<span>Rua Tal Tal, 154, São Paulo - SP</span>
|
||||
<span>{search.addressFrom}</span>
|
||||
<IonIcon icon={arrowForwardOutline}></IonIcon>
|
||||
<span>USP</span>
|
||||
<span>{search.addressTo}</span>
|
||||
<br />
|
||||
<small>Há 1 hora</small>
|
||||
<small>{search.time}</small>
|
||||
</div>
|
||||
<IonIcon
|
||||
className="icon-forward icon-align-vcenter"
|
||||
@@ -214,7 +249,16 @@ const BuscarItinerario: React.FC = () => {
|
||||
icon={chevronForwardOutline}
|
||||
></IonIcon>
|
||||
</IonRow>
|
||||
<IonRow class="latest-searches">
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</IonRow>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{/* <IonRow class="latest-searches">
|
||||
<IonIcon
|
||||
className="icon-align-vcenter"
|
||||
size="large"
|
||||
@@ -232,7 +276,7 @@ const BuscarItinerario: React.FC = () => {
|
||||
size="large"
|
||||
icon={chevronForwardOutline}
|
||||
/>
|
||||
</IonRow>
|
||||
</IonRow> */}
|
||||
{/* <IonModal isOpen={showModalEnd}>
|
||||
<IonContent>
|
||||
<div className="header-search-modal">
|
||||
@@ -274,7 +318,7 @@ const BuscarItinerario: React.FC = () => {
|
||||
</IonContent>
|
||||
</IonModal> */}
|
||||
|
||||
{itinerariesList ? (
|
||||
{itinerariesList && itinerariesList.length !== 0 ? (
|
||||
<>
|
||||
<IonItemDivider color="secondary">Resultados</IonItemDivider>
|
||||
{itinerariesList.map((itinerary, index) => {
|
||||
|
||||
@@ -1,190 +0,0 @@
|
||||
import {
|
||||
IonBackButton,
|
||||
IonButtons,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonList,
|
||||
IonListHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSelect,
|
||||
IonSelectOption,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from "@ionic/react";
|
||||
import { cashOutline, personOutline, starOutline } from "ionicons/icons";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useHistory } from "react-router";
|
||||
import { PageHeader } from "../components/PageHeader";
|
||||
|
||||
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<Itinerario[]>();
|
||||
|
||||
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 (
|
||||
<IonPage>
|
||||
<PageHeader
|
||||
pageName="Buscar itinerários"
|
||||
backButtonPageUrl="/buscas"
|
||||
></PageHeader>
|
||||
|
||||
<IonContent fullscreen>
|
||||
{/* <IonGrid>
|
||||
<IonRow> */}
|
||||
<IonList>
|
||||
<IonListHeader>Filtros de busca</IonListHeader>
|
||||
<IonItem>
|
||||
<IonLabel>Bairro de origem</IonLabel>
|
||||
<IonSelect
|
||||
// placeholder="Selecione o bairro de origem"
|
||||
onIonChange={(e) => {
|
||||
setSelectedBairro(e.detail.value!);
|
||||
}}
|
||||
>
|
||||
<IonSelectOption value="1">Vila Marieta</IonSelectOption>
|
||||
<IonSelectOption value="2">Botafogo</IonSelectOption>
|
||||
<IonSelectOption value="3">Cambuí</IonSelectOption>
|
||||
</IonSelect>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Instituição de ensino de destino</IonLabel>
|
||||
<IonSelect
|
||||
// placeholder="Selecione a instituição de ensino de destino"
|
||||
onIonChange={(e) => {
|
||||
setSelectedFaculdade(e.detail.value!);
|
||||
}}
|
||||
>
|
||||
<IonSelectOption value="1">
|
||||
PUC Campinas (campus 1)
|
||||
</IonSelectOption>
|
||||
<IonSelectOption value="2">Unicamp</IonSelectOption>
|
||||
<IonSelectOption value="3">UNIP</IonSelectOption>
|
||||
</IonSelect>
|
||||
</IonItem>
|
||||
</IonList>
|
||||
{/* </IonRow> */}
|
||||
|
||||
{/* <IonRow> */}
|
||||
{selectedBairro && selectedFaculdade ? (
|
||||
<>
|
||||
{itinerarios ? (
|
||||
itinerarios.map((itinerario, index) => {
|
||||
return (
|
||||
<IonCard key={index}>
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>
|
||||
{/* <p>Bairros atendidos: {itinerario.bairros_atendidos[0].lat},{itinerario.bairros_atendidos[0].lgn}</p> */}
|
||||
{/* <p>Instituições de ensino atendidas: {itinerario.destinos[0].lat},{itinerario.destinos[0].lgn}</p> */}
|
||||
</IonCardTitle>
|
||||
<IonCardSubtitle>
|
||||
<p><IonIcon icon={personOutline} /> Vagas disponíveis: {itinerario.lugares}</p>
|
||||
<p><IonIcon icon={starOutline} /> Motorista: {itinerario.motorista}</p>
|
||||
<p><IonIcon icon={cashOutline} /> Valor: {itinerario.valor}</p>
|
||||
</IonCardSubtitle>
|
||||
</IonCardHeader>
|
||||
</IonCard>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{/* </IonRow>
|
||||
</IonGrid> */}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default BuscarItinerario;
|
||||
Reference in New Issue
Block a user