From 53dfd5f380d8c75fedc967577fb16310d08cefea Mon Sep 17 00:00:00 2001
From: Aubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>
Date: Mon, 19 Jul 2021 11:57:22 -0700
Subject: map as node

---
 src/client/views/MainView.tsx                      |   6 +-
 .../collections/MapView/CollectionMapView.tsx      | 134 ++++++++++-----------
 src/client/views/nodes/DocumentContentsView.tsx    |   3 +-
 src/client/views/search/IconButton.tsx             |   1 +
 4 files changed, 73 insertions(+), 71 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4eeb1fc95..6be298085 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -169,7 +169,7 @@ export class MainView extends React.Component {
             fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
             fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
             fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines,
-            fa.faSave, fa.faBookmark);
+            fa.faSave, fa.faBookmark, fa.faMapMarkedAlt);
         this.initAuthenticationRouters();
     }
 
@@ -180,8 +180,8 @@ export class MainView extends React.Component {
             const targClass = targets[0].className.toString();
             if (SearchBox.Instance._searchbarOpen || SearchBox.Instance.open) {
                 const check = targets.some((thing) =>
-                    (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" ||
-                        thing.className === "collectionSchema-header-menuOptions"));
+                (thing.className === "collectionSchemaView-searchContainer" || (thing as any)?.dataset.icon === "filter" ||
+                    thing.className === "collectionSchema-header-menuOptions"));
                 !check && SearchBox.Instance.resetSearch(true);
             }
             !targClass.includes("contextMenu") && ContextMenu.Instance.closeMenu();
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index ebf57c0c1..290972364 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -52,7 +52,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
 
 
     @observable private _map = null as unknown as google.maps.Map;
-    @observable private selectedPlace: Doc = ;
+    @observable private selectedPlace: LocationData = null as any;
     @observable private markerMap = {};
     @observable private center = defaultCenter;
     @observable private zoom = 2.5;
@@ -114,7 +114,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
     }
 
     @action
-    private markerClickHandler = (e: MouseEvent, place: Doc) => {
+    private markerClickHandler = (e: MouseEvent, place: LocationData) => {
         // set which place was clicked
         this.selectedPlace = place
 
@@ -150,7 +150,7 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
 
     @action
     @undoBatch
-    private handleDragMarker = (marker: any, place: Doc) => {
+    private handleDragMarker = (marker: any, place: LocationData) => {
         // if (marker != null) {
         //     place = {
         //         id: place.id,
@@ -210,58 +210,58 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
         )
     }
 
-    @computed get markerContent() {
-        const allMarkers = this.childLayoutPairs
-        const markerId = NumCast(this.layoutDoc._itemIndex);
-        const selectedMarker = this.childLayoutPairs?.[markerId];
-        const position = {
-            lat: NumCast(this.layoutDoc.lat),
-            lng: NumCast(this.layoutDoc.lng)
-        }
-        return <>
-            {
-                allMarkers?.map(place => (
-                    <Marker
-                        key={markerId}
-                        position={position}
-                        onClick={e => this.markerClickHandler(e, place.layout)} //??
-                        draggable={true}
-                        onDragEnd={marker => this.handleDragMarker(marker, place.layout)}
-                    />
-                ))
-            }
-            {this.infoWindowOpen && selectedMarker && (
-                <InfoBox
-                    //anchor={selectedMarker}
-                    // onCloseClick={this.handleInfoWindowClose}
-                    position={position}
-                // options={{ enableEventPropagation: true }}
-                >
-                    <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
-                        <div style={{ fontSize: 16 }}>
-                            {/* the linkmenu as the ones in other nodes */}
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <a>a link to another node</a>
-                                <hr />
-                            </div>
-                            <div>
-                                <button>New +</button>
-                            </div>
-                        </div>
-                    </div>
-                </InfoBox>
-            )}
-
-        </>
-    }
+    // @computed get markerContent() {
+    //     const allMarkers = this.childLayoutPairs
+    //     const markerId = NumCast(this.layoutDoc._itemIndex);
+    //     const selectedMarker = this.childLayoutPairs?.[markerId];
+    //     const position = {
+    //         lat: NumCast(this.layoutDoc.lat),
+    //         lng: NumCast(this.layoutDoc.lng)
+    //     }
+    //     return <>
+    //         {
+    //             allMarkers?.map(place => (
+    //                 <Marker
+    //                     key={markerId}
+    //                     position={position}
+    //                     onClick={e => this.markerClickHandler(e, place.layout)} //??
+    //                     draggable={true}
+    //                     onDragEnd={marker => this.handleDragMarker(marker, place.layout)}
+    //                 />
+    //             ))
+    //         }
+    //         {this.infoWindowOpen && selectedMarker && (
+    //             <InfoBox
+    //                 //anchor={selectedMarker}
+    //                 // onCloseClick={this.handleInfoWindowClose}
+    //                 position={position}
+    //             // options={{ enableEventPropagation: true }}
+    //             >
+    //                 <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
+    //                     <div style={{ fontSize: 16 }}>
+    //                         {/* the linkmenu as the ones in other nodes */}
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <a>a link to another node</a>
+    //                             <hr />
+    //                         </div>
+    //                         <div>
+    //                             <button>New +</button>
+    //                         </div>
+    //                     </div>
+    //                 </div>
+    //             </InfoBox>
+    //         )}
+
+    //     </>
+    // }
 
     @action
     private addMarker = (location: google.maps.LatLng | undefined, map: google.maps.Map) => {
@@ -271,18 +271,18 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Part
         });
     }
 
-    @action
-    private renderMarkerToMap = (marker: Doc) => {
-        const id = StrCast(marker.id);
-        const lat = NumCast(marker.lat);
-        const lng = NumCast(marker.lng);
-
-        return <Marker
-            key={id}
-            position={{ lat: lat, lng: lng }}
-            onClick={e => this.markerClickHandler(e, marker)}
-        />
-    }
+    // @action
+    // private renderMarkerToMap = (marker: Doc) => {
+    //     const id = StrCast(marker.id);
+    //     const lat = NumCast(marker.lat);
+    //     const lng = NumCast(marker.lng);
+
+    //     return <Marker
+    //         key={id}
+    //         position={{ lat: lat, lng: lng }}
+    //         onClick={e => this.markerClickHandler(e, marker)}
+    //     />
+    // }
 
     render() {
         const { Document, fieldKey, isContentActive: active } = this.props;
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index f0a54e4ac..388e6aafe 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -40,6 +40,7 @@ import { VideoBox } from "./VideoBox";
 import { WebBox } from "./WebBox";
 import React = require("react");
 import XRegExp = require("xregexp");
+import { MapBox } from "./MapBox/MapBox";
 
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -224,7 +225,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
                     FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, EquationBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox, FunctionPlotBox,
-                    ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, LinkBox, ScriptingBox,
+                    ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, LinkBox, ScriptingBox, MapBox,
                     ScreenshotBox,
                     HTMLtag, ComparisonBox
                 }}
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 349690b20..5d9c51915 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -70,6 +70,7 @@ export class IconButton extends React.Component<IconButtonProps>{
             case (DocumentType.RTF): return "sticky-note";
             case (DocumentType.VID): return "video";
             case (DocumentType.WEB): return "globe-asia";
+            case (DocumentType.MAP): return "map-marker-alt";
             default: return "caret-down";
         }
     }
-- 
cgit v1.2.3-70-g09d2