From c545ff1d15c9e370a9f7d2d61d5811733d7b4b04 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 22 Sep 2022 15:47:41 +0200
Subject: [PATCH] Adding a file chooser to import GPX files

---
 src/components/map/gpx-import.tsx | 47 +++++++++++++++++++++++++++++++
 src/components/map/map.tsx        | 10 +++++++
 src/theme/map.css                 |  9 ++++++
 trapeze.config.yaml               |  1 +
 4 files changed, 67 insertions(+)
 create mode 100644 src/components/map/gpx-import.tsx

diff --git a/src/components/map/gpx-import.tsx b/src/components/map/gpx-import.tsx
new file mode 100644
index 0000000..ea7792a
--- /dev/null
+++ b/src/components/map/gpx-import.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+import { useDispatch } from 'react-redux';
+
+import { mapActions } from '../../store/map';
+
+import '../../theme/get-location.css';
+import { IonIcon, IonItem } from '@ionic/react';
+import { downloadSharp } from 'ionicons/icons';
+
+const GpxImport: React.FC<{}> = () => {
+  const dispatch = useDispatch();
+
+  const onChangeHandler = (event: any) => {
+    console.log('On change handler');
+    const file = event.target.files[0];
+    const fileReader = new FileReader();
+    fileReader.readAsText(file);
+
+    fileReader.addEventListener(
+      'load',
+      () => {
+        // this will then display a text file
+        console.log(fileReader.result);
+      },
+      false
+    );
+  };
+
+  return (
+    <IonItem>
+      <input
+        type='file'
+        id='gpx-import'
+        className='input-file'
+        accept='.gpx'
+        onChange={onChangeHandler}
+      />
+      <label htmlFor='gpx-import'>
+        <IonIcon slot='icon-only' icon={downloadSharp} />
+      </label>
+    </IonItem>
+  );
+};
+
+export default GpxImport;
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 9e1cf06..59d3abf 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -14,9 +14,12 @@ import {
   IonButtons,
   IonContent,
   IonFooter,
+  IonHeader,
   IonToolbar,
 } from '@ionic/react';
 
+import GpxImport from './gpx-import';
+
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
 
@@ -47,6 +50,13 @@ const Map: react.FC<{}> = (props: {}) => {
           </Layer>
         </IonApp>
       </IonContent>
+      <IonHeader className='ion-no-border' translucent={true}>
+        <IonToolbar>
+          <IonButtons slot='end'>
+            <GpxImport />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
       <IonFooter className='ion-no-border'>
         <IonToolbar>
           <IonButtons>
diff --git a/src/theme/map.css b/src/theme/map.css
index 802ff3b..74e4aa5 100644
--- a/src/theme/map.css
+++ b/src/theme/map.css
@@ -12,3 +12,12 @@ ion-button.get-location {
   --ion-background-color: white;
   margin-left: calc(50% - 20px);
 }
+
+.input-file {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
\ No newline at end of file
diff --git a/trapeze.config.yaml b/trapeze.config.yaml
index 276921c..5cc75d1 100644
--- a/trapeze.config.yaml
+++ b/trapeze.config.yaml
@@ -12,3 +12,4 @@ platforms:
           <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
           <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />          
           <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
+          <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />