From e39665be22ecee11b093db07ebe72896a6d43a8c Mon Sep 17 00:00:00 2001 From: zaultavangar Date: Sun, 17 Dec 2023 15:59:39 -0500 Subject: starting calendar collection view --- src/client/documents/DocumentTypes.ts | 2 +- src/client/documents/Documents.ts | 12 +++- src/client/util/CalendarManager.scss | 18 ++--- src/client/util/CalendarManager.tsx | 82 +++++++++++++++++----- src/client/util/CurrentUserUtils.ts | 2 +- .../views/collections/CollectionCalendarView.tsx | 32 +++++++++ src/client/views/collections/CollectionView.tsx | 3 + src/client/views/nodes/DocumentContentsView.tsx | 2 + src/client/views/nodes/MapBox/MapBox.tsx | 18 +++-- src/client/views/nodes/calendarBox/CalendarBox.tsx | 26 +++++++ 10 files changed, 157 insertions(+), 40 deletions(-) create mode 100644 src/client/views/collections/CollectionCalendarView.tsx create mode 100644 src/client/views/nodes/calendarBox/CalendarBox.tsx (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 5c2792a53..1123bcac9 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -62,5 +62,5 @@ export enum CollectionViewType { Pile = 'pileup', StackedTimeline = 'stacked timeline', NoteTaking = 'notetaking', - Calendar = 'calendar_view' + Calendar = 'calendar' } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index d6fd8aea3..ff14eb101 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -58,6 +58,7 @@ import { VideoBox } from '../views/nodes/VideoBox'; import { WebBox } from '../views/nodes/WebBox'; import { SearchBox } from '../views/search/SearchBox'; import { CollectionViewType, DocumentType } from './DocumentTypes'; +import { CalendarBox } from '../views/nodes/calendarBox/CalendarBox'; const { default: { DFLT_IMAGE_NATIVE_DIM }, } = require('../views/global/globalCssVariables.module.scss'); @@ -784,6 +785,13 @@ export namespace Docs { options: {}, }, ], + [ + DocumentType.CALENDAR, + { + layout: { view: CalendarBox, dataField: defaultDataKey }, + options: {}, + } + ] ]); const suffix = 'Proto'; @@ -1146,8 +1154,8 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.MAPROUTE), new List(documents), { infoWindowOpen, ...options }, id); } - export function CalendarDocument(options: DocumentOptions={}, documents: Array){ - return InstanceFromProto(Prototypes.get(DocumentType.CALENDAR), new List(documents), options) + export function CalendarDocument(options: DocumentOptions, documents: Array){ + return InstanceFromProto(Prototypes.get(DocumentType.CALENDAR), new List(documents), {...options}) } // shouldn't ever need to create a KVP document-- instead set the LayoutTemplateString to be a KeyValueBox for the DocumentView (see addDocTab in TabDocView) diff --git a/src/client/util/CalendarManager.scss b/src/client/util/CalendarManager.scss index 60610f298..114e19a0e 100644 --- a/src/client/util/CalendarManager.scss +++ b/src/client/util/CalendarManager.scss @@ -31,19 +31,20 @@ margin-top: 10px; align-self: center; width: 60%; + } - .MuiFilledInput-input{ - padding: 10px; - } + .description-container{ + margin-top: 10px; + align-self: center; + width: 60%; } .date-range-picker-container{ margin-top: 5px; - align-self:center; - - .react-date-range{ - - } + align-self: center; + display: flex; + flex-direction: column; + gap: 2px; } .create-button-container{ @@ -57,6 +58,5 @@ border-radius: 5px; background-color: #EFF2F7; } - } } diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index 3872294db..d5d4203b1 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -10,16 +10,16 @@ import { MainViewModal } from '../views/MainViewModal'; import { TextField } from '@mui/material'; import Select from 'react-select'; import { SettingsManager } from './SettingsManager'; -import { DocCast, StrCast } from '../../fields/Types'; +import { DateCast, DocCast, StrCast } from '../../fields/Types'; import { SelectionManager } from './SelectionManager'; import { DocumentManager } from './DocumentManager'; import { DocData } from '../../fields/DocSymbols'; // import { DateRange, Range, RangeKeyDict } from 'react-date-range'; import { Button } from 'browndash-components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Provider, useProvider, defaultTheme } from '@adobe/react-spectrum'; - -import { DateRangePicker } from '@adobe/react-spectrum'; +import { Provider, defaultTheme } from '@adobe/react-spectrum'; +import { DateValue } from '@internationalized/date'; +import { DateRangePicker, SpectrumDateRangePickerProps } from '@adobe/react-spectrum'; import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons'; import { Docs } from '../documents/Documents'; import { ObservableReactComponent } from '../views/ObservableReactComponent'; @@ -33,7 +33,10 @@ interface CalendarSelectOptions { value: string; } -const formatDateToString = (date: Date) => { +const formatCalendarDateToString = (calendarDate: any) => { + console.log("Formatting the following date: ", calendarDate); + const date = new Date(calendarDate.year, calendarDate.month-1, calendarDate.day) + console.log(typeof date); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); @@ -121,19 +124,26 @@ export class CalendarManager extends ObservableReactComponent<{}> { }; @action - handleTextFieldChange = (event: React.ChangeEvent) => { + handleCalendarTitleChange = (event: React.ChangeEvent) => { this.calendarName = event.target.value; }; + @action + handleCalendarDescriptionChange = (event: React.ChangeEvent) => { + this.calendarDescription = event.target.value; + } + // TODO: Make undoable private addToCalendar = () => { let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); const targetDoc = this.layoutDocAcls ? docs[0] : docs[0]?.[DocData]; // doc to add to calendar + console.log(targetDoc); if (targetDoc) { let calendar: Doc; if (this.creationType === 'new-calendar') { if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)) { + console.log('creating...') calendar = Docs.Create.CalendarDocument( { title: this.calendarName, @@ -141,6 +151,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { }, [] ); + console.log('successful calendar creation') } else { this.errorMessage = 'Calendar with this name already exists'; return; @@ -155,15 +166,20 @@ export class CalendarManager extends ObservableReactComponent<{}> { } } // Get start and end date strings - const startDateStr = formatDateToString(this.selectedDateRange.start); - const endDateStr = formatDateToString(this.selectedDateRange.end); + const startDateStr = formatCalendarDateToString(this.selectedDateRange.start); + const endDateStr = formatCalendarDateToString(this.selectedDateRange.end); + + console.log("start date: ", startDateStr); + console.log("end date: ", endDateStr) const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding + console.log("subdoc embedding", subDocEmbedding); subDocEmbedding.embedContainer = calendar; // set embed container subDocEmbedding.date_range = `${startDateStr}-${endDateStr}`; // set subDoc date range Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar + console.log("my calendars: ", Doc.MyCalendars); if (this.creationType === 'new-calendar') { Doc.AddDocToList(Doc.MyCalendars, 'data', calendar); // add to new calendar to dashboard calendars } @@ -211,6 +227,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { @action setSelectedDateRange = (range: any) => { + console.log("Range: ", range); this.selectedDateRange = range; }; @@ -220,9 +237,12 @@ export class CalendarManager extends ObservableReactComponent<{}> { let startDate: Date | undefined; let endDate: Date | undefined; try { - startDate = this.selectedDateRange[0].startDate; - endDate = this.selectedDateRange[0].endDate; + startDate = this.selectedDateRange.start; + endDate = this.selectedDateRange.end; + console.log(startDate); + console.log(endDate) } catch (e: any) { + console.log(e); return false; // disabled } if (!startDate || !endDate) return false; // disabled if any is undefined @@ -258,8 +278,9 @@ export class CalendarManager extends ObservableReactComponent<{}> { {this.creationType === 'new-calendar' ? ( { }}> )} +
+ +
+
Select a date range:
- this.setSelectedDateRange(v)} label="Date range" /> + this.setSelectedDateRange(v)}/>
-
-
+ {this.createButtonActive && +
+
+ + } + ); } @@ -313,4 +361,4 @@ export class CalendarManager extends ObservableReactComponent<{}> { render() { return ; } -} +} \ No newline at end of file diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 61a9fa7c2..f7070a862 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1022,4 +1022,4 @@ ScriptingGlobals.add(function IsExploreMode() { return DocumentView.ExploreMode; ScriptingGlobals.add(function IsNoviceMode() { return Doc.noviceMode; }, "is Dash in novice mode"); ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, "switches between comic and normal document rendering"); ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar"); -ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; }); +ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; }); \ No newline at end of file diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx new file mode 100644 index 000000000..99dc09732 --- /dev/null +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { CollectionSubView } from "./CollectionSubView"; +import { observer } from 'mobx-react'; +import { makeObservable, observable } from 'mobx'; +import { Doc, DocListCast } from '../../../fields/Doc'; + +@observer +export class CollectionCalendarView extends CollectionSubView(){ + + constructor(props: any){ + super(props); + makeObservable(this); + } + + componentDidMount(): void { + + } + + componentWillUnmount(): void { + + } + + @observable private existingCalendars: Doc[] = DocListCast(Doc.MyCalendars?.data); + + render(){ + return ( +
+ Hello +
+ ) + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0673b264b..0237ec95e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,6 +28,7 @@ import { CollectionTreeView } from './CollectionTreeView'; import './CollectionView.scss'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionGridView } from './collectionGrid/CollectionGridView'; +import { CollectionCalendarView} from './CollectionCalendarView'; import { CollectionLinearView } from './collectionLinear'; import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; @@ -122,6 +123,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent; case CollectionViewType.Schema: return ; + case CollectionViewType.Calendar: return ; case CollectionViewType.Docking: return ; case CollectionViewType.Tree: return ; case CollectionViewType.Multicolumn: return ; @@ -146,6 +148,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent func(CollectionViewType.Schema), icon: 'th-list' }, { description: 'Tree', event: () => func(CollectionViewType.Tree), icon: 'tree' }, { description: 'Stacking', event: () => (func(CollectionViewType.Stacking)._layout_autoHeight = true), icon: 'ellipsis-v' }, + { description: 'Calendar', event: () => func(CollectionViewType.Calendar), icon: 'columns'}, { description: 'Notetaking', event: () => (func(CollectionViewType.NoteTaking)._layout_autoHeight = true), icon: 'ellipsis-v' }, { description: 'Multicolumn', event: () => func(CollectionViewType.Multicolumn), icon: 'columns' }, { description: 'Multirow', event: () => func(CollectionViewType.Multirow), icon: 'columns' }, diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index e161b4c4c..5b2bf4774 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -14,6 +14,7 @@ import { CollectionDockingView } from '../collections/CollectionDockingView'; import { CollectionView } from '../collections/CollectionView'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { CollectionSchemaView } from '../collections/collectionSchema/CollectionSchemaView'; +import { CollectionCalendarView } from '../collections/CollectionCalendarView'; import { SchemaRowBox } from '../collections/collectionSchema/SchemaRowBox'; import { PresElementBox } from '../nodes/trails/PresElementBox'; import { SearchBox } from '../search/SearchBox'; @@ -243,6 +244,7 @@ export class DocumentContentsView extends ObservableReactComponent< CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, + CollectionCalendarView, CollectionView, WebBox, KeyValueBox, diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index b627ba459..44afb8e7b 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -23,9 +23,7 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { FormattedTextBox } from '../formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../trails'; import { MapAnchorMenu } from './MapAnchorMenu'; - import { ControlPosition, Layer, MapProvider, MapRef, Map as MapboxMap, Marker, MarkerProps, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl'; -import MapboxGeocoder, { GeocoderOptions } from '@mapbox/mapbox-gl-geocoder!'; import './MapBox.scss'; // import { GeocoderControl } from './GeocoderControl'; import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons'; @@ -33,7 +31,7 @@ import { Checkbox, FormControlLabel, TextField } from '@mui/material'; import * as turf from '@turf/turf'; import * as d3 from 'd3'; import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson'; -import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl!'; +import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from '!mapbox-gl'; import { CirclePicker, ColorResult } from 'react-color'; import { MarkerEvent } from 'react-map-gl/dist/esm/types'; import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons'; @@ -68,13 +66,13 @@ type PopupInfo = { description: string; }; -export type GeocoderControlProps = Omit & { - mapboxAccessToken: string; - marker?: Omit; - position: ControlPosition; +// export type GeocoderControlProps = Omit & { +// mapboxAccessToken: string; +// marker?: Omit; +// position: ControlPosition; - onResult: (...args: any[]) => void; -}; +// onResult: (...args: any[]) => void; +// }; type MapMarker = { longitude: number; @@ -1866,4 +1864,4 @@ export class MapBox extends ViewBoxAnnotatableComponent