}
theme={theme}
+ icon={ESystemIcon.agenda}
+ variant={ButtonVariant.FILLED}
+ buttonTheme={EButtonTheme.PRIMARY}
onClick={async () => {
// to-do: event click action
// const cal = await import('../lib/cal');
@@ -478,8 +488,6 @@ export const HMapView = function ({
fetchNewData,
theme = 'light',
}: IMapView) {
- console.log({ mapBoxToken });
- console.log({ events });
const mapRef = useRef(null);
const popup = useRef({ open: false, feature: undefined });
const hoverPopup = useRef(null);
@@ -580,7 +588,6 @@ export const HMapView = function ({
const { clusterId } = target.properties;
const mapboxSource = mapRef.current.getSource(clusterId);
mapboxSource.getClusterLeaves(clusterId, 5, 0, (err, features) => {
- console.log({ err });
if (err) return;
hoverPopup.current = features;
hoverPopup.current.coordinates = target.geometry.coordinates;
@@ -614,7 +621,11 @@ export const HMapView = function ({
cursor="auto"
ref={mapRef}
style={{ width: '100svw', height: '97svh' }}
- mapStyle="mapbox://styles/mapbox/dark-v9"
+ mapStyle={
+ theme === 'dark'
+ ? 'mapbox://styles/mapbox/dark-v11'
+ : 'mapbox://styles/mapbox/light-v11'
+ }
>
Date: Mon, 5 Aug 2024 01:21:09 +0100
Subject: [PATCH 07/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/03_Calendar/CalendarView.tsx | 91 +++++++++++++++-------
1 file changed, 64 insertions(+), 27 deletions(-)
diff --git a/src/molecules/03_Calendar/CalendarView.tsx b/src/molecules/03_Calendar/CalendarView.tsx
index caa7906..1288fd7 100644
--- a/src/molecules/03_Calendar/CalendarView.tsx
+++ b/src/molecules/03_Calendar/CalendarView.tsx
@@ -1,7 +1,7 @@
/* eslint jsx-a11y/media-has-caption:0, no-nested-ternary:0, no-unused-vars:0, max-len:0, no-shadow:0, @typescript-eslint/no-explicit-any:0, object-curly-newline:0 */
// @atoms/CalendarView.tsx
import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
import LibCal from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid'; // a plugin!
@@ -10,7 +10,7 @@ import { Box, Modal } from '@mui/material';
import { Button } from '../../atoms/01_Button';
import { Typography } from '../../atoms/02_Typography';
-// import { ESystemIcon } from '../../atoms/05_SystemIcon';
+import { ESystemIcon } from '../../atoms/05_SystemIcon';
export const EventLocale = {
default: {
@@ -650,10 +650,15 @@ export const HCalendarView = function ({
events,
locale,
initialView = 'timeGridWeek',
- headerToolbar = { start: 'title' },
+ headerToolbar = {
+ left: 'title',
+ center: '',
+ right: '',
+ },
nowIndicator = false,
theme = 'light',
}: ICalendarView) {
+ const calendarRef = useRef(null);
const [open, setOpen] = useState(false);
const [modalPrompt, setModalPrompt] = useState('');
const [askedCal, setAskedCal] = useState(false);
@@ -663,27 +668,32 @@ export const HCalendarView = function ({
const gridSx = [
{
[`class03
+ relative
flex
+ flex-col
+ w-full
col-span-full col-start-0
content-center
items-center
align-center
justify-center
+ [&_*]:text-body-light
+ [&_*]:dark:text-body-dark
`]: true,
},
];
- const style = {
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: 400,
- bgcolor: 'background.paper',
- border: '2px solid #000',
- boxShadow: 24,
- p: 4,
- };
+ // const style = {
+ // position: 'absolute',
+ // top: '50%',
+ // left: '50%',
+ // transform: 'translate(-50%, -50%)',
+ // width: 400,
+ // bgcolor: 'background.paper',
+ // border: '2px solid #000',
+ // boxShadow: 24,
+ // p: 4,
+ // };
const gridStyles = `${clsx(gridSx)} ${className}`;
@@ -730,29 +740,39 @@ export const HCalendarView = function ({
}
};
+ const handlePreviousClick = () => {
+ const calendarAPI = calendarRef?.current?.getApi();
+ calendarAPI?.prev();
+ };
+
+ const handleNextClick = () => {
+ const calendarAPI = calendarRef?.current?.getApi();
+ calendarAPI?.next();
+ };
+
+ const handleTodayClick = () => {
+ const calendarAPI = calendarRef?.current?.getApi();
+ calendarAPI?.today();
+ };
+
return (
-
+
{
info.jsEvent.preventDefault(); // don't let the browser navigate
setModalPrompt(localization.calendarPrompt);
@@ -770,12 +790,29 @@ export const HCalendarView = function ({
}
}}
/>
+
+
+
+
+
-
+
{/* 1/2
*/}
{modalPrompt}
From 08547831bd9015e153ce53b5df1cb13d6657a14d Mon Sep 17 00:00:00 2001
From: Angelo Reale <12191809+angeloreale@users.noreply.github.com>
Date: Mon, 5 Aug 2024 01:33:12 +0100
Subject: [PATCH 08/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/03_Calendar/CalendarView.tsx | 81 ++++++++++++++++------
1 file changed, 58 insertions(+), 23 deletions(-)
diff --git a/src/molecules/03_Calendar/CalendarView.tsx b/src/molecules/03_Calendar/CalendarView.tsx
index 1288fd7..1d801f3 100644
--- a/src/molecules/03_Calendar/CalendarView.tsx
+++ b/src/molecules/03_Calendar/CalendarView.tsx
@@ -596,24 +596,53 @@ export const EventLocale = {
},
};
-export const DEFAULT_EVENTS = [
- {
- id: 'dreampip__chan_0000',
- className: '',
- onPlay: () => {},
- title: 'This is the track playing',
- url: 'https://www.dreampip.com/api/nexus/audio',
- isPlaying: false,
- },
- {
- id: 'dreampip__chan_0001',
- className: '',
- onPlay: () => {},
- title: 'This is the track playing',
- url: 'https://www.dreampip.com/api/nexus/audio/1',
- isPlaying: false,
+export const DEFAULT_EVENTS = {
+ calData: [
+ {
+ id: '[musica, samba] Banda - Samba do São Lázaro',
+ title: '[musica, samba] Banda - Samba do São Lázaro',
+ url: 'https://instagram.com/samba_do_sl',
+ location:
+ 'Largo de São Lázaro - Ondina, Salvador - BA, 40170-010, Brazil',
+ start: '2024-08-09T17:00:00-03:00',
+ end: '2024-08-09T20:00:00-03:00',
+ classNames: ['musica', 'samba'],
+ allDay: false,
+ terms: ['musica', 'samba'],
+ city: 'salvador',
+ artists: ['Banda'],
+ project: ['Samba do São Lázaro'],
+ timeframe: 'W',
+ },
+ ],
+ mapData: {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [-38.5120851, -13.0076901],
+ },
+ properties: {
+ name: '[musica, samba] Banda - Samba do São Lázaro',
+ terms: ['musica', 'samba'],
+ city: 'salvador',
+ artists: ['Banda'],
+ project: ['Samba do São Lázaro'],
+ starttime: '2024-08-09T17:00:00-03:00',
+ endtime: '2024-08-09T20:00:00-03:00',
+ location:
+ 'Largo de São Lázaro - Ondina, Salvador - BA, 40170-010, Brazil',
+ link: 'https://instagram.com/samba_do_sl',
+ timeframe: 'W',
+ clusterId: 'molecule__MapView',
+ },
+ },
+ ],
+ timeframe: 'W',
},
-];
+};
export enum ECalendarViewVariant {
DEFAULT = 'default',
@@ -647,7 +676,7 @@ export interface ICalendarView {
export const HCalendarView = function ({
id = 'atom__CalendarView',
className = '',
- events,
+ events = DEFAULT_EVENTS.calData,
locale,
initialView = 'timeGridWeek',
headerToolbar = {
@@ -672,6 +701,7 @@ export const HCalendarView = function ({
flex
flex-col
w-full
+ h-full
col-span-full col-start-0
content-center
items-center
@@ -679,6 +709,7 @@ export const HCalendarView = function ({
justify-center
[&_*]:text-body-light
[&_*]:dark:text-body-dark
+ [&_.fc]:w-full
`]: true,
},
];
@@ -767,11 +798,11 @@ export const HCalendarView = function ({
locale={locale}
events={events}
height={600}
+ aspectRatio={1.5}
firstDay={1}
- aspectRatio={2}
ref={calendarRef}
allDayText={localization.allDay}
- eventColor={theme === 'dark' ? '#fff' : '#1b1b1b'}
+ eventColor={theme === 'light' ? '#fff' : '#1b1b1b'}
eventTextColor={theme === 'dark' ? '#1b1b1b' : '#fff'}
eventClick={(info) => {
info.jsEvent.preventDefault(); // don't let the browser navigate
@@ -814,13 +845,17 @@ export const HCalendarView = function ({
>
{/* 1/2
*/}
-
+
{modalPrompt}
-
From 24b06076f6cad52486b76be33bb54f069f0cad2e Mon Sep 17 00:00:00 2001
From: Angelo Reale <12191809+angeloreale@users.noreply.github.com>
Date: Mon, 5 Aug 2024 01:40:47 +0100
Subject: [PATCH 09/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/03_Calendar/CalendarView.tsx | 49 +++++++++++++---------
1 file changed, 29 insertions(+), 20 deletions(-)
diff --git a/src/molecules/03_Calendar/CalendarView.tsx b/src/molecules/03_Calendar/CalendarView.tsx
index 1d801f3..bb02092 100644
--- a/src/molecules/03_Calendar/CalendarView.tsx
+++ b/src/molecules/03_Calendar/CalendarView.tsx
@@ -708,23 +708,25 @@ export const HCalendarView = function ({
align-center
justify-center
[&_*]:text-body-light
+ [&_.fc-event_*]:text-body-dark
[&_*]:dark:text-body-dark
+ [&_.fc-event_*]:dark:text-body-light
[&_.fc]:w-full
`]: true,
},
];
- // const style = {
- // position: 'absolute',
- // top: '50%',
- // left: '50%',
- // transform: 'translate(-50%, -50%)',
- // width: 400,
- // bgcolor: 'background.paper',
- // border: '2px solid #000',
- // boxShadow: 24,
- // p: 4,
- // };
+ const style = {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: 400,
+ backgroundColor: 'white',
+ border: '2px solid #000',
+ boxShadow: 24,
+ p: 4,
+ };
const gridStyles = `${clsx(gridSx)} ${className}`;
@@ -802,7 +804,7 @@ export const HCalendarView = function ({
firstDay={1}
ref={calendarRef}
allDayText={localization.allDay}
- eventColor={theme === 'light' ? '#fff' : '#1b1b1b'}
+ eventColor={theme === 'dark' ? '#fff' : '#1b1b1b'}
eventTextColor={theme === 'dark' ? '#1b1b1b' : '#fff'}
eventClick={(info) => {
info.jsEvent.preventDefault(); // don't let the browser navigate
@@ -823,19 +825,22 @@ export const HCalendarView = function ({
/>
-
+
{/* 1/2
*/}
-
+
{modalPrompt}
-
From bc2fffa3d41d74cef82777ae7ae84ad01a023b02 Mon Sep 17 00:00:00 2001
From: Angelo Reale <12191809+angeloreale@users.noreply.github.com>
Date: Mon, 5 Aug 2024 01:41:15 +0100
Subject: [PATCH 10/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/03_Calendar/CalendarView.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/molecules/03_Calendar/CalendarView.tsx b/src/molecules/03_Calendar/CalendarView.tsx
index bb02092..aaa1754 100644
--- a/src/molecules/03_Calendar/CalendarView.tsx
+++ b/src/molecules/03_Calendar/CalendarView.tsx
@@ -849,7 +849,6 @@ export const HCalendarView = function ({
aria-describedby="parent-modal-description"
>
- {/* 1/2
*/}
Date: Mon, 5 Aug 2024 01:53:28 +0100
Subject: [PATCH 11/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/04_Map/MapView.tsx | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/molecules/04_Map/MapView.tsx b/src/molecules/04_Map/MapView.tsx
index cf0cb35..6409333 100644
--- a/src/molecules/04_Map/MapView.tsx
+++ b/src/molecules/04_Map/MapView.tsx
@@ -1,16 +1,17 @@
/* eslint no-unreachable:0, @typescript-eslint/no-unused-vars:0, no-import-assign:0, import/no-unresolved:0, import/no-webpack-loader-syntax:0, jsx-a11y/media-has-caption:0, no-nested-ternary:0, no-unused-vars:0, max-len:0, no-shadow:0, @typescript-eslint/no-explicit-any:0, object-curly-newline:0 */
// @atoms/MapView.tsx
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
import clsx from 'clsx';
import Map, { Source, Layer, Popup as GLPop } from 'react-map-gl';
import bbox from '@turf/bbox';
import React, { useRef, useState, useEffect } from 'react';
-import { workerClass } from 'mapbox-gl';
-import workerLoader from 'mapbox-gl/dist/mapbox-gl-csp-worker?worker';
import { Button, ButtonVariant, EButtonTheme } from '../../atoms/01_Button';
import { Typography } from '../../atoms/02_Typography';
import { Link } from '../../atoms/03_Link';
import { SystemIcon, ESystemIcon } from '../../atoms/05_SystemIcon';
+import 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
export const MapLocale = {
@@ -490,7 +491,7 @@ export const HMapView = function ({
}: IMapView) {
const mapRef = useRef(null);
const popup = useRef({ open: false, feature: undefined });
- const hoverPopup = useRef(null);
+ const hoverPopup = useRef(null);
const [popupOpen, setPopupOpen] = useState(false);
const [hoverPopupOpen, setHoverPopupOpen] = useState(false);
@@ -535,7 +536,7 @@ export const HMapView = function ({
});
};
- const onClickPoint = ({ target, event }) => {
+ const onClickPoint = ({ target, event }: any) => {
if (popupOpen || hoverPopupOpen) {
setPopupOpen(false);
setHoverPopupOpen(false);
@@ -587,7 +588,7 @@ export const HMapView = function ({
const [target] = event.features;
const { clusterId } = target.properties;
const mapboxSource = mapRef.current.getSource(clusterId);
- mapboxSource.getClusterLeaves(clusterId, 5, 0, (err, features) => {
+ mapboxSource.getClusterLeaves(clusterId, 5, 0, (err, features: any) => {
if (err) return;
hoverPopup.current = features;
hoverPopup.current.coordinates = target.geometry.coordinates;
@@ -657,7 +658,7 @@ export const HMapView = function ({
longitude={hoverPopup?.current?.coordinates[0]}
>
{hoverPopup?.current?.length &&
- hoverPopup?.current?.map((feature) => (
+ hoverPopup?.current?.map((feature: any) => (
{feature?.properties?.name}
From 54fb30ad254ecd595517fa78be4e993366bfdd5a Mon Sep 17 00:00:00 2001
From: Angelo Reale <12191809+angeloreale@users.noreply.github.com>
Date: Mon, 5 Aug 2024 02:02:36 +0100
Subject: [PATCH 12/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/03_Calendar/CalendarView.tsx | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/molecules/03_Calendar/CalendarView.tsx b/src/molecules/03_Calendar/CalendarView.tsx
index aaa1754..54742ed 100644
--- a/src/molecules/03_Calendar/CalendarView.tsx
+++ b/src/molecules/03_Calendar/CalendarView.tsx
@@ -12,7 +12,7 @@ import { Button } from '../../atoms/01_Button';
import { Typography } from '../../atoms/02_Typography';
import { ESystemIcon } from '../../atoms/05_SystemIcon';
-export const EventLocale = {
+export const EventLocale: any = {
default: {
locale: 'en-us',
timezone: 'Europe/Rome',
@@ -677,7 +677,7 @@ export const HCalendarView = function ({
id = 'atom__CalendarView',
className = '',
events = DEFAULT_EVENTS.calData,
- locale,
+ locale = 'en-US',
initialView = 'timeGridWeek',
headerToolbar = {
left: 'title',
@@ -687,13 +687,14 @@ export const HCalendarView = function ({
nowIndicator = false,
theme = 'light',
}: ICalendarView) {
- const calendarRef = useRef(null);
+ const calendarRef = useRef(null);
const [open, setOpen] = useState(false);
const [modalPrompt, setModalPrompt] = useState('');
const [askedCal, setAskedCal] = useState(false);
- const [info, setInfo] = useState({});
+ const [info, setInfo] = useState({ event: { url: '' } });
// to-do add localization
- const localization = EventLocale[locale] || EventLocale.default;
+ const localization =
+ EventLocale[locale as keyof typeof EventLocale] || EventLocale.default;
const gridSx = [
{
[`class03
@@ -789,9 +790,8 @@ export const HCalendarView = function ({
};
return (
-
+
{
+ eventClick={(info: any) => {
info.jsEvent.preventDefault(); // don't let the browser navigate
setModalPrompt(localization.calendarPrompt);
setOpen(true);
setInfo(info);
}}
- viewDidMount={(info) => {
+ viewDidMount={(info: any) => {
try {
const delta =
info?.view?.calendar?.currentData?.dateProfile?.renderRange
?.start || 0;
- info?.view?.calendar?.scrollToTime(new Date() - delta);
+ info?.view?.calendar?.scrollToTime(new Date().getTime() - delta);
} catch (e) {
console.error(e);
}
From 4c910baeb69173c3d9addefebb94eba2839bc07a Mon Sep 17 00:00:00 2001
From: Angelo Reale <12191809+angeloreale@users.noreply.github.com>
Date: Mon, 5 Aug 2024 02:04:07 +0100
Subject: [PATCH 13/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/atoms/05_SystemIcon/SystemIcon.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/atoms/05_SystemIcon/SystemIcon.tsx b/src/atoms/05_SystemIcon/SystemIcon.tsx
index 5d68dcb..ae74c39 100644
--- a/src/atoms/05_SystemIcon/SystemIcon.tsx
+++ b/src/atoms/05_SystemIcon/SystemIcon.tsx
@@ -2,7 +2,7 @@
// @atoms/SystemIcon.tsx
import { useMemo } from 'react';
import clsx from 'clsx';
-import { DreamPipColors } from '../../../dist/tailwind.config.ts';
+import { DreamPipColors } from '../../../tailwind.config.ts';
import * as Icons from './assets';
type Theme = 'light' | 'dark';
From 9eb4445224fab08f3f8d9a2d69560979f19abb2b Mon Sep 17 00:00:00 2001
From: Angelo Reale <12191809+angeloreale@users.noreply.github.com>
Date: Mon, 5 Aug 2024 02:05:38 +0100
Subject: [PATCH 14/17] ar(feat) DPCP-30-36: Calendar View, Map View
---
src/molecules/04_Map/MapView.tsx | 2 +-
....timestamp-1722819934176-d854ee39b16c9.mjs | 50 +++++++++++++++++++
2 files changed, 51 insertions(+), 1 deletion(-)
create mode 100644 vite.config.ts.timestamp-1722819934176-d854ee39b16c9.mjs
diff --git a/src/molecules/04_Map/MapView.tsx b/src/molecules/04_Map/MapView.tsx
index 6409333..1f2d995 100644
--- a/src/molecules/04_Map/MapView.tsx
+++ b/src/molecules/04_Map/MapView.tsx
@@ -604,7 +604,7 @@ export const HMapView = function ({
const zoom = settings?.zoom || 3;
return (
-
+