Subversion Repositories eFlore/Applications.cel

Rev

Rev 3638 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 3638 Rev 3844
- 
 
 1 
import {WidgetsSaisiesASL} from './WidgetsSaisiesASL.js';
- 
 
 2 
import {valOk} from './Utils.js';
- 
 
 3 
 
1 
/**
 4 
/**
2 
 * Constructeur PlantesEtLichensASL par défaut
 5 
 * Constructeur PlantesEtLichensASL par défaut
3 
 * S'applique au squelette apaforms.tpl.html
 6 
 * S'applique au squelette apaforms.tpl.html
4 
 * Qui se charge dans apa.tpl.php
 7 
 * Qui se charge dans apa.tpl.php
5 
 * Lors de la saisie des plantes ou des lichens
 8 
 * Lors de la saisie des plantes ou des lichens
6 
 */
 9 
 */
7 
// ASL : APA, sTREETs, Lichen's Go!
 10 
// ASL : APA, sTREETs, Lichen's Go!
8 
function PlantesEtLichensASL( proprietes, widgetProp ) {
 11 
export function PlantesEtLichensASL(plantesEtLichensProp) {
9 
	if  ( utils.valOk( proprietes ) && utils.valOk( widgetProp ) ) {
 12 
	if  ( valOk( plantesEtLichensProp ) && valOk( widgetProp ) ) {
10 
		this.sujet             = proprietes.sujet;
 13 
		this.sujet             = plantesEtLichensProp.sujet;
11 
		this.tagImg            = proprietes.tagImg;
 14 
		this.tagImg            = plantesEtLichensProp.tagImg;
12 
		this.separationTagImg  = proprietes.separationTagImg;
 15 
		this.separationTagImg  = plantesEtLichensProp.separationTagImg;
13 
		this.tagImg            = proprietes.tagImg;
 16 
		this.tagImg            = plantesEtLichensProp.tagImg;
14 
		this.tagObs            = proprietes.tagObs;
 17 
		this.tagObs            = plantesEtLichensProp.tagObs;
15 
		this.separationTagObs  = proprietes.separationTagObs;
 18 
		this.separationTagObs  = plantesEtLichensProp.separationTagObs;
16 
		this.nomSciReferentiel = proprietes.nomSciReferentiel;
 19 
		this.nomSciReferentiel = plantesEtLichensProp.nomSciReferentiel;
17 
		this.referentielImpose = proprietes.referentielImpose;
 20 
		this.referentielImpose = plantesEtLichensProp.referentielImpose;
18 
		this.widgetProp        = widgetProp;
 - 
 
19 
		this.urlWidgets        = widgetProp.urlWidgets;
 - 
 
20 
		this.projet            = widgetProp.projet;
 - 
 
21 
		this.tagsMotsCles      = widgetProp.tagsMotsCles + ',' + this.sujet;
 21 
		this.tagsMotsCles      = widgetProp.tagsMotsCles + ',' + this.sujet;
22 
	}
 22 
	}
23 
	this.isTaxonListe = false;
 23 
	this.isTaxonListe = false;
24 
	this.numArbre     = 0;
 24 
	this.numArbre     = 0;
25 
}
 25 
}
26 
PlantesEtLichensASL.prototype = new WidgetsSaisiesASL( this.widgetProp );
 26 
PlantesEtLichensASL.prototype = new WidgetsSaisiesASL();
27 
 
 27 
 
28 
/**
 28 
/**
29 
 * Initialise le formulaire, les validateurs, les listes de complétion...
 29 
 * Initialise le formulaire, les validateurs, les listes de complétion...
30 
 */
 30 
 */
31 
PlantesEtLichensASL.prototype.initForm = function() {
 31 
PlantesEtLichensASL.prototype.initForm = function() {
32 
	const lthis = this;
 - 
 
33 
 
 - 
 
34 
	$('[type="date"]').prop('max', function(){
 32 
	$('[type="date"]').prop('max', function(){
35 
		return new Date().toJSON().split('T')[0];
 33 
		return new Date().toJSON().split('T')[0];
36 
	});
 34 
	});
37 
	this.initFormTaxonListe();
 35 
	this.initFormTaxonListe();
38 
	this.configurerFormValidator();
 36 
	this.configurerFormValidator();
39 
	this.definirReglesFormValidator();
 37 
	this.definirReglesFormValidator();
40 
};
 38 
};
41 
 
 39 
 
42 
/**
 40 
/**
43 
 * Initialise les écouteurs d'événements
 41 
 * Initialise les écouteurs d'événements
44 
 */
 42 
 */
45 
PlantesEtLichensASL.prototype.initEvts = function() {
 43 
PlantesEtLichensASL.prototype.initEvts = function() {
46 
	const lthis = this;
 - 
 
47 
	var releveDatas   = [],
 - 
 
48 
		idUtilisateur = $( '#id_utilisateur' ).val();
 44 
	const idUtilisateur = $( '#id_utilisateur' ).val();
49 
 
 45 
 
50 
	if( this.valOk( idUtilisateur ) ) {
 46 
	if( valOk( idUtilisateur ) ) {
51 
		// #releve-data est modifié, bouton dans #releves-utilisateur
 47 
		// #releve-data est modifié, bouton dans #releves-utilisateur
52 
		this.btnsChargerForm( '#bouton-nouveau-releve' );
 48 
		this.btnsChargerForm( '#bouton-nouveau-releve' );
53 
		if( this.valOk( $( '#releve-data' ).val() ) ) {
 49 
		if( valOk( $( '#releve-data' ).val() ) ) {
54 
			this.releveDatas = $.parseJSON( $( '#releve-data' ).val() );
 50 
			this.releveDatas = $.parseJSON( $( '#releve-data' ).val() );
55 
			if ( this.valOk( this.releveDatas[0].utilisateur, true, idUtilisateur ) ) {
 51 
			if ( valOk( this.releveDatas[0].utilisateur, true, idUtilisateur ) ) {
56 
				// Sur téléchargement image
 52 
				// Sur téléchargement image
57 
				this.initEvtsFichier();
 53 
				this.initEvtsFichier();
58 
				// Création / Suppression / Transmission des obs
 54 
				// Création / Suppression / Transmission des obs
59 
				// Défilement des miniatures dans le résumé obs
 55 
				// Défilement des miniatures dans le résumé obs
60 
				this.initEvtsObs();
 56 
				this.initEvtsObs();
- 
 
 57 
 
61 
				// chargement plantes ou lichens, ajout du bouton #poursuivre
 58 
				// chargement plantes ou lichens, ajout du bouton #poursuivre
62 
				var btnChargementForm = this.determinerBtnsChargementForm( '#', true );
 59 
				const btnChargementForm = this.determinerBtnsChargementForm( '#', true );
- 
 
 60 
 
63 
				// #releve-data n'est pas modifié, bouton dans #charger-form
 61 
				// #releve-data n'est pas modifié, bouton dans #charger-form
64 
				this.btnsChargerForm( btnChargementForm, false, false );
 62 
				this.btnsChargerForm( btnChargementForm, false, false );
65 
				if ( 'lichens' === this.sujet ) {
 63 
				if ( 'lichens' === this.sujet ) {
66 
					this.checkboxToutesLesFaces();
 64 
					this.checkboxToutesLesFaces();
67 
				}
 65 
				}
68 
				// Alertes et aides
 66 
				// Alertes et aides
69 
				this.initEvtsAlertes();
 67 
				this.initEvtsAlertes();
70 
			}
 68 
			}
71 
		}
 69 
		}
72 
	}
 70 
	}
73 
};
 71 
};
74 
 
 72 
 
75 
// Ajouter Obs ****************************************************************/
 73 
// Ajouter Obs ****************************************************************/
76 
PlantesEtLichensASL.prototype.reinitialiserForm = function() {
 74 
PlantesEtLichensASL.prototype.reinitialiserForm = function() {
77 
	this.supprimerMiniatures();
 75 
	this.supprimerMiniatures();
78 
	$( '#taxon,#taxon-autre,#commentaire' ).val( '' );
 76 
	$( '#taxon,#taxon-autre,#commentaire' ).val( '' );
79 
	$( '#taxon' ).removeData([
 77 
	$( '#taxon' ).removeData([
80 
		'value',
 78 
		'value',
81 
		'numNomSel',
 79 
		'numNomSel',
82 
		'nomRet',
 80 
		'nomRet',
83 
		'numNomRet',
 81 
		'numNomRet',
84 
		'nt',
 82 
		'nt',
85 
		'famille'
 83 
		'famille'
86 
	]);
 84 
	]);
87 
	$( '#taxon-liste,#certitude' ).find( 'option' ).each( function() {
 85 
	$( '#taxon-liste,#certitude' ).find( 'option' ).each( function() {
88 
		if ( $( this ).hasClass( 'choisir' ) ) {
 86 
		if ( $( this ).hasClass( 'choisir' ) ) {
89 
			$( this ).attr( 'selected', true );
 87 
			$( this ).attr( 'selected', true );
90 
		} else {
 88 
		} else {
91 
			$( this ).attr( 'selected', false );
 89 
			$( this ).attr( 'selected', false );
92 
		}
 90 
		}
93 
	});
 91 
	});
94 
	$( '#taxon-input-groupe' ).addClass( 'hidden' );
 92 
	$( '#taxon-input-groupe' ).addClass( 'hidden' );
95 
	if ( 'lichens' === this.sujet ) {
 93 
	if ( 'lichens' === this.sujet ) {
96 
		$( 'input[name=lichens-tronc]:checked' ).each( function() {
 94 
		$( 'input[name=lichens-tronc]:checked' ).each( function() {
97 
			$( this ).prop( 'checked', false );
 95 
			$( this ).prop( 'checked', false );
98 
		});
 96 
		});
99 
	}
 97 
	}
100 
};
 98 
};
101 
 
 99 
 
