tout le front ok

2026-08-20 11:14:25 +00:00
parent 5a67aa6e9c
commit 3711452c50
5 changed files with 228 additions and 160 deletions
@@ -4,6 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Suivi des Indices Boursiers</title>
+    <link rel="icon" type="image/ico" href="./images/dollars.ico" />
    <!-- Inclusion de Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Inclusion de votre fichier CSS externe -->
@@ -12,66 +13,50 @@
  <body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col pb-40">
    <!-- Contenu principal -->
    <main class="flex-grow max-w-7xl mx-auto p-6 space-y-8 w-full">
-      <!-- En-tête -->
+      <!-- En-tête avec cartouche de fond -->
      <header
-        class="flex flex-col sm:flex-row justify-between items-center bg-slate-800 p-6 rounded-2xl shadow-lg border border-slate-700 gap-4"
+        class="max-w-7xl mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
      >
-        <div>
-          <h1 class="text-2xl font-bold tracking-tight text-white">
-            Tableau de Bord Boursier
-          </h1>
-          <p class="text-sm text-slate-400 mt-1">
-            CAC 40, IBEX 35 & Dow Jones en temps réel
-          </p>
-        </div>
-        <div
-          id="statut"
-          class="text-xs px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-full text-slate-300"
-        >
-          Chargement des données...
+        <div class="grid grid-cols-3 items-center">
+          <!-- Colonne 1 : Logo à gauche -->
+          <div class="flex items-center justify-start">
+            <img
+              src="./images/GFBlanc.png"
+              alt="Logo Giraud Finance"
+              class="h-14 w-auto object-contain"
+            />
+          </div>
+
+          <!-- Colonne 2 : Titre et sous-titre centrés -->
+          <div class="text-center">
+            <h1 class="text-2xl font-extrabold text-white tracking-tight">
+              Tableau de bord boursier
+            </h1>
+            <p class="text-slate-400 text-xs mt-1">
+              Suivi des cours, variations et analyses de vos portefeuilles et
+              indices financiers.
+            </p>
+          </div>
+
+          <!-- Colonne 3 : Date à droite -->
+          <div class="flex items-center justify-end">
+            <span
+              id="statut"
+              class="text-xs text-slate-300 font-mono bg-slate-900/50 px-3 py-1 rounded-full border border-slate-700"
+            >
+              Dernière mise à jour : --:--:--
+            </span>
+          </div>
        </div>
      </header>

-      <!-- Cartes de synthèse (Derniers cours) -->
-      <div id="cards-container" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Grille des 18 cartes (3 colonnes x 6 lignes) -->
+      <div
+        id="cards-container"
+        class="max-w-7xl mx-auto px-6 py-8 grid grid-cols-1 md:grid-cols-3 gap-6"
+      >
        <!-- Injecté dynamiquement par JavaScript -->
      </div>
-
-      <!-- Tableau détaillé -->
-      <section
-        class="bg-slate-800 rounded-2xl shadow-lg border border-slate-700 overflow-hidden"
-      >
-        <div
-          class="p-6 border-b border-slate-700 flex justify-between items-center"
-        >
-          <h2 class="text-lg font-semibold text-white">
-            Historique récent des cotations
-          </h2>
-          <span
-            id="counter"
-            class="text-xs bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 px-3 py-1 rounded-full font-medium"
-            >0 enregistrements</span
-          >
-        </div>
-        <div class="overflow-x-auto">
-          <table class="w-full text-left border-collapse">
-            <thead>
-              <tr
-                class="bg-slate-900/50 text-slate-400 uppercase text-xs tracking-wider border-b border-slate-700"
-              >
-                <th class="p-4">Indice</th>
-                <th class="p-4">Nom</th>
-                <th class="p-4 text-right">Cours</th>
-                <th class="p-4 text-right">Variation (%)</th>
-                <th class="p-4 text-center">Date</th>
-              </tr>
-            </thead>
-            <tbody id="table-body" class="divide-y divide-slate-700/50 text-sm">
-              <!-- Injecté dynamiquement par JavaScript -->
-            </tbody>
-          </table>
-        </div>
-      </section>
    </main>

    <!-- Footer Fixe avec les 3 bandeaux défilants et le copyright -->
@@ -84,7 +69,6 @@
      >
        <!-- Bandeau CAC40 -->
        <div class="flex-1 relative overflow-hidden flex items-center">
-          <!-- Étiquette fixe à gauche (Largeur fixe forcée) -->
          <div
            class="absolute left-0 top-0 h-full bg-slate-900 border-r border-slate-700/80 flex items-center px-4 space-x-3 z-20 shadow-lg"
            style="width: 150px"
@@ -94,7 +78,6 @@
              >CAC40</span
            >
          </div>
-          <!-- Zone de défilement (Padding gauche égal à la largeur de l'étiquette) -->
          <div
            class="w-full h-full flex items-center overflow-hidden"
            style="padding-left: 150px"
@@ -1,108 +1,174 @@
-// Tableau global JavaScript pour stocker les données
-let indicesData = [];
+// Tableaux globaux
+let configIndices = []; // Données issues de la table "indice"
+let coursActionsData = []; // Données issues de la table "cours_actions"

 function chargerDonnees() {
-  // Appel de l'API située dans le dossier php/
-  fetch("./php/api_indices.php")
-    .then((response) => response.json())
-    .then((result) => {
-      if (result.status === "success") {
-        // Stockage dans le tableau global JS
-        indicesData = result.data;
-
-        // Mise à jour de tous les affichages
-        afficherSyntheseCartes();
-        afficherTableauDetails();
-        alimenterBandeauxTicker();
-
-        // Mise à jour du statut
-        document.getElementById("statut").innerText =
-          `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
-        document.getElementById("counter").innerText =
-          `${indicesData.length} enregistrements`;
+  // Chargement en parallèle des deux API
+  Promise.all([
+    fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
+    fetch("./php/api_indices.php").then((res) => res.json()),
+  ])
+    .then(([configResult, coursResult]) => {
+      if (configResult.status === "success") {
+        configIndices = configResult.data;
+        console.log(
+          "Configuration indices chargée :",
+          configIndices.length,
+          "éléments",
+        );
      } else {
-        console.error("Erreur API :", result.message);
+        console.error("Erreur API config indices :", configResult.message);
+      }
+
+      if (coursResult.status === "success") {
+        coursActionsData = coursResult.data;
+        console.log(
+          "Cours actions chargés :",
+          coursActionsData.length,
+          "éléments",
+        );
+      } else {
+        console.error("Erreur API cours_actions :", coursResult.message);
+      }
+
+      // Mise à jour des vues
+      afficherSyntheseCartes();
+      alimenterBandeauxTicker();
+
+      // Statut de rafraîchissement
+      const statut = document.getElementById("statut");
+      if (statut) {
+        statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
      }
    })
-    .catch((error) => console.error("Erreur réseau :", error));
+    .catch((error) =>
+      console.error("Erreur réseau lors du chargement des API :", error),
+    );
 }

 function afficherSyntheseCartes() {
  const container = document.getElementById("cards-container");
+  if (!container) return;
+
  container.innerHTML = "";

-  // Trouver les indices uniques présents dans le tableau
-  const indicesUniques = [...new Set(indicesData.map((item) => item.indice))];
+  // CARTES : On se base STRICTEMENT sur le champ afficher == 1
+  const actionsAffichees = configIndices.filter(
+    (item) => String(item.afficher) === "1" || item.afficher == 1,
+  );

-  indicesUniques.forEach((nomIndice) => {
-    // Récupère le premier élément (le plus récent) pour cet indice
-    const dernier = indicesData.find((item) => item.indice === nomIndice);
-    if (!dernier) return;
+  if (actionsAffichees.length > 0) {
+    actionsAffichees.forEach((conf) => {
+      // Croisement avec les cours en direct
+      const d =
+        coursActionsData.find(
+          (item) => item.symbole === conf.symbole || item.isin === conf.isin,
+        ) || {};

-    const isPositive = parseFloat(dernier.variation_pct) >= 0;
-    const badgeColor = isPositive
-      ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
-      : "bg-rose-500/10 text-rose-400 border-rose-500/20";
-    const sign = isPositive ? "+" : "";
+      const ecartValeur = parseFloat(d.variation || 0);
+      const isPositive = ecartValeur >= 0;
+      const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
+      const sign = isPositive ? "+" : "";

-    container.innerHTML += `
-            <div class="bg-slate-800 p-6 rounded-2xl shadow-lg border border-slate-700 flex flex-col justify-between">
-                <div>
-                    <div class="flex justify-between items-start">
-                        <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">${dernier.indice}</span>
-                        <span class="text-xs px-2.5 py-1 rounded-full border ${badgeColor} font-semibold">
-                            ${sign}${parseFloat(dernier.variation_pct).toFixed(2)}%
-                        </span>
-                    </div>
-                    <h3 class="text-xl font-bold text-white mt-2">${dernier.nom || dernier.indice}</h3>
+      const volumeFormate = d.volume
+        ? parseInt(d.volume).toLocaleString("fr-FR")
+        : "--";
+
+      container.innerHTML += `
+        <div class="bg-slate-800 p-4 rounded-2xl shadow-xl border border-slate-700 flex flex-col justify-between hover:border-slate-500 transition-all">
+            <!-- En-tête : Nom / Ticker / ISIN / Indice à gauche ET Cours / Variation / Date à droite -->
+            <div class="flex justify-between items-start mb-2">
+                <div class="max-w-[150px]">
+                    <h3 class="text-xs font-bold text-white leading-tight truncate" title="${conf.nom || conf.indice}">
+                        ${conf.nom || conf.indice} <span class="text-[11px] font-normal text-slate-400">(${conf.symbole || "N/A"})</span>
+                    </h3>
+                    <span class="text-[10px] text-slate-500 font-mono italic block mt-0.5">${conf.isin || "Aucun ISIN"}</span>
+                    <span class="text-[10px] font-semibold text-slate-400 uppercase tracking-wide block mt-0.5">${conf.indice || ""}</span>
                </div>
-                <div class="mt-6 flex items-baseline justify-between">
-                    <span class="text-2xl font-extrabold text-white">${parseFloat(dernier.cours).toLocaleString("fr-FR")}</span>
-                    <span class="text-xs text-slate-400">${dernier.date_cours}</span>
+
+                <div class="text-right">
+                    <div class="text-base font-extrabold text-white leading-tight">
+                        ${d.cours ? parseFloat(d.cours).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}
+                    </div>
+                    <div class="text-xs font-bold ${badgeColor} leading-tight mt-0.5">
+                        ${sign}${ecartValeur.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 4 })} 
+                        <span class="font-semibold">(${sign}${parseFloat(d.variation_pct || 0).toFixed(2)}%)</span>
+                    </div>
+                    <div class="text-[8px] text-slate-500 font-mono mt-0.5">
+                        ${d.date_cours || "--/--"}
+                    </div>
                </div>
            </div>
-        `;
-  });
-}

-function afficherTableauDetails() {
-  const tbody = document.getElementById("table-body");
-  tbody.innerHTML = "";
-
-  if (indicesData.length === 0) {
-    tbody.innerHTML = `<tr><td colspan="5" class="p-6 text-center text-slate-400">Aucune donnée disponible</td></tr>`;
-    return;
+            <!-- Bloc Infos : Haut / Bas / Volume -->
+            <div class="grid grid-cols-3 gap-1.5 bg-slate-900/50 p-1.5 rounded-xl border border-slate-700/50 text-center">
+                <div>
+                    <span class="text-[8px] text-slate-400 block uppercase">Haut</span>
+                    <span class="text-[10px] font-semibold text-slate-200">${d.plus_haut ? parseFloat(d.plus_haut).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}</span>
+                </div>
+                <div>
+                    <span class="text-[8px] text-slate-400 block uppercase">Bas</span>
+                    <span class="text-[10px] font-semibold text-slate-200">${d.plus_bas ? parseFloat(d.plus_bas).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}</span>
+                </div>
+                <div>
+                    <span class="text-[8px] text-slate-400 block uppercase">Volume</span>
+                    <span class="text-[10px] font-semibold text-slate-200">${volumeFormate}</span>
+                </div>
+            </div>
+        </div>
+      `;
+    });
+  } else {
+    container.innerHTML = `
+      <div class="col-span-3 text-center py-10 bg-slate-800/30 rounded-2xl border border-slate-800">
+          <span class="text-slate-400 text-sm">Aucune action configurée à 'afficher = 1'.</span>
+      </div>
+    `;
  }
-
-  indicesData.forEach((row) => {
-    const isPositive = parseFloat(row.variation_pct) >= 0;
-    const textColor = isPositive ? "text-emerald-400" : "text-rose-400";
-    const sign = isPositive ? "+" : "";
-
-    tbody.innerHTML += `
-            <tr class="hover:bg-slate-700/30 transition-colors">
-                <td class="p-4 font-semibold text-white">${row.indice}</td>
-                <td class="p-4 text-slate-300">${row.nom || "-"}</td>
-                <td class="p-4 text-right font-mono text-white">${parseFloat(row.cours).toLocaleString("fr-FR")}</td>
-                <td class="p-4 text-right font-mono font-semibold ${textColor}">${sign}${parseFloat(row.variation_pct).toFixed(2)}%</td>
-                <td class="p-4 text-center text-xs text-slate-400">${row.date_cours}</td>
-            </tr>
-        `;
-  });
 }

 function alimenterBandeauxTicker() {
-  const preparerDonneesTicker = (nomIndice) => {
-    let liste = indicesData.filter((item) => item.indice === nomIndice);
+  const preparerDonneesTicker = (nomIndiceRecherche) => {
+    const cleanSearch = nomIndiceRecherche
+      .replace(/[^a-z0-9]/gi, "")
+      .toLowerCase();

-    // Tri alphabétique
-    liste.sort((a, b) => {
-      let valA = (a.nom || a.indice).toLowerCase();
-      let valB = (b.nom || b.indice).toLowerCase();
-      return valA.localeCompare(valB);
+    // BANDEAUX : On prend l'intégralité des actions disponibles pour l'indice (via coursActionsData ou configIndices)
+    let liste = coursActionsData.filter((item) => {
+      if (!item.indice) return false;
+      const cleanItemIndice = item.indice
+        .replace(/[^a-z0-9]/gi, "")
+        .toLowerCase();
+      return cleanItemIndice === cleanSearch;
    });

-    return liste;
+    if (liste.length === 0) {
+      liste = configIndices.filter((item) => {
+        if (!item.indice) return false;
+        const cleanItemIndice = item.indice
+          .replace(/[^a-z0-9]/gi, "")
+          .toLowerCase();
+        return cleanItemIndice === cleanSearch;
+      });
+    }
+
+    // Fusion et formatage
+    let listeFinale = liste.map((conf) => {
+      let coursMatch =
+        coursActionsData.find(
+          (item) => item.symbole === conf.symbole || item.isin === conf.isin,
+        ) || conf;
+      return {
+        nom: conf.nom || coursMatch.nom || conf.symbole,
+        cours: coursMatch.cours || 0,
+        variation_pct: coursMatch.variation_pct || 0,
+      };
+    });
+
+    // Tri alphabétique
+    listeFinale.sort((a, b) => a.nom.localeCompare(b.nom));
+
+    return listeFinale;
  };

  remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
@@ -112,46 +178,37 @@ function alimenterBandeauxTicker() {

 function remplirUnBandeau(elementId, donneesTriees) {
  const container = document.getElementById(elementId);
-  if (!container) {
-    console.error("Élément introuvable :", elementId);
-    return;
-  }
+  if (!container) return;

  if (donneesTriees.length === 0) {
-    container.innerHTML = `<span class="px-4 text-slate-500">Aucune donnée disponible</span>`;
+    container.innerHTML = `<span class="px-4 text-slate-500 text-xs">Aucune donnée disponible</span>`;
    return;
  }

  let blocs = "";
  donneesTriees.forEach((item) => {
-    const isPositive = parseFloat(item.variation_pct) >= 0;
+    const isPositive = parseFloat(item.variation_pct || 0) >= 0;
    const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
    const sign = isPositive ? "+" : "";
-    const nomAffichage = item.nom || item.indice;
-    const coursFormate = parseFloat(item.cours).toLocaleString("fr-FR");
-    const variationFormatee = parseFloat(item.variation_pct).toFixed(2);
+    const coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
+      minimumFractionDigits: 2,
+    });
+    const variationFormatee = parseFloat(item.variation_pct || 0).toFixed(2);

    blocs += `
-            <div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80 whitespace-nowrap">
-                <span class="font-bold text-white">${nomAffichage}</span>
-                <span class="text-slate-300">${coursFormate}</span>
-                <span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
-            </div>
-        `;
+        <div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80 whitespace-nowrap">
+            <span class="font-bold text-white">${item.nom}</span>
+            <span class="text-slate-300">${coursFormate}</span>
+            <span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
+        </div>
+    `;
  });

-  // Duplication du contenu pour la boucle infinie fluide
-  container.innerHTML = blocs + blocs;
-
-  // Vitesse uniforme et lente
-  const dureeParElement = 6;
-  const dureeTotale = Math.max(30, donneesTriees.length * dureeParElement);
-
+  container.innerHTML = blocs + blocs + blocs;
+  const dureeTotale = Math.max(20, donneesTriees.length * 4);
  container.style.animationDuration = `${dureeTotale}s`;
 }

-// Lancer le chargement des données au démarrage de la page
+// Démarrage
 chargerDonnees();
-
-// Rafraîchir automatiquement toutes les 60 secondes
 setInterval(chargerDonnees, 60000);
@@ -0,0 +1,28 @@
+<?php
+header('Content-Type: application/json');
+
+// Paramètres de connexion à votre base de données GF
+$host = "localhost";
+$username = "root";
+$password = "sysadm-1963";
+$database = "GF";
+
+try {
+    $pdo = new PDO("mysql:host=$host;dbname=$database;charset=utf8mb4", $username, $password);
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    // Requête pour récupérer les actions configurées avec afficher = 1 dans la table indice
+    $stmt = $pdo->prepare("SELECT * FROM indice WHERE afficher = 1");
+    $stmt->execute();
+    $actionsConfig = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    echo json_encode([
+        "status" => "success",
+        "data" => $actionsConfig
+    ]);
+} catch (PDOException $e) {
+    echo json_encode([
+        "status" => "error",
+        "message" => $e->getMessage()
+    ]);
+}