💄Better UI & add supporters
This commit is contained in:
Victor Bodinaud
BIN
public/backgound.png
Normal file
BIN
public/backgound.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@@ -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,151 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.contributor-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.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-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-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 +198,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 +225,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 +241,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 +273,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 +291,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 +303,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 +317,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 +330,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 +352,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>
|
||||||
@@ -265,32 +372,33 @@
|
|||||||
</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');
|
||||||
@@ -333,7 +441,7 @@
|
|||||||
|
|
||||||
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: [] };
|
||||||
@@ -347,16 +455,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',
|
||||||
@@ -432,7 +530,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">
|
||||||
@@ -460,14 +557,33 @@
|
|||||||
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;
|
||||||
@@ -490,7 +606,6 @@
|
|||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
errorMessage.textContent = error.message;
|
errorMessage.textContent = error.message;
|
||||||
campaignInfo.innerHTML = "<p>Erreur lors du chargement des données</p>";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -504,4 +619,5 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
88
server.js
88
server.js
@@ -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: "" }
|
||||||
|
]
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user