1 files changed, 137 insertions, 0 deletions
diff --git a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
new file mode 100644
index 000000000..bf4028f01
--- /dev/null
+++ b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
@@ -0,0 +1,137 @@
+import React = require('react');
+import { observer } from "mobx-react";
+import { AntimodeMenu, AntimodeMenuProps } from "../../AntimodeMenu";
+import { IReactionDisposer, ObservableMap, reaction } from "mobx";
+import { Doc, Opt } from "../../../../fields/Doc";
+import { returnFalse, unimplementedFunction } from "../../../../Utils";
+import { NumCast, StrCast } from "../../../../fields/Types";
+import { SelectionManager } from "../../../util/SelectionManager";
+import { IconButton } from "browndash-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { SettingsManager } from "../../../util/SettingsManager";
+import { IconLookup, faAdd, faCalendarDays, faRoute } from "@fortawesome/free-solid-svg-icons";
+
+@observer
+export class DirectionsAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
+    static Instance: DirectionsAnchorMenu;
+
+    private _disposer: IReactionDisposer | undefined;
+
+    public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search
+
+    public Center: () => void = unimplementedFunction;
+    public OnClick: (e: PointerEvent) => void = unimplementedFunction;
+    // public OnAudio: (e: PointerEvent) => void = unimplementedFunction;
+    public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
+    public Highlight: (color: string, isTargetToggler: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => Opt<Doc> = (color: string, isTargetToggler: boolean) => undefined;
+    public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => undefined;
+    public Delete: () => void = unimplementedFunction;
+    // public MakeTargetToggle: () => void = unimplementedFunction;
+    // public ShowTargetTrail: () => void = unimplementedFunction;
+    public IsTargetToggler: () => boolean = returnFalse;
+
+    private title: string | undefined = undefined;
+
+    public setPinDoc(pinDoc: Doc){
+        this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`) ;
+        console.log("Title: ", this.title)
+    }
+
+    public get Active() {
+        return this._left > 0;
+    }
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+
+        DirectionsAnchorMenu.Instance = this;
+        DirectionsAnchorMenu.Instance._canFade = false;
+    }
+
+    componentWillUnmount() {
+        this._disposer?.();
+    }
+
+    componentDidMount() {
+        this._disposer = reaction(
+            () => SelectionManager.Views().slice(),
+            sel => DirectionsAnchorMenu.Instance.fadeOut(true)
+        );
+    }
+    // audioDown = (e: React.PointerEvent) => {
+    //     setupMoveUpEvents(this, e, returnFalse, returnFalse, e => this.OnAudio?.(e));
+    // };
+
+    // cropDown = (e: React.PointerEvent) => {
+    //     setupMoveUpEvents(
+    //         this,
+    //         e,
+    //         (e: PointerEvent) => {
+    //             this.StartCropDrag(e, this._commentCont.current!);
+    //             return true;
+    //         },
+    //         returnFalse,
+    //         e => this.OnCrop?.(e)
+    //     );
+    // };
+    // notePointerDown = (e: React.PointerEvent) => {
+    //     setupMoveUpEvent(
+    //         this,
+    //         e,
+    //         (e: PointerEvent) => {
+    //             this.StartDrag(e, this._commentRef.current!);
+    //             return true;
+    //         },
+    //         returnFalse,
+    //         e => this.OnClick(e)
+    //     );
+    // };
+
+    static top = React.createRef<HTMLDivElement>();
+
+    // public get Top(){
+    //     return this.top
+    // }
+
+    render() {
+        const buttons = (
+            <div className='directions-menu-buttons' style={{display: 'flex'}}>
+                <IconButton
+                    tooltip="Add route" //
+                    onPointerDown={this.Delete}
+                    icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
+                    color={SettingsManager.userColor}
+                />
+            
+            
+                <IconButton
+                    tooltip='Animate route'
+                    onPointerDown={this.Delete} /**TODO: fix */
+                    icon={<FontAwesomeIcon icon={faRoute 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>
+        )
+
+        return this.getElement(
+            <div ref={DirectionsAnchorMenu.top} style={{ height: 'max-content' , width: '100%', display: 'flex', flexDirection: 'column' }}>
+                <div>{this.title}</div>
+                <div className='direction-inputs' style={{display: 'flex', flexDirection: 'column'}}>
+                    <input
+                        placeholder="Origin"
+                    />
+                    <input
+                        placeholder="Destination"
+                    />
+                </div>
+                {buttons}
+            </div>
+        )
+    }
+}
+\ No newline at end of file