WebSVN – Sites.obs-saisons.fr – Diff – /trunk/applications/saisie/squelettes/js/saisie.js

 /**
 	************************************************************************************************
 	************************************************************************************************
 	   Fonction permettant de transformer les élements de la classe pliage en accordéon
 	************************************************************************************************
 	************************************************************************************************
 **/
 function initialiserElementsPliables() {
 	$('.pliage h4').addClass('lien_pliage');
 	$('.pliage ul').hide();
 	$('.pliage > ul:first-child').hide();
 	$('.lien_pliage').bind('click', function() {
 		$(this).nextAll('ul').slideToggle();
 		return false;
 	});
+}
 $('.pliage').ready(function() {
 	initialiserElementsPliables();
 });
 /**
 	************************************************************************************************
 	************************************************************************************************
 	   Fonctions de gestion des onglets du formulaire de saisie d'espèce
 	************************************************************************************************
 	************************************************************************************************
 **/
 function initialiserOnglets() {
 	$(".contenu_onglet").hide();
 	$("ul.liste_onglets li:first").addClass("active").show();
 	$(".contenu_onglet:first").show();
 	$("ul.liste_onglets li").click(function() {
 		$("ul.liste_onglets li").removeClass("active");
 		$(this).addClass("active");
 		$(".contenu_onglet").hide();
 		var activeTab = $(this).find("a").attr("href");
 		$(activeTab).fadeIn();
 		return false;
 	});
+}
 $('.contenu_onglet').ready(function() {
 	initialiserOnglets();
 });
 function agrandirZoneCLicBoutonsRadios() {
 	$('.formulaire_informations_espece_mini').addClass("element_cliquable");
 	$('#form_saisie_espece').children('input[type="submit"]').hide();
 	$('.formulaire_informations_espece_mini').children('input[type="radio"]').hide();
 	$('.titre_type').hide();
 	$('.formulaire_informations_espece_mini').bind('click',function() {
 		$(this).children('input[type="radio"]').attr('checked','checked');
 		$('.formulaire_informations_espece_mini').removeClass('element_clique');
 		$(this).addClass('element_clique');
 		$('#form_saisie_espece').submit();
 	});
+}
 $('#form_saisie_espece').ready(function() {
 	agrandirZoneCLicBoutonsRadios();
 });
 /**
 	************************************************************************************************
 	************************************************************************************************
 	   Fonctions permettant de transformer les cases du tableau d'évenements en mini formulaire
 	************************************************************************************************
 	************************************************************************************************
 **/
 htmlEnCours = '';
 elementEnCours = null;
 function initialiserLignesCliquables() {
 	$('.conteneur_element_modifier').hide();
 	$(".date_observation_individu").each(function() {
 		$(this).bind('click', function() {
 			if($(this).hasClass('element_clique')) {
 				return false;
 			} else {
 				conteneur_obs = $(this).children('span');
 				id_formulaire = conteneur_obs.attr('id');
 				remplacerElementDateParFormulaireAjax(id_formulaire, $(this));
 				return false;
+			}
 		});
 	});
+}
 function initialiserCalendrierFormulaire() {
 	anneeEnCours = $("#annee_en_cours").attr("value");
 	if(typeof(anneeEnCours)=='undefined'){
 		dateCourante = new Date();
 		anneeEnCours = dateCourante.getFullYear();
+	}
 	$(".calendrier").each(function() {
 		$(this).find("input").datepicker({
 			disabled: true,
 			altFormat: 'dd/mm/yyyy',
 			minDate: '01/01/'+anneeEnCours,
 			maxDate: '31/12/'+anneeEnCours
 		});
 	});
+}
 $(document).ready(function() {
 	initialiserCalendrierFormulaire();
 });
 function estUneDateValide(peutEtreUneDate) {
 	var reg= new RegExp("^[0-3][0-9][/]{1}[0-1][0-2][/]{1}[0-9]{4}$","g");
 	return reg.test(peutEtreUneDate);
+}
 /** Fonctions de manipulation des éléments du tableau pour les transformer en élements cliquables et calendriers **/
 function initialiserMiniCalendrierFormulaire(id_element) {
 	anneeEnCours = jQuery.trim($("#annee_en_cours").html());
 	if(typeof(anneeEnCours)=='undefined'){
 		dateCourante = new Date();
 		anneeEnCours = dateCourante.getFullYear();
+	}
 	$('#'+id_element)
 	.datepicker({
 		disabled: true,
 		constrainInput: true,
 		altFormat: 'dd/mm/yyyy',
 		minDate: '01/01/'+anneeEnCours,
 		maxDate: '31/12/'+anneeEnCours,
 		onSelect: function(dateText, inst) {
 			$('#'+id_element).val(dateText);
 			donnees_obs = collecterDonneesMiniFormulaire(id_formulaire);
 			envoyerRequeteAjaxValidationMiniFormulaire(donnees_obs, id_formulaire);
-		},
-		onClose: function(dateText, inst) {
-			remplacerMiniFormulaireParElementDate(id_element);
+		}
 	});
 	$('#'+id_element).datepicker( "show" );
 	/*$('#'+id_element).keypress(function() {
 		if(estUneDateValide($('#'+id_element).val())) {
 			$('#'+id_element).removeClass('erreur_valeur');
 		} else {
 			$('#'+id_element).addClass('erreur_valeur');
+		}
 	});*/
+}
 function remplacerElementDateParFormulaireAjax(id_element, conteneur_selectionne) {
 	if(elementEnCours != null) {
 		elementEnCours.removeClass('element_clique');
 		elementEnCours.html(htmlEnCours);
+	}
 	elementEnCours = conteneur_selectionne;
 	htmlEnCours = conteneur_selectionne.html();
 	conteneur_obs = $('#'+id_element);
 	valeur_date = conteneur_obs.html();
 	valeur_date = valeur_date.replace('-','');
 	conteneur_selectionne.addClass('element_clique');
 	conteneur_selectionne.html('<span class="calendrier"><input type="text" value="'+jQuery.trim(valeur_date)+'" class="calendrier" id="'+id_formulaire+'" size="7" maxlenght="10" /></div>');
 	initialiserMiniCalendrierFormulaire(id_formulaire);
+}
 function remplacerMiniFormulaireParElementDate(id_element) {
 	valeur_date_pour_stade = $('#'+id_element).val();
 	/*if(!estUneDateValide(valeur_date_pour_stade)) {
 		valeur_date_pour_stade = htmlEnCours;
 	}*/
 	elementEnCours.html('<span id="'+id_element+'">'+valeur_date_pour_stade+' </span>');
 	elementEnCours.removeClass('element_clique');
 	elementEnCours = null;
-	elementEnCours = null;
+}
 /** Fonctions d'envoi et de récupération des élements du formulaire ajax **/
 function envoyerRequeteAjaxValidationMiniFormulaire(donnees_obs, id_formulaire) {
+	url_page_courante = document.URL;
+	url_page_courante = url_page_courante.replace('module=Individu','module=Observation');
-	url_page_courante = document.URL.replace('module=Individu&action=afficherListeIndividu','module=Observation&action=validerFormulaireModificationObservationAjax');
+	url_page_courante = url_page_courante.replace('action=afficherListeIndividu','action=validerFormulaireModificationObservationAjax');
+	url_ajax = url_page_courante.replace('action=validerFormulaireSaisieIndividu','action=validerFormulaireModificationObservationAjax');
-	$.post(url_page_courante, donnees_obs, function(obj_retour) {
+	$.post(url_ajax, donnees_obs, function(obj_retour) {
-		if(obj_retour.reponse === 'OK') {
 		if(obj_retour.reponse === 'OK') {
 			remplacerMiniFormulaireParElementDate(id_formulaire);
+		}
 	});
+}
 function collecterDonneesMiniFormulaire(id_formulaire) {
 	valeur_date_pour_stade = $('#'+id_formulaire).val();
 	if(valeur_date_pour_stade == null || jQuery.trim(valeur_date_pour_stade) == '') {
 		return false ;
+	}
 	id_individu_stade_obs = id_formulaire.split('_');
 	stade_obs = 'observation_'+id_individu_stade_obs[3];
 	date_annee_en_cours = jQuery.trim($("#annee_en_cours").html());
 	donnees_obs = { "id_individu": id_individu_stade_obs[1],
 					"annee_en_cours": date_annee_en_cours
 					};
 	identifiant_observation = 'observation_'+id_individu_stade_obs[3];
 	donnees_obs[identifiant_observation] = valeur_date_pour_stade;
 	return donnees_obs;
+}
 $('#saisie_liste_evenements').ready(function() {
 	initialiserLignesCliquables();
 });
 /**
 	************************************************************************************************
 	************************************************************************************************
 	    Fonctions concernant la carte permettant de pointer d'afficher l'emplacement des stations
 	************************************************************************************************
 	************************************************************************************************
 **/
 var map;
 var marker;
+var liste_localite_en_cours;
+var indice_commune_en_cours;
+var liste_auto_completion_a_le_focus;
+var timerRequeteAutocompletion;
+var timerAffichageAutocompletion;
-function ajouterListenerFormulaireSaisieLatLon() {
-	$('#cacher_afficher_lien').bind('click', function() {
+function cacherElementsRafraichissables() {
-		$('#conteneur_form_liens_lat_lon').slideToggle();
+	$('.rafraichissable input').attr('disabled', 'disabled');
-		return false;
+	$('.rafraichissable input[type="text"]').addClass("chargement");
-	});
+}
+function montrerElementsRafraichissables() {
-	$('input#station_lat').bind('blur', function() {
+	$('.rafraichissable input').removeAttr('disabled');
-		verifierEtLocaliserCoordonnees();
+	$('.chargement').removeClass("chargement");
-	});
+}
-	$('input#station_lon').bind('blur', function() {
-		verifierEtLocaliserCoordonnees();
+function ajouterAutoCompletionCommune() {
+	$('input#station_commune').after('<div class="conteneur_suggestions"></div>');
+	$('input#station_commune').parent().addClass('autocompletion');
+	$('input#station_commune').attr('autocomplete','off');
+	$('.conteneur_suggestions').hide();
+	rendreListeAutoCompletionInteractive('input#station_commune');
+}
-	});
+function ajouterListenerFormulaireSaisieLatLon() {
 	$('input#localiser_lat_lon').click(function() {
 		verifierEtLocaliserCoordonnees();
 	});
-	$('#conteneur_form_liens_lat_lon').hide();
+}
 function carteEstEnSaisie() {
 	return ($('#conteneur_form_liens_lat_lon').length > 0);
+}
 function verifierEtLocaliserCoordonnees() {
 	lat ;
 	lon;
 	if(carteEstEnSaisie()) {
 		lat = $('#station_lat').val();
 		lon = $('#station_lon').val();
+		obtenirInformationsPourCoordonnees(lat, lon);
 	} else {
 		var lat = jQuery.trim($('#station_lat').html());
 		var lon = jQuery.trim($('#station_lon').html());
+	}
 	if(jQuery.trim(lat) == '' || jQuery.trim(lon) == '') {
 		return;
+	}
 	if(!isNaN(lat) && lat.length > 0 && !isNaN(lon) && lon.length > 0) {
 	} else {
 		window.alert("coordonnées invalides");
+	}
 	var positionMarker = new google.maps.LatLng(lat, lon);
 	marker.setPosition(positionMarker);
 	map.setCenter(positionMarker);
+	map.setZoom(12);
+}
+function obtenirInformationsPourCoordonnees(lat, lon) {
+	lat = jQuery.trim(lat);
+	lon = jQuery.trim(lon);
+	if(isNaN(lat) || lat.length <= 0 || isNaN(lon) || lon.length <= 0) {
+		return;
+	}
+	cacherElementsRafraichissables();
+	$.get('http://162.38.234.9/obs_saisons/applications/jrest/OdsCommune/informationsPourCoordonnees/?lat='+lat+'&lon='+lon, function(data) {
+		infos_localites = jQuery.parseJSON(data);
+		$('#station_alt').val(infos_localites.alt);
+		if(jQuery.trim($('#station_commune').val()) == '') {
+			$('#station_commune').val(infos_localites.commune);
+		}
+		montrerElementsRafraichissables();
+	});
+}
+function obtenirInformationsPourCommune(nom_commune) {
+	if(jQuery.trim(nom_commune) == '') {
+		$('.conteneur_suggestions').hide();
+		return;
+	}
+	$.get('http://162.38.234.9/obs_saisons/applications/jrest/OdsCommune/informationsPourCommune/?commune='+nom_commune, function(data) {
+		infos_localites = jQuery.parseJSON(data);
+		afficherListeAutoCompletion(infos_localites);
+	});
+}
+function afficherListeAutoCompletion(tableau_localites) {
+	liste_localite_en_cours = tableau_localites;
+	html_liste_localite = '<ul class="liste_suggestions">';
+	for(i = 0; i< tableau_localites.length; i++) {
+		html_liste_localite += '<li id="commune_'+i+'" class="element_auto_completion_commune">'+tableau_localites[i]['commune']+'  ('+tableau_localites[i]['dpt']+')</li>';
+	}
+	html_liste_localite += '</ul>';
+	$('.conteneur_suggestions').html(html_liste_localite);
+	$('.element_auto_completion_commune').hover(function() {
+		indice = $(this).attr('id').split('_')[1];
+		mettreEnSurbrillanceCommune(indice);
+	});
+	$('.element_auto_completion_commune').click(function() {
+		indice = $(this).attr('id').split('_')[1];
+		selectionnerCommune(indice);
+	});
+	if(tableau_localites.length > 0) {
+		$('.conteneur_suggestions').show();
+		mettreEnSurbrillanceCommune(0);
+	}
+}
+function mettreEnSurbrillanceCommune(indice) {
+	if(indice_commune_en_cours != null) {
+		$('#commune_'+indice_commune_en_cours).removeClass('element_selectionne');
+	}
+	$('#commune_'+indice).addClass('element_selectionne');
+	indice_commune_en_cours = indice;
+	reprogrammerTimerPourCacherListeAutoCompletion();
+}
+function rendreListeAutoCompletionInteractive(selecteur) {
+	$(selecteur).keyup(function(event) {
+		if(event.which == 8 || (event.which >= 48 && event.which <= 90)) {
+			reprogrammerTimerPourCacherListeAutoCompletion();
+			reprogrammerTimerPourLancerRequeteCommune();
+		}
+	});
+	$(selecteur).keydown(function(event) {
+		reprogrammerTimerPourCacherListeAutoCompletion();
+		// entree
+		if(event.which==13){
+			selectionnerCommune(indice_commune_en_cours);
+			event.preventDefault();
+		}
+		// haut
+		if(event.which == 38){
+			if(indice_commune_en_cours > 0) {
+				mettreEnSurbrillanceCommune(indice_commune_en_cours - 1);
+			}
+		}
+		// bas
+		if(event.which == 40){
+			if(indice_commune_en_cours < liste_localite_en_cours.length - 1) {
+				mettreEnSurbrillanceCommune(indice_commune_en_cours + 1);
+			}
+		}
+	});
+	$('.conteneur_suggestions').blur(function() {
+		$('.conteneur_suggestions').hide();
+	});
+}
+function reprogrammerTimerPourCacherListeAutoCompletion() {
+	if(timerAffichageAutocompletion != null) {
+		window.clearTimeout(timerAffichageAutocompletion);
+	}
+	timerAffichageAutocompletion = window.setTimeout(function() {
+		$('.conteneur_suggestions').hide();
+	}, 2000);
+}
+function reprogrammerTimerPourLancerRequeteCommune() {
+	if(timerRequeteAutocompletion != null) {
+		window.clearTimeout(timerRequeteAutocompletion);
+	}
+	timerRequeteAutocompletion = window.setTimeout(function() {
+		obtenirInformationsPourCommune($('input#station_commune').val());
+	}, 350);
+}
+function selectionnerCommune(indice) {
+	infos_commune = liste_localite_en_cours[indice];
+	$('input#station_commune').val(infos_commune['commune']);
+	$('input#station_lat').val(infos_commune['lat']);
+	$('input#station_lon').val(infos_commune['lon']);
+	verifierEtLocaliserCoordonnees();
+	$('.conteneur_suggestions').hide();
+}
 function mettreAJourValeursFormulaire(latlon) {
 	latlon = latlon.toString().split(',');
+	lat = latlon[0].replace('(', '');
+	lon = latlon[1].replace(')', '');
 	$('#station_lat').val(latlon[0].replace('(', ''));
+	$('#station_lon').val(latlon[1].replace(')', ''));
-	$('#station_lon').val(latlon[1].replace(')', ''));
+	obtenirInformationsPourCoordonnees(lat, lon);
+}
 function initialiserCarte() {
 	if($('#map_canvas').length == 0) {
 		return;
+	}
 	var latlng = new google.maps.LatLng(47.0504, 2.2347);
 	var myOptions = {
 		zoom: 6,
 		center: latlng,
 		mapTypeId: google.maps.MapTypeId.HYBRID
 	};
 	map = new google.maps.Map(document.getElementById("map_canvas"),
     	myOptions);
 	marker = new google.maps.Marker({
 	      position: latlng,
 	      title:""
 	});
 	if (carteEstEnSaisie()) {
 			marker.setDraggable(true);
-			google.maps.event.addListener(marker, 'dragend', function() {
+			google.maps.event.addListener(marker, 'dragend', function(event) {
 				mettreAJourValeursFormulaire(marker.getPosition());
 			});
 			$('#conteneur_form_liens_lat_lon').ready(function() {
 				verifierEtLocaliserCoordonnees();
 				ajouterListenerFormulaireSaisieLatLon();
+				ajouterAutoCompletionCommune();
 			});
 	} else {
 		marker.setDraggable(false);
 		$('#conteneur_liens_lat_lon').ready(function() {
 			verifierEtLocaliserCoordonnees();
 		});
+	}
 	marker.setClickable(true);
 	// To add the marker to the map, call setMap();
 	marker.setMap(map);
+}
 $('#map_canvas').ready(function() {
 	initialiserCarte();
-});
 });
+/**
+************************************************************************************************
+************************************************************************************************
+    Fonctions de debug permattant d'afficher les objets javascript à la manière de print_r
+************************************************************************************************
+************************************************************************************************
+**/
+function dump(arr,level) {
+	var dumped_text = "";
+	if(!level) level = 0;
+	//The padding given at the beginning of the line.
+	var level_padding = "";
+	for(var j=0;j<level+1;j++) level_padding += "    ";
+	if(typeof(arr) == 'object') { //Array/Hashes/Objects
+	 for(var item in arr) {
+	  var value = arr[item];
+	  if(typeof(value) == 'object') { //If it is an array,
+	   dumped_text += level_padding + "'" + item + "' ...\n";
+	   dumped_text += dump(value,level+1);
+	  } else {
+	   dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
+	  }
+	 }
+	} else { //Stings/Chars/Numbers etc.
+	 dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
+	}
+	return dumped_text;
+}

Subversion Repositories Sites.obs-saisons.fr

(root)/trunk/applications/saisie/squelettes/js/saisie.js – Rev 90 → 100