{"id":346,"date":"2025-04-26T20:09:51","date_gmt":"2025-04-26T18:09:51","guid":{"rendered":"https:\/\/videgrenier.sidslevesinet.fr\/?page_id=346"},"modified":"2025-05-17T21:45:50","modified_gmt":"2025-05-17T19:45:50","slug":"visualisation-emplacement","status":"publish","type":"page","link":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/visualisation-emplacement\/","title":{"rendered":"visualisation des emplacements"},"content":{"rendered":"\n<p>Bonjour<br>pour trouver vos num\u00e9ros d&#8217;emplacement, entrez vos num\u00e9ros de billet.<br>Si vous n&rsquo;y arrivez pas, pas de panique. Nous serons pr\u00e9sents le matin pour vous indiquer o\u00f9 se trouve votre emplacement.<br>Bon vide-grenier \u00e0 tous.<\/p>\n\n\n\n<p><code>        <div class=\"container\" style=\"max-width: 1200px; margin: 0 auto; font-family: Arial, sans-serif;\">\n            <div class=\"form-container\" style=\"background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;\">\n                <h2>Consulter votre r\u00e9servation vide-grenier<\/h2>\n                <p>Entrez votre num\u00e9ro de billet pour visualiser vos emplacements sur le plan.<\/p>\n                \n                <div>\n                    <input type=\"text\" id=\"numero-commande\" placeholder=\"Num\u00e9ro de billet\" \n                           style=\"padding: 10px; width: 300px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px;\">\n                    <button onclick=\"rechercherEmplacements()\" \n                            style=\"background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;\">\n                        Rechercher\n                    <\/button>\n                <\/div>\n                \n                <div class=\"loader\" id=\"loader\" \n                     style=\"border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; display: none;\"><\/div>\n                \n                <div id=\"message-container\" \n                     style=\"margin-top: 20px; padding: 15px; border-radius: 5px; display: none;\"><\/div>\n\n                <div style=\"margin-top: 20px;\">\n                    <button onclick=\"afficherEmplacementsPris()\" style=\"background-color: #2196F3; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\">\n                        Afficher tous les emplacements d\u00e9j\u00e0 pris\n                    <\/button>\n                    <button onclick=\"reinitialiserPlan()\" style=\"background-color: #f44336; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; margin-left: 10px;\">\n                        R\u00e9initialiser le plan\n                    <\/button>\n                <\/div>\n\n                <div id=\"debug-info\" style=\"margin-top: 20px; padding: 10px; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 4px; display: none;\">\n                    <h3 style=\"margin-top: 0;\">Informations de d\u00e9bogage<\/h3>\n                    <div id=\"debug-content\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"plan-container\" \n                 style=\"position: relative; width: 100%; height: 800px; border: 1px solid #ddd; margin-top: 20px; overflow: auto; text-align: left;\">\n                <object id=\"plan-svg\" type=\"image\/svg+xml\" data=\"https:\/\/videgrenier.sidslevesinet.fr\/wp-content\/uploads\/2025\/04\/Plan_VG_2025_Num-v2.svg\" \n                        style=\"width: auto; height: 100%; max-width: none;\"><\/object>\n            <\/div>\n        <\/div>\n\n        <style>\n            @keyframes spin {\n                0% { transform: rotate(0deg); }\n                100% { transform: rotate(360deg); }\n            }\n            .success {\n                background-color: #dff0d8;\n                color: #3c763d;\n                border: 1px solid #d6e9c6;\n            }\n            .error {\n                background-color: #f2dede;\n                color: #a94442;\n                border: 1px solid #ebccd1;\n            }\n        <\/style>\n\n        <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n        <script>\n            \/\/ Variables globales\n            let svgDoc = null;\n            let emplacementsCharges = false;\n            let emplacementsPris = [];\n            \n            \/\/ Fonction pour afficher des informations de d\u00e9bogage\n            function debugInfo(message) {\n                \/\/ D\u00e9commenter pour activer l'affichage de d\u00e9bogage\n                \/\/document.getElementById('debug-info').style.display = 'block';\n                \/\/document.getElementById('debug-content').innerHTML += '<div>' + message + '<\/div>';\n                console.log('[DEBUG] ' + message);\n            }\n            \n            \/\/ Fonction pour initialiser le SVG\n            function initSVG() {\n                const planSvg = document.getElementById('plan-svg');\n                \n                \/\/ Attendre que le SVG soit charg\u00e9\n                planSvg.addEventListener('load', function() {\n                    svgDoc = planSvg.contentDocument;\n                    emplacementsCharges = true;\n                    debugInfo('SVG charg\u00e9 avec succ\u00e8s');\n                });\n            }\n            \n            \/\/ Initialiser le SVG au chargement de la page\n            window.addEventListener('DOMContentLoaded', initSVG);\n            \n            \/\/ Fonction pour rechercher les emplacements\n            function rechercherEmplacements() {\n                const numeroCommande = document.getElementById('numero-commande').value.trim();\n                const messageContainer = document.getElementById('message-container');\n                const loader = document.getElementById('loader');\n                \n                \/\/ Validation de base\n                if (!numeroCommande) {\n                    afficherMessage('Veuillez entrer un num\u00e9ro de billet.', 'error');\n                    return;\n                }\n                \n                \/\/ R\u00e9initialiser l'affichage\n                messageContainer.style.display = 'none';\n                loader.style.display = 'block';\n                \n                \/\/ V\u00e9rifier si le debug-content existe avant de le r\u00e9initialiser\n                const debugContent = document.getElementById('debug-content');\n                if (debugContent) {\n                    debugContent.innerHTML = '';\n                }\n                \n                \/\/ R\u00e9initialiser tous les emplacements si le SVG est charg\u00e9\n                if (emplacementsCharges) {\n                    reinitialiserPlan();\n                }\n                \n                debugInfo('Recherche pour num\u00e9ro de billet: ' + numeroCommande);\n                \n                \/\/ Appel AJAX pour r\u00e9cup\u00e9rer les donn\u00e9es de r\u00e9servation\n                jQuery.ajax({\n                    url: 'https:\/\/videgrenier.sidslevesinet.fr\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'get_reservation',\n                        numero_commande: numeroCommande,\n                        security: '3073014473'\n                    },\n                    success: function(response) {\n                        loader.style.display = 'none';\n                        \n                        if (response.success) {\n                            if (response.data.emplacements && response.data.emplacements.length > 0) {\n                                \/\/ Afficher le message de succ\u00e8s\n                                const nomClient = response.data.nom || ' ';\n                                const emplacementsText = response.data.emplacements.join(', ');\n                                const message = `Bonjour ${nomClient}, voici la liste de vos emplacements : ${emplacementsText}`;\n                                afficherMessage(message, 'success');\n                                \n                                debugInfo('Emplacements trouv\u00e9s: ' + emplacementsText);\n                                \n                                \/\/ Afficher les emplacements sur le plan si SVG charg\u00e9\n                                if (emplacementsCharges) {\n                                    colorerEmplacements(response.data.emplacements);\n                                    \n                                    \/\/ R\u00e9cup\u00e9rer et afficher les emplacements d\u00e9j\u00e0 pris\n                                    chargerEmplacementsPris();\n                                } else {\n                                    debugInfo(\"SVG non charg\u00e9, impossible d'afficher les emplacements sur le plan\");\n                                }\n                            } else {\n                                afficherMessage('Aucun emplacement trouv\u00e9 pour ce num\u00e9ro de billet.', 'error');\n                            }\n                        } else {\n                            afficherMessage(response.data.message || 'Erreur lors de la recherche. Veuillez r\u00e9essayer.', 'error');\n                        }\n                    },\n                    error: function(error) {\n                        console.error('Erreur:', error);\n                        loader.style.display = 'none';\n                        afficherMessage('Une erreur est survenue lors de la communication avec le serveur. Veuillez r\u00e9essayer plus tard.', 'error');\n                    }\n                });\n            }\n            \n            \/\/ Fonction pour colorer les emplacements sur le plan\n            function colorerEmplacements(emplacements) {\n                if (!svgDoc) {\n                    debugInfo(\"Le document SVG n'est pas disponible\");\n                    return;\n                }\n                \n                debugInfo('D\u00e9but de coloration pour ' + emplacements.length + ' emplacements');\n                \n                \/\/ Parcourir chaque emplacement\n                for (let i = 0; i < emplacements.length; i++) {\n                    const emplacement = emplacements[i];\n                    debugInfo('Traitement de l\\'emplacement: ' + emplacement);\n                    \n                    \/\/ R\u00e9cup\u00e9rer l'\u00e9l\u00e9ment correspondant dans le SVG\n                    const element = svgDoc.getElementById(emplacement);\n                    \n                    if (element) {\n                        debugInfo('\u00c9l\u00e9ment trouv\u00e9 pour: ' + emplacement);\n                        \n                        \/\/ M\u00e9thode 1: Utiliser les attributs directs (plus fiable)\n                        element.setAttribute('fill', '#ffff00'); \/\/ Jaune fluo\n                        element.setAttribute('stroke', '#ff6600');\n                        element.setAttribute('stroke-width', '2');\n                        \n                        \/\/ M\u00e9thode 2: Utiliser les classes CSS (en compl\u00e9ment)\n                        element.classList.remove('reserved');\n                        element.classList.add('highlighted');\n                        \n                        \/\/ M\u00e9thode 3: Utiliser le style direct (en dernier recours)\n                        element.style.fill = '#ffff00';\n                        element.style.stroke = '#ff6600';\n                        element.style.strokeWidth = '2px';\n                        \n                        \/\/ Afficher des informations pour le d\u00e9bogage\n                        debugInfo(`Style appliqu\u00e9 \u00e0 ${emplacement}`);\n                        \n                        \/\/ Si c'est le premier emplacement, faire d\u00e9filer jusqu'\u00e0 lui\n                        if (i === 0) {\n                            element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n                        }\n                    } else {\n                        debugInfo('\u26a0\ufe0f \u00c9l\u00e9ment non trouv\u00e9: ' + emplacement);\n                    }\n                }\n            }\n            \n            \/\/ Fonction pour charger et afficher les emplacements d\u00e9j\u00e0 pris\n            function chargerEmplacementsPris() {\n                jQuery.ajax({\n                    url: 'https:\/\/videgrenier.sidslevesinet.fr\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: {\n                        action: 'get_emplacements_pris',\n                        security: '3073014473'\n                    },\n                    success: function(response) {\n                        if (response.success && response.data.emplacements_pris) {\n                            emplacementsPris = response.data.emplacements_pris;\n                            debugInfo('Emplacements pris charg\u00e9s: ' + emplacementsPris.length);\n                            appliquerStyleEmplacementsPris(emplacementsPris);\n                        } else {\n                            debugInfo('Erreur lors du chargement des emplacements pris');\n                        }\n                    },\n                    error: function(error) {\n                        console.error('Erreur AJAX:', error);\n                    }\n                });\n            }\n            \n            \/\/ Fonction pour afficher tous les emplacements d\u00e9j\u00e0 pris (bouton)\n            function afficherEmplacementsPris() {\n                \/\/ R\u00e9initialiser d'abord le plan\n                reinitialiserPlan();\n                \n                \/\/ Charger les emplacements pris\n                chargerEmplacementsPris();\n            }\n            \n            \/\/ Fonction pour appliquer le style aux emplacements d\u00e9j\u00e0 pris\n            function appliquerStyleEmplacementsPris(emplacements) {\n                if (!svgDoc) return;\n                \n                debugInfo('Application du style pour ' + emplacements.length + ' emplacements pris');\n                \n                emplacements.forEach(emplacement => {\n                    const element = svgDoc.getElementById(emplacement);\n                    \n                    if (element) {\n                        \/\/ N'appliquer le style que si l'\u00e9l\u00e9ment n'est pas d\u00e9j\u00e0 surlign\u00e9\n                        if (!element.classList.contains('highlighted')) {\n                            \/\/ M\u00e9thode 1: Attributs directs\n                            element.setAttribute('fill', '#cccccc');\n                            element.setAttribute('stroke', '#999999');\n                            element.setAttribute('stroke-width', '1');\n                            element.setAttribute('opacity', '0.7');\n                            \n                            \/\/ M\u00e9thode 2: Classes CSS\n                            element.classList.add('reserved');\n                            \n                            \/\/ M\u00e9thode 3: Style direct\n                            element.style.fill = '#cccccc';\n                            element.style.stroke = '#999999';\n                            element.style.strokeWidth = '1px';\n                            element.style.opacity = '0.7';\n                        }\n                    }\n                });\n            }\n            \n            \/\/ Fonction pour r\u00e9initialiser tous les emplacements\n            function reinitialiserPlan() {\n                if (!svgDoc) return;\n                \n                debugInfo('R\u00e9initialisation du plan');\n                \n                \/\/ R\u00e9cup\u00e9rer tous les \u00e9l\u00e9ments avec un ID commen\u00e7ant par \"Emp-\"\n                const elements = svgDoc.querySelectorAll('[id^=\"Emp-\"]');\n                \n                for (let i = 0; i < elements.length; i++) {\n                    const element = elements[i];\n                    \n                    \/\/ Supprimer les classes\n                    element.classList.remove('highlighted');\n                    element.classList.remove('reserved');\n                    \n                    \/\/ R\u00e9initialiser les attributs\n                    element.removeAttribute('fill');\n                    element.removeAttribute('stroke');\n                    element.removeAttribute('stroke-width');\n                    element.removeAttribute('opacity');\n                    \n                    \/\/ R\u00e9initialiser les styles directs\n                    element.style.fill = '';\n                    element.style.stroke = '';\n                    element.style.strokeWidth = '';\n                    element.style.opacity = '';\n                }\n                \n                debugInfo('Plan r\u00e9initialis\u00e9');\n            }\n            \n            \/\/ Fonction pour afficher un message\n            function afficherMessage(message, type) {\n                const messageContainer = document.getElementById('message-container');\n                messageContainer.textContent = message;\n                \n                if (type === 'success') {\n                    messageContainer.className = 'success';\n                } else {\n                    messageContainer.className = 'error';\n                }\n                \n                messageContainer.style.display = 'block';\n            }\n            \n            \/\/ Permettre la recherche avec la touche Entr\u00e9e\n            document.getElementById('numero-commande').addEventListener('keypress', function(e) {\n                if (e.key === 'Enter') {\n                    rechercherEmplacements();\n                }\n            });\n        <\/script>\n        <\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bonjourpour trouver vos num\u00e9ros d&#8217;emplacement, entrez vos num\u00e9ros de billet.Si vous n&rsquo;y arrivez pas, pas de panique. Nous serons pr\u00e9sents le matin pour vous indiquer o\u00f9 se trouve votre emplacement.Bon vide-grenier \u00e0 tous.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-346","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/pages\/346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/comments?post=346"}],"version-history":[{"count":22,"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/pages\/346\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/pages\/346\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/videgrenier.sidslevesinet.fr\/index.php\/wp-json\/wp\/v2\/media?parent=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}