Skip to content
Snippets Groups Projects
Commit 4e7a69e7 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

moved georef import into modal, improve import button style and code readability

parent 579e06e6
No related branches found
No related tags found
No related merge requests found
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<div v-frag v-if="feature_type && feature_type.geom_type === 'point'"> <div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
<p> <p>
<button <button
@click="showGeoRef = true" @click="toggleGeoRefModal"
id="add-geo-image" id="add-geo-image"
type="button" type="button"
class="ui compact button" class="ui compact button"
...@@ -84,44 +84,69 @@ ...@@ -84,44 +84,69 @@
Vous pouvez utiliser une image géoréférencée pour localiser le Vous pouvez utiliser une image géoréférencée pour localiser le
signalement. signalement.
</p> </p>
<div v-if="showGeoRef">
<p> <div
Attention, si vous avez déjà saisi une géométrie, celle issue de v-if="showGeoRef"
l'image importée l'écrasera. class="ui dimmer modals page transition visible active"
</p> style="display: flex !important"
<div class="field georef-btn"> >
<label>Image (png ou jpeg)</label> <div
<label class="ui icon button" for="image_file"> class="ui mini modal transition visible active"
<i class="file icon"></i> style="display: block !important"
<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"
> >
Importer <i class="close icon" @click="toggleGeoRefModal"></i>
<i class="checkmark icon"></i> <div class="content">
</button> <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> </div>
<p v-if="showGeoPositionBtn"> <p v-if="showGeoPositionBtn">
<button <button
@click="create_point_geoposition()" @click="create_point_geoposition"
id="create-point-geoposition" id="create-point-geoposition"
type="button" type="button"
class="ui compact button" class="ui compact button"
...@@ -471,7 +496,17 @@ export default { ...@@ -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() { handleFileUpload() {
this.erreurUploadMessage = "";
this.file = this.$refs.file.files[0]; this.file = this.$refs.file.files[0];
}, },
...@@ -481,19 +516,17 @@ export default { ...@@ -481,19 +516,17 @@ export default {
let formData = new FormData(); let formData = new FormData();
formData.append("image_file", this.file); formData.append("image_file", this.file);
console.log(">> formData >> ", formData); console.log(">> formData >> ", formData);
let self = this;
axios axios
.post(url, formData, { .post(url, formData, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
}, },
}) })
.then(function (response) { .then((response) => {
console.log("SUCCESS!!", response.data); console.log("SUCCESS!!", response.data);
if (response.data.geom.indexOf("POINT") >= 0) { if (response.data.geom.indexOf("POINT") >= 0) {
let regexp = /POINT\s\((.*)\s(.*)\)/; let regexp = /POINT\s\((.*)\s(.*)\)/;
var arr = regexp.exec(response.data.geom); let arr = regexp.exec(response.data.geom);
let json = { let json = {
type: "Feature", type: "Feature",
geometry: { geometry: {
...@@ -502,21 +535,21 @@ export default { ...@@ -502,21 +535,21 @@ export default {
}, },
properties: {}, properties: {},
}; };
self.updateMap(json); this.updateMap(json);
self.updateGeomField(json); this.updateGeomField(json);
// Set Attachment // Set Attachment
self.addAttachment({ this.addAttachment({
title: "Localisation", title: "Localisation",
info: "", info: "",
id: "loc", id: "loc",
attachment_file: self.file.name, attachment_file: this.file.name,
fileToImport: self.file, fileToImport: this.file,
}); });
} }
}) })
.catch(function (response) { .catch((response) => {
console.log("FAILURE!!"); console.log("FAILURE!!");
self.erreurUploadMessage = response.data.message; this.erreurUploadMessage = response.data.message;
}); });
}, },
...@@ -1002,4 +1035,9 @@ export default { ...@@ -1002,4 +1035,9 @@ export default {
.ui.segment { .ui.segment {
margin: 1rem 0 !important; margin: 1rem 0 !important;
} }
/* override to display buttons under the dimmer of modal */
.leaflet-top,
.leaflet-bottom {
z-index: 800;
}
</style> </style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment