diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue index 0d4c5cb3beedfa3e8a5f05efaca9ffcbca00649d..4f2dd415aaa2cd704217fb84fa1f1bcbd948fd2d 100644 --- a/src/views/feature/Feature_edit.vue +++ b/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; diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue index d5b6d432e6b58134d8a44576f2d79530fb672e19..da34b466b1e5928cbbfbb5a463ca241e072ba517 100644 --- a/src/views/feature/Feature_list.vue +++ b/src/views/feature/Feature_list.vue @@ -1,6 +1,6 @@ <template> <div class="fourteen wide column"> - <script type="application/javascript" src="/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js"></script> + <script type="application/javascript" :src="baseUrl+'/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'"></script> <div class="feature-list-container ui grid"> <div class="four wide column"> <h1>Signalements</h1> @@ -303,6 +303,7 @@ export default { geojsonFeatures:[], filterStatus:null, filterType:null, + baseUrl:this.$store.state.configuration.BASE_URL, map:null, zoom:null, lat:null, @@ -509,23 +510,6 @@ export default { }.bind(this), 1000) - - // Check if at least one basemap exist. If not, use the default application - const basemaps = undefined; //JSON.parse(document.getElementById('basemaps').textContent); - if (!basemaps || (basemaps && basemaps.length === 0)) { - mapUtil.addLayers( - null, - this.$store.state.configuration.DEFAULT_BASE_MAP.SERVICE, - this.$store.state.configuration.DEFAULT_BASE_MAP.OPTIONS - ); - } - setTimeout( - function () { - this.addGeocoders(); - }.bind(this), - 1000 - ); - this.form.type.choices = [ //* converting Set to an Array with spread "..." ...new Set(this.features.map((el) => el.feature_type.title)), //* use Set to eliminate duplicate values