112 lines
3.4 KiB
TypeScript
112 lines
3.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 { FileOpener } from '@capacitor-community/file-opener';
|
|
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 downloadBaseName: string;
|
|
|
|
if (props.gpx.metadata.name !== undefined) {
|
|
downloadBaseName = props.gpx.metadata.name.substr(
|
|
0,
|
|
props.gpx.metadata.name.lastIndexOf('.')
|
|
);
|
|
} else if (props.gpx.gpx.metadata.name !== undefined) {
|
|
downloadBaseName = props.gpx.gpx.metadata.name;
|
|
} else {
|
|
downloadBaseName = `track-${props.gpx.metadata.lastModified}`;
|
|
}
|
|
|
|
const downloadExt = 'gpx';
|
|
|
|
const downloadName = `${downloadBaseName}.${downloadExt}`;
|
|
|
|
const getNewFilename: any = async (
|
|
filename: string,
|
|
extension: string,
|
|
i = 0
|
|
) => {
|
|
const filenameToTest =
|
|
i === 0 ? `${filename}.${extension}` : `${filename}(${i}).${extension}`;
|
|
try {
|
|
await Filesystem.stat({
|
|
path: filenameToTest,
|
|
directory: Directory.Documents,
|
|
});
|
|
return getNewFilename(filename, extension, i + 1);
|
|
} catch {
|
|
return filenameToTest;
|
|
}
|
|
};
|
|
|
|
const download = async (event: any) => {
|
|
event.preventDefault();
|
|
console.log('download()');
|
|
const gpxAsXml = await getGpxAsXmlString(db, props.gpx._id);
|
|
console.log(`gpxAsXml: ${gpxAsXml}`);
|
|
if (isCapacitor) {
|
|
const filename = await getNewFilename(
|
|
`../Download/${downloadBaseName}`,
|
|
downloadExt
|
|
);
|
|
console.log(`filename: ${filename}`);
|
|
const fileUrl = await Filesystem.writeFile({
|
|
path: filename,
|
|
data: gpxAsXml,
|
|
directory: Directory.Documents,
|
|
encoding: Encoding.UTF8,
|
|
recursive: true,
|
|
});
|
|
console.log(`fileUrl: ${fileUrl.uri}`);
|
|
await FileOpener.open({
|
|
filePath: fileUrl.uri,
|
|
contentType: 'application/gpx+xml',
|
|
openWithDefault: false,
|
|
});
|
|
} 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>
|
|
<a className='hidden' download={downloadName} ref={hiddenLinkElement}>
|
|
download
|
|
</a>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default GpxExport;
|