77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { IonButton, IonIcon, isPlatform } from '@ionic/react';
|
|
import { cloudDownload } from 'ionicons/icons';
|
|
import React, { Fragment, useRef } from 'react';
|
|
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
|
|
import { useDB } from 'react-pouchdb';
|
|
import { getGpxAsXmlString } from '../../db/gpx';
|
|
|
|
const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => {
|
|
const db = useDB();
|
|
|
|
const isCapacitor = isPlatform('capacitor');
|
|
console.log(`isPlatform('capacitor'): ${isPlatform('capacitor')}`);
|
|
|
|
const hiddenLinkElement = useRef<HTMLAnchorElement>(null);
|
|
|
|
var downloadName: string;
|
|
|
|
if (props.gpx.metadata.name !== undefined) {
|
|
downloadName = props.gpx.metadata.name;
|
|
} else if (props.gpx.gpx.metadata.name !== undefined) {
|
|
downloadName = `${props.gpx.gpx.metadata.name}.gpx`;
|
|
} else {
|
|
downloadName = `track-${props.gpx.metadata.lastModified}.gpx`;
|
|
}
|
|
|
|
const download = async (event: any) => {
|
|
event.preventDefault();
|
|
console.log('download()');
|
|
const gpxAsXml = await getGpxAsXmlString(db, props.gpx._id);
|
|
console.log(`gpxAsXml: ${gpxAsXml}`);
|
|
if (isCapacitor) {
|
|
await Filesystem.writeFile({
|
|
path: `Download/${downloadName}`,
|
|
data: gpxAsXml,
|
|
directory: Directory.Documents,
|
|
encoding: Encoding.UTF8,
|
|
recursive: true,
|
|
});
|
|
} else {
|
|
const blob = new Blob([gpxAsXml], {
|
|
type: 'application/gpx+xml',
|
|
});
|
|
const fileDownloadUrl = URL.createObjectURL(blob);
|
|
console.log(`fileDownloadUrl: ${fileDownloadUrl}`);
|
|
console.log(
|
|
`hiddenLinkElement.current, href: ${
|
|
hiddenLinkElement.current!.href
|
|
}, click: ${hiddenLinkElement.current!.click}`
|
|
);
|
|
hiddenLinkElement.current!.href = fileDownloadUrl;
|
|
hiddenLinkElement.current?.click();
|
|
console.log(
|
|
`hiddenLinkElement.current, href: ${
|
|
hiddenLinkElement.current!.href
|
|
}, click: ${hiddenLinkElement.current!.click}`
|
|
);
|
|
URL.revokeObjectURL(fileDownloadUrl);
|
|
hiddenLinkElement.current!.href = '';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Fragment>
|
|
<IonButton id='gpx-export-button' onClick={download}>
|
|
<IonIcon icon={cloudDownload} title='Export' slot='icon-only' />
|
|
</IonButton>
|
|
{isCapacitor && (
|
|
<a className='hidden' download={downloadName} ref={hiddenLinkElement}>
|
|
download
|
|
</a>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default GpxExport;
|