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

Componentizando header

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-09-03 16:38:13 -03:00
parent df4fe0ffef
commit c0b26741bb
20 changed files with 596 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Action.tsx
View File

@@ -1,17 +1,19 @@
import { IonCol, IonRouterLink, IonRow } from "@ionic/react";
interface ComponentProps {
message: string,
link: string,
text: string
message: string;
link: string;
text: string;
}
export const Action = (props: ComponentProps) => (
<IonRow className="ion-text-center ion-justify-content-center">
<IonCol size="12">
{ props.message }
<IonRouterLink className="custom-link" routerLink={ props.link }> { props.text } &rarr;</IonRouterLink>
</IonCol>
</IonRow>
);
<IonRow className="ion-text-center ion-justify-content-center">
<IonCol size="12">
{props.message}
<IonRouterLink className="custom-link" routerLink={props.link}>
{" "}
{props.text} &rarr;
</IonRouterLink>
</IonCol>
</IonRow>
);

17
src/components/PageHeader.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { IonBackButton, IonButtons, IonHeader, IonTitle, IonToolbar } from "@ionic/react";
interface ComponentProps {
pageName: string;
backButtonPageUrl?: string;
}
export const PageHeader = (props: ComponentProps) => (
<IonHeader translucent>
<IonToolbar>
<IonTitle>{props.pageName}</IonTitle>
<IonButtons slot="start">
<IonBackButton text="" defaultHref={ props.backButtonPageUrl ? props.backButtonPageUrl : undefined } />
</IonButtons>
</IonToolbar>
</IonHeader>
);

15
src/pages/BuscarItinerario.tsx
View File

