{"id":310,"date":"2025-02-03T19:42:45","date_gmt":"2025-02-03T18:42:45","guid":{"rendered":"https:\/\/www.thomasgauzelin.fr\/?page_id=310"},"modified":"2025-03-05T19:35:46","modified_gmt":"2025-03-05T18:35:46","slug":"page-daffichage-des-donnees","status":"publish","type":"page","link":"https:\/\/www.thomasgauzelin.fr\/index.php\/page-daffichage-des-donnees\/","title":{"rendered":"Page d&#8217;affichage des donn\u00e9es"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; custom_css_free_form=&#8221;||&#8221; disabled=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<input type=\"date\" id=\"datePicker\"><!-- [et_pb_line_break_holder] --><input type=\"text\" id=\"flatpickr\" \/><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->document.addEventListener('DOMContentLoaded', function() {<!-- [et_pb_line_break_holder] -->    flatpickr(\"#flatpickr\", {});<!-- [et_pb_line_break_holder] -->});<\/script>[\/et_pb_code][et_pb_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.carousel {||    display: flex;||    align-items: center;||justify-content: space-between;||    overflow: hidden;||}||||.carousel-container {||    display: flex;||    overflow-x: auto;||    scroll-behavior: smooth;||}||||.carousel-container button {||    flex: 0 0 auto;||    margin-right: 5px;||}||||#prevBtn, #nextBtn {||    background: none;||    border: none;||    font-size: 20px;||    cursor: pointer;||    padding: 10px;||}&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<div class=\"carousel\"><!-- [et_pb_line_break_holder] -->    <button id=\"prevBtn\">\u2190<\/button><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"carousel-container\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div id=\"dateButtons\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <button id=\"nextBtn\">\u2192<\/button><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div id=\"scrap-events-resultats\"><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->jQuery(document).ready(function($) {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function createCarousel() {<!-- [et_pb_line_break_holder] -->        const dateButtonsContainer = $('#dateButtons');<!-- [et_pb_line_break_holder] -->        const prevBtn = $('#prevBtn');  \/\/ D\u00e9clarez prevBtn localement<!-- [et_pb_line_break_holder] -->        const nextBtn = $('#nextBtn');  \/\/ D\u00e9clarez nextBtn localement<!-- [et_pb_line_break_holder] -->        const visibleCount = 5;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const today = new Date();<!-- [et_pb_line_break_holder] -->        const endDate = new Date(today);<!-- [et_pb_line_break_holder] -->        endDate.setMonth(endDate.getMonth() + 3);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        let dates = [];<!-- [et_pb_line_break_holder] -->        for (let currentDate = new Date(today); currentDate <= endDate; currentDate.setDate(currentDate.getDate() + 1)) {<!-- [et_pb_line_break_holder] -->            dates.push(new Date(currentDate));<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        let startIndex = 0; \/\/ D\u00e9clarez startIndex localement<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        function displayDates() {<!-- [et_pb_line_break_holder] -->            dateButtonsContainer.empty();<!-- [et_pb_line_break_holder] -->            for (let i = startIndex; i < startIndex + visibleCount &#038;&#038; i < dates.length; i++) {<!-- [et_pb_line_break_holder] -->                const date = dates[i];<!-- [et_pb_line_break_holder] -->                const button = $('<button>').text(date.toLocaleDateString());<!-- [et_pb_line_break_holder] -->                button.on('click', () => filterDateRanges(date));<!-- [et_pb_line_break_holder] -->                dateButtonsContainer.append(button);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            prevBtn.prop('disabled', startIndex === 0);<!-- [et_pb_line_break_holder] -->            nextBtn.prop('disabled', startIndex + visibleCount >= dates.length);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        prevBtn.on('click', () => {<!-- [et_pb_line_break_holder] -->            startIndex = Math.max(0, startIndex - 1);<!-- [et_pb_line_break_holder] -->            displayDates();<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        nextBtn.on('click', () => {<!-- [et_pb_line_break_holder] -->            startIndex = Math.min(dates.length - visibleCount, startIndex + 1);<!-- [et_pb_line_break_holder] -->            displayDates();<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        displayDates(); \/\/ Appel initial *apr\u00e8s* la d\u00e9finition de la fonction<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->    function filterDateRanges(selectedDate) {<!-- [et_pb_line_break_holder] -->        $('.dateRanges').each(function() {<!-- [et_pb_line_break_holder] -->            const range = $(this);<!-- [et_pb_line_break_holder] -->            const item = range.closest('.scrap-event-item');<!-- [et_pb_line_break_holder] -->            const startDateText = range.find('.date_event_debut').text();<!-- [et_pb_line_break_holder] -->            const endDateText = range.find('.date_event_fin').text();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            if (!startDateText || !endDateText) {<!-- [et_pb_line_break_holder] -->                item.hide();<!-- [et_pb_line_break_holder] -->                return; \/\/ Passe \u00e0 l'\u00e9l\u00e9ment suivant si les dates ne sont pas d\u00e9finies<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            let startDate = new Date(startDateText);<!-- [et_pb_line_break_holder] -->            let endDate = new Date(endDateText);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Cr\u00e9ez des dates UTC pour \u00e9viter les probl\u00e8mes de fuseaux horaires<!-- [et_pb_line_break_holder] -->            startDate = new Date(Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()));<!-- [et_pb_line_break_holder] -->            endDate = new Date(Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Calculez le lendemain de la date de fin (nextDayAfterEnd)<!-- [et_pb_line_break_holder] -->            const nextDayAfterEnd = new Date(endDate);<!-- [et_pb_line_break_holder] -->            nextDayAfterEnd.setUTCDate(endDate.getUTCDate() + 1);<!-- [et_pb_line_break_holder] -->            \/\/Cr\u00e9ez la date selectionn\u00e9 au format UTC<!-- [et_pb_line_break_holder] -->            const selectedDateUTC = new Date(Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Masquez l'\u00e9l\u00e9ment si la date s\u00e9lectionn\u00e9e est le lendemain ou apr\u00e8s<!-- [et_pb_line_break_holder] -->            if (selectedDateUTC >= nextDayAfterEnd) {<!-- [et_pb_line_break_holder] -->                item.hide();<!-- [et_pb_line_break_holder] -->            } else if(selectedDateUTC >= startDate){<!-- [et_pb_line_break_holder] -->                item.show();<!-- [et_pb_line_break_holder] -->            } else {<!-- [et_pb_line_break_holder] -->                item.hide();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    $.ajax({<!-- [et_pb_line_break_holder] -->        url: ajaxurl,<!-- [et_pb_line_break_holder] -->        type: 'POST',<!-- [et_pb_line_break_holder] -->        data: {<!-- [et_pb_line_break_holder] -->            action: 'scrap_events_get_resultats'<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        success: function(response) {<!-- [et_pb_line_break_holder] -->            $('#scrap-events-resultats').html(response);<!-- [et_pb_line_break_holder] -->            createCarousel(); \/\/ Appelez createCarousel *apr\u00e8s* avoir inject\u00e9 le HTML<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-310","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/pages\/310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/comments?post=310"}],"version-history":[{"count":58,"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/pages\/310\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/pages\/310\/revisions\/403"}],"wp:attachment":[{"href":"https:\/\/www.thomasgauzelin.fr\/index.php\/wp-json\/wp\/v2\/media?parent=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}