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

wip

Browse Source
This commit is contained in:
Hugo Falcao
2022-09-06 20:49:00 -03:00
parent 33fd007755
commit e8209762c0
19 changed files with 1500 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -11,8 +11,8 @@
"@craco/craco": "^6.4.5",
"@hookform/error-message": "^2.0.0",
"@ionic-selectable/core": "^5.0.0-alpha.13",
"@ionic/react": "^6.0.0",
"@ionic/react-router": "^6.0.0",
"@ionic/react": "^6.2.5",
"@ionic/react-router": "^6.2.5",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3",

28
src/App.tsx
View File

@@ -11,20 +11,6 @@ import {
import { IonReactRouter } from "@ionic/react-router";
import { Redirect, Route } from "react-router-dom";
// importação das páginas
import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
import BuscarTransporte from "./pages/BuscarTransporte/BuscarTransporte";
import Cadastro from "./pages/Cadastro/Cadastro";
import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
import CadastroVan from "./pages/CadastroVan";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Perfil from "./pages/Perfil";
import PerfilEditar from "./pages/PerfilEditar";
import Transportes from "./pages/Transportes/Transportes";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
@@ -49,9 +35,23 @@ import "./theme/tailwind.css";
import { home, person, search } from "ionicons/icons";
import React, { useContext, useState } from "react";
/* Importação das páginas */
import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
import BuscarTransporte from "./pages/BuscarTransporte/BuscarTransporte";
import CadastrarItinerario from "./pages/CadastrarItinerario/CadastrarItinerario";
import Cadastro from "./pages/Cadastro/Cadastro";
import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
import CadastroVan from "./pages/CadastroVan";
import Home from "./pages/Home";
import Login from "./pages/Login";
import MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios";
import MinhasVans from "./pages/MinhasVans";
import Perfil from "./pages/Perfil";
import PerfilEditar from "./pages/PerfilEditar";
import Transportes from "./pages/Transportes/Transportes";
setupIonicReact();

19
src/LocalStorage.ts
View File

@@ -1,24 +1,21 @@
const tokenId = 'token';
const productDetails = '@productDetails';
const LocalStorage = {
getToken: (): string => {
const tokenId = localStorage.getItem('tokenId')
const tokenId = localStorage.getItem("tokenId");
if (!tokenId) {
return ''
return "";
}
return tokenId
return tokenId;
},
setToken: (token: string) => {
localStorage.setItem('tokenId', token)
localStorage.setItem("tokenId", token);
},
clearToken: () => {
localStorage.removeItem('tokenId')
}
}
localStorage.removeItem("tokenId");
},
};
export default LocalStorage
export default LocalStorage;

10
src/components/UserSearchInfos/UserSearchInfos.tsx
View File

