Figuring how files can be downloaded to implement GPXexport (#9). Also changing the icon used for GPX import.

This commit is contained in:
Eric van der Vlist 2022-10-02 00:00:36 +02:00
parent ea97d6bc09
commit 93054115a5
4 changed files with 53 additions and 2 deletions

View File

@ -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<HTMLAnchorElement>(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(['<gpx/>'], { type: 'application/gpx+xml' });
const fileDownloadUrl = URL.createObjectURL(blob);
setFileDownloadUrl(fileDownloadUrl);
};
return (
<Fragment>
<IonButton id='gpx-export-button' onClick={download}>
<IonIcon icon={cloudDownload} title='Export' slot='icon-only' />
</IonButton>
<a
className='hidden'
download={props.gpxId + '.gpx'}
href={fileDownloadUrl}
ref={hiddenLinkElement}
>
download it
</a>
</Fragment>
);
};
export default GpxExport;

View File

@ -16,6 +16,7 @@ import { deleteGps } from '../../db/gpx';
import { enterAnimation, leaveAnimation } from '../../lib/animation'; import { enterAnimation, leaveAnimation } from '../../lib/animation';
import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg'; import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
import GpxImport from './gpx-import'; import GpxImport from './gpx-import';
import GpxExport from './GpxExport';
const TrackBrowser: React.FC<{}> = () => { const TrackBrowser: React.FC<{}> = () => {
const gpxes = useFind({ const gpxes = useFind({
@ -57,6 +58,7 @@ const TrackBrowser: React.FC<{}> = () => {
<IonItem key={gpx._id}> <IonItem key={gpx._id}>
<span>{gpx.gpx.metadata.time}</span> <span>{gpx.gpx.metadata.time}</span>
<IonButtons slot='end'> <IonButtons slot='end'>
<GpxExport gpxId={gpx._id} />
<IonButton <IonButton
onClick={() => { onClick={() => {
deleteGps(db, { _id: gpx._id, _rev: gpx._rev }); deleteGps(db, { _id: gpx._id, _rev: gpx._rev });

View File

@ -6,7 +6,7 @@ import GPX from '../../lib/gpx-parser-builder';
import '../../theme/get-location.css'; import '../../theme/get-location.css';
import { IonIcon, IonItem } from '@ionic/react'; import { IonIcon, IonItem } from '@ionic/react';
import { downloadSharp } from 'ionicons/icons'; import { cloudUpload } from 'ionicons/icons';
import { pushGpx } from '../../db/gpx'; import { pushGpx } from '../../db/gpx';
const GpxImport: React.FC<{}> = () => { const GpxImport: React.FC<{}> = () => {
@ -49,7 +49,7 @@ const GpxImport: React.FC<{}> = () => {
onChange={onChangeHandler} onChange={onChangeHandler}
/> />
<label htmlFor='gpx-import'> <label htmlFor='gpx-import'>
<IonIcon slot='icon-only' icon={downloadSharp} /> <IonIcon slot='icon-only' icon={cloudUpload} title="import" />
</label> </label>
</IonItem> </IonItem>
); );

View File

@ -63,4 +63,8 @@ ion-modal ion-toolbar {
ion-modal ion-content { ion-modal ion-content {
background-color: rgba(255,255,255,.7) background-color: rgba(255,255,255,.7)
; ;
}
.hidden {
display: none;
} }