Subversion Repositories eFlore/Applications.cel

Rev

Rev 2708 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2707 mathias 1
// Héritage
2
function WidgetSaisieFlorileges() {
3
	this.latLngDebPre = {lat: null, lng: null};
4
	this.latLngFinPre = {lat: null, lng: null};
5
	this.okPourChargementCarte = 2;
6
	this.markerDeb = null;
7
	this.latLngDeb = null;
8
	this.markerFin = null;
9
	this.latLngFin = null;
10
	this.ligneRue = null;
11
	this.googleMapMarqueurDebutUrl = null;
12
	this.googleMapMarqueurFinUrl = null;
13
	this.premierDeplacement = true;
14
}
15
WidgetSaisieFlorileges.prototype = new WidgetSaisie();
16
 
17
WidgetSaisieFlorileges.prototype.initCarto = function() {
18
	var lthis = this;
19
 
20
	this.initialiserGoogleMap();
21
	this.afficherEtapeGeolocalisation(1);
22
 
23
	$('#carte-recherche').autocomplete({
24
		//Cette partie utilise geocoder pour extraire des valeurs d'adresse
25
		source: function(request, response) {
26
 
27
			lthis.geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {
28
				if (status == google.maps.GeocoderStatus.OK) {
29
					response($.map(results, function(item) {
30
						var retour = {
31
							label: item.formatted_address,
32
							value: item.formatted_address,
33
							latitude: item.geometry.location.lat(),
34
							longitude: item.geometry.location.lng()
35
						};
36
						return retour;
37
					}));
38
				} else {
39
					lthis.afficherErreurGoogleMap(status);
40
				}
41
			});
42
		},
43
		// Cette partie est executee a la selection d'une adresse
44
		select: function(event, ui) {
45
			var nouvellePosition = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
46
			lthis.initialiserMarkerDeb();
47
			lthis.deplacerMarkerDeb(nouvellePosition);
48
			lthis.map.setZoom(16);
49
			lthis.afficherEtapeGeolocalisation(2);
50
		}
51
	});
52
}
53
 
54
WidgetSaisieFlorileges.prototype.initForm = function() {
55
	// super() à la main - toute autre manière de faire est über-komplex
56
	WidgetSaisie.prototype.initForm.call(this);
57
 
58
	this.configurerDatePicker('#date-arret-traitement-phyto');
59
	this.surChangementTaxonListe();// Vérif lors du chargement de la page
60
	$('#taxon-liste').on('change', this.surChangementTaxonListe.bind(this));
61
}
62
 
63
WidgetSaisieFlorileges.prototype.initEvts = function() {
64
	var lthis = this;
65
	// super() à la main - toute autre manière de faire est über-komplex
66
	WidgetSaisie.prototype.initEvts.call(this);
67
 
68
	$('#photo-placeholder').click(function(event) {
69
		$('#fichier').click();
70
	});
71
	$('.dropdown-menu input, .dropdown-menu label').on('click', function(event) {
72
		event.stopPropagation();
73
	});
74
 
75
	// Afficher/Cacher champs cachés par défaut
76
	this.surChangementPeriodiciteTraitementPhyto();// Vérif lors du chargement de la page
77
	$('#periodicite-traitement-phyto').on('change', this.surChangementPeriodiciteTraitementPhyto.bind(this));
78
 
79
	// Sliders
80
	this.transformerEnSlider('#presence-zone-vegetalise');
81
	this.transformerEnSlider('#hauteur-batiment-avoisinant');
82
	this.transformerEnSlider('#periodicite-traitement-phyto');
83
	this.transformerEnSlider('#resistance-traitement-phyto');
84
	this.transformerEnSlider('#vitesse-croissance');
85
 
86
	// Gestion des obs
87
	$('.cb-milieux').on('click', function(event) {
88
		$(this).valid();
89
		event.stopPropagation();
90
	});
91
	$('input#hauteur-plante').on('blur', function() {
92
		// if there's a bad value
93
		var valeur = $(this).val();
94
		if (! valeur.match(/^[0-9]+$/)) {
95
			// replace it with nothing
96
			var nouvelleValeur = valeur.replace(/[^0-9]/g, '');
97
			$(this).val(nouvelleValeur);
98
		}
99
	});
100
 
101
	// Défilement des photos @TODO harmoniser
102
	$('body').on('click', '.defilement-control-zone', function(event) {
103
		lthis.defilerMiniatures($(this));
104
	});
105
	$('body').on('mouseover', '.defilement-control-zone', function(event) {
106
		$('.defilement-control', this).removeClass('hidden');
107
	});
108
	$('body').on('mouseout', '.defilement-control-zone', function(event) {
109
		$('.defilement-control', this).addClass('hidden');
110
	});
111
};
112
 
