Something went wrong on our end
-
Timothee P authoredTimothee P authored
Feature_edit.vue 17.01 KiB
<template>
<div v-frag>
<div class="fourteen wide column">
{% if action == 'update' %}
<h1>Mise à jour du signalement "{{ feature.title }}"</h1>
{% elif action == 'create' %}
<h1>
Création d'un signalement <small>[{{ feature_type }}]</small>
</h1>
{% endif %}
<form
id="form-feature-edit"
action=""
method="post"
enctype="multipart/form-data"
class="ui form"
>
{% csrf_token %}
<!-- Feature Fields -->
<div class="two fields">
<div class="required field">
<label :for="feature_form.title.id_for_label">{{
feature_form.title.label
}}</label>
<input
type="text"
required
:maxlength="feature_form.title.field.max_length"
:name="feature_form.title.html_name"
:id="feature_form.title.id_for_label"
v-model="feature_form.title.value"
/>
{{ feature_form.title.errors }}
</div>
<div class="required field">
<label :for="feature_form.status.id_for_label">{{
feature_form.status.label
}}</label>
<div class="ui selection dropdown">
<input
type="hidden"
:name="feature_form.status.html_name"
:id="feature_form.status.id_for_label"
:value="feature_form.status.value"
/>
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div
v-for="(x, y) in feature_form.status.field.choices"
:key="y"
class="item"
:data-value="x"
:selected="feature_form.status.value === x"
>
{{ y }}
</div>
</div>
</div>
{{ feature_form.status.errors }}
</div>
</div>
<div class="field">
<label :for="feature_form.description.id_for_label">{{
feature_form.description.label
}}</label>
<textarea
:name="feature_form.description.html_name"
rows="5"
v-model="feature_form.description.value"
></textarea>
{{ feature_form.description.errors }}
</div>
<!-- Geom Field -->
<div class="field">
<label for="feature_form.geom.id_for_label">{{
feature_form.geom.label
}}</label>
<!-- Import GeoImage -->
{% if feature_type.geom_type == 'point' %}
<p>
<button id="add-geo-image" type="button" class="ui compact button">
<i class="file image icon"></i>Importer une image géoréférencée
</button>
Vous pouvez utiliser une image géoréférencée pour localiser le
signalement.
</p>
<p>
<button
id="create-point-geoposition"
type="button"
class="ui compact button"
>
<i class="ui map marker alternate icon"></i>Positionner le
signalement à partir de votre géolocalisation
</button>
</p>
<span id="erreur-geolocalisation" style="display: none">
<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>
</div>
<br />
</span>
{% endif %}
{{ feature_form.geom.errors }}
<!-- Map -->
<input
type="hidden"
:name="feature_form.geom.html_name"
:id="feature_form.geom.id_for_label"
v-model="feature_form.geom.value"
/>
<div class="ui tab active map-container" data-tab="map">
<div id="map"></div>
{% if serialized_base_maps|length > 0 %} {% include
"geocontrib/map-layers/sidebar-layers.html" with
basemaps=serialized_base_maps layers=serialized_layers
project=project.slug%} {% endif %}
</div>
</div>
<!-- Extra Fields -->
<div class="ui horizontal divider">DONNÉES MÉTIER</div>
<div v-for="field in extra_form" :key="field" class="field">
{% if field.field.widget.attrs|lookup:'field_type' == 'char' %}
<label for="field.name">{{ field.label }}</label>
<input
type="text"
:name="field.name"
:id="field.name"
v-model="field.value"
/>
{% elif field.field.widget.attrs|lookup:'field_type' == 'list' %}
<label for="field.name">{{ field.label }}</label>
<div class="ui selection dropdown">
<input
type="hidden"
:name="field.name"
:id="field.name"
v-model="field.value"
/>
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
{% for x,y in field.field.choices %}
<div class="item" :data-value="x" :selected="field.value === x">
{{ y }}
</div>
{% endfor %}
</div>
</div>
{% elif field.field.widget.attrs|lookup:'field_type' == 'integer' %}
<label for="field.name">{{ field.label }}</label>
<div class="ui input">
<input
type="number"
:name="field.name"
:id="field.name"
v-model="field.value"
/>
</div>
{% elif field.field.widget.attrs|lookup:'field_type' == 'boolean' %}
<div class="ui checkbox">
<input
type="checkbox"
:checked="field.value"
:name="field.name"
:id="field.name"
/>
<label for="field.name">{{ field.label }}</label>
</div>
{% elif field.field.widget.attrs|lookup:'field_type' == 'date' %}
<label for="field.name">{{ field.label }}</label>
<input
type="date"
:name="field.name"
:id="field.name"
v-model="field.value"
/>
{% elif field.field.widget.attrs|lookup:'field_type' == 'decimal' %}
<label for="field.name">{{ field.label }}</label>
<div class="ui input">
<input
type="number"
step=".01"
:name="field.name"
:id="field.name"
v-model="field.value"
/>
</div>
{% elif field.field.widget.attrs|lookup:'field_type' == 'text' %}
<label :for="field.name">{{ field.label }}</label>
<textarea
:name="field.name"
rows="3"
v-model="field.value"
></textarea>
{% endif %}
{{ field.errors }}
</div>
{% endfor %}
<!-- Pièces jointes -->
<div class="ui horizontal divider">PIÈCES JOINTES</div>
{{ attachment_formset.non_form_errors }}
<!--
<div id="formsets-attachment">
{{ attachment_formset.management_form }} -->
<!-- {% if not form.DELETE.value %} // ? nécessaire ou comment le remettre ?-->
<!--
<div
v-frag
v-for="form in attachment_formset"
:key="form.title.label"
>
<span v-for="hidden in form.hidden_fields" :key="hidden">
{{ hidden }}
</span>
<div class="ui teal segment">
<h4>
Pièce jointe
<button
class="
ui
small
compact
right
floated
icon
button
remove-formset
"
type="button"
>
<i class="ui times icon"></i>
</button>
</h4>
{{ form.errors }}
<div class="visible-fields">
<div class="two fields">
<div class="required field">
<label :for="form.title.id_for_label">{{
form.title.label
}}</label>
<input
type="text"
required
:maxlength="form.title.field.max_length"
:name="form.title.html_name"
:id="form.title.id_for_label"
v-model="form.title.value"
/>
{{ form.title.errors }}
</div>
<div class="required field">
<label>Fichier (PDF, PNG, JPEG)</label>
<label
class="ui icon button"
:for="form.attachment_file.id_for_label"
>
<i class="file icon"></i>
{% if form.attachment_file.value %}
<span class="label">{{
form.attachment_file.value
}}</span>
{% else %}
<span class="label">Sélectionner un fichier ...</span>
{% endif %}
</label>
<input
@change="processImgData"
type="file"
:accept="IMAGE_FORMAT"
style="display: none"
:name="form.attachment_file.html_name"
class="image_file"
:id="form.attachment_file.id_for_label"
/> -->
<!-- v-model="form.attachment_file.value" -->
<!-- {{ form.attachment_file.errors }}
</div>
</div>
<div class="field">
<label for="form.info.id_for_label">{{
form.info.label
}}</label>
<textarea
name="form.info.html_name"
rows="5"
v-model="form.info.value"
></textarea>
{{ form.info.errors }}
</div>
</div>
<input
class="delete-hidden-field"
type="checkbox"
:name="form.DELETE.html_name"
:id="form.DELETE.id_for_label"
/>
</div>
</div>
</div> -->
<button
id="add-attachment"
type="button"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Ajouter une pièce jointe
</button>
<!-- Signalements liés -->
<!-- <div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
{{ linked_formset.non_form_errors }}
<div id="formsets-link">
{{ linked_formset.management_form }}
<div v-for="(form, index) of linked_formset" :key="index"> -->
<!-- {% if not form.DELETE.value %} -->
<!-- <span v-for="hidden in form.hidden_fields" :key="hidden">
{{ hidden }}
</span>
<div class="ui teal segment">
<h4>
Liaison
<button
class="
ui
small
compact
right
floated
icon
button
remove-formset
"
type="button"
>
<i class="ui times icon"></i>
</button>
</h4>
{{ form.errors }}
<div class="visible-fields">
<div class="two fields">
<div class="required field">
<label for="form.relation_type.id_for_label">{{
form.relation_type.label
}}</label>
<div class="ui selection dropdown">
<input
type="hidden"
:name="form.relation_type.html_name"
:id="form.relation_type.id_for_label"
v-model="form.relation_type.value"
/>
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div
v-for="(x, y) in form.relation_type.field.choices"
:key="y"
class="item"
:data-value="x"
:selected="form.relation_type.value === x"
>
{{ y }}
</div>
</div>
</div>
{{ form.relation_type.errors }}
</div>
<div class="required field">
<label for="form.feature_to.id_for_label">{{
form.feature_to.label
}}</label>
<div class="ui selection search dropdown">
<input
type="hidden"
:name="form.feature_to.html_name"
:id="form.feature_to.id_for_label"
v-model="form.feature_to.value"
/>
<div class="default text"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div
v-for="(x, y) in form.feature_to.field.choices"
:key="y"
class="item"
:data-value="x"
:selected="form.feature_to.value === x"
>
{{ y }}
</div>
</div>
</div>
{{ form.feature_to.errors }}
</div>
</div>
</div>
<input
class="delete-hidden-field"
type="checkbox"
:name="form.DELETE.html_name"
:id="form.DELETE.id_for_label"
/>
</div>
{% endif %}
</div>
</div> -->
<button
id="add-link"
type="button"
class="ui compact basic button button-hover-green"
>
<i class="ui plus icon"></i>Ajouter une liaison
</button>
<div class="ui divider"></div>
<button type="submit" class="ui teal icon button">
<i class="white save icon"></i> Enregistrer les changements
</button>
</form>
</div>
<Project-edit-modal />
</div>
</template>
<script>
import frag from "vue-frag";
import Project_edit_modal from "@/components/feature/Feature_edit_modal";
export default {
name: "Feature_edit",
directives: {
frag,
},
components: {
"Project-edit-modal": Project_edit_modal,
},
data() {
return {
feature: {
title: "test",
},
feature_type: "point",
feature_form: {
title: {
field: {
max_length: 30,
},
},
status: {
id_for_label: "id_for_label",
field: {
choices: [],
},
},
description: {
id_for_label: "id_for_label",
},
geom: {
label: "label",
},
},
extra_form: [],
attachment_formset: {
non_forms_errors: null,
form: [
{
title: "test",
},
],
},
hidden: null,
linked_formset: {
non_form_errors: "test",
management_form: "test",
form: [
{
title: "test",
relation_type: "test"
},
],
},
};
},
methods: {
processImgData(e) {
// * read image file
const file = e.target.files[0];
if (file) {
this.form.attachment_file.value = file.name;
// this.thumbnail.value = file.name;
}
let reader = new FileReader();
let _this = this;
reader.onload = function (e) {
//_this.form.instance.thumbnail.url = e.target.result;
_this.form.attachment_file.value = e.target.result;
};
reader.readAsDataURL(file);
// todo : send file to the back (?)
},
},
};
// TODO : add script from django and convert:
</script>
<style>
#map {
height:70vh;
width:100%;
border: 1px solid grey;
}
@media only screen and (max-width: 767px) {
#map {
height: 80vh;
}
}
</style>