starting calendar feature

7 files changed, 407 insertions, 50 deletions

diff --git a/src/client/util/CalendarManager.scss b/src/client/util/CalendarManager.scss
new file mode 100644
index 000000000..60610f298
--- /dev/null
+++ b/src/client/util/CalendarManager.scss
@@ -0,0 +1,62 @@
+.calendar-interface{
+    width: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 7px;
+    padding: 10px;
+
+    .selected-doc-title{
+        font-size: 1.4em;
+    }
+
+    .creation-type-container{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-self: center;
+        gap: 12px;
+
+        .calendar-creation{
+            cursor: pointer;
+        }
+
+        .calendar-creation-selected{
+            border-bottom: 2px solid white;
+        }
+    }
+
+    .choose-calendar-container{
+        margin-top: 10px;
+        align-self: center;
+        width: 60%;
+
+        .MuiFilledInput-input{
+            padding: 10px;
+        }
+    }
+
+    .date-range-picker-container{
+        margin-top: 5px;
+        align-self:center;
+
+        .react-date-range{
+
+        }
+    }
+
+    .create-button-container{
+        
+        margin-top: 5px;
+        align-self: center;
+
+        .button-content{
+            font-size: 1.2em;
+            padding: 10px;
+            border-radius: 5px;
+            background-color: #EFF2F7;
+        }
+
+    }
+}
diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
new file mode 100644
index 000000000..39ba41652
--- /dev/null
+++ b/src/client/util/CalendarManager.tsx
@@ -0,0 +1,229 @@
+import * as React from 'react';
+import './CalendarManager.scss';
+import { observer } from "mobx-react";
+import { action, computed, observable, runInAction } from 'mobx';
+import { Doc } from '../../fields/Doc';
+import { DocumentView } from '../views/nodes/DocumentView';
+import { DictationOverlay } from '../views/DictationOverlay';
+import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
+import { MainViewModal } from '../views/MainViewModal';
+import { TextField } from '@material-ui/core';
+import Select from 'react-select';
+import { SettingsManager } from './SettingsManager';
+import { StrCast } from '../../fields/Types';
+import { SelectionManager } from './SelectionManager';
+import { DocumentManager } from './DocumentManager';
+import { DocData } from '../../fields/DocSymbols';
+import { DateRange, Range, RangeKeyDict } from 'react-date-range';
+import { Button } from 'browndash-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+
+type CreationType = 'new-calendar' | 'existing-calendar' | 'manage-calendars';
+
+@observer
+export class CalendarManager extends React.Component<{}> {
+    public static Instance: CalendarManager;
+    @observable private isOpen = false; 
+    @observable private targetDoc: Doc | undefined; // the target document
+    @observable private targetDocView: DocumentView | undefined; // the DocumentView of the target doc
+    @observable private dialogueBoxOpacity = 1; // for the modal
+    @observable private overlayOpacity = 0.4; // for the modal
+    
+    @observable private layoutDocAcls: boolean = false; // whether the layout doc or data doc's acls are to be used
+
+    @observable private creationType: CreationType = 'new-calendar';
+
+    @observable 
+    calendarName: string = "";
+
+    @action
+    setInterationType = (type: CreationType) => {
+        this.creationType = type;
+    }
+
+
+    public open = (target?: DocumentView, target_doc?: Doc) => {
+        console.log('hi');
+        runInAction(() => {
+            this.targetDoc = target_doc || target?.props.Document;
+            this.targetDocView = target;
+            DictationOverlay.Instance.hasActiveModal = true;
+            this.isOpen = this.targetDoc !== undefined;
+        })
+    };
+
+    public close = action(() => {
+        this.isOpen = false;
+        TaskCompletionBox.taskCompleted = false;
+        setTimeout(
+            action(() => {
+                DictationOverlay.Instance.hasActiveModal = false;
+                this.targetDoc = undefined;
+            }), 500
+        );
+        this.layoutDocAcls = false;
+    });
+
+    constructor(props: {}) {
+        super(props);
+        CalendarManager.Instance = this;
+    }
+
+    componentDidMount(): void {
+        
+    }
+
+    private focusOn = (contents: string) => {
+        const title = this.targetDoc ? StrCast(this.targetDoc.title) : '';
+        const docs = SelectionManager.Views().length > 1 ? SelectionManager.Views().map(docView => docView.props.Document) : [this.targetDoc];
+        return (
+            <span
+                className="focus-span"
+                title={title}
+                onClick={() => {
+                    if (this.targetDoc && this.targetDocView && docs.length === 1) {
+                        DocumentManager.Instance.showDocument(this.targetDoc, { willZoomCentered: true });
+                    }
+                }}
+                onPointerEnter={action(() => {
+                    if (docs.length) {
+                        docs.forEach(doc => doc && Doc.BrushDoc(doc));
+                        this.dialogueBoxOpacity = 0.1;
+                        this.overlayOpacity = 0.1;
+                    }
+                })}
+                onPointerLeave={action(() => {
+                    if (docs.length) {
+                        docs.forEach(doc => doc && Doc.UnBrushDoc(doc));
+                        this.dialogueBoxOpacity = 1;
+                        this.overlayOpacity = 0.4;
+                    }
+                })}>
+                {contents}
+            </span>
+        );
+    };
+
+    @observable
+    selectedDateRange: Range[] = [{
+        startDate: new Date(),
+        endDate: undefined,
+        key: 'selection'
+    }]
+
+    @action
+    setSelectedDateRange = (range: Range[]) => {
+        this.selectedDateRange = range;
+    }
+
+    @computed
+    get createButtonActive() {
+        if (this.calendarName.length === 0) return false // disabled if no calendar name
+        let startDate: Date | undefined;
+        let endDate: Date | undefined;
+        try {
+            startDate = this.selectedDateRange[0].startDate;
+            endDate = this.selectedDateRange[0].endDate;
+        } catch (e: any){
+            return false; // disabled 
+        }
+        if (!startDate || !endDate) return false; // disabled if any is undefined
+        return true;
+    }
+
+    @computed
+    get calendarInterface(){
+        let docs = SelectionManager.Views().length < 2 ? [this.targetDoc] : SelectionManager.Views().map(docView => docView.rootDoc);
+        const targetDoc = this.layoutDocAcls ? docs[0] : docs[0]?.[DocData];
+
+        const currentDate = new Date();
+
+        return (
+            <div 
+                className='calendar-interface'
+                style= {{
+                    background: SettingsManager.userBackgroundColor,
+                    color: StrCast(Doc.UserDoc().userColor)
+                }}
+                >
+                <p className="selected-doc-title" style={{ color: SettingsManager.userColor }}>
+                    <b>{this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}</b>
+                </p>
+                <div className='creation-type-container'>
+                    <div 
+                        className={`calendar-creation ${this.creationType === 'new-calendar' ? 'calendar-creation-selected' : ''}`}
+                        onClick={(e) => this.setInterationType('new-calendar')}
+                        >
+                        Add to New Calendar
+                    </div>
+                    <div 
+                        className={`calendar-creation ${this.creationType === 'existing-calendar' ? 'calendar-creation-selected' : ''}`}
+                        onClick={(e) => this.setInterationType('existing-calendar')}
+                        >
+                        Add to Existing calendar
+                    </div>
+                </div>
+                <div className='choose-calendar-container'>
+                    {this.creationType === 'new-calendar' ? 
+                        <TextField
+                            fullWidth
+                            placeholder='Enter calendar name...'
+                            variant='filled'
+                            style={{
+                                backgroundColor: 'white',
+                                color: 'black',
+                                borderRadius: '5px'
+
+                            }}
+                            
+                        />
+                    :
+                        <Select
+                            className='existing-calendar-search'
+                            placeholder='Search for existing calendar...'
+                            isMulti
+                            isSearchable
+                        >
+                            
+                        </Select>
+                    }
+                </div>
+                <div className='date-range-picker-container'>
+                    <DateRange
+                        className='react-date-range'
+                        editableDateInputs={true}
+                        // ranges={[selectionRange]}
+                        onChange={item => this.setSelectedDateRange([item.selection])}
+                        ranges={this.selectedDateRange}
+                    // onChange={this.handleSelect}
+                    />
+                </div>
+                <div className='create-button-container'>
+                    <Button
+                        active={this.createButtonActive}
+                        text="Add to Calendar"
+                        iconPlacement='right'
+                        icon={<FontAwesomeIcon icon={faPlus as IconLookup}/>}
+                    />
+                </div>
+                
+            </div>
+        )
+    }
+
+    render() {
+        return (
+        <MainViewModal 
+            contents={this.calendarInterface} 
+            isDisplayed={this.isOpen} 
+            interactive={true}
+            dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+            overlayDisplayedOpacity={this.overlayOpacity}
+            closeOnExternalClick={this.close}
+        />
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index bd82f7782..ccd459f0d 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -1,4 +1,4 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable, runInAction } from 'mobx';
@@ -14,6 +14,7 @@ import { DragManager } from '../util/DragManager';
 import { IsFollowLinkScript } from '../util/LinkFollower';
 import { SelectionManager } from '../util/SelectionManager';
 import { SharingManager } from '../util/SharingManager';
+import { CalendarManager } from '../util/CalendarManager';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { TabDocView } from './collections/TabDocView';
@@ -28,6 +29,8 @@ import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
 import { PinProps } from './nodes/trails';
 import { TemplateMenu } from './TemplateMenu';
 import React = require('react');
+import { faCalendarDays } from '@fortawesome/free-solid-svg-icons';
+
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -443,6 +446,21 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         );
     }
 