113
 
114
WidgetSaisieFlorileges.prototype.prechargerForm = function(infos) {
115
	$('input[name="station"]').val(infos.station);
116
 
117
	//console.log(infos.extension);
118
	if (infos.extension) {
119
		var ext = infos.extension;
120
		if (ext.latitudeDebutRue && ext.longitudeDebutRue && ext.latitudeFinRue && ext.longitudeFinRue) {
121
			this.okPourChargementCarte--;
122
			this.latLngDebPre.lat = parseFloat(ext.latitudeDebutRue.valeur);
123
			this.latLngDebPre.lng = parseFloat(ext.longitudeDebutRue.valeur);
124
			this.latLngFinPre.lat = parseFloat(ext.latitudeFinRue.valeur);
125
			this.latLngFinPre.lng = parseFloat(ext.longitudeFinRue.valeur);
126
			this.prechargerRue();
127
		}
128
 
129
		var chpsARemplir = ['adresse', 'typoUrbaine', 'revetementSol', 'presenceZoneVegetalise', 'hauteurBatimentAvoisinant',
130
			'intensiteGestion', 'periodiciteTraitementPhyto', 'dateArretTraitementPhyto', 'itineraireGestion'];
131
		$.each(infos.extension, function(nomDuChp, value) {
132
			if (chpsARemplir.indexOf(nomDuChp) >= 0) {
133
				if ($('[name="' + nomDuChp + '"]').hasClass('slider')) {
134
					$('select[name="' + nomDuChp + '"] option[value="' + value.valeur + '"]')
135
						.attr('selected', 'selected');
136
					var selectedIndexOptions = $('select[name="' + nomDuChp + '"]').prop('selectedIndex') + 1;
137
					$('[name="' + nomDuChp + '"]').parent().find('.horizontal-slider').slider('value', selectedIndexOptions);
138
 
139
					if (nomDuChp == 'periodiciteTraitementPhyto') {
140
						$('[name="periodiciteTraitementPhyto"]').trigger('change');
141
					}
142
				} else {
143
					$('[name="' + nomDuChp + '"]').val(value.valeur);
144
				}
145
			}
146
		});
147
	}
148
}
149
 
150
WidgetSaisieFlorileges.prototype.prechargerRue = function() {
151
	if (this.okPourChargementCarte == 0) {
152
		this.latLngDeb = new google.maps.LatLng(this.latLngDebPre.lat, this.latLngDebPre.lng);
153
		this.markerDeb = undefined;
154
		this.initialiserMarkerDeb();
155
		this.deplacerMarkerDeb(latLngDeb);
156
		this.premierDeplacement = false;
157
		this.markerFin = undefined;
158
		this.latLngFin = new google.maps.LatLng(this.latLngFinPre.lat, this.latLngFinPre.lng);
159
		this.initialiserMarkerFin();
160
		this.deplacerMakerFin(latLngFin)
161
		this.surDeplacementMarkerFin();
162
		this.map.setZoom(16);
163
	}
164
}
165
 
166
WidgetSaisieFlorileges.prototype.focusChampFormulaire = function() {
167
	$('#structure').focus();
168
}
169
 