@@ -4,15 +4,9 @@ import {
IonCardSubtitle,
IonCol,
IonIcon,
IonNote,
IonRow,
} from "@ionic/react";
import {
arrowForward,
call,
callOutline,
navigateOutline,
} from "ionicons/icons";
import { call, callOutline, navigateOutline } from "ionicons/icons";
import "./UserSearchInfos.css";
export const UserSearchInfos = (record: any) => {
@@ -28,7 +22,7 @@ export const UserSearchInfos = (record: any) => {
</IonBadge>
<p>
<IonIcon icon={navigateOutline} size='large' />
<IonIcon icon={navigateOutline} size="large" />
&nbsp;{record.record.address_to}
</p>

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

@@ -1,20 +1,25 @@
import { IonContent, IonPage, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import { search } from 'ionicons/icons';
import './BuscarPassageiro.css';
import {
IonContent,
IonFab,
IonFabButton,
IonIcon,
IonPage,
} 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 { UserSearchInfos } from "../../components/UserSearchInfos/UserSearchInfos";
import { getUsersSearching } from "../../services/api/users";
import RecordsStore from "../../store/RecordsStore";
import { fetchRecords } from "../../store/Selectors";
const maptilerProvider = maptiler('d5JQJPLLuap8TkJJlTdJ', 'streets');
const maptilerProvider = maptiler("d5JQJPLLuap8TkJJlTdJ", "streets");
const BuscarPassageiro: React.FC = () => {
// UNCOMMENT THESE TO USE CURRENT LOCATION.
// const [ currentPoint, setCurrentPoint ] = useState(false);
@@ -35,15 +40,18 @@ const BuscarPassageiro: React.FC = () => {
// 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 [ 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(() => {
@@ -56,58 +64,81 @@ const BuscarPassageiro: React.FC = () => {
// }, [ currentPoint ]);
useEffect(() => {
setResults(records);
}, [ records ]);
}, [records]);
const hideMarkers = () => {
console.log('entrou')
console.log("entrou");
const tempRecords = JSON.parse(JSON.stringify(results));
tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
console.log(tempRecords)
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));
// Hide all current marker infos
!tempRecords[index].showInfo && tempRecords.forEach((tempRecord:any) => tempRecord.showInfo = false);
!tempRecords[index].showInfo &&
tempRecords.forEach((tempRecord: any) => (tempRecord.showInfo = false));
tempRecords[index].showInfo = !tempRecords[index].showInfo;
console.log(tempRecords)
console.log(tempRecords);
setResults(tempRecords);
}
};
return (
<IonPage>
<IonContent fullscreen>
{/* { results &&
<> */}
<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.map((record:any, index) => {
if (record.showInfo) {
<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 (
<Overlay key={ index } anchor={ [ parseFloat(record.latitude_from), parseFloat(record.longitude_from) ] } offset={[95, 304]}>
<UserSearchInfos record={ record } />
<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>

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

@@ -1,18 +1,185 @@
import { Color } from "@ionic/core";
import {
IonBackButton,
IonButton,
IonButtons,
IonCheckbox,
IonContent,
IonDatetime,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonList,
IonPage,
IonRange,
IonSelect,
IonSelectOption,
IonSlide,
IonSlides,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react";
import { close, locateOutline, locationOutline } from "ionicons/icons";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import {
add,
addCircleOutline,
arrowBack,
arrowForward,
checkmark,
close,
informationCircle,
locateOutline,
locationOutline,
removeCircleOutline,
} from "ionicons/icons";
import { useEffect, useRef, useState } from "react";
import GooglePlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from "react-google-places-autocomplete";
import { useHistory } from "react-router";
import * as vansRoutes from "../../services/api/vans";
import sessionsService from "../../services/functions/sessionsService";
const slideOpts = {
initialSlide: 0,
allowTouchMove: false,
};
interface VanInfo {
plate: string;
brand: string;
model: string;
seats_number: string;
document_status: boolean;
locator_name: string;
locator_address: string;
locator_complement: string;
locator_city: string;
locator_state: string;
}
interface Coords {
lat: number;
lng: number;
}
export default function CadastrarItinerario() {
const minDate = new Date();
const history = useHistory();
const mySlides = useRef<any>(null);
const nextButton1 = useRef<HTMLIonButtonElement>(null);
const nextButton2 = useRef<HTMLIonButtonElement>(null);
const [specificDate, setSpecificDate] = useState<boolean>(false);
const [singleVacancy, setSingleVacancy] = useState<boolean>(false);
const [vans, setVans] = useState<VanInfo[]>();
const [showToast, setShowToast] = useState<boolean>(false);
const [toastMessage, setToastMessage] = useState<string>("");
const [toastColor, setToastColor] = useState<Color>("primary");
//Infos
const [initialAddress, setInitialAddress] = useState<any>("");
const [initialCoords, setInitialCoords] = useState<Coords>();
const [neighborhoods, setNeighborhoods] = useState<Array<string>>([]);
const [finalAddress, setFinalAddress] = useState<string>("");
const [destinations, setDestinations] = useState<Array<string>>([]);
const [daysOfWeek, setDaysOfWeek] = useState<number>();
const [specificDay, setSpecificDay] = useState<Date>();
const [departureTime, setDepartureTime] = useState<Date>();
const [arrivalTime, setArrivalTime] = useState<Date>();
const [monthlyPrice, setMonthlyPrice] = useState<number>(0);
const [dailyPrice, setDailyPrice] = useState<number>(0);
const [van, setVan] = useState<string>("");
const [nickname, setNickname] = useState<string>("");
const redirectUserToLogin = () => {
history.push({ pathname: "/login" });
};
const onBtnClicked = async (direction: string) => {
const swiper = await mySlides.current.getSwiper();
if (direction === "next") {
swiper.slideNext();
} else if (direction === "prev") {
swiper.slidePrev();
}
};
function formatRange(rangeValue: number) {
switch (rangeValue) {
case 1:
return "Segunda";
case 2:
return "Terça";
case 3:
return "Quarta";
case 4:
return "Quinta";
case 5:
return "Sexta";
case 6:
return "Sabádo";
case 7:
return "Domingo";
default:
return "";
}
}
useEffect(() => {
const getUserVans = async () => {
let userId = "";
const refreshSessionRes = await sessionsService.refreshSession();
if (refreshSessionRes.error) {
redirectUserToLogin();
return;
}
if (refreshSessionRes.userId) {
userId = refreshSessionRes.userId;
}
vansRoutes
.getByUserId(userId)
.then((response) => {
if (response.status === "error") {
setToastColor("danger");
setToastMessage(response.message);
setShowToast(true);
return;
}
setVans(response.data);
})
.catch((err) => {
setToastColor("danger");
setToastMessage(err);
setShowToast(true);
});
};
getUserVans();
}, []);
useEffect(() => {
console.log(initialAddress);
if (initialAddress.label && initialAddress.label.length > 0) {
geocodeByAddress(initialAddress.label)
.then((results) => getLatLng(results[0]))
.then(({ lat, lng }) => setInitialCoords({ lat, lng }));
}
}, [initialAddress]);
function addNeighborhoodToList() {}
return (
<IonPage>
<IonHeader>
@@ -24,20 +191,167 @@ export default function CadastrarItinerario() {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonSlides ref={mySlides} options={slideOpts}>
<IonSlide>
<div className="m-3">
<h1>Digite o endereço de onde você iniciará a rota do itinerário</h1>
<div className="inputs-from-to">
<h1 className="mb-3 text-xl">
Digite o endereço de onde você iniciará a rota do itinerário
</h1>
<div className="flex items-center mb-3">
<IonIcon icon={locateOutline}></IonIcon>
{/* <GooglePlacesAutocomplete
apiKey={process.env.REACT_APP_KEY_API}
apiOptions={{ language: "pt-br", region: "br" }}
selectProps={{
value: initialAddress,
onChange: setInitialAddress,
className: "input-autocomplete",
placeholder: "R. José Paulino, 1234",
}}
/> */}
<GooglePlacesAutocomplete
apiKey={process.env.REACT_APP_KEY_API}
apiOptions={{ language: "pt-br", region: "br" }}
selectProps={{
value: initialAddress,
onChange: setInitialAddress,
className: "input-autocomplete",
placeholder: "R. José Paulino, 1234",
}}
/>
</div>
<div className="inputs-from-to">
<div className="flex justify-end mb-3">
<IonButton
ref={nextButton1}
disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Essa informação é importante para que possamos informar aos
passageiros um horário aproximado que você passará para
pegá-lo.
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Adicione os bairros que você atenderá
</h1>
<div className="flex items-center mb-3">
<IonIcon icon={locationOutline}></IonIcon>
<GooglePlacesAutocomplete
apiKey={process.env.REACT_APP_KEY_API}
apiOptions={{ language: "pt-br", region: "br" }}
selectProps={{
className: "input-autocomplete",
placeholder: "PUC Campinas",
onChange: () => {
addNeighborhoodToList();
},
}}
/>
</div>
<div className="flex justify-end mb-3">
<IonButton>
<IonIcon icon={add} />
</IonButton>
</div>
<div className="mb-3">
<IonList>
<IonItem>
<IonCheckbox slot="end"></IonCheckbox>
<IonLabel>Taquaral</IonLabel>
</IonItem>
<IonItem>
<IonCheckbox slot="end"></IonCheckbox>
<IonLabel>Barão Geraldo</IonLabel>
</IonItem>
</IonList>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton onClick={() => onBtnClicked("next")} color="primary">
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Não se preocupe, você poderá adicionar ou remover bairros
posteriormente caso precise editando o itinerário.
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Digite o endereço de destino final do itinerário
</h1>
<div className="flex items-center mb-3">
<IonIcon icon={locationOutline}></IonIcon>
<GooglePlacesAutocomplete
apiKey={process.env.REACT_APP_KEY_API}
apiOptions={{ language: "pt-br", region: "br" }}
selectProps={{
className: "input-autocomplete",
placeholder: "PUC Campinas",
onChange: () => {
nextButton2.current!.disabled = false;
},
}}
/>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton
ref={nextButton2}
// disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Não se preocupe, você poderá adicionar paradas.
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Adicione paradas durante o trajeto do itinerário para encontrar
mais passageiros
</h1>
<div className="flex items-center mb-3">
<IonIcon icon={locationOutline}></IonIcon>
<GooglePlacesAutocomplete
apiKey={process.env.REACT_APP_KEY_API}
@@ -48,10 +362,315 @@ export default function CadastrarItinerario() {
}}
/>
</div>
<div className="button-search">
<IonButton color="primary">Cadastrar</IonButton>
<div className="flex justify-end mb-3">
<IonButton>
<IonIcon icon={add} />
</IonButton>
</div>
<div className="mb-3">
<IonList>
<IonItem>
<IonCheckbox slot="end"></IonCheckbox>
<IonLabel>Unicamp</IonLabel>
</IonItem>
<IonItem>
<IonCheckbox slot="end"></IonCheckbox>
<IonLabel>CPFL</IonLabel>
</IonItem>
</IonList>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton onClick={() => onBtnClicked("next")} color="primary">
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Não se preocupe, você poderá adicionar ou remover paradas
posteriormente caso precise editando o itinerário.
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Escolha o(s) dia(s) da semana ou um dia específico que o
itinerário será realizado
</h1>
<div hidden={specificDate} className="flex items-center mb-3">
<IonRange
dualKnobs
pin
pinFormatter={(value: number) => formatRange(value)}
ticks
snaps
min={1}
max={7}
>
<IonLabel slot="start">Seg</IonLabel>
<IonLabel slot="end">Dom</IonLabel>
</IonRange>
</div>
<div className="mb-3">
<IonItem className="mb-3">
<IonLabel>Dia Específico ?</IonLabel>
<IonCheckbox
onIonChange={(event) =>
event.detail.checked
? setSpecificDate(true)
: setSpecificDate(false)
}
></IonCheckbox>
</IonItem>
<IonDatetime
min={minDate.toISOString()}
presentation="date"
hidden={!specificDate}
></IonDatetime>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton onClick={() => onBtnClicked("next")} color="primary">
<IonIcon icon={arrowForward} />
</IonButton>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Qual o horário estimado de ínicio do itinerário ?
</h1>
<div className="mb-3">
<IonDatetime presentation="time"></IonDatetime>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton
ref={nextButton2}
// disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Não se preocupe, é apenas um horário estimado.
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Qual o horário estimado de chegado no último destino do
itinerário ?
</h1>
<div className="mb-3">
<IonDatetime presentation="time"></IonDatetime>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton
ref={nextButton2}
// disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Não se preocupe, é apenas um horário estimado.
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Preencha as informações de pagamento
</h1>
<IonLabel>Valor cobrado mensalmente</IonLabel>
<div className="flex justify-between items-center mb-3">
<IonIcon
size="large"
onClick={() => setMonthlyPrice(monthlyPrice - 1)}
icon={removeCircleOutline}
/>
<h1 className="text-xl">R$ {monthlyPrice}</h1>
<IonIcon
className="text-4xl"
size="large"
onClick={() => setMonthlyPrice(monthlyPrice + 1)}
icon={addCircleOutline}
/>
</div>
<div className="mb-3">
<IonItem className="mb-3">
<IonLabel>Aceitar pedidos para vagas avulsa ?</IonLabel>
<IonCheckbox
onIonChange={(event) =>
setSingleVacancy(event.detail.checked)
}
></IonCheckbox>
</IonItem>
<div hidden={!singleVacancy}>
<IonLabel>Valor cobrado por dia (vaga avulsa)</IonLabel>
<div className="flex justify-between items-center">
<IonIcon
size="large"
onClick={() => setDailyPrice(dailyPrice - 1)}
icon={removeCircleOutline}
/>
<h1 className="text-xl">R$ {dailyPrice}</h1>
<IonIcon
className="text-4xl"
size="large"
onClick={() => setDailyPrice(dailyPrice + 1)}
icon={addCircleOutline}
/>
</div>
</div>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton
ref={nextButton2}
// disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={arrowForward} />
</IonButton>
</div>
<div className="flex items-center">
<IonIcon
icon={informationCircle}
size="large"
className="mr-4"
/>
<small className="text-gray-500">
Lembre-se esse valor será cobrado independente do destino do
passageiro.
<br />
<b>
Em breve será possível cobrar valores diferentes para cada
destino.
</b>
</small>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Escolha o veículo que será utilizado no itinerário
</h1>
<div className="mb-3">
<IonSelect
interface="action-sheet"
placeholder="Selecione o veículo"
>
{vans ? (
vans.map((van, index) => {
return (
<IonSelectOption key={index} value={van.plate}>
{van.brand +
" - " +
van.model +
" | Placa: " +
van.plate}
</IonSelectOption>
);
})
) : (
<></>
)}
</IonSelect>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton
ref={nextButton2}
// disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={arrowForward} />
</IonButton>
</div>
</div>
</IonSlide>
<IonSlide>
<div className="m-3">
<h1 className="mb-3 text-xl">
Escolha um apelido para o itinerário
</h1>
<div className="mb-3">
<IonInput
value={nickname}
onIonChange={(event) => setNickname(event.detail.value!)}
placeholder="Manhã - Centro"
></IonInput>
</div>
<div className="flex justify-between mb-3">
<IonButton onClick={() => onBtnClicked("prev")} color="primary">
<IonIcon icon={arrowBack} />
</IonButton>
<IonButton
ref={nextButton2}
// disabled
onClick={() => onBtnClicked("next")}
color="primary"
>
<IonIcon icon={checkmark} />
Cadastrar
</IonButton>
</div>
</div>
</IonSlide>
</IonSlides>
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={toastMessage}
duration={2500}
/>
</IonContent>
</IonPage>
);

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

@@ -1,14 +1,29 @@
import { IonToast, IonProgressBar, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
import { Action } from '../../components/Action';
import { useContext, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router';
import './Cadastro.css';
import ModalExample from '../../components/Email';
import * as UsersService from '../../services/api/users'
import LocalStorage from '../../LocalStorage';
import { UserContext } from '../../App';
import { Color } from '@ionic/core';
import { Color } from "@ionic/core";
import {
IonBackButton,
IonButton,
IonButtons,
IonCardTitle,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonInput,
IonItem,
IonLabel,
IonPage,
IonRow,
IonToast,
IonToolbar,
} from "@ionic/react";
import { arrowBack } from "ionicons/icons";
import { useContext, useState } from "react";
import { useHistory, useParams } from "react-router";
import { UserContext } from "../../App";
import { Action } from "../../components/Action";
import LocalStorage from "../../LocalStorage";
import * as UsersService from "../../services/api/users";
import "./Cadastro.css";
const Cadastro: React.FC = () => {
const history = useHistory();
@@ -16,34 +31,35 @@ const Cadastro: React.FC = () => {
const user = useContext(UserContext);
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const [messageToast, setMessageToast] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary");
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [confirmPassword, setConfirmPassword] = useState<string>('');
const [firstName, setFirstName] = useState<string>('');
const [lastName, setLastName] = useState<string>('');
const [birthDate, setBirthDate] = useState<string>('');
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [confirmPassword, setConfirmPassword] = useState<string>("");
const [firstName, setFirstName] = useState<string>("");
const [lastName, setLastName] = useState<string>("");
const [birthDate, setBirthDate] = useState<string>("");
const [lResult, setlResult] = useState({
error: '',
success: true
error: "",
success: true,
});
const emailValidate = () => {
var usuario = email.substring(0, email.indexOf("@"));
var dominio = email.substring(email.indexOf("@") + 1, email.length);
if ((usuario.length >= 1) &&
(dominio.length >= 3) &&
(usuario.search("@") == -1) &&
(dominio.search("@") == -1) &&
(usuario.search(" ") == -1) &&
(dominio.search(" ") == -1) &&
(dominio.search(".") != -1) &&
(dominio.indexOf(".") >= 1) &&
(dominio.lastIndexOf(".") < dominio.length - 1))
{
if (
usuario.length >= 1 &&
dominio.length >= 3 &&
usuario.search("@") === -1 &&
dominio.search("@") === -1 &&
usuario.search(" ") === -1 &&
dominio.search(" ") === -1 &&
dominio.search(".") !== -1 &&
dominio.indexOf(".") >= 1 &&
dominio.lastIndexOf(".") < dominio.length - 1
) {
return true;
} else {
return false;
@@ -51,19 +67,20 @@ const Cadastro: React.FC = () => {
};
const clearResult = () => {
lResult.error = '';
lResult.error = "";
lResult.success = true;
}
};
const fieldValidate = async () => {
clearResult();
if(!emailValidate()) {
lResult.error = 'E-mail inválido!';
if (!emailValidate()) {
lResult.error = "E-mail inválido!";
lResult.success = false;
return lResult;
} else if(password.length < 7 || password.length > 12) { //TODO: validar de acordo com a documentação
lResult.error = 'A senha deve ter de 7 a 12 caracteres!';
} else if (password.length < 7 || password.length > 12) {
//TODO: validar de acordo com a documentação
lResult.error = "A senha deve ter de 7 a 12 caracteres!";
lResult.success = false;
return lResult;
}
@@ -72,18 +89,24 @@ const Cadastro: React.FC = () => {
};
const handleSubmit = async () => {
if(name === '' || email === '' || birthDate === '' || password === '' || confirmPassword === '') {
setToastColor("warning")
setMessageToast('Nenhum campo pode estar vazio!');
if (
name === "" ||
email === "" ||
birthDate === "" ||
password === "" ||
confirmPassword === ""
) {
setToastColor("warning");
setMessageToast("Nenhum campo pode estar vazio!");
setShowToast(true);
return
return;
}
if(password !== confirmPassword) {
setToastColor("warning")
setMessageToast('As senhas devem ser iguais!');
if (password !== confirmPassword) {
setToastColor("warning");
setMessageToast("As senhas devem ser iguais!");
setShowToast(true);
return
return;
}
const signUpForm = {
@@ -91,47 +114,50 @@ const Cadastro: React.FC = () => {
lastname: lastName,
email: email,
birth_date: birthDate,
password: password
}
password: password,
};
let result = fieldValidate();
if(!(await result).success) {
setToastColor("warning")
if (!(await result).success) {
setToastColor("warning");
setMessageToast(lResult.error);
setShowToast(true);
return
return;
}
let retorno = await UsersService.create(signUpForm);
if(!retorno.token) {
setToastColor('danger')
if (!retorno.token) {
setToastColor("danger");
setMessageToast(retorno.message);
setShowToast(true);
return
return;
}
LocalStorage.setToken(retorno.token.token);
user.setIsLoggedIn(true);
history.push({ pathname: '/home', state: {
history.push({
pathname: "/home",
state: {
redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: "Usuário cadastrado com sucesso!",
}
}})
},
},
});
};
const { name } = useParams<{ name: string; }>();
const { name } = useParams<{ name: string }>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text={''} icon={arrowBack} defaultHref='login' />
<IonBackButton text={""} icon={arrowBack} defaultHref="login" />
</IonButtons>
</IonToolbar>
</IonHeader>
@@ -145,69 +171,73 @@ const Cadastro: React.FC = () => {
</IonRow>
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
<div id="nome-sobrenome">
<IonItem>
<IonLabel position='floating'>Nome</IonLabel>
<IonLabel position="floating">Nome</IonLabel>
<IonInput
type='text'
type="text"
clearInput
onIonInput={(e: any) => setFirstName(e.target.value)}
// error={isError}
// onIonChange={(e: any) => setFirstName(e.detail.value)}
>
</IonInput>
></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Sobrenome</IonLabel>
<IonLabel position="floating">Sobrenome</IonLabel>
<IonInput
clearInput
onIonChange={(e: any) => setLastName(e.target.value)}
>
</IonInput>
></IonInput>
</IonItem>
</div>
<IonItem>
<IonLabel position='floating'>E-mail</IonLabel>
<IonLabel position="floating">E-mail</IonLabel>
<IonInput
clearInput
type='email'
type="email"
onIonChange={(e: any) => setEmail(e.target.value)}
>
</IonInput>
></IonInput>
</IonItem>
<IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonLabel position="stacked">Data de nascimento</IonLabel>
<IonInput
type='date'
type="date"
onIonChange={(e: any) => setBirthDate(e.target.value)}
>
</IonInput>
></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Senha</IonLabel>
<IonLabel position="floating">Senha</IonLabel>
<IonInput
clearInput
type='password'
type="password"
onIonChange={(e: any) => setPassword(e.target.value)}
></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Confirme a senha</IonLabel>
<IonLabel position="floating">Confirme a senha</IonLabel>
<IonInput
clearInput
type='password'
type="password"
onIonChange={(e: any) => setConfirmPassword(e.target.value)}
></IonInput>
</IonItem>
<IonButton className="ion-margin-top" expand="block" onClick={ handleSubmit }>Cadastrar-se</IonButton>
<IonButton
className="ion-margin-top"
expand="block"
onClick={handleSubmit}
>
Cadastrar-se
</IonButton>
</IonCol>
</IonRow>
<small className='ion-margin-top'>
Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
<small className="ion-margin-top">
Ao se cadastrar, você aceita nossos{" "}
<a href="">Termos e Condições</a> e nossa{" "}
<a href=""> Política de Privacidade</a>.
</small>
<Action message="Já tem conta?" text="Login" link="/login" />
</IonGrid>

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

@@ -1,26 +1,26 @@
import {
IonBackButton,
IonButtons,
IonCard,
IonCardContent,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonPage,
IonTitle,
IonToast,
IonToolbar
IonBackButton,
IonButtons,
IonCard,
IonCardContent,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonPage,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react";
import React, { useEffect, useState } from "react";
import '../Perfil.css'
import { useHistory, useLocation } from "react-router";
import { callOutline, documentTextOutline } from "ionicons/icons";
import { useHistory, useLocation } from "react-router";
import "../Perfil.css";
import '../Cadastro/Cadastro.css'
import { Color } from "@ionic/core";
import "../Cadastro/Cadastro.css";
interface cardItem {
icon: string;
@@ -48,57 +48,62 @@ interface LocationState {
showToastMessage: boolean;
toastColor: Color;
toastMessage: string;
}
};
}
let items: cardItem[] = [
{
icon: documentTextOutline,
label: 'Documento',
description: 'Cadastre seu documento para que seu perfil possa ser verificado',
url: '/perfil/completar/documento',
required: false
label: "Documento",
description:
"Cadastre seu documento para que seu perfil possa ser verificado",
url: "/perfil/completar/documento",
required: false,
},
{
icon: callOutline,
label: 'Informações de contato',
description: 'Cadastre seu número de telefone celular que para possam contatar você',
url: '/perfil/completar/telefone',
required: false
}
]
label: "Informações de contato",
description:
"Cadastre seu número de telefone celular que para possam contatar você",
url: "/perfil/completar/telefone",
required: false,
},
];
const CadastroCompletar: React.FC = () => {
const history = useHistory();
const location = useLocation<LocationState>();
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const [toastMessage, setToastMessage] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary");
const handleCardClick = (item: cardItem) => {
if (!item.required) return
if (!item.required) return;
history.push({ pathname: item.url, state: { userData: location.state.userData } });
}
history.push({
pathname: item.url,
state: { userData: location.state.userData },
});
};
useEffect(() => {
if (!location.state || !location.state.userData) {
history.push({ pathname: '/perfil' })
history.push({ pathname: "/perfil" });
}
if (location.state && location.state.redirectData) {
const redirectData = location.state.redirectData
const redirectData = location.state.redirectData;
if (redirectData.showToastMessage) {
setToastColor(redirectData.toastColor)
setToastMessage(redirectData.toastMessage)
setShowToast(true)
setToastColor(redirectData.toastColor);
setToastMessage(redirectData.toastMessage);
setShowToast(true);
}
}
if (!location.state.userData.document) items[0].required = true
if (!location.state.userData.phone_number) items[1].required = true
if (!location.state.userData.document) items[0].required = true;
if (!location.state.userData.phone_number) items[1].required = true;
}, []);
return (
@@ -113,9 +118,15 @@ const CadastroCompletar: React.FC = () => {
</IonHeader>
<IonContent>
{ items.map((item, index) => {
{items.map((item, index) => {
return (
<IonCard button={item.required} key={index} onClick={() => { handleCardClick(item) }}>
<IonCard
button={item.required}
key={index}
onClick={() => {
handleCardClick(item);
}}
>
<IonItem>
<IonIcon icon={item.icon} slot="start" />
<IonLabel>{item.label}</IonLabel>
@@ -123,7 +134,7 @@ const CadastroCompletar: React.FC = () => {
<IonCardContent>{item.description}</IonCardContent>
</IonCard>
)
);
})}
<IonToast

217
src/pages/CadastroVan.tsx
View File

@@ -1,21 +1,21 @@
import {
IonToast,
IonItem,
IonLabel,
IonInput,
IonBackButton,
IonButton,
IonButtons,
IonCheckbox,
IonContent,
IonHeader,
IonPage,
IonToolbar,
IonTitle,
IonInput,
IonItem,
IonLabel,
IonList,
IonCheckbox,
IonListHeader,
IonPage,
IonSelect,
IonSelectOption,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react";
@@ -23,12 +23,12 @@ import { useHistory } from "react-router-dom";
// import * as yup from 'yup';
import carsService from '../services/functions/carsService'
import carsService from "../services/functions/carsService";
import * as vansRoutes from '../services/api/vans';
import * as vansRoutes from "../services/api/vans";
import "./CadastroVan.css";
import { Color } from "@ionic/core";
import "./CadastroVan.css";
const CadastroVan: React.FC = () => {
const history = useHistory();
@@ -37,34 +37,36 @@ const CadastroVan: React.FC = () => {
const [toastMessage, setToastMessage] = useState<string>("");
const [toastColor, setToastColor] = useState<Color>("primary");
const [carModels, setCarModels] = useState([{
id_model: '',
name: ''
}]);
const [carModels, setCarModels] = useState([
{
id_model: "",
name: "",
},
]);
const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }),
{
carPlate: '',
carBrand: '',
carModel: '',
carPlate: "",
carBrand: "",
carModel: "",
seats_number: 1,
isRented: false,
locator_name: '',
locator_address: '',
locator_complement: '',
locator_city: '',
locator_state: '',
locator_name: "",
locator_address: "",
locator_complement: "",
locator_city: "",
locator_state: "",
}
);
const clearRentalData = () => {
setInputValues({
carRentalName: '',
complement: '',
city: '',
state: '',
})
carRentalName: "",
complement: "",
city: "",
state: "",
});
};
const validateForm = (): boolean => {
@@ -104,7 +106,7 @@ const CadastroVan: React.FC = () => {
return false;
}
if ((Number)(vanForm.seats_number) < 1) {
if (Number(vanForm.seats_number) < 1) {
setToastMessage("Número de passageiros deve ser positivo!");
setShowToast(true);
return false;
@@ -126,7 +128,7 @@ const CadastroVan: React.FC = () => {
locator_complement: inputValues.locator_complement,
locator_city: inputValues.locator_city,
locator_state: inputValues.locator_state,
}
};
if (!locatorForm.locator_name) {
setToastMessage("Nome do Locador é obrigatório");
@@ -157,11 +159,12 @@ const CadastroVan: React.FC = () => {
const handleSubmit = async () => {
if (!validateForm()) {
return
return;
}
// cria registro da van
await vansRoutes.create({
await vansRoutes
.create({
plate: inputValues.carPlate,
brand: inputValues.carBrand,
model: inputValues.carModel,
@@ -170,61 +173,68 @@ const CadastroVan: React.FC = () => {
locator_address: inputValues.locator_address,
locator_complement: inputValues.locator_complement,
locator_city: inputValues.locator_city,
locator_state: inputValues.locator_state
}).then(response => {
if (response.status === 'error') {
locator_state: inputValues.locator_state,
})
.then((response) => {
if (response.status === "error") {
setToastMessage(response.message);
setShowToast(true);
return
return;
}
history.push({ pathname: '/minhas-vans', state: {
history.push({
pathname: "/minhas-vans",
state: {
redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: response.message,
},
}})
}).catch((err) => {
setToastColor("danger")
},
});
})
.catch((err) => {
setToastColor("danger");
setToastMessage(err);
setShowToast(true);
})
});
};
useEffect(() => {
let isMounted = true
let isMounted = true;
const getCarsModels = async () => {
const carModelsRes = await carsService.getAllCarModels()
const carModelsRes = await carsService.getAllCarModels();
if (carModelsRes.error) {
setToastColor("danger")
setToastColor("danger");
setToastMessage(carModelsRes.error.errorMessage);
setShowToast(true);
return
return;
}
if (carModelsRes.data) {
if (isMounted) {
setCarModels(carModelsRes.data)
}
setCarModels(carModelsRes.data);
}
}
};
getCarsModels()
getCarsModels();
return () => { isMounted = false }
}, [])
return () => {
isMounted = false;
};
}, []);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Cadastro de veículo</IonTitle>
<IonButtons slot='start'>
<IonBackButton defaultHref='/perfil' />
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil" />
</IonButtons>
</IonToolbar>
</IonHeader>
@@ -235,46 +245,62 @@ const CadastroVan: React.FC = () => {
<IonLabel>Informações do veículo</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel position='floating'>Placa </IonLabel>
<IonLabel position="floating">Placa </IonLabel>
<IonInput
type='text'
type="text"
clearInput
maxlength={7}
placeholder='Digite a Placa do Veículo'
onIonChange={(e: any) => setInputValues({ carPlate: e.target.value })}
placeholder="Digite a Placa do Veículo"
onIonChange={(e: any) =>
setInputValues({ carPlate: e.target.value })
}
/>
</IonItem>
{/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */}
<IonItem>
<IonLabel>Marca</IonLabel>
<IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }) }}>
{ carModels ? carModels.map((carModel, index) => {
return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
}) : <></> }
<IonSelect
onIonChange={(e: any) => {
setInputValues({ carBrand: e.detail.value });
}}
>
{carModels ? (
carModels.map((carModel, index) => {
return (
<IonSelectOption key={index} value={carModel.name}>
{carModel.name}
</IonSelectOption>
);
})
) : (
<></>
)}
</IonSelect>
</IonItem>
<IonItem>
<IonLabel position='floating'>Modelo </IonLabel>
<IonLabel position="floating">Modelo </IonLabel>
<IonInput
type='text'
type="text"
clearInput
placeholder='Digite o Modelo do Veículo'
onIonChange={(e: any) => setInputValues({ carModel: e.target.value })}
placeholder="Digite o Modelo do Veículo"
onIonChange={(e: any) =>
setInputValues({ carModel: e.target.value })
}
/>
</IonItem>
<IonItem>
<IonLabel position='floating'>
Número de assentos
</IonLabel>
<IonLabel position="floating">Número de assentos</IonLabel>
<IonInput
type='number'
type="number"
min={1}
clearInput
placeholder='podem ser ocupados por passageiros'
onIonChange={(e: any) => setInputValues({ seats_number: e.target.value })}
placeholder="podem ser ocupados por passageiros"
onIonChange={(e: any) =>
setInputValues({ seats_number: e.target.value })
}
/>
</IonItem>
</IonList>
@@ -286,7 +312,12 @@ const CadastroVan: React.FC = () => {
<IonItem>
<IonLabel>O veículo é alugado?</IonLabel>
<IonCheckbox checked={inputValues.isRented} onIonChange={e => setInputValues({ isRented: e.detail.checked })} />
<IonCheckbox
checked={inputValues.isRented}
onIonChange={(e) =>
setInputValues({ isRented: e.detail.checked })
}
/>
</IonItem>
{inputValues.isRented && (
@@ -294,35 +325,45 @@ const CadastroVan: React.FC = () => {
<IonItem>
<IonLabel position="stacked" />
<IonInput
type='text'
type="text"
clearInput
placeholder='Nome completo do Locador'
onIonChange={(e: any) => setInputValues({ locator_name: e.target.value })}
placeholder="Nome completo do Locador"
onIonChange={(e: any) =>
setInputValues({ locator_name: e.target.value })
}
/>
<IonInput
type='text'
type="text"
clearInput
placeholder='Endereço do locador'
onIonChange={(e: any) => setInputValues({ locator_address: e.target.value })}
placeholder="Endereço do locador"
onIonChange={(e: any) =>
setInputValues({ locator_address: e.target.value })
}
/>
<IonInput
type='text'
type="text"
clearInput
placeholder='Complemento'
onIonChange={(e: any) => setInputValues({ locator_complement: e.target.value })}
placeholder="Complemento"
onIonChange={(e: any) =>
setInputValues({ locator_complement: e.target.value })
}
/>
<IonInput
type='text'
type="text"
clearInput
placeholder='Cidade'
onIonChange={(e: any) => setInputValues({ locator_city: e.target.value })}
placeholder="Cidade"
onIonChange={(e: any) =>
setInputValues({ locator_city: e.target.value })
}
/>
<IonInput
type='text'
type="text"
clearInput
placeholder='Estado'
onIonChange={(e: any) => setInputValues({ locator_state: e.target.value })}
placeholder="Estado"
onIonChange={(e: any) =>
setInputValues({ locator_state: e.target.value })
}
/>
</IonItem>
</div>
@@ -330,8 +371,8 @@ const CadastroVan: React.FC = () => {
<div>
<IonButton
className='ion-margin-top'
expand='block'
className="ion-margin-top"
expand="block"
onClick={handleSubmit}
>
Salvar

103
src/pages/MinhasVans.tsx
View File

@@ -1,21 +1,32 @@
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 { Color } from "@ionic/core";
import {
IonBackButton,
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToast,
IonToolbar,
} from "@ionic/react";
import { useEffect, useState } from "react";
import { useHistory } from "react-router";
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 sessionsService from "../services/functions/sessionsService";
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;
@@ -27,49 +38,52 @@ 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")
vansRoutes
.getByUserId(userId)
.then((response) => {
if (response.status === "error") {
setToastColor("danger");
setToastMessage(response.message);
setShowToast(true);
return
return;
}
setUserVans(response.data)
}).catch((err) => {
setToastColor("danger")
setUserVans(response.data);
})
.catch((err) => {
setToastColor("danger");
setToastMessage(err);
setShowToast(true);
})
}
});
};
getUserVans()
}, [])
getUserVans();
}, []);
return (
<IonPage>
@@ -83,24 +97,35 @@ const MinhasVans: React.FC = () => {
</IonHeader>
<IonContent>
{ userVans ? userVans.map((van, index) => {
{userVans ? (
userVans.map((van, index) => {
return (
<IonCard key={index}>
<IonCardHeader>
<IonCardTitle>{van.plate}</IonCardTitle>
<IonCardSubtitle>{van.brand} - {van.model}</IonCardSubtitle>
<IonCardSubtitle>
{van.brand} - {van.model}
</IonCardSubtitle>
</IonCardHeader>
{ van.locator_name ?
{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"

28
src/pages/Perfil.tsx
View File

@@ -19,8 +19,6 @@ import {
IonToast,
IonToolbar,
} from "@ionic/react";
import { useHistory, useLocation } from "react-router-dom";
import React, { useState, useEffect, useReducer, useContext } from "react";
import {
callOutline,
cardOutline,
@@ -32,14 +30,19 @@ import {
shieldCheckmarkOutline,
starOutline,
} from "ionicons/icons";
import React, { useContext, useEffect, useReducer, useState } from "react";
import { useHistory, useLocation } from "react-router-dom";
import "./Perfil.css";
import LocalStorage from "../LocalStorage";
import "./Perfil.css";
import sessionsService from "../services/functions/sessionsService";
import usersService from "../services/functions/usersService";
import { UserContext } from "../App";
import { Color } from "@ionic/core";
import { UserContext } from "../App";
import sessionsService from "../services/functions/sessionsService";
import {
checkIfUserIsDriver,
getById,
} from "../services/functions/usersService";
interface ScanNewProps {
match: {
@@ -131,7 +134,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
}
// get user info by ID
const getByIdRes = await usersService.getById(userId);
const getByIdRes = await getById(userId);
if (getByIdRes.error) {
if (isVisitor && props.match.params.id) {
@@ -147,7 +150,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
}
// check if user is driver (if they have vans)
const userIsDriverRes = await usersService.checkIfUserIsDriver(userId);
const userIsDriverRes = await checkIfUserIsDriver(userId);
// if (userIsDriverRes.error) {
// setToastColor('warning')
@@ -358,6 +361,15 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
<IonIcon icon={personOutline} slot="start" />
<IonLabel>Buscar passageiros</IonLabel>
</IonItem>
<IonItem
button
onClick={() =>
history.push({ pathname: "/cadastrar-itinerario" })
}
>
<IonIcon icon={mapOutline} slot="start" />
<IonLabel>Cadastrar itinerário</IonLabel>
</IonItem>
<IonItem
button
onClick={() =>

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

@@ -1,52 +1,34 @@
import {
IonButton,
IonCard,
IonCardContent,
IonCheckbox,
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,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonModal,
IonPage,
IonRadio,
IonRadioGroup,
IonSlide,
IonSlides,
IonToast,
IonToolbar,
} 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 { getTransportes } from "../../services/functions/transportsService";
import { createUserSearch } from "../../services/api/users";
import { getTransportes } from "../../services/functions/transportsService";
import "./Transportes.css";
interface InfoBusca {
@@ -63,8 +45,8 @@ const Transportes: React.FC = () => {
const [transportes, setTransportes] = useState([]);
const [showModalFilters, setShowModalFilters] = useState(false);
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast ] = useState('');
const [toastColor, setToastColor] = useState('success');
const [messageToast, setMessageToast] = useState("");
const [toastColor, setToastColor] = useState("success");
useEffect(() => {
if (props) {
@@ -77,15 +59,21 @@ const Transportes: React.FC = () => {
setTransportes(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');
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 (
@@ -107,7 +95,7 @@ const Transportes: React.FC = () => {
</div>
</IonHeader>
<IonContent fullscreen>
{transportes && transportes.length > 0? (
{transportes && transportes.length > 0 ? (
<div className="header-tabs">
<IonSlides>
<IonSlide>
@@ -124,9 +112,11 @@ const Transportes: React.FC = () => {
</IonSlide>
</IonSlides>
</div>
)
:
(<h1 className="msg-not-found">Não foi encontrado nenhum transporte que atenda essa rota.</h1>)}
) : (
<h1 className="msg-not-found">
Não foi encontrado nenhum transporte que atenda essa rota.
</h1>
)}
{transportes &&
transportes.map((record: any, index: any) => {
return (

34
src/services/api/transports.ts
View File

@@ -1,10 +1,9 @@
import instance from './api';
import instance from "./api";
// import LocalStorage from '../LocalStorage';
import transportsRoutes from '../../constants/routes/transportsRoutes';
import { AxiosRequestHeaders } from 'axios';
import LocalStorage from '../../LocalStorage';
import { setStore } from '../../store/RecordsStore';
import { AxiosRequestHeaders } from "axios";
import transportsRoutes from "../../constants/routes/transportsRoutes";
import LocalStorage from "../../LocalStorage";
let token: string;
let header: AxiosRequestHeaders;
@@ -13,26 +12,29 @@ function updateHeader() {
token = LocalStorage.getToken();
header = {
"Accept": 'application/json',
"Content-Type": 'application/json',
"Authorization": 'Bearer ' + token
}
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + token,
};
}
export interface getTransportsRequest {
coordinatesFrom: {
lat: number,
lng: number
},
lat: number;
lng: number;
};
coordinatesTo: {
lat: number,
lng: number
}
lat: number;
lng: number;
};
}
export async function get(coordinates: getTransportsRequest) {
updateHeader();
const response = await instance.get(transportsRoutes.get.url + `/${coordinates}`, { headers: header });
const response = await instance.get(
transportsRoutes.get.url + `/${coordinates}`,
{ headers: header }
);
return response.data;
}

59
src/services/api/users.ts
View File

@@ -1,10 +1,10 @@
import instance from './api';
import instance from "./api";
// import LocalStorage from '../LocalStorage';
import userRoutes from '../../constants/routes/usersRoutes';
import { AxiosRequestHeaders } from 'axios';
import LocalStorage from '../../LocalStorage';
import { setStore } from '../../store/RecordsStore';
import { AxiosRequestHeaders } from "axios";
import userRoutes from "../../constants/routes/usersRoutes";
import LocalStorage from "../../LocalStorage";
import { setStore } from "../../store/RecordsStore";
let token: string;
let header: AxiosRequestHeaders;
@@ -13,10 +13,10 @@ function updateHeader() {
token = LocalStorage.getToken();
header = {
"Accept": 'application/json',
"Content-Type": 'application/json',
"Authorization": 'Bearer ' + token
}
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + token,
};
}
export interface CadastroResponse {
@@ -63,21 +63,28 @@ export async function create(CadastroRequest: any) {
export async function getById(userId: string) {
updateHeader();
const response = await instance.get(userRoutes.get.url + `/${userId}`, { headers: header });
const response = await instance.get(userRoutes.get.url + `/${userId}`, {
headers: header,
});
return response.data;
}
export async function update(userData: UpdateUserRequest) {
updateHeader();
const response = await instance.patch(userRoutes.update.url, userData, { headers: header });
const response = await instance.patch(userRoutes.update.url, userData, {
headers: header,
});
return response.data;
}
export async function checkIfUserIsDriver(id_user: string) {
updateHeader();
const response = await instance.get(userRoutes.checkIfUserIsDriver.url + `/${id_user}`, { headers: header });
const response = await instance.get(
userRoutes.checkIfUserIsDriver.url + `/${id_user}`,
{ headers: header }
);
return response.data;
}
@@ -85,7 +92,10 @@ export async function checkIfUserIsDriver(id_user: string) {
export async function getSocialInfo(userId: string) {
updateHeader();
const response = await instance.get(userRoutes.getSocialInfo.url + `/${userId}`, { headers: header });
const response = await instance.get(
userRoutes.getSocialInfo.url + `/${userId}`,
{ headers: header }
);
return response.data;
}
@@ -93,17 +103,28 @@ export async function getUsersSearching(currentPoint: any) {
// Replace lat/long with values from get current location.
// Allow choosing of radius?
// Offset could = amount loaded in an infinite scroll?
var latitude = currentPoint.latitude, longitude = currentPoint.longitude, radius = 3000, offset = 0;
// var latitude = currentPoint.latitude, longitude = currentPoint.longitude, radius = 3000, offset = 0;
// const response = await fetch(`http://localhost:4000/get-records?latitude=${ latitude }&longitude=${ longitude }&radius=${ radius }&offset=${ offset }`);
const response = await instance.post(`${userRoutes.getUsersSearching.url}`, currentPoint)
const response = await instance.post(
`${userRoutes.getUsersSearching.url}`,
currentPoint
);
// const data = await response.json();
console.log(response.data)
console.log(response.data);
setStore(response.data);
}
export async function createUserSearch(latitude_from: any, longitude_from: any, addres_to: any) {
const response = await instance.post(`${userRoutes.createUserSearch.url}`, { latitude_from, longitude_from, addres_to });
export async function createUserSearch(
latitude_from: any,
longitude_from: any,
addres_to: any
) {
const response = await instance.post(`${userRoutes.createUserSearch.url}`, {
latitude_from,
longitude_from,
addres_to,
});
console.log(response)
console.log(response);
setStore(response);
}

12
src/services/functions/carsService.ts
View File

@@ -8,20 +8,18 @@ interface getAllCarModelsReturn {
error?: {
errorMessage: string;
}
};
}
interface getAllCarModelsRes {
status?: string;
message: string
message: string;
data?: {
id_model: string;
name: string;
}[];
}
const getAllCarModels = async (): Promise<getAllCarModelsReturn> => {
@@ -48,4 +46,8 @@ const getAllCarModels = async (): Promise<getAllCarModelsReturn> => {
}
};
export default { getAllCarModels };
const method = {
getAllCarModels,
};
export default method;

12
src/services/functions/sessionsService.ts
View File

@@ -14,7 +14,7 @@ interface refreshSessionResponse {
const refreshSession = async (): Promise<refreshSessionReturn> => {
try {
let res: refreshSessionResponse = await sessionRoutes.refresh()
let res: refreshSessionResponse = await sessionRoutes.refresh();
if (res.status === "error") {
return {
@@ -26,7 +26,7 @@ const refreshSession = async (): Promise<refreshSessionReturn> => {
return {
userId: res.userId,
};
} catch(err) {
} catch (err) {
return {
error: true,
errorMessage: "Por favor, autentique-se.",
@@ -40,7 +40,11 @@ const refreshSession = async (): Promise<refreshSessionReturn> => {
// } else {
// // Anything else
// }
// }
// }
};
export default { refreshSession }
const method = {
refreshSession,
};
export default method;

28
src/services/functions/transportsService.ts
View File

@@ -1,20 +1,18 @@
import * as transportsRoutes from '../api/transports';
interface CoordinatesRequest {
coordinatesFrom:{
lat: number,
lng: number
},
coordinatesTo:{
lat: number,
lng: number
}
coordinatesFrom: {
lat: number;
lng: number;
};
coordinatesTo: {
lat: number;
lng: number;
};
}
export async function getTransportes(request: CoordinatesRequest) : Promise<any> {
export async function getTransportes(
request: CoordinatesRequest
): Promise<any> {
try {
let res : any = await transportsRoutes.get(request);
} catch (error) {
}
// let res : any = await transportsRoutes.get(request);
} catch (error) {}
}

59
src/services/functions/usersService.ts
View File

@@ -10,10 +10,10 @@ interface getByIdReturn {
bio: string;
document_type: string;
document: string;
},
};
error?: {
errorMessage: string;
}
};
}
interface getByIdRes {
@@ -29,65 +29,67 @@ interface getByIdRes {
bio: string;
document_type: string;
document: string;
},
};
}
const getById = async (userId: string): Promise<getByIdReturn> => {
export const getById = async (userId: string): Promise<getByIdReturn> => {
try {
let res: getByIdRes = await usersRoutes.getById(userId)
let res: getByIdRes = await usersRoutes.getById(userId);
if (res.status === "error") {
return {
error: {
errorMessage: res.message,
}
},
};
}
return {
userData: res.data,
};
} catch(err) {
} catch (err) {
return {
error: {
errorMessage: "Por favor, autentique-se.",
}
},
};
}
};
interface getByIdReturn {
data?: {
phone: '',
whatsapp: '',
facebook: '',
telegram: '',
},
phone: "";
whatsapp: "";
facebook: "";
telegram: "";
};
error?: {
errorMessage: string;
}
};
}
const getUserSocialInfo = async (userId: string): Promise<getByIdReturn> => {
export const getUserSocialInfo = async (
userId: string
): Promise<getByIdReturn> => {
try {
let res: getByIdRes = await usersRoutes.getSocialInfo(userId)
let res: getByIdRes = await usersRoutes.getSocialInfo(userId);
if (res.status === "error") {
return {
error: {
errorMessage: res.message,
}
},
};
}
return {
userData: res.data,
};
} catch(err) {
} catch (err) {
return {
error: {
errorMessage: "Por favor, autentique-se.",
}
},
};
}
};
@@ -96,7 +98,7 @@ interface checkIfUserIsDriverReturn {
result?: boolean;
error?: {
errorMessage: string;
}
};
}
interface checkIfUserIsDriverResponse {
@@ -105,31 +107,32 @@ interface checkIfUserIsDriverResponse {
result?: boolean;
error?: {
errorMessage: string;
}
};
}
const checkIfUserIsDriver = async (id_user: string): Promise<checkIfUserIsDriverReturn> => {
export const checkIfUserIsDriver = async (
id_user: string
): Promise<checkIfUserIsDriverReturn> => {
try {
let res: checkIfUserIsDriverResponse = await usersRoutes.checkIfUserIsDriver(id_user)
let res: checkIfUserIsDriverResponse =
await usersRoutes.checkIfUserIsDriver(id_user);
if (res.status === "error") {
return {
error: {
errorMessage: res.message,
}
},
};
}
return {
result: res.result,
};
} catch(err) {
} catch (err) {
return {
error: {
errorMessage: "Por favor, autentique-se.",
}
},
};
}
};
export default { getById, getUserSocialInfo, checkIfUserIsDriver }

4
yarn.lock
View File

@@ -1377,7 +1377,7 @@
ionicons "^6.0.3"
tslib "^2.1.0"
"@ionic/react-router@^6.0.0":
"@ionic/react-router@^6.2.5":
version "6.2.5"
resolved "https://registry.yarnpkg.com/@ionic/react-router/-/react-router-6.2.5.tgz#b10041b0edc7ca67a5e95b2184dcc10cac9a6459"
integrity sha512-56KygdYv/KExvZLlCKTJp84l+4/5Y5TY9G8eIENo75Wunr8CA+a1CFFbR75ov4pckJGcVKkpAgJPDQGndrEBzg==
@@ -1385,7 +1385,7 @@
"@ionic/react" "^6.2.5"
tslib "*"
"@ionic/react@^6.0.0", "@ionic/react@^6.2.5":
"@ionic/react@^6.2.5":
version "6.2.5"
resolved "https://registry.yarnpkg.com/@ionic/react/-/react-6.2.5.tgz#6a9815c3cdbf8a8d48972bcdb9cf82cdccb9c50c"
integrity sha512-dvne9iY97uCb7+Wen0cRAY0nxL+ecKAMVBK6CLWMLec6Eh8NVE3BU2tG/4ZjheNrclWCPAv20us8zLbJVIht0g==