diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 52 |
1 files changed, 25 insertions, 27 deletions
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index 103a35434..8079d96ea 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -1,9 +1,7 @@ -/* eslint-disable react/button-has-type */ import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material'; -import { IconButton } from 'browndash-components'; -import { Position } from 'geojson'; +import { IconButton } from '@dash/components'; import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -19,6 +17,8 @@ import { DocumentView } from '../DocumentView'; import './MapAnchorMenu.scss'; import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; import { MarkerIcons } from './MarkerIcons'; +import { LngLatLike } from 'mapbox-gl'; +import { Position } from './AnimationUtility'; // import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route'; @@ -44,10 +44,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { // public MakeTargetToggle: () => void = unimplementedFunction; // public ShowTargetTrail: () => void = unimplementedFunction; public IsTargetToggler: () => boolean = returnFalse; - - public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction; - public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction; - public CreatePin: (feature: any) => void = unimplementedFunction; + public DisplayRoute: (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => void = unimplementedFunction; + public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => void = unimplementedFunction; + public CreatePin: (feature: { place_name: string; center: LngLatLike; properties: { wikiData: unknown } }) => void = unimplementedFunction; public UpdateMarkerColor: (color: string) => void = unimplementedFunction; public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction; @@ -109,7 +108,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { return this._left > 0; } - constructor(props: any) { + constructor(props: AntimodeMenuProps) { super(props); makeObservable(this); MapAnchorMenu.Instance = this; @@ -117,10 +116,12 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } componentWillUnmount() { - this.destinationFeatures = []; - this.destinationSelected = false; - this.selectedDestinationFeature = undefined; - this.currentRouteInfoMap = undefined; + runInAction(() => { + this.destinationFeatures = []; + this.destinationSelected = false; + this.selectedDestinationFeature = undefined; + this.currentRouteInfoMap = undefined; + }); this._disposer?.(); } @@ -210,19 +211,19 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { }; @observable - destinationFeatures: any[] = []; + destinationFeatures: { place_name: string; center: number[] }[] = []; @observable destinationSelected: boolean = false; @observable - selectedDestinationFeature: any = undefined; + selectedDestinationFeature?: { place_name: string; center: number[] } = undefined; @observable createPinForDestination: boolean = true; @observable - currentRouteInfoMap: Record<TransportationType, any> | undefined = undefined; + currentRouteInfoMap: Record<TransportationType, { coordinates: Position[]; duration: number; distance: number }> | undefined = undefined; @observable selectedTransportationType: TransportationType = 'driving'; @@ -236,7 +237,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { }; @action - handleSelectedDestinationFeature = (destinationFeature: any) => { + handleSelectedDestinationFeature = (destinationFeature?: { place_name: string; center: number[] }) => { this.selectedDestinationFeature = destinationFeature; }; @@ -256,7 +257,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } }; - getRoutes = async (destinationFeature: any) => { + getRoutes = async (destinationFeature: { center: number[] }) => { const currentPinLong: number = NumCast(this.pinDoc?.longitude); const currentPinLat: number = NumCast(this.pinDoc?.latitude); @@ -278,8 +279,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { HandleAddRouteClick = () => { if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature) { const { coordinates } = this.currentRouteInfoMap[this.selectedTransportationType]; - console.log(coordinates); - console.log(this.selectedDestinationFeature); this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination); } }; @@ -439,27 +438,26 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> { <Autocomplete fullWidth id="route-destination-searcher" - onInputChange={(e: any, searchText: any) => this.handleDestinationSearchChange(searchText)} - onChange={(e: any, feature: any, reason: any) => { + onInputChange={(e, searchText) => this.handleDestinationSearchChange(searchText)} + onChange={(e, feature: unknown, reason: unknown) => { if (reason === 'clear') { this.handleSelectedDestinationFeature(undefined); } else if (reason === 'selectOption') { - this.handleSelectedDestinationFeature(feature); + this.handleSelectedDestinationFeature(feature as { place_name: string; center: number[] }); } }} options={this.destinationFeatures.filter(feature => feature.place_name).map(feature => feature)} - getOptionLabel={(feature: any) => feature.place_name} - // eslint-disable-next-line react/jsx-props-no-spreading - renderInput={(params: any) => <TextField {...params} placeholder="Enter a destination" />} + getOptionLabel={(feature: unknown) => (feature as { place_name: string }).place_name} + renderInput={params => <TextField {...params} placeholder="Enter a destination" />} /> {!this.selectedDestinationFeature ? null - : !this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature.place_name) && ( + : !this.allMapPinDocs.some(pinDoc => pinDoc.title === this.selectedDestinationFeature?.place_name) && ( <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px' }}> <FormControlLabel label="Create pin for destination?" control={<Checkbox color="success" checked={this.createPinForDestination} onChange={this.toggleCreatePinForDestinationCheckbox} />} /> </div> )} - <button id="get-routes-button" disabled={!this.selectedDestinationFeature} onClick={() => this.getRoutes(this.selectedDestinationFeature)}> + <button id="get-routes-button" disabled={!this.selectedDestinationFeature} onClick={() => this.selectedDestinationFeature && this.getRoutes(this.selectedDestinationFeature)}> Get routes </button> |