170
WidgetSaisieFlorileges.prototype.initialiserGoogleMap = function() {
171
	var lthis = this;
172
 
173
	this.latLngDeb = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France
174
	var options = {
175
			zoom: 5,
176
			center: this.latLngDeb,
177
			mapTypeId: google.maps.MapTypeId.HYBRID,
178
			mapTypeControlOptions: {
179
				mapTypeIds: ['OSM',
180
					google.maps.MapTypeId.ROADMAP,
181
					google.maps.MapTypeId.HYBRID,
182
					google.maps.MapTypeId.SATELLITE,
183
					google.maps.MapTypeId.TERRAIN]}
184
		};
185
 
186
	// Ajout de la couche OSM à la carte
187
	var osmMapType = new google.maps.ImageMapType({
188
		getTileUrl: function(coord, zoom) {
189
			return 'http://tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
190
		},
191
		tileSize: new google.maps.Size(256, 256),
192
		isPng: true,
193
		alt: 'OpenStreetMap',
194
		name: 'OSM',
195
		maxZoom: 19
196
	});
197
 
198
	// Création de la carte Google
199
	this.map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
200
	this.map.mapTypes.set('OSM', osmMapType);
201
 
202
	// Ajout de l'évènment sur click dans Carte
203
	google.maps.event.addListener(this.map, 'click', this.surClickDansCarte.bind(this));
204
 
205
	// Lorsque la carte est chargée, on vérifie si on peut précharger des données
206
	google.maps.event.addListenerOnce(this.map, 'idle', function(){
207
		if (lthis.obsId == '') {
208
			// Initialisation du marker de début de rue
209
			lthis.initialiserMarkerDeb();
210
			// Tentative de geocalisation si aucune obs à précharger
211
			if (lthis.obsId == '') {
212
				lthis.tenterGeolocalisation();
213
			}
214
		} else {
215
			lthis.okPourChargementCarte--;
216
			lthis.prechargerRue();
217
		}
218
	});
219
 
220
	$("#geolocaliser").on('click', this.geolocaliser.bind(this));
221
	// Création du Geocoder
222
	this.geocoder = new google.maps.Geocoder();
223
}
224
 
225
WidgetSaisieFlorileges.prototype.initialiserMarkerDeb = function() {
226
	this.premierDeplacement = true;
227
	if (this.markerDeb == undefined) {
228
		// Marqueur de début de Rue
229
		this.markerDeb = new google.maps.Marker({
230
			map: this.map,
231
			draggable: true,
232
			title: 'Début de la portion de rue étudiée',
233
			icon: this.googleMapMarqueurDebutUrl,
234
			position: this.latLngDeb
235
		});
236
		google.maps.event.addListener(this.markerDeb, 'dragend', this.surDeplacementMarkerDeb.bind(this));
237
	}
238
 
239
	this.latLngFin = this.latLngDeb;
240
	if (this.markerFin != undefined) {
241
		this.markerFin.setMap(null);
242
	}
243
	this.latLngCentre = this.latLngDeb;
244
	if (this.ligneRue != undefined) {
245
		this.ligneRue.setMap(null);
246
	}
247
}
248
 
249
WidgetSaisieFlorileges.prototype.surDeplacementMarkerDeb = function() {
250
	this.deplacerMarkerDeb(this.markerDeb.getPosition());
251
}
252
 
253
WidgetSaisieFlorileges.prototype.deplacerMarkerDeb = function(nouvellePosition) {
254
	this.latLngDeb = nouvellePosition;
255
	this.markerDeb.setPosition(this.latLngDeb);
256
	this.map.setCenter(this.latLngDeb);
257
	this.mettreAJourMarkerPosition(this.latLngDeb);
258
	this.trouverCommune(this.latLngDeb);
259
 
260
	if (this.premierDeplacement) {
261
		this.initialiserMarkerDeb();
262
		this.premierDeplacement = false;
263
	} else {
264
		var nouvellePositionFin = new google.maps.LatLng(this.latLngDeb.lat(), this.latLngDeb.lng() + 0.0010);
265
		this.initialiserMarkerFin();
266
		this.deplacerMakerFin(nouvellePositionFin)
267
		this.afficherEtapeGeolocalisation(3);
268
	}
269
}
270
 
271
WidgetSaisieFlorileges.prototype.initialiserMarkerFin = function() {
272
	if (this.markerFin == undefined) {
273
		this.markerFin = new google.maps.Marker({
274
			map: this.map,
275
			draggable: true,
276
			title: 'Fin de la portion de rue étudiée',
277
			icon: this.googleMapMarqueurFinUrl,
278
			position: this.latLngFin
279
		});
280
		google.maps.event.addListener(this.markerFin, 'dragend', this.surDeplacementMarkerFin.bind(this));
281
	} else {
282
		this.markerFin.setMap(null);
283
	}
284
}
285
 
286
WidgetSaisieFlorileges.prototype.deplacerMakerFin = function(nouvellePosition) {
287
	this.latLngFin = nouvellePosition;
288
	this.markerFin.setMap(this.map);
289
	this.markerFin.setPosition(this.latLngFin);
290
	this.dessinerLigneRue(this.latLngDeb, this.latLngFin);
291
}
292
 
293
WidgetSaisieFlorileges.prototype.surDeplacementMarkerFin = function() {
294
	this.dessinerLigneRue(this.markerDeb.getPosition(), this.markerFin.getPosition());
295
	this.afficherCentreRue();
296
	this.afficherEtapeGeolocalisation(4);
297
}
298
 
299
WidgetSaisieFlorileges.prototype.dessinerLigneRue = function(pointDebut, pointFin) {
300
	if (this.ligneRue != undefined) {
301
		this.ligneRue.setMap(null);
302
	}
303
 
304
	this.ligneRue = new google.maps.Polyline({
305
		path: [pointDebut, pointFin],
306
		strokeColor: "#FF0000",
307
		strokeOpacity: 1.0,
308
		strokeWeight: 2
309
	});
310
 
311
	this.ligneRue.setMap(this.map);
312
}
313
 
314
WidgetSaisieFlorileges.prototype.afficherCentreRue = function() {
315
	this.latLngDeb = this.markerDeb.getPosition();
316
	this.latLngFin = this.markerFin.getPosition();
317
	this.latLngCentre = new google.maps.LatLng((this.latLngFin.lat() + this.latLngDeb.lat())/2, (this.latLngFin.lng() + this.latLngDeb.lng())/2);
318
	this.mettreAJourMarkerPosition(this.latLngCentre);
319
}
320
 
321
WidgetSaisieFlorileges.prototype.afficherEtapeGeolocalisation = function(numEtape) {
322
	$('.liste_indication_geolocalisation').children().hide();
323
	$('.liste_indication_geolocalisation :nth-child('+numEtape+')').show();
324
}
325
 
326
WidgetSaisieFlorileges.prototype.geolocaliser = function(event) {
327
	var latitude = $('#latitude').val(),
328
		longitude = $('#longitude').val(),
329
		nouvellePosition = new google.maps.LatLng(latitude, longitude);
330
	this.initialiserMarkerDeb();
331
	this.deplacerMarkerDeb(nouvellePosition);
332
	this.afficherEtapeGeolocalisation(2);
333
	this.map.setZoom(16);
334
	arreter(event);
335
}
336
 
337
WidgetSaisieFlorileges.prototype.tenterGeolocalisation = function() {
338
	if (navigator.geolocation) {
339
		navigator.geolocation.getCurrentPosition(function(position) {
340
			var latitude = position.coords.latitude,
341
				longitude = position.coords.longitude,
342
				nouvellePosition = new google.maps.LatLng(latitude, longitude);
343
			this.initialiserMarkerDeb();
344
			this.deplacerMarkerDeb(nouvellePosition);
345
			this.map.setZoom(16);
346
		});
347
	}
348
}
349
 
350
WidgetSaisieFlorileges.prototype.surClickDansCarte = function(event) {
351
	this.deplacerMarkerDeb(event.latLng);
352
}
353
 
354
WidgetSaisieFlorileges.prototype.transformerEnSlider = function(selector) {
355
	$(selector).each(function(index, el) {
356
		// hide the element
357
		$(el).addClass('slider-on');
358
 
359
		// add the slider to each element
360
		var slider = $( '<div class="slider-holder"><div class="horizontal-slider"></div></div>' ).
361
			insertBefore( el ).find('.horizontal-slider').slider({
362
				min: 1,
363
				max: el.options.length,
364
				range: 'min',
365
				value: el.selectedIndex + 1,
366
				slide: function(event, ui) {
367
					el.selectedIndex = ui.value - 1;
368
					slider.find('a').text(el.options[el.selectedIndex].text);
369
 
370
					$(selector + ' option[selected="selected"]').removeAttr('selected');
371
					$(selector + ' :nth-child('+ui.value+')').attr('selected', 'selected')
372
					$(selector).valid();
373
				},
374
				stop: function() {
375
					$(el).change();
376
				}
377
			});
378
 
379
		slider.find('a').text(el.options[el.selectedIndex].text);
380
 
381
		// Create a legend under the slider so we can see the options
382
		var options = [];
383
		for (var option in $(el).children()) {
384
			if (!isNaN(parseInt(option))) {
385
				options.push(el.options[option].text);
386
			}
387
		}
388
		// the width of each legend/option
389
		var width = (slider.width() / (options.length - 1));
390
 
391
		// Add the legend. Half the width of the first and last options for display consistency.
392
		slider.after('<div class="slider-legend"><p style="width:' + (width / 2) + 'px;text-align:left;">' +
393
			options.join('</p><p style="width:' + width + 'px;">') +'</p></div>')
394
			.parent().find('.slider-legend p:last-child').css('width', width / 2)
395
			.css('text-align', 'right');
396
 
397
		// if there are too many options so that the text is wider than the width, then hide the text
398
		var lastChild = slider.parent().find('.slider-legend p:last-child');
399
		if (lastChild[0].clientWidth < lastChild[0].scrollWidth) {
400
			slider.parent().find('.slider-legend p');//.css('text-indent', '200%');
401
		}
402
	});
403
}
404
 
