💄Better UI & add supporters

2025-02-27 14:21:42 +01:00
parent 9008e944df
commit 5a14c59272
3 changed files with 150 additions and 66 deletions
--- a/public/backgound.png
+++ b/public/backgound.png
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Suivi de Campagne Ulule</title>
+    <title>Suppdonn, Knights of Water</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -12,7 +12,11 @@
            margin: 0 auto;
            padding: 20px;
            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;
        }
        h1 {
@@ -56,6 +60,18 @@
            align-items: center;
            justify-content: space-between;
        }
+        .contributor-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .contributor-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            object-fit: cover;
+            background-color: #3b557d;
+        }
        .contributor-name {
            font-weight: bold;
            color: #e3b505;
@@ -65,6 +81,30 @@
            font-size: 14px;
            margin-top: 5px;
        }
+        .contributor-date {
+            color: #a0aec0;
+            font-size: 12px;
+        }
+        .contributor-location {
+            color: #a0aec0;
+            font-size: 12px;
+            font-style: italic;
+        }
+        .contributor-comment {
+            color: #cbd5e0;
+            font-size: 13px;
+            margin-top: 5px;
+            font-style: italic;
+            line-height: 1.3;
+            max-width: none;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .contributor-comment:hover {
+            white-space: normal;
+            max-width: none;
+        }
        .contributor-amount {
            color: #ffd500;
            font-weight: bold;
@@ -237,16 +277,6 @@
    </style>
 </head>
 <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="card">
            <h2>Montant Collecté</h2>
@@ -264,33 +294,34 @@
            <div id="source-tag" class="source-tag">Source: --</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>

+    <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>
        // 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
        
        // Éléments DOM
        const errorMessage = document.getElementById('error-message');
-        const campaignInfo = document.getElementById('campaign-info');
        const amountElement = document.getElementById('amount');
        const percentageElement = document.getElementById('percentage');
        const progressFill = document.getElementById('progress-fill');
@@ -333,7 +364,7 @@
        
        async function fetchContributors(slug) {
            try {
-                const response = await fetch(`/api/ulule/${slug}/contributors`);
+                const response = await fetch(`/api/ulule/${slug}/supporters`);
                
                if (!response.ok) {
                    return { contributors: [] };
@@ -347,16 +378,6 @@
        }

        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
            const formatter = new Intl.NumberFormat('fr-FR', {
                style: 'currency',
@@ -432,7 +453,6 @@
                    <div class="reward-stats">
                        <span class="reward-stat">${reward.orders_count} contributeurs</span>
                        ${stockText}
-                        <span class="reward-stat">Livraison: ${new Date(reward.date_delivery).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long' })}</span>
                    </div>
                    ${reward.stock ? `
                    <div class="reward-progress">
@@ -460,13 +480,28 @@
            let html = '';
            
            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 += `
                <div class="contributor-item">
-                    <div>
-                        <div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div>
-                        <div class="contributor-reward">${contributor.reward || 'Aucune contrepartie'}</div>
+                    <div class="contributor-info">
+                        <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>` : ''}
+                            ${contributor.comment ? `<div class="contributor-comment">"${contributor.comment}"</div>` : ''}
+                        </div>
                    </div>
-                    <div class="contributor-amount">${contributor.amount ? formatter.format(contributor.amount) : ''}</div>
+                    ${contributor.amount ? `<div class="contributor-amount">${formatter.format(contributor.amount)}</div>` : ''}
                </div>`;
            });
            
@@ -490,7 +525,6 @@
                
            } catch (error) {
                errorMessage.textContent = error.message;
-                campaignInfo.innerHTML = "<p>Erreur lors du chargement des données</p>";
            }
        }

--- a/server.js
+++ b/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
-app.get('/api/ulule/:slug/contributors', async (req, res) => {
+app.get('/api/ulule/:slug/supporters', async (req, res) => {
  try {
    const { slug } = req.params;
    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
-    const htmlUrl = `https://fr.ulule.com/${slug}/supporters/`;
+    // Utiliser l'API Ulule pour récupérer les contributeurs avec des champs supplémentaires
+    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: {
        '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-Language': 'fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3'
+        'Accept': 'application/json',
+        'Cache-Control': 'no-cache'
      },
      timeout: 10000
    });
    
-    if (response.status === 200) {
-      console.log(`Page des contributeurs récupérée, longueur: ${response.data.length}`);
+    if (response.status === 200 && response.data && response.data.supporters) {
+      console.log(`${response.data.supporters.length} contributeurs récupérés`);
      
-      // Puisque le scraping est complexe et dépend de la structure HTML,
-      // nous allons simplement renvoyer des données de démonstration pour cet exemple
-      const contributors = [
-        { name: "Contributeur 1", reward: "Pack Tour", amount: 40 },
-        { name: "Contributeur 2", reward: "Pack Cavalier", amount: 26 },
-        { name: "Contributeur 3", reward: "Pack Roi", amount: 75 },
-        { name: "Contributeur 4", reward: "Pack Tour", amount: 40 },
-        { name: "Contributeur 5", reward: "Pack Pion", amount: 6 }
-      ];
+      // Formater les données des contributeurs
+      const contributors = response.data.supporters.map(supporter => {
+        // Récupérer le nom complet ou le nom d'utilisateur
+        let name = supporter.screenname || supporter.name || 'Contributeur anonyme';
+        
+        // Extraire les informations de commande si disponibles
+        let reward = '';
+        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 });
    } 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) {
    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: "" }
+      ]
+    });
  }
 });