Site Giraud-Finance V1.10
This commit is contained in:
+392
-42
@@ -1,16 +1,29 @@
|
|||||||
|
// =========================================================
|
||||||
// Tableaux globaux
|
// Tableaux globaux
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
let configIndices = []; // Données issues de la table "indice"
|
let configIndices = []; // Données issues de la table "indice"
|
||||||
let coursActionsData = []; // Données issues de la table "cours_actions"
|
let coursActionsData = []; // Données issues de la table "cours_actions"
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// CHARGEMENT DES DONNÉES
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function chargerDonnees() {
|
function chargerDonnees() {
|
||||||
// Chargement en parallèle des deux API
|
// Chargement en parallèle des deux API
|
||||||
Promise.all([
|
Promise.all([
|
||||||
fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
|
fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
|
||||||
fetch("./php/api_indices.php").then((res) => res.json()),
|
fetch("./php/api_indices.php").then((res) => res.json()),
|
||||||
])
|
])
|
||||||
|
|
||||||
.then(([configResult, coursResult]) => {
|
.then(([configResult, coursResult]) => {
|
||||||
|
// -----------------------------------------------------
|
||||||
|
// Configuration des indices
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
if (configResult.status === "success") {
|
if (configResult.status === "success") {
|
||||||
configIndices = configResult.data;
|
configIndices = configResult.data;
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
"Configuration indices chargée :",
|
"Configuration indices chargée :",
|
||||||
configIndices.length,
|
configIndices.length,
|
||||||
@@ -20,8 +33,13 @@ function chargerDonnees() {
|
|||||||
console.error("Erreur API config indices :", configResult.message);
|
console.error("Erreur API config indices :", configResult.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------
|
||||||
|
// Cours des actions
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
if (coursResult.status === "success") {
|
if (coursResult.status === "success") {
|
||||||
coursActionsData = coursResult.data;
|
coursActionsData = coursResult.data;
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
"Cours actions chargés :",
|
"Cours actions chargés :",
|
||||||
coursActionsData.length,
|
coursActionsData.length,
|
||||||
@@ -31,184 +49,516 @@ function chargerDonnees() {
|
|||||||
console.error("Erreur API cours_actions :", coursResult.message);
|
console.error("Erreur API cours_actions :", coursResult.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------
|
||||||
// Mise à jour des vues
|
// Mise à jour des vues
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
afficherSyntheseCartes();
|
afficherSyntheseCartes();
|
||||||
|
|
||||||
alimenterBandeauxTicker();
|
alimenterBandeauxTicker();
|
||||||
|
|
||||||
|
// -----------------------------------------------------
|
||||||
// Statut de rafraîchissement
|
// Statut de rafraîchissement
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
const statut = document.getElementById("statut");
|
const statut = document.getElementById("statut");
|
||||||
|
|
||||||
if (statut) {
|
if (statut) {
|
||||||
statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
|
||||||
console.error("Erreur réseau lors du chargement des API :", error),
|
.catch((error) => {
|
||||||
);
|
console.error("Erreur réseau lors du chargement des API :", error);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// AFFICHAGE DES CARTES
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function afficherSyntheseCartes() {
|
function afficherSyntheseCartes() {
|
||||||
const container = document.getElementById("cards-container");
|
const container = document.getElementById("cards-container");
|
||||||
|
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
container.innerHTML = "";
|
container.innerHTML = "";
|
||||||
|
|
||||||
// CARTES : On se base STRICTEMENT sur le champ afficher == 1
|
// -------------------------------------------------------
|
||||||
|
// On se base STRICTEMENT sur afficher == 1
|
||||||
|
// -------------------------------------------------------
|
||||||
|
|
||||||
const actionsAffichees = configIndices.filter(
|
const actionsAffichees = configIndices.filter(
|
||||||
(item) => String(item.afficher) === "1" || item.afficher == 1,
|
(item) => String(item.afficher) === "1" || item.afficher == 1,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (actionsAffichees.length > 0) {
|
if (actionsAffichees.length > 0) {
|
||||||
actionsAffichees.forEach((conf) => {
|
actionsAffichees.forEach((conf) => {
|
||||||
|
// ---------------------------------------------------
|
||||||
// Croisement avec les cours en direct
|
// Croisement avec les cours en direct
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
const d =
|
const d =
|
||||||
coursActionsData.find(
|
coursActionsData.find(
|
||||||
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
||||||
) || {};
|
) || {};
|
||||||
|
|
||||||
const ecartValeur = parseFloat(d.variation || 0);
|
const ecartValeur = parseFloat(d.variation || 0);
|
||||||
|
|
||||||
const isPositive = ecartValeur >= 0;
|
const isPositive = ecartValeur >= 0;
|
||||||
|
|
||||||
const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
|
const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
|
|
||||||
const sign = isPositive ? "+" : "";
|
const sign = isPositive ? "+" : "";
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
|
// Volume
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
const volumeFormate = d.volume
|
const volumeFormate = d.volume
|
||||||
? parseInt(d.volume).toLocaleString("fr-FR")
|
? parseInt(d.volume).toLocaleString("fr-FR")
|
||||||
: "--";
|
: "--";
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
|
// Carte
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
container.innerHTML += `
|
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
|
||||||
<div class="flex justify-between items-start mb-2">
|
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 -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex justify-between
|
||||||
|
items-start mb-2"
|
||||||
|
>
|
||||||
|
|
||||||
<div class="max-w-[150px]">
|
<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
|
||||||
|
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>
|
</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>
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Cours -->
|
||||||
|
|
||||||
<div class="text-right">
|
<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-base
|
||||||
<div class="text-xs font-bold ${badgeColor} leading-tight mt-0.5">
|
font-extrabold
|
||||||
${sign}${ecartValeur.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 4 })}
|
text-white
|
||||||
<span class="font-semibold">(${sign}${parseFloat(d.variation_pct || 0).toFixed(2)}%)</span>
|
leading-tight"
|
||||||
</div>
|
>
|
||||||
<div class="text-[8px] text-slate-500 font-mono mt-0.5">
|
|
||||||
${d.date_cours || "--/--"}
|
${
|
||||||
</div>
|
d.cours
|
||||||
</div>
|
? parseFloat(d.cours).toLocaleString("fr-FR", {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
: "--"
|
||||||
|
}
|
||||||
|
|
||||||
</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">
|
<!-- Variation -->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Date -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-[8px]
|
||||||
|
text-slate-500
|
||||||
|
font-mono
|
||||||
|
mt-0.5"
|
||||||
|
>
|
||||||
|
|
||||||
|
${d.date_cours || "--/--"}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="text-[8px] text-slate-400 block uppercase">Volume</span>
|
|
||||||
<span class="text-[10px] font-semibold text-slate-200">${volumeFormate}</span>
|
<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>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
container.innerHTML = `
|
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
|
||||||
|
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>
|
</div>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// PRÉPARATION DES BANDEAUX
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function alimenterBandeauxTicker() {
|
function alimenterBandeauxTicker() {
|
||||||
const preparerDonneesTicker = (nomIndiceRecherche) => {
|
const preparerDonneesTicker = (nomIndiceRecherche) => {
|
||||||
const cleanSearch = nomIndiceRecherche
|
const cleanSearch = nomIndiceRecherche
|
||||||
.replace(/[^a-z0-9]/gi, "")
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
.toLowerCase();
|
.toLowerCase();
|
||||||
|
|
||||||
// BANDEAUX : On prend l'intégralité des actions disponibles pour l'indice (via coursActionsData ou configIndices)
|
// ---------------------------------------------------
|
||||||
|
// Recherche dans coursActionsData
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
let liste = coursActionsData.filter((item) => {
|
let liste = coursActionsData.filter((item) => {
|
||||||
if (!item.indice) return false;
|
if (!item.indice) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
const cleanItemIndice = item.indice
|
const cleanItemIndice = item.indice
|
||||||
.replace(/[^a-z0-9]/gi, "")
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
.toLowerCase();
|
.toLowerCase();
|
||||||
|
|
||||||
return cleanItemIndice === cleanSearch;
|
return cleanItemIndice === cleanSearch;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
|
// Si aucune donnée, utiliser configIndices
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
if (liste.length === 0) {
|
if (liste.length === 0) {
|
||||||
liste = configIndices.filter((item) => {
|
liste = configIndices.filter((item) => {
|
||||||
if (!item.indice) return false;
|
if (!item.indice) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
const cleanItemIndice = item.indice
|
const cleanItemIndice = item.indice
|
||||||
.replace(/[^a-z0-9]/gi, "")
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
.toLowerCase();
|
.toLowerCase();
|
||||||
|
|
||||||
return cleanItemIndice === cleanSearch;
|
return cleanItemIndice === cleanSearch;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
// Fusion et formatage
|
// Fusion et formatage
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
let listeFinale = liste.map((conf) => {
|
let listeFinale = liste.map((conf) => {
|
||||||
let coursMatch =
|
const coursMatch =
|
||||||
coursActionsData.find(
|
coursActionsData.find(
|
||||||
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
||||||
) || conf;
|
) || conf;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
nom: conf.nom || coursMatch.nom || conf.symbole,
|
nom: conf.nom || coursMatch.nom || conf.symbole,
|
||||||
|
|
||||||
cours: coursMatch.cours || 0,
|
cours: coursMatch.cours || 0,
|
||||||
|
|
||||||
variation_pct: coursMatch.variation_pct || 0,
|
variation_pct: coursMatch.variation_pct || 0,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
// Tri alphabétique
|
// Tri alphabétique
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
listeFinale.sort((a, b) => a.nom.localeCompare(b.nom));
|
listeFinale.sort((a, b) => a.nom.localeCompare(b.nom));
|
||||||
|
|
||||||
return listeFinale;
|
return listeFinale;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// -------------------------------------------------------
|
||||||
|
// Remplissage des trois bandeaux
|
||||||
|
// -------------------------------------------------------
|
||||||
|
|
||||||
remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
|
remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
|
||||||
|
|
||||||
remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
|
remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
|
||||||
|
|
||||||
remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
|
remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// REMPLIR UN BANDEAU
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function remplirUnBandeau(elementId, donneesTriees) {
|
function remplirUnBandeau(elementId, donneesTriees) {
|
||||||
const container = document.getElementById(elementId);
|
const container = document.getElementById(elementId);
|
||||||
|
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
if (donneesTriees.length === 0) {
|
if (donneesTriees.length === 0) {
|
||||||
container.innerHTML = `<span class="px-4 text-slate-500 text-xs">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) >= 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 coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
|
const coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
|
||||||
minimumFractionDigits: 2,
|
minimumFractionDigits: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
const variationFormatee = parseFloat(item.variation_pct || 0).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">
|
|
||||||
<span class="font-bold text-white">${item.nom}</span>
|
<div
|
||||||
<span class="text-slate-300">${coursFormate}</span>
|
class="inline-flex
|
||||||
<span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
|
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>
|
</div>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Triple répétition pour assurer
|
||||||
|
// le défilement continu
|
||||||
|
|
||||||
container.innerHTML = blocs + blocs + blocs;
|
container.innerHTML = blocs + blocs + blocs;
|
||||||
|
|
||||||
const dureeTotale = Math.max(20, donneesTriees.length * 4);
|
const dureeTotale = Math.max(20, donneesTriees.length * 4);
|
||||||
|
|
||||||
container.style.animationDuration = `${dureeTotale}s`;
|
container.style.animationDuration = `${dureeTotale}s`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Démarrage
|
// =========================================================
|
||||||
|
// DÉMARRAGE
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
|
// Chargement initial
|
||||||
chargerDonnees();
|
chargerDonnees();
|
||||||
|
|
||||||
|
// Rafraîchissement toutes les 60 secondes
|
||||||
setInterval(chargerDonnees, 60000);
|
setInterval(chargerDonnees, 60000);
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// RACCOURCIS CLAVIER
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
// F1 → Administration
|
||||||
|
|
||||||
|
if (event.key === "F1") {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
window.location.href = "https://www.giraud-finance.com/html/admin.html";
|
||||||
|
}
|
||||||
|
|
||||||
|
// F2 → Site principal
|
||||||
|
|
||||||
|
if (event.key === "F2") {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
window.location.href = "https://giraud-finance.com";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user