aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/DocumentButtonBar.tsx21
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/nodes/MapBox/MapBox.scss3
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx42
-rw-r--r--src/client/views/nodes/MapBox/MapboxApiUtility.ts98
5 files changed, 116 insertions, 50 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index bd82f7782..ccd459f0d 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -1,4 +1,4 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable, runInAction } from 'mobx';
@@ -14,6 +14,7 @@ import { DragManager } from '../util/DragManager';
import { IsFollowLinkScript } from '../util/LinkFollower';
import { SelectionManager } from '../util/SelectionManager';
import { SharingManager } from '../util/SharingManager';
+import { CalendarManager } from '../util/CalendarManager';
import { undoBatch, UndoManager } from '../util/UndoManager';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { TabDocView } from './collections/TabDocView';
@@ -28,6 +29,8 @@ import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
import { PinProps } from './nodes/trails';
import { TemplateMenu } from './TemplateMenu';
import React = require('react');
+import { faCalendarDays } from '@fortawesome/free-solid-svg-icons';
+
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -443,6 +446,21 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
);
}
+ @computed
+ get calendarButton(){
+ const targetDoc = this.view0?.props.Document;
+ return !targetDoc ? null : (
+ <Tooltip title={<div className='dash-calendar-button'>Open calendar menu</div>}>
+ <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={e => {
+ console.log('hi: ', CalendarManager.Instance)
+ CalendarManager.Instance.open(this.view0, targetDoc)}
+ }>
+ <FontAwesomeIcon className="documentdecorations-icon" icon={faCalendarDays as IconLookup}/>
+ </div>
+ </Tooltip>
+ )
+ }
+
@observable _isRecording = false;
_stopFunc: () => void = emptyFunction;
@computed
@@ -606,6 +624,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{!SelectionManager.Views()?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>}
<div className="documentButtonBar-button">{this.pinButton}</div>
<div className="documentButtonBar-button">{this.recordButton}</div>
+ <div className="documentButtonBar-button">{this.calendarButton}</div>
{!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
{!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : (
<div className="documentButtonBar-button" style={{ display: !considerPush() ? 'none' : '' }}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 13f7dc896..d45f24930 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -72,6 +72,7 @@ import { PropertiesView } from './PropertiesView';
import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
import { TopBar } from './topbar/TopBar';
import { DirectionsAnchorMenu } from './nodes/MapBox/DirectionsAnchorMenu';
+import { CalendarManager } from '../util/CalendarManager';
const _global = (window /* browser */ || global) /* node */ as any;
@observer
@@ -1038,6 +1039,7 @@ export class MainView extends React.Component {
{this.inkResources}
<DictationOverlay />
<SharingManager />
+ <CalendarManager />
<ServerStats />
<RTFMarkup />
<SettingsManager />
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index e25261729..ba1e99f84 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -88,12 +88,11 @@
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
- position: absolute;
background-color: rgb(187, 187, 187);
padding: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
- width: 100%;
+ position: absolute;
#route-to-animate-title {
font-size: 1.25em;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index f4526c490..25299532a 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -895,19 +895,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}, 'createpin');
@action
- createMapRoute = undoable((coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => {
- const mapRoute = Docs.Create.MapRouteDocument(
- false,
- [],
- {title: `${origin} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates)},
- );
- this.addDocument(mapRoute, this.annotationKey);
- if (createPinForDestination) {
- this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
+ createMapRoute = undoable((coordinates: Position[], originName: string, destination: any, createPinForDestination: boolean) => {
+ if (originName !== destination.place_name){
+ const mapRoute = Docs.Create.MapRouteDocument(
+ false,
+ [],
+ {title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates)},
+ );
+ this.addDocument(mapRoute, this.annotationKey);
+ if (createPinForDestination) {
+ this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
+ }
+ return mapRoute;
}
- return mapRoute;
-
- // mapMarker.infoWindowOpen = true;
+ // TODO: Display error that can't create route to same location
+
}, 'createmaproute');
searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
@@ -981,6 +983,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
handleMapClick = (e: MapLayerMouseEvent) => {
+ this.featuresFromGeocodeResults = [];
if (this._mapRef.current){
const features = this._mapRef.current.queryRenderedFeatures(
e.point, {
@@ -1179,6 +1182,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
if (routeDoc){
MapAnchorMenu.Instance.fadeOut(true);
document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
+ this.featuresFromGeocodeResults = [];
this.routeToAnimate = routeDoc;
}
}
@@ -1675,6 +1679,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}), MapBox._rerenderDelay);
return null;
}
+ const scale = this.props.NativeDimScaling?.() || 1;
const renderAnnotations = (childFilters?: () => string[]) => null;
return (
@@ -1686,11 +1691,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
e.button === 0 && !e.ctrlKey && e.stopPropagation();
}}
style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+ {/* style={{ transformOrigin: "top left", transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> */}
<div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
{renderAnnotations(this.opaqueFilter)}
{SnappingManager.GetIsDragging() ? null : renderAnnotations()}
{!this.routeToAnimate &&
- <div className="mapBox-searchbar">
+ <div className="mapBox-searchbar" style={{ zIndex: 1, position: 'relative', background: 'lightGray' }}>
<TextField
fullWidth
placeholder='Enter a location'
@@ -1755,7 +1761,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
</div>
}
{this.routeToAnimate &&
- <div className='animation-panel'>
+ <div className='animation-panel' style={{width: this.sidebarWidth() === 0 ? '100%' : `calc(100% - ${this.sidebarWidth()}px)`}}>
<div id='route-to-animate-title'>
{StrCast(this.routeToAnimate.title)}
</div>
@@ -1809,7 +1815,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
id="mapbox-map"
mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
- style={{height: NumCast(this.layoutDoc._height), width: NumCast(this.layoutDoc._width)}}
+ style={{
+ transformOrigin: 'center',
+ transform: `scale(${scale < 1 ? 1 : scale})`,
+ zIndex: '0',
+ width: '100%',
+ height: '100%',
+ }}
initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
onMove={this.onMapMove}
onClick={this.handleMapClick}
diff --git a/src/client/views/nodes/MapBox/MapboxApiUtility.ts b/src/client/views/nodes/MapBox/MapboxApiUtility.ts
index 011b6f72a..592330ac2 100644
--- a/src/client/views/nodes/MapBox/MapboxApiUtility.ts
+++ b/src/client/views/nodes/MapBox/MapboxApiUtility.ts
@@ -34,48 +34,39 @@ export class MapboxApiUtility {
static getDirections = async (origin: number[], destination: number[]): Promise<Record<TransportationType, any> | undefined> => {
try {
- const drivingQuery = await fetch(
- `${MAPBOX_DIRECTIONS_BASE_URL}/driving/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
- const cyclingQuery = await fetch(
- `${MAPBOX_DIRECTIONS_BASE_URL}/cycling/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+ const directionsPromises: Promise<any>[] = [];
+ const transportationTypes: TransportationType[] = ['driving', 'cycling', 'walking'];
- const walkingQuery = await fetch(
- `${MAPBOX_DIRECTIONS_BASE_URL}/walking/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+ transportationTypes.forEach((type) => {
+ directionsPromises.push(
+ fetch(
+ `${MAPBOX_DIRECTIONS_BASE_URL}/${type}/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`
+ ).then((response) => response.json())
+ );
+ });
- const drivingJson = await drivingQuery.json();
- const cyclingJson = await cyclingQuery.json();
- const walkingJson = await walkingQuery.json();
-
- console.log("Driving: ", drivingJson);
- console.log("Cycling: ", cyclingJson);
- console.log("Waling: ", walkingJson);
-
- const routeMap = {
- 'driving': drivingJson.routes[0],
- 'cycling': cyclingJson.routes[0],
- 'walking': walkingJson.routes[0]
- }
+ const results = await Promise.all(directionsPromises);
const routeInfoMap: Record<TransportationType, any> = {
'driving': {},
'cycling': {},
'walking': {},
- };
-
- Object.entries(routeMap).forEach(([key, routeData]) => {
- const transportationTypeKey = key as TransportationType;
- const geometry = routeData.geometry;
- const coordinates = geometry.coordinates;
-
- console.log(coordinates);
-
- routeInfoMap[transportationTypeKey] = {
+ };
+
+ transportationTypes.forEach((type, index) => {
+ const routeData = results[index].routes[0];
+ if (routeData) {
+ const geometry = routeData.geometry;
+ const coordinates = geometry.coordinates;
+
+ routeInfoMap[type] = {
duration: this.secondsToMinutesHours(routeData.duration),
distance: this.metersToMiles(routeData.distance),
- coordinates: coordinates
+ coordinates: coordinates,
+ };
}
- })
+ });
return routeInfoMap;
@@ -102,4 +93,47 @@ export class MapboxApiUtility {
return `${parseFloat((meters/1609.34).toFixed(2))} mi`;
}
-} \ No newline at end of file
+}
+
+// const drivingQuery = await fetch(
+// `${MAPBOX_DIRECTIONS_BASE_URL}/driving/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+
+// const cyclingQuery = await fetch(
+// `${MAPBOX_DIRECTIONS_BASE_URL}/cycling/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+
+// const walkingQuery = await fetch(
+// `${MAPBOX_DIRECTIONS_BASE_URL}/walking/${origin[0]},${origin[1]};${destination[0]},${destination[1]}?steps=true&geometries=geojson&access_token=${MAPBOX_ACCESS_TOKEN}`);
+
+// const drivingJson = await drivingQuery.json();
+// const cyclingJson = await cyclingQuery.json();
+// const walkingJson = await walkingQuery.json();
+
+// console.log("Driving: ", drivingJson);
+// console.log("Cycling: ", cyclingJson);
+// console.log("Waling: ", walkingJson);
+
+// const routeMap = {
+// 'driving': drivingJson.routes[0],
+// 'cycling': cyclingJson.routes[0],
+// 'walking': walkingJson.routes[0]
+// }
+
+// const routeInfoMap: Record<TransportationType, any> = {
+// 'driving': {},
+// 'cycling': {},
+// 'walking': {},
+// };
+
+// Object.entries(routeMap).forEach(([key, routeData]) => {
+// const transportationTypeKey = key as TransportationType;
+// const geometry = routeData.geometry;
+// const coordinates = geometry.coordinates;
+
+// console.log(coordinates);
+
+// routeInfoMap[transportationTypeKey] = {
+// duration: this.secondsToMinutesHours(routeData.duration),
+// distance: this.metersToMiles(routeData.distance),
+// coordinates: coordinates
+// }
+// }) \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-29 21:55:10 +0000