From b2d824b412e6bbf9b4867ed13f49a433af7c26c7 Mon Sep 17 00:00:00 2001
From: zaultavangar <zaul_tavangar@brown.edu>
Date: Sun, 17 Dec 2023 22:33:08 -0500
Subject: fixing some bugs with MapBox and MapAnchorMenu

---
 src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 236 ++++++++++++++++--------
 1 file changed, 159 insertions(+), 77 deletions(-)

(limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')

diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index b1fb3368c..1b1b74e7c 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -20,6 +20,7 @@ import { List } from '../../../../fields/List';
 import { MarkerIcons } from './MarkerIcons';
 import { CirclePicker, ColorResult } from 'react-color';
 import { Position } from 'geojson';
+import { CalendarManager } from '../../../util/CalendarManager';
 
 type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
 
@@ -45,13 +46,15 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     public IsTargetToggler: () => boolean = returnFalse;
 
     public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction;
-    public HideRoute: () => void = unimplementedFunction;
     public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction;
     public CreatePin: (feature: any) => void = unimplementedFunction;
 
     public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
     public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
 
+
+    public Hide: () => void = unimplementedFunction;
+
     public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction;
 
     @observable
@@ -70,14 +73,31 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     private title: string | undefined = undefined;
 
-    public setPinDoc(pinDoc: Doc) {
-        this.pinDoc = pinDoc;
-        this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
+    public setPinDoc(pinDoc: Doc | undefined) {
+        if (pinDoc){
+            this.pinDoc = pinDoc;
+            this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
+        }
+        
     }
 
-    public setRouteDoc(routeDoc: Doc) {
-        this.routeDoc = routeDoc;
-        this.title = StrCast(routeDoc.title ?? 'Map route');
+    public setRouteDoc(routeDoc: Doc | undefined) {
+        if (routeDoc){
+            this.routeDoc = routeDoc;
+            this.title = StrCast(routeDoc.title ?? 'Map route');
+        }
+    }
+
+    @action
+    public Reset(){
+        this.destinationSelected = false;
+        this.currentRouteInfoMap = undefined;
+        this.destinationFeatures = [];
+        this.selectedDestinationFeature = undefined;
+        this.allMapPinDocs = [];
+        this.title = undefined;
+        this.routeDoc = undefined;
+        this.pinDoc = undefined;
     }
 
     public setAllMapboxPins(pinDocs: Doc[]) {
@@ -263,7 +283,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             console.log(coordinates);
             console.log(this.selectedDestinationFeature);
             this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination);
-            this.HideRoute();
         }
     };
 
@@ -277,86 +296,155 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         return undefined;
     };
 
