From 51e25dd5105445c6517dc68fc81d4110d06d14cd Mon Sep 17 00:00:00 2001
From: Victor Bodinaud <victor@allovoisins.com>
Date: Mon, 3 Mar 2025 10:41:07 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Enhancements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.yml                       |   4 +-
 public/{backgound.png => background.png} | Bin
 public/index.html                        | 101 ++++++++++++++++-------
 server.js                                |   3 +-
 4 files changed, 77 insertions(+), 31 deletions(-)
 rename public/{backgound.png => background.png} (100%)

diff --git a/docker-compose.yml b/docker-compose.yml
index d21ee93..0a14ca8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,4 +13,6 @@ services:
     environment:
       - PROJECT_SLUG=199996  # Remplacez par le slug de votre campagne
       - REFRESH_INTERVAL=10  # En secondes
-      - PORT=2106
\ No newline at end of file
+      - PORT=2106
+    networks:
+      - supabase_default
\ No newline at end of file
diff --git a/public/backgound.png b/public/background.png
similarity index 100%
rename from public/backgound.png
rename to public/background.png
diff --git a/public/index.html b/public/index.html
index 439423d..9ba3383 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,7 @@
             text-align: center;
             background-color: #2c5282;
             /* Couleur de secours si l'image ne charge pas */
-            background-image: url('background.png');
+            background-image: url('/background.png');
             background-position: center;
             background-size: cover;
             background-attachment: fixed;
@@ -35,18 +35,26 @@
         }
 
         .card {
-            background-color: #1a365d;
-            /* Bleu plus foncé pour les cartes */
+            background-color: rgba(26, 54, 93, 0.6);
+            /* Bleu foncé semi-transparent */
+            backdrop-filter: blur(10px);
+            /* Effet de flou */
+            -webkit-backdrop-filter: blur(10px);
+            /* Pour Safari */
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            /* Bordure légère */
             border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
             padding: 20px;
             margin: 10px;
             width: 280px;
-            transition: transform 0.3s ease;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
 
         .card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .wide-card {
@@ -54,6 +62,10 @@
             max-height: none;
             overflow: visible;
             text-align: left;
+            background-color: rgba(26, 54, 93, 0.6);
+            /* Même style que .card */
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
         }
 
         .contributor-info {
@@ -92,10 +104,9 @@
         /* Mis à jour la structure du contributeur-item pour mieux gérer l'espace */
         .contributor-item {
             padding: 10px;
-            border-bottom: 1px solid #2d4a7d;
+            border-bottom: 1px solid rgba(45, 74, 125, 0.5);
             display: flex;
             flex-direction: column;
-            /* Changé de row à column */
         }
 
         .contributor-details {
@@ -162,7 +173,7 @@
         }
 
         .goal {
-            color: #a0aec0;
+            color: white;
             /* Texte gris clair pour la lisibilité */
             font-size: 14px;
         }
@@ -269,9 +280,13 @@
         .reward-item {
             padding: 15px;
             margin-bottom: 10px;
-            background-color: #233876;
+            background-color: rgba(35, 56, 118, 0.6);
+            /* Légèrement plus foncé mais toujours transparent */
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
             border-radius: 8px;
             position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
 
         .reward-title {
@@ -369,26 +384,23 @@
             <div id="supporters" class="value">--</div>
             <div id="days-left" class="goal">Jours restants: --</div>
             <div id="source-tag" class="source-tag">Source: --</div>
+            <div class="last-update">Dernière mise à jour: <span id="last-update">--</span></div>
         </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 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 class="card wide-card">
+        <h2>Récompenses</h2>
+        <div id="rewards-container">
+            <div class="loading"></div>
+            <p>Chargement des récompenses...</p>
         </div>
     </div>
 
@@ -559,15 +571,14 @@
             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' });
+                if (contributor.date_ordered) {
+                    const date = new Date(contributor.date_ordered);
+                    dateStr = getRelativeDateStr(date);
                 }
 
                 let rewardName = '';
                 if (contributor.reward) {
                     rewardName = contributor.reward;
-                    console.log(rewardName);
                 }
 
                 const avatarUrl = contributor.avatar || 'https://s3-eu-west-1.amazonaws.com/com.ulule.assets/site/build/img/avatars/avatar-blue.png';
@@ -582,7 +593,7 @@
                             <div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div>
                             ${rewardName ? `<div class="contributor-reward">${rewardName}</div>` : ''}
                             ${contributor.location ? `<div class="contributor-location">${contributor.location}</div>` : ''}
-                            ${dateStr ? `<div class="contributor-date">Depuis le ${dateStr}</div>` : ''}
+                            ${dateStr ? `<div class="contributor-date">${dateStr}</div>` : ''}
                         </div>
                     </div>
                 </div>
@@ -595,6 +606,38 @@
             contributorsContainer.innerHTML = html;
         }
 
+        function getRelativeDateStr(dateToFormat) {
+            const now = new Date();
+            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            const yesterday = new Date(today);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const sixDaysAgo = new Date(today);
+            sixDaysAgo.setDate(sixDaysAgo.getDate() - 6);
+
+            const dateOnly = new Date(dateToFormat.getFullYear(), dateToFormat.getMonth(), dateToFormat.getDate());
+
+            // Pour comparer seulement les dates sans l'heure
+            if (dateOnly.getTime() === today.getTime()) {
+                return "Aujourd'hui" + " à " + dateToFormat.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+            } else if (dateOnly.getTime() === yesterday.getTime()) {
+                return "Hier" + " à " + dateToFormat.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+            } else if (dateOnly >= sixDaysAgo) {
+                // Si la date est dans les 6 derniers jours, afficher le nom du jour
+                const options = { weekday: 'long' };
+                return dateToFormat.toLocaleDateString('fr-FR', options) + " à " +
+                    dateToFormat.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+            } else {
+                // Sinon, afficher la date complète
+                return dateToFormat.toLocaleString('fr-FR', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            }
+        }
+
         // Fonction pour charger toutes les données
         async function loadAllData() {
             try {
diff --git a/server.js b/server.js
index 2d43400..904fc67 100644
--- a/server.js
+++ b/server.js
@@ -47,6 +47,7 @@ app.get('/api/ulule/:slug', async (req, res) => {
         goal: projectData.goal || 0,
         currency: projectData.currency || "EUR",
         supporters_count: projectData.supporters_count || 0,
+        orders_count: projectData.orders_count || 0,
         days_left: 0,
         percent: projectData.percent || 0,
         success: true,
@@ -199,7 +200,7 @@ app.get('/api/ulule/:slug/supporters', async (req, res) => {
           reward: reward,
           amount: amount,
           avatar: supporter.avatar ? (supporter.avatar['90'] || '') : '',
-          date_joined: supporter.date_joined,
+          date_ordered: supporter.latest_project_order.created_at || '',
           comment: comment,
           location: supporter.location || ''
         };