405
WidgetSaisieFlorileges.prototype.surChangementPeriodiciteTraitementPhyto = function() {
406
	if ($('#periodicite-traitement-phyto').val() === 'jamais') {
407
		$('#datp-zone').removeClass('hidden');
408
	} else {
409
		$('#datp-zone').addClass('hidden');
410
	}
411
}
412
 
413
WidgetSaisieFlorileges.prototype.surChangementTaxonListe = function() {
414
	if ($('#taxon-liste').val() === '?') {
415
		$('#taxon-input-groupe').removeClass('hidden');
416
	} else {
417
		$('#taxon-input-groupe').addClass('hidden');
418
	}
419
}
420
 
421
WidgetSaisieFlorileges.prototype.configurerFormValidator = function() {
422
	$.validator.addMethod(
423
		'dateCel',
424
		function (value, element) {
425
			return value == '' || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value));
426
		},
427
		'Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.');
428
 
429
	$.extend($.validator.defaults, {
430
		ignore: [],// Forcer Jquery Validate à examiner les éléments avec en display:none;
431
		highlight: function(element) {
432
			$(element).closest('.control-group').removeClass('success').addClass('error');
433
		},
434
		success: function(element) {
435
			element.text('OK!').addClass('valid');
436
			element.closest('.control-group').removeClass('error').addClass('success');
437
 
438
			if (element.attr('id') == 'taxon' && $('#taxon').val() != '') {
439
				// Si le taxon n'est pas lié au référentiel, on vide le data associé
440
				if ($('#taxon').data('value') != $('#taxon').val()) {
441
					$('#taxon').data('numNomSel', '');
442
					$('#taxon').data('nomRet', '');
443
					$('#taxon').data('numNomRet', '');
444
					$('#taxon').data('nt', '');
445
					$('#taxon').data('famille', '');
446
				}
447
			}
448
		}
449
	});
450
}
451
 
452
WidgetSaisieFlorileges.prototype.definirReglesFormValidator = function() {
453
	$('#form-observateur').validate({
454
		rules: {
455
			courriel: {
456
				required: true,
457
				email: true},
458
			courriel_confirmation: {
459
				required: true,
460
				equalTo: '#courriel'},
461
			prenom: {
462
				required: true},
463
			nom: {
464
				required: true},
465
			personneStructure: {
466
				required: true},
467
			personneService: {
468
				required: true}
469
		}
470
	});
471
	$('#form-site').validate({
472
		rules: {
473
			station: {
474
				required: true},
475
			latitude : {
476
				required: true,
477
				range: [-90, 90]},
478
			longitude: {
479
				required: true,
480
				range: [-180, 180]},
481
			typoUrbaine: {
482
				required: true},
483
			revetementSol: {
484
				required: true},
485
			intensiteGestion: {
486
				required: true},
487
			periodiciteTraitementPhyto: {
488
				required: true},
489
			itineraireGestion: {
490
				required: true}
491
		}
492
	});
493
	$('#form-date').validate({
494
		rules: {
495
			date: {
496
				required: true,
497
				'dateCel' : true},
498
			dateDerniereIntervention: {
499
				required: true}
500
		},
501
		errorPlacement: function(error, element) {
502
			if (element.attr('name') == 'date') {
503
				element.parent('.input-prepend').after(error);
504
			} else {
505
				error.insertAfter(element);
506
			}
507
		}
508
	});
509
	$('#form-obs').validate({
510
		rules: {
511
			'taxon-liste': {
512
				required: true},
513
			'milieux[]': {
514
				required: true,
515
				minlength: 1},
516
			hauteurPlante: {
517
				required: true,
518
				digits: true},
519
			resistanceTraitementPhyto: {
520
				required: true}
521
		},
522
		errorPlacement: function(error, element) {
523
			if (element.attr('name') == 'milieux[]') {
524
				error.insertAfter('#milieux-controls');
525
			} else {
526
				error.insertAfter(element);
527
			}
528
		}
529
	});
530
}
531
 
532
WidgetSaisieFlorileges.prototype.validerFormulaire = function() {
533
	var observateur = $('#form-observateur').valid(),
534
		station = $('#form-site').valid(),
535
		date = $('#form-date').valid(),
536
		obs = $('#form-obs').valid(),
537
		debRue = (this.latLngDeb == undefined) ? false : true,
538
		finRue = (this.latLngFin == undefined) ? false : true;
539
	var ok = (observateur && station && obs && date && debRue && finRue) ? true : false;
540
	//console.log(observateur+'-'+station+'-'+obs+'-'+date+'-'+debRue+'-'+finRue);
541
	return ok;
542
}
543
 
544
WidgetSaisieFlorileges.prototype.ajouterObs = function() {
545
	if (this.validerFormulaire() == true) {
546
		this.obsNbre = this.obsNbre + 1;
547
		$('.obs-nbre').text(this.obsNbre);
548
		$('.obs-nbre').triggerHandler('changement');
549
		this.afficherObs();
550
		this.stockerObsData();
551
		this.supprimerMiniatures();
552
	} else {
553
		var debRue = (this.latLngDeb == undefined) ? false : true,
554
			finRue = (this.latLngFin == undefined) ? false : true;
555
		if (debRue == false || finRue == false) {
556
			this.afficherPanneau('#dialogue-form-invalide-rue');
557
		} else {
558
			this.afficherPanneau('#dialogue-form-invalide');
559
		}
560
	}
561
}
562
 
563
WidgetSaisieFlorileges.prototype.afficherObs = function() {
564
	var lthis = this;
565
 
566
	var numNomSel = ($('#taxon-liste').val() == '?') ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(),
567
		nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'),
568
		taxon = ($('#taxon-liste').val() == '?') ? $('#taxon').val() : $('#taxon-liste option:selected').data('nom-a-sauver'),
569
		referentiel = (numNomSel == undefined) ? '' : '['+ this.nomSciReferentiel +']',
570
		commune = $('#commune-nom').text(),
571
		codeInsee = $('#commune-code-insee').text(),
572
		lat = $('input[name="latitude"]').val(),
573
		lng = $('input[name="longitude"]').val(),
574
		date = $('#date').val(),
575
		site = $('#station').val(),
576
		revetement = $('#revetement-sol').val(),
577
		intensiteGestion = $('#intensite-gestion').val(),
578
		resistance = $('#resistance-traitement-phyto').val(),
579
		milieux = this.getMilieux(),
580
		notes = (nomSpecial ? this.taxons[numNomSel]['nom_fr'] + ".<br />" : '') + $('#notes').val();
581
 
582
	$('#liste-obs').prepend(
583
		'<div id="obs'+this.obsNbre+'" class="row-fluid obs obs'+this.obsNbre+'">'+
584
			'<div class="span12">'+
585
				'<div class="well">'+
586
					'<div class="obs-action pull-right has-tooltip" data-placement="bottom" '+
587
						'title="Supprimer cette observation de la liste à transmettre">'+
588
						'<button class="btn btn-danger supprimer-obs" value="'+this.obsNbre+'" title="'+this.obsNbre+'">'+
589
							'<i class="icon-trash icon-white"></i>'+
590
						'</button>'+
591
					'</div> '+
592
					'<div class="row-fluid">'+
593
						'<div class="span2 obs-miniatures">'+
594
						this.ajouterImgMiniatureAuTransfert()+
595
						'</div>'+
596
						'<div class="span8">'+
597
							'<ul class="unstyled">'+
598
								'<li>'+
599
									'<span class="nom-sci">' + taxon + '</span> ' +
600
									this.formaterNumNomSel(numNomSel)+
601
									'<span class="referentiel-obs">' + referentiel + '</span>' +
602
									' observé à ' +
603
									'<span class="commune">' + commune + '</span> ' +
604
									'(' + codeInsee + ') [' + lat +' / ' + lng + ']' +
605
									' le ' +
606
									'<span class="date">' + date + '</span>' +
607
								'</li>' +
608
								'<li>' +
609
									'<span>Site :</span> ' + site + ' ' + ' ; ' +
610
									'<span>Revêtement au sol :</span> ' + revetement + ' ' + ' ; ' +
611
									'<span>Intensité de gestion :</span> ' + intensiteGestion + ' ' + ' ; ' +
612
									'<span>Milieu :</span> ' + milieux + ' ' + ' ; ' +
613
									'<span>Résistance/Résilience :</span> ' + resistance + ' ' +
614
								'</li>' +
615
								'<li>' +
616
									'Commentaires : ' + notes +
617
								'</li>'+
618
							'</ul>'+
619
						'</div>'+
620
					'</div>'+
621
				'</div>'+
622
			'</div>'+
623
		'</div>');
624
	$('#zone-liste-obs').removeClass("hidden").show();
625
}
626
 
