| New file |
|---|
| 0,0 → 1,576 |
|---|
| // Héritage !! |
| function WidgetSaisieBellesdemarue(langue) { |
| this.taxons = {}; // utile ? |
| this.langue = langue || "fr"; |
| |
| // traduction |
| this.msgs.nl = { |
| "format-non-supporte": "Het bestandsformaat wordt niet ondersteund, de ondersteunde formaten zijn", |
| "date-incomplete": "Formaat : dd/mm/jjjj. Onvolledige datum, gebruik 0, bijvoorbeeld: 00/12/2011", |
| "probleme-service-nom-commune": "Een probleem is opgetreden bij het aanroepen van de dienst die de naam van de gemeenschappelijke", |
| "erreur-ajax-commune": "Ajax fout opgetreden bij het zoeken naar de stad", |
| "observations-transmises": "waarnemingen verzonden", |
| "supprimer-observation-liste": "Verwijder deze waarneming lijst worden doorgestuurd", |
| "observe-a": "waargenomen bij", |
| "certitude": "Zekerheid", |
| "milieu": "Milieu", |
| "commentaires": "Opmerkingen", |
| "inconnue": "onbekend", |
| "non-lie-au-ref": "niet gerelateerd aan referentiesysteem", |
| "obs-le": "op" |
| }; |
| } |
| WidgetSaisieBellesdemarue.prototype = new WidgetSaisie(); |
| |
| //surcharge |
| WidgetSaisieBellesdemarue.prototype.initialiserGoogleMap = function() { |
| // centrage |
| this.latLng = new google.maps.LatLng(50.8504500, 4.3487800);// Bruxelles par défaut |
| |
| var options = { |
| zoom: 11, // avant : 16 |
| center: this.latLng, |
| mapTypeId: google.maps.MapTypeId.HYBRID, |
| mapTypeControlOptions: { |
| mapTypeIds: ['OSM', |
| google.maps.MapTypeId.ROADMAP, |
| google.maps.MapTypeId.HYBRID, |
| google.maps.MapTypeId.SATELLITE, |
| google.maps.MapTypeId.TERRAIN]} |
| }; |
| |
| // Ajout de la couche OSM à la carte |
| osmMapType = new google.maps.ImageMapType({ |
| getTileUrl: function(coord, zoom) { |
| return 'http://tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png'; |
| }, |
| tileSize: new google.maps.Size(256, 256), |
| isPng: true, |
| alt: 'OpenStreetMap', |
| name: 'OSM', |
| maxZoom: 19 |
| }); |
| |
| // Création de la carte Google |
| this.map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas |
| this.map.mapTypes.set('OSM', osmMapType); |
| |
| // Création du Geocoder |
| this.geocoder = new google.maps.Geocoder(); |
| |
| // Marqueur google draggable |
| this.marker = new google.maps.Marker({ |
| map: this.map, |
| draggable: true, |
| title: 'Ma station', |
| icon: this.googleMapMarqueurUrl, |
| position: this.latLng |
| }); |
| |
| this.initialiserMarker(this.latLng); |
| |
| // intéraction carte |
| $("#geolocaliser").on('click', this.geolocaliser.bind(this)); |
| google.maps.event.addListener(this.marker, 'dragend', this.surDeplacementMarker.bind(this)); |
| google.maps.event.addListener(this.map, 'click', this.surClickDansCarte.bind(this)); |
| }; |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.initialiserAutocompleteCommune = function() { |
| var geocoderOptions = { |
| }, |
| addressSuffix = '', |
| lthis = this; |
| |
| if (this.lang == "nl") { |
| geocoderOptions.region = 'be'; |
| addressSuffix = ', België'; |
| } else { |
| geocoderOptions.region = 'fr'; |
| addressSuffix = ', France'; |
| } |
| |
| $("#carte-recherche").autocomplete({ |
| //Cette partie utilise geocoder pour extraire des valeurs d'adresse |
| source: function(request, response) { |
| geocoderOptions.address = request.term + addressSuffix; |
| lthis.geocoder.geocode( geocoderOptions, function(results, status) { |
| if (status == google.maps.GeocoderStatus.OK) { |
| response($.map(results, function(item) { |
| var retour = { |
| label: item.formatted_address, |
| value: item.formatted_address, |
| latitude: item.geometry.location.lat(), |
| longitude: item.geometry.location.lng() |
| }; |
| return retour; |
| })); |
| } else { |
| lthis.afficherErreurGoogleMap(status); |
| } |
| }); |
| }, |
| // Cette partie est executee a la selection d'une adresse |
| select: function(event, ui) { |
| lthis.latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); |
| lthis.deplacerMarker(lthis.latLng); |
| } |
| }); |
| }; |
| |
| //surcharge |
| WidgetSaisieBellesdemarue.prototype.initForm = function() { |
| // super() à la main - toute autre manière de faire est über-komplex |
| WidgetSaisie.prototype.initForm.call(this); |
| |
| this.surChangementTaxonListe(); |
| $('#taxon-liste').on('change', this.surChangementTaxonListe); |
| if (this.debug) { |
| console.log('Selected taxon:'+$('#taxon-liste option:selected').val()); |
| } |
| |
| // vidage du champ de recherche Google Maps |
| $('#carte-recherche').val(''); |
| |
| // vidage du taxon précédemment saisi avec l'autocomplétion, sans quoi on |
| // perd son nn |
| $('#taxon').val(''); |
| $('#taxon').data('numNomSel', ''); // et on vide le nn précédent |
| this.surChangementValeurTaxon(); |
| $('#taxon-liste').on('blur', this.surChangementValeurTaxon); |
| $('#taxon').on('blur', this.surChangementValeurTaxon); |
| |
| this.surChangementMilieuListe(); |
| $('#milieu').on('change', this.surChangementMilieuListe); |
| }; |
| |
| //surcharge |
| WidgetSaisieBellesdemarue.prototype.initEvts = function() { |
| var lthis = this; |
| // super() à la main - toute autre manière de faire est über-komplex |
| WidgetSaisie.prototype.initEvts.call(this); |
| |
| $('.dropdown-menu input, .dropdown-menu label').on('click', function(event) { |
| event.stopPropagation(); |
| }); |
| $('#fichier').off(); // elever l'écouteur d'événements de base |
| $('#fichier').on('click change', function(event) { |
| if ($(this).val().length > 0) { |
| arreter(event); |
| var options = { |
| success: lthis.afficherMiniature.bind(lthis), // post-submit callback |
| dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type) |
| resetForm: true // reset the form after successful submit |
| }; |
| $('#miniature').append( |
| '<img id="miniature-chargement" class="miniature" alt="chargement" src="'+ this.chargementImageIconeUrl +'"/>'); |
| $('#ajouter-obs').attr('disabled', 'disabled'); |
| if (lthis.verifierFormat($(this).val())) { |
| $('#form-upload').ajaxSubmit(options); |
| } else { |
| $('#form-upload')[0].reset(); |
| window.alert(lthis.msg("format-non-supporte") + ' ' + $('#fichier').attr('accept')); |
| } |
| return false; |
| } |
| }); |
| |
| $('.cb-milieux').on('click', function(event) { |
| $(this).valid(); |
| event.stopPropagation(); |
| }); |
| |
| // Défilement des photos |
| $('body').on('click', '.defilement-control-zone', function(event) { |
| lthis.defilerMiniatures($(this)); |
| }); |
| $('body').on('mouseover', '.defilement-control-zone', function(event) { |
| $('.defilement-control', this).removeClass('hidden'); |
| }); |
| $('body').on('mouseout', '.defilement-control-zone', function(event) { |
| $('.defilement-control', this).addClass('hidden'); |
| }); |
| |
| $('#photo-placeholder').click(function(event) { |
| $('#fichier').click(); |
| }); |
| $('#geolocaliser').on('click', this.geolocaliser.bind(this)); |
| |
| }; |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.configurerFormValidator = function() { |
| var lthis = this; |
| $.validator.addMethod( |
| 'dateCel', |
| function (value, element) { |
| return value == '' || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value)); |
| }, |
| lthis.msg("date-incomplete")); |
| |
| $.extend($.validator.defaults, { |
| ignore: [],// Forcer Jquery Validate à examiner les éléments avec en display:none; |
| highlight: function(element) { |
| $(element).closest('.control-group').removeClass('success').addClass('error'); |
| }, |
| success: function(element) { |
| element.text('OK!').addClass('valid'); |
| element.closest('.control-group').removeClass('error').addClass('success'); |
| |
| if (element.attr('id') == 'taxon' && $('#taxon').val() != '') { |
| // Si le taxon n'est pas lié au référentiel, on vide le data associé |
| if ($('#taxon').data('value') != $('#taxon').val()) { |
| $('#taxon').data('numNomSel', ''); |
| $('#taxon').data('nomRet', ''); |
| $('#taxon').data('numNomRet', ''); |
| $('#taxon').data('nt', ''); |
| $('#taxon').data('famille', ''); |
| } |
| } |
| } |
| }); |
| }; |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.definirReglesFormValidator = function() { |
| $('#form-observateur').validate({ |
| rules: { |
| courriel: { |
| required: true, |
| email: true}, |
| courriel_confirmation: { |
| equalTo: '#courriel'}, |
| prenom: { |
| required: true}, |
| nom: { |
| required: true} |
| } |
| }); |
| $('#form-obs').validate({ |
| rules: { |
| latitude : { |
| required: true, |
| range: [-90, 90] |
| }, |
| longitude: { |
| required: true, |
| range: [-180, 180] |
| }, |
| date: { |
| required: true, |
| 'dateCel' : true |
| }, |
| 'taxon-liste': { |
| required: true |
| }, |
| milieu: { |
| required: true, |
| minlength: 1 |
| }, |
| certitude: { |
| required: true |
| } |
| }, |
| errorPlacement: function(error, element) { |
| if (element.attr('name') == 'date') { |
| element.parent('.input-prepend').after(error); |
| } else if (element.attr('name') == 'certitude') { |
| error.insertAfter('#certitude-controls'); |
| } else if (element.attr('name') == 'longitude') { // on ignore "latitude" pour ne pas avoir de double erreur |
| error.insertBefore('#info-commune'); |
| } else { |
| error.insertAfter(element); |
| } |
| } |
| }); |
| }; |
| |
| WidgetSaisieBellesdemarue.prototype.validerFormulaire = function() { |
| $observateur = $("#form-observateur").valid(); |
| $obs = $("#form-obs").valid(); |
| return ($observateur == true && $obs == true) ? true : false; |
| }; |
| |
| WidgetSaisieBellesdemarue.prototype.surChangementTaxonListe = function() { |
| if ($('#taxon-liste').val() === '?') { |
| $('#taxon-input-groupe').removeClass('hidden'); |
| } else { |
| $('#taxon').val(''); // on force à réutiliser l'autocomplétion pour avoir un nn |
| $('#taxon').data('numNomSel', ''); // on vide le nn précédent |
| $('#taxon-input-groupe').addClass('hidden'); |
| } |
| }; |
| |
| WidgetSaisieBellesdemarue.prototype.surChangementMilieuListe = function() { |
| if ($('#milieu').val() === 'autres') { |
| $('#milieu-autre-input-group').removeClass('hidden'); |
| } else { |
| $('#milieu-autre').val(''); |
| $('#milieu-autre-input-group').addClass('hidden'); |
| } |
| }; |
| |
| // trouve la commune (zone géo de niveau 8) sous le pointeur, en mode mondial |
| // et pas seulement français (service zoneAdmin et non nomCommune) |
| WidgetSaisieBellesdemarue.prototype.trouverCommune = function(pos) { |
| if (this.latLng == null) { // tentative de protection contre le démon de Prémilhat |
| return; |
| } |
| var lthis = this; |
| $(function() { |
| |
| var url_service = lthis.serviceNomCommuneUrl; |
| |
| var urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng()); |
| $.ajax({ |
| url : urlNomCommuneFormatee, |
| type : "GET", |
| dataType : "jsonp", |
| beforeSend : function() { |
| $(".commune-info").empty(); |
| $("#dialogue-erreur .alert-txt").empty(); |
| }, |
| success : function(data, textStatus, jqXHR) { |
| $(".commune-info").empty(); |
| // en Belgique et en France, en général 8 = patelin @TODO bancal |
| if ("8" in data) { |
| $("#commune-nom").append(data["8"].intitule); |
| $("#marqueur-commune").data('commune', {'nom' : data["8"].nom, 'codeInsee' : null}); |
| } |
| }, |
| statusCode : { |
| 500 : function(jqXHR, textStatus, errorThrown) { |
| if (this.debug) { |
| $("#dialogue-erreur .alert-txt").append('<p id="msg">' + this.msg("probleme-service-nom-commune") + '</p>'); |
| reponse = jQuery.parseJSON(jqXHR.responseText); |
| var erreurMsg = ""; |
| if (reponse != null) { |
| $.each(reponse, function (cle, valeur) { |
| erreurMsg += valeur + "<br />"; |
| }); |
| } |
| |
| $("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>'); |
| } |
| } |
| }, |
| error : function(jqXHR, textStatus, errorThrown) { |
| if (this.debug) { |
| $("#dialogue-erreur .alert-txt").append('<p class="msg">' + lthis.msg("erreur-ajax-commune") + '</p>'); |
| reponse = jQuery.parseJSON(jqXHR.responseText); |
| var erreurMsg = ""; |
| if (reponse != null) { |
| $.each(reponse, function (cle, valeur) { |
| erreurMsg += valeur + "<br />"; |
| }); |
| } |
| |
| $("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>'); |
| } |
| }, |
| complete : function(jqXHR, textStatus) { |
| var debugMsg = extraireEnteteDebug(jqXHR); |
| if (debugMsg != '') { |
| if (this.debug) { |
| $("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Debug : '+debugMsg+'</pre>'); |
| } |
| } |
| if ($("#dialogue-erreur .msg").length > 0) { |
| $("#dialogue-erreur").show(); |
| } |
| } |
| }); |
| }); |
| }; |
| |
| // lorsqu'on choisit un taxon dans la liste, ou qu'on en tape un à la main dans |
| // le champ "autre espèce" (avec autocomplétion) |
| WidgetSaisieBellesdemarue.prototype.surChangementValeurTaxon = function() { |
| var nomHorsListe = $('#taxon-liste').val() == '?' ? true : false; |
| var nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'); |
| var numNomSel = nomHorsListe ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(); |
| var nomSel = nomHorsListe ? $('#taxon').val() : $('#taxon-liste option:selected').text().trim(); |
| |
| // Un nom non valide entraine automatiquement une certitude "à déterminer" |
| if(nomSpecial || !numNomSel) { |
| $('#certitude-adeterminer').prop('checked', true); |
| } else { |
| $('#certitude-adeterminer').prop('checked', false); |
| } |
| |
| // stockage temporaire des infos connues |
| $('#taxon').data('nn', numNomSel); |
| $('#taxon').data('ns', nomSel); |
| }; |
| |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.ajouterObs = function() { |
| // Fermeture automatique des dialogue de transmission de données |
| $('#dialogue-obs-transaction-ko').hide(); |
| $('#dialogue-obs-transaction-ok').hide(); |
| |
| // obligation de fournir au moins une image |
| var nbImages = $('#miniatures img').length; |
| if (nbImages == 0) { |
| $('#image-obligatoire').show(); |
| } else { |
| $('#image-obligatoire').hide(); |
| } |
| |
| if (this.validerFormulaire() == true && nbImages > 0) { |
| this.masquerPanneau('#dialogue-form-invalide'); |
| this.obsNbre = this.obsNbre + 1; |
| $(".obs-nbre").text(this.obsNbre); |
| $(".obs-nbre").triggerHandler('changement'); |
| this.afficherObs(); |
| this.stockerObsData(); |
| this.supprimerMiniatures(); |
| if(! this.especeImposee) { |
| $("#taxon").data("numNomSel", undefined); |
| } |
| $('#barre-progression-upload').attr('aria-valuemax', this.obsNbre); |
| $('#barre-progression-upload .sr-only').text('0/'+this.obsNbre+" " + this.msg("observations-transmises")); |
| } else { |
| this.afficherPanneau('#dialogue-form-invalide'); |
| } |
| }; |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.afficherObs = function() { |
| // on accepte que la commune soit parfois vide |
| var commune = $("#commune-nom").text(); |
| if (this.debug) { |
| console.log(commune); |
| } |
| $("#liste-obs").prepend( |
| '<div id="obs'+this.obsNbre+'" class="row-fluid obs obs'+this.obsNbre+'">'+ |
| '<div class="span12">'+ |
| '<div class="well">'+ |
| '<div class="obs-action pull-right has-tooltip" data-placement="bottom" '+ |
| 'title="' + this.msg("supprimer-observation-liste") + '">'+ |
| '<button class="btn btn-danger supprimer-obs" value="'+this.obsNbre+'" title="'+this.obsNbre+'">'+ |
| '<i class="icon-trash icon-white"></i>'+ |
| '</button>'+ |
| '</div> '+ |
| '<div class="row-fluid">'+ |
| '<div class="thumbnail span2">'+ |
| this.ajouterImgMiniatureAuTransfert()+ |
| '</div>'+ |
| '<div class="span9">'+ |
| '<ul class="unstyled">'+ |
| '<li>'+ |
| '<span class="nom-sci">'+this.ajouterNomEspece()+'</span> '+ |
| this.ajouterNumNomSel()+ |
| this.ajouterNomReferentiel()+ |
| '</li>'+ |
| '<li>'+ |
| this.msg('observe-a')+' '+ |
| '<span class="commune">'+commune+'</span> '+ |
| ' ['+$("#latitude").val()+' / '+$("#longitude").val()+']'+ |
| ' ' + this.msg("obs-le") + ' '+ |
| '<span class="date">'+$("#date").val()+'</span>'+ |
| '</li>'+ |
| '<li>'+ |
| '<span>' + this.msg("certitude") + ' :</span> '+$('input[name="certitude"]').val()+' '+ |
| '</li>'+ |
| '<li>'+ |
| '<span>' + this.msg("milieu") + ' :</span> '+this.ajouterMilieu()+ |
| '</li>'+ |
| '<li>'+ |
| this.msg("commentaires") + ' : <span class="discretion">'+$("#notes").val()+'</span>'+ |
| '</li>'+ |
| '</ul>'+ |
| '</div>'+ |
| '</div>'+ |
| '</div>'+ |
| '</div>'+ |
| '</div>'); |
| $('#zone-liste-obs').removeClass("hidden").show(); |
| }; |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.stockerObsData = function() { |
| var lthis = this; |
| var nomHorsListe = $('#taxon-liste').val() == '?' ? true : false; |
| nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'), |
| numNomSel = nomHorsListe ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(); |
| var nomSel = nomHorsListe ? $('#taxon').val() : $('#taxon-liste option:selected').data('nom-a-sauver'), |
| nomRet = nomHorsListe ? $('#taxon').data('nomRet') : this.taxons[numNomSel]['nom_ret'], |
| numNomRet = nomHorsListe ? $('#taxon').data('numNomRet') : this.taxons[numNomSel]['num_nom_ret'], |
| numTaxon = nomHorsListe ? $('#taxon').data('nt') : this.taxons[numNomSel]['num_taxon'], |
| famille = nomHorsListe ? $('#taxon').data('famille') : this.taxons[numNomSel]['famille'], |
| referentiel = (numNomSel == undefined) ? '' : this.nomSciReferentiel, |
| notes = (nomSpecial ? this.taxons[numNomSel]['nom_fr'] + '. ' : '') + $('#notes').val(); |
| |
| certitude = $('input[name=certitude]:checked').val(); |
| certitude = (certitude == undefined) ? '' : certitude; |
| |
| $('#liste-obs').data('obsId'+this.obsNbre, { |
| 'date': $('#date').val(), |
| 'notes': notes, |
| |
| 'latitude': $('#latitude').val(), |
| 'longitude': $('#longitude').val(), |
| 'commune_nom': $('#commune-nom').text(), |
| |
| 'nom_sel': nomSel, |
| 'num_nom_sel': numNomSel, |
| 'nom_ret': nomRet, |
| 'num_nom_ret': numNomRet, |
| 'num_taxon': numTaxon, |
| 'famille': famille, |
| 'referentiel': referentiel, |
| 'certitude': certitude, |
| 'milieu': lthis.ajouterMilieu(), |
| |
| // Ajout des champs images |
| 'image_nom': lthis.getNomsImgsOriginales(), |
| |
| // Ajout des champs étendus de l'obs |
| 'obs_etendue': lthis.getObsChpEtendus() |
| }); |
| if (this.debug) { |
| console.log($('#liste-obs').data('obsId'+this.obsNbre)); |
| } |
| }; |
| |
| WidgetSaisieBellesdemarue.prototype.ajouterMilieu = function() { |
| var milieu = $('#milieu').val(); |
| if (milieu == 'autres') { |
| var autreMilieu = $('#milieu-autre').val(); |
| if (autreMilieu) { |
| milieu = autreMilieu; |
| } |
| } |
| return milieu; |
| }; |
| |
| WidgetSaisieBellesdemarue.prototype.ajouterNomEspece = function() { |
| var ns = $('#taxon').data('ns'); |
| if (! ns) { |
| ns = this.msg("inconnue"); |
| } |
| return ns; |
| }; |
| |
| WidgetSaisieBellesdemarue.prototype.ajouterNomReferentiel = function() { |
| var nomRef = ''; |
| if ($("#taxon").data("nn")) { |
| nomRef = '<span class="referentiel-obs">'+ |
| ' [' + this.nomSciReferentiel +']'+ |
| '</span>'; |
| } |
| return nomRef; |
| }; |
| |
| // surcharge |
| WidgetSaisieBellesdemarue.prototype.ajouterNumNomSel = function() { |
| var nn = ''; |
| if (! $("#taxon").data("nn")) { |
| nn = ' <span class="alert-error">[' + this.msg("non-lie-au-ref") + ']</span>'; |
| } else { |
| nn = ' <span class="nn">[nn'+$("#taxon").data("nn")+']</span>'; |
| } |
| return nn; |
| }; |