+    getDirectionsButton: JSX.Element = (
+        <IconButton 
+            tooltip="Get directions" 
+            onPointerDown={this.DirectionsClick}
+            icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} 
+            color={SettingsManager.userColor} />
+    )
+
+    getAddToCalendarButton = (docType: string): JSX.Element => {
+        return (
+            <IconButton 
+            tooltip="Add to calendar" 
+            onPointerDown={() => {
+                CalendarManager.Instance.open(undefined, docType === 'pin' ? this.pinDoc : this.routeDoc)
+            }} 
+            icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} 
+            color={SettingsManager.userColor} 
+            />
+        )
+       
+    }
+    addToCalendarButton: JSX.Element = (
+        <IconButton 
+            tooltip="Add to calendar" 
+            onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)} 
+            icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} 
+            color={SettingsManager.userColor} />
+    )
+
+    getLinkNoteToDocButton = (docType: string): JSX.Element => {
+        return (
+            <div ref={this._commentRef}>
+                <IconButton
+                    tooltip={`Link Note to ${docType === 'pin' ? 'Pin' : 'Route'}`} //
+                    onPointerDown={this.notePointerDown}
+                    icon={<FontAwesomeIcon icon="sticky-note" />}
+                    color={SettingsManager.userColor}
+                />
+            </div>
+        )
+    }
+
+    linkNoteToPinOrRoutenButton: JSX.Element = (
+        <div ref={this._commentRef}>
+            <IconButton
+                tooltip="Link Note to Pin" //
+                onPointerDown={this.notePointerDown}
+                icon={<FontAwesomeIcon icon="sticky-note" />}
+                color={SettingsManager.userColor}
+            />
+        </div>
+    )
+
+    customizePinButton: JSX.Element = (
+        <IconButton 
+            tooltip="Customize pin" 
+            onPointerDown={this.CustomizeClick} 
+            icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} 
+            color={SettingsManager.userColor} 
+        />
+    )
+
+    centerOnPinButton: JSX.Element = (
+        <IconButton
+            tooltip="Center on pin" //
+            onPointerDown={this.Center}
+            icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
+            color={SettingsManager.userColor}
+        />
+    )
+
+    backButton: JSX.Element = (
+        <IconButton
+            tooltip="Go back" //
+            onPointerDown={this.BackClick}
+            icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
+            color={SettingsManager.userColor}
+        />
+    )
+
+    addRouteButton: JSX.Element = (
+        <IconButton
+            tooltip="Add route" //
+            onPointerDown={this.HandleAddRouteClick}
+            icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
+            color={SettingsManager.userColor}
+        />
+    )
+
+    getDeleteButton = (type: string) => {
+        return (
+            <IconButton
+                tooltip={`Delete ${type === 'pin' ? 'Pin' : 'Route'}`} //
+                onPointerDown={this.Delete}
+                icon={<FontAwesomeIcon icon="trash-alt" />}
+                color={SettingsManager.userColor}
+            />
+        )
+    }
+
+    animateRouteButton: JSX.Element = (
+        <IconButton 
+            tooltip="Animate route" 
+            onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} 
+            icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} 
+            color={SettingsManager.userColor} 
+        />
+    )
+
+    revertToOriginalMarkerButton = (
+        <IconButton
+            tooltip="Revert to original" //
+            onPointerDown={() => this.revertToOriginalMarker()}
+            icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
+            color={SettingsManager.userColor}
+        />
+    )
+
     render() {
         const buttons = (
             <div className="menu-buttons" style={{ display: 'flex' }}>
                 {this.menuType === 'standard' && (
                     <>
-                        <IconButton
-                            tooltip="Delete Pin" //
-                            onPointerDown={this.Delete}
-                            icon={<FontAwesomeIcon icon="trash-alt" />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} /**TODO: fix */ icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />
-                        <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
-                        <div ref={this._commentRef}>
-                            <IconButton
-                                tooltip="Link Note to Pin" //
-                                onPointerDown={this.notePointerDown}
-                                icon={<FontAwesomeIcon icon="sticky-note" />}
-                                color={SettingsManager.userColor}
-                            />
-                        </div>
-                        <IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />
-                        <IconButton
-                            tooltip="Center on pin" //
-                            onPointerDown={this.Center}
-                            icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
-                            color={SettingsManager.userColor}
-                        />
+                        {this.getDeleteButton('pin')}
+                        {this.getDirectionsButton}
+                        {this.getAddToCalendarButton('pin')}
+                        {this.getLinkNoteToDocButton('pin')}
+                        {this.customizePinButton}
+                        {this.centerOnPinButton}
                     </>
                 )}
                 {this.menuType === 'routeCreation' && (
                     <>
-                        <IconButton
-                            tooltip="Go back" //
-                            onPointerDown={this.BackClick}
-                            icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton
-                            tooltip="Add route" //
-                            onPointerDown={this.HandleAddRouteClick}
-                            icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
+                        {this.backButton}
+                        {this.addRouteButton}
                     </>
                 )}
                 {this.menuType === 'route' && (
                     <>
-                        <IconButton
-                            tooltip="Delete Route" //
-                            onPointerDown={this.Delete}
-                            icon={<FontAwesomeIcon icon="trash-alt" />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} /**TODO: fix */ icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />
-                        <div ref={this._commentRef}>
-                            <IconButton
-                                tooltip="Link Note to Pin" //
-                                onPointerDown={this.notePointerDown}
-                                icon={<FontAwesomeIcon icon="sticky-note" />}
-                                color={SettingsManager.userColor}
-                            />
-                        </div>
-                        <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
+                        {this.getDeleteButton('route')}
+                        {this.animateRouteButton}
+                        {this.getAddToCalendarButton('route')}
+                        {this.getLinkNoteToDocButton('route')}
                     </>
                 )}
                 {this.menuType === 'customize' && (
                     <>
-                        <IconButton
-                            tooltip="Go back" //
-                            onPointerDown={this.BackClick}
-                            icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
-                        <IconButton
-                            tooltip="Revert to original" //
-                            onPointerDown={() => this.revertToOriginalMarker()}
-                            icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
+                        {this.backButton}
+                        {this.revertToOriginalMarkerButton}
                     </>
                 )}
 
@@ -373,12 +461,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     )} */}
             </div>
         );
-        // return (
-        //     <div ref={MapAnchorMenu.top} style={{zIndex: 30000, width: '100%', height: '100px'}}>
-        //         HELLO THIS IS ANCHOR MENU
-        //         {this.getElement(buttons)}
-        //     </div>
-        // )
 
         return this.getElement(
             <div ref={MapAnchorMenu.top} className="map-anchor-menu-container">
-- 
cgit v1.2.3-70-g09d2