106 lines
2.7 KiB
JavaScript
106 lines
2.7 KiB
JavaScript
|
const DONORBOX_CONFIG = {
|
||
|
|
proxyUrl: '/api/donorbox-proxy.php',
|
||
|
|
};
|
||
|
|
|
||
|
|
function formatCurrency(amount) {
|
||
|
|
const rounded = Math.round(amount * 100) / 100;
|
||
|
|
const hasDecimals = rounded % 1 !== 0;
|
||
|
|
|
||
|
|
const formatted = rounded.toLocaleString('fr-FR', {
|
||
|
|
minimumFractionDigits: 0,
|
||
|
|
maximumFractionDigits: hasDecimals ? 2 : 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
return formatted.replace(/[\s\u00A0\u202F]/g, '\u202F') + '\u202F€';
|
||
|
|
}
|
||
|
|
|
||
|
|
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 collected = campaignData.total_raised || 0;
|
||
|
|
const goal = campaignData.goal_amt || 50000;
|
||
|
|
const percentage = Math.min((collected / goal) * 100, 100);
|
||
|
|
|
||
|
|
const gaugeElement = document.getElementById('gauge');
|
||
|
|
if (gaugeElement) {
|
||
|
|
gaugeElement.style.setProperty(
|
||
|
|
'--pourcent',
|
||
|
|
`${percentage > 2.5 ? percentage : 2.5}%`
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const collectedElement = document.querySelector(
|
||
|
|
'#gauge--infos__donateurs .value'
|
||
|
|
);
|
||
|
|
if (collectedElement) {
|
||
|
|
collectedElement.textContent = formatCurrency(collected);
|
||
|
|
}
|
||
|
|
|
||
|
|
const goalElement = document.querySelector('#gauge--infos__objectif .value');
|
||
|
|
if (goalElement) {
|
||
|
|
goalElement.textContent = formatCurrency(goal);
|
||
|
|
}
|
||
|
|
|
||
|
|
const donorsCount = campaignData.donations_count || 0;
|
||
|
|
const donorsElement = document.querySelector('#gauge--infos__donors .value');
|
||
|
|
if (donorsElement) {
|
||
|
|
donorsElement.textContent = donorsCount;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('Gauge updated:', {
|
||
|
|
collected: formatCurrency(collected),
|
||
|
|
goal: formatCurrency(goal),
|
||
|
|
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);
|
||
|
|
}
|