diff --git a/src/App.tsx b/src/App.tsx index 1c14002..b1cf815 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,6 +43,7 @@ import CurrentLocation from './components/map/CurrentLocation'; import GpxImport from './components/dialogs/GpxImport'; import Gpxes from './components/map/Gpxes'; import MapChooser from './components/dialogs/MapChooser'; +import Explorer from './components/dialogs/Explorer'; // import { initDb } from './db'; // import PouchDB from 'pouchdb'; // import PouchDBFind from 'pouchdb-find'; @@ -134,6 +135,7 @@ const App: React.FC = () => { /> + diff --git a/src/components/dialogs/Explorer.tsx b/src/components/dialogs/Explorer.tsx new file mode 100644 index 0000000..dd5aea5 --- /dev/null +++ b/src/components/dialogs/Explorer.tsx @@ -0,0 +1,50 @@ +import { + IonModal, + IonToolbar, + IonTitle, + IonButtons, + IonButton, + IonContent, + IonList, +} from '@ionic/react'; +import react, { useRef, useState } from 'react'; +import { atom, useAtom } from 'jotai'; +import i18n from '../../i18n'; + +import cssDialog from './dialogs.module.css'; + +export interface ExplorerProperties {} + +export const isOpenAtom = atom(false); + +export const Explorer: react.FC = ( + props: ExplorerProperties +) => { + const modal = useRef(null); + const [isOpen, setIsOpen] = useAtom(isOpenAtom); + + const dismiss = () => { + setIsOpen(false); + }; + + return ( + + + {i18n.explorer.nearBy} + + {i18n.common.close} + + + + + + + ); +}; + +export default Explorer; diff --git a/src/components/map/Handlers.tsx b/src/components/map/Handlers.tsx index 2d949b4..6538fe2 100644 --- a/src/components/map/Handlers.tsx +++ b/src/components/map/Handlers.tsx @@ -4,7 +4,9 @@ import { Point } from './types'; import './Handler.css'; import { handlersConfig } from './config'; import { Transformation } from './LiveMap'; +import { isOpenAtom } from '../dialogs/Explorer'; import cache from '../../lib/cache'; +import { useAtom } from 'jotai'; /** * @@ -293,10 +295,14 @@ export const Handlers: react.FC = ( } }; + const [, setIsOpen] = useAtom(isOpenAtom); + const contextMenuHandler = (event: any) => { console.log(event); event.preventDefault(); console.log(cache.map({ cacheId: 'points' })); + + setIsOpen(true); }; return ( diff --git a/src/i18n/index.tsx b/src/i18n/index.tsx index d9a1f63..3480a4f 100644 --- a/src/i18n/index.tsx +++ b/src/i18n/index.tsx @@ -9,6 +9,10 @@ const strings = new LocalizedStrings({ mapChooser: { chooseYourMap: 'Choose your map', }, + + explorer: { + nearBy: 'Nearby', + }, }, fr: { colonize: (input: string): any => strings.formatString('{0} :', input), @@ -22,6 +26,10 @@ const strings = new LocalizedStrings({ mapChooser: { chooseYourMap: 'Choisissez votre carte', }, + + explorer: { + nearBy: "Près d'ici", + }, }, });