From bc23855777633dfd1caf7237b75c1e8fee88dff4 Mon Sep 17 00:00:00 2001
From: zaultavangar <zaul_tavangar@brown.edu>
Date: Mon, 11 Dec 2023 20:37:52 -0500
Subject: new updates to map feature

---
 src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 76 ++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 15 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 fca3998c8..2c2879900 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -32,6 +32,9 @@ import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/materi
 import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
 import { MapBox } from './MapBox';
 import { List } from '../../../../fields/List';
+import { MapboxColor, MarkerIcons } from './MarkerIcons';
+import { CirclePicker } from 'react-color';
+import { Position } from 'geojson';
 
 type MapAnchorMenuType = 'standard' | 'route' | 'calendar' | 'customize';
 
@@ -58,9 +61,13 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction;
     public HideRoute: () => void = unimplementedFunction;
-    public AddNewRouteToMap: (coordinates: List<any>, origin: string, destination: string) => void = unimplementedFunction;
+    public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: string) => void = unimplementedFunction;
     public CreatePin: (feature: any) => void = unimplementedFunction;
 
+    public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
+    public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
+
+    
 
     private allMapPinDocs: Doc[] = [];
 
@@ -151,11 +158,13 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     @action
     CustomizeClick = () => {
+        this.currentRouteInfoMap = undefined;
         this.menuType = 'customize';
     }
 
     @action
     BackClick = () => {
+        this.currentRouteInfoMap = undefined;
         this.menuType = 'standard';
     }
 
@@ -238,11 +247,26 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     HandleAddRouteClick = () => {
         if (this.currentRouteInfoMap && this.selectedTransportationType && this.selectedDestinationFeature){
             const coordinates = this.currentRouteInfoMap[this.selectedTransportationType].coordinates;
-            this.AddNewRouteToMap(this.currentRouteInfoMap![this.selectedTransportationType].coordinates, this.title ?? "", this.selectedDestinationFeature.place_name);
+            console.log(coordinates);
+            this.AddNewRouteToMap(coordinates, this.title ?? "", this.selectedDestinationFeature.place_name);
             this.HideRoute();
         }
     }
 
+    getMarkerIcon = (): JSX.Element | undefined => {
+        if (this.pinDoc){
+            const markerType = StrCast(this.pinDoc.markerType);
+            const markerColor = StrCast(this.pinDoc.markerColor);
+
+            if (markerType.startsWith("MAPBOX")){
+                return MarkerIcons.getMapboxIcon(markerColor as MapboxColor);
+            } else { // font awesome icon
+                return MarkerIcons.getFontAwesomeIcon(markerType, markerColor);
+            }
+        }
+        return undefined;
+    }
+
 
     render() {
         const buttons = (
@@ -325,19 +349,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
                             color={SettingsManager.userColor}
                         />
-                        <IconButton
-                            tooltip="Upload image" //
-                            onPointerDown={this.TriggerFileInputClick}
-                            icon={<FontAwesomeIcon icon={faUpload as IconLookup} />}
-                            color={SettingsManager.userColor}
-                        />
-                        <input
-                            type="file"
-                            accept="image/*" // Optionally, specify accepted file types
-                            ref={this._fileInputRef}
-                            style={{ display: "none" }}
-                            onChange={() => {}}
-                        />
                         <IconButton
                             tooltip="Revert to original" //
                             onPointerDown={this.BackClick}
@@ -468,6 +479,41 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     </div>
                     
 
+                }
+                {this.menuType === 'customize' && 
+                <div className='customized-marker-container'>
+                    <div className='current-marker-container'>
+                        <div>Current Marker: </div>
+                        <div>
+                            {this.getMarkerIcon()}
+                        </div>
+                    </div>
+                    <div className='color-picker-container' style={{marginBottom: '10px'}}>
+                        <CirclePicker
+                            circleSize={15}
+                            circleSpacing={7}
+                            width='100%'
+                            onChange={(color) => console.log(color.hex)}
+                        />
+                    </div>
+                    <div className='all-markers-container'>
+                         {Object.keys(MarkerIcons.FAMarkerIconsMap).map((iconKey) => {
+                            const icon = MarkerIcons.getFontAwesomeIcon(iconKey);
+                            if (icon){
+                                return (
+                                    <div key={iconKey} className='marker-icon'>
+                                        <IconButton
+                                            onPointerDown={() => {}}
+                                            icon={MarkerIcons.getFontAwesomeIcon(iconKey, 'white')}
+                                        />
+                                    </div>
+                                )
+                            }
+                            return null;
+                        })}
+                    </div>
+                    <div style={{width: '100%', height:'3px', color: 'white'}}></div>
+                </div>
                 }
                 {buttons}
             </div>
-- 
cgit v1.2.3-70-g09d2