102 
PlantesEtLichensASL.prototype.checkboxToutesLesFaces = function() {
 100 
PlantesEtLichensASL.prototype.checkboxToutesLesFaces = function() {
103 
	$('input[name=lichens-tronc]').on( 'click', function( event ) {
 101 
	$('input[name=lichens-tronc]').on( 'click', function( event ) {
104 
		var face = $( this ).data( 'face' );
 102 
		const face = $( this ).data( 'face' );
105 
 
 103 
 
106 
		if ( $( this ).is( ':checked' ) ) {
 - 
 
107 
		console.log('hello');
 104 
		if ( $( this ).is( ':checked' ) ) {
108 
			if( $( this ).hasClass( 'lichens-tronc-all' ) ) {
 105 
			if( $( this ).hasClass( 'lichens-tronc-all' ) ) {
109 
				for ( i = 1; i <= 5 ; i++ ) {
 106 
				for ( let i = 1; i <= 5 ; i++ ) {
110 
					$( '#lichens-tronc-' + face + i ).prop( 'checked', false );
 107 
					$( '#lichens-tronc-' + face + i ).prop( 'checked', false );
111 
				}
 108 
				}
112 
			} else {
 109 
			} else {
113 
				$( '#lichens-tronc-all-' + face ).prop( 'checked', false );
 110 
				$( '#lichens-tronc-all-' + face ).prop( 'checked', false );
114 
			}
 111 
			}
115 
		}
 112 
		}
116 
 
 113 
 
117 
	});
 114 
	});
118 
};
 115 
};
119 
 
 116 
 
120 
/**
 117 
/**
121 
 * Retourne un Array contenant les valeurs des champs
 118 
 * Retourne un Array contenant les valeurs des champs
122 
 * dont les données seront transmises dans la table cel-obs-etendues
 119 
 * dont les données seront transmises dans la table cel-obs-etendues
123 
 */
 120 
 */
124 
PlantesEtLichensASL.prototype.getObsChpSpecifiques = function( numArbre ) {
 121 
PlantesEtLichensASL.prototype.getObsChpSpecifiques = function( numArbre ) {
125 
	var retour = [
 122 
	const retour = [
126 
		{ cle : 'num-arbre', valeur : numArbre },
 123 
		{ cle : 'num-arbre', valeur : numArbre },
127 
		{ cle : 'id_obs_arbre', valeur : this.releveDatas[numArbre]['id_observation'] },
 124 
		{ cle : 'id_obs_arbre', valeur : this.releveDatas[numArbre]['id_observation'] },
128 
		{ cle : 'rue' , valeur : this.releveDatas[0].rue  }
 125 
		{ cle : 'rue' , valeur : this.releveDatas[0].rue  }
129 
	];
 126 
	];
130 
 
 127 
 
131 
	if ( 'lichens' === this.sujet ) {
 128 
	if ( 'lichens' === this.sujet ) {
132 
		var valeursLT  = '';
 - 
 
133 
		const $lichensTronc = $( 'input[name=lichens-tronc]:checked' );
 129 
		const $lichensTronc = $( 'input[name=lichens-tronc]:checked' ),
134 
		const LTLenght = $lichensTronc.length;
 130 
			LTLenght = $lichensTronc.length;
- 
 
 131 
		let valeursLT  = '';
135 
 
 132 
 
136 
		$( 'input[name=lichens-tronc]:checked' ).each( function( i, value ) {
 133 
		$( 'input[name=lichens-tronc]:checked' ).each( function( i, value ) {
137 
			valeursLT += $(value).val();
 134 
			valeursLT += $(value).val();
138 
			if( i < LTLenght ) {
 135 
			if( i < LTLenght ) {
139 
				valeursLT += ';';
 136 
				valeursLT += ';';
140 
			}
 137 
			}
141 
		});
 138 
		});
142 
		retour.push({ cle : 'loc-sur-tronc', valeur : valeursLT });
 139 
		retour.push({ cle : 'loc-sur-tronc', valeur : valeursLT });
143 
	}
 140 
	}
144 
 
 141 
 
145 
	return retour;
 142 
	return retour;
146 
};
 143 
};
147 
 
 144 
 
