diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 236 |
1 files changed, 159 insertions, 77 deletions
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"> |