<commit_before>{% extends "layout.html.twig" %}

{% block body %}

    <h2>{% trans %}Rechercher{% endtrans %}</h2>

    <div class="row">
        <div class="col-lg-6 col-xs-12">

            <input type="text" id="recherche" class="form-control" style="padding-left: 25px;"
                   placeholder="Entrez le nom de l'oiseau que vous recherchez" width="50">
            <i id="search" class="fa fa-search"></i>

            <div id="map"></div>

        </div>

        <div class="col-lg-6 col-xs-12">

            <h5 class="srchTitleFilter"  id="nbrObservations">
                {% trans %}Veuillez rechercher un oiseau pour afficher des données{% endtrans %}</h5>

            <div class="slide " >
                <label for="slider" style="color: white;">{% trans %}Depuis : {% endtrans %}</label>
                <input id="slider" type="range" min="0" max="6" value="6">
                <span id="periode" style="display: block; color: white;">{% trans %}(Origine){% endtrans %}</span>
            </div>

            <div style="background-color: #9DC8C8; margin-top:40px; min-height: ;">
                <table class="display nowrap" id="data-table" cellspacing="0" width="100%" style="width: 100%;">
                    <thead style="background-color: #519D9E;">
                    <tr>
                        <th style="width: 30%; text-align: center; height:40px; border-right: solid 2px white;">
                            {% trans %}Utilisateur{% endtrans %}
                        </th>
                        <th style="width: 70%; text-align: center; height:40px">{% trans %}Observation{% endtrans %}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td id="utilTable" style="border-right: solid 2px white;padding: 10px;">
                            <!-- sera rempli après le clique sur un marqueur de la carte -->
                        </td>
                        <td id="obsTable" style="padding: 10px; border-right: inherit">
                            <!-- sera rempli après le clique sur un marqueur de la carte -->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>


        </div>

    </div> <!-- row -->

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>

    <script>
        var noObservationString = {% trans %}'Veuillez rechercher un oiseau pour afficher des données'{% endtrans %};
        var observationBeginningString = {% trans %}'Il y a '{% endtrans %};
        var observationEndingPluralString = {% trans %}' observations pour cette recherche'{% endtrans %};
        var observationEndingSingularString = {% trans %}' observation pour cette recherche'{% endtrans %};

        {# // Permet autocomplete #}
        var sourceList = [];
        {% for oiseauName in listOiseauNames %}
        sourceList.push("{{ oiseauName }}");
        {% endfor %}

        $(function () {
            $('#recherche').autocomplete({
                source: sourceList
            });

            $('#recherche').on('autocompletechange', function () {
                // On lance une requête ajax pour mettre à jour la liste des observations
                requestObservationsAjax();
            });

            $('#slider').on('change', function () {
                switch (this.value) {
                    case '0':
                        periode = "(1 jour)";
                        break;
                    case '1':
                        periode = "(1 semaine)";
                        break;
                    case '2':
                        periode = "(1 mois)";
                        break;
                    case '3':
                        periode = "(3 mois)";
                        break;
                    case '4':
                        periode = "(6 mois)";
                        break;
                    case '5':
                        periode = "(1 an)";
                        break;
                    case '6':
                        periode = "(Origine)";
                }
                $('#periode').text(periode);
                requestObservationsAjax();
            });
        });

        var periode = "(Origine)";
        // récupéré depuis le controller
        var listObservations = {{ observations|raw }};

        function requestObservationsAjax() {
            $.ajax({
                url: "{{ path('map') }}",
                type: 'POST',
                data: {
                    oiseauName: $('#recherche').val(),
                    periode: periode
                },
                success: function (response) {

                    // console.log(response.length);
                    withDrawMarkers();
                    setMarkers(map, response);
                    listObservations = response;
                    updateLabel(response.length);
                },
                error: function (resultat, satut, erreur) {
                    console.log(resultat + erreur);
                }
            });
        }

        function updateLabel(nbr) {
            if (nbr > 1) {
                $('#nbrObservations').html(observationBeginningString + nbr + observationEndingPluralString);
            } else if (nbr == 1) {
                $('#nbrObservations').html(observationBeginningString + nbr + observationEndingSingularString);
            }
        }

        // fonction appelé après le clique sur un markeur
        function populateTable(marker)
        {
            var observation = listObservations[marker.id];
            $('#utilTable').html(observation.author);
            $('#obsTable').html('<a href="/nao-site/web/app_dev.php/observation/' + observation.id + '">' + listObservations[marker.id].content + '</a>');
        }
    </script>

    <script src="{{ asset('js/maps.js') }}"></script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZjdDWppQRZkoIfeqHtm644-ncPYj9eXw&v=3&callback=initMap">
    </script>
  
{% endblock %}<commit_msg>changement lien vers observation page rechercher<commit_after>{% extends "layout.html.twig" %}

{% block body %}

    <h2>{% trans %}Rechercher{% endtrans %}</h2>

    <div class="row">
        <div class="col-lg-6 col-xs-12">

            <input type="text" id="recherche" class="form-control" style="padding-left: 25px;"
                   placeholder="Entrez le nom de l'oiseau que vous recherchez" width="50">
            <i id="search" class="fa fa-search"></i>

            <div id="map"></div>

        </div>

        <div class="col-lg-6 col-xs-12">

            <h5 class="srchTitleFilter"  id="nbrObservations">
                {% trans %}Veuillez rechercher un oiseau pour afficher des données{% endtrans %}</h5>

            <div class="slide " >
                <label for="slider" style="color: white;">{% trans %}Depuis : {% endtrans %}</label>
                <input id="slider" type="range" min="0" max="6" value="6">
                <span id="periode" style="display: block; color: white;">{% trans %}(Origine){% endtrans %}</span>
            </div>

            <div style="background-color: #9DC8C8; margin-top:40px; min-height: ;">
                <table class="display nowrap" id="data-table" cellspacing="0" width="100%" style="width: 100%;">
                    <thead style="background-color: #519D9E;">
                    <tr>
                        <th style="width: 30%; text-align: center; height:40px; border-right: solid 2px white;">
                            {% trans %}Utilisateur{% endtrans %}
                        </th>
                        <th style="width: 70%; text-align: center; height:40px">{% trans %}Observation{% endtrans %}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td id="utilTable" style="border-right: solid 2px white;padding: 10px;">
                            <!-- sera rempli après le clique sur un marqueur de la carte -->
                        </td>
                        <td id="obsTable" style="padding: 10px; border-right: inherit">
                            <!-- sera rempli après le clique sur un marqueur de la carte -->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>


        </div>

    </div> <!-- row -->

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>

    <script>
        var noObservationString = {% trans %}'Veuillez rechercher un oiseau pour afficher des données'{% endtrans %};
        var observationBeginningString = {% trans %}'Il y a '{% endtrans %};
        var observationEndingPluralString = {% trans %}' observations pour cette recherche'{% endtrans %};
        var observationEndingSingularString = {% trans %}' observation pour cette recherche'{% endtrans %};

        {# // Permet autocomplete #}
        var sourceList = [];
        {% for oiseauName in listOiseauNames %}
        sourceList.push("{{ oiseauName }}");
        {% endfor %}

        $(function () {
            $('#recherche').autocomplete({
                source: sourceList
            });

            $('#recherche').on('autocompletechange', function () {
                // On lance une requête ajax pour mettre à jour la liste des observations
                requestObservationsAjax();
            });

            $('#slider').on('change', function () {
                switch (this.value) {
                    case '0':
                        periode = "(1 jour)";
                        break;
                    case '1':
                        periode = "(1 semaine)";
                        break;
                    case '2':
                        periode = "(1 mois)";
                        break;
                    case '3':
                        periode = "(3 mois)";
                        break;
                    case '4':
                        periode = "(6 mois)";
                        break;
                    case '5':
                        periode = "(1 an)";
                        break;
                    case '6':
                        periode = "(Origine)";
                }
                $('#periode').text(periode);
                requestObservationsAjax();
            });
        });

        var periode = "(Origine)";
        // récupéré depuis le controller
        var listObservations = {{ observations|raw }};

        function requestObservationsAjax() {
            $.ajax({
                url: "{{ path('map') }}",
                type: 'POST',
                data: {
                    oiseauName: $('#recherche').val(),
                    periode: periode
                },
                success: function (response) {

                    // console.log(response.length);
                    withDrawMarkers();
                    setMarkers(map, response);
                    listObservations = response;
                    updateLabel(response.length);
                },
                error: function (resultat, satut, erreur) {
                    console.log(resultat + erreur);
                }
            });
        }

        function updateLabel(nbr) {
            if (nbr > 1) {
                $('#nbrObservations').html(observationBeginningString + nbr + observationEndingPluralString);
            } else if (nbr == 1) {
                $('#nbrObservations').html(observationBeginningString + nbr + observationEndingSingularString);
            }
        }

        // fonction appelé après le clique sur un markeur
        function populateTable(marker)
        {
            var observation = listObservations[marker.id];
            $('#utilTable').html(observation.author);
            $('#obsTable').html(
                listObservations[marker.id].content.substring(0, 50) +
                '<a href="/nao-site/web/app_dev.php/observation/' + observation.id + '">' + '<button id="btn-locate" style="float: right;">Voir</button>' + '</a>'
            );
        }
    </script>

    <script src="{{ asset('js/maps.js') }}"></script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZjdDWppQRZkoIfeqHtm644-ncPYj9eXw&v=3&callback=initMap">
    </script>
  
{% endblock %}
{'fraction_non_alphanumeric': 0.14085488617004802, 'fraction_numerical': 0.011228124516029116, 'mean_word_length': 1.4651651078450085, 'pattern_counts': {'":': 0, '<': 119, '<?xml version=': 0, '>': 121, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6631969', 'n_tokens_mistral': 3710, 'n_tokens_neox': 3383, 'n_words': 763}