| New file |
|---|
| 0,0 → 1,528 |
|---|
| function UtilsStreets() { |
| // this.infosUtilisateur = null; |
| this.langue = $( 'body' ).data( 'lang' ); |
| this.urlRacine = window.location.origin; |
| // système de traduction minimaliste |
| this.msgs = { |
| fr: { |
| 'arbre' : 'Arbre', |
| 'dupliquer' : 'Dupliquer', |
| 'saisir-plantes' : 'Saisir les plantes', |
| 'format-non-supporte' : 'Le format de fichier n\'est pas supporté, les formats acceptés sont', |
| 'image-deja-chargee' : 'Cette image a déjà été utilisée', |
| 'date-incomplete' : 'Format : jj/mm/aaaa.', |
| 'observations-transmises' : 'observations transmises', |
| 'supprimer-observation-liste' : 'Supprimer cette observation de la liste à transmettre', |
| 'milieu' : 'Milieu', |
| 'commentaires' : 'Commentaires', |
| 'non-lie-au-ref' : 'non lié au référentiel', |
| 'obs-le' : 'le', |
| 'non-connexion' : 'Veuillez entrer votre login et votre mot de passe', |
| 'obs-numero' : 'Observation n°', |
| 'erreur' : 'Erreur', |
| 'erreur-inconnue' : 'Erreur inconnue', |
| 'erreur-image' : 'Erreur lors du chargement des images', |
| 'erreur-ajax' : 'Erreur Ajax', |
| 'erreur-chargement' : 'Erreur lors du chargement de l\'observation', |
| 'erreur-chargement-obs-utilisateur' : 'Erreur lors du chargement des observations de cet utilisateur', |
| 'erreur-formulaire' : 'Erreur: impossible de charger le formulaire', |
| 'lieu-obs' : 'observé à', |
| 'lieu-dit' : 'Lieu-dit', |
| 'station' : 'Station', |
| 'date-rue' : 'Un releve existe dejà à cette date pour cette rue.', |
| 'rechargement-page' : 'Êtes vous sûr de vouloir quiter la page?\nLes observations saisies mais non transmises seront perdues.' |
| }, |
| en: { |
| 'arbre' : 'Tree', |
| 'dupliquer' : 'Duplicate', |
| 'saisir-plantes' : 'Enter the plants', |
| 'format-non-supporte' : 'The file format is not supported, the accepted formats are', |
| 'image-deja-chargee' : 'This image has already been used', |
| 'date-incomplete' : 'Format: dd/mm/yyyy.', |
| 'observations-transmises' : 'observations transmitted', |
| 'supprimer-observation-liste' : 'Delete this observation from the list to be transmitted', |
| 'milieu' : 'Environment', |
| 'commentaires' : 'Comments', |
| 'non-lie-au-ref' : 'unrelated to the referencial ', |
| 'obs-le' : 'the', |
| 'non-connexion' : 'Please enter your login and password', |
| 'obs-numero' : 'Observation number ', |
| 'erreur' : 'Error', |
| 'erreur-inconnue' : 'Unknown error', |
| 'erreur-image' : 'Error loading the images', |
| 'erreur-ajax' : 'Ajax Error', |
| 'erreur-chargement' : 'Error loading the observation', |
| 'erreur-chargement-obs-utilisateur' : 'Error loading this user\'s observations', |
| 'erreur-formulaire' : 'Error: couldn\'t load form', |
| 'lieu-obs' : 'observed at', |
| 'lieu-dit' : 'Locality', |
| 'station' : 'Place', |
| 'date-rue' : 'A record already exists on this date for this street', |
| 'rechargement-page' : 'Are you sure you want to leave the page?\nAll untransmitted observations will be lost.' |
| } |
| }; |
| } |
| |
| |
| UtilsStreets.prototype.chargerForm = function( nomSquelette, streetsFormObj ) { |
| const lthis = this; |
| var urlSqueletteArbres = this.urlRacine + '/widget:cel:streets?squelette=' + nomSquelette; |
| |
| $.ajax({ |
| url: urlSqueletteArbres, |
| type: 'get', |
| success: function( squelette ) { |
| if ( lthis.valOk( squelette ) ) { |
| streetsFormObj.chargerSquelette( squelette, nomSquelette ); |
| } |
| }, |
| error: function() { |
| $( '#charger-form' ).html( lthis.msgTraduction( 'erreur-formulaire' ) ); |
| } |
| }); |
| }; |
| |
| UtilsStreets.prototype.chargerFormPlantes = function( squelette, nomSquelette ) { |
| if ( this.valOk( $( '#releve-data' ).val() ) ) { |
| $( '#charger-form' ).html( squelette ); |
| const releveDatas = $.parseJSON( $( '#releve-data' ).val() ); |
| const nbArbres = releveDatas.length -1; |
| |
| for ( var i = 1; i <= nbArbres ; i++ ) { |
| $( '#choisir-arbre' ).append( |
| '<option value="' + i + '">'+ |
| this.msgTraduction( 'arbre' ) + ' ' + i + |
| '</option>' |
| ); |
| } |
| } |
| }; |
| |
| /** |
| * Stocke en Json les valeurs du relevé dans en value d'un input hidden |
| */ |
| UtilsStreets.prototype.formaterReleveData = function( releveDatas ) { |
| var releve = [], |
| obs = releveDatas.obs, |
| obsE = releveDatas.obsE; |
| |
| releve[0] = { |
| utilisateur : obs.ce_utilisateur, |
| date : obs.date_observation, |
| rue : obsE.rue, |
| 'commune-nom' : obs.zone_geo, |
| 'commune-insee' : obs.ce_zone_geo, |
| pays : obs.pays, |
| latitude : obs.latitude, |
| longitude : obs.longitude, |
| altitude : obs.altitude, |
| 'zone-pietonne' : obsE['zone-pietonne'], |
| 'pres-lampadaires' : obsE['pres-lampadaires'], |
| commentaires : obs.commentaire |
| }; |
| return releve; |
| }; |
| |
| /** |
| * Stocke en Json les valeurs d'une obs |
| */ |
| UtilsStreets.prototype.formaterArbreData = function( arbresDatas ) { |
| var retour = {}, |
| obs = arbresDatas.obs, |
| obsE = arbresDatas.obsE, |
| miniatureImg = []; |
| if( this.valOk( obs['miniature-img'] ) ) { |
| miniatureImg = obs['miniature-img']; |
| } else if ( this.valOk( obsE['miniature-img'] ) ) { |
| miniatureImg = $.parseJSON( obsE['miniature-img'] ); |
| } |
| |
| retour = { |
| 'date_rue_commune' : obs.date_observation + obsE.rue + obs.zone_geo, |
| 'num-arbre' : obsE.num_arbre, |
| 'id_observation' : obs.id_observation, |
| 'taxon' : { |
| 'numNomSel' : obs.nom_sel_nn, |
| 'value' : obs.nom_sel, |
| 'nomRet' : obs.nom_ret, |
| 'numNomRet' : obs.nom_ret_nn, |
| 'nt' : obs.nt, |
| 'famille' : obs.famille, |
| }, |
| 'miniature-img' : miniatureImg, |
| 'referentiel' : obs.nom_referentiel, |
| 'certitude' : obs.certitude, |
| 'rue-arbres' : obsE['rue-arbres'], |
| 'latitude-arbres' : obsE['latitude-arbres'], |
| 'longitude-arbres' : obsE['longitude-arbres'], |
| 'altitude-arbres' : obsE['altitude-arbres'], |
| 'circonference' : obsE.circonference, |
| 'surface-pied' : obsE['surface-pied'], |
| 'equipement-pied-arbre' : obsE['equipement-pied-arbre'], |
| 'tassement' : obsE.tassement, |
| 'dejections' : obsE.dejections, |
| 'com-arbres' : obsE['com-arbres'] |
| }; |
| return retour; |
| }; |
| |
| UtilsStreets.prototype.fournirDate = function( dateObs ) { |
| if ( /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/.test( dateObs ) ) { |
| return dateObs; |
| } else if ( /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test( dateObs ) ) { |
| var dateArray = dateObs.split( '-' ); |
| return dateArray[2] + '/' + dateArray[1] + '/' + dateArray[0] |
| } else { |
| console.log( 'erreur date : ' + dateObs ) |
| } |
| }; |
| |
| /** |
| * Si la langue est définie dans this.langue, et si des messages sont définis |
| * dans this.msgs, tente de trouver le message dont la clé est [cle] dans la |
| * langue en cours. S'il n'est pas trouvé, retourne la version française (par |
| * défaut); si celle-ci n'exite pas, retourne "N/A". |
| */ |
| UtilsStreets.prototype.msgTraduction = function( cle ) { |
| var msg = 'N/A'; |
| |
| if ( this.msgs ) { |
| if ( this.langue in this.msgs && cle in this.msgs[this.langue] ) { |
| msg = this.msgs[this.langue][cle]; |
| } else if ( cle in this.msgs['fr'] ) { |
| msg = this.msgs['fr'][cle]; |
| } |
| } |
| return msg; |
| }; |
| |
| /** |
| * Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide |
| * et de comparer à une autre valeur : |
| * Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN |
| * Si comparer est défini on le compare à valeur en fonction de sensComparaison |
| * Un booléen est une variable valide : on retourne true |
| * @param { string || number || object || undefined } valeur |
| * @param { boolean } sensComparaison : true = rechercher, false = refuser |
| * @param { string || number || object || undefined || boolean } comparer :valeur à comparer |
| * @returns {boolean} |
| */ |
| UtilsStreets.prototype.valOk = function( valeur, sensComparaison = true, comparer = undefined ) { |
| var retour = true; |
| if ( 'boolean' !== typeof valeur ) { |
| switch( typeof valeur ) { |
| case 'string' : |
| retour = ( '' !== valeur ); |
| break; |
| case 'number' : |
| retour = ( NaN !== valeur ); |
| break; |
| case 'object' : |
| retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) ); |
| if ( null !== valeur && undefined !== valeur.length ) { |
| retour = ( retour && 0 < valeur.length ); |
| } |
| break; |
| case 'undefined' : |
| default : |
| retour = false; |
| } |
| if ( retour && comparer !== undefined ) { |
| var resultComparaison = ( comparer === valeur ); |
| retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ; |
| } |
| |
| return retour; |
| } else { |
| // Un booléen est une valeur valable |
| return true; |
| } |
| } |
| |
| // Lib hors objet |
| |
| /************************************* |
| * Fonctions de Style et Affichage * |
| * des éléments "spéciaux" * |
| *************************************/ |
| |
| // Logique d'affichage pour le input type=file |
| function inputFile() { |
| // Initialisation des variables |
| var $fileInput = $( '.input-file' ), |
| $button = $( '.label-file' ); |
| // Action lorsque la "barre d'espace" ou "Entrée" est pressée |
| $( '#charger-form' ).on( 'keydown', '.label-file', function( event ) { |
| if ( event.keyCode == 13 || event.keyCode == 32 ) { |
| $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click(); |
| } |
| }); |
| } |
| |
| // Style et affichage des list-checkboxes |
| function inputListCheckbox() { |
| // On écoute le click sur une list-checkbox ('.selectBox') |
| // à tout moment de son insertion dans le dom |
| // _ S'assurer de bien viser la bonne list-checkbox |
| // _ Au click sur un autre champ remballer la list-checkbox |
| $( document ).click( function( event ) { |
| var target = event.target; |
| |
| if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) { |
| $( '.checkboxes' ).each( function () { |
| $( this ).addClass( 'hidden' ); |
| }); |
| $( '.selectBox select.focus', '#zone-appli' ).each( function() { |
| $( this ).removeClass( 'focus' ); |
| }); |
| } |
| }); |
| $( '#zone-appli' ).on( 'click' , '.selectBox' , function() { |
| // afficher/cacher le volet des checkboxes et focus |
| $( this ).next().toggleClass( 'hidden' ); |
| $( this ).find( 'select' ).toggleClass( 'focus' ); |
| |
| // Cacher le volet des autres checkboxes et retirer leur focus |
| var $checkboxes = $( this ).next(), |
| count = $( '.checkboxes' ).length; |
| |
| for ( var i = 0; i < count; i++ ) { |
| if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) { |
| var $otherListCheckboxes = $( '.checkboxes' )[i]; |
| if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) { |
| $otherListCheckboxes.classList.add( 'hidden' ); |
| } |
| if( $otherListCheckboxes.previousElementSibling.firstElementChild.classList.contains( 'focus' ) ) { |
| $otherListCheckboxes.previousElementSibling.firstElementChild.classList.remove( 'focus' ); |
| } |
| } |
| } |
| }); |
| } |
| |
| // Style et affichage des input type="range" |
| function inputRangeDisplayNumber() { |
| $( 'input[type="range"]','#charger-form' ).each( function() { |
| $( this ).siblings( '.range-live-value' ).text( $( this ).val() ); |
| }); |
| $( '#top' ).on( 'input' , 'input[type="range"]' , function () { |
| $( this ).siblings( '.range-live-value' ).text( $( this ).val() ); |
| }); |
| $( '#top' ).on( 'click', '#ajouter-obs', function() { |
| $( '.range-live-value' ).each( function() { |
| var $this = $( this ); |
| $this.text( '' ); |
| }); |
| }); |
| } |
| |
| // Activation/Desactivation et contenu de la modale Bootstrap |
| // https://getbootstrap.com/docs/3.3/javascript/#modals |
| function newFieldsHelpModal() { |
| $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) { |
| var thisFieldKey = $( this ).data( 'key' ), |
| fileMimeType = $( this ).data( 'mime-type' ); |
| |
| // Titre |
| $( '#help-modal-label' ).text( 'Aide pour : ' + $( this ).data( 'name' ) ); |
| if( fileMimeType.match( 'image' ) ) { |
| var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ); |
| // var extention = 'jpg'; |
| $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' ); |
| } |
| // Sortie avec la touche escape |
| $( '#help-modal' ).modal( { keyboard : true } ); |
| // Affichage |
| $( '#help-modal' ).modal({ show: true }); |
| // Remplacer l'autofocus qui ne fonctionne plus en HTML5 |
| // Message dans la doc de bootstrap : |
| // Due to how HTML5 defines its semantics, |
| // the autofocus HTML attribute has no effect in Bootstrap modals. |
| // To achieve the same effect, use some custom JavaScript |
| $( '#help-modal' ).on( 'shown.bs.modal' , function () { |
| $( '#myInput' ).trigger( 'focus' ); |
| }) |
| // Réinitialisation |
| $( '#help-modal' ).on( 'hidden.bs.modal' , function () { |
| $( '#help-modal-label' ).text(); |
| $( '#print_content' ).empty(); |
| }) |
| }); |
| } |
| |
| // Activation/Desactivation et contenu de la modale Bootstrap |
| // https://getbootstrap.com/docs/3.3/javascript/#modals |
| function projetHelpModale() { |
| $( '#top' ).on ( 'click', '#info-button', function ( event ) { |
| var fileMimeType = $( this ).data( 'mime-info' ); |
| |
| // Titre |
| $( '#help-modal-label' ).text( 'Aide du projet : ' + $( '#titre-projet' ).text() ); |
| if( fileMimeType.match( 'image' ) ) { |
| var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ); |
| $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' ); |
| } |
| // Sortie avec la touche escape |
| $( '#help-modal' ).modal( { keyboard : true } ); |
| // Affichage |
| $( '#help-modal' ).modal({ show: true }); |
| // Remplacer l'autofocus qui ne fonctionne plus en HTML5 |
| // Message dans la doc de bootstrap : |
| // Due to how HTML5 defines its semantics, |
| // the autofocus HTML attribute has no effect in Bootstrap modals. |
| // To achieve the same effect, use some custom JavaScript |
| $( '#help-modal' ).on( 'shown.bs.modal' , function () { |
| $( '#myInput' ).trigger( 'focus' ); |
| }) |
| // Réinitialisation |
| $( '#help-modal' ).on( 'hidden.bs.modal' , function () { |
| $( '#help-modal-label' ).text(); |
| $( '#print_content' ).empty(); |
| }); |
| |
| }); |
| } |
| |
| // Faire apparaitre un champ text "Autre" |
| function onOtherOption() { |
| const PREFIX = 'collect-other-'; |
| |
| // Ajouter un champ texte pour "Autre" |
| function optionAdd( otherId, $target, element, dataName ) { |
| $target.after( |
| '<div class="control-group">'+ |
| '<label'+ |
| ' for="' + otherId + '"'+ |
| ' class="' + otherId + '"'+ |
| '>'+ |
| 'Autre option :'+ |
| '</label>'+ |
| '<input'+ |
| ' type="text"'+ |
| ' id="' + otherId + '"'+ |
| ' name="' + otherId + '"'+ |
| ' class="collect-other form-control"'+ |
| ' data-name="' + dataName + '"'+ |
| ' data-element="' + element + '"'+ |
| '>'+ |
| '</div>' |
| ); |
| $( '#' + otherId ).focus(); |
| } |
| |
| // Supprimer un champ texte pour "Autre" |
| function optionRemove( otherId ) { |
| $( '.' + otherId + ', #' + otherId ).remove(); |
| } |
| |
| $( '.other', '#form-arbre' ).each( function() { |
| if( $( this ).hasClass( 'is-select' ) ) { |
| var dataName = $( this ).data( 'name' ), |
| otherId = PREFIX + dataName; |
| |
| // Insertion du champ "Autre" après les boutons |
| optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName ); |
| } else if ( $( this ).is( ':checked' ) ) { |
| var dataName = $( this ).data( 'name' ), |
| otherId = PREFIX + dataName, |
| element = $( this ).data( 'element' ); |
| // Insertion du champ "Autre" après les boutons |
| optionAdd( otherId, $( this ).parent( 'label' ), element, dataName ); |
| } |
| }); |
| |
| $( '#charger-form' ).on( 'change', '.select', function () { |
| var dataName = $( this ).data( 'name' ), |
| otherId = PREFIX + dataName; |
| |
| if( 'other' === $( this ).val() ) { |
| // Insertion du champ "Autre" après les boutons |
| optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName ); |
| } else { |
| // Suppression du champ autre |
| optionRemove( otherId ); |
| $( this ).find( '.other' ).val( 'other' ); |
| } |
| }); |
| |
| $( '#charger-form' ).on( 'change', 'input[type=radio]', function () { |
| var dataName = $( this ).data( 'name' ), |
| otherId = PREFIX + dataName; |
| |
| if( 'other' === $( this ).val() ) { |
| // Insertion du champ "Autre" après les boutons |
| optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName ); |
| } else { |
| // Suppression du champ autre |
| optionRemove( otherId ); |
| $( this ).closest( '.radio' ).find( '.other' ).val( 'other' ); |
| } |
| }); |
| |
| $( '#charger-form' ).on( 'click', '.list-checkbox .other,.checkbox .other', function () { |
| var dataName = $( this ).data( 'name' ), |
| otherId = PREFIX + dataName, |
| element = $( this ).data( 'element' ); |
| |
| if( $( this ).is( ':checked' ) ) { |
| // Insertion du champ "Autre" après les boutons |
| optionAdd( otherId, $( this ).parent( 'label' ), element, dataName ); |
| } else { |
| // Suppression du champ autre |
| optionRemove( otherId ); |
| $( this ).val( 'other' ); |
| } |
| }); |
| } |
| |
| function collectOtherOption() { |
| $( '#charger-form' ).on( 'change', '.collect-other', function () { |
| var otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' ); |
| var element = $( this ).data( 'element' ); |
| |
| if ( '' === $( this ).val() ){ |
| if ( 'select' === element ) { |
| $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false ).val( 'other' ); |
| } else { |
| $( '#other-' + otherIdSuffix ).prop( 'checked', false ).val( 'other' ); |
| } |
| $( 'label.collect-other-' + otherIdSuffix ).remove(); |
| $( this ).remove(); |
| } else { |
| if ( 'select' === element ) { |
| $( '#' + otherIdSuffix ).find( '.other' ).val( $( this ).val() ); |
| $( '#' + otherIdSuffix ).val( $( this ).val() ); |
| $( '#' + otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false ); |
| $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', true ); |
| } else { |
| if ( 'radio' === element ) { |
| $( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false ); |
| } |
| $( '#other-' + otherIdSuffix ).val( $( this ).val() ); |
| $( '#other-' + otherIdSuffix ).prop( 'checked', true ); |
| } |
| } |
| }); |
| } |
| |
| /*************************** |
| * Lancement des scripts * |
| ***************************/ |
| const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers'); |
| |
| jQuery( document ).ready( function() { |
| // Modale "aide" du projet |
| projetHelpModale(); |
| // Affichage input file |
| inputFile(); |
| // Affichage des List-checkbox |
| inputListCheckbox(); |
| // Affichage des Range |
| inputRangeDisplayNumber() |
| // Modale "aide" |
| newFieldsHelpModal(); |
| // Ajout/suppression d'un champ texte "Autre" |
| onOtherOption(); |
| // Récupérer les données entrées dans "Autre" |
| collectOtherOption(); |
| }); |