From a2abb6a130f171539d3936b2e4973711f5e38642 Mon Sep 17 00:00:00 2001 From: "[oceane]" <[e21497@eps-marche.be]> Date: Thu, 26 Feb 2026 21:27:38 +0100 Subject: [PATCH] =?utf8?q?Mis=20=C3=A0=20jour=20web=20de=20=20oceane-web?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- Wallette/web/index.html | 27 ++++++++++++++++++++ Wallette/web/script.js | 46 +++++++++++++++++++++++++++++++++++ Wallette/web/socketService.js | 10 ++++---- Wallette/web/styles.css | 33 +++++++++++++++++++++++++ 4 files changed, 111 insertions(+), 5 deletions(-) diff --git a/Wallette/web/index.html b/Wallette/web/index.html index 158435e..982c565 100644 --- a/Wallette/web/index.html +++ b/Wallette/web/index.html @@ -29,6 +29,33 @@ Portefeuille Bitcoin + +
+
Compte utilisateur
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+Statut : off +
+
diff --git a/Wallette/web/script.js b/Wallette/web/script.js index 2beb11b..2decdf7 100644 --- a/Wallette/web/script.js +++ b/Wallette/web/script.js @@ -20,7 +20,9 @@ onAlert(function(alert) { if (!list) return; const li = document.createElement('li'); + li.className = 'list-group-item bg-transparent text-white'; + // Si l'alerte est un objet, essaye d'afficher message et type if (typeof alert === 'object') { li.textContent = (alert.message ? alert.message : JSON.stringify(alert)); @@ -28,6 +30,50 @@ onAlert(function(alert) { li.textContent = String(alert); } + // 1) Supprimer "Aucune alerte" si présent + const placeholder = document.getElementById('noAlerts'); + if (placeholder) placeholder.remove(); + + // 2) Appliquer couleur selon BUY / SELL / HOLD + if (typeof alert === 'object' && alert.action) { + const action = alert.action.toUpperCase(); + if (action === 'BUY') li.classList.add('buy'); + else if (action === 'SELL') li.classList.add('sell'); + else li.classList.add('hold'); + } + + // 3) Mettre à jour le bloc signal (si présent) + if (typeof alert === 'object') { + const box = document.getElementById('signalBox'); + const actionEl = document.getElementById('signalAction'); + const critEl = document.getElementById('signalCriticality'); + const confEl = document.getElementById('signalConfidence'); + const reasonEl = document.getElementById('signalReason'); + + if (box && actionEl && critEl && confEl && reasonEl) { + const action = alert.action || 'HOLD'; + box.className = 'signal-box ' + action.toLowerCase(); + actionEl.textContent = action; + critEl.textContent = alert.alertLevel || 'INFO'; + confEl.textContent = + typeof alert.confidence === 'number' + ? Math.round(alert.confidence * 100) + '%' + : '—'; + reasonEl.textContent = alert.reason || alert.message || '—'; + } + } + + // 4) Notification popup simple (si container existe) + const popupContainer = document.getElementById('popupContainer'); + if (popupContainer) { + const pop = document.createElement('div'); + pop.className = 'notification-popup'; + pop.textContent = li.textContent; + popupContainer.appendChild(pop); + + setTimeout(() => pop.remove(), 6000); + } + // Préfixer pour voir les nouvelles alertes en haut list.prepend(li); }); diff --git a/Wallette/web/socketService.js b/Wallette/web/socketService.js index 15db1f7..2d57e27 100644 --- a/Wallette/web/socketService.js +++ b/Wallette/web/socketService.js @@ -15,7 +15,7 @@ import { io } from 'socket.io-client'; // L'adresse du serveur (à changer selon l'environnement) // En développement : localhost // En production : l'adresse du vrai serveur -const SERVER_URL = 'http://localhost:3003'; +const SERVER_URL = 'http://localhost:3000'; // ─────────────────────────────────────────────────────────── // VARIABLES @@ -31,13 +31,13 @@ let alertCallbacks = []; // FONCTION : Se connecter au serveur // ─────────────────────────────────────────────────────────── // Appelle cette fonction quand l'utilisateur se connecte à ton site -// +// // Paramètre : userId = l'identifiant de l'utilisateur connecté // // Exemple : connectToAlerts('user-123'); // ─────────────────────────────────────────────────────────── export function connectToAlerts(userId) { - + // Si déjà connecté, on ne fait rien if (socket !== null) { console.log('⚠️ Déjà connecté au serveur d\'alertes'); @@ -52,7 +52,7 @@ export function connectToAlerts(userId) { // ───────────────────────────────────────────────────── socket.on('connect', function() { console.log('✅ Connecté au serveur d\'alertes'); - + // IMPORTANT : On envoie notre userId au serveur // Pour qu'il sache qui on est et nous envoie NOS alertes socket.emit('auth', userId); @@ -70,7 +70,7 @@ export function connectToAlerts(userId) { // ───────────────────────────────────────────────────── socket.on('alert', function(alert) { console.log('🔔 ALERTE REÇUE :', alert); - + // On appelle toutes les fonctions enregistrées // (voir onAlert plus bas) alertCallbacks.forEach(function(callback) { diff --git a/Wallette/web/styles.css b/Wallette/web/styles.css index 90538a6..4168b2b 100644 --- a/Wallette/web/styles.css +++ b/Wallette/web/styles.css @@ -65,4 +65,37 @@ select.form-select { select.form-select option { background-color: #0f172a; color: white; +} + +.list-group-item { + background: transparent; + border-color: rgba(255,255,255,0.08); +} + +.list-group-item.buy { + background: rgba(22,163,74,0.12); + border-left: 4px solid #4ade80; +} + +.list-group-item.sell { + background: rgba(220,38,38,0.12); + border-left: 4px solid #f87171; +} + +.list-group-item.hold { + background: rgba(234,179,8,0.12); + border-left: 4px solid #fde047; +} + +.notification-popup { + background: rgba(15,23,42,0.95); + border-radius:10px; + padding:12px; + box-shadow:0 10px 25px rgba(0,0,0,0.4); + animation: slideIn .3s ease; +} + +@keyframes slideIn { + from { transform:translateY(20px); opacity:0; } + to { transform:translateY(0); opacity:1; } } \ No newline at end of file -- 2.50.1