first commit

js/indices.js

@@ -0,0 +1,152 @@
+// Tableau global JavaScript pour stocker les données
+let indicesData = [];
+
+function chargerDonnees() {
+  fetch("./php/api_indices.php")
+    .then((response) => response.json())
+    .then((result) => {
+      if (result.status === "success") {
+        indicesData = result.data;
+
+        // Mise à jour de l'affichage
+        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`;
+      } else {
+        console.error("Erreur API :", result.message);
+      }
+    })
+    .catch((error) => console.error("Erreur réseau :", error));
+}
+
+function afficherSyntheseCartes() {
+  const container = document.getElementById("cards-container");
+  container.innerHTML = "";
+
+  const indicesUniques = [...new Set(indicesData.map((item) => item.indice))];
+
+  indicesUniques.forEach((nomIndice) => {
+    const dernier = indicesData.find((item) => item.indice === nomIndice);
+    if (!dernier) return;
+
+    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 ? "+" : "";
+
+    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>
+                </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>
+            </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;
+  }
+
+  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() {
+  // Filtrer et trier par ordre alphabétique sur le champ 'nom' (ou 'indice' si 'nom' est vide)
+  const preparerDonneesTicker = (nomIndice) => {
+    let liste = indicesData.filter((item) => item.indice === nomIndice);
+
+    // 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);
+    });
+
+    return liste;
+  };
+
+  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">Aucune donnée disponible</span>`;
+    return;
+  }
+
+  let htmlContent = "";
+
+  // On génère une séquence d'éléments
+  const genererBlocs = () => {
+    let blocs = "";
+    donneesTriees.forEach((item) => {
+      const isPositive = parseFloat(item.variation_pct) >= 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);
+
+      blocs += `
+                <div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80">
+                    <span class="font-bold text-white">${nomAffichage}</span>
+                    <span class="text-slate-300">${coursFormate}</span>
+                    <span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
+                </div>
+            `;
+    });
+    return blocs;
+  };
+
+  // On duplique le contenu pour assurer un effet de défilement infini fluide sans saccade
+  htmlContent = genererBlocs() + genererBlocs();
+  container.innerHTML = htmlContent;
+}
+
+// Lancer au chargement initial
+chargerDonnees();
+
+// Rafraîchir automatiquement toutes les 60 secondes
+setInterval(chargerDonnees, 60000);