Revert "Feature/VAN-16-view-create-itinerary"
This commit is contained in:
Hugo Falcão
224
src/pages/Transportes/Transportes.tsx
Normal file
224
src/pages/Transportes/Transportes.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import {
|
||||
IonContent,
|
||||
IonPage,
|
||||
IonFab,
|
||||
IonFabButton,
|
||||
IonIcon,
|
||||
IonCard,
|
||||
IonInput,
|
||||
IonRow,
|
||||
IonCol,
|
||||
IonCardContent,
|
||||
IonButton,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonButtons,
|
||||
IonBackButton,
|
||||
IonTabs,
|
||||
IonTabBar,
|
||||
IonTabButton,
|
||||
IonLabel,
|
||||
IonBadge,
|
||||
IonRouterOutlet,
|
||||
IonSlides,
|
||||
IonSlide,
|
||||
IonModal,
|
||||
IonList,
|
||||
IonRadioGroup,
|
||||
IonListHeader,
|
||||
IonItem,
|
||||
IonRadio,
|
||||
IonCheckbox,
|
||||
IonFooter,
|
||||
IonToast,
|
||||
} from "@ionic/react";
|
||||
import {
|
||||
arrowBack,
|
||||
arrowBackOutline,
|
||||
arrowForwardOutline,
|
||||
chevronBackOutline,
|
||||
chevronForwardOutline,
|
||||
closeOutline,
|
||||
locateOutline,
|
||||
locationOutline,
|
||||
timeOutline,
|
||||
} from "ionicons/icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useHistory, useLocation } from "react-router";
|
||||
import itinerariesService from "../../services/functions/itinerariesService";
|
||||
import { createUserSearch } from "../../services/api/users";
|
||||
import "./Transportes.css";
|
||||
import { closeToast } from "../../services/utils";
|
||||
|
||||
interface InfoBusca {
|
||||
addressFrom: any;
|
||||
addressTo: any;
|
||||
coordinatesFrom: any;
|
||||
coordinatesTo: any;
|
||||
}
|
||||
|
||||
const Transportes: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const props = location.state as InfoBusca;
|
||||
const [itinerarios, setItinerarios] = useState([]);
|
||||
const [showModalFilters, setShowModalFilters] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const [messageToast, setMessageToast ] = useState('');
|
||||
const [toastColor, setToastColor] = useState('success');
|
||||
|
||||
useEffect(() => {
|
||||
if (props) {
|
||||
buscaItinerarios();
|
||||
}
|
||||
}, [props]);
|
||||
|
||||
async function buscaItinerarios() {
|
||||
let data = (await itinerariesService.searchItineraries(props)) as any;
|
||||
setItinerarios(data);
|
||||
}
|
||||
|
||||
function criaAlerta(){
|
||||
createUserSearch(props.coordinatesFrom.lat, props.coordinatesFrom.lng, props.addressTo.label).then(() => {
|
||||
setMessageToast('Alerta criado com sucesso!');
|
||||
setShowToast(true);
|
||||
}).catch((err:any) => {
|
||||
setMessageToast('Não foi possível criar o alerta!');
|
||||
setToastColor('danger');
|
||||
setShowToast(true);
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
{/* TODO, componentizar Header */}
|
||||
<IonHeader>
|
||||
<div className="header-page">
|
||||
{/* <IonButtons slot="start">
|
||||
<IonBackButton text={'aaaa'} icon={arrowBack} defaultHref='buscar-transporte' />
|
||||
</IonButtons> */}
|
||||
<span className="span-info-back" onClick={history.goBack}>
|
||||
<IonIcon className="icon-return" icon={chevronBackOutline} />
|
||||
<div className="address-from-to">
|
||||
<span>{props.addressFrom.label}</span>
|
||||
<IonIcon icon={arrowForwardOutline} />
|
||||
<span>{props.addressTo.label}</span>
|
||||
<small>Hoje</small>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
{itinerarios && itinerarios.length > 0? (
|
||||
<div className="header-tabs">
|
||||
<IonSlides>
|
||||
<IonSlide>
|
||||
<h5>Mais barata</h5>
|
||||
<IonCard className="card-transporte">
|
||||
<IonCardContent>Seu João</IonCardContent>
|
||||
</IonCard>
|
||||
</IonSlide>
|
||||
<IonSlide>
|
||||
<h5>Melhor avaliação</h5>
|
||||
<IonCard className="card-transporte">
|
||||
<IonCardContent>Seu Zé</IonCardContent>
|
||||
</IonCard>
|
||||
</IonSlide>
|
||||
</IonSlides>
|
||||
</div>
|
||||
)
|
||||
:
|
||||
(<h1 className="msg-not-found">Não foi encontrado nenhum transporte que atenda essa rota.</h1>)}
|
||||
{itinerarios &&
|
||||
itinerarios.map((record: any, index: any) => {
|
||||
return (
|
||||
<IonCard className="card-transporte" key={index}>
|
||||
<IonCardContent>
|
||||
<h1>Motorista: {record.motorista}</h1>
|
||||
<div>Avaliação: {record.avaliacao}</div>
|
||||
<div>Valor: {record.valor}</div>
|
||||
<div>Lugares disponíveis: {record.lugares}</div>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="button-criar-alerta">
|
||||
<IonButton onClick={() => criaAlerta()}>Criar Alerta</IonButton>
|
||||
</div>
|
||||
|
||||
<IonFab
|
||||
onClick={() => setShowModalFilters(true)}
|
||||
vertical="bottom"
|
||||
horizontal="center"
|
||||
slot="fixed"
|
||||
>
|
||||
<IonFabButton>Filtros</IonFabButton>
|
||||
</IonFab>
|
||||
<IonModal isOpen={showModalFilters}>
|
||||
<IonToolbar>
|
||||
<div className="header-filter-modal">
|
||||
<IonIcon
|
||||
size="large"
|
||||
icon={closeOutline}
|
||||
onClick={() => setShowModalFilters(false)}
|
||||
/>
|
||||
<h4>
|
||||
<b>Limpar</b>
|
||||
</h4>
|
||||
</div>
|
||||
</IonToolbar>
|
||||
<IonContent>
|
||||
<div className="content-filter-modal">
|
||||
<h1>Filtrar</h1>
|
||||
<h3>Ordernar por</h3>
|
||||
<IonRadioGroup>
|
||||
<IonItem>
|
||||
<IonLabel>Menor preço</IonLabel>
|
||||
<IonRadio value="menor_preco" />
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Avaliação</IonLabel>
|
||||
<IonRadio value="avaliacao" />
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonLabel>Lugares disponíveis</IonLabel>
|
||||
<IonRadio value="lugares_disponiveis" />
|
||||
</IonItem>
|
||||
</IonRadioGroup>
|
||||
<h3>Preferências</h3>
|
||||
<IonItem>
|
||||
<IonLabel>Vaga avulsa</IonLabel>
|
||||
<IonCheckbox value="vaga_avulsa" />
|
||||
</IonItem>
|
||||
<IonItem>
|
||||
<IonLabel>Ar condicionado</IonLabel>
|
||||
<IonCheckbox value="ar_condicionado" />
|
||||
</IonItem>
|
||||
</div>
|
||||
</IonContent>
|
||||
<IonFooter>
|
||||
<IonButton
|
||||
expand="block"
|
||||
onClick={() => setShowModalFilters(false)}
|
||||
>
|
||||
Aplicar Filtros
|
||||
</IonButton>
|
||||
</IonFooter>
|
||||
</IonModal>
|
||||
<IonToast
|
||||
// cssClass={"toast-notification"}
|
||||
color={toastColor}
|
||||
isOpen={showToast}
|
||||
onDidDismiss={() => closeToast(setShowToast)}
|
||||
message={messageToast}
|
||||
duration={2500}
|
||||
/>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transportes;
|
||||
Reference in New Issue
Block a user