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",
+ },
},
});