627
WidgetSaisieFlorileges.prototype.getMilieux = function() {
628
	var milieuxStr = '',
629
		milieux = [];
630
	$('.cb-milieux:checked').each(function() {
631
		milieux.push($(this).val());
632
	});
633
 
634
	milieuxStr = Array.prototype.slice.call(milieux).join(', ');
635
	return milieuxStr;
636
}
637
 
638
WidgetSaisieFlorileges.prototype.ajouterImgMiniatureAuTransfert = function() {
639
	var html = '',
640
		miniatures = '',
641
		indicateurs = '',
642
		premiere = true,
643
		numero = 1;
644
	if ($('#miniatures img').length == 0) {
645
		html = '<img class="miniature" alt="Aucune photo"src="'+ this.pasDePhotoIconeUrl +'" />';
646
	} else if ($('#miniatures img').length >= 1) {
647
		$('#miniatures img').each(function() {
648
			var visible = premiere ? 'miniature-selectionnee' : 'miniature-cachee',
649
				css = $(this).hasClass('b64') ? 'miniature b64' : 'miniature',
650
				src = $(this).attr('src'),
651
				alt = $(this).attr('alt');
652
 
653
			var miniature = '<img class="'+css+' '+visible+'"  alt="'+alt+'"src="'+src+'" />';
654
			miniatures += miniature;
655
 
656
			var indicateurActif = premiere ? 'active' : '';
657
			var indicateur = '<li class="' + indicateurActif + '" data-numero="' + numero++ + '"></li>';
658
			indicateurs += indicateur;
659
 
660
			premiere = false;
661
		});
662
 
663
		if ($('#miniatures img').length == 1) {
664
			html = miniatures;
665
		} else {
666
			html =
667
				'<div class="defilement">' +
668
					miniatures +
669
					'<a class="defilement-control-zone gauche">' +
670
					'	<span class="defilement-control gauche hidden">&#60;</span>' +
671
					'</a>' +
672
					'<a class="defilement-control-zone droite">' +
673
					'	<span class="defilement-control droite hidden">&#62;</span>' +
674
					'</a>' +
675
					'<ol class="defilement-indicateurs">' + indicateurs + '</ol>' +
676
				'</div>';
677
		}
678
	}
679
	return html;
680
}
681
 
682
WidgetSaisieFlorileges.prototype.defilerMiniatures = function(element) {
683
	var miniatureSelectionne = element.siblings('img.miniature-selectionnee');
684
	miniatureSelectionne.removeClass('miniature-selectionnee').addClass('miniature-cachee');
685
	var miniatureAffichee = miniatureSelectionne;
686
 
687
	var indicateurActif = element.parent().find('.defilement-indicateurs .active');
688
	indicateurActif.removeClass('active');
689
 
690
	if (element.hasClass('defilement-control-zone') && element.hasClass('gauche')) {
691
		if (miniatureSelectionne.prev('.miniature').length != 0) {
692
			miniatureAffichee = miniatureSelectionne.prev('.miniature');
693
			indicateurActif.prev().addClass('active');
694
		} else {
695
			miniatureAffichee = miniatureSelectionne.siblings('.miniature').last();
696
			indicateurActif.siblings().last().addClass('active');
697
		}
698
	} else {
699
		if (miniatureSelectionne.next('.miniature').length != 0) {
700
			miniatureAffichee = miniatureSelectionne.next('.miniature');
701
			indicateurActif.next().addClass('active');
702
		} else {
703
			miniatureAffichee = miniatureSelectionne.siblings('.miniature').first();
704
			indicateurActif.siblings().first().addClass('active');
705
		}
706
	}
707
	miniatureAffichee.addClass('miniature-selectionnee').removeClass('miniature-cachee');
708
}
709
 
710
WidgetSaisieFlorileges.prototype.formaterNumNomSel = function(numNomSel) {
711
	var nn = '';
712
	if (numNomSel == undefined) {
713
		nn = '<span class="alert-error">[non lié au référentiel]</span>';
714
	} else {
715
		nn = '<span class="nn">[nn'+numNomSel+']</span>';
716
	}
717
	return nn;
718
}
719
 
720
// tentativé d'héritage
721
/*function surChangementReferentiel() {
722
	NOM_SCI_REFERENTIEL = $('#referentiel').val();
723
	$('#taxon').val('');
724
}*/
725
 
