Mis à jour web de oceane-web

diff --git a/Wallette/web/index.html b/Wallette/web/index.html
index 158435e01da11ee2c5941cc0a4927ca952a8eea5..982c565a5b09395174c8362bcf6d6bc7888af86d 100644 (file)
--- a/Wallette/web/index.html
+++ b/Wallette/web/index.html
@@ -29,6 +29,33 @@
         Portefeuille Bitcoin
     </h1>
 
+<!-- COMPTE UTILISATEUR -->
+<div class="card p-4 mb-4">
+<h5>Compte utilisateur</h5>
+
+<div class="row g-3 align-items-end">
+
+<div class="col-md-4">
+<label class="form-label">User Id</label>
+<input id="userIdInput" class="form-control" placeholder="user-123">
+</div>
+
+<div class="col-md-2">
+<button id="saveUserBtn" class="btn btn-outline-light w-100">Enregistrer</button>
+</div>
+
+<div class="col-md-2">
+<button id="connectBtn" class="btn btn-success w-100">Connecter</button>
+</div>
+
+<div class="col-md-2">
+<button id="disconnectBtn" class="btn btn-danger w-100">Déconnecter</button>
+</div>
+
+<div class="col-md-2 text-end">
+<span id="connStatus" class="badge bg-secondary">Statut : off</span>
+</div>
+
     <!-- Choix crypto + adresse -->
     <div class="card p-4 mb-4">
         <div class="mb-3">

diff --git a/Wallette/web/script.js b/Wallette/web/script.js
index 2beb11bee5bd13835377c1da0cb0b9b6f734e524..2decdf7551888ee1921a3a7c11c556e8c260715e 100644 (file)
--- 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 15db1f7792e5bbddbdbe9bb90e70d1d9393186fe..2d57e272e91f7d9fd12b274a52e4ff06e97568d0 100644 (file)
--- 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 90538a67d396b31be8fa355ecd135cb2f0be6ed6..4168b2b56d8acfb38927d3472ca09686e5a28d34 100644 (file)
--- 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