| 3844 |
idir |
1 |
import {WidgetsSaisiesCommun,utils} from './WidgetsSaisiesCommun.js';
|
|
|
2 |
import {valOk} from './Utils.js';
|
|
|
3 |
|
| 3638 |
delphine |
4 |
/**
|
|
|
5 |
* Constructeur WidgetSaisie par défaut
|
|
|
6 |
*/
|
| 3844 |
idir |
7 |
function WidgetSaisie( ) {
|
|
|
8 |
if ( valOk(widgetProp) ) {
|
|
|
9 |
this.urlWidgets = widgetProp.urlWidgets;
|
|
|
10 |
this.projet = widgetProp.projet;
|
|
|
11 |
this.idProjet = widgetProp.idProjet;
|
|
|
12 |
this.tagsMotsCles = widgetProp.tagsMotsCles;
|
|
|
13 |
this.mode = widgetProp.mode;
|
|
|
14 |
this.langue = widgetProp.langue;
|
|
|
15 |
this.serviceAnnuaireIdUrl = widgetProp.serviceAnnuaireIdUrl;
|
|
|
16 |
this.serviceNomCommuneUrl = widgetProp.serviceNomCommuneUrl;
|
|
|
17 |
this.serviceNomCommuneUrlAlt = widgetProp.serviceNomCommuneUrlAlt;
|
|
|
18 |
this.debug = widgetProp.debug;
|
|
|
19 |
this.html5 = widgetProp.html5;
|
|
|
20 |
this.serviceSaisieUrl = widgetProp.serviceSaisieUrl;
|
|
|
21 |
this.serviceObsUrl = widgetProp.serviceObsUrl;
|
|
|
22 |
this.chargementImageIconeUrl = widgetProp.chargementImageIconeUrl;
|
|
|
23 |
this.pasDePhotoIconeUrl = widgetProp.pasDePhotoIconeUrl;
|
|
|
24 |
this.autocompletionElementsNbre = widgetProp.autocompletionElementsNbre;
|
|
|
25 |
this.serviceAutocompletionNomSciUrl = widgetProp.serviceAutocompletionNomSciUrl;
|
|
|
26 |
this.serviceAutocompletionNomSciUrlTpl = widgetProp.serviceAutocompletionNomSciUrlTpl;
|
|
|
27 |
this.dureeMessage = widgetProp.dureeMessage;
|
|
|
28 |
this.obsMaxNbre = widgetProp.obsMaxNbre;
|
|
|
29 |
this.tagImg = widgetProp.tagImg;
|
|
|
30 |
this.tagObs = widgetProp.tagObs;
|
|
|
31 |
this.obsId = widgetProp.obsId;
|
|
|
32 |
this.nomSciReferentiel = widgetProp.nomSciReferentiel;
|
|
|
33 |
this.especeImposee = widgetProp.especeImposee;
|
|
|
34 |
this.infosEspeceImposee = widgetProp.infosEspeceImposee;
|
|
|
35 |
this.referentielImpose = widgetProp.referentielImpose;
|
|
|
36 |
this.isTaxonListe = widgetProp.isTaxonListe;
|
| 3638 |
delphine |
37 |
}
|
|
|
38 |
this.urlRacine = window.location.origin;
|
|
|
39 |
this.obsNbre = 0;
|
|
|
40 |
this.nbObsEnCours = 1;
|
|
|
41 |
this.totalObsATransmettre = 0;
|
|
|
42 |
this.nbObsTransmises = 0;
|
|
|
43 |
this.observer = null;
|
|
|
44 |
this.isASL = false;
|
| 3844 |
idir |
45 |
this.geoloc = {};
|
| 3638 |
delphine |
46 |
}
|
|
|
47 |
WidgetSaisie.prototype = new WidgetsSaisiesCommun();
|
|
|
48 |
|
|
|
49 |
/**
|
|
|
50 |
* Initialise le formulaire, les validateurs, les listes de complétion...
|
|
|
51 |
*/
|
|
|
52 |
WidgetSaisie.prototype.initForm = function() {
|
|
|
53 |
this.initFormConnection();
|
| 3844 |
idir |
54 |
if ( valOk( this.obsId ) ) {
|
| 3638 |
delphine |
55 |
this.chargerInfoObs();
|
|
|
56 |
}
|
|
|
57 |
if( this.isTaxonListe ) {
|
|
|
58 |
this.initFormTaxonListe();
|
|
|
59 |
} else {
|
|
|
60 |
this.ajouterAutocompletionNoms();
|
|
|
61 |
}
|
|
|
62 |
// au rafraichissement de la page,
|
|
|
63 |
// les input date semblent conserver la valeur entrée précedemment
|
|
|
64 |
// c'est voulu après la création d'une obs mais pas quand la page est actualisée
|
|
|
65 |
// Déjà tenté: onbeforeunload avec un location.reload(true) n'a pas permis de le faire
|
|
|
66 |
$( 'input[type=date]' ).each( function () {
|
| 3844 |
idir |
67 |
( valOk( $( this ).data( 'default' ) ) ) ? $( this ).val( $( this ).data( 'default' ) ) : $( this ).val( '' );
|
| 3638 |
delphine |
68 |
});
|
|
|
69 |
this.configurerFormValidator();
|
|
|
70 |
this.definirReglesFormValidator();
|
|
|
71 |
|
|
|
72 |
if( this.especeImposee ) {
|
|
|
73 |
$( '#taxon' ).attr( 'disabled', 'disabled' );
|
|
|
74 |
$( '#taxon-input-groupe' ).attr( 'title', '' );
|
|
|
75 |
// Bricolage cracra pour avoir le nom retenu avec auteur (nom_retenu.libelle ne le mentionne pas)
|
| 3844 |
idir |
76 |
const infosEspeceImposee = $.parseJSON( this.infosEspeceImposee );
|
|
|
77 |
let nomRetenuComplet = infosEspeceImposee.nom_retenu_complet;
|
|
|
78 |
const debutAnneRefBiblio = nomRetenuComplet.indexOf( ' [' );
|
|
|
79 |
|
| 3638 |
delphine |
80 |
if ( -1 !== debutAnneRefBiblio ) {
|
|
|
81 |
nomRetenuComplet = nomRetenuComplet.substr( 0, debutAnneRefBiblio );
|
|
|
82 |
}
|
|
|
83 |
// fin bricolage cracra
|
| 3844 |
idir |
84 |
const infosAssociee = {
|
| 3638 |
delphine |
85 |
label : infosEspeceImposee.nom_sci_complet,
|
|
|
86 |
value : infosEspeceImposee.nom_sci_complet,
|
|
|
87 |
nt : infosEspeceImposee.num_taxonomique,
|
|
|
88 |
nomSel : infosEspeceImposee.nom_sci,
|
|
|
89 |
nomSelComplet : infosEspeceImposee.nom_sci_complet,
|
|
|
90 |
numNomSel : infosEspeceImposee.id,
|
|
|
91 |
nomRet : nomRetenuComplet,
|
|
|
92 |
numNomRet : infosEspeceImposee['nom_retenu.id'],
|
|
|
93 |
famille : infosEspeceImposee.famille,
|
|
|
94 |
retenu : ( 'false' === infosEspeceImposee.retenu ) ? false : true
|
|
|
95 |
};
|
|
|
96 |
$( '#taxon' ).data( infosAssociee );
|
|
|
97 |
}
|
|
|
98 |
};
|
|
|
99 |
|
|
|
100 |
/**
|
|
|
101 |
* Initialise les écouteurs d'événements
|
|
|
102 |
*/
|
|
|
103 |
WidgetSaisie.prototype.initEvts = function() {
|
|
|
104 |
// identité
|
|
|
105 |
this.initEvtsConnection();
|
|
|
106 |
// on location, initialisation de la géoloc
|
|
|
107 |
this.initEvtsGeoloc();
|
|
|
108 |
// Sur téléchargement image
|
|
|
109 |
this.initEvtsFichier();
|
|
|
110 |
|
|
|
111 |
$( '#referentiel' ).on( 'change', this.surChangementReferentiel.bind( this ) );
|
|
|
112 |
// Création / Suppression / Transmission des obs
|
|
|
113 |
// Défilement des miniatures dans le résumé obs
|
|
|
114 |
this.initEvtsObs();
|
|
|
115 |
// Alertes et aides
|
|
|
116 |
this.initEvtsAlertes();
|
|
|
117 |
// message avant de quitter le formulaire
|
|
|
118 |
this.confirmerSortie();
|
|
|
119 |
};
|
|
|
120 |
|
|
|
121 |
// Identité Observateur par courriel
|
|
|
122 |
WidgetSaisie.prototype.requeterIdentiteCourriel = function() {
|
| 3844 |
idir |
123 |
const lthis = this,
|
|
|
124 |
courriel = $( '#courriel' ).val(),
|
|
|
125 |
urlAnnuaire = this.serviceAnnuaireIdUrl + courriel;
|
| 3638 |
delphine |
126 |
|
| 3844 |
idir |
127 |
if ( valOk( courriel ) ) {
|
| 3638 |
delphine |
128 |
$.ajax({
|
|
|
129 |
url : urlAnnuaire,
|
|
|
130 |
type : 'GET',
|
|
|
131 |
success : function( data, textStatus, jqXHR ) {
|
|
|
132 |
if ( lthis.debug ) {
|
|
|
133 |
console.log( 'SUCCESS: ' + textStatus );
|
|
|
134 |
}
|
| 3844 |
idir |
135 |
if ( valOk( data ) && valOk( data[courriel] ) ) {
|
|
|
136 |
const infos = data[courriel];
|
| 3638 |
delphine |
137 |
lthis.surSuccesCompletionCourriel( infos, courriel );
|
|
|
138 |
} else {
|
|
|
139 |
lthis.surErreurCompletionCourriel();
|
|
|
140 |
}
|
|
|
141 |
},
|
|
|
142 |
error : function( jqXHR, textStatus, errorThrown ) {
|
|
|
143 |
if ( lthis.debug ) {
|
|
|
144 |
console.log( 'ERREUR: '+ textStatus );
|
|
|
145 |
}
|
|
|
146 |
lthis.surErreurCompletionCourriel();
|
|
|
147 |
},
|
|
|
148 |
complete : function( jqXHR, textStatus ) {
|
|
|
149 |
if ( lthis.debug ) {
|
|
|
150 |
console.log( 'COMPLETE: '+ textStatus );
|
|
|
151 |
}
|
|
|
152 |
}
|
|
|
153 |
});
|
|
|
154 |
}
|
|
|
155 |
};
|
|
|
156 |
|
|
|
157 |
// se déclanche quand on choisit "Observation sans inscription" mais que le mail entré est incrit à Tela
|
|
|
158 |
WidgetSaisie.prototype.surSuccesCompletionCourriel = function( infos, courriel ) {
|
|
|
159 |
if ( $( '#utilisateur-connecte' ).hasClass( 'hidden' ) ) {// si quelque chose a foiré après actualisation
|
| 3844 |
idir |
160 |
if ( !valOk( $( '#warning-identite' ) ) ) {
|
| 3638 |
delphine |
161 |
$( '#zone-courriel' ).before( '<p id="warning-identite" class="warning"><i class="fas fa-exclamation-triangle"></i> ' + this.msgTraduction( 'courriel-connu' ) + '</p>' );
|
|
|
162 |
}
|
|
|
163 |
$( '#inscription, #zone-prenom-nom, #zone-courriel-confirmation' ).addClass( 'hidden' );
|
|
|
164 |
$( '#prenom, #nom, #courriel_confirmation' ).attr( 'disabled', 'disabled' );
|
|
|
165 |
$( '.nav.control-group' ).addClass( 'error' );
|
|
|
166 |
}
|
|
|
167 |
};
|
|
|
168 |
|
|
|
169 |
// se déclanche quand on choisit "Observation sans inscription" et qu'effectivement le mail n'est pas connu de Tela
|
|
|
170 |
WidgetSaisie.prototype.surErreurCompletionCourriel = function() {
|
|
|
171 |
$( '#creation-compte, #zone-prenom-nom, #zone-courriel-confirmation' ).removeClass( 'hidden' );
|
|
|
172 |
$( '#warning-identite' ).remove();
|
|
|
173 |
$( '.nav.control-group' ).removeClass( 'error' );
|
|
|
174 |
$( '#prenom, #nom, #courriel_confirmation' ).val( '' ).removeAttr( 'disabled' );
|
|
|
175 |
};
|
|
|
176 |
|
|
|
177 |
WidgetSaisie.prototype.testerLancementRequeteIdentite = function( event ) {
|
| 3844 |
idir |
178 |
if ( valOk( event.which, true, 13 ) ) {
|
| 3638 |
delphine |
179 |
this.requeterIdentiteCourriel();
|
|
|
180 |
event.preventDefault();
|
|
|
181 |
event.stopPropagation();
|
|
|
182 |
}
|
|
|
183 |
};
|
|
|
184 |
|
|
|
185 |
WidgetSaisie.prototype.reduireVoletIdentite = function() {
|
|
|
186 |
if ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() && $( '#courriel_confirmation' ).valid() ) {
|
|
|
187 |
$( '#bouton-connexion, #creation-compte' ).addClass( 'hidden' );
|
|
|
188 |
$( '#bienvenue').removeClass( 'hidden' );
|
|
|
189 |
$( '#inscription, #zone-courriel' ).addClass( 'hidden' );
|
| 3844 |
idir |
190 |
if ( valOk( $( '#nom' ).val() ) && valOk( $( '#prenom' ).val() ) ) {
|
| 3638 |
delphine |
191 |
$( '#zone-prenom-nom' ).addClass( 'hidden' );
|
|
|
192 |
$( '#bienvenue-prenom' ).text( ' ' + $( '#prenom' ).val() );
|
|
|
193 |
$( '#bienvenue-nom' ).text( ' ' + $( '#nom' ).val() );
|
|
|
194 |
} else {
|
|
|
195 |
$( '#zone-prenom-nom' ).removeClass( 'hidden' );
|
|
|
196 |
$( '#bienvenue-prenom,#bienvenue-nom' ).text( '' );
|
|
|
197 |
}
|
|
|
198 |
} else {
|
|
|
199 |
$( '#bouton-connexion, #creation-compte' ).removeClass( 'hidden' );
|
|
|
200 |
$( '#bienvenue').addClass( 'hidden' );
|
|
|
201 |
}
|
|
|
202 |
};
|
|
|
203 |
|
|
|
204 |
|
|
|
205 |
WidgetSaisie.prototype.formaterNom = function() {
|
|
|
206 |
$( '#nom' ).val( $( '#nom' ).val().toUpperCase() );
|
|
|
207 |
};
|
|
|
208 |
|
|
|
209 |
WidgetSaisie.prototype.formaterPrenom = function() {
|
| 3844 |
idir |
210 |
const prenom = [],
|
| 3638 |
delphine |
211 |
mots = $( '#prenom' ).val().split( ' ' ),
|
|
|
212 |
motsLength = mots.length;
|
|
|
213 |
|
| 3844 |
idir |
214 |
for ( let i = 0; i < motsLength; i++ ) {
|
|
|
215 |
let mot = mots[i],
|
|
|
216 |
motMajuscule = '';
|
|
|
217 |
|
| 3638 |
delphine |
218 |
if ( 0 <= mot.indexOf( '-' ) ) {
|
| 3844 |
idir |
219 |
const prenomCompose = new Array(),
|
|
|
220 |
motsComposes = mot.split( '-' ),
|
| 3638 |
delphine |
221 |
motsComposesLength = motsComposes.length;
|
|
|
222 |
|
| 3844 |
idir |
223 |
for ( let j = 0; j < motsComposesLength; j++ ) {
|
|
|
224 |
const motSimple = motsComposes[j];
|
|
|
225 |
|
|
|
226 |
motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
|
| 3638 |
delphine |
227 |
prenomCompose.push( motMajuscule );
|
|
|
228 |
}
|
|
|
229 |
prenom.push( prenomCompose.join( '-' ) );
|
|
|
230 |
} else {
|
| 3844 |
idir |
231 |
motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
|
| 3638 |
delphine |
232 |
prenom.push( motMajuscule );
|
|
|
233 |
}
|
|
|
234 |
}
|
|
|
235 |
$( '#prenom' ).val( prenom.join( ' ' ) );
|
|
|
236 |
};
|
|
|
237 |
|
|
|
238 |
WidgetSaisie.prototype.bloquerCopierCollerCourriel = function() {
|
|
|
239 |
this.afficherPanneau( '#dialogue-bloquer-copier-coller' );
|
| 3844 |
idir |
240 |
|
| 3638 |
delphine |
241 |
return false;
|
|
|
242 |
};
|
|
|
243 |
|
|
|
244 |
// Préchargement des infos-obs ************************************************/
|
|
|
245 |
WidgetSaisie.prototype.chargerInfoObs = function() {
|
| 3844 |
idir |
246 |
const lthis = this,
|
|
|
247 |
urlObs = this.serviceObsUrl + '/' + this.obsId;
|
| 3638 |
delphine |
248 |
|
|
|
249 |
$.ajax({
|
|
|
250 |
url: urlObs,
|
|
|
251 |
type: 'GET',
|
|
|
252 |
success: function( data, textStatus, jqXHR ) {
|
| 3844 |
idir |
253 |
if ( valOk( data ) ) {
|
| 3638 |
delphine |
254 |
lthis.prechargerForm( data );
|
|
|
255 |
} else {
|
|
|
256 |
lthis.surErreurChargementInfosObs.bind( lthis );
|
|
|
257 |
}
|
|
|
258 |
},
|
|
|
259 |
error: function( jqXHR, textStatus, errorThrown ) {
|
|
|
260 |
lthis.surErreurChargementInfosObs();
|
|
|
261 |
}
|
|
|
262 |
});
|
|
|
263 |
};
|
|
|
264 |
|
|
|
265 |
// @TODO faire mieux que ça !
|
|
|
266 |
WidgetSaisie.prototype.surErreurChargementInfosObs = function() {
|
| 3844 |
idir |
267 |
utils.activerModale( this.msgTraduction( 'erreur-chargement' ) );
|
| 3638 |
delphine |
268 |
};
|
|
|
269 |
|
|
|
270 |
WidgetSaisie.prototype.prechargerForm = function( data ) {
|
|
|
271 |
$( '#milieu' ).val( data.milieu );
|
|
|
272 |
$( '#commune-nom' ).text( data.zoneGeo );
|
|
|
273 |
if( data.hasOwnProperty( 'codeZoneGeo' ) ) {
|
|
|
274 |
// TODO: trouver un moyen qui fonctionne lorsqu'on aura d'autres référentiels que INSEE
|
|
|
275 |
$( '#commune-insee' ).text( data.codeZoneGeo.replace( 'INSEE-C:', '' ) );
|
|
|
276 |
}
|
|
|
277 |
|
|
|
278 |
if( data.hasOwnProperty( 'latitude' ) && data.hasOwnProperty( 'longitude' ) ) {
|
|
|
279 |
// $cartoRemplacee = $( '#tb-geolocation' ),
|
|
|
280 |
// suffixe = '',
|
|
|
281 |
// layer = 'osm',
|
|
|
282 |
// zoomInit = 18
|
| 3844 |
idir |
283 |
const typeLocalisation = $( '#top' ).data( 'type-loc' ),
|
|
|
284 |
donnesResetCarto = {
|
| 3638 |
delphine |
285 |
latitude : data.latitude,
|
|
|
286 |
longitude : data.longitude,
|
| 3844 |
idir |
287 |
typeLocalisation : typeLocalisation,
|
|
|
288 |
zoom : 18
|
| 3638 |
delphine |
289 |
};
|
|
|
290 |
this.transfererCarto( donnesResetCarto );
|
|
|
291 |
}
|
|
|
292 |
};
|
|
|
293 |
|
|
|
294 |
// Ajouter Obs ****************************************************************/
|
|
|
295 |
/**
|
|
|
296 |
* Retourne un Array contenant les valeurs des champs étendus
|
|
|
297 |
*/
|
|
|
298 |
WidgetSaisie.prototype.getObsChpSpecifiques = function() {
|
| 3844 |
idir |
299 |
const lthis = this,
|
|
|
300 |
champs = [],
|
| 3638 |
delphine |
301 |
$thisForm = $( '#form-supp' ),
|
|
|
302 |
elements =
|
|
|
303 |
'input[type=text]:not(.collect-other),'+
|
|
|
304 |
'input[type=checkbox]:checked,'+
|
|
|
305 |
'input[type=radio]:checked,'+
|
|
|
306 |
'input[type=email],'+
|
|
|
307 |
'input[type=number],'+
|
|
|
308 |
'input[type=range],'+
|
|
|
309 |
'input[type=date],'+
|
|
|
310 |
'textarea,'+
|
|
|
311 |
'.select',
|
| 3844 |
idir |
312 |
retour = [];
|
| 3638 |
delphine |
313 |
|
|
|
314 |
$( elements, $thisForm ).each( function() {
|
| 3844 |
idir |
315 |
if ( valOk( $( this ).val() ) && ( valOk( $( this ).attr( 'name' ) ) || valOk( $( this ).data( 'name' ) ) ) ) {
|
|
|
316 |
const valeur = $( this ).val(),
|
|
|
317 |
cle = ( valOk( $( this ).attr( 'name' ) ) ) ? $( this ).attr( 'name' ) : $( this ).data( 'name' );
|
| 3638 |
delphine |
318 |
if ( cle in champs ) {
|
|
|
319 |
champs[cle] += ';' + valeur;
|
|
|
320 |
} else {
|
|
|
321 |
champs[cle] = valeur;
|
|
|
322 |
}
|
|
|
323 |
}
|
|
|
324 |
});
|
| 3844 |
idir |
325 |
for ( let key in champs ) {
|
| 3638 |
delphine |
326 |
retour.push({ 'cle' : key , 'valeur' : champs[key] });
|
|
|
327 |
}
|
| 3844 |
idir |
328 |
if ( valOk( $( '#coord-lineaire' ).val() ) ) {
|
| 3638 |
delphine |
329 |
retour.push({ 'cle' : 'coordonnees-rue-ou-lineaire' , 'valeur' : $( '#coord-lineaire' ).val() });
|
|
|
330 |
}
|
|
|
331 |
return retour;
|
|
|
332 |
};
|
|
|
333 |
|
|
|
334 |
WidgetSaisie.prototype.reinitialiserForm = function() {
|
|
|
335 |
this.supprimerMiniatures();
|
|
|
336 |
if( !this.especeImposee ) {
|
|
|
337 |
$( '#taxon' ).val( '' );
|
|
|
338 |
$( '#taxon' ).data( 'numNomSel', '' )
|
|
|
339 |
.data( 'nomRet','' )
|
|
|
340 |
.data( 'numNomRet', '' )
|
|
|
341 |
.data( 'nt', '' )
|
|
|
342 |
.data( 'famille', '' );
|
|
|
343 |
if( this.isTaxonListe ) {
|
|
|
344 |
$( '#taxon-liste' ).find( 'option' ).each( function() {
|
|
|
345 |
if ( $( this ).hasClass( 'choisir' ) ) {
|
|
|
346 |
$( this ).attr( 'selected', true );
|
|
|
347 |
} else {
|
|
|
348 |
$( this ).attr( 'selected', false );
|
|
|
349 |
}
|
|
|
350 |
});
|
|
|
351 |
$( '#taxon-input-groupe' ).addClass( 'hidden' );
|
|
|
352 |
$('#taxon-autre').val('');
|
|
|
353 |
}
|
|
|
354 |
}
|
| 3844 |
idir |
355 |
if ( valOk( $( '#form-supp' ) ) ) {
|
| 3638 |
delphine |
356 |
$( '#form-supp' ).validate().resetForm();
|
|
|
357 |
}
|
|
|
358 |
};
|
|
|
359 |
|
|
|
360 |
// Géolocalisation *************************************************************/
|
|
|
361 |
/**
|
|
|
362 |
* Fonction handler de l'évenement location du module tb-geoloc
|
|
|
363 |
*/
|
|
|
364 |
WidgetSaisie.prototype.locationHandler = function( location ) {
|
| 3844 |
idir |
365 |
const locDatas = location.originalEvent.detail;
|
| 3638 |
delphine |
366 |
|
| 3844 |
idir |
367 |
if ( valOk( locDatas ) ) {
|
| 3638 |
delphine |
368 |
console.log( locDatas );
|
|
|
369 |
|
| 3844 |
idir |
370 |
const geometry = JSON.stringify( locDatas.geometry ),
|
|
|
371 |
altitude = ( valOk( locDatas.elevation ) ) ? locDatas.elevation : '',
|
| 3850 |
idir |
372 |
pays = ( valOk( locDatas.osmCountryCode ) ) ? locDatas.osmCountryCode.toUpperCase() : 'FR',
|
|
|
373 |
rue = ( valOk( locDatas.osmRoad ) ) ? locDatas.osmRoad : '';
|
| 3844 |
idir |
374 |
let latitude = '',
|
|
|
375 |
longitude = '',
|
|
|
376 |
coordLineaire = '',
|
|
|
377 |
nomCommune = '',
|
|
|
378 |
communeInsee = '';
|
|
|
379 |
|
|
|
380 |
if ( valOk( locDatas.geometry.coordinates ) &&
|
|
|
381 |
valOk( locDatas.centroid.coordinates ) &&
|
|
|
382 |
valOk( locDatas.centroid.coordinates[0] ) &&
|
|
|
383 |
valOk( locDatas.centroid.coordinates[1] )
|
|
|
384 |
) {
|
|
|
385 |
latitude = locDatas.centroid.coordinates[0];
|
|
|
386 |
longitude = locDatas.centroid.coordinates[1];
|
| 3638 |
delphine |
387 |
}
|
| 3844 |
idir |
388 |
if ( valOk( locDatas.inseeData ) ) {
|
| 3638 |
delphine |
389 |
nomCommune = locDatas.inseeData.nom;
|
| 3844 |
idir |
390 |
communeInsee = ( valOk( locDatas.inseeData.code ) ) ? locDatas.inseeData.code : '';
|
|
|
391 |
} else if ( valOk( locDatas.locality ) ) {
|
| 3638 |
delphine |
392 |
nomCommune = locDatas.locality;
|
| 3844 |
idir |
393 |
} else if ( valOk( locDatas.locality ) ) {
|
| 3638 |
delphine |
394 |
nomCommune = locDatas.osmCounty;
|
|
|
395 |
}
|
|
|
396 |
$( '#geometry' ).val( geometry );
|
|
|
397 |
$( '#coord-lineaire' ).val( coordLineaire );
|
|
|
398 |
$( '#latitude' ).val( latitude );
|
|
|
399 |
$( '#longitude' ).val( longitude );
|
|
|
400 |
$( '#commune-nom' ).val( nomCommune );
|
|
|
401 |
$( '#commune-insee' ).val( communeInsee );
|
|
|
402 |
$( '#altitude' ).val( altitude );
|
|
|
403 |
$( '#pays' ).val( pays );
|
| 3850 |
idir |
404 |
$( '#station' ).val( rue );
|
| 3853 |
idir |
405 |
$( '#latitude, #longitude' ).valid();
|
| 3844 |
idir |
406 |
if ( valOk( $( '#latitude' ).val() ) && valOk( $( '#longitude' ).val() ) ) {
|
| 3638 |
delphine |
407 |
$( '#geoloc' ).closest( '.control-group' ).removeClass( 'error' );
|
|
|
408 |
} else {
|
|
|
409 |
$( '#geoloc' ).closest( '.control-group' ).addClass( 'error' );
|
|
|
410 |
}
|
|
|
411 |
} else {
|
| 3844 |
idir |
412 |
console.warn( 'Error location' );
|
| 3638 |
delphine |
413 |
}
|
|
|
414 |
}
|
|
|
415 |
|
|
|
416 |
// Form Validator *************************************************************/
|
|
|
417 |
WidgetSaisie.prototype.chpEtendusValidation = function() {
|
| 3844 |
idir |
418 |
const lthis = this,
|
|
|
419 |
$thisForm = $( '#form-supp' ),
|
| 3638 |
delphine |
420 |
elements =
|
|
|
421 |
'.checkbox,'+
|
|
|
422 |
'.radio,'+
|
|
|
423 |
'.checkboxes,'+
|
|
|
424 |
'.select,'+
|
|
|
425 |
'textarea,'+
|
|
|
426 |
'input[type=text]:not(.collect-other),'+
|
|
|
427 |
'input[type=email],'+
|
|
|
428 |
'input[type=number],'+
|
|
|
429 |
'input[type=range],'+
|
|
|
430 |
'input[type=date]',
|
|
|
431 |
speFields = ['checkbox','radio','checkboxes','select'],
|
|
|
432 |
spefieldsCount = speFields.length,
|
|
|
433 |
chpSuppValidation = {
|
|
|
434 |
rules : {},
|
|
|
435 |
messages : {},
|
|
|
436 |
minmax : []
|
|
|
437 |
},
|
|
|
438 |
errors = {},
|
| 3844 |
idir |
439 |
namesListFields = [];
|
|
|
440 |
let picked = '';
|
| 3638 |
delphine |
441 |
|
|
|
442 |
$( elements, $thisForm ).each( function() {
|
| 3844 |
idir |
443 |
for( let fieldsClass = 0; spefieldsCount > fieldsClass; fieldsClass++ ) {
|
|
|
444 |
const dataName = $( this ).data( 'name' );
|
| 3638 |
delphine |
445 |
|
| 3844 |
idir |
446 |
if ( valOk( $( this ).attr( 'required' ) ) && $( this ).hasClass( speFields[fieldsClass] ) && !valOk( chpSuppValidation.rules[ dataName ] ) ) {
|
| 3638 |
delphine |
447 |
namesListFields.push( dataName );
|
|
|
448 |
chpSuppValidation.rules[ dataName ] = { required : true };
|
| 3844 |
idir |
449 |
if ( valOk( $( '.other', $( this ) ) ) ) {
|
| 3638 |
delphine |
450 |
picked = ( 'select' === speFields[fieldsClass] ) ? ':selected' : ':checked';
|
|
|
451 |
chpSuppValidation.rules[ 'collect-other-' + dataName.replace( '[]', '' ) ] = {
|
|
|
452 |
required : '#other-' + dataName.replace( '[]', '' ) + picked,
|
|
|
453 |
minlength: 1
|
|
|
454 |
};
|
|
|
455 |
chpSuppValidation.messages[ 'collect-other-' + dataName.replace( '[]', '' ) ] = false;
|
|
|
456 |
}
|
|
|
457 |
chpSuppValidation.rules[ dataName ]['listFields'] = true;
|
|
|
458 |
chpSuppValidation.messages[ dataName ] = 'Ce champ est requis :\nVeuillez choisir une option, ou entrer une valeur autre valide.';
|
|
|
459 |
errors[dataName] = '.' + speFields[fieldsClass];
|
|
|
460 |
}
|
|
|
461 |
}
|
| 3844 |
idir |
462 |
if ( valOk( $( this ).attr( 'name' ) ) && valOk ( $( this ).attr( 'required' ) ) && 0 > $.inArray( $( this ).attr( 'name' ) , namesListFields ) ) {
|
| 3638 |
delphine |
463 |
chpSuppValidation.rules[ $( this ).attr( 'name' ) ] = { required : true, minlength: 1 };
|
|
|
464 |
if(
|
| 3844 |
idir |
465 |
( valOk( $( this ).attr( 'type' ), true, 'number' ) || valOk( $( this ).attr( 'type' ), true, 'range' ) ) &&
|
|
|
466 |
( valOk( $( this )[0].min ) || valOk( $( this )[0].max ) )
|
| 3638 |
delphine |
467 |
) {
|
|
|
468 |
chpSuppValidation.rules[ $( this ).attr('name') ]['minMaxOk'] = true;
|
|
|
469 |
chpSuppValidation.messages[ $( this ).attr('name') ] = lthis.validerMinMax( $( this )[0] ).message;
|
|
|
470 |
}
|
|
|
471 |
}
|
|
|
472 |
});
|
| 3844 |
idir |
473 |
if ( valOk( chpSuppValidation.rules ) ) {
|
| 3638 |
delphine |
474 |
$.each( chpSuppValidation.rules, function( key ) {
|
| 3844 |
idir |
475 |
if ( !valOk( chpSuppValidation.messages[key] ) ) {
|
| 3638 |
delphine |
476 |
chpSuppValidation.messages[key] = 'Ce champ est requis :\nVeuillez entrer une valeur valide.';
|
|
|
477 |
}
|
|
|
478 |
});
|
|
|
479 |
if ( 0 < Object.keys( errors ).length ) {
|
|
|
480 |
chpSuppValidation['errors'] = errors;
|
|
|
481 |
}
|
|
|
482 |
}
|
|
|
483 |
return chpSuppValidation;
|
|
|
484 |
};
|
|
|
485 |
|
|
|
486 |
WidgetSaisie.prototype.validerMinMax = function( element ) {
|
| 3844 |
idir |
487 |
const minCond = parseFloat( element.value ) >= parseFloat( element.min ),
|
|
|
488 |
maxCond = parseFloat( element.value ) <= parseFloat( element.max ),
|
|
|
489 |
returnMnMx = { cond : true , message : '' };
|
|
|
490 |
let mnMxCond = new Boolean(),
|
|
|
491 |
messageMnMx = 'La valeur entrée doit être';
|
| 3638 |
delphine |
492 |
|
|
|
493 |
if(
|
| 3844 |
idir |
494 |
( valOk( element.type, true, 'number' ) || valOk( element.type, true, 'range' ) ) &&
|
|
|
495 |
( valOk( element.min ) || valOk( element.max ) )
|
| 3638 |
delphine |
496 |
) {
|
|
|
497 |
if ( element.min && element.max ) {
|
|
|
498 |
messageMnMx += ' comprise entre ' + element.min + ' et ' + element.max;
|
|
|
499 |
mnMxCond = ( minCond && maxCond );
|
|
|
500 |
} else if ( element.min ) {
|
|
|
501 |
messageMnMx += ' supérieure à ' + element.min;
|
|
|
502 |
mnMxCond = minCond;
|
|
|
503 |
} else {
|
|
|
504 |
messageMnMx += ' inférieure à ' + element.max;
|
|
|
505 |
mnMxCond = maxCond;
|
|
|
506 |
}
|
|
|
507 |
returnMnMx.cond = mnMxCond;
|
|
|
508 |
returnMnMx.message = messageMnMx;
|
|
|
509 |
}
|
|
|
510 |
return returnMnMx;
|
|
|
511 |
|
|
|
512 |
};
|
|
|
513 |
|
|
|
514 |
WidgetSaisie.prototype.definirReglesFormValidator = function() {
|
| 3844 |
idir |
515 |
const lthis = this,
|
|
|
516 |
formSuppValidation = this.chpEtendusValidation();
|
| 3638 |
delphine |
517 |
|
|
|
518 |
$( '#form-supp' ).validate({
|
|
|
519 |
onclick : function( element ) {
|
|
|
520 |
if (
|
|
|
521 |
(
|
| 3844 |
idir |
522 |
valOk( element.type, true, 'checkbox' ) ||
|
|
|
523 |
valOk( element.type, true, 'radio' )
|
| 3638 |
delphine |
524 |
) &&
|
|
|
525 |
(
|
| 3844 |
idir |
526 |
!valOk( $( '.' + $( element ).attr( 'name' ).replace( '[]', '' ) + ':checked' ) ) ||
|
|
|
527 |
valOk( $( '.' + $( element ).attr( 'name' ).replace( '[]', '' ) + ':not(.other):checked' ) ) ||
|
|
|
528 |
!valOk( $( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ) ) ||
|
| 3638 |
delphine |
529 |
$( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ).is( ':checked' ) ||
|
|
|
530 |
(
|
|
|
531 |
$( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ).is( ':checked' ) &&
|
|
|
532 |
$( element ).closest( '.control-group' ).hasClass('error')
|
|
|
533 |
)
|
|
|
534 |
)
|
|
|
535 |
) {
|
|
|
536 |
$( element ).valid();
|
|
|
537 |
if ( $( element ).valid() ) {
|
|
|
538 |
$( element ).closest( '.control-group' ).removeClass( 'error' );
|
|
|
539 |
$( element ).next( $( 'span.error' ) ).remove();
|
|
|
540 |
} else {
|
|
|
541 |
$( element ).closest( '.control-group' ).addClass( 'error' );
|
|
|
542 |
}
|
|
|
543 |
}
|
|
|
544 |
return false;
|
|
|
545 |
},
|
|
|
546 |
rules : formSuppValidation.rules,
|
|
|
547 |
messages : formSuppValidation.messages,
|
|
|
548 |
errorPlacement : function( error , element ) {
|
|
|
549 |
if ( 0 < Object.keys( formSuppValidation.errors ).length ) {
|
| 3844 |
idir |
550 |
const errorsKeys = Object.keys( formSuppValidation.errors );
|
|
|
551 |
let thisKey = '',
|
| 3638 |
delphine |
552 |
errorsFlag = true;
|
| 3844 |
idir |
553 |
|
|
|
554 |
for ( let i = 0 ; i < errorsKeys.length ; i++ ) {
|
| 3638 |
delphine |
555 |
thisKey = errorsKeys[i];
|
|
|
556 |
if( $( element ).attr( 'name' ) === thisKey ) {
|
|
|
557 |
$( formSuppValidation.errors[thisKey] ).append( error );
|
|
|
558 |
errorsFlag = false;
|
|
|
559 |
}
|
|
|
560 |
}
|
|
|
561 |
if ( errorsFlag ) {
|
|
|
562 |
error.insertAfter( element );
|
|
|
563 |
}
|
|
|
564 |
} else {
|
|
|
565 |
error.insertAfter( element );
|
|
|
566 |
}
|
|
|
567 |
}
|
|
|
568 |
});
|
|
|
569 |
$( '#form-supp .select' ).change( function() {
|
|
|
570 |
$( this ).valid();
|
|
|
571 |
});
|
|
|
572 |
$( 'input[type=date]' ).on( 'input', function() {
|
|
|
573 |
$( this ).valid();
|
|
|
574 |
});
|
| 3851 |
idir |
575 |
// Validation taxon
|
|
|
576 |
// et gestion des messages d'erreur taxon et images en fonction de la certitude
|
|
|
577 |
$( '#taxon, #certitude' ).on( 'change', function() {
|
|
|
578 |
lthis.validerTaxonRequis( valOk( $( '#taxon' ).val() ) );
|
| 3638 |
delphine |
579 |
});
|
|
|
580 |
// Validation miniatures avec MutationObserver
|
|
|
581 |
this.surPresenceAbsenceMiniature();
|
|
|
582 |
$( '#form-observation' ).validate({
|
|
|
583 |
rules : {
|
|
|
584 |
date_releve : {
|
|
|
585 |
required : true,
|
|
|
586 |
'dateCel' : true
|
|
|
587 |
},
|
|
|
588 |
latitude : {
|
|
|
589 |
required : true,
|
|
|
590 |
minlength : 1,
|
|
|
591 |
range : [-90, 90]
|
|
|
592 |
},
|
|
|
593 |
longitude : {
|
|
|
594 |
required : true,
|
|
|
595 |
minlength : 1,
|
|
|
596 |
range : [-180, 180]
|
|
|
597 |
}
|
|
|
598 |
}
|
|
|
599 |
});
|
|
|
600 |
$( '#form-observateur' ).validate({
|
|
|
601 |
rules : {
|
|
|
602 |
courriel : {
|
|
|
603 |
required : true,
|
|
|
604 |
email : true,
|
|
|
605 |
'userEmailOk' : true
|
|
|
606 |
},
|
|
|
607 |
courriel_confirmation : {
|
|
|
608 |
required : true,
|
|
|
609 |
equalTo : '#courriel'
|
|
|
610 |
}
|
|
|
611 |
}
|
|
|
612 |
});
|
|
|
613 |
$( '#connexion,#inscription,#bouton-anonyme' ).on( 'click', function( event ) {
|
|
|
614 |
$( '.nav.control-group' ).removeClass( 'error' );
|
|
|
615 |
});
|
|
|
616 |
};
|
|
|
617 |
|
| 3844 |
idir |
618 |
|
| 3851 |
idir |
619 |
WidgetSaisie.prototype.validerCertitudeTaxonImage = function( hasTaxon = false, hasImages = false ) {
|
|
|
620 |
if( 'certain' === $( '#certitude' ).val() ) {
|
|
|
621 |
return this.validerTaxonRequis( hasTaxon );
|
|
|
622 |
} else {
|
|
|
623 |
return this.validerImageRequise( hasImages );
|
|
|
624 |
}
|
|
|
625 |
};
|
|
|
626 |
|
|
|
627 |
WidgetSaisie.prototype.validerTaxonRequis = function( hasTaxon = false ) {
|
|
|
628 |
const taxonEstRequis = 'certain' === $( '#certitude' ).val();
|
|
|
629 |
|
|
|
630 |
$( '#photos-conteneur').removeClass( 'error' )
|
|
|
631 |
.find( 'span.error' ).hide();
|
|
|
632 |
|
|
|
633 |
if ( !hasTaxon && taxonEstRequis ) {
|
|
|
634 |
this.afficherPanneau( '#dialogue-taxon-or-image' );
|
|
|
635 |
$( '#bloc-taxon' ).addClass( 'error' )
|
|
|
636 |
.find( 'span.error' ).show();
|
|
|
637 |
} else {
|
| 3638 |
delphine |
638 |
this.masquerPanneau( '#dialogue-taxon-or-image' );
|
|
|
639 |
$( '#bloc-taxon' ).removeClass( 'error' )
|
|
|
640 |
.find( 'span.error' ).hide();
|
| 3851 |
idir |
641 |
}
|
|
|
642 |
|
|
|
643 |
if ( taxonEstRequis ) {
|
|
|
644 |
return hasTaxon;
|
|
|
645 |
}
|
|
|
646 |
};
|
|
|
647 |
|
|
|
648 |
WidgetSaisie.prototype.validerImageRequise = function( hasImages = false ) {
|
|
|
649 |
$( '#bloc-taxon' ).removeClass( 'error' )
|
|
|
650 |
.find( 'span.error' ).hide();
|
|
|
651 |
|
|
|
652 |
if ( hasImages ) {
|
|
|
653 |
this.masquerPanneau( '#dialogue-taxon-or-image' );
|
| 3638 |
delphine |
654 |
$( '#fichier' ).parent( 'label.label-file' ).removeClass( 'error' );
|
|
|
655 |
$( '#photos-conteneur').removeClass( 'error' ).find( 'span.error' ).hide();
|
|
|
656 |
} else {
|
|
|
657 |
this.afficherPanneau( '#dialogue-taxon-or-image' );
|
|
|
658 |
$( '#fichier' ).parent( 'label.label-file' ).addClass( 'error' );
|
|
|
659 |
$( '#photos-conteneur').addClass( 'error' ).find( 'span.error' ).show();
|
|
|
660 |
}
|
| 3851 |
idir |
661 |
return hasImages;
|
| 3638 |
delphine |
662 |
};
|
|
|
663 |
|
|
|
664 |
WidgetSaisie.prototype.surPresenceAbsenceMiniature = function() {
|
|
|
665 |
const lthis = this;
|
|
|
666 |
// voir : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect
|
|
|
667 |
// Selectionne le noeud dont les mutations seront observées
|
| 3844 |
idir |
668 |
const targetNode = document.getElementById( 'miniatures' );
|
| 3638 |
delphine |
669 |
// Fonction callback à éxécuter quand une mutation est observée
|
| 3844 |
idir |
670 |
const callback = mutationsList => {
|
|
|
671 |
for( let mutation of mutationsList ) {
|
| 3851 |
idir |
672 |
lthis.validerCertitudeTaxonImage(
|
|
|
673 |
valOk( $( '#taxon' ).val() ),
|
|
|
674 |
|
|
|
675 |
);
|
| 3638 |
delphine |
676 |
}
|
|
|
677 |
};
|
|
|
678 |
// Créé une instance de l'observateur lié à la fonction de callback
|
|
|
679 |
this.observer = new MutationObserver( callback );
|
|
|
680 |
// Commence à observer le noeud cible pour les mutations précédemment configurées
|
|
|
681 |
this.observer.observe( targetNode, { childList: true } );
|
|
|
682 |
};
|
|
|
683 |
|
|
|
684 |
WidgetSaisie.prototype.validerForm = function() {
|
| 3844 |
idir |
685 |
const observateur = ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() && $( '#courriel_confirmation' ).valid() ),
|
|
|
686 |
obs = $( '#form-observation' ).valid(),
|
|
|
687 |
geoloc = ( valOk( $( '#latitude' ).val() ) && valOk( $( '#longitude' ).val() ) ) ,
|
|
|
688 |
// validation et panneau taxon/images
|
| 3851 |
idir |
689 |
certitudeTaxonImage = this.validerCertitudeTaxonImage(
|
|
|
690 |
valOk( $( '#taxon' ).val() ),
|
|
|
691 |
valOk( $( '#miniatures .miniature' ) )
|
|
|
692 |
);
|
| 3844 |
idir |
693 |
let chpsSupp = true;
|
| 3638 |
delphine |
694 |
|
| 3844 |
idir |
695 |
if ( valOk( $( '#form-supp' ) ) ) {
|
| 3638 |
delphine |
696 |
chpsSupp = ( function () {
|
| 3844 |
idir |
697 |
let otherFlag = $( '#form-supp' ).valid();
|
|
|
698 |
|
|
|
699 |
if( valOk( $( '.other', $( '#form-supp' ) ) ) ) {
|
| 3638 |
delphine |
700 |
$( '.other', $( '#form-supp' ) ).each( function() {
|
| 3844 |
idir |
701 |
const picked = ( $( this ).data( 'element' ) !== 'select' ) ? ':checked' : ':selected';
|
|
|
702 |
|
|
|
703 |
if ( $( this ).is( picked ) && valOk( $( this ).val(), true, 'other' ) ) {
|
| 3638 |
delphine |
704 |
otherFlag = false;
|
|
|
705 |
}
|
|
|
706 |
});
|
|
|
707 |
}
|
| 3844 |
idir |
708 |
|
| 3638 |
delphine |
709 |
return otherFlag;
|
|
|
710 |
})();
|
|
|
711 |
}
|
|
|
712 |
// panneau geoloc
|
|
|
713 |
if ( geoloc ) {
|
|
|
714 |
this.masquerPanneau( '#dialogue-geoloc-ko' );
|
|
|
715 |
$( '#geoloc-datas' ).closest( '.control-group' ).removeClass( 'error' );
|
|
|
716 |
} else{
|
|
|
717 |
this.afficherPanneau( '#dialogue-geoloc-ko' );
|
|
|
718 |
$( '#geoloc-datas' ).closest( '.control-group' ).addClass( 'error' );
|
|
|
719 |
}
|
|
|
720 |
// panneau observateur
|
|
|
721 |
if ( observateur ) {
|
|
|
722 |
this.masquerPanneau( '#dialogue-utilisateur-non-identifie' );
|
|
|
723 |
$( '.nav.control-group' ).removeClass( 'error' );
|
|
|
724 |
} else {
|
|
|
725 |
this.afficherPanneau( '#dialogue-utilisateur-non-identifie' );
|
|
|
726 |
$( '.nav.control-group' ).addClass( 'error' );
|
|
|
727 |
}
|
| 3851 |
idir |
728 |
return ( observateur && obs && geoloc && certitudeTaxonImage && chpsSupp );
|
| 3638 |
delphine |
729 |
};
|
|
|
730 |
|
|
|
731 |
// Referentiel ****************************************************************/
|
|
|
732 |
// N'est pas utilisé en cas de taxon-liste
|
|
|
733 |
WidgetSaisie.prototype.surChangementReferentiel = function() {
|
|
|
734 |
this.nomSciReferentiel = $( '#referentiel' ).val();
|
|
|
735 |
//réinitialise taxon.val
|
|
|
736 |
$( '#taxon' ).val( '' );
|
|
|
737 |
$( '#taxon' ).data( 'numNomSel', '' );
|
|
|
738 |
};
|
| 3844 |
idir |
739 |
|
|
|
740 |
|
|
|
741 |
$( document ).ready( function() {
|
|
|
742 |
const widget = new WidgetSaisie();
|
|
|
743 |
widget.init();
|
|
|
744 |
// Fonctions de Style et Affichage des éléments "spéciaux"
|
|
|
745 |
utils.init();
|
|
|
746 |
});
|