726
WidgetSaisieFlorileges.prototype.stockerObsData = function() {
727
	var nomHorsListe = $('#taxon-liste').val() == '?' ? true : false;
728
		nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'),
729
		numNomSel = nomHorsListe ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(),
730
		nomSel = nomHorsListe ? $('#taxon').val() : $('#taxon-liste option:selected').data('nom-a-sauver'),
731
		nomRet = nomHorsListe ? $('#taxon').data('nomRet') : this.taxons[numNomSel]['nom_ret'],
732
		numNomRet = nomHorsListe ? $('#taxon').data('numNomRet') : this.taxons[numNomSel]['num_nom_ret'],
733
		numTaxon = nomHorsListe ? $('#taxon').data('nt') : this.taxons[numNomSel]['num_taxon'],
734
		famille = nomHorsListe ? $('#taxon').data('famille') : this.taxons[numNomSel]['famille'],
735
		referentiel = (numNomSel == undefined) ? '' : this.nomSciReferentiel,
736
		notes = (nomSpecial ? this.taxons[numNomSel]['nom_fr'] + '. ' : '') + $('#notes').val();
737
 
738
	$('#liste-obs').data('obsId'+ this.obsNbre, {
739
		'date': $('#date').val(),
740
		'notes': notes,
741
 
742
		'station': $('#station').val(),
743
		'latitude': $('#latitude').val(),
744
		'longitude': $('#longitude').val(),
745
		'commune_nom': $('#commune-nom').text(),
746
		'commune_code_insee': $('#commune-code-insee').text(),
747
 
748
		'nom_sel': nomSel,
749
		'num_nom_sel': numNomSel,
750
		'nom_ret': nomRet,
751
		'num_nom_ret': numNomRet,
752
		'num_taxon': numTaxon,
753
		'famille': famille,
754
		'referentiel': referentiel,
755
 
756
		'milieu': this.getMilieux(),
757
 
758
		// Ajout des champs images
759
		'image_nom': this.getNomsImgsOriginales(),
760
 
761
		// Ajout des champs étendus de l'obs
762
		'obs_etendue': this.getObsChpEtendus()
763
	});
764
	//console.log($('#liste-obs').data('obsId'+obsNbre));
765
}
766
 
767
WidgetSaisieFlorileges.prototype.getObsChpEtendus = function() {
768
	var champs = [],
769
		perceptionTechnicien = this.getPerceptionTechnicien();
770
	if (perceptionTechnicien != undefined) {
771
		champs.push(perceptionTechnicien);
772
	}
773
	if (this.latLngDeb != undefined) {
774
		var latitudeDebutRue = {cle: 'latitudeDebutRue', label: 'Latitude du début de la rue', valeur: this.latLngDeb.lat().toFixed(5)};
775
		champs.push(latitudeDebutRue);
776
		var longitudeDebutRue = {cle: 'longitudeDebutRue', label: 'Longitude du début de la rue', valeur: this.latLngDeb.lng().toFixed(5)};
777
		champs.push(longitudeDebutRue);
778
	}
779
	if (this.latLngFin != undefined) {
780
		var latitudeFinRue = {cle: 'latitudeFinRue', label: 'Latitude de fin de la rue', valeur: this.latLngFin.lat().toFixed(5)};
781
		champs.push(latitudeFinRue);
782
		var longitudeFinRue = {cle: 'longitudeFinRue', label: 'Longitude de fin de la rue', valeur: this.latLngFin.lng().toFixed(5)};
783
		champs.push(longitudeFinRue);
784
	}
785
 
786
	$('.obs-chp-etendu').each(function() {
787
		var valeur = $(this).val(),
788
			cle = $(this).attr('name'),
789
			label = $(this).data('label');
790
		if (valeur != '') {
791
			var chpEtendu = {cle: cle, label: label, valeur: valeur};
792
			champs.push(chpEtendu);
793
		}
794
	});
795
	return champs;
796
}
797
 
798
WidgetSaisieFlorileges.prototype.getPerceptionTechnicien = function() {
799
	var perceptionTechnicien = undefined,
800
		perceptions = [];
801
	$('.cb-perception-technicien:checked').each(function() {
802
		perceptions.push($(this).val());
803
	});
804
	if (perceptions.length > 0) {
805
		var valeur = Array.prototype.slice.call(perceptions).join(', ');
806
		perceptionTechnicien = {cle: 'perceptionTechnicien', label: "Perceptions par l'équipe", valeur: valeur};
807
	}
808
	return perceptionTechnicien;
809
}