+    @computed
+    get calendarButton(){
+        const targetDoc = this.view0?.props.Document;
+        return !targetDoc ? null : (
+            <Tooltip title={<div className='dash-calendar-button'>Open calendar menu</div>}>
+                <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={e => {
+                    console.log('hi: ', CalendarManager.Instance)
+                    CalendarManager.Instance.open(this.view0, targetDoc)}
+                }>
+                    <FontAwesomeIcon className="documentdecorations-icon" icon={faCalendarDays as IconLookup}/>
+                </div>
+            </Tooltip>
+        )
+    }
+
     @observable _isRecording = false;
     _stopFunc: () => void = emptyFunction;
     @computed
@@ -606,6 +624,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                 {!SelectionManager.Views()?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>}
                 <div className="documentButtonBar-button">{this.pinButton}</div>
                 <div className="documentButtonBar-button">{this.recordButton}</div>
+                <div className="documentButtonBar-button">{this.calendarButton}</div>
                 {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
                 {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : (
                     <div className="documentButtonBar-button" style={{ display: !considerPush() ? 'none' : '' }}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 13f7dc896..d45f24930 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -72,6 +72,7 @@ import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
 import { DirectionsAnchorMenu } from './nodes/MapBox/DirectionsAnchorMenu';
+import { CalendarManager } from '../util/CalendarManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -1038,6 +1039,7 @@ export class MainView extends React.Component {
                 {this.inkResources}
                 <DictationOverlay />
                 <SharingManager />
+                <CalendarManager />
                 <ServerStats />
                 <RTFMarkup />
                 <SettingsManager />
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index e25261729..ba1e99f84 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -88,12 +88,11 @@
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
-        position: absolute;
         background-color: rgb(187, 187, 187);
         padding: 10px;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
-        width: 100%;
+        position: absolute;
 
         #route-to-animate-title {
             font-size: 1.25em;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index f4526c490..25299532a 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -895,19 +895,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }, 'createpin');
 
     @action
-    createMapRoute = undoable((coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => {
-        const mapRoute = Docs.Create.MapRouteDocument(
-            false,
-            [],
-            {title: `${origin} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates)},
-        );
-        this.addDocument(mapRoute, this.annotationKey);
-        if (createPinForDestination) {
-            this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
+    createMapRoute = undoable((coordinates: Position[], originName: string, destination: any, createPinForDestination: boolean) => {
+        if (originName !== destination.place_name){
+            const mapRoute = Docs.Create.MapRouteDocument(
+                false,
+                [],
+                {title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates)},
+            );
+            this.addDocument(mapRoute, this.annotationKey);
+            if (createPinForDestination) {
+                this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
+            }
+            return mapRoute;
         }
-        return mapRoute;
-
-        // mapMarker.infoWindowOpen = true;
+        // TODO: Display error that can't create route to same location
+        
     }, 'createmaproute');
 
     searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
@@ -981,6 +983,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @action
     handleMapClick = (e: MapLayerMouseEvent) => {
+        this.featuresFromGeocodeResults = [];
         if (this._mapRef.current){
             const features = this._mapRef.current.queryRenderedFeatures(
                 e.point, {
@@ -1179,6 +1182,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         if (routeDoc){
             MapAnchorMenu.Instance.fadeOut(true);
             document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+            this.featuresFromGeocodeResults = [];
             this.routeToAnimate = routeDoc;
         }
     }
@@ -1675,6 +1679,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 }), MapBox._rerenderDelay);
             return null;
         }
+        const scale = this.props.NativeDimScaling?.() || 1;
 
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
@@ -1686,11 +1691,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         e.button === 0 && !e.ctrlKey && e.stopPropagation();
                     }}
                     style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+                    {/* style={{ transformOrigin: "top left",  transform: `scale(${scale})`,  width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> */}
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {!this.routeToAnimate &&
-                        <div className="mapBox-searchbar">
+                        <div className="mapBox-searchbar" style={{ zIndex: 1, position: 'relative', background: 'lightGray' }}>
                             <TextField 
                                 fullWidth
                                 placeholder='Enter a location'
@@ -1755,7 +1761,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         </div>
                     }
                     {this.routeToAnimate &&
-                        <div className='animation-panel'>
+                        <div className='animation-panel' style={{width: this.sidebarWidth() === 0 ? '100%' : `calc(100% - ${this.sidebarWidth()}px)`}}>
                             <div id='route-to-animate-title'>
                                 {StrCast(this.routeToAnimate.title)}
                             </div>
@@ -1809,7 +1815,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
                             id="mapbox-map"
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
-                            style={{height: NumCast(this.layoutDoc._height), width: NumCast(this.layoutDoc._width)}}
+                            style={{
+                                transformOrigin: 'center',
+                                transform: `scale(${scale < 1 ? 1 : scale})`,
+                                zIndex: '0',
+                                width: '100%',
+                                height: '100%',
+                            }}
                             initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
                             onMove={this.onMapMove}
                             onClick={this.handleMapClick}
diff --git a/src/client/views/nodes/MapBox/MapboxApiUtility.ts b/src/client/views/nodes/MapBox/MapboxApiUtility.ts
index 011b6f72a..592330ac2 100644
--- a/src/client/views/nodes/MapBox/MapboxApiUtility.ts
+++ b/src/client/views/nodes/MapBox/MapboxApiUtility.ts
@@ -34,48 +34,39 @@ export class MapboxApiUtility {
 
     static getDirections = async (origin: number[], destination: number[]): Promise<Record<TransportationType, any> | undefined> => {
         try {
-            const drivingQuery = await fetch(
-                `${MAPBOX_DIRECTIONS_BASE_URL}/driving/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
 
-            const cyclingQuery = await fetch(
-                `${MAPBOX_DIRECTIONS_BASE_URL}/cycling/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+            const directionsPromises: Promise<any>[] = [];
+            const transportationTypes: TransportationType[] = ['driving', 'cycling', 'walking'];
 
-            const walkingQuery = await fetch(
-                `${MAPBOX_DIRECTIONS_BASE_URL}/walking/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+            transportationTypes.forEach((type) => {
+                directionsPromises.push(
+                  fetch(
+                    `${MAPBOX_DIRECTIONS_BASE_URL}/${type}/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`
+                  ).then((response) => response.json())
+                );
+              });
 
-            const drivingJson = await drivingQuery.json();
-            const cyclingJson = await cyclingQuery.json();
-            const walkingJson = await walkingQuery.json();
-
-            console.log("Driving: ", drivingJson);
-            console.log("Cycling: ", cyclingJson);
-            console.log("Waling: ", walkingJson);
-
-            const routeMap = {
-                'driving': drivingJson.routes[0],
-                'cycling': cyclingJson.routes[0],
-                'walking': walkingJson.routes[0]
-            }
+            const results = await Promise.all(directionsPromises);
 
             const routeInfoMap: Record<TransportationType, any> = {
                 'driving': {},
                 'cycling': {},
                 'walking': {},
-              };
-
-            Object.entries(routeMap).forEach(([key, routeData]) => {
-                const transportationTypeKey = key as TransportationType;
-                const geometry = routeData.geometry;
-                const coordinates = geometry.coordinates;
-
-                console.log(coordinates);
-
-                routeInfoMap[transportationTypeKey] = {
+            };
+
+            transportationTypes.forEach((type, index) => {
+                const routeData = results[index].routes[0];
+                if (routeData) {
+                  const geometry = routeData.geometry;
+                  const coordinates = geometry.coordinates;
+          
+                  routeInfoMap[type] = {
                     duration: this.secondsToMinutesHours(routeData.duration),
                     distance: this.metersToMiles(routeData.distance),
-                    coordinates: coordinates
+                    coordinates: coordinates,
+                  };
                 }
-            })
+              });
 
             return routeInfoMap;
 
@@ -102,4 +93,47 @@ export class MapboxApiUtility {
         return `${parseFloat((meters/1609.34).toFixed(2))} mi`;
     }   
 
-}
\ No newline at end of file
+}
+
+// const drivingQuery = await fetch(
+//     `${MAPBOX_DIRECTIONS_BASE_URL}/driving/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+
+// const cyclingQuery = await fetch(
+//     `${MAPBOX_DIRECTIONS_BASE_URL}/cycling/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+
+// const walkingQuery = await fetch(
+//     `${MAPBOX_DIRECTIONS_BASE_URL}/walking/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+
+// const drivingJson = await drivingQuery.json();
+// const cyclingJson = await cyclingQuery.json();
+// const walkingJson = await walkingQuery.json();
+
+// console.log("Driving: ", drivingJson);
+// console.log("Cycling: ", cyclingJson);
+// console.log("Waling: ", walkingJson);
+
+// const routeMap = {
+//     'driving': drivingJson.routes[0],
+//     'cycling': cyclingJson.routes[0],
+//     'walking': walkingJson.routes[0]
+// }
+
+// const routeInfoMap: Record<TransportationType, any> = {
+//     'driving': {},
+//     'cycling': {},
+//     'walking': {},
+//   };
+
+// Object.entries(routeMap).forEach(([key, routeData]) => {
+//     const transportationTypeKey = key as TransportationType;
+//     const geometry = routeData.geometry;
+//     const coordinates = geometry.coordinates;
+
+//     console.log(coordinates);
+
+//     routeInfoMap[transportationTypeKey] = {
+//         duration: this.secondsToMinutesHours(routeData.duration),
+//         distance: this.metersToMiles(routeData.distance),
+//         coordinates: coordinates
+//     }
+// })
\ No newline at end of file