Ajout du tri et de la pagination sur les features

src/views/feature/Feature_edit.vue

@@ -65,7 +65,7 @@
           <!-- Import GeoImage -->
           <div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
             <p>
-              <button
+              <button @click="showGeoRef=true;"
                 id="add-geo-image"
                 type="button"
                 class="ui compact button"
@@ -75,9 +75,25 @@
               Vous pouvez utiliser une image géoréférencée pour localiser le
               signalement.
             </p>
-
+            <div v-if="showGeoRef"> 
+                <p>Attention, si vous avez déjà saisi une géométrie, celle issue de l'image importée l'écrasera.</p>
+                <div class="field">
+                  <label>Image (png ou jpeg)</label>
+                  <label class="ui icon button" for="image_file">
+                    <i class="file icon"></i>
+                    <span class="label">Sélectionner une image ...</span>
+                  </label>
+                  <input type="file" accept="image/jpeg, image/png" style="display:none;" ref="file" v-on:change="handleFileUpload()"
+                    name="image_file" class="image_file" id="image_file" >
+                  <p class="error-message" style="color:red;">{{ erreurUploadMessage }}</p>
+                </div>
+                <button @click="georeferencement()" id="get-geom-from-image-file" type='button' class="ui positive right labeled icon button">
+                  Importer
+                  <i class="checkmark icon"></i>
+                </button>
+          </div>
             <p>
-              <button
+              <button @click="create_point_geoposition()"
                 id="create-point-geoposition"
                 type="button"
                 class="ui compact button"
@@ -86,13 +102,13 @@
                 signalement à partir de votre géolocalisation
               </button>
             </p>
-            <span id="erreur-geolocalisation" style="display: none">
+            <span id="erreur-geolocalisation" v-if="erreurGeolocalisationMessage">
               <div class="ui negative message">
                 <div class="header">
                   Une erreur est survenue avec la fonctionnalité de
                   géolocalisation
                 </div>
-                <p id="erreur-geolocalisation-message"></p>
+                <p id="erreur-geolocalisation-message">{{ erreurGeolocalisationMessage }}</p>
               </div>
               <br />
             </span>
@@ -259,6 +275,11 @@ export default {
 
   data() {
     return {
+      map:null,
+      file:null,
+      showGeoRef:false,
+      erreurGeolocalisationMessage:null,
+      erreurUploadMessage:null,
       attachmentDataKey: 0,
       linkedDataKey: 0,
       form: {
@@ -316,6 +337,54 @@ export default {
       }
       return field;
     },
+    create_point_geoposition() {
+
+      function success(position) {
+        const latitude  = position.coords.latitude
+        const longitude = position.coords.longitude
+
+        var layer = L.circleMarker([latitude, longitude])
+        this.add_layer_call_back(layer)
+        this.map.setView([latitude, longitude]);
+      }
+
+      function error(err) {
+        this.erreurGeolocalisationMessage=err.message;
+
+      }
+      this.erreurGeolocalisationMessage=null;
+      if (!navigator.geolocation) {
+        this.erreurGeolocalisationMessage="La géolocalisation n'est pas supportée par votre navigateur.";
+      } else {
+        navigator.geolocation.getCurrentPosition(success.bind(this), error.bind(this));
+      }
+
+    },
+    handleFileUpload() {
+      this.file = this.$refs.file.files[0];
+      console.log('>>>> 1st element in files array >>>> ', this.file);
+    },
+    georeferencement(){
+      console.log("georeferencement");
+      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}exif-geom-reader/`;
+      let formData = new FormData();
+      formData.append('file', this.file);
+      console.log('>> formData >> ', formData);
+      let self=this;
+      axios.post(url,
+          formData, {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          }
+        ).then(function () {
+          console.log('SUCCESS!!');
+        })
+        .catch(function () {
+          console.log('FAILURE!!');
+          self.erreurUploadMessage='FAILURE!!';
+        });
+    },
 
     initiateExtraForms() {
       let extraFormWithOptions;