diff --git a/src/components/dashboard/dashboard.styles.scss b/src/components/dashboard/dashboard.styles.scss
index c9a303e..e518706 100644
--- a/src/components/dashboard/dashboard.styles.scss
+++ b/src/components/dashboard/dashboard.styles.scss
@@ -1,13 +1,9 @@
@import '../../mixins';
.dashboard {
- display: none;
-
- @include respond(phone) {
- display: grid;
- grid-template-columns: 2fr 8fr;
- grid-column-gap: 1rem;
- }
+ display: grid;
+ grid-template-columns: 2fr 8fr;
+ grid-column-gap: 1rem;
grid-row: 9 / 10;
grid-column: 1 / 9;
diff --git a/src/components/details/details.component.jsx b/src/components/details/details.component.jsx
index 9cd8771..5596f25 100644
--- a/src/components/details/details.component.jsx
+++ b/src/components/details/details.component.jsx
@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
import { BsArrowLeft } from 'react-icons/bs';
import { useCoordinatesContext } from '../../providers/coordinates/coordinates.context';
import { useMapContext } from '../../providers/mapbox/mapbox.context';
import { useGraphhopperContext } from '../../providers/graphhopper/graphhopper.context';
-import { updateMap } from '../form/form.component';
import { useMobileContext } from '../../providers/mobile/mobile.context';
import { useStopsContext } from '../../providers/stops/stops.context.jsx';
import useRoute from '../../providers/route/route.context.jsx';
@@ -13,6 +12,7 @@ import math, { distance_meters } from '../math/math.component.jsx';
//import * as Location from 'expo-location';
import './details.styles.scss';
+import { updateMap } from '../form/functions/updateMap.jsx';
const Details = () => {
const { corState, corDispatch } = useCoordinatesContext();
@@ -29,7 +29,7 @@ const Details = () => {
distance: 0,
instruction_distance: 0,
};
- let searching = true;
+ // let searching = true;
let current = [];
// Converts from degrees to radians.
@@ -57,7 +57,7 @@ const Details = () => {
}
useEffect(() => {
- if (navigator.geolocation) {
+ if (navigator.geolocation && !corState.start) {
navigator.geolocation.getCurrentPosition(async function (position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
@@ -70,7 +70,7 @@ const Details = () => {
});
});
}
- });
+ }, []);
async function handleSubmit(e) {
e.preventDefault();
@@ -82,8 +82,8 @@ const Details = () => {
current = [lng, lat];
- data = await updateMap(e, corState, mapState, graphDispatch);
- const start = data.paths[0].points.coordinates[0];
+ data = await updateMap(corState, mapState, graphDispatch);
+ // const start = data.paths[0].points.coordinates[0];
const user_cor = await math(data.paths[0].points.coordinates, localRoute.point_index, lat, lng);
localRoute.time = data.paths[0].time;
@@ -113,7 +113,7 @@ const Details = () => {
const user_cor = await math(data.paths[0].points.coordinates, localRoute.point_index, lat, lng);
current = [lng, lat];
- if (user_cor.path == 2) {
+ if (user_cor.path === 2) {
const graphState_data = data.paths[0].instructions[localRoute.instruction_index];
localRoute.point_index += 1;
@@ -137,8 +137,6 @@ const Details = () => {
handleInputChange(localRoute);
- console.log(data);
-
mapState.flyTo({
duration: 4000,
center: [user_cor.inter.y, user_cor.inter.x],
@@ -164,7 +162,7 @@ const Details = () => {
function handleClick(e) {
e.preventDefault();
- handleExit(e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState);
+ handleExit(e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState, graphDispatch);
}
return (
@@ -175,19 +173,46 @@ const Details = () => {
-
-
Start
-
- {corState.start ? corState.start.location : 'Chose a starting point'}
-
-
-
-
End
-
- {corState.end ? corState.end.location : 'Chose a ending point'}
-
+
+
+
Start
+
+ {corState.start ? corState.start.location : 'Chose a starting point'}
+
+
+
+ {corState.stop_1 ? (
+
+
+
Stop 1
+
{corState.stop_1.location}
+
+
+ ) : null}
+ {corState.stop_2 ? (
+
+
+
Stop 2
+
{corState.stop_2.location}
+
+
+ ) : null}
+ {corState.stop_3 ? (
+
+
+
Stop 3
+
{corState.stop_3.location}
+
+
+ ) : null}
+
+
+
End
+
+ {corState.end ? corState.end.location : 'Chose a ending point'}
+
+
-
Add Desination
Start
@@ -196,17 +221,19 @@ const Details = () => {
);
};
-export const handleExit = (e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState) => {
+export const handleExit = (e, mapState, mobileDispatch, corDispatch, stopsDispatch, corState, graphDispatch) => {
if (mapState.getStyle().layers.some(e => e.id === 'route')) {
mapState.removeLayer('route');
mapState.removeSource('route');
}
- const keys = ['stop_1', 'stop_2', 'stop_3', 'end'];
+ // const keys = ['stop_1', 'stop_2', 'stop_3', 'end'];
corDispatch({}, corState.start);
stopsDispatch([]);
+ graphDispatch(null);
+
mapState.flyTo({
duration: 4000,
center: [-83.0363633, 42.3149367],
@@ -216,6 +243,7 @@ export const handleExit = (e, mapState, mobileDispatch, corDispatch, stopsDispat
});
mobileDispatch('searching');
+
};
export default Details;
diff --git a/src/components/details/details.styles.scss b/src/components/details/details.styles.scss
index 70deb0d..849bd65 100644
--- a/src/components/details/details.styles.scss
+++ b/src/components/details/details.styles.scss
@@ -17,16 +17,19 @@
align-items: center;
&--start {
- grid-column: 2 / 3;
+ grid-column: 1 / 3;
background-color: #01abe5;
font-size: 1.8rem;
}
+}
- &--add {
- grid-column: 1 / 2;
- background-color: black;
- font-size: 1.3rem;
- }
+.stop {
+ display: grid;
+ grid-template-rows: max-content max-content 1fr max-content max-content;
+ grid-template-columns: max-content 1fr;
+
+ grid-row-gap: 5px;
+ grid-column-gap: 1rem;
}
.info {
@@ -35,20 +38,12 @@
justify-self: center;
background-color: white;
- padding: 0rem;
+ padding: 1rem;
height: auto;
width: 100%;
box-sizing: border-box;
border-radius: 1rem;
- padding: 1rem;
- display: grid;
- grid-template-rows: max-content max-content 1fr max-content max-content;
- grid-template-columns: max-content 1fr;
-
- grid-row-gap: 5px;
- grid-column-gap: 1rem;
-
&__circle {
width: 1rem;
height: 1rem;
@@ -57,39 +52,33 @@
&--red {
background-color: red;
- grid-row: 1 / 2;
}
&--blue {
background-color: blue;
- grid-row: 4 / 5;
}
- }
- &__label {
- margin: 0px;
- grid-column: 2 / 3;
+ &--orange {
+ background-color: orange;
+ }
- &--start {
- grid-row: 1 / 2;
+ &--yellow {
+ background-color: gold;
}
- &--end {
- grid-row: 4 / 5;
+ &--green {
+ background-color: green;
}
}
- &__location {
+ &__label {
margin: 0px;
grid-column: 2 / 3;
+ }
- &--start {
- grid-row: 2 / 3;
- }
-
- &--end {
- grid-row: 5 / 6;
- }
+ &__location {
+ margin: 0px;
+ grid-column: 2 / 3;
}
&__line {
@@ -103,15 +92,15 @@
.container {
padding: 0.5rem;
- grid-row: 7 / 10;
grid-column: 1 / 9;
display: grid;
grid-template-columns: 1fr 1fr;
- grid-template-rows: 12rem auto;
+ grid-template-rows: auto;
grid-row-gap: 0.5rem;
grid-column-gap: 0.5rem;
+ position: fixed;
}
.exit {
diff --git a/src/components/form/form.component.jsx b/src/components/form/form.component.jsx
index 3aec0e4..4c57d78 100644
--- a/src/components/form/form.component.jsx
+++ b/src/components/form/form.component.jsx
@@ -3,13 +3,10 @@ import { useEffect, useState } from 'react';
import { Input } from '../input/input.component';
import { useCoordinatesContext } from '../../providers/coordinates/coordinates.context';
import { useMapContext } from '../../providers/mapbox/mapbox.context';
-import { routes } from '../graphhopper/graphhopper.component';
-import addRoutes from '../map/functions/map.routes';
-import { getCoordinates } from '../graphhopper/graphhopper.component';
import { Add } from '../button/button.component';
import { useStopsContext } from '../../providers/stops/stops.context.jsx';
import { useGraphhopperContext } from '../../providers/graphhopper/graphhopper.context';
-import { geoLocate } from '../map/functions/map.geolocate';
+import { updateMap } from './functions/updateMap.jsx';
import './form.styles.scss';
@@ -22,8 +19,8 @@ const Form = () => {
async function handleSubmit(e) {
e.preventDefault();
- const data = await updateMap(e, corState, mapState, graphDispatch);
- console.log(data);
+ const data = await updateMap(corState, mapState, graphDispatch);
+
const start = data.paths[0].points.coordinates[0];
mapState.flyTo({
@@ -52,18 +49,4 @@ const Form = () => {
);
};
-export const updateMap = async (e, corState, mapState, graphDispatch) => {
- const data = await routes(corState);
-
- if (mapState.getStyle().layers.some(e => e.id === 'route')) {
- mapState.removeLayer('route');
- mapState.removeSource('route');
- }
-
- addRoutes(mapState, data.paths[0].points.coordinates);
- await graphDispatch(data);
-
- return data;
-};
-
export default Form;
diff --git a/src/components/form/form.styles.scss b/src/components/form/form.styles.scss
index d77e197..e233dcc 100644
--- a/src/components/form/form.styles.scss
+++ b/src/components/form/form.styles.scss
@@ -20,6 +20,7 @@
border: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
+ cursor: pointer;
//grid-column: 1 / 3;
@include respond(phone) {
diff --git a/src/components/form/functions/updateMap.jsx b/src/components/form/functions/updateMap.jsx
new file mode 100644
index 0000000..4495afa
--- /dev/null
+++ b/src/components/form/functions/updateMap.jsx
@@ -0,0 +1,15 @@
+import { routes } from '../../graphhopper/graphhopper.component';
+import addRoutes from '../../map/functions/map.routes';
+
+export const updateMap = async (corState, mapState, graphDispatch) => {
+ const data = await routes(corState);
+ if (mapState.getStyle().layers.some(e => e.id === 'route')) {
+ mapState.removeLayer('route');
+ mapState.removeSource('route');
+ }
+
+ addRoutes(mapState, data.paths[0].points.coordinates);
+ await graphDispatch(data);
+
+ return data;
+};
diff --git a/src/components/graphhopper/graphhopper.component.jsx b/src/components/graphhopper/graphhopper.component.jsx
index 55e99b9..6708e8d 100644
--- a/src/components/graphhopper/graphhopper.component.jsx
+++ b/src/components/graphhopper/graphhopper.component.jsx
@@ -8,7 +8,7 @@ export const getCoordinates = async addr => {
//provider: 'nominatim',
provider: 'default',
//countrycode: 'ca',
- key: 'ee4af31e-0f04-4b6c-9f9b-c8a665ec6a89',
+ key: process.env.REACT_APP_API_KEY,
}).toString();
const response = await fetch(`https://graphhopper.com/api/1/geocode?${query}`, { method: 'GET' });
@@ -28,8 +28,7 @@ export const routes = async props => {
point_hints.push(val.location);
}
}
-
- const response = await fetch('https://graphhopper.com/api/1/route?key=ee4af31e-0f04-4b6c-9f9b-c8a665ec6a89', {
+ const response = await fetch(`https://graphhopper.com/api/1/route?key=${process.env.REACT_APP_API_KEY}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -39,12 +38,24 @@ export const routes = async props => {
point_hints,
snap_preventions: ['motorway', 'ferry', 'tunnel'],
details: ['road_class', 'surface'],
- vehicle: 'bike',
- locale: 'en',
+ vehicle: "racingbike",
instructions: true,
calc_points: true,
points_encoded: false,
- }),
+ priority: [
+ { "if": "road_class == MOTORWAY", "multiply_by": "0.1" },
+ { "if": "road_class == TRUNK", "multiply_by": "0.2" },
+ { "if": "road_class == SECONDARY", "multiply_by": "0.2" },
+ { "if": "road_class == PRIMARY", "multiply_by": "0.8" },
+ { "if": "road_class == TERTIARY", "multiply_by": "0.7" },
+ { "if": "road_class == RESIDENTIAL", "multiply_by": "1.0" },
+ { "if": "road_class == ROAD", "multiply_by": "0.5" },
+ { "if": "road_class == CYCLEWAY", "multiply_by": "1.0" },
+ { "if": "bike_network == MISSING", "multiply_by": "0.7" },
+ { "if": "max_speed >= 60", "multiply_by": "0.1" },
+ { "if": "lanes > 2", "multiply_by": "0.2" }
+ ]
+ })
});
return await response.json();
diff --git a/src/components/input/input.component.jsx b/src/components/input/input.component.jsx
index 0fd46aa..40fd529 100644
--- a/src/components/input/input.component.jsx
+++ b/src/components/input/input.component.jsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
import CoordinatesContext from '../../providers/coordinates/coordinates.context';
import { useCoordinatesContext } from '../../providers/coordinates/coordinates.context';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
@@ -9,10 +9,11 @@ import { useMobileContext } from '../../providers/mobile/mobile.context';
import './input.styles.scss';
-export const Input = ({ label, type }) => {
+export const Input = ({ label, type, placeholder }) => {
const { corState, corDispatch } = useCoordinatesContext();
const { mapState } = useMapContext();
const { mobileDispatch } = useMobileContext();
+ const [hiddenValue, setHiddenValue] = useState(false);
async function handleChange(event) {
if (label === 'end' && type === 'mobile') {
@@ -35,7 +36,8 @@ export const Input = ({ label, type }) => {
const getData = async event => {
let data = [];
- const response = await geoCoding(event);
+
+ const response = await geoCoding(event, corState);
if (response !== undefined) {
data = response.features.map(x => {
@@ -45,8 +47,20 @@ export const Input = ({ label, type }) => {
return data;
};
+ const hideValue = e => {
+ e.preventDefault();
+ const target = e.target.offsetParent.children[0];
+ const placeholder = target.innerText === 'Search Here...';
+
+ if (placeholder || (!placeholder && target.ariaSelected)) {
+ setHiddenValue(false);
+ } else {
+ setHiddenValue(true);
+ }
+ };
+
return (
-
diff --git a/src/components/menu/menu.styles.scss b/src/components/menu/menu.styles.scss
index cc7c2c3..a7b4a4d 100644
--- a/src/components/menu/menu.styles.scss
+++ b/src/components/menu/menu.styles.scss
@@ -10,6 +10,7 @@
background-color: white;
height: max-content;
+ min-width: 333px;
display: grid;
grid-template-columns: 1fr 1fr;
diff --git a/src/components/mobileForm/mobileForm.component.jsx b/src/components/mobileForm/mobileForm.component.jsx
new file mode 100644
index 0000000..8c05f9d
--- /dev/null
+++ b/src/components/mobileForm/mobileForm.component.jsx
@@ -0,0 +1,26 @@
+import { Input } from '../input/input.component';
+
+import { Add } from '../button/button.component';
+import { useStopsContext } from '../../providers/stops/stops.context.jsx';
+
+import './mobileForm.styles.scss';
+import { useMobileContext } from '../../providers/mobile/mobile.context.jsx';
+
+const MobileForm = () => {
+ const { stopsState } = useStopsContext();
+ const { mobileState } = useMobileContext();
+
+ function displayStops() {
+ return stopsState;
+ }
+
+ return (
+
+ <>{displayStops()}
+ {stopsState.length !== 3 ?
: <>}
+
+
+ );
+};
+
+export default MobileForm;
diff --git a/src/components/mobileForm/mobileForm.styles.scss b/src/components/mobileForm/mobileForm.styles.scss
new file mode 100644
index 0000000..89e61b8
--- /dev/null
+++ b/src/components/mobileForm/mobileForm.styles.scss
@@ -0,0 +1,18 @@
+@import '../../mixins';
+
+.input {
+ display: none;
+ position: fixed;
+ top: 1rem;
+ left: 50%;
+
+ transform: translateX(-50%);
+
+ @include respond(phone) {
+ display: unset;
+ }
+
+ &--hidden {
+ display: none;
+ }
+}
diff --git a/src/components/sidebar/sidebar.component.jsx b/src/components/sidebar/sidebar.component.jsx
index 5a2e819..67ccdcc 100644
--- a/src/components/sidebar/sidebar.component.jsx
+++ b/src/components/sidebar/sidebar.component.jsx
@@ -1,5 +1,7 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
+import { useReactToPrint } from 'react-to-print';
import { useGraphhopperContext } from '../../providers/graphhopper/graphhopper.context';
+import { useCoordinatesContext } from '../../providers/coordinates/coordinates.context';
import { BsArrowLeft } from 'react-icons/bs';
import { BsArrowRight } from 'react-icons/bs';
import Card from '../card/card.component.jsx';
@@ -9,6 +11,20 @@ import './sidebar.styles.scss';
const Sidebar = () => {
const [isOpen, setOpen] = useState(false);
const { graphState } = useGraphhopperContext();
+ const { corState } = useCoordinatesContext();
+ const componentRef = useRef();
+
+ const handlePrint = useReactToPrint({
+
+ copyStyles: false,
+ content: () => componentRef.current,
+ documentTitle: 'Directions',
+ onBeforeGetContent: () => {
+ return new Promise((resolve) => {
+ setTimeout(resolve, 500);
+ });
+ },
+ });
const on_click = () => {
setOpen(!isOpen);
@@ -19,9 +35,6 @@ const Sidebar = () => {
return undefined;
}
- console.log(index);
- console.log(data);
-
return Math.round(data[index - 1].distance);
};
@@ -32,7 +45,7 @@ const Sidebar = () => {
const data = graphState.paths[0].instructions;
instructions = data.map((i, index) => {
- return
;
+ return
;
//return
{`In ${Math.round(i.distance)} meters ${i.text}`}
;
});
}
@@ -47,16 +60,35 @@ const Sidebar = () => {
return
;
};
- return (
-