✨Enhancements

2025-03-03 10:41:07 +01:00
parent a2f80fce0c
commit 25b0a382c3
4 changed files with 81 additions and 31 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,4 +13,10 @@ services:
    environment:
      - PROJECT_SLUG=199996  # Remplacez par le slug de votre campagne
      - REFRESH_INTERVAL=10  # En secondes
-      - PORT=2106
+      - PORT=2106
+    networks:
+      - supabase_default
+
+networks:
+  supabase_default:
+    external: true
--- a/public/background.png
+++ b/public/background.png
--- 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 {
--- 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 || ''
        };