148 
// Form Validator *************************************************************/
 145 
// Form Validator *************************************************************/
149 
PlantesEtLichensASL.prototype.definirReglesFormValidator = function() {
 146 
PlantesEtLichensASL.prototype.definirReglesFormValidator = function() {
150 
	const lthis = this;
 147 
	const lthis = this;
151 
 
 148 
 
152 
	$( 'input[type=date]' ).on( 'input', function() {
 149 
	$( 'input[type=date]' ).on( 'input', function() {
153 
		$( this ).valid();
 150 
		$( this ).valid();
154 
	});
 151 
	});
155 
	// Validation Taxon si pas de miniature
 152 
	// Validation Taxon si pas de miniature
156 
	$( '#taxon' ).on( 'change', function() {
 153 
	$( '#taxon' ).on( 'change', function() {
157 
		var images = lthis.valOk( $( '#miniatures .miniature' ) );
 154 
		const images = valOk( $( '#miniatures .miniature' ) );
- 
 
 155 
 
158 
		lthis.validerTaxonImage( lthis.valOk( $( this ).val() ), images );
 156 
		lthis.validerTaxonImage( valOk( $( this ).val() ), images );
159 
	});
 157 
	});
160 
 
 158 
 
161 
	// // Validation miniatures avec MutationObserver
 159 
	// // Validation miniatures avec MutationObserver
162 
	// this.surPresenceAbsenceMiniature();
 160 
	// this.surPresenceAbsenceMiniature();
163 
 
 161 
 
164 
	$( '#form-' + this.sujet ).validate({
 162 
	$( '#form-' + this.sujet ).validate({
165 
		rules : {
 163 
		rules : {
166 
			'choisir-arbre' : {
 164 
			'choisir-arbre' : {
167 
				required : true,
 165 
				required : true,
168 
				minlength : 1
 166 
				minlength : 1
169 
			},
 167 
			},
170 
			'obs-date' : {
 168 
			'obs-date' : {
171 
				required : true,
 169 
				required : true,
172 
				'dateCel' : true
 170 
				'dateCel' : true
173 
			},
 171 
			},
174 
			certitude : {
 172 
			certitude : {
175 
				required : true,
 173 
				required : true,
176 
				minlength : 1
 174 
				minlength : 1
177 
			}
 175 
			}
178 
		}
 176 
		}
179 
	});
 177 
	});
180 
	$( '#form-observateur' ).validate({
 178 
	$( '#form-observateur' ).validate({
181 
		rules : {
 179 
		rules : {
182 
			courriel : {
 180 
			courriel : {
183 
				required : true,
 181 
				required : true,
184 
				minlength : 1,
 182 
				minlength : 1,
185 
				email : true,
 183 
				email : true,
186 
				'userEmailOk' : true
 184 
				'userEmailOk' : true
187 
			},
 185 
			},
188 
			mdp : {
 186 
			mdp : {
189 
				required : true,
 187 
				required : true,
190 
				minlength : 1
 188 
				minlength : 1
191 
			}
 189 
			}
192 
		}
 190 
		}
193 
	});
 191 
	});
194 
	$( '#connexion,#inscription,#oublie' ).on( 'click', function() {
 192 
	$( '#connexion,#inscription,#oublie' ).on( 'click', function() {
195 
		$( '#tb-observateur .control-group' ).removeClass( 'error' );
 193 
		$( '#tb-observateur .control-group' ).removeClass( 'error' );
196 
	});
 194 
	});
197 
};
 195 
};
198 
 
 196 
 
