@autobusal/common 1.3.2 → 1.4.0

package/Drive/Drive.tsx

@@ -0,0 +1,64 @@
+import { TFunction } from 'i18next';
+import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
+import { getCoordinates, getPosition, autobusMarker } from './utilities';
+import { Container, Loading, Disclaimer } from './styles';
+import { LocationData } from '@autobusal/providers/types/locations';
+import { useGetDriveData } from './services';
+
+interface Props {
+  locations: LocationData[]
+  t: TFunction<'common'>
+}
+
+const Drive = ({ locations, t }: Props): JSX.Element => {
+  const coordinates = getCoordinates(locations);
+
+  const { data: MapData, isLoading } = useGetDriveData(coordinates);
+
+  if (isLoading) {
+    return (
+      <Container>
+        <Loading className="leaflet-container">{ t('drive.loading', { ns: 'common' }) }</Loading>
+      </Container>
+    );
+  }
+
+  // we get the coordinates for the roads to paint
+  const geometryData = MapData?.features[0].geometry.coordinates;
+
+  // we paint the drive lines
+  const lines = geometryData?.map((item, index) => {
+    const nextLocation = geometryData[index + 1] ?? item;
+
+    const from = getPosition(item, 'coordinates');
+    const to = getPosition(nextLocation, 'coordinates');
+
+    return <Polyline key={ index } positions={ [from, to] } color="#3388FF" />;
+  });
+
+  // we add the stop markers
+  const markers = locations.map((item, index) => (
+    <Marker key={ index } position={ getPosition(item.stop?.location) } icon={ autobusMarker }>
+      <Popup>
+        <strong>{ item.city.name }</strong> <br />
+        { item.stop?.name }, { item.departure }
+      </Popup>
+    </Marker>
+  ));
+
+  return (
+    <Container>
+      <MapContainer center={ getPosition(locations[0].stop?.location) } minZoom={ 6 } maxZoom={ 13 } zoom={ 6 } scrollWheelZoom={ true }>
+        <TileLayer attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+
+        { markers }
+
+        { lines }
+      </MapContainer>
+
+      <Disclaimer>{ t('drive.disclaimer', { ns: 'common' }) }</Disclaimer>
+    </Container>
+  );
+};
+
+export default Drive;

package/Drive/services.ts

@@ -0,0 +1,24 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { GeoJsonData } from './types';
+
+export const useGetDriveData = (coordinates: number[][]): UseQueryResult<GeoJsonData> => (
+  useQuery({
+    queryKey: ['drive-data'],
+    queryFn: async () => (
+      await apiClient
+        .post('https://api.openrouteservice.org/v2/directions/driving-car/geojson', {
+          coordinates
+        }, {
+          headers: {
+            Authorization: import.meta.env.VITE_OPEN_ROUTE_SERVICE_KEY
+          },
+          withCredentials: false,
+          withXSRFToken: false
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Drive/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import 'leaflet/dist/leaflet.css';
+
+export const Container = styled.div`
+  position: relative;
+
+  & > .leaflet-container {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export const Loading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Disclaimer = styled.div`
+  position: absolute;
+  bottom: 20px;
+  left: 10px;
+  right: 10px;
+  z-index: 100000;
+  padding: 5px;
+  text-align: center;
+  font-size: ${ props => props.theme.size.xxs };
+  color: ${ props => props.theme.font.info };
+  background: ${ props => props.theme.menu.transparent };
+  border-radius: ${ props => props.theme.borderRadius };
+  box-shadow: ${ props => props.theme.boxShadow };
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+`;

package/Drive/types.ts

@@ -0,0 +1,11 @@
+export interface GeoJsonData {
+  features: FeaturesData[]
+}
+
+interface FeaturesData {
+  geometry: GeometryData
+}
+
+interface GeometryData {
+  coordinates: string[][]
+}

package/Drive/utilities.ts

@@ -0,0 +1,48 @@
+import L, { LatLngExpression } from 'leaflet';
+import markerIcon from './images/marker-icon.png';
+import markerShadow from './images/marker-shadow.png';
+import { LocationData } from '@autobusal/providers/types/locations';
+
+const STOP_UNDEFINED = ['0', '0'];
+
+export const getCoordinates = (locations: LocationData[]): number[][] => {
+  const coordinates: number[][] = [];
+
+  locations.forEach((item, index) => {
+    const nextLocation = locations[index + 1] ?? item;
+
+    const from = getPosition(item.stop?.location ?? STOP_UNDEFINED, 'coordinates') as number[];
+    const to = getPosition(nextLocation.stop?.location ?? STOP_UNDEFINED, 'coordinates') as number[];
+
+    // we push both coordinates
+    coordinates.push(from)
+    coordinates.push(to)
+  });
+
+  return coordinates;
+};
+
+export const getPosition = (position: string[] | undefined, type: string = 'normal'): LatLngExpression => {
+  if (position === undefined) {
+    return [0, 0];
+  }
+
+  // for the coordinates, we need to reverse the positions
+  if (type !== 'normal') {
+    position = position.slice().reverse();
+  }
+
+  return [
+    Number(position[0]),
+    Number(position[1])
+  ];
+};
+
+export const autobusMarker = new L.Icon({
+  iconUrl: markerIcon,
+  iconSize: [25, 41], // icon size
+  iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
+  popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor
+  shadowUrl: markerShadow,
+  shadowSize: [41, 41] // shadow size
+});

package/Viewer/services.ts

@@ -1,6 +1,6 @@
 import { UseMutationResult, useMutation } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
-import { UploadData } from '@autobusal/providers/types';
+import { UploadData } from '@autobusal/providers/types/settings';
 
 export const useFileUpload = (): UseMutationResult<UploadData, Error, any, unknown> => (
   useMutation({

package/index.ts

@@ -12,6 +12,7 @@ import ChooseSeat from './Seats/ChooseSeat';
 import CompanyItem from './CompanyItem/CompanyItem';
 import ContactInfo from './ContactInfo/ContactInfo';
 import CookieNotification from './CookieNotification/CookieNotification';
+import Drive from './Drive/Drive';
 import File from './File/File';
 import Gender from './Gender';
 import { General, Inline, Box, BoxMiddle, GeneralFull } from './Loading/Loading';
@@ -48,6 +49,7 @@ export {
   CompanyItem,
   ContactInfo,
   CookieNotification,
+  Drive,
   File,
   Gender,
   General,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "type": "module",
   "main": "index.ts"
 }