diff --git a/src/components/map/GpxExport.tsx b/src/components/map/GpxExport.tsx new file mode 100644 index 0000000..3f88560 --- /dev/null +++ b/src/components/map/GpxExport.tsx @@ -0,0 +1,45 @@ +import { IonButton, IonIcon } from '@ionic/react'; +import { cloudDownload } from 'ionicons/icons'; +import React, { Fragment, useLayoutEffect, useRef, useState } from 'react'; +import { useDB } from 'react-pouchdb'; + +const GpxExport: React.FC<{ gpxId: string }> = (props: { gpxId: string }) => { + const db = useDB(); + + const hiddenLinkElement = useRef(null); + + const [fileDownloadUrl, setFileDownloadUrl] = useState(''); + + useLayoutEffect(() => { + if (fileDownloadUrl !== '') { + hiddenLinkElement.current?.click(); + URL.revokeObjectURL(fileDownloadUrl); + setFileDownloadUrl(''); + } + }, [fileDownloadUrl]); + + const download = (event: any) => { + event.preventDefault(); + const blob = new Blob([''], { type: 'application/gpx+xml' }); + const fileDownloadUrl = URL.createObjectURL(blob); + setFileDownloadUrl(fileDownloadUrl); + }; + + return ( + + + + + + download it + + + ); +}; + +export default GpxExport; diff --git a/src/components/map/TracksBrowser.tsx b/src/components/map/TracksBrowser.tsx index b845730..abc40eb 100644 --- a/src/components/map/TracksBrowser.tsx +++ b/src/components/map/TracksBrowser.tsx @@ -16,6 +16,7 @@ import { deleteGps } from '../../db/gpx'; import { enterAnimation, leaveAnimation } from '../../lib/animation'; import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg'; import GpxImport from './gpx-import'; +import GpxExport from './GpxExport'; const TrackBrowser: React.FC<{}> = () => { const gpxes = useFind({ @@ -57,6 +58,7 @@ const TrackBrowser: React.FC<{}> = () => { {gpx.gpx.metadata.time} + { deleteGps(db, { _id: gpx._id, _rev: gpx._rev }); diff --git a/src/components/map/gpx-import.tsx b/src/components/map/gpx-import.tsx index 21733a8..7daf5fd 100644 --- a/src/components/map/gpx-import.tsx +++ b/src/components/map/gpx-import.tsx @@ -6,7 +6,7 @@ import GPX from '../../lib/gpx-parser-builder'; import '../../theme/get-location.css'; import { IonIcon, IonItem } from '@ionic/react'; -import { downloadSharp } from 'ionicons/icons'; +import { cloudUpload } from 'ionicons/icons'; import { pushGpx } from '../../db/gpx'; const GpxImport: React.FC<{}> = () => { @@ -49,7 +49,7 @@ const GpxImport: React.FC<{}> = () => { onChange={onChangeHandler} /> ); diff --git a/src/theme/map.css b/src/theme/map.css index e3d16b8..f0a63b6 100644 --- a/src/theme/map.css +++ b/src/theme/map.css @@ -63,4 +63,8 @@ ion-modal ion-toolbar { ion-modal ion-content { background-color: rgba(255,255,255,.7) ; +} + +.hidden { + display: none; } \ No newline at end of file