199 
PlantesEtLichensASL.prototype.validerTaxonImage = function( taxon = false, images = false ) {
 197 
PlantesEtLichensASL.prototype.validerTaxonImage = function( taxon = false, images = false ) {
200 
	var taxonOuImage = ( images || taxon );
 198 
	const taxonOuImage = images || taxon;
- 
 
 199 
 
201 
	if ( images || taxon ) {
 200 
	if ( taxonOuImage ) {
202 
		this.masquerPanneau( '#dialogue-taxon-or-image' );
 201 
		this.masquerPanneau( '#dialogue-taxon-or-image' );
203 
		$( '#bloc-taxon' ).removeClass( 'error' )
 202 
		$( '#bloc-taxon' ).removeClass( 'error' )
204 
			.find( 'span.error' ).hide();
 203 
			.find( 'span.error' ).hide();
205 
		$( '#fichier' ).parent( 'label.label-file' ).removeClass( 'error' );
 204 
		$( '#fichier' ).parent( 'label.label-file' ).removeClass( 'error' );
206 
		$( '#photos-conteneur').removeClass( 'error' ).find( 'span.error' ).hide();
 205 
		$( '#photos-conteneur').removeClass( 'error' ).find( 'span.error' ).hide();
207 
		// faire passer la certitude à 'à déterminer' si on a une image et pas de taxon
 206 
		// faire passer la certitude à 'à déterminer' si on a une image et pas de taxon
208 
		if( !taxon ) {
 207 
		if( !taxon ) {
209 
			$( '#certitude' ).find( 'option' ).each( function() {
 208 
			$( '#certitude' ).find( 'option' ).each( function() {
210 
				if ( $( this ).hasClass( 'aDeterminer' ) ) {
 209 
				if ( $( this ).hasClass( 'aDeterminer' ) ) {
211 
					$( this ).attr( 'selected', true );
 210 
					$( this ).attr( 'selected', true );
212 
				} else {
 211 
				} else {
213 
					$( this ).attr( 'selected', false );
 212 
					$( this ).attr( 'selected', false );
214 
				}
 213 
				}
215 
			});
 214 
			});
216 
		}
 215 
		}
217 
	} else {
 216 
	} else {
218 
		this.afficherPanneau( '#dialogue-taxon-or-image' );
 217 
		this.afficherPanneau( '#dialogue-taxon-or-image' );
219 
		$( '#bloc-taxon' ).addClass( 'error' )
 218 
		$( '#bloc-taxon' ).addClass( 'error' )
220 
			.find( 'span.error' ).show();
 219 
			.find( 'span.error' ).show();
221 
		$( '#fichier' ).parent( 'label.label-file' ).addClass( 'error' );
 220 
		$( '#fichier' ).parent( 'label.label-file' ).addClass( 'error' );
222 
		$( '#photos-conteneur').addClass( 'error' ).find( 'span.error' ).show();
 221 
		$( '#photos-conteneur').addClass( 'error' ).find( 'span.error' ).show();
223 
	}
 222 
	}
- 
 
 223 
 
224 
	return ( images || taxon );
 224 
	return taxonOuImage;
225 
};
 225 
};
226 
 
 226 
 
227 
/**
 227 
/**
228 
 * Valide le formulaire au click sur un bouton "suivant"
 228 
 * Valide le formulaire au click sur un bouton "suivant"
229 
 */
 229 
 */
230 
PlantesEtLichensASL.prototype.validerForm = function() {
 230 
PlantesEtLichensASL.prototype.validerForm = function() {
231 
	const images       = this.valOk( $( '#miniatures .miniature' ) );
 231 
	const images     = valOk( $( '#miniatures .miniature' ) ),
232 
	const taxon        = this.valOk( $( '#taxon' ).val() );
 232 
		taxon        = valOk( $( '#taxon' ).val() ),
233 
	const taxonOuImage = this.validerTaxonImage( taxon, images );
 233 
		taxonOuImage = this.validerTaxonImage( taxon, images ),
234 
	const observateur  = ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() )
 234 
		observateur  = $( '#form-observateur' ).valid() && $( '#courriel' ).valid(),
235 
	const obs          = $( '#form-' + this.sujet ).valid();
 235 
		obs          = $( '#form-' + this.sujet ).valid();
236 
 
 236 
 
237 
	// panneau observateur
 237 
	// panneau observateur
238 
	if ( observateur ) {
 238 
	if ( observateur ) {
239 
		this.masquerPanneau( '#dialogue-utilisateur-non-identifie' );
 239 
		this.masquerPanneau( '#dialogue-utilisateur-non-identifie' );
240 
		$( '#tb-observateur .control-group' ).removeClass( 'error' );
 240 
		$( '#tb-observateur .control-group' ).removeClass( 'error' );
241 
	} else {
 241 
	} else {
242 
		this.afficherPanneau( '#dialogue-utilisateur-non-identifie' );
 242 
		this.afficherPanneau( '#dialogue-utilisateur-non-identifie' );
243 
		$( '#tb-observateur .control-group' ).addClass( 'error' );
 243 
		$( '#tb-observateur .control-group' ).addClass( 'error' );
244 
	}
 244 
	}
245 
 
 245 
 
246 
	return ( observateur && obs && taxonOuImage );
 246 
	return ( observateur && obs && taxonOuImage );
247 
};
 247 
};