@@ -1,16 +1,21 @@
import {
IonBackButton,
IonButton,
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonItemDivider,
IonPage,
IonRow,
IonTitle,
IonToolbar,
} from "@ionic/react";
import {
arrowForwardOutline,
@@ -34,6 +39,7 @@ import GooglePlacesAutocomplete, {
getLatLng,
} from "react-google-places-autocomplete";
import { Itinerary } from "../models/itinerary.model";
import { PageHeader } from "../components/PageHeader";
const BuscarItinerario: React.FC = () => {
const history = useHistory();
@@ -108,6 +114,11 @@ const BuscarItinerario: React.FC = () => {
return (
<IonPage>
<PageHeader
pageName="Buscar itinerários"
backButtonPageUrl="/buscas"
></PageHeader>
<IonContent fullscreen>
<IonCard>
<IonCardContent>
@@ -156,7 +167,7 @@ const BuscarItinerario: React.FC = () => {
</div>
</IonCardContent>
</IonCard>
<IonItemDivider>Pesquisas recentes</IonItemDivider>
<IonItemDivider color="dark">Pesquisas recentes</IonItemDivider>
<IonRow class="latest-searches">
<IonIcon
className="icon-align-vcenter"
@@ -238,7 +249,7 @@ const BuscarItinerario: React.FC = () => {
{itinerariesList ? (
<>
<IonItemDivider>Resultados</IonItemDivider>
<IonItemDivider color="secondary">Resultados</IonItemDivider>
{itinerariesList.map((itinerary, index) => {
return (
<IonCard button key={index} onClick={() => { history.push(`/itinerary/${itinerary.id_itinerary}`) }}>

13
src/pages/BuscarItinerarioList.tsx
View File

@@ -25,6 +25,7 @@ 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;
@@ -109,14 +110,10 @@ const BuscarItinerario: React.FC = () => {
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Buscar itinerários</IonTitle>
<IonButtons slot="start">
<IonBackButton text="" defaultHref="/buscas" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Buscar itinerários"
backButtonPageUrl="/buscas"
></PageHeader>
<IonContent fullscreen>
{/* <IonGrid>

210
src/pages/BuscarPassageiro/BuscarPassageiro.tsx
View File

@@ -1,127 +1,163 @@
import { IonContent, IonPage, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import { search } from 'ionicons/icons';
import './BuscarPassageiro.css';
import {
IonContent,
IonPage,
IonFab,
IonFabButton,
IonIcon,
} from "@ionic/react";
import { search } from "ionicons/icons";
import "./BuscarPassageiro.css";
import { Map, Marker, Overlay } from "pigeon-maps";
import { maptiler } from 'pigeon-maps/providers';
import { useEffect, useState } from 'react';
import { maptiler } from "pigeon-maps/providers";
import { useEffect, useState } from "react";
import RecordsStore from '../../store/RecordsStore';
import { fetchRecords } from '../../store/Selectors';
import { getUsersSearching } from '../../services/api/users';
import { UserSearchInfos } from '../../components/UserSearchInfos/UserSearchInfos';
import RecordsStore from "../../store/RecordsStore";
import { fetchRecords } from "../../store/Selectors";
import { getUsersSearching } from "../../services/api/users";
import { UserSearchInfos } from "../../components/UserSearchInfos/UserSearchInfos";
import { PageHeader } from "../../components/PageHeader";
const maptilerProvider = maptiler('d5JQJPLLuap8TkJJlTdJ', 'streets');
const maptilerProvider = maptiler("d5JQJPLLuap8TkJJlTdJ", "streets");
const BuscarPassageiro: React.FC = () => {
// UNCOMMENT THESE TO USE CURRENT LOCATION.
// UNCOMMENT THESE TO USE CURRENT LOCATION.
// const [ currentPoint, setCurrentPoint ] = useState(false);
// const [ currentPoint, setCurrentPoint ] = useState(false);
// useEffect(() => {
// useEffect(() => {
// const getCurrentLocation = async () => {
// const getCurrentLocation = async () => {
// const fetchedLocation = await getLocation();
// setCurrentPoint(fetchedLocation.currentLocation);
// }
// const fetchedLocation = await getLocation();
// setCurrentPoint(fetchedLocation.currentLocation);
// }
// getCurrentLocation();
// }, []);
// getCurrentLocation();
// }, []);
// useIonViewWillEnter(() => {
// useIonViewWillEnter(() => {
// getUsersSearching(currentPoint);
// });
// getUsersSearching(currentPoint);
// });
const [currentPoint, setCurrentPoint] = useState({
latitude: -22.907829,
longitude: -47.062943,
});
const [ currentPoint, setCurrentPoint ] = useState({ latitude: -22.907829, longitude: -47.062943 });
const records = RecordsStore.useState(fetchRecords);
const center = { latitude: -22.907829, longitude: -47.062943 };
const records = RecordsStore.useState(fetchRecords);
const center = { latitude: -22.907829, longitude: -47.062943 };
const [results, setResults] = useState([]);
const [zoom, setZoom] = useState(14);
const [ results, setResults ] = useState([]);
const [ zoom, setZoom ] = useState(14);
const [moveMode, setMoveMode] = useState(false);
const [ moveMode, setMoveMode ] = useState(false);
// useEffect(() => {
// useEffect(() => {
// const getData = async () => {
// const getData = async () => {
// await getUsersSearching(currentPoint);
// }
// await getUsersSearching(currentPoint);
// }
// getData();
// }, [ currentPoint ]);
// getData();
// }, [ currentPoint ]);
useEffect(() => {
setResults(records);
}, [records]);
useEffect(() => {
const hideMarkers = () => {
console.log("entrou");
const tempRecords = JSON.parse(JSON.stringify(results));
tempRecords.forEach((tempRecord: any) => (tempRecord.showInfo = false));
console.log(tempRecords);
setResults(tempRecords);
};
setResults(records);
}, [ records ]);
const hideMarkers = () => {
console.log('entrou')
const tempRecords = JSON.parse(JSON.stringify(results));
tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
console.log(tempRecords)
setResults(tempRecords);
}
const handleMap = (e:any) => {
const handleMap = (e: any) => {
setCurrentPoint({ latitude: e.center[0], longitude: e.center[1] });
}
};
const searchResults = async () => {
await getUsersSearching(currentPoint);
}
};
const showMarkerInfo = (e:any, index:any) => {
const showMarkerInfo = (e: any, index: any) => {
const tempRecords = JSON.parse(JSON.stringify(results));
const tempRecords = JSON.parse(JSON.stringify(results));
// Hide all current marker infos
!tempRecords[index].showInfo &&
tempRecords.forEach((tempRecord: any) => (tempRecord.showInfo = false));
tempRecords[index].showInfo = !tempRecords[index].showInfo;
// Hide all current marker infos
!tempRecords[index].showInfo && tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
tempRecords[index].showInfo = !tempRecords[index].showInfo;
console.log(tempRecords)
setResults(tempRecords);
}
console.log(tempRecords);
setResults(tempRecords);
};
return (
<IonPage>
<IonContent fullscreen>
{/* { results &&
<PageHeader
pageName="Buscar passageiros"
backButtonPageUrl="/buscas"
></PageHeader>
<IonContent fullscreen>
{/* { results &&
<> */}
<Map onBoundsChanged={e => handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }>
<Map
onBoundsChanged={(e) => handleMap(e)}
defaultCenter={[center.latitude, center.longitude]}
defaultZoom={zoom}
provider={maptilerProvider}
touchEvents={true}
>
{results &&
results.map(
(record: { latitude_from: any; longitude_from: any }, index) => {
return (
<Marker
onClick={(e) => showMarkerInfo(e, index)}
key={index}
color="#3578e5"
width={50}
anchor={[
parseFloat(record.latitude_from),
parseFloat(record.longitude_from),
]}
/>
);
}
)}
{results && results.map((record:{latitude_from:any, longitude_from:any}, index) => {
return <Marker onClick={ e => showMarkerInfo(e, index) } key={ index } color="#3578e5" width={ 50 } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } />
})}
{results.map((record: any, index) => {
if (record.showInfo) {
return (
<Overlay
key={index}
anchor={[
parseFloat(record.latitude_from),
parseFloat(record.longitude_from),
]}
offset={[95, 304]}
>
<UserSearchInfos record={record} />
</Overlay>
);
}
})}
</Map>
{ results.map((record:any, index) => {
if (record.showInfo) {
return (
<Overlay key={ index } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } offset={[95, 304]}>
<UserSearchInfos record={ record } />
</Overlay>
)
}
})}
</Map>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton>
<IonIcon onClick={searchResults} icon={search} />
</IonFabButton>
</IonFab>
{/* </> */}
{/* } */}
</IonContent>
</IonPage>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton>
<IonIcon onClick={searchResults} icon={search} />
</IonFabButton>
</IonFab>
{/* </> */}
{/* } */}
</IonContent>
</IonPage>
);
};
export default BuscarPassageiro;
export default BuscarPassageiro;

9
src/pages/Buscas.tsx
View File

@@ -2,6 +2,7 @@ import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle,
import { useEffect, useState } from "react";
import { useHistory } from "react-router";
import { PageHeader } from "../components/PageHeader";
const Buscas: React.FC = () => {
useEffect(() => {}, []);
@@ -9,11 +10,9 @@ const Buscas: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Buscas</IonTitle>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Buscas"
></PageHeader>
<IonContent fullscreen>
<IonCard button class="cardItem" onClick={ () => history.push({ pathname: "/buscar/itinerario"}) }>

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

@@ -20,25 +20,19 @@ import {
import { close, locateOutline, locationOutline } from "ionicons/icons";
import { useState } from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { PageHeader } from "../../components/PageHeader";
export default function CadastrarItinerario() {
const [selected, setSelected] = useState<any>("");
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton icon={close} text="" defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Cadastrar itinerário"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Cadastrar Itinerário</IonTitle>
</IonToolbar>
</IonHeader>
<IonCard>
<IonCardContent>
<div className="inputs-from-to">

13
src/pages/Cadastro/Cadastro.tsx
View File

@@ -10,6 +10,7 @@ import LocalStorage from '../../LocalStorage';
import { UserContext } from '../../App';
import { Color } from '@ionic/core';
import { closeToast } from '../../services/utils';
import { PageHeader } from '../../components/PageHeader';
const Cadastro: React.FC = () => {
const history = useHistory();
@@ -129,13 +130,11 @@ const Cadastro: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text={''} icon={arrowBack} defaultHref='login' />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Cadastro"
backButtonPageUrl="/login"
></PageHeader>
<IonContent fullscreen>
<IonGrid className="ion-padding">
<IonRow>

13
src/pages/CadastroCompletar/CadastroCompletar.tsx
View File

@@ -22,6 +22,7 @@ import { callOutline, documentTextOutline } from "ionicons/icons";
import '../Cadastro/Cadastro.css'
import { Color } from "@ionic/core";
import { closeToast } from "../../services/utils";
import { PageHeader } from "../../components/PageHeader";
interface cardItem {
icon: string;
@@ -104,14 +105,10 @@ const CadastroCompletar: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Completar cadastro</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Completar cadastro"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent>
{ items.map((item, index) => {

19
src/pages/CadastroCompletar/CompletarDocumento.tsx
View File

@@ -29,6 +29,7 @@ import * as usersRoutes from '../../services/api/users';
import validateCpf from '../../services/validateCpf'
import { closeToast } from "../../services/utils";
import { PageHeader } from "../../components/PageHeader";
interface documentTypesInterface {
label: string;
@@ -155,22 +156,12 @@ const CompletarDocumento: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Completar cadastro</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil/completar" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Completar cadastro"
backButtonPageUrl="/perfil/completar"
></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Completar cadastro</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol>

19
src/pages/CadastroCompletar/CompletarTelefone.tsx
View File

@@ -26,6 +26,7 @@ import { saveOutline } from "ionicons/icons";
import * as usersRoutes from '../../services/api/users';
import { Color } from "@ionic/core";
import { closeToast } from "../../services/utils";
import { PageHeader } from "../../components/PageHeader";
interface documentTypesInterface {
label: string;
@@ -113,22 +114,12 @@ const CompletarTelefone: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Completar cadastro</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil/completar" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Completar cadastro"
backButtonPageUrl="/perfil/completar"
></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Completar cadastro</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol>

13
src/pages/CadastroVan.tsx
View File

@@ -30,6 +30,7 @@ import * as vansRoutes from '../services/api/vans';
import "./CadastroVan.css";
import { Color } from "@ionic/core";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader";
const CadastroVan: React.FC = () => {
const history = useHistory();
@@ -241,14 +242,10 @@ const CadastroVan: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Cadastro de veículo</IonTitle>
<IonButtons slot='start'>
<IonBackButton defaultHref='/perfil' />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Cadastro de veículo"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent>
<IonList lines="full" class="ion-no-margin">

106
src/pages/Debug.tsx
View File

@@ -1,60 +1,58 @@
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from "@ionic/react";
import React, { useContext, useState } from "react";
import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
import { useHistory } from "react-router-dom";
import {
IonItem,
IonLabel,
IonInput,
IonButton,
} from "@ionic/react";
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
} from "@ionic/react";
import React, { useContext, useState } from "react";
import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
import { useHistory } from "react-router-dom";
import { IonItem, IonLabel, IonInput, IonButton } from "@ionic/react";
import { UserContext } from "../App";
const Debug: React.FC = () => {
const [input, setInput] = useState('');
return (
<IonPage>
<IonHeader>
import { UserContext } from "../App";
import { PageHeader } from "../components/PageHeader";
const Debug: React.FC = () => {
const [input, setInput] = useState("");
return (
<IonPage>
<PageHeader pageName="Debug" backButtonPageUrl="/home"></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle>Debug</IonTitle>
<IonTitle size="large">Debug</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Debug</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol>
<IonItem>
<IonLabel position="floating"> Input</IonLabel>
<IonInput
type="date"
value={input}
// onIonChange={(e) => { setInput(e.detail.value!) }}
></IonInput>
</IonItem>
<IonButton onClick={(e) => { setInput('1994-12-15'); console.log(input) }}>Enviar</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Debug;
<IonGrid>
<IonRow>
<IonCol>
<IonItem>
<IonLabel position="floating"> Input</IonLabel>
<IonInput
type="date"
value={input}
// onIonChange={(e) => { setInput(e.detail.value!) }}
></IonInput>
</IonItem>
<IonButton
onClick={(e) => {
setInput("1994-12-15");
console.log(input);
}}
>
Enviar
</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Debug;

170
src/pages/Itinerario.tsx
View File

@@ -1,22 +1,40 @@
import { IonBackButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToast, IonToolbar } from '@ionic/react';
import { Color } from '@ionic/core';
import { carOutline } from 'ionicons/icons';
import { useContext, useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import {
IonBackButton,
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonPage,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react";
import { Color } from "@ionic/core";
import { carOutline } from "ionicons/icons";
import { useContext, useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router";
import { UserContext } from '../App';
import { UserContext } from "../App";
import * as vansRoutes from '../services/api/vans';
import * as vansRoutes from "../services/api/vans";
import sessionsService from '../services/functions/sessionsService'
import { closeToast } from '../services/utils';
import sessionsService from "../services/functions/sessionsService";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader";
interface VanInfo {
plate: string;
brand: string;
model: string;
seats_number: string;
document_status: boolean,
document_status: boolean;
locator_name: string;
locator_address: string;
locator_complement: string;
@@ -28,90 +46,100 @@ const Itinerario: React.FC = () => {
const history = useHistory();
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const [toastMessage, setToastMessage] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary");
const [userVans, setUserVans] = useState<VanInfo[]>();
const redirectUserToLogin = () => {
history.push({ pathname: '/login' });
}
history.push({ pathname: "/login" });
};
useEffect(() => {
const getUserVans = async () => {
let userId = ''
let userId = "";
const refreshSessionRes = await sessionsService.refreshSession();
const refreshSessionRes = await sessionsService.refreshSession()
if (refreshSessionRes.error) {
redirectUserToLogin()
return
redirectUserToLogin();
return;
}
if (refreshSessionRes.userId) {
userId = refreshSessionRes.userId
userId = refreshSessionRes.userId;
}
vansRoutes.getByUserId(userId).then(response => {
if (response.status === 'error') {
setToastColor("danger")
setToastMessage(response.message);
setShowToast(true);
return
}
setUserVans(response.data)
}).catch((err) => {
setToastColor("danger")
setToastMessage(err);
setShowToast(true);
})
}
vansRoutes
.getByUserId(userId)
.then((response) => {
if (response.status === "error") {
setToastColor("danger");
setToastMessage(response.message);
setShowToast(true);
return;
}
setUserVans(response.data);
})
.catch((err) => {
setToastColor("danger");
setToastMessage(err);
setShowToast(true);
});
};
getUserVans();
}, []);
getUserVans()
}, [])
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Minhas vans</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
{ userVans ? userVans.map((van, index) => {
<PageHeader
pageName="Minhas vans"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent>
{userVans ? (
userVans.map((van, index) => {
return (
<IonCard key={index}>
<IonCardHeader>
<IonCardTitle>{van.plate}</IonCardTitle>
<IonCardSubtitle>{van.brand} - {van.model}</IonCardSubtitle>
</IonCardHeader>
{ van.locator_name ?
<IonCardHeader>
<IonCardTitle>{van.plate}</IonCardTitle>
<IonCardSubtitle>
{van.brand} - {van.model}
</IonCardSubtitle>
</IonCardHeader>
{van.locator_name ? (
<>
<IonCardContent>{van.seats_number} assentos - Locador: {van.locator_name}</IonCardContent>
</> :
<>
<IonCardContent>{van.seats_number} assentos - Não é alugado</IonCardContent>
<IonCardContent>
{van.seats_number} assentos - Locador: {van.locator_name}
</IonCardContent>
</>
}
) : (
<>
<IonCardContent>
{van.seats_number} assentos - Não é alugado
</IonCardContent>
</>
)}
</IonCard>
)
}) : <></>}
);
})
) : (
<></>
)}
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => closeToast(setShowToast)}
message={toastMessage}
duration={2500}
/>
</IonContent>
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => closeToast(setShowToast)}
message={toastMessage}
duration={2500}
/>
</IonContent>
</IonPage>
);
};

98
src/pages/Login.tsx
View File

@@ -3,31 +3,27 @@ import {
IonHeader,
IonPage,
IonTitle,
IonToolbar
IonToolbar,
} from "@ionic/react";
import React, { useContext, useState } from "react";
import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
import { useHistory } from "react-router-dom";
import {
IonItem,
IonLabel,
IonInput,
IonButton,
} from "@ionic/react";
import { IonItem, IonLabel, IonInput, IonButton } from "@ionic/react";
import * as sessionRoutes from '../services/api/session';
import LocalStorage from '../LocalStorage';
import * as sessionRoutes from "../services/api/session";
import LocalStorage from "../LocalStorage";
import { Action } from "../components/Action";
import { UserContext } from "../App";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader";
const Page: React.FC = () => {
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast ] = useState('');
const [messageToast, setMessageToast] = useState("");
const history = useHistory();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const user = useContext(UserContext);
@@ -57,18 +53,18 @@ const Page: React.FC = () => {
return false;
}
if(password.length < 7 || password.length > 12) {
if (password.length < 7 || password.length > 12) {
setMessageToast("A senha deve conter entre 7 e 12 dígitos");
setShowToast(true);
return false;
}
return true;
}
};
const handleLogin = async () => {
if (!validateForm()) {
return
return;
}
const singinForm = {
@@ -76,50 +72,48 @@ const Page: React.FC = () => {
password: password,
};
await sessionRoutes.create(singinForm).then(response => {
if (response.status === 'error') {
setMessageToast(response.message);
setShowToast(true);
await sessionRoutes
.create(singinForm)
.then((response) => {
if (response.status === "error") {
setMessageToast(response.message);
setShowToast(true);
return
}
return;
}
const { token } = response.token
const { token } = response.token;
LocalStorage.setToken(token);
LocalStorage.setToken(token);
user.setIsLoggedIn(true);
user.setIsLoggedIn(true);
history.push({ pathname: '/home', state: { redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: "Usuário autenticado com sucesso!",
}}})
}).catch(error => {
// if (!error.response) return
history.push({
pathname: "/home",
state: {
redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: "Usuário autenticado com sucesso!",
},
},
});
})
.catch((error) => {
// if (!error.response) return
// se o backend retornou uma mensagem de erro customizada
// if (error.response.data.message) {
console.dir('Houve um erro: ', { error })
alert('Houve um erro')
})
// se o backend retornou uma mensagem de erro customizada
// if (error.response.data.message) {
console.dir("Houve um erro: ", { error });
alert("Houve um erro");
});
};
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Login</IonTitle>
</IonToolbar>
</IonHeader>
<PageHeader pageName="Login"></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Login</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol>
@@ -153,7 +147,11 @@ const Page: React.FC = () => {
Login
</IonButton>
<p style={{ fontSize: "medium" }}>
<Action message="Ainda não possui uma conta?" text="Cadastre-se aqui!" link="/cadastro" />
<Action
message="Ainda não possui uma conta?"
text="Cadastre-se aqui!"
link="/cadastro"
/>
</p>
</IonCol>
</IonRow>
@@ -161,7 +159,7 @@ const Page: React.FC = () => {
<IonToast
position="top"
color='danger'
color="danger"
isOpen={showToast}
onDidDismiss={() => closeToast(setShowToast)}
message={messageToast}

19
src/pages/MeusItinerarios/MeusItinerarios.tsx
View File

@@ -16,6 +16,7 @@ import {
} from "@ionic/react";
import { add, locateOutline, locationOutline } from "ionicons/icons";
import { useState } from "react";
import { PageHeader } from "../../components/PageHeader";
import "./MeusItinerarios.css";
interface ItineraryInfo {
@@ -93,20 +94,12 @@ export default function MeusItinerarios() {
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Meus Itinerários</IonTitle>
<IonButtons slot="start">
<IonBackButton text={""} defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Meus Itinerários"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Meus Itinerários</IonTitle>
</IonToolbar>
</IonHeader>
{routes ? (
routes.map((itinerary, index) => {
return (

170
src/pages/MinhasVans.tsx
View File

@@ -1,22 +1,40 @@
import { IonBackButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToast, IonToolbar } from '@ionic/react';
import { Color } from '@ionic/core';
import { carOutline } from 'ionicons/icons';
import { useContext, useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import {
IonBackButton,
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonPage,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react";
import { Color } from "@ionic/core";
import { carOutline } from "ionicons/icons";
import { useContext, useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router";
import { UserContext } from '../App';
import { UserContext } from "../App";
import * as vansRoutes from '../services/api/vans';
import * as vansRoutes from "../services/api/vans";
import sessionsService from '../services/functions/sessionsService'
import { closeToast } from '../services/utils';
import sessionsService from "../services/functions/sessionsService";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader";
interface VanInfo {
plate: string;
brand: string;
model: string;
seats_number: string;
document_status: boolean,
document_status: boolean;
locator_name: string;
locator_address: string;
locator_complement: string;
@@ -28,90 +46,100 @@ const MinhasVans: React.FC = () => {
const history = useHistory();
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const [toastMessage, setToastMessage] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary");
const [userVans, setUserVans] = useState<VanInfo[]>();
const redirectUserToLogin = () => {
history.push({ pathname: '/login' });
}
history.push({ pathname: "/login" });
};
useEffect(() => {
const getUserVans = async () => {
let userId = ''
let userId = "";
const refreshSessionRes = await sessionsService.refreshSession();
const refreshSessionRes = await sessionsService.refreshSession()
if (refreshSessionRes.error) {
redirectUserToLogin()
return
redirectUserToLogin();
return;
}
if (refreshSessionRes.userId) {
userId = refreshSessionRes.userId
userId = refreshSessionRes.userId;
}
vansRoutes.getByUserId(userId).then(response => {
if (response.status === 'error') {
setToastColor("danger")
setToastMessage(response.message);
setShowToast(true);
return
}
setUserVans(response.data)
}).catch((err) => {
setToastColor("danger")
setToastMessage(err);
setShowToast(true);
})
}
vansRoutes
.getByUserId(userId)
.then((response) => {
if (response.status === "error") {
setToastColor("danger");
setToastMessage(response.message);
setShowToast(true);
return;
}
setUserVans(response.data);
})
.catch((err) => {
setToastColor("danger");
setToastMessage(err);
setShowToast(true);
});
};
getUserVans();
}, []);
getUserVans()
}, [])
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Minhas vans</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
{ userVans ? userVans.map((van, index) => {
<PageHeader
pageName="Minhas vans"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent>
{userVans ? (
userVans.map((van, index) => {
return (
<IonCard key={index}>
<IonCardHeader>
<IonCardTitle>{van.plate}</IonCardTitle>
<IonCardSubtitle>{van.brand} - {van.model}</IonCardSubtitle>
</IonCardHeader>
{ van.locator_name ?
<IonCardHeader>
<IonCardTitle>{van.plate}</IonCardTitle>
<IonCardSubtitle>
{van.brand} - {van.model}
</IonCardSubtitle>
</IonCardHeader>
{van.locator_name ? (
<>
<IonCardContent>{van.seats_number} assentos - Locador: {van.locator_name}</IonCardContent>
</> :
<>
<IonCardContent>{van.seats_number} assentos - Não é alugado</IonCardContent>
<IonCardContent>
{van.seats_number} assentos - Locador: {van.locator_name}
</IonCardContent>
</>
}
) : (
<>
<IonCardContent>
{van.seats_number} assentos - Não é alugado
</IonCardContent>
</>
)}
</IonCard>
)
}) : <></>}
);
})
) : (
<></>
)}
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => closeToast(setShowToast)}
message={toastMessage}
duration={2500}
/>
</IonContent>
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => closeToast(setShowToast)}
message={toastMessage}
duration={2500}
/>
</IonContent>
</IonPage>
);
};

16
src/pages/Perfil.tsx
View File

@@ -41,6 +41,7 @@ import usersService from "../services/functions/usersService";
import { UserContext } from "../App";
import { Color } from "@ionic/core";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader";
interface ScanNewProps {
match: {
@@ -212,22 +213,9 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Seu perfil</IonTitle>
<IonButtons slot="start">
<IonBackButton text="" defaultHref="/home" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader pageName="Meu perfil"></PageHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Seu perfil</IonTitle>
</IonToolbar>
</IonHeader>
<IonCard>
<IonCardContent>
<img

151
src/pages/PerfilEditar.tsx
View File

@@ -14,22 +14,23 @@ import {
IonTextarea,
IonTitle,
IonToast,
IonToolbar
IonToolbar,
} from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react";
import { IonRow, IonCol } from "@ionic/react";
import './Perfil.css'
import "./Perfil.css";
import { useHistory, useLocation } from "react-router";
import { saveOutline } from "ionicons/icons";
import isEqual from 'lodash.isequal';
import isEqual from "lodash.isequal";
import * as usersRoutes from '../services/api/users';
import * as usersRoutes from "../services/api/users";
import './Cadastro/Cadastro.css'
import "./Cadastro/Cadastro.css";
import { Color } from "@ionic/core";
import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader";
interface userData {
name: string;
@@ -40,7 +41,7 @@ interface userData {
}
interface LocationState {
userData: userData
userData: userData;
}
const PerfilEditar: React.FC = () => {
@@ -48,97 +49,101 @@ const PerfilEditar: React.FC = () => {
const location = useLocation<LocationState>();
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const [messageToast, setMessageToast] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary");
const [userData, setUserData] = useState({
name: '',
lastname: '',
email: '',
birth_date: '',
bio: '',
name: "",
lastname: "",
email: "",
birth_date: "",
bio: "",
});
const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }),
{
name: '',
lastname: '',
email: '',
birth_date: '',
bio: '',
name: "",
lastname: "",
email: "",
birth_date: "",
bio: "",
}
);
useEffect(() => {
if (!location.state) {
history.push({ pathname: '/perfil' })
history.push({ pathname: "/perfil" });
}
let userData = location.state.userData
let userData = location.state.userData;
setUserData(location.state.userData)
setUserData(location.state.userData);
setInputValues({
'name': userData.name,
'lastname': userData.lastname,
'email': userData.email,
'birth_date': userData.birth_date,
'bio': userData.bio
name: userData.name,
lastname: userData.lastname,
email: userData.email,
birth_date: userData.birth_date,
bio: userData.bio,
});
console.log(inputValues)
console.log(inputValues);
}, [userData]);
const handleUpdateUserData = () => {
usersRoutes.update(inputValues).then(response => {
if (response.status === 'error') {
setToastColor("danger")
setMessageToast(response.message);
usersRoutes
.update(inputValues)
.then((response) => {
if (response.status === "error") {
setToastColor("danger");
setMessageToast(response.message);
setShowToast(true);
return;
}
history.push({
pathname: "/perfil",
state: {
redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: response.message,
},
},
});
})
.catch((err) => {
setToastColor("danger");
setMessageToast(err);
setShowToast(true);
return
}
history.push({ pathname: '/perfil', state: {
redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: response.message,
},
}})
}).catch((err) => {
setToastColor("danger")
setMessageToast(err);
setShowToast(true);
})
}
});
};
const hasChangedSinceInitialState = () => {
return isEqual(userData, inputValues)
}
return isEqual(userData, inputValues);
};
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Editar perfil</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
<PageHeader
pageName="Editar perfil"
backButtonPageUrl="/perfil"
></PageHeader>
<IonContent>
<IonGrid>
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
<div id="nome-sobrenome">
<IonItem>
<IonLabel position="stacked"> Nome</IonLabel>
<IonInput
type="text"
value={inputValues.name}
onIonChange={(e) => setInputValues({'name': e.detail.value!})}
onIonChange={(e) =>
setInputValues({ name: e.detail.value! })
}
></IonInput>
</IonItem>
@@ -147,7 +152,9 @@ const PerfilEditar: React.FC = () => {
<IonInput
type="text"
value={inputValues.lastname}
onIonChange={(e) => setInputValues({'lastname': e.detail.value!})}
onIonChange={(e) =>
setInputValues({ lastname: e.detail.value! })
}
></IonInput>
</IonItem>
</div>
@@ -157,25 +164,28 @@ const PerfilEditar: React.FC = () => {
<IonInput
type="email"
value={inputValues.email}
onIonChange={(e) => setInputValues({'email': e.detail.value!})}
onIonChange={(e) =>
setInputValues({ email: e.detail.value! })
}
></IonInput>
</IonItem>
<IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonInput
type='date'
<IonLabel position="stacked">Data de nascimento</IonLabel>
<IonInput
type="date"
value={inputValues.birth_date}
onIonChange={(e) => setInputValues({'birth_date': e.detail.value!}) }
>
</IonInput>
onIonChange={(e) =>
setInputValues({ birth_date: e.detail.value! })
}
></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked"> Biografia</IonLabel>
<IonTextarea
value={inputValues.bio}
onIonChange={(e) => setInputValues({'bio': e.detail.value!})}
onIonChange={(e) => setInputValues({ bio: e.detail.value! })}
></IonTextarea>
</IonItem>
</IonCol>
@@ -183,7 +193,10 @@ const PerfilEditar: React.FC = () => {
</IonGrid>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton disabled={hasChangedSinceInitialState()} onClick={handleUpdateUserData}>
<IonFabButton
disabled={hasChangedSinceInitialState()}
onClick={handleUpdateUserData}
>
<IonIcon icon={saveOutline} />
</IonFabButton>
</IonFab>

1
src/pages/Transportes/Transportes.tsx
View File

@@ -91,6 +91,7 @@ const Transportes: React.FC = () => {
return (
<IonPage>
{/* TODO, componentizar Header */}
<IonHeader>
<div className="header-page">
{/* <IonButtons slot="start">