GF/js/indices.js

// Tableaux globaux
let configIndices = []; // Données issues de la table "indice"
let coursActionsData = []; // Données issues de la table "cours_actions"

function chargerDonnees() {
  // 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 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 lors du chargement des API :", error),
    );
}

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

  container.innerHTML = "";

  // CARTES : On se base STRICTEMENT sur le champ afficher == 1
  const actionsAffichees = configIndices.filter(
    (item) => String(item.afficher) === "1" || item.afficher == 1,
  );

  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 ecartValeur = parseFloat(d.variation || 0);
      const isPositive = ecartValeur >= 0;
      const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
      const sign = isPositive ? "+" : "";

      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="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>

            <!-- 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>
    `;
  }
}

function alimenterBandeauxTicker() {
  const preparerDonneesTicker = (nomIndiceRecherche) => {
    const cleanSearch = nomIndiceRecherche
      .replace(/[^a-z0-9]/gi, "")
      .toLowerCase();

    // 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;
    });

    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"));
  remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
  remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
}

function remplirUnBandeau(elementId, donneesTriees) {
  const container = document.getElementById(elementId);
  if (!container) return;

  if (donneesTriees.length === 0) {
    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) >= 0;
    const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
    const sign = isPositive ? "+" : "";
    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">${item.nom}</span>
            <span class="text-slate-300">${coursFormate}</span>
            <span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
        </div>
    `;
  });

  container.innerHTML = blocs + blocs + blocs;
  const dureeTotale = Math.max(20, donneesTriees.length * 4);
  container.style.animationDuration = `${dureeTotale}s`;
}

// Démarrage
chargerDonnees();
setInterval(chargerDonnees, 60000);