Mahtan/suppdonn-tracker
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄Better UI & add supporters

Browse Source
This commit is contained in:
Victor Bodinaud
2025-02-27 14:21:42 +01:00
parent 9008e944df
commit ef9802ac48
3 changed files with 282 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/backgound.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

305
public/index.html
View File

@@ -1,10 +1,11 @@
<!-- public/index.html --> <!-- public/index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi de Campagne Ulule</title> <title>Suppdonn, Knights of Water</title>
<style> <style>
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -12,21 +13,30 @@
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
background-color: #2c5282; /* Fond bleu */ background-color: #2c5282;
/* Couleur de secours si l'image ne charge pas */
background-image: url('background.png');
background-position: center;
background-size: cover;
background-attachment: fixed;
color: white; color: white;
} }
h1 { h1 {
color: white; color: white;
margin-bottom: 30px; margin-bottom: 30px;
} }
.dashboard { .dashboard {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 30px; margin-top: 30px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.card { .card {
background-color: #1a365d; /* Bleu plus foncé pour les cartes */ background-color: #1a365d;
/* Bleu plus foncé pour les cartes */
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding: 20px; padding: 20px;
@@ -34,79 +44,156 @@
width: 280px; width: 280px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.card:hover { .card:hover {
transform: translateY(-5px); transform: translateY(-5px);
} }
.wide-card { .wide-card {
width: calc(100% - 60px); width: calc(100% - 60px);
max-height: none; max-height: none;
overflow: visible; overflow: visible;
text-align: left; text-align: left;
} }
.contributors-list { .contributors-list {
width: calc(100% - 60px); width: calc(100% - 60px);
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
text-align: left; text-align: left;
} }
.contributor-info {
display: flex;
flex-direction: column;
width: 100%;
}
.contributor-profile {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
}
.contributor-comment {
color: #cbd5e0;
font-size: 13px;
margin-top: 5px;
font-style: italic;
line-height: 1.3;
width: 100%;
overflow: visible;
text-overflow: clip;
white-space: normal;
/* Permet le passage à la ligne */
}
/* Mis à jour la structure du contributeur-item pour mieux gérer l'espace */
.contributor-item { .contributor-item {
padding: 10px; padding: 10px;
border-bottom: 1px solid #2d4a7d; border-bottom: 1px solid #2d4a7d;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; /* Changé de row à column */
} }
.contributor-details {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 5px;
}
.contributor-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background-color: #3b557d;
}
.contributor-name { .contributor-name {
font-weight: bold; font-weight: bold;
color: #e3b505; color: #e3b505;
} }
.contributor-reward { .contributor-reward {
color: #a0aec0; color: #a0aec0;
font-size: 14px; font-size: 14px;
margin-top: 5px; margin-top: 5px;
} }
.contributor-date {
color: #a0aec0;
font-size: 12px;
}
.contributor-location {
color: #a0aec0;
font-size: 12px;
font-style: italic;
}
.contributor-comment:hover {
white-space: normal;
max-width: none;
}
.contributor-amount { .contributor-amount {
color: #ffd500; color: #ffd500;
font-weight: bold; font-weight: bold;
} }
.card h2 { .card h2 {
margin-top: 0; margin-top: 0;
color: white; color: white;
font-size: 18px; font-size: 18px;
} }
.value { .value {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
margin: 20px 0; margin: 20px 0;
color: #e3b505; /* Valeurs en jaune */ color: #e3b505;
/* Valeurs en jaune */
} }
.percentage { .percentage {
font-size: 24px; font-size: 24px;
color: #ffd500; /* Pourcentage en jaune vif */ color: #ffd500;
/* Pourcentage en jaune vif */
margin-bottom: 10px; margin-bottom: 10px;
} }
.goal { .goal {
color: #a0aec0; /* Texte gris clair pour la lisibilité */ color: #a0aec0;
/* Texte gris clair pour la lisibilité */
font-size: 14px; font-size: 14px;
} }
.config-panel { .config-panel {
background-color: #1a365d; /* Bleu plus foncé pour le panneau de configuration */ background-color: #1a365d;
/* Bleu plus foncé pour le panneau de configuration */
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding: 20px; padding: 20px;
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
} }
.campaign-title { .campaign-title {
font-size: 24px; font-size: 24px;
margin-bottom: 5px; margin-bottom: 5px;
color: #e3b505; color: #e3b505;
} }
.campaign-subtitle { .campaign-subtitle {
font-size: 16px; font-size: 16px;
color: #a0aec0; color: #a0aec0;
margin-bottom: 20px; margin-bottom: 20px;
} }
.loading { .loading {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
@@ -116,20 +203,25 @@
border-top-color: white; border-top-color: white;
animation: spin 1s ease-in-out infinite; animation: spin 1s ease-in-out infinite;
} }
@keyframes spin { @keyframes spin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.error { .error {
color: #ff6b6b; color: #ff6b6b;
margin-top: 10px; margin-top: 10px;
} }
.last-update { .last-update {
color: #a0aec0; /* Texte gris clair pour la lisibilité */ color: #a0aec0;
/* Texte gris clair pour la lisibilité */
font-size: 12px; font-size: 12px;
margin-top: 20px; margin-top: 20px;
} }
.progress-bar { .progress-bar {
background-color: #233876; background-color: #233876;
border-radius: 8px; border-radius: 8px;
@@ -138,12 +230,14 @@
margin: 15px 0; margin: 15px 0;
overflow: hidden; overflow: hidden;
} }
.progress-fill { .progress-fill {
background-color: #e3b505; background-color: #e3b505;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out;
} }
.source-tag { .source-tag {
display: inline-block; display: inline-block;
padding: 3px 8px; padding: 3px 8px;
@@ -152,15 +246,31 @@
margin-top: 10px; margin-top: 10px;
background-color: #4299e1; background-color: #4299e1;
} }
.api-tag { background-color: #48bb78; }
.script-tag { background-color: #4299e1; } .api-tag {
.html-tag { background-color: #ed8936; } background-color: #48bb78;
.demo-tag { background-color: #a0aec0; } }
.error-tag { background-color: #f56565; }
.script-tag {
background-color: #4299e1;
}
.html-tag {
background-color: #ed8936;
}
.demo-tag {
background-color: #a0aec0;
}
.error-tag {
background-color: #f56565;
}
.reward-list { .reward-list {
margin-top: 20px; margin-top: 20px;
} }
.reward-item { .reward-item {
padding: 15px; padding: 15px;
margin-bottom: 10px; margin-bottom: 10px;
@@ -168,12 +278,14 @@
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
} }
.reward-title { .reward-title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #e3b505; color: #e3b505;
margin-bottom: 10px; margin-bottom: 10px;
} }
.reward-price { .reward-price {
position: absolute; position: absolute;
top: 15px; top: 15px;
@@ -184,9 +296,11 @@
padding: 5px 10px; padding: 5px 10px;
border-radius: 20px; border-radius: 20px;
} }
.reward-description { .reward-description {
margin-bottom: 10px; margin-bottom: 10px;
} }
.reward-stats { .reward-stats {
font-size: 14px; font-size: 14px;
color: #a0aec0; color: #a0aec0;
@@ -194,11 +308,13 @@
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin-top: 10px;
} }
.reward-stat { .reward-stat {
background-color: #1a365d; background-color: #1a365d;
padding: 5px 10px; padding: 5px 10px;
border-radius: 4px; border-radius: 4px;
} }
.reward-progress { .reward-progress {
height: 8px; height: 8px;
background-color: #1a365d; background-color: #1a365d;
@@ -206,6 +322,7 @@
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
} }
.reward-progress-fill { .reward-progress-fill {
height: 100%; height: 100%;
background-color: #e3b505; background-color: #e3b505;
@@ -218,17 +335,21 @@
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
} }
.wide-card { .wide-card {
width: 100%; width: 100%;
} }
.contributors-list { .contributors-list {
width: 100%; width: 100%;
} }
.reward-price { .reward-price {
position: static; position: static;
display: inline-block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
} }
.reward-stats { .reward-stats {
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
@@ -236,17 +357,8 @@
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Suivi de Campagne Ulule</h1>
<div class="config-panel">
<div id="campaign-info">
<div class="loading"></div>
<p>Chargement des données de la campagne...</p>
</div>
<p id="error-message" class="error"></p>
</div>
<div class="dashboard"> <div class="dashboard">
<div class="card"> <div class="card">
<h2>Montant Collecté</h2> <h2>Montant Collecté</h2>
@@ -264,33 +376,34 @@
<div id="source-tag" class="source-tag">Source: --</div> <div id="source-tag" class="source-tag">Source: --</div>
</div> </div>
</div> </div>
<div class="card wide-card">
<h2>Récompenses</h2>
<div id="rewards-container">
<div class="loading"></div>
<p>Chargement des récompenses...</p>
</div>
</div>
<div class="card contributors-list">
<h2>Derniers contributeurs</h2>
<div id="contributors-container">
<div class="loading"></div>
<p>Chargement des contributeurs...</p>
</div>
</div>
<p class="last-update">Dernière mise à jour: <span id="last-update">--</span></p> <p class="last-update">Dernière mise à jour: <span id="last-update">--</span></p>
<div class="dashboard">
<div class="card contributors-list">
<h2>Derniers contributeurs</h2>
<div id="contributors-container">
<div class="loading"></div>
<p>Chargement des contributeurs...</p>
</div>
</div>
<div class="card wide-card">
<h2>Récompenses</h2>
<div id="rewards-container">
<div class="loading"></div>
<p>Chargement des récompenses...</p>
</div>
</div>
</div>
<script> <script>
// Définir l'URL de la campagne en dur // Définir l'URL de la campagne en dur
const PROJECT_SLUG = 'suppdonn-knights-of-water'; // Remplacer par le slug de votre campagne const PROJECT_SLUG = '199996'; // Utilisez votre numéro de projet
const REFRESH_INTERVAL = 60; // Intervalle de rafraîchissement en secondes const REFRESH_INTERVAL = 60; // Intervalle de rafraîchissement en secondes
// Éléments DOM // Éléments DOM
const errorMessage = document.getElementById('error-message'); const errorMessage = document.getElementById('error-message');
const campaignInfo = document.getElementById('campaign-info');
const amountElement = document.getElementById('amount'); const amountElement = document.getElementById('amount');
const percentageElement = document.getElementById('percentage'); const percentageElement = document.getElementById('percentage');
const progressFill = document.getElementById('progress-fill'); const progressFill = document.getElementById('progress-fill');
@@ -305,40 +418,40 @@
async function fetchProjectData(slug) { async function fetchProjectData(slug) {
try { try {
const response = await fetch(`/api/ulule/${slug}`); const response = await fetch(`/api/ulule/${slug}`);
if (!response.ok) { if (!response.ok) {
throw new Error(`Erreur API: ${response.status}`); throw new Error(`Erreur API: ${response.status}`);
} }
return await response.json(); return await response.json();
} catch (error) { } catch (error) {
throw new Error(`Impossible de récupérer les données du projet: ${error.message}`); throw new Error(`Impossible de récupérer les données du projet: ${error.message}`);
} }
} }
async function fetchRewards(slug) { async function fetchRewards(slug) {
try { try {
const response = await fetch(`/api/ulule/${slug}/rewards`); const response = await fetch(`/api/ulule/${slug}/rewards`);
if (!response.ok) { if (!response.ok) {
return { rewards: [] }; return { rewards: [] };
} }
return await response.json(); return await response.json();
} catch (error) { } catch (error) {
console.error("Erreur lors de la récupération des récompenses:", error); console.error("Erreur lors de la récupération des récompenses:", error);
return { rewards: [] }; return { rewards: [] };
} }
} }
async function fetchContributors(slug) { async function fetchContributors(slug) {
try { try {
const response = await fetch(`/api/ulule/${slug}/contributors`); const response = await fetch(`/api/ulule/${slug}/supporters`);
if (!response.ok) { if (!response.ok) {
return { contributors: [] }; return { contributors: [] };
} }
return await response.json(); return await response.json();
} catch (error) { } catch (error) {
console.error("Erreur lors de la récupération des contributeurs:", error); console.error("Erreur lors de la récupération des contributeurs:", error);
@@ -347,16 +460,6 @@
} }
function updateDashboard(data) { function updateDashboard(data) {
// Mettre à jour le titre de la campagne
document.title = `Suivi de ${data.name}`;
// Mettre à jour les informations de la campagne
let campaignHtml = `
<div class="campaign-title">${data.name}</div>
<div class="campaign-subtitle">Campagne Ulule en cours</div>
`;
campaignInfo.innerHTML = campaignHtml;
// Formater le montant avec l'espace comme séparateur de milliers // Formater le montant avec l'espace comme séparateur de milliers
const formatter = new Intl.NumberFormat('fr-FR', { const formatter = new Intl.NumberFormat('fr-FR', {
style: 'currency', style: 'currency',
@@ -368,14 +471,14 @@
const amountRaised = formatter.format(data.amount_raised); const amountRaised = formatter.format(data.amount_raised);
const goalAmount = formatter.format(data.goal); const goalAmount = formatter.format(data.goal);
const percentFunded = data.percent || (data.goal > 0 ? Math.round((data.amount_raised / data.goal) * 100) : 0); const percentFunded = data.percent || (data.goal > 0 ? Math.round((data.amount_raised / data.goal) * 100) : 0);
// Mettre à jour l'interface // Mettre à jour l'interface
amountElement.textContent = amountRaised; amountElement.textContent = amountRaised;
percentageElement.textContent = `${percentFunded}%`; percentageElement.textContent = `${percentFunded}%`;
progressFill.style.width = `${Math.min(percentFunded, 100)}%`; progressFill.style.width = `${Math.min(percentFunded, 100)}%`;
goalElement.textContent = `Objectif: ${goalAmount}`; goalElement.textContent = `Objectif: ${goalAmount}`;
supportersElement.textContent = data.supporters_count; supportersElement.textContent = data.supporters_count;
if (data.days_left > 0) { if (data.days_left > 0) {
daysLeftElement.textContent = `Jours restants: ${data.days_left}`; daysLeftElement.textContent = `Jours restants: ${data.days_left}`;
} else if (data.days_left === 0) { } else if (data.days_left === 0) {
@@ -383,39 +486,39 @@
} else { } else {
daysLeftElement.textContent = `Campagne terminée`; daysLeftElement.textContent = `Campagne terminée`;
} }
// Afficher la source des données // Afficher la source des données
sourceTag.textContent = `Source: ${data.source || 'inconnue'}`; sourceTag.textContent = `Source: ${data.source || 'inconnue'}`;
sourceTag.className = 'source-tag'; // Réinitialiser sourceTag.className = 'source-tag'; // Réinitialiser
if (data.source) { if (data.source) {
sourceTag.classList.add(`${data.source}-tag`); sourceTag.classList.add(`${data.source}-tag`);
} }
lastUpdateElement.textContent = new Date().toLocaleString('fr-FR'); lastUpdateElement.textContent = new Date().toLocaleString('fr-FR');
} }
function updateRewards(data) { function updateRewards(data) {
if (!data.rewards || data.rewards.length === 0) { if (!data.rewards || data.rewards.length === 0) {
rewardsContainer.innerHTML = '<p>Aucune récompense trouvée ou impossible de récupérer la liste.</p>'; rewardsContainer.innerHTML = '<p>Aucune récompense trouvée ou impossible de récupérer la liste.</p>';
return; return;
} }
const formatter = new Intl.NumberFormat('fr-FR', { const formatter = new Intl.NumberFormat('fr-FR', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
maximumFractionDigits: 0 maximumFractionDigits: 0
}); });
let html = '<div class="reward-list">'; let html = '<div class="reward-list">';
// Trier les récompenses par prix // Trier les récompenses par prix
const sortedRewards = [...data.rewards].sort((a, b) => a.price - b.price); const sortedRewards = [...data.rewards].sort((a, b) => a.price - b.price);
sortedRewards.forEach(reward => { sortedRewards.forEach(reward => {
// Calculer le pourcentage pour les récompenses limitées // Calculer le pourcentage pour les récompenses limitées
let percentTaken = 0; let percentTaken = 0;
let stockText = ""; let stockText = "";
if (reward.stock) { if (reward.stock) {
percentTaken = Math.round((reward.orders_count / reward.stock) * 100); percentTaken = Math.round((reward.orders_count / reward.stock) * 100);
const remaining = reward.stock_available || (reward.stock - reward.orders_count); const remaining = reward.stock_available || (reward.stock - reward.orders_count);
@@ -423,7 +526,7 @@
} else { } else {
stockText = `<span class="reward-stat">Stock illimité</span>`; stockText = `<span class="reward-stat">Stock illimité</span>`;
} }
html += ` html += `
<div class="reward-item"> <div class="reward-item">
<div class="reward-price">${formatter.format(reward.price)}</div> <div class="reward-price">${formatter.format(reward.price)}</div>
@@ -432,7 +535,6 @@
<div class="reward-stats"> <div class="reward-stats">
<span class="reward-stat">${reward.orders_count} contributeurs</span> <span class="reward-stat">${reward.orders_count} contributeurs</span>
${stockText} ${stockText}
<span class="reward-stat">Livraison: ${new Date(reward.date_delivery).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long' })}</span>
</div> </div>
${reward.stock ? ` ${reward.stock ? `
<div class="reward-progress"> <div class="reward-progress">
@@ -440,36 +542,55 @@
</div>` : ''} </div>` : ''}
</div>`; </div>`;
}); });
html += '</div>'; html += '</div>';
rewardsContainer.innerHTML = html; rewardsContainer.innerHTML = html;
} }
function updateContributors(data) { function updateContributors(data) {
if (!data.contributors || data.contributors.length === 0) { if (!data.contributors || data.contributors.length === 0) {
contributorsContainer.innerHTML = '<p>Aucun contributeur trouvé ou impossible de récupérer la liste.</p>'; contributorsContainer.innerHTML = '<p>Aucun contributeur trouvé ou impossible de récupérer la liste.</p>';
return; return;
} }
const formatter = new Intl.NumberFormat('fr-FR', { const formatter = new Intl.NumberFormat('fr-FR', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
maximumFractionDigits: 0 maximumFractionDigits: 0
}); });
let html = ''; let html = '';
data.contributors.forEach(contributor => { data.contributors.forEach(contributor => {
// Formater la date si elle existe
let dateStr = '';
if (contributor.date_joined) {
const date = new Date(contributor.date_joined);
dateStr = date.toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' });
}
const avatarUrl = contributor.avatar || 'https://s3-eu-west-1.amazonaws.com/com.ulule.assets/site/build/img/avatars/avatar-blue.png';
html += ` html += `
<div class="contributor-item"> <div class="contributor-item">
<div> <div class="contributor-details">
<div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div> <div class="contributor-info">
<div class="contributor-reward">${contributor.reward || 'Aucune contrepartie'}</div> <div class="contributor-profile">
<img class="contributor-avatar" src="${avatarUrl}" alt="${contributor.name}" />
<div>
<div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div>
${contributor.reward ? `<div class="contributor-reward">${contributor.reward}</div>` : ''}
${contributor.location ? `<div class="contributor-location">${contributor.location}</div>` : ''}
${dateStr ? `<div class="contributor-date">Depuis le ${dateStr}</div>` : ''}
</div>
</div> </div>
<div class="contributor-amount">${contributor.amount ? formatter.format(contributor.amount) : ''}</div> </div>
</div>`; ${contributor.amount ? `<div class="contributor-amount">${formatter.format(contributor.amount)}</div>` : ''}
</div>
${contributor.comment ? `<div class="contributor-comment">"${contributor.comment}"</div>` : ''}
</div>`;
}); });
contributorsContainer.innerHTML = html; contributorsContainer.innerHTML = html;
} }
@@ -479,18 +600,17 @@
// Récupérer les données du projet // Récupérer les données du projet
const projectData = await fetchProjectData(PROJECT_SLUG); const projectData = await fetchProjectData(PROJECT_SLUG);
updateDashboard(projectData); updateDashboard(projectData);
// Récupérer les récompenses // Récupérer les récompenses
const rewardsData = await fetchRewards(PROJECT_SLUG); const rewardsData = await fetchRewards(PROJECT_SLUG);
updateRewards(rewardsData); updateRewards(rewardsData);
// Récupérer les contributeurs // Récupérer les contributeurs
const contributorsData = await fetchContributors(PROJECT_SLUG); const contributorsData = await fetchContributors(PROJECT_SLUG);
updateContributors(contributorsData); updateContributors(contributorsData);
} catch (error) { } catch (error) {
errorMessage.textContent = error.message; errorMessage.textContent = error.message;
campaignInfo.innerHTML = "<p>Erreur lors du chargement des données</p>";
} }
} }
@@ -498,10 +618,11 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Chargement initial // Chargement initial
loadAllData(); loadAllData();
// Rafraîchissement automatique // Rafraîchissement automatique
setInterval(loadAllData, REFRESH_INTERVAL * 1000); setInterval(loadAllData, REFRESH_INTERVAL * 1000);
}); });
</script> </script>
</body> </body>
</html> </html>

88
server.js
View File

@@ -123,44 +123,94 @@ app.get('/api/ulule/:slug/rewards', async (req, res) => {
}); });
// Route pour récupérer les contributeurs d'une campagne // Route pour récupérer les contributeurs d'une campagne
app.get('/api/ulule/:slug/contributors', async (req, res) => { app.get('/api/ulule/:slug/supporters', async (req, res) => {
try { try {
const { slug } = req.params; const { slug } = req.params;
console.log(`Récupération des contributeurs pour la campagne: ${slug}`); console.log(`Récupération des contributeurs pour la campagne: ${slug}`);
// Pour les contributeurs, nous devons encore scraper la page car l'API publique ne fournit pas cette information // Utiliser l'API Ulule pour récupérer les contributeurs avec des champs supplémentaires
const htmlUrl = `https://fr.ulule.com/${slug}/supporters/`; const apiUrl = `https://api.ulule.com/v1/projects/${slug}/supporters?extra_fields=latest_project_order,latest_project_comment`;
console.log(`Tentative d'accès à l'API des supporters: ${apiUrl}`);
const response = await axios.get(htmlUrl, { const response = await axios.get(apiUrl, {
headers: { headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36', 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8', 'Accept': 'application/json',
'Accept-Language': 'fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3' 'Cache-Control': 'no-cache'
}, },
timeout: 10000 timeout: 10000
}); });
if (response.status === 200) { if (response.status === 200 && response.data && response.data.supporters) {
console.log(`Page des contributeurs récupérée, longueur: ${response.data.length}`); console.log(`${response.data.supporters.length} contributeurs récupérés`);
// Puisque le scraping est complexe et dépend de la structure HTML, // Formater les données des contributeurs
// nous allons simplement renvoyer des données de démonstration pour cet exemple const contributors = response.data.supporters.map(supporter => {
const contributors = [ // Récupérer le nom complet ou le nom d'utilisateur
{ name: "Contributeur 1", reward: "Pack Tour", amount: 40 }, let name = supporter.screenname || supporter.name || 'Contributeur anonyme';
{ name: "Contributeur 2", reward: "Pack Cavalier", amount: 26 },
{ name: "Contributeur 3", reward: "Pack Roi", amount: 75 }, // Extraire les informations de commande si disponibles
{ name: "Contributeur 4", reward: "Pack Tour", amount: 40 }, let reward = '';
{ name: "Contributeur 5", reward: "Pack Pion", amount: 6 } let amount = 0;
]; let comment = '';
if (supporter.latest_project_order && supporter.latest_project_order.items && supporter.latest_project_order.items.length > 0) {
// Récupérer la première récompense
const firstItem = supporter.latest_project_order.items[0];
amount = firstItem.line_total || firstItem.unit_price || 0;
// Récupérer le titre de la récompense
if (firstItem.reward && firstItem.reward.parent && firstItem.reward.parent.title) {
const titles = firstItem.reward.parent.title;
reward = titles.fr || titles.en || Object.values(titles)[0] || '';
// Si c'est une variante, ajouter sa description
if (firstItem.reward.description_fr) {
reward += ` (${firstItem.reward.description_fr})`;
}
}
// Ajouter un pourboire si présent
if (supporter.latest_project_order.tip && supporter.latest_project_order.tip > 0) {
amount += supporter.latest_project_order.tip;
}
}
// Récupérer le commentaire si disponible
if (supporter.latest_project_comment && supporter.latest_project_comment.comment) {
comment = supporter.latest_project_comment.comment;
}
return {
id: supporter.id,
name: name,
reward: reward,
amount: amount,
avatar: supporter.avatar ? (supporter.avatar['90'] || '') : '',
date_joined: supporter.date_joined,
comment: comment,
location: supporter.location || ''
};
});
return res.json({ contributors }); return res.json({ contributors });
} else { } else {
throw new Error(`Erreur lors de la récupération de la page des contributeurs: ${response.status}`); throw new Error(`Erreur lors de la récupération des contributeurs: ${response.status}`);
} }
} catch (error) { } catch (error) {
console.error('Erreur lors de la récupération des contributeurs:', error.message); console.error('Erreur lors de la récupération des contributeurs:', error.message);
return res.json({ contributors: [] });
// En cas d'erreur, renvoyer des données de démonstration
return res.json({
contributors: [
{ name: "Contributeur 1", reward: "Pack Tour", amount: 40, avatar: "", comment: "Super projet!" },
{ name: "Contributeur 2", reward: "Pack Cavalier", amount: 26, avatar: "", comment: "" },
{ name: "Contributeur 3", reward: "Pack Roi", amount: 75, avatar: "", comment: "J'adore!" },
{ name: "Contributeur 4", reward: "Pack Tour", amount: 40, avatar: "", comment: "" },
{ name: "Contributeur 5", reward: "Pack Pion", amount: 6, avatar: "", comment: "" }
]
});
} }
}); });