tout le front ok
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
+31
-48
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Suivi des Indices Boursiers</title>
|
<title>Suivi des Indices Boursiers</title>
|
||||||
|
<link rel="icon" type="image/ico" href="./images/dollars.ico" />
|
||||||
<!-- Inclusion de Tailwind CSS -->
|
<!-- Inclusion de Tailwind CSS -->
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<!-- Inclusion de votre fichier CSS externe -->
|
<!-- 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">
|
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col pb-40">
|
||||||
<!-- Contenu principal -->
|
<!-- Contenu principal -->
|
||||||
<main class="flex-grow max-w-7xl mx-auto p-6 space-y-8 w-full">
|
<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
|
<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>
|
<div class="grid grid-cols-3 items-center">
|
||||||
<h1 class="text-2xl font-bold tracking-tight text-white">
|
<!-- Colonne 1 : Logo à gauche -->
|
||||||
Tableau de Bord Boursier
|
<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>
|
</h1>
|
||||||
<p class="text-sm text-slate-400 mt-1">
|
<p class="text-slate-400 text-xs mt-1">
|
||||||
CAC 40, IBEX 35 & Dow Jones en temps réel
|
Suivi des cours, variations et analyses de vos portefeuilles et
|
||||||
|
indices financiers.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
|
<!-- Colonne 3 : Date à droite -->
|
||||||
|
<div class="flex items-center justify-end">
|
||||||
|
<span
|
||||||
id="statut"
|
id="statut"
|
||||||
class="text-xs px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-full text-slate-300"
|
class="text-xs text-slate-300 font-mono bg-slate-900/50 px-3 py-1 rounded-full border border-slate-700"
|
||||||
>
|
>
|
||||||
Chargement des données...
|
Dernière mise à jour : --:--:--
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Cartes de synthèse (Derniers cours) -->
|
<!-- Grille des 18 cartes (3 colonnes x 6 lignes) -->
|
||||||
<div id="cards-container" class="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
|
<div
|
||||||
class="p-6 border-b border-slate-700 flex justify-between items-center"
|
id="cards-container"
|
||||||
|
class="max-w-7xl mx-auto px-6 py-8 grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||||
>
|
>
|
||||||
<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 -->
|
<!-- Injecté dynamiquement par JavaScript -->
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer Fixe avec les 3 bandeaux défilants et le copyright -->
|
<!-- Footer Fixe avec les 3 bandeaux défilants et le copyright -->
|
||||||
@@ -84,7 +69,6 @@
|
|||||||
>
|
>
|
||||||
<!-- Bandeau CAC40 -->
|
<!-- Bandeau CAC40 -->
|
||||||
<div class="flex-1 relative overflow-hidden flex items-center">
|
<div class="flex-1 relative overflow-hidden flex items-center">
|
||||||
<!-- Étiquette fixe à gauche (Largeur fixe forcée) -->
|
|
||||||
<div
|
<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"
|
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"
|
style="width: 150px"
|
||||||
@@ -94,7 +78,6 @@
|
|||||||
>CAC40</span
|
>CAC40</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<!-- Zone de défilement (Padding gauche égal à la largeur de l'étiquette) -->
|
|
||||||
<div
|
<div
|
||||||
class="w-full h-full flex items-center overflow-hidden"
|
class="w-full h-full flex items-center overflow-hidden"
|
||||||
style="padding-left: 150px"
|
style="padding-left: 150px"
|
||||||
|
|||||||
+149
-92
@@ -1,108 +1,174 @@
|
|||||||
// Tableau global JavaScript pour stocker les données
|
// Tableaux globaux
|
||||||
let indicesData = [];
|
let configIndices = []; // Données issues de la table "indice"
|
||||||
|
let coursActionsData = []; // Données issues de la table "cours_actions"
|
||||||
|
|
||||||
function chargerDonnees() {
|
function chargerDonnees() {
|
||||||
// Appel de l'API située dans le dossier php/
|
// Chargement en parallèle des deux API
|
||||||
fetch("./php/api_indices.php")
|
Promise.all([
|
||||||
.then((response) => response.json())
|
fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
|
||||||
.then((result) => {
|
fetch("./php/api_indices.php").then((res) => res.json()),
|
||||||
if (result.status === "success") {
|
])
|
||||||
// Stockage dans le tableau global JS
|
.then(([configResult, coursResult]) => {
|
||||||
indicesData = result.data;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
// Mise à jour de tous les affichages
|
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();
|
afficherSyntheseCartes();
|
||||||
afficherTableauDetails();
|
|
||||||
alimenterBandeauxTicker();
|
alimenterBandeauxTicker();
|
||||||
|
|
||||||
// Mise à jour du statut
|
// Statut de rafraîchissement
|
||||||
document.getElementById("statut").innerText =
|
const statut = document.getElementById("statut");
|
||||||
`Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
if (statut) {
|
||||||
document.getElementById("counter").innerText =
|
statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
||||||
`${indicesData.length} enregistrements`;
|
|
||||||
} else {
|
|
||||||
console.error("Erreur API :", result.message);
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => console.error("Erreur réseau :", error));
|
.catch((error) =>
|
||||||
|
console.error("Erreur réseau lors du chargement des API :", error),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function afficherSyntheseCartes() {
|
function afficherSyntheseCartes() {
|
||||||
const container = document.getElementById("cards-container");
|
const container = document.getElementById("cards-container");
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
container.innerHTML = "";
|
container.innerHTML = "";
|
||||||
|
|
||||||
// Trouver les indices uniques présents dans le tableau
|
// CARTES : On se base STRICTEMENT sur le champ afficher == 1
|
||||||
const indicesUniques = [...new Set(indicesData.map((item) => item.indice))];
|
const actionsAffichees = configIndices.filter(
|
||||||
|
(item) => String(item.afficher) === "1" || item.afficher == 1,
|
||||||
|
);
|
||||||
|
|
||||||
indicesUniques.forEach((nomIndice) => {
|
if (actionsAffichees.length > 0) {
|
||||||
// Récupère le premier élément (le plus récent) pour cet indice
|
actionsAffichees.forEach((conf) => {
|
||||||
const dernier = indicesData.find((item) => item.indice === nomIndice);
|
// Croisement avec les cours en direct
|
||||||
if (!dernier) return;
|
const d =
|
||||||
|
coursActionsData.find(
|
||||||
|
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
||||||
|
) || {};
|
||||||
|
|
||||||
const isPositive = parseFloat(dernier.variation_pct) >= 0;
|
const ecartValeur = parseFloat(d.variation || 0);
|
||||||
const badgeColor = isPositive
|
const isPositive = ecartValeur >= 0;
|
||||||
? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
|
const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
: "bg-rose-500/10 text-rose-400 border-rose-500/20";
|
|
||||||
const sign = isPositive ? "+" : "";
|
const sign = isPositive ? "+" : "";
|
||||||
|
|
||||||
|
const volumeFormate = d.volume
|
||||||
|
? parseInt(d.volume).toLocaleString("fr-FR")
|
||||||
|
: "--";
|
||||||
|
|
||||||
container.innerHTML += `
|
container.innerHTML += `
|
||||||
<div class="bg-slate-800 p-6 rounded-2xl shadow-lg border border-slate-700 flex flex-col justify-between">
|
<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>
|
<div>
|
||||||
<div class="flex justify-between items-start">
|
<span class="text-[8px] text-slate-400 block uppercase">Haut</span>
|
||||||
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">${dernier.indice}</span>
|
<span class="text-[10px] font-semibold text-slate-200">${d.plus_haut ? parseFloat(d.plus_haut).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}</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>
|
</div>
|
||||||
<h3 class="text-xl font-bold text-white mt-2">${dernier.nom || dernier.indice}</h3>
|
<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 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>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
}
|
} else {
|
||||||
|
container.innerHTML = `
|
||||||
function afficherTableauDetails() {
|
<div class="col-span-3 text-center py-10 bg-slate-800/30 rounded-2xl border border-slate-800">
|
||||||
const tbody = document.getElementById("table-body");
|
<span class="text-slate-400 text-sm">Aucune action configurée à 'afficher = 1'.</span>
|
||||||
tbody.innerHTML = "";
|
</div>
|
||||||
|
|
||||||
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() {
|
function alimenterBandeauxTicker() {
|
||||||
const preparerDonneesTicker = (nomIndice) => {
|
const preparerDonneesTicker = (nomIndiceRecherche) => {
|
||||||
let liste = indicesData.filter((item) => item.indice === nomIndice);
|
const cleanSearch = nomIndiceRecherche
|
||||||
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
|
.toLowerCase();
|
||||||
|
|
||||||
// Tri alphabétique
|
// BANDEAUX : On prend l'intégralité des actions disponibles pour l'indice (via coursActionsData ou configIndices)
|
||||||
liste.sort((a, b) => {
|
let liste = coursActionsData.filter((item) => {
|
||||||
let valA = (a.nom || a.indice).toLowerCase();
|
if (!item.indice) return false;
|
||||||
let valB = (b.nom || b.indice).toLowerCase();
|
const cleanItemIndice = item.indice
|
||||||
return valA.localeCompare(valB);
|
.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"));
|
remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
|
||||||
@@ -112,46 +178,37 @@ function alimenterBandeauxTicker() {
|
|||||||
|
|
||||||
function remplirUnBandeau(elementId, donneesTriees) {
|
function remplirUnBandeau(elementId, donneesTriees) {
|
||||||
const container = document.getElementById(elementId);
|
const container = document.getElementById(elementId);
|
||||||
if (!container) {
|
if (!container) return;
|
||||||
console.error("Élément introuvable :", elementId);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (donneesTriees.length === 0) {
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let blocs = "";
|
let blocs = "";
|
||||||
donneesTriees.forEach((item) => {
|
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 colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
const sign = isPositive ? "+" : "";
|
const sign = isPositive ? "+" : "";
|
||||||
const nomAffichage = item.nom || item.indice;
|
const coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
|
||||||
const coursFormate = parseFloat(item.cours).toLocaleString("fr-FR");
|
minimumFractionDigits: 2,
|
||||||
const variationFormatee = parseFloat(item.variation_pct).toFixed(2);
|
});
|
||||||
|
const variationFormatee = parseFloat(item.variation_pct || 0).toFixed(2);
|
||||||
|
|
||||||
blocs += `
|
blocs += `
|
||||||
<div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80 whitespace-nowrap">
|
<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="font-bold text-white">${item.nom}</span>
|
||||||
<span class="text-slate-300">${coursFormate}</span>
|
<span class="text-slate-300">${coursFormate}</span>
|
||||||
<span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
|
<span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Duplication du contenu pour la boucle infinie fluide
|
container.innerHTML = blocs + blocs + blocs;
|
||||||
container.innerHTML = blocs + blocs;
|
const dureeTotale = Math.max(20, donneesTriees.length * 4);
|
||||||
|
|
||||||
// Vitesse uniforme et lente
|
|
||||||
const dureeParElement = 6;
|
|
||||||
const dureeTotale = Math.max(30, donneesTriees.length * dureeParElement);
|
|
||||||
|
|
||||||
container.style.animationDuration = `${dureeTotale}s`;
|
container.style.animationDuration = `${dureeTotale}s`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Lancer le chargement des données au démarrage de la page
|
// Démarrage
|
||||||
chargerDonnees();
|
chargerDonnees();
|
||||||
|
|
||||||
// Rafraîchir automatiquement toutes les 60 secondes
|
|
||||||
setInterval(chargerDonnees, 60000);
|
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()
|
||||||
|
]);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user