Planning Comptage Caisses 2025<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.css\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\/src\/toastify.min.css\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/apis.google.com\/js\/api.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #1a56db;\r\n --success: #059669;\r\n --error: #dc2626;\r\n --warning: #d97706;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n background-color: #f9fafb;\r\n }\r\n\r\n .material-icons {\r\n vertical-align: middle;\r\n margin-right: 8px;\r\n }\r\n\r\n .fab-button {\r\n position: fixed;\r\n bottom: 2rem;\r\n right: 2rem;\r\n background-color: var(--primary);\r\n color: white;\r\n border-radius: 50%;\r\n width: 56px;\r\n height: 56px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n cursor: pointer;\r\n transition: transform 0.2s, background-color 0.2s;\r\n z-index: 1000;\r\n }\r\n\r\n .fab-button:hover {\r\n transform: scale(1.1);\r\n background-color: #1e40af;\r\n }\r\n\r\n .tab-button {\r\n padding: 1rem 1.5rem;\r\n border-bottom: 2px solid transparent;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n color: #6b7280;\r\n }\r\n\r\n .tab-button.active {\r\n color: var(--primary);\r\n border-bottom-color: var(--primary);\r\n }\r\n\r\n .card {\r\n background-color: white;\r\n border-radius: 8px;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n padding: 1.5rem;\r\n margin-bottom: 1rem;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 1.5rem;\r\n padding: 1.5rem;\r\n }\r\n\r\n .contact-info {\r\n margin-top: 0.75rem;\r\n display: flex;\r\n align-items: center;\r\n color: #4b5563;\r\n }\r\n\r\n .copy-button {\r\n padding: 0.25rem 0.75rem;\r\n background-color: #f3f4f6;\r\n border-radius: 4px;\r\n font-size: 0.875rem;\r\n color: #374151;\r\n margin-left: auto;\r\n transition: background-color 0.2s;\r\n }\r\n\r\n .copy-button:hover {\r\n background-color: #e5e7eb;\r\n }\r\n\r\n .save-button {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.75rem 1.5rem;\r\n background-color: var(--primary);\r\n color: white;\r\n border-radius: 8px;\r\n font-weight: 500;\r\n transition: background-color 0.2s;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .save-button:hover {\r\n background-color: #1e40af;\r\n }\r\n\r\n .contact-name {\r\n font-size: 1.25rem;\r\n font-weight: 500;\r\n color: #111827;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .tab-content {\r\n padding: 1.5rem;\r\n background-color: white;\r\n border-radius: 0 0 8px 8px;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n }\r\n\r\n .planning-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n\r\n .planning-table th {\r\n background-color: #f3f4f6;\r\n padding: 1rem;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n\r\n .planning-table td {\r\n padding: 1rem;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n .status-select {\r\n width: 100%;\r\n padding: 0.5rem;\r\n border: 1px solid #e5e7eb;\r\n border-radius: 4px;\r\n background-color: white;\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .status-select:focus {\r\n border-color: var(--primary);\r\n outline: none;\r\n ring: 2px solid var(--primary);\r\n }\r\n\r\n .sync-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.25rem 0.75rem;\r\n background-color: var(--success);\r\n color: white;\r\n border-radius: 9999px;\r\n font-size: 0.875rem;\r\n position: fixed;\r\n bottom: 2rem;\r\n right: 6rem;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .contact-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .tab-button {\r\n padding: 0.75rem;\r\n }\r\n \r\n .planning-table {\r\n display: block;\r\n overflow-x: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container mx-auto px-4 py-8\">\r\n <h1 class=\"text-3xl font-bold mb-8 text-gray-900\">Planning Comptage Caisses 2025<\/h1>\r\n \r\n \r\n <div class=\"mb-4 border-b border-gray-200\">\r\n <div class=\"flex flex-wrap -mb-px\">\r\n <button class=\"tab-button active\" data-target=\"planning-tab\">\r\n <span class=\"material-icons\">calendar_today<\/span>\r\n Planning\r\n <\/button>\r\n <button class=\"tab-button\" data-target=\"contacts-tab\">\r\n <span class=\"material-icons\">contact_phone<\/span>\r\n Carnet d'adresses\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"planning-tab\" class=\"tab-content\">\r\n <button class=\"save-button mb-4\">\r\n <span class=\"material-icons\">cloud_upload<\/span>\r\n Sauvegarder vers Google\r\n <\/button>\r\n \r\n <table class=\"planning-table\">\r\n <thead>\r\n <tr>\r\n <th>B\u00e9n\u00e9voles<\/th>\r\n <th>Samedi 4 janvier<\/th>\r\n <th>Mercredi 22 janvier<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div id=\"contacts-tab\" class=\"tab-content\" style=\"display: none;\">\r\n <div class=\"contact-grid\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button class=\"fab-button\" id=\"sync-button\">\r\n <span class=\"material-icons\">sync<\/span>\r\n <\/button>\r\n\r\n <div class=\"sync-badge\" id=\"sync-status\" style=\"display: none;\">\r\n <span class=\"material-icons\">check_circle<\/span>\r\n <span class=\"ml-1\">Synchronis\u00e9<\/span>\r\n <\/div>\r\n\r\n <script>\r\n const volunteers = [\r\n {\r\n name: \"Audrey Michon\",\r\n email: \"audrey1023@hotmail.fr\",\r\n phone: \"06 60 63 57 77\"\r\n },\r\n {\r\n name: \"Fran\u00e7oise Ghazi\",\r\n email: \"lachieusedu30@hotmail.fr\",\r\n phone: \"06 21 32 69 68\"\r\n },\r\n {\r\n name: \"Jean-Paul Mazel\",\r\n email: \"vbjpm@orange.fr\",\r\n phone: \"06 71 89 76 97\"\r\n },\r\n {\r\n name: \"Rosy Favas\",\r\n email: \"roselyne.favas@gmail.com\",\r\n phone: \"06 89 12 11 37\"\r\n },\r\n {\r\n name: \"Edouard Cuisinier\",\r\n email: \"e.cuisinier@orange.fr\",\r\n phone: \"06 03 97 04 74\"\r\n },\r\n {\r\n name: \"Sophie Setbon Cuisinier\",\r\n email: \"dalbat98@gmail.com\",\r\n phone: \"07 81 00 37 37\"\r\n },\r\n {\r\n name: \"Damery\",\r\n email: \"damery@ik.me\",\r\n phone: \"06 86 14 93 75\"\r\n },\r\n {\r\n name: \"C\u00e9dric Pujolas\",\r\n email: \"cedric.pujolas@gmail.com\",\r\n phone: \"06 86 98 14 11\"\r\n },\r\n {\r\n name: \"Denis\",\r\n email: \"denislecomptoirjunasol@gmail.com\",\r\n phone: \"06 98 77 81 30\"\r\n }\r\n ];\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Initialize tabs\r\n const tabs = document.querySelectorAll('.tab-button');\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n tabs.forEach(t => t.classList.remove('active'));\r\n tab.classList.add('active');\r\n \r\n const targetId = tab.dataset.target;\r\n document.querySelectorAll('.tab-content').forEach(content => {\r\n content.style.display = content.id === targetId ? 'block' : 'none';\r\n });\r\n });\r\n });\r\n\r\n \/\/ Initialize contact cards\r\n const contactGrid = document.querySelector('.contact-grid');\r\n volunteers.forEach(volunteer => {\r\n const card = createContactCard(volunteer);\r\n contactGrid.appendChild(card);\r\n });\r\n\r\n \/\/ Initialize planning table\r\n initializePlanningTable();\r\n\r\n \/\/ Initialize sync button\r\n document.getElementById('sync-button').addEventListener('click', syncWithGoogle);\r\n });\r\n\r\n function createContactCard(volunteer) {\r\n const card = document.createElement('div');\r\n card.className = 'card';\r\n card.innerHTML = `\r\n <div class=\"contact-name\">${volunteer.name}<\/div>\r\n <div class=\"contact-info\">\r\n <span class=\"material-icons\">email<\/span>\r\n <span>${volunteer.email}<\/span>\r\n <button class=\"copy-button\" data-copy=\"${volunteer.email}\">Copier<\/button>\r\n <\/div>\r\n <div class=\"contact-info\">\r\n <span class=\"material-icons\">phone<\/span>\r\n <span>${volunteer.phone}<\/span>\r\n <button class=\"copy-button\" data-copy=\"${volunteer.phone}\">Copier<\/button>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Add copy functionality\r\n card.querySelectorAll('.copy-button').forEach(button => {\r\n button.addEventListener('click', async () => {\r\n try {\r\n await navigator.clipboard.writeText(button.dataset.copy);\r\n showToast('Copi\u00e9!', 'success');\r\n } catch (err) {\r\n showToast('Erreur lors de la copie', 'error');\r\n }\r\n });\r\n });\r\n\r\n return card;\r\n }\r\n\r\n function initializePlanningTable() {\r\n const tbody = document.querySelector('.planning-table tbody');\r\n tbody.innerHTML = '';\r\n\r\n volunteers.forEach(volunteer => {\r\n const tr = document.createElement('tr');\r\n tr.innerHTML = `\r\n <td>${volunteer.name}<\/td>\r\n <td>\r\n <select class=\"status-select\">\r\n <option value=\"\">Choisir...<\/option>\r\n <option value=\"Je prends\">Je prends<\/option>\r\n <option value=\"je suis disponible\">Je suis disponible<\/option>\r\n <option value=\"pas possible\">Pas possible<\/option>\r\n <\/select>\r\n <\/td>\r\n <td>\r\n <select class=\"status-select\">\r\n <option value=\"\">Choisir...<\/option>\r\n <option value=\"Je prends\">Je prends<\/option>\r\n <option value=\"je suis disponible\">Je suis disponible<\/option>\r\n <option value=\"pas possible\">Pas possible<\/option>\r\n <\/select>\r\n <\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n function syncWithGoogle() {\r\n const syncStatus = document.getElementById('sync-status');\r\n syncStatus.style.display = 'flex';\r\n \r\n \/\/ Simulate sync\r\n setTimeout(() => {\r\n showToast('Synchronisation r\u00e9ussie!', 'success');\r\n setTimeout(() => {\r\n syncStatus.style.display = 'none';\r\n }, 2000);\r\n }, 1000);\r\n }\r\n\r\n function showToast(message, type = 'success') {\r\n Toastify({\r\n text: message,\r\n duration: 3000,\r\n gravity: \"bottom\",\r\n position: \"right\",\r\n backgroundColor: type === 'success' ? 'var(--success)' : 'var(--error)',\r\n }).showToast();\r\n }\r\n <\/script>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ea07858 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ea07858\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-694e3f0\" data-id=\"694e3f0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-00dcab4 elementor-widget elementor-widget-html\" data-id=\"00dcab4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Planning Comptage Caisses 2025<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.css\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\/src\/toastify.min.css\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #1a56db;\r\n --success: #059669;\r\n --error: #dc2626;\r\n --warning: #d97706;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n background-color: #f9fafb;\r\n margin: 0;\r\n padding: 1rem;\r\n }\r\n\r\n .tab-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .tab-button {\r\n padding: 1rem 1.5rem;\r\n border: none;\r\n background: none;\r\n border-bottom: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n color: #6b7280;\r\n }\r\n\r\n .tab-button.active {\r\n color: var(--primary);\r\n border-bottom-color: var(--primary);\r\n }\r\n\r\n .planning-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 1rem;\r\n background: white;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n }\r\n\r\n .planning-table th {\r\n background-color: #f3f4f6;\r\n padding: 1rem;\r\n text-align: left;\r\n font-weight: 600;\r\n }\r\n\r\n .planning-table td {\r\n padding: 1rem;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n .status-select {\r\n width: 100%;\r\n padding: 0.5rem;\r\n border: 1px solid #e5e7eb;\r\n border-radius: 4px;\r\n background-color: white;\r\n }\r\n\r\n .status-je-prends {\r\n background-color: #dcfce7;\r\n }\r\n\r\n .status-disponible {\r\n background-color: #dbeafe;\r\n }\r\n\r\n .status-impossible {\r\n background-color: #fee2e2;\r\n }\r\n\r\n .save-button {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.75rem 1.5rem;\r\n background-color: var(--primary);\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 500;\r\n margin-bottom: 1rem;\r\n transition: background-color 0.2s;\r\n }\r\n\r\n .save-button:hover {\r\n background-color: #1e40af;\r\n }\r\n\r\n .loading-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(255,255,255,0.8);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n }\r\n\r\n .loading-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid var(--primary);\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n #error-message {\r\n padding: 1rem;\r\n background-color: #fee2e2;\r\n color: #dc2626;\r\n border-radius: 8px;\r\n margin-bottom: 1rem;\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"tab-container\">\r\n <h1 class=\"text-3xl font-bold mb-8 text-gray-900\">Planning Comptage Caisses 2025<\/h1>\r\n \r\n <div id=\"error-message\"><\/div>\r\n\r\n <button class=\"save-button\" onclick=\"syncWithKDrive()\">\r\n <span class=\"material-icons\">sync<\/span>\r\n <span class=\"ml-2\">Synchroniser avec kDrive<\/span>\r\n <\/button>\r\n\r\n <div class=\"planning-table-container\">\r\n <table class=\"planning-table\">\r\n <thead>\r\n <tr>\r\n <th>B\u00e9n\u00e9voles<\/th>\r\n <th>Samedi 4 janvier<\/th>\r\n <th>Mercredi 22 janvier<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"planning-tbody\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"loading\" class=\"loading-overlay\" style=\"display: none;\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const KDRIVE_CONFIG = {\r\n apiUrl: 'https:\/\/api.infomaniak.com\/2\/drive',\r\n fileId: '9905',\r\n driveId: '804086',\r\n accessToken: '16e7ed3d-ee7d-4043-9d5a-437f88bc114c'\r\n };\r\n\r\n const volunteers = [\r\n \"Audrey Michon\",\r\n \"Fran\u00e7oise Ghazi\",\r\n \"Jean-Paul Mazel\",\r\n \"Rosy Favas\",\r\n \"Edouard Cuisinier\",\r\n \"Sophie Setbon Cuisinier\"\r\n ];\r\n\r\n async function syncWithKDrive() {\r\n showLoading(true);\r\n try {\r\n const response = await fetch(`${KDRIVE_CONFIG.apiUrl}\/${KDRIVE_CONFIG.driveId}\/files\/${KDRIVE_CONFIG.fileId}\/office\/content`, {\r\n headers: {\r\n 'Authorization': `Bearer ${KDRIVE_CONFIG.accessToken}`,\r\n 'Accept': 'application\/json'\r\n }\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`Error fetching data: ${response.statusText}`);\r\n }\r\n\r\n const data = await response.json();\r\n updatePlanningTable(data);\r\n showSuccessMessage('Synchronisation r\u00e9ussie');\r\n } catch (error) {\r\n showErrorMessage('Erreur de synchronisation: ' + error.message);\r\n } finally {\r\n showLoading(false);\r\n }\r\n }\r\n\r\n function updatePlanningTable(data) {\r\n const tbody = document.getElementById('planning-tbody');\r\n tbody.innerHTML = '';\r\n\r\n volunteers.forEach(volunteer => {\r\n const tr = document.createElement('tr');\r\n \r\n \/\/ Add volunteer name\r\n const tdName = document.createElement('td');\r\n tdName.textContent = volunteer;\r\n tr.appendChild(tdName);\r\n\r\n \/\/ Add status cells\r\n for (let i = 0; i < 2; i++) {\r\n const td = document.createElement('td');\r\n const select = document.createElement('select');\r\n select.className = 'status-select';\r\n select.innerHTML = `\r\n <option value=\"\">Choisir...<\/option>\r\n <option value=\"Je prends\">Je prends<\/option>\r\n <option value=\"je suis disponible\">Je suis disponible<\/option>\r\n <option value=\"pas possible\">Pas possible<\/option>\r\n `;\r\n\r\n \/\/ Set value if exists in data\r\n const volunteerData = data?.content?.find(row => row[0] === volunteer);\r\n if (volunteerData) {\r\n select.value = volunteerData[i + 1] || '';\r\n if (select.value) {\r\n select.classList.add(`status-${select.value.toLowerCase().replace(\/ \/g, '-')}`);\r\n }\r\n }\r\n\r\n select.addEventListener('change', function() {\r\n this.className = 'status-select';\r\n if (this.value) {\r\n this.classList.add(`status-${this.value.toLowerCase().replace(\/ \/g, '-')}`);\r\n }\r\n });\r\n\r\n td.appendChild(select);\r\n tr.appendChild(td);\r\n }\r\n\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n function showLoading(show) {\r\n document.getElementById('loading').style.display = show ? 'flex' : 'none';\r\n }\r\n\r\n function showErrorMessage(message) {\r\n const errorDiv = document.getElementById('error-message');\r\n errorDiv.textContent = message;\r\n errorDiv.style.display = 'block';\r\n setTimeout(() => {\r\n errorDiv.style.display = 'none';\r\n }, 5000);\r\n }\r\n\r\n function showSuccessMessage(message) {\r\n Toastify({\r\n text: message,\r\n duration: 3000,\r\n gravity: \"bottom\",\r\n position: \"right\",\r\n backgroundColor: \"var(--success)\",\r\n }).showToast();\r\n }\r\n\r\n \/\/ Initial load\r\n document.addEventListener('DOMContentLoaded', () => {\r\n syncWithKDrive();\r\n });\r\n <\/script>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Planning Comptage Caisses 2025 Planning Comptage Caisses 2025 calendar_today Planning contact_phone Carnet d’adresses cloud_upload Sauvegarder vers Google B\u00e9n\u00e9voles Samedi 4 janvier Mercredi 22 janvier sync check_circle Synchronis\u00e9 Planning Comptage Caisses 2025 Planning Comptage Caisses 2025 sync Synchroniser avec kDrive B\u00e9n\u00e9voles Samedi 4 janvier Mercredi 22 janvier<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mc_calendar":[],"footnotes":""},"class_list":["post-3718","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3718"}],"version-history":[{"count":13,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3718\/revisions"}],"predecessor-version":[{"id":3731,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3718\/revisions\/3731"}],"wp:attachment":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Planning Comptage Caisses 2025<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.css\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\/src\/toastify.min.css\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/apis.google.com\/js\/api.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #1a56db;\r\n --success: #059669;\r\n --error: #dc2626;\r\n --warning: #d97706;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n background-color: #f9fafb;\r\n }\r\n\r\n .material-icons {\r\n vertical-align: middle;\r\n margin-right: 8px;\r\n }\r\n\r\n .fab-button {\r\n position: fixed;\r\n bottom: 2rem;\r\n right: 2rem;\r\n background-color: var(--primary);\r\n color: white;\r\n border-radius: 50%;\r\n width: 56px;\r\n height: 56px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n cursor: pointer;\r\n transition: transform 0.2s, background-color 0.2s;\r\n z-index: 1000;\r\n }\r\n\r\n .fab-button:hover {\r\n transform: scale(1.1);\r\n background-color: #1e40af;\r\n }\r\n\r\n .tab-button {\r\n padding: 1rem 1.5rem;\r\n border-bottom: 2px solid transparent;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n color: #6b7280;\r\n }\r\n\r\n .tab-button.active {\r\n color: var(--primary);\r\n border-bottom-color: var(--primary);\r\n }\r\n\r\n .card {\r\n background-color: white;\r\n border-radius: 8px;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n padding: 1.5rem;\r\n margin-bottom: 1rem;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n }\r\n\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 1.5rem;\r\n padding: 1.5rem;\r\n }\r\n\r\n .contact-info {\r\n margin-top: 0.75rem;\r\n display: flex;\r\n align-items: center;\r\n color: #4b5563;\r\n }\r\n\r\n .copy-button {\r\n padding: 0.25rem 0.75rem;\r\n background-color: #f3f4f6;\r\n border-radius: 4px;\r\n font-size: 0.875rem;\r\n color: #374151;\r\n margin-left: auto;\r\n transition: background-color 0.2s;\r\n }\r\n\r\n .copy-button:hover {\r\n background-color: #e5e7eb;\r\n }\r\n\r\n .save-button {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.75rem 1.5rem;\r\n background-color: var(--primary);\r\n color: white;\r\n border-radius: 8px;\r\n font-weight: 500;\r\n transition: background-color 0.2s;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .save-button:hover {\r\n background-color: #1e40af;\r\n }\r\n\r\n .contact-name {\r\n font-size: 1.25rem;\r\n font-weight: 500;\r\n color: #111827;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .tab-content {\r\n padding: 1.5rem;\r\n background-color: white;\r\n border-radius: 0 0 8px 8px;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n }\r\n\r\n .planning-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n\r\n .planning-table th {\r\n background-color: #f3f4f6;\r\n padding: 1rem;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n\r\n .planning-table td {\r\n padding: 1rem;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n .status-select {\r\n width: 100%;\r\n padding: 0.5rem;\r\n border: 1px solid #e5e7eb;\r\n border-radius: 4px;\r\n background-color: white;\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .status-select:focus {\r\n border-color: var(--primary);\r\n outline: none;\r\n ring: 2px solid var(--primary);\r\n }\r\n\r\n .sync-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.25rem 0.75rem;\r\n background-color: var(--success);\r\n color: white;\r\n border-radius: 9999px;\r\n font-size: 0.875rem;\r\n position: fixed;\r\n bottom: 2rem;\r\n right: 6rem;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .contact-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .tab-button {\r\n padding: 0.75rem;\r\n }\r\n \r\n .planning-table {\r\n display: block;\r\n overflow-x: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container mx-auto px-4 py-8\">\r\n <h1 class=\"text-3xl font-bold mb-8 text-gray-900\">Planning Comptage Caisses 2025<\/h1>\r\n \r\n \r\n <div class=\"mb-4 border-b border-gray-200\">\r\n <div class=\"flex flex-wrap -mb-px\">\r\n <button class=\"tab-button active\" data-target=\"planning-tab\">\r\n <span class=\"material-icons\">calendar_today<\/span>\r\n Planning\r\n <\/button>\r\n <button class=\"tab-button\" data-target=\"contacts-tab\">\r\n <span class=\"material-icons\">contact_phone<\/span>\r\n Carnet d'adresses\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"planning-tab\" class=\"tab-content\">\r\n <button class=\"save-button mb-4\">\r\n <span class=\"material-icons\">cloud_upload<\/span>\r\n Sauvegarder vers Google\r\n <\/button>\r\n \r\n <table class=\"planning-table\">\r\n <thead>\r\n <tr>\r\n <th>B\u00e9n\u00e9voles<\/th>\r\n <th>Samedi 4 janvier<\/th>\r\n <th>Mercredi 22 janvier<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div id=\"contacts-tab\" class=\"tab-content\" style=\"display: none;\">\r\n <div class=\"contact-grid\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button class=\"fab-button\" id=\"sync-button\">\r\n <span class=\"material-icons\">sync<\/span>\r\n <\/button>\r\n\r\n <div class=\"sync-badge\" id=\"sync-status\" style=\"display: none;\">\r\n <span class=\"material-icons\">check_circle<\/span>\r\n <span class=\"ml-1\">Synchronis\u00e9<\/span>\r\n <\/div>\r\n\r\n <script>\r\n const volunteers = [\r\n {\r\n name: \"Audrey Michon\",\r\n email: \"audrey1023@hotmail.fr\",\r\n phone: \"06 60 63 57 77\"\r\n },\r\n {\r\n name: \"Fran\u00e7oise Ghazi\",\r\n email: \"lachieusedu30@hotmail.fr\",\r\n phone: \"06 21 32 69 68\"\r\n },\r\n {\r\n name: \"Jean-Paul Mazel\",\r\n email: \"vbjpm@orange.fr\",\r\n phone: \"06 71 89 76 97\"\r\n },\r\n {\r\n name: \"Rosy Favas\",\r\n email: \"roselyne.favas@gmail.com\",\r\n phone: \"06 89 12 11 37\"\r\n },\r\n {\r\n name: \"Edouard Cuisinier\",\r\n email: \"e.cuisinier@orange.fr\",\r\n phone: \"06 03 97 04 74\"\r\n },\r\n {\r\n name: \"Sophie Setbon Cuisinier\",\r\n email: \"dalbat98@gmail.com\",\r\n phone: \"07 81 00 37 37\"\r\n },\r\n {\r\n name: \"Damery\",\r\n email: \"damery@ik.me\",\r\n phone: \"06 86 14 93 75\"\r\n },\r\n {\r\n name: \"C\u00e9dric Pujolas\",\r\n email: \"cedric.pujolas@gmail.com\",\r\n phone: \"06 86 98 14 11\"\r\n },\r\n {\r\n name: \"Denis\",\r\n email: \"denislecomptoirjunasol@gmail.com\",\r\n phone: \"06 98 77 81 30\"\r\n }\r\n ];\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Initialize tabs\r\n const tabs = document.querySelectorAll('.tab-button');\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n tabs.forEach(t => t.classList.remove('active'));\r\n tab.classList.add('active');\r\n \r\n const targetId = tab.dataset.target;\r\n document.querySelectorAll('.tab-content').forEach(content => {\r\n content.style.display = content.id === targetId ? 'block' : 'none';\r\n });\r\n });\r\n });\r\n\r\n \/\/ Initialize contact cards\r\n const contactGrid = document.querySelector('.contact-grid');\r\n volunteers.forEach(volunteer => {\r\n const card = createContactCard(volunteer);\r\n contactGrid.appendChild(card);\r\n });\r\n\r\n \/\/ Initialize planning table\r\n initializePlanningTable();\r\n\r\n \/\/ Initialize sync button\r\n document.getElementById('sync-button').addEventListener('click', syncWithGoogle);\r\n });\r\n\r\n function createContactCard(volunteer) {\r\n const card = document.createElement('div');\r\n card.className = 'card';\r\n card.innerHTML = `\r\n <div class=\"contact-name\">${volunteer.name}<\/div>\r\n <div class=\"contact-info\">\r\n <span class=\"material-icons\">email<\/span>\r\n <span>${volunteer.email}<\/span>\r\n <button class=\"copy-button\" data-copy=\"${volunteer.email}\">Copier<\/button>\r\n <\/div>\r\n <div class=\"contact-info\">\r\n <span class=\"material-icons\">phone<\/span>\r\n <span>${volunteer.phone}<\/span>\r\n <button class=\"copy-button\" data-copy=\"${volunteer.phone}\">Copier<\/button>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Add copy functionality\r\n card.querySelectorAll('.copy-button').forEach(button => {\r\n button.addEventListener('click', async () => {\r\n try {\r\n await navigator.clipboard.writeText(button.dataset.copy);\r\n showToast('Copi\u00e9!', 'success');\r\n } catch (err) {\r\n showToast('Erreur lors de la copie', 'error');\r\n }\r\n });\r\n });\r\n\r\n return card;\r\n }\r\n\r\n function initializePlanningTable() {\r\n const tbody = document.querySelector('.planning-table tbody');\r\n tbody.innerHTML = '';\r\n\r\n volunteers.forEach(volunteer => {\r\n const tr = document.createElement('tr');\r\n tr.innerHTML = `\r\n <td>${volunteer.name}<\/td>\r\n <td>\r\n <select class=\"status-select\">\r\n <option value=\"\">Choisir...<\/option>\r\n <option value=\"Je prends\">Je prends<\/option>\r\n <option value=\"je suis disponible\">Je suis disponible<\/option>\r\n <option value=\"pas possible\">Pas possible<\/option>\r\n <\/select>\r\n <\/td>\r\n <td>\r\n <select class=\"status-select\">\r\n <option value=\"\">Choisir...<\/option>\r\n <option value=\"Je prends\">Je prends<\/option>\r\n <option value=\"je suis disponible\">Je suis disponible<\/option>\r\n <option value=\"pas possible\">Pas possible<\/option>\r\n <\/select>\r\n <\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n function syncWithGoogle() {\r\n const syncStatus = document.getElementById('sync-status');\r\n syncStatus.style.display = 'flex';\r\n \r\n \/\/ Simulate sync\r\n setTimeout(() => {\r\n showToast('Synchronisation r\u00e9ussie!', 'success');\r\n setTimeout(() => {\r\n syncStatus.style.display = 'none';\r\n }, 2000);\r\n }, 1000);\r\n }\r\n\r\n function showToast(message, type = 'success') {\r\n Toastify({\r\n text: message,\r\n duration: 3000,\r\n gravity: \"bottom\",\r\n position: \"right\",\r\n backgroundColor: type === 'success' ? 'var(--success)' : 'var(--error)',\r\n }).showToast();\r\n }\r\n <\/script>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ea07858 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ea07858\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-694e3f0\" data-id=\"694e3f0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-00dcab4 elementor-widget elementor-widget-html\" data-id=\"00dcab4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Planning Comptage Caisses 2025<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.css\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\/src\/toastify.min.css\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --primary: #1a56db;\r\n --success: #059669;\r\n --error: #dc2626;\r\n --warning: #d97706;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n background-color: #f9fafb;\r\n margin: 0;\r\n padding: 1rem;\r\n }\r\n\r\n .tab-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .tab-button {\r\n padding: 1rem 1.5rem;\r\n border: none;\r\n background: none;\r\n border-bottom: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n color: #6b7280;\r\n }\r\n\r\n .tab-button.active {\r\n color: var(--primary);\r\n border-bottom-color: var(--primary);\r\n }\r\n\r\n .planning-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 1rem;\r\n background: white;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n }\r\n\r\n .planning-table th {\r\n background-color: #f3f4f6;\r\n padding: 1rem;\r\n text-align: left;\r\n font-weight: 600;\r\n }\r\n\r\n .planning-table td {\r\n padding: 1rem;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n .status-select {\r\n width: 100%;\r\n padding: 0.5rem;\r\n border: 1px solid #e5e7eb;\r\n border-radius: 4px;\r\n background-color: white;\r\n }\r\n\r\n .status-je-prends {\r\n background-color: #dcfce7;\r\n }\r\n\r\n .status-disponible {\r\n background-color: #dbeafe;\r\n }\r\n\r\n .status-impossible {\r\n background-color: #fee2e2;\r\n }\r\n\r\n .save-button {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.75rem 1.5rem;\r\n background-color: var(--primary);\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 500;\r\n margin-bottom: 1rem;\r\n transition: background-color 0.2s;\r\n }\r\n\r\n .save-button:hover {\r\n background-color: #1e40af;\r\n }\r\n\r\n .loading-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(255,255,255,0.8);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n }\r\n\r\n .loading-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 4px solid #f3f3f3;\r\n border-top: 4px solid var(--primary);\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n #error-message {\r\n padding: 1rem;\r\n background-color: #fee2e2;\r\n color: #dc2626;\r\n border-radius: 8px;\r\n margin-bottom: 1rem;\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"tab-container\">\r\n <h1 class=\"text-3xl font-bold mb-8 text-gray-900\">Planning Comptage Caisses 2025<\/h1>\r\n \r\n <div id=\"error-message\"><\/div>\r\n\r\n <button class=\"save-button\" onclick=\"syncWithKDrive()\">\r\n <span class=\"material-icons\">sync<\/span>\r\n <span class=\"ml-2\">Synchroniser avec kDrive<\/span>\r\n <\/button>\r\n\r\n <div class=\"planning-table-container\">\r\n <table class=\"planning-table\">\r\n <thead>\r\n <tr>\r\n <th>B\u00e9n\u00e9voles<\/th>\r\n <th>Samedi 4 janvier<\/th>\r\n <th>Mercredi 22 janvier<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"planning-tbody\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"loading\" class=\"loading-overlay\" style=\"display: none;\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const KDRIVE_CONFIG = {\r\n apiUrl: 'https:\/\/api.infomaniak.com\/2\/drive',\r\n fileId: '9905',\r\n driveId: '804086',\r\n accessToken: '16e7ed3d-ee7d-4043-9d5a-437f88bc114c'\r\n };\r\n\r\n const volunteers = [\r\n \"Audrey Michon\",\r\n \"Fran\u00e7oise Ghazi\",\r\n \"Jean-Paul Mazel\",\r\n \"Rosy Favas\",\r\n \"Edouard Cuisinier\",\r\n \"Sophie Setbon Cuisinier\"\r\n ];\r\n\r\n async function syncWithKDrive() {\r\n showLoading(true);\r\n try {\r\n const response = await fetch(`${KDRIVE_CONFIG.apiUrl}\/${KDRIVE_CONFIG.driveId}\/files\/${KDRIVE_CONFIG.fileId}\/office\/content`, {\r\n headers: {\r\n 'Authorization': `Bearer ${KDRIVE_CONFIG.accessToken}`,\r\n 'Accept': 'application\/json'\r\n }\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error(`Error fetching data: ${response.statusText}`);\r\n }\r\n\r\n const data = await response.json();\r\n updatePlanningTable(data);\r\n showSuccessMessage('Synchronisation r\u00e9ussie');\r\n } catch (error) {\r\n showErrorMessage('Erreur de synchronisation: ' + error.message);\r\n } finally {\r\n showLoading(false);\r\n }\r\n }\r\n\r\n function updatePlanningTable(data) {\r\n const tbody = document.getElementById('planning-tbody');\r\n tbody.innerHTML = '';\r\n\r\n volunteers.forEach(volunteer => {\r\n const tr = document.createElement('tr');\r\n \r\n \/\/ Add volunteer name\r\n const tdName = document.createElement('td');\r\n tdName.textContent = volunteer;\r\n tr.appendChild(tdName);\r\n\r\n \/\/ Add status cells\r\n for (let i = 0; i < 2; i++) {\r\n const td = document.createElement('td');\r\n const select = document.createElement('select');\r\n select.className = 'status-select';\r\n select.innerHTML = `\r\n <option value=\"\">Choisir...<\/option>\r\n <option value=\"Je prends\">Je prends<\/option>\r\n <option value=\"je suis disponible\">Je suis disponible<\/option>\r\n <option value=\"pas possible\">Pas possible<\/option>\r\n `;\r\n\r\n \/\/ Set value if exists in data\r\n const volunteerData = data?.content?.find(row => row[0] === volunteer);\r\n if (volunteerData) {\r\n select.value = volunteerData[i + 1] || '';\r\n if (select.value) {\r\n select.classList.add(`status-${select.value.toLowerCase().replace(\/ \/g, '-')}`);\r\n }\r\n }\r\n\r\n select.addEventListener('change', function() {\r\n this.className = 'status-select';\r\n if (this.value) {\r\n this.classList.add(`status-${this.value.toLowerCase().replace(\/ \/g, '-')}`);\r\n }\r\n });\r\n\r\n td.appendChild(select);\r\n tr.appendChild(td);\r\n }\r\n\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n function showLoading(show) {\r\n document.getElementById('loading').style.display = show ? 'flex' : 'none';\r\n }\r\n\r\n function showErrorMessage(message) {\r\n const errorDiv = document.getElementById('error-message');\r\n errorDiv.textContent = message;\r\n errorDiv.style.display = 'block';\r\n setTimeout(() => {\r\n errorDiv.style.display = 'none';\r\n }, 5000);\r\n }\r\n\r\n function showSuccessMessage(message) {\r\n Toastify({\r\n text: message,\r\n duration: 3000,\r\n gravity: \"bottom\",\r\n position: \"right\",\r\n backgroundColor: \"var(--success)\",\r\n }).showToast();\r\n }\r\n\r\n \/\/ Initial load\r\n document.addEventListener('DOMContentLoaded', () => {\r\n syncWithKDrive();\r\n });\r\n <\/script>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flowbite\/2.2.1\/flowbite.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/toastify-js\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Planning Comptage Caisses 2025 Planning Comptage Caisses 2025 calendar_today Planning contact_phone Carnet d’adresses cloud_upload Sauvegarder vers Google B\u00e9n\u00e9voles Samedi 4 janvier Mercredi 22 janvier sync check_circle Synchronis\u00e9 Planning Comptage Caisses 2025 Planning Comptage Caisses 2025 sync Synchroniser avec kDrive B\u00e9n\u00e9voles Samedi 4 janvier Mercredi 22 janvier<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mc_calendar":[],"footnotes":""},"class_list":["post-3718","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3718"}],"version-history":[{"count":13,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3718\/revisions"}],"predecessor-version":[{"id":3731,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3718\/revisions\/3731"}],"wp:attachment":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}