wip

src/pages/BuscarPassageiro/BuscarPassageiro.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
 import RecordsStore from '../../store/RecordsStore';
 import { fetchRecords } from '../../store/Selectors';
 import { getUsersSearching } from '../../services/users';
+import { UserSearchInfos } from '../../components/UserSearchInfos/UserSearchInfos';
 
 const maptilerProvider = maptiler('d5JQJPLLuap8TkJJlTdJ', 'streets');
 
@@ -75,6 +76,18 @@ const BuscarPassageiro: React.FC = () => {
     await getUsersSearching(currentPoint);
   }
 
+	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[index].showInfo;
+
+		console.log(tempRecords)
+		setResults(tempRecords);
+	}
+
   return (
     <IonPage>
 			<IonContent fullscreen>
@@ -82,21 +95,21 @@ const BuscarPassageiro: React.FC = () => {
 					<> */}
 						<Map onBoundsChanged={e => handleMap(e)} defaultCenter={ [center.latitude, center.longitude] } defaultZoom={ zoom } provider={ maptilerProvider } touchEvents={ true }>
 
-							{ results.map((record:{latitude:any, longitude:any}, index) => {
-								return <Marker key={ index } color="#3578e5" width={ 50 } anchor={ [ parseFloat(record.latitude), parseFloat(record.longitude) ] } />
+							{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:{showInfo:boolean, latitude:any, longitude:any}, index) => {
+							{ results.map((record:any, index) => {
 
 								if (record.showInfo) {
 									
 									return (
-										<Overlay key={ index } anchor={ [ record.latitude, record.longitude ] } offset={[95, 304]}> */}
-											{/* <MapOverlay record={ record } /> */}
-										{/* </Overlay>
-									);
+										<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">

src/pages/BuscarTransporte/BuscarTransporte copy.tsx

@@ -0,0 +1,182 @@
+import {
+  IonContent,
+  IonPage,
+  IonIcon,
+  IonCard,
+  IonInput,
+  IonRow,
+  IonCardContent,
+  IonButton,
+  IonSearchbar,
+  IonModal,
+  IonProgressBar,
+} from "@ionic/react";
+import {
+  arrowBack,
+  arrowForwardOutline,
+  chevronForwardOutline,
+  locateOutline,
+  locationOutline,
+  timeOutline,
+} from "ionicons/icons";
+import "./BuscarTransporte.css";
+
+import { useEffect, useState } from "react";
+import { autoCompleteAddress } from "../../services/utils";
+import { useHistory } from "react-router";
+
+const BuscarTransporte: React.FC = () => {
+	const history = useHistory();
+  const [addressFrom, setAddressFrom] = useState<any>("");
+  const [coordinatesFrom, setCoordinatesFrom] = useState<any>("")
+  const [addressTo, setAddressTo] = useState<any>("");
+	const [coordinatesTo, setCoordinatesTo] = useState<any>("")
+  const [showModalEnd, setShowModalEnd] = useState(false);
+  const [addressResults, setAddressResults] = useState<any>([]);
+	const [inputActive, setInputActive] = useState("");
+
+  const optionsAddress = async (inputValue: any) => {
+    let results = await autoCompleteAddress(inputValue)
+      .then((res) => {
+        return res.map((item: any) => {
+          return {
+            value:
+              item.geometry.coordinates[0] + "," + item.geometry.coordinates[1],
+            label: item.properties.formatted,
+          };
+        });
+      })
+      .catch((err) => {
+        console.log("Erro ao buscar endereço:", err);
+      });
+    setAddressResults(results);
+  };
+
+  function setInputActiveOpenModal(input: string) {
+    setInputActive(input);
+    setShowModalEnd(true);
+  }
+
+  function setAddress(div: any) {
+    if (inputActive === "from") {
+			setAddressFrom(div.target.attributes[2].value);
+			setCoordinatesFrom(div.target.attributes[1].value);
+		}else{
+			setAddressTo(div.target.attributes[2].value)
+    	setCoordinatesTo(div.target.attributes[1].value)
+		}
+		setShowModalEnd(false)
+  }
+
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        <IonCard>
+          <IonCardContent>
+            <div className="inputs-from-to">
+              <IonIcon icon={locateOutline}></IonIcon>
+              <IonSearchbar
+                showClearButton="never"
+                onClick={() => setInputActiveOpenModal("from")}
+                value={addressFrom}
+                placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
+              />
+            </div>
+            <div className="inputs-from-to">
+              <IonIcon icon={locationOutline}></IonIcon>
+              <IonSearchbar
+                showClearButton="never"
+                onClick={() => setInputActiveOpenModal("to")}
+                value={addressTo}
+                placeholder="PUC Campinas"
+              />
+            </div>
+            <div className="button-search">
+              <IonButton color="primary" onClick={() => history.push("/transportes")}>Buscar</IonButton>
+            </div>
+          </IonCardContent>
+        </IonCard>
+        <IonRow class="latest-searches">
+          <IonIcon
+            className="icon-align-vcenter"
+            size="large"
+            icon={timeOutline}
+          ></IonIcon>
+          <div className="div_from_to">
+            <span>Rua Tal Tal, 154, São Paulo - SP</span>
+            <IonIcon icon={arrowForwardOutline}></IonIcon>
+            <span>USP</span>
+            <br />
+            <small>Há 1 hora</small>
+          </div>
+          <IonIcon
+            className="icon-forward icon-align-vcenter"
+            size="large"
+            icon={chevronForwardOutline}
+          ></IonIcon>
+        </IonRow>
+        <IonRow class="latest-searches">
+          <IonIcon
+            className="icon-align-vcenter"
+            size="large"
+            icon={timeOutline}
+          />
+          <div className="div_from_to">
+            <span>Taquaral</span>
+            <IonIcon icon={arrowForwardOutline}></IonIcon>
+            <span>PUC-Campinas</span>
+            <br />
+            <small>Há 2 hora</small>
+          </div>
+          <IonIcon
+            className="icon-forward icon-align-vcenter"
+            size="large"
+            icon={chevronForwardOutline}
+          />
+        </IonRow>
+        <IonModal isOpen={showModalEnd}>
+          <IonContent>
+            <div className="header-search-modal">
+              <IonIcon
+                className="icon-return-modal"
+                icon={arrowBack}
+                onClick={() => setShowModalEnd(false)}
+              />
+              <IonInput
+                onIonChange={(e) => optionsAddress(e.detail.value)}
+                placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
+                className="search-modal"
+              />
+            </div>
+            {addressResults.length > 0 ? (
+              addressResults.map((item: any) => {
+                return (
+                  <div
+                    key={item.value}
+                    className="modal-search-results"
+                    data-value={item.value}
+                    data-label={item.label}
+                    onClick={(e) => setAddress(e)}
+                  >
+                    {item.label}
+                    <IonIcon
+                      className="icon-results-modal"
+                      icon={chevronForwardOutline}
+                    />
+                  </div>
+                );
+              })
+            ) : (
+              <>
+                <IonProgressBar type="indeterminate" />
+                <br />
+              </>
+            )}
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default BuscarTransporte;

src/pages/BuscarTransporte/BuscarTransporte.css

@@ -49,4 +49,9 @@
 
 .icon-results-modal{
     font-size: 2rem;
+}
+
+.input-autocomplete{
+    margin: 0.5rem 0 0.5rem 0.5rem;
+    width: 100%;
 }

src/pages/BuscarTransporte/BuscarTransporte.tsx

@@ -25,47 +25,82 @@ import { useEffect, useState } from "react";
 import { autoCompleteAddress } from "../../services/utils";
 import { useHistory } from "react-router";
 
+import GooglePlacesAutocomplete, {
+  geocodeByAddress,
+  getLatLng,
+} from "react-google-places-autocomplete";
+
 const BuscarTransporte: React.FC = () => {
-	const history = useHistory();
+  const history = useHistory();
   const [addressFrom, setAddressFrom] = useState<any>("");
-  const [coordinatesFrom, setCoordinatesFrom] = useState<any>("")
+  const [coordinatesFrom, setCoordinatesFrom] = useState<any>("");
   const [addressTo, setAddressTo] = useState<any>("");
-	const [coordinatesTo, setCoordinatesTo] = useState<any>("")
+  const [coordinatesTo, setCoordinatesTo] = useState<any>("");
   const [showModalEnd, setShowModalEnd] = useState(false);
   const [addressResults, setAddressResults] = useState<any>([]);
-	const [inputActive, setInputActive] = useState("");
+  const [inputActive, setInputActive] = useState("");
 
-  const optionsAddress = async (inputValue: any) => {
-    let results = await autoCompleteAddress(inputValue)
-      .then((res) => {
-        return res.map((item: any) => {
-          return {
-            value:
-              item.geometry.coordinates[0] + "," + item.geometry.coordinates[1],
-            label: item.properties.formatted,
-          };
-        });
-      })
-      .catch((err) => {
-        console.log("Erro ao buscar endereço:", err);
+  // const optionsAddress = async (inputValue: any) => {
+  //   let results = await autoCompleteAddress(inputValue)
+  //     .then((res) => {
+  //       return res.map((item: any) => {
+  //         return {
+  //           value:
+  //             item.geometry.coordinates[0] + "," + item.geometry.coordinates[1],
+  //           label: item.properties.formatted,
+  //         };
+  //       });
+  //     })
+  //     .catch((err) => {
+  //       console.log("Erro ao buscar endereço:", err);
+  //     });
+  //   setAddressResults(results);
+  // };
+
+  // function setInputActiveOpenModal(input: string) {
+  //   setInputActive(input);
+  //   setShowModalEnd(true);
+  // }
+
+  // function setAddress(div: any) {
+  //   if (inputActive === "from") {
+  //     setAddressFrom(div.target.attributes[2].value);
+  //     setCoordinatesFrom(div.target.attributes[1].value);
+  //   } else {
+  //     setAddressTo(div.target.attributes[2].value);
+  //     setCoordinatesTo(div.target.attributes[1].value);
+  //   }
+  //   setShowModalEnd(false);
+  // }
+
+  useEffect(() => {
+    if (addressFrom.label && addressFrom.label.length > 0) {
+      geocodeByAddress(addressFrom.label)
+        .then((results) => getLatLng(results[0]))
+        .then(({ lat, lng }) => setCoordinatesFrom({ lat, lng }));
+    }
+  }, [addressFrom]);
+
+  useEffect(() => {
+    if (addressTo.label && addressTo.label.length > 0) {
+      geocodeByAddress(addressTo.label)
+        .then((results) => getLatLng(results[0]))
+        .then(({ lat, lng }) => setCoordinatesTo({ lat, lng }));
+    }
+  }, [addressTo]);
+
+  function buscaTransporte(){
+    if (coordinatesFrom && coordinatesTo && addressFrom && addressTo) {
+      history.push({
+        pathname: "/transportes",
+        state: {
+          coordinatesFrom,
+          coordinatesTo,
+          addressFrom,
+          addressTo,
+        },
       });
-    setAddressResults(results);
-  };
-
-  function setInputActiveOpenModal(input: string) {
-    setInputActive(input);
-    setShowModalEnd(true);
-  }
-
-  function setAddress(div: any) {
-    if (inputActive === "from") {
-			setAddressFrom(div.target.attributes[2].value);
-			setCoordinatesFrom(div.target.attributes[1].value);
-		}else{
-			setAddressTo(div.target.attributes[2].value)
-    	setCoordinatesTo(div.target.attributes[1].value)
-		}
-		setShowModalEnd(false)
+    }
   }
 
   return (
@@ -75,24 +110,49 @@ const BuscarTransporte: React.FC = () => {
           <IonCardContent>
             <div className="inputs-from-to">
               <IonIcon icon={locateOutline}></IonIcon>
-              <IonSearchbar
+              {/* <IonSearchbar
                 showClearButton="never"
                 onClick={() => setInputActiveOpenModal("from")}
                 value={addressFrom}
                 placeholder="R. José Paulino, 1234 - Centro, Campinas - SP, 13013-001"
+              /> */}
+              <GooglePlacesAutocomplete
+                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  value: addressFrom,
+                  onChange: setAddressFrom,
+                  className: "input-autocomplete",
+                  placeholder: "R. José Paulino, 1234",
+                }}
               />
             </div>
             <div className="inputs-from-to">
               <IonIcon icon={locationOutline}></IonIcon>
-              <IonSearchbar
+              {/* <IonSearchbar
                 showClearButton="never"
                 onClick={() => setInputActiveOpenModal("to")}
                 value={addressTo}
                 placeholder="PUC Campinas"
+              /> */}
+              <GooglePlacesAutocomplete
+                apiKey="AIzaSyAGfCsaNwxwyj4Ajtfy7MTNADE6JwmnZvA"
+                apiOptions={{ language: "pt-br", region: "br" }}
+                selectProps={{
+                  value: addressTo,
+                  onChange: setAddressTo,
+                  className: "input-autocomplete",
+                  placeholder: "PUC Campinas",
+                }}
               />
             </div>
             <div className="button-search">
-              <IonButton color="primary" onClick={() => history.push("/transportes")}>Buscar</IonButton>
+              <IonButton
+                color="primary"
+                onClick={() => buscaTransporte()}
+              >
+                Buscar
+              </IonButton>
             </div>
           </IonCardContent>
         </IonCard>
@@ -134,7 +194,7 @@ const BuscarTransporte: React.FC = () => {
             icon={chevronForwardOutline}
           />
         </IonRow>
-        <IonModal isOpen={showModalEnd}>
+        {/* <IonModal isOpen={showModalEnd}>
           <IonContent>
             <div className="header-search-modal">
               <IonIcon
@@ -173,7 +233,7 @@ const BuscarTransporte: React.FC = () => {
               </>
             )}
           </IonContent>
-        </IonModal>
+        </IonModal> */}
       </IonContent>
     </IonPage>
   );

src/pages/MainPages.tsx

@@ -1,15 +1,12 @@
-import React, { useState, useRef } from 'react';
 import {
   IonTabs,
   IonTabBar,
   IonTabButton,
   IonLabel,
-  IonPage,
   IonIcon,
   IonRouterOutlet
 } from '@ionic/react';
 import { Redirect, Route } from 'react-router-dom';
-import { IonReactRouter } from '@ionic/react-router';
 import { search, home, person } from 'ionicons/icons';
 
 import Home from './Home';
@@ -24,9 +21,9 @@ export const MainPages: React.FC = () => {
         <Route path="/home" exact={true}>
           <Home />
         </Route>
-        <Route path="/buscar-passageiro" exact={true}>
+        {/* <Route path="/buscar-passageiro" exact={true}>
           <BuscarPassageiro />
-        </Route>
+        </Route> */}
         <Route path="/buscar-transporte" exact={true}>
           <BuscarTransporte />
         </Route>

src/pages/Transportes/Transportes.css

@@ -1,9 +1,8 @@
 .header-page{
-  background-color: var(--ion-toolbar-background);
-  border-bottom: 1px solid var(--ion-toolbar-border-color);
+  background-color: var(--ion-item-background);
+  border-bottom: 1px solid var(--ion-color-step-150, #dadada);
   height: 3.5rem;
   display: flex;
-  justify-content: center;
   padding: 0.5rem;
 }
 
@@ -12,8 +11,57 @@
 }
 
 .span-info-back{
-  background-color: #4e4e4e;
+  background-color: var(--ion-color-step-150, #dadada);
   border-radius: 0.5rem;
   padding: 0.5rem;
   display: flex;
+  width: 100%;
+}
+
+.address-from-to{
+  /* display: block; */
+  margin-top: -0.2rem;
+  font-size: 0.8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+/* .address-from-to span{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 1rem!important;
+} */
+
+.address-from-to ion-icon{
+  margin-inline: 0.2rem;
+}
+
+.address-from-to small{
+  display: block;
+}
+
+.header-tabs{
+  background-color: var(--ion-color-step-150,#dadada);
+  height: 5.5rem;
+  padding: 0.5rem;
+}
+
+.header-tabs h5{
+  margin: 0;
+}
+
+.header-tabs .card-transporte{
+  margin: 0;
+}
+
+.content-filter-modal{
+  margin: 0.5rem;
+}
+
+.header-filter-modal{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }

src/pages/Transportes/Transportes.tsx

@@ -1,38 +1,190 @@
-import { IonContent, IonPage, IonFab, IonFabButton, IonIcon, IonCard, IonInput, IonRow, IonCol, IonCardContent, IonButton, IonHeader, IonToolbar, IonButtons, IonBackButton } from '@ionic/react';
-import { arrowBack, arrowBackOutline, arrowForwardOutline, chevronBackOutline, chevronForwardOutline, locateOutline, locationOutline, timeOutline } from 'ionicons/icons';
-import { useHistory } from 'react-router';
-import './Transportes.css';
+import {
+  IonContent,
+  IonPage,
+  IonFab,
+  IonFabButton,
+  IonIcon,
+  IonCard,
+  IonInput,
+  IonRow,
+  IonCol,
+  IonCardContent,
+  IonButton,
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonBackButton,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonLabel,
+  IonBadge,
+  IonRouterOutlet,
+  IonSlides,
+  IonSlide,
+  IonModal,
+  IonList,
+  IonRadioGroup,
+  IonListHeader,
+  IonItem,
+  IonRadio,
+  IonCheckbox,
+  IonFooter,
+} 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/transportes";
+import "./Transportes.css";
+
+interface InfoBusca {
+  addressFrom: any;
+  addressTo: any;
+  coordinatesFrom: any;
+  coordinatesTo: any;
+}
 
 const Transportes: React.FC = () => {
-	const history = useHistory();
+  const history = useHistory();
+  const location = useLocation();
+  const props = location.state as InfoBusca;
+  const [transportes, setTransportes] = useState([]);
+  const [showModalFilters, setShowModalFilters] = useState(false);
+
+  useEffect(() => {
+    if (props) {
+      buscaTransportes();
+    }
+  }, [props]);
+
+  async function buscaTransportes() {
+    let data = (await getTransportes(props)) as any;
+    setTransportes(data);
+  }
 
   return (
     <IonPage>
-			<IonHeader>
-				<div className='header-page'>
+      <IonHeader>
+        <div className="header-page">
           {/* <IonButtons slot="start">
             <IonBackButton text={'aaaa'} icon={arrowBack} defaultHref='buscar-transporte' />
           </IonButtons> */}
-					<span className='span-info-back' onClick={history.goBack}>
-						<IonIcon className='icon-return' icon={chevronBackOutline}/>
-						<div>
-							Vila Réggio 
-							<IonIcon icon={arrowForwardOutline}/>
-							PUC-Campinas
-						</div>
-					</span>
-				</div>
-			</IonHeader>
-			<IonContent fullscreen>
-				
-				<IonFab vertical="bottom" horizontal="center" slot="fixed">
-					<IonFabButton>
-						Filtros
-					</IonFabButton>
-				</IonFab>
-			</IonContent>
-		</IonPage>
+          <span className="span-info-back" onClick={history.goBack}>
+            <IonIcon className="icon-return" icon={chevronBackOutline} />
+            <div className="address-from-to">
+              <span>{props.addressFrom.label}</span>
+              <IonIcon icon={arrowForwardOutline} />
+              <span>{props.addressTo.label}</span>
+              <small>Hoje</small>
+            </div>
+          </span>
+        </div>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className="header-tabs">
+          <IonSlides>
+            <IonSlide>
+              <h5>Mais barata</h5>
+              <IonCard className="card-transporte">
+                <IonCardContent>Seu João</IonCardContent>
+              </IonCard>
+            </IonSlide>
+            <IonSlide>
+              <h5>Melhor avaliação</h5>
+              <IonCard className="card-transporte">
+                <IonCardContent>Seu Zé</IonCardContent>
+              </IonCard>
+            </IonSlide>
+          </IonSlides>
+        </div>
+        {transportes &&
+          transportes.map((record: any, index: any) => {
+            return (
+              <IonCard className="card-transporte" key={index}>
+                <IonCardContent>
+                  <h1>Motorista: {record.motorista}</h1>
+                  <div>Avaliação: {record.avaliacao}</div>
+                  <div>Valor: {record.valor}</div>
+                  <div>Lugares disponíveis: {record.lugares}</div>
+                </IonCardContent>
+              </IonCard>
+            );
+          })}
+
+        <IonFab
+          onClick={() => setShowModalFilters(true)}
+          vertical="bottom"
+          horizontal="center"
+          slot="fixed"
+        >
+          <IonFabButton>Filtros</IonFabButton>
+        </IonFab>
+        <IonModal isOpen={showModalFilters}>
+          <IonToolbar>
+            <div className="header-filter-modal">
+              <IonIcon
+                size="large"
+                icon={closeOutline}
+                onClick={() => setShowModalFilters(false)}
+              />
+              <h4>
+                <b>Limpar</b>
+              </h4>
+            </div>
+          </IonToolbar>
+          <IonContent>
+            <div className="content-filter-modal">
+              <h1>Filtrar</h1>
+              <h3>Ordernar por</h3>
+              <IonRadioGroup>
+                <IonItem>
+                  <IonLabel>Menor preço</IonLabel>
+                  <IonRadio value="menor_preco" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Avaliação</IonLabel>
+                  <IonRadio value="avaliacao" />
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel>Lugares disponíveis</IonLabel>
+                  <IonRadio value="lugares_disponiveis" />
+                </IonItem>
+              </IonRadioGroup>
+              <h3>Preferências</h3>
+              <IonItem>
+                <IonLabel>Vaga avulsa</IonLabel>
+                <IonCheckbox value="vaga_avulsa" />
+              </IonItem>
+              <IonItem>
+                <IonLabel>Ar condicionado</IonLabel>
+                <IonCheckbox value="ar_condicionado" />
+              </IonItem>
+            </div>
+          </IonContent>
+          <IonFooter>
+            <IonButton
+              expand="block"
+              onClick={() => setShowModalFilters(false)}
+            >
+              Aplicar Filtros
+            </IonButton>
+          </IonFooter>
+        </IonModal>
+      </IonContent>
+    </IonPage>
   );
 };
 
-export default Transportes;
+export default Transportes;