diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue index 8ea11a374d2b479e2b5f15cd5ff689a56618ae1c..a9ca6721ad5aaf929acd9d15dbf332a5568c9105 100644 --- a/src/views/feature/Feature_edit.vue +++ b/src/views/feature/Feature_edit.vue @@ -74,7 +74,7 @@ <div v-frag v-if="feature_type && feature_type.geom_type === 'point'"> <p> <button - @click="showGeoRef = true" + @click="toggleGeoRefModal" id="add-geo-image" type="button" class="ui compact button" @@ -84,44 +84,69 @@ 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 georef-btn"> - <label>Image (png ou jpeg)</label> - <label class="ui icon button" for="image_file"> - <i class="file icon"></i> - <span class="label">{{ geoRefFileLabel }}</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" + + <div + v-if="showGeoRef" + class="ui dimmer modals page transition visible active" + style="display: flex !important" + > + <div + class="ui mini modal transition visible active" + style="display: block !important" > - Importer - <i class="checkmark icon"></i> - </button> + <i class="close icon" @click="toggleGeoRefModal"></i> + <div class="content"> + <h3>Importer une image géoréférencée</h3> + <form + id="form-geo-image" + class="ui form" + enctype="multipart/form-data" + > + <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 georef-btn"> + <label>Image (png ou jpeg)</label> + <label class="ui icon button" for="image_file"> + <i class="file icon"></i> + <span class="label">{{ geoRefFileLabel }}</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 compact button', + file && !erreurUploadMessage ? 'green' : 'disabled', + { red: erreurUploadMessage }, + ]" + > + <i class="plus icon"></i> + Importer + </button> + </form> + </div> + </div> </div> + <p v-if="showGeoPositionBtn"> <button - @click="create_point_geoposition()" + @click="create_point_geoposition" id="create-point-geoposition" type="button" class="ui compact button" @@ -471,7 +496,17 @@ export default { } }, + toggleGeoRefModal() { + if (this.showGeoRef) { + //* when popup closes, empty form + this.erreurUploadMessage = ""; + this.file = null; + } + this.showGeoRef = !this.showGeoRef; + }, + handleFileUpload() { + this.erreurUploadMessage = ""; this.file = this.$refs.file.files[0]; }, @@ -481,19 +516,17 @@ export default { let formData = new FormData(); formData.append("image_file", this.file); console.log(">> formData >> ", formData); - let self = this; axios .post(url, formData, { headers: { "Content-Type": "multipart/form-data", }, }) - .then(function (response) { + .then((response) => { console.log("SUCCESS!!", response.data); if (response.data.geom.indexOf("POINT") >= 0) { let regexp = /POINT\s\((.*)\s(.*)\)/; - var arr = regexp.exec(response.data.geom); - + let arr = regexp.exec(response.data.geom); let json = { type: "Feature", geometry: { @@ -502,21 +535,21 @@ export default { }, properties: {}, }; - self.updateMap(json); - self.updateGeomField(json); + this.updateMap(json); + this.updateGeomField(json); // Set Attachment - self.addAttachment({ + this.addAttachment({ title: "Localisation", info: "", id: "loc", - attachment_file: self.file.name, - fileToImport: self.file, + attachment_file: this.file.name, + fileToImport: this.file, }); } }) - .catch(function (response) { + .catch((response) => { console.log("FAILURE!!"); - self.erreurUploadMessage = response.data.message; + this.erreurUploadMessage = response.data.message; }); }, @@ -1002,4 +1035,9 @@ export default { .ui.segment { margin: 1rem 0 !important; } +/* override to display buttons under the dimmer of modal */ +.leaflet-top, +.leaflet-bottom { + z-index: 800; +} </style>