index-soutien/assets/js/donorbox-gauge.js

const DONORBOX_CONFIG = {
  proxyUrl: '/api/donorbox-proxy.php',
};

const RECURRING_DONORS_OFFSET = 98;
const GOAL_SUPPORTERS = 500;

async function fetchDonorboxData() {
  try {
    const response = await fetch(DONORBOX_CONFIG.proxyUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
    }

    const data = await response.json();

    if (data.error) {
      throw new Error(data.error);
    }

    return data;
  } catch (error) {
    console.error('Error fetching Donorbox data:', error);
    throw error;
  }
}

function updateGaugeDisplay(campaignData) {
  const recurringCount = campaignData.recurring_donors_count || 0;
  const totalSupport = recurringCount + RECURRING_DONORS_OFFSET;
  const percentage = Math.min((totalSupport / GOAL_SUPPORTERS) * 100, 100);

  const gaugeElement = document.getElementById('gauge');
  if (gaugeElement) {
    gaugeElement.style.setProperty(
      '--pourcent',
      `${percentage > 2.5 ? percentage : 2.5}%`
    );
  }

  const countElement = document.querySelector(
    '#gauge-info--supporters .value'
  );
  if (countElement) {
    countElement.textContent = totalSupport;
  }

  console.log('Gauge updated:', {
    recurringDonors: recurringCount,
    totalSupport,
    percentage: `${percentage.toFixed(1)}%`,
  });
}

async function initDonorboxGauge() {
  try {
    console.log('Fetching Donorbox data...');
    const campaignData = await fetchDonorboxData();
    updateGaugeDisplay(campaignData);
  } catch (error) {
    console.error('Failed to update gauge:', error);
  }
}

function setupAutoRefresh(intervalMinutes = 5) {
  const intervalMs = intervalMinutes * 60 * 1000;
  setInterval(initDonorboxGauge, intervalMs);
  console.log(`Auto-refresh configured: every ${intervalMinutes} minutes`);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    initDonorboxGauge();
    setupAutoRefresh(5);
  });
} else {
  initDonorboxGauge();
  setupAutoRefresh(5);
}