From 1cc04092f489c390217c7c0c5a35e8a720301123 Mon Sep 17 00:00:00 2001
From: kara Diaby <kdiaby.pro@gmail.com>
Date: Thu, 7 May 2020 18:30:19 +0200
Subject: [PATCH] import GPX file in browser [Carto]

---
 app/controllers/champs/carte_controller.rb    |  2 +-
 .../components/MapEditor/MapEditor.js         | 37 ++++++++++++++++++-
 .../components/MapEditor/SearchInput.js       |  2 +-
 package.json                                  |  1 +
 .../champs/carte_controller_spec.rb           |  5 +--
 yarn.lock                                     |  5 +++
 6 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/app/controllers/champs/carte_controller.rb b/app/controllers/champs/carte_controller.rb
index 1ff5980c6..84f5de313 100644
--- a/app/controllers/champs/carte_controller.rb
+++ b/app/controllers/champs/carte_controller.rb
@@ -115,7 +115,7 @@ class Champs::CarteController < ApplicationController
   end
 
   def params_features
-    params[:feature_collection][:features]
+    params[:features]
   end
 
   def save_geometry!(geo_area, feature)
diff --git a/app/javascript/components/MapEditor/MapEditor.js b/app/javascript/components/MapEditor/MapEditor.js
index 56b33d08f..904cb8c05 100644
--- a/app/javascript/components/MapEditor/MapEditor.js
+++ b/app/javascript/components/MapEditor/MapEditor.js
@@ -6,6 +6,7 @@ import DrawControl from 'react-mapbox-gl-draw';
 import SwitchMapStyle from './SwitchMapStyle';
 import SearchInput from './SearchInput';
 import { getJSON, ajax } from '@utils';
+import { gpx } from '@tmcw/togeojson/dist/togeojson.es.js';
 import ortho from './styles/ortho.json';
 import vector from './styles/vector.json';
 import { polygonCadastresFill, polygonCadastresLine } from './utils';
@@ -28,9 +29,8 @@ const MapEditor = ({ featureCollection, url }) => {
   const [coords, setCoords] = useState([1.7, 46.9]);
   const [zoom, setZoom] = useState([5]);
   const [currentMap, setCurrentMap] = useState({});
-
+  const [bbox, setBbox] = useState(featureCollection.bbox);
   const mapStyle = style === 'ortho' ? ortho : vector;
-  const bbox = featureCollection.bbox;
   const cadastresFeatureCollection = filterFeatureCollection(
     featureCollection,
     'cadastre'
@@ -93,6 +93,29 @@ const MapEditor = ({ featureCollection, url }) => {
     }
   };
 
+  const onGpxImport = e => {
+    let reader = new FileReader();
+    reader.readAsText(e.target.files[0], 'UTF-8');
+    reader.onload = async event => {
+      const featureCollection = gpx(
+        new DOMParser().parseFromString(event.target.result, 'text/xml')
+      );
+      const resultFeatureCollection = await getJSON(
+        `${url}/import`,
+        featureCollection,
+        'post'
+      );
+      drawControl.current.draw.set(
+        filterFeatureCollection(
+          resultFeatureCollection,
+          'selection_utilisateur'
+        )
+      );
+      updateFeaturesList(resultFeatureCollection.features);
+      setBbox(resultFeatureCollection.bbox);
+    };
+  };
+
   useEffect(() => {
     addEventListener('cadastres:update', onCadastresUpdate);
     return () => removeEventListener('cadastres:update', onCadastresUpdate);
@@ -110,6 +133,16 @@ const MapEditor = ({ featureCollection, url }) => {
 
   return (
     <>
+      <div className="file-import" style={{ marginBottom: '20px' }}>
+        <div>
+          <p style={{ fontWeight: 'bolder', marginBottom: '10px' }}>
+            Importer un fichier GPX
+          </p>
+        </div>
+        <div>
+          <input type="file" accept=".gpx" onChange={onGpxImport} />
+        </div>
+      </div>
       <div
         style={{
           marginBottom: '62px'
diff --git a/app/javascript/components/MapEditor/SearchInput.js b/app/javascript/components/MapEditor/SearchInput.js
index 65d050103..33101c9d2 100644
--- a/app/javascript/components/MapEditor/SearchInput.js
+++ b/app/javascript/components/MapEditor/SearchInput.js
@@ -47,7 +47,7 @@ const SearchInput = ({ getCoords }) => {
   return (
     <Combobox aria-label="addresses">
       <ComboboxInput
-        placeholder="Saisissez au moins 2 caractères"
+        placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
         className="address-search-input"
         style={{
           font: 'inherit',
diff --git a/package.json b/package.json
index de8edb1a8..459e72faa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@rails/webpacker": "4.2.2",
     "@reach/combobox": "^0.10.0",
     "@sentry/browser": "^5.11.2",
+    "@tmcw/togeojson": "^4.0.0",
     "@turf/area": "^6.0.1",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
diff --git a/spec/controllers/champs/carte_controller_spec.rb b/spec/controllers/champs/carte_controller_spec.rb
index 2e39bc637..b257fa613 100644
--- a/spec/controllers/champs/carte_controller_spec.rb
+++ b/spec/controllers/champs/carte_controller_spec.rb
@@ -79,9 +79,8 @@ describe Champs::CarteController, type: :controller do
       let(:params) do
         {
           champ_id: champ.id,
-          feature_collection: {
-            features: [feature]
-          }
+          features: [feature]
+
         }
       end
 
diff --git a/yarn.lock b/yarn.lock
index 8003cd132..df4585998 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1263,6 +1263,11 @@
     "@sentry/types" "5.15.4"
     tslib "^1.9.3"
 
+"@tmcw/togeojson@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@tmcw/togeojson/-/togeojson-4.0.0.tgz#ee111e4e5b2b5d498d43e27a6c9bf546ce4041cc"
+  integrity sha512-JZXGC1myBPPYb/moq03cYPtErqZKzVR74Cv9C85IuqATHCxHCNOxw4D45vVcYHQnnxG2TQTIR+igzpbFiu/O6Q==
+
 "@turf/area@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@turf/area/-/area-6.0.1.tgz#50ed63c70ef2bdb72952384f1594319d94f3b051"