94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import {
|
|
IonButton,
|
|
IonButtons,
|
|
IonCard,
|
|
IonCardContent,
|
|
IonCardHeader,
|
|
IonCardTitle,
|
|
IonContent,
|
|
IonIcon,
|
|
IonItem,
|
|
IonList,
|
|
IonModal,
|
|
IonTitle,
|
|
IonToolbar,
|
|
} from '@ionic/react';
|
|
import { trash } from 'ionicons/icons';
|
|
import React, { Fragment, useRef } from 'react';
|
|
import { useFind, useDB } from 'react-pouchdb';
|
|
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';
|
|
import i18n from '../../i18n/index';
|
|
|
|
const TrackBrowser: React.FC<{}> = () => {
|
|
const gpxes = useFind({
|
|
selector: {
|
|
type: 'gpx',
|
|
},
|
|
});
|
|
|
|
const db = useDB();
|
|
|
|
const modal = useRef<HTMLIonModalElement>(null);
|
|
|
|
const dismiss = () => {
|
|
modal.current?.dismiss();
|
|
};
|
|
|
|
return (
|
|
<Fragment>
|
|
<IonButton id='track-browser-button'>
|
|
<img src={phoneRoute} alt='GPS tracks' width='24px' />
|
|
</IonButton>
|
|
<IonModal
|
|
ref={modal}
|
|
className='full-height'
|
|
trigger='track-browser-button'
|
|
enterAnimation={enterAnimation}
|
|
leaveAnimation={leaveAnimation}
|
|
>
|
|
<IonToolbar>
|
|
<IonTitle>{i18n.tracks}</IonTitle>
|
|
<IonButtons slot='end'>
|
|
<GpxImport />
|
|
<IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
<IonContent>
|
|
{gpxes.map((gpx: any) => (
|
|
<IonCard key={gpx._id}>
|
|
<IonCardHeader>
|
|
<IonItem>
|
|
<IonCardTitle>{gpx.gpx.metadata.name}</IonCardTitle>
|
|
<IonButtons slot='end'>
|
|
<GpxExport gpx={gpx} />
|
|
<IonButton
|
|
onClick={() => {
|
|
deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
|
|
}}
|
|
color='danger'
|
|
>
|
|
<IonIcon slot='icon-only' icon={trash} />
|
|
</IonButton>
|
|
</IonButtons>
|
|
</IonItem>
|
|
<IonCardContent>
|
|
<IonList>
|
|
<IonItem>{gpx.gpx.metadata.time}</IonItem>
|
|
<IonItem>{gpx.gpx.metadata.desc}</IonItem>
|
|
</IonList>
|
|
</IonCardContent>
|
|
</IonCardHeader>
|
|
</IonCard>
|
|
))}
|
|
</IonContent>
|
|
</IonModal>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default TrackBrowser;
|