Front + gestion des utilisateurs + affichage indice, tri et creation action
This commit is contained in:
+133
-38
@@ -19,16 +19,17 @@
|
|||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body
|
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
|
||||||
class="bg-slate-900 text-slate-100 min-h-screen flex flex-col justify-between"
|
|
||||||
>
|
|
||||||
<!-- =========================================================
|
<!-- =========================================================
|
||||||
HEADER
|
HEADER
|
||||||
========================================================= -->
|
========================================================= -->
|
||||||
|
|
||||||
<header
|
<header
|
||||||
class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl flex justify-between items-center"
|
class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
|
||||||
>
|
>
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center gap-5">
|
||||||
|
<!-- Logo -->
|
||||||
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<img
|
<img
|
||||||
src="../images/GFBlanc.png"
|
src="../images/GFBlanc.png"
|
||||||
@@ -37,20 +38,29 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<!-- Titre -->
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
<h1 class="text-xl font-bold text-white tracking-tight">
|
<h1 class="text-xl font-bold text-white tracking-tight">
|
||||||
Espace d'Administration
|
Espace d'Administration
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xs text-slate-400 mt-1">
|
||||||
|
Panneau de contrôle Giraud Finance
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Retour au site -->
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<a
|
<a
|
||||||
href="https://www.giraud-finance.com"
|
href="https://www.giraud-finance.com"
|
||||||
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
|
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center"
|
||||||
>
|
>
|
||||||
<span>← Retour au site</span>
|
<span>← Retour au site</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- =========================================================
|
<!-- =========================================================
|
||||||
@@ -90,7 +100,7 @@
|
|||||||
id="username"
|
id="username"
|
||||||
required
|
required
|
||||||
autocomplete="username"
|
autocomplete="username"
|
||||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
|
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
placeholder="Votre nom d'utilisateur"
|
placeholder="Votre nom d'utilisateur"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -110,7 +120,7 @@
|
|||||||
id="password"
|
id="password"
|
||||||
required
|
required
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
|
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
placeholder="••••••••"
|
placeholder="••••••••"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -146,66 +156,150 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
id="admin-dashboard"
|
id="admin-dashboard"
|
||||||
class="w-full max-w-4xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
|
class="w-full max-w-6xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
|
||||||
>
|
>
|
||||||
<!-- Entête dashboard -->
|
<!-- En-tête dashboard -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex justify-between items-center border-b border-slate-700 pb-4"
|
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-700 pb-5"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-lg font-bold text-white">Panneau de contrôle</h2>
|
<h2 class="text-lg font-bold text-white">Panneau de contrôle</h2>
|
||||||
|
|
||||||
<p id="welcome-user" class="text-xs text-slate-400">
|
<p id="welcome-user" class="text-xs text-slate-400 mt-1">
|
||||||
Bienvenue dans l'espace sécurisé Giraud Finance.
|
Bienvenue dans l'espace sécurisé Giraud Finance.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Déconnexion -->
|
||||||
|
|
||||||
<button
|
<button
|
||||||
id="btn-logout"
|
id="btn-logout"
|
||||||
type="button"
|
type="button"
|
||||||
class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all"
|
class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-rose-500/50"
|
||||||
>
|
>
|
||||||
Déconnexion
|
Déconnexion
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- =================================================
|
<!-- =================================================
|
||||||
BLOCS ADMINISTRATION
|
DEUX BOX COTE A COTE
|
||||||
================================================= -->
|
================================================= -->
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<!-- Gestion indices -->
|
<!-- =================================================
|
||||||
|
BOX INDICES & ACTIONS
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3"
|
class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
|
||||||
>
|
>
|
||||||
<h3 class="text-sm font-bold text-white">
|
<div>
|
||||||
|
<div
|
||||||
|
class="w-12 h-12 flex items-center justify-center rounded-xl bg-emerald-600/20 border border-emerald-500/30 mb-4"
|
||||||
|
>
|
||||||
|
<span class="text-2xl">📈</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-base font-bold text-white">
|
||||||
Gestion des Indices & Actions
|
Gestion des Indices & Actions
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="text-xs text-slate-400">
|
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
|
||||||
Paramétrez l'affichage des actions et le statut des indices.
|
Gérez les indices et les actions disponibles sur le site. Vous
|
||||||
|
pouvez notamment contrôler leur statut et leur affichage.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="mt-4 space-y-2">
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||||
|
Gestion des indices
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||||
|
Gestion des actions
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||||
|
Activation / désactivation
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||||
|
Affichage sur le site
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bouton -->
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="./tableindice.html"
|
||||||
|
class="mt-6 w-full inline-flex justify-center items-center bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-emerald-500"
|
||||||
|
>
|
||||||
|
Gérer les indices & actions
|
||||||
|
<span class="ml-2">→</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- =================================================
|
<!-- =================================================
|
||||||
SECURITE DU COMPTE
|
BOX SECURITE
|
||||||
================================================= -->
|
================================================= -->
|
||||||
|
|
||||||
<a
|
<div
|
||||||
href="/html/securite.html"
|
class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
|
||||||
id="btn-securite"
|
|
||||||
class="block bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3 hover:bg-slate-900 hover:border-emerald-500/50 transition-all"
|
|
||||||
>
|
>
|
||||||
<h3 class="text-sm font-bold text-white">Sécurité du Compte</h3>
|
<div>
|
||||||
|
<div
|
||||||
|
class="w-12 h-12 flex items-center justify-center rounded-xl bg-orange-600/20 border border-orange-500/30 mb-4"
|
||||||
|
>
|
||||||
|
<span class="text-2xl">🔐</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="text-xs text-slate-400">
|
<h3 class="text-base font-bold text-white">Sécurité du Compte</h3>
|
||||||
Gérer les utilisateurs et les mots de passe.
|
|
||||||
|
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
|
||||||
|
Gérez les utilisateurs autorisés à accéder à l'administration de
|
||||||
|
Giraud Finance.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="mt-4 space-y-2">
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
||||||
|
Gestion des utilisateurs
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
||||||
|
Création d'utilisateurs
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
||||||
|
Activation / désactivation
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center text-xs text-slate-400">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
||||||
|
Modification des mots de passe
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bouton -->
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="./securite.html"
|
||||||
|
class="mt-6 w-full inline-flex justify-center items-center bg-orange-600 hover:bg-orange-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-orange-500"
|
||||||
|
>
|
||||||
|
Gérer la sécurité
|
||||||
|
<span class="ml-2">→</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- =========================================================
|
<!-- =========================================================
|
||||||
@@ -219,7 +313,7 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- =========================================================
|
<!-- =========================================================
|
||||||
JAVASCRIPT
|
JAVASCRIPT AUTHENTIFICATION
|
||||||
========================================================= -->
|
========================================================= -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -228,21 +322,13 @@
|
|||||||
const API_LOGIN = "../php/api_login.php";
|
const API_LOGIN = "../php/api_login.php";
|
||||||
|
|
||||||
const formLogin = document.getElementById("form-login");
|
const formLogin = document.getElementById("form-login");
|
||||||
|
|
||||||
const loginBox = document.getElementById("login-box");
|
const loginBox = document.getElementById("login-box");
|
||||||
|
|
||||||
const adminDashboard = document.getElementById("admin-dashboard");
|
const adminDashboard = document.getElementById("admin-dashboard");
|
||||||
|
|
||||||
const loginError = document.getElementById("login-error");
|
const loginError = document.getElementById("login-error");
|
||||||
|
|
||||||
const btnLogin = document.getElementById("btn-login");
|
const btnLogin = document.getElementById("btn-login");
|
||||||
|
|
||||||
const btnLogout = document.getElementById("btn-logout");
|
const btnLogout = document.getElementById("btn-logout");
|
||||||
|
|
||||||
const username = document.getElementById("username");
|
const username = document.getElementById("username");
|
||||||
|
|
||||||
const password = document.getElementById("password");
|
const password = document.getElementById("password");
|
||||||
|
|
||||||
const welcomeUser = document.getElementById("welcome-user");
|
const welcomeUser = document.getElementById("welcome-user");
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -295,11 +381,18 @@
|
|||||||
|
|
||||||
credentials: "same-origin",
|
credentials: "same-origin",
|
||||||
|
|
||||||
|
cache: "no-store",
|
||||||
|
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
action: "check",
|
action: "check",
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
afficherLogin();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
if (data.status === "success" && data.authenticated === true) {
|
if (data.status === "success" && data.authenticated === true) {
|
||||||
@@ -367,7 +460,7 @@
|
|||||||
password.focus();
|
password.focus();
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error("Erreur connexion :", error);
|
||||||
|
|
||||||
loginError.textContent = "Erreur de connexion au serveur.";
|
loginError.textContent = "Erreur de connexion au serveur.";
|
||||||
|
|
||||||
@@ -401,7 +494,7 @@
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error("Erreur déconnexion :", error);
|
||||||
}
|
}
|
||||||
|
|
||||||
afficherLogin();
|
afficherLogin();
|
||||||
@@ -413,7 +506,9 @@
|
|||||||
* =========================================================
|
* =========================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
verifierSession();
|
verifierSession();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+49
-26
@@ -2,6 +2,7 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<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>Sécurité - Giraud Finance</title>
|
<title>Sécurité - Giraud Finance</title>
|
||||||
@@ -13,57 +14,55 @@
|
|||||||
href="../images/dollars.ico"
|
href="../images/dollars.ico"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Tailwind CSS -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
<!-- CSS général -->
|
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-slate-900 text-slate-100 min-h-screen">
|
<body class="bg-slate-900 text-slate-100 min-h-screen">
|
||||||
<div class="max-w-7xl mx-auto p-6">
|
<div class="max-w-7xl mx-auto p-6">
|
||||||
<!-- =====================================================
|
<!-- =====================================================
|
||||||
EN-TÊTE
|
HEADER
|
||||||
===================================================== -->
|
===================================================== -->
|
||||||
|
|
||||||
<div
|
<header
|
||||||
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl p-6 mb-6"
|
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl p-6 mb-6"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
|
class="flex flex-col md:flex-row justify-between items-center gap-5"
|
||||||
>
|
>
|
||||||
|
<!-- Logo -->
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img
|
||||||
|
src="../images/GFBlanc.png"
|
||||||
|
alt="Logo Giraud Finance"
|
||||||
|
class="h-12 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Titre -->
|
<!-- Titre -->
|
||||||
|
|
||||||
<div>
|
<div class="text-center">
|
||||||
<h1 class="text-2xl font-bold text-white">Sécurité</h1>
|
<h1 class="text-xl font-bold text-white tracking-tight">
|
||||||
|
Espace d'Administration
|
||||||
|
</h1>
|
||||||
|
|
||||||
<p class="text-sm text-slate-400 mt-1">Gestion des utilisateurs</p>
|
<p class="text-xs text-slate-400 mt-1">Sécurité du compte</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Boutons -->
|
<!-- Boutons -->
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<!-- Nouveau utilisateur -->
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="btnNouvelUtilisateur"
|
|
||||||
type="button"
|
|
||||||
class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
|
|
||||||
>
|
|
||||||
+ Nouvel utilisateur
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Retour au menu -->
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="./admin.html"
|
href="./admin.html"
|
||||||
class="bg-slate-700 hover:bg-slate-600 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-slate-600"
|
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600"
|
||||||
>
|
>
|
||||||
← Retour au menu
|
← Retour au menu
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<!-- =====================================================
|
<!-- =====================================================
|
||||||
MESSAGE
|
MESSAGE
|
||||||
@@ -81,10 +80,36 @@
|
|||||||
<div
|
<div
|
||||||
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"
|
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"
|
||||||
>
|
>
|
||||||
|
<!-- En-tête tableau -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-bold text-white">
|
||||||
|
Gestion des utilisateurs
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xs text-slate-400 mt-1">
|
||||||
|
Gestion des comptes administrateurs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nouveau utilisateur -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="btnNouvelUtilisateur"
|
||||||
|
type="button"
|
||||||
|
class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
|
||||||
|
>
|
||||||
|
+ Nouvel utilisateur
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tableau -->
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<!-- En-tête -->
|
|
||||||
|
|
||||||
<thead class="bg-slate-950 text-slate-300">
|
<thead class="bg-slate-950 text-slate-300">
|
||||||
<tr>
|
<tr>
|
||||||
<th
|
<th
|
||||||
@@ -119,8 +144,6 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<!-- Utilisateurs -->
|
|
||||||
|
|
||||||
<tbody
|
<tbody
|
||||||
id="listeUtilisateurs"
|
id="listeUtilisateurs"
|
||||||
class="divide-y divide-slate-700"
|
class="divide-y divide-slate-700"
|
||||||
|
|||||||
@@ -0,0 +1,454 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<title>Indices & Actions - Giraud Finance</title>
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="../images/dollars.ico"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- CSS général -->
|
||||||
|
<link rel="stylesheet" href="../css/style.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
|
||||||
|
<!-- =====================================================
|
||||||
|
HEADER
|
||||||
|
===================================================== -->
|
||||||
|
|
||||||
|
<header
|
||||||
|
class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center gap-5">
|
||||||
|
<!-- Logo -->
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img
|
||||||
|
src="../images/GFBlanc.png"
|
||||||
|
alt="Logo Giraud Finance"
|
||||||
|
class="h-12 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Titre -->
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="text-xl font-bold text-white tracking-tight">
|
||||||
|
Gestion des Indices & Actions
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xs text-slate-400 mt-1">
|
||||||
|
Panneau de contrôle Giraud Finance
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Retour -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="./admin.html"
|
||||||
|
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<span>← Retour au menu</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- =====================================================
|
||||||
|
CONTENU PRINCIPAL
|
||||||
|
===================================================== -->
|
||||||
|
|
||||||
|
<main class="flex-grow p-6">
|
||||||
|
<div
|
||||||
|
class="max-w-7xl mx-auto bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<!-- =================================================
|
||||||
|
ENTÊTE TABLEAU
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
|
||||||
|
>
|
||||||
|
<!-- Titre + compteur -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-bold text-white">Indices & Actions</h2>
|
||||||
|
|
||||||
|
<p id="compteur" class="text-xs text-slate-400 mt-1">
|
||||||
|
Chargement...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===============================================
|
||||||
|
FILTRE + NOUVEAU + ACTUALISER
|
||||||
|
=============================================== -->
|
||||||
|
|
||||||
|
<div class="flex flex-wrap items-center gap-3">
|
||||||
|
<!-- Filtre -->
|
||||||
|
|
||||||
|
<select
|
||||||
|
id="filtreIndice"
|
||||||
|
class="bg-slate-900 border border-slate-700 text-white text-xs rounded-xl px-4 py-2 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
|
>
|
||||||
|
<option value="tout">Tout</option>
|
||||||
|
|
||||||
|
<option value="afficher">Afficher</option>
|
||||||
|
|
||||||
|
<option value="inactif">Inactif</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Nouveau -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="btnNouveau"
|
||||||
|
type="button"
|
||||||
|
class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-emerald-500 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
+ Nouveau
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Actualiser -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="btnActualiser"
|
||||||
|
type="button"
|
||||||
|
class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-emerald-500 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
↻ Actualiser
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
MESSAGE
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="message"
|
||||||
|
class="hidden mx-6 mt-5 px-4 py-3 rounded-xl text-sm font-medium"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
TABLEAU
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full min-w-[1100px]">
|
||||||
|
<!-- =================================================
|
||||||
|
EN-TÊTE
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<thead class="bg-slate-950">
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
ID
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Indice
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Nom
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
ISIN
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Symbole
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Actif
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Afficher
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Mis à jour
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Créé le
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
CORPS
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<tbody
|
||||||
|
id="tableauIndices"
|
||||||
|
class="divide-y divide-slate-700"
|
||||||
|
></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- =====================================================
|
||||||
|
POPUP NOUVEL ENREGISTREMENT
|
||||||
|
===================================================== -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="modalNouvelEnregistrement"
|
||||||
|
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 backdrop-blur-sm p-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full max-w-2xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl"
|
||||||
|
>
|
||||||
|
<!-- =================================================
|
||||||
|
EN-TÊTE POPUP
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="px-6 py-5 border-b border-slate-700 flex justify-between items-center"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-bold text-white">Nouvel enregistrement</h2>
|
||||||
|
|
||||||
|
<p class="text-xs text-slate-400 mt-1">
|
||||||
|
Ajouter une nouvelle action ou un indice
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fermer -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="btnFermerModal"
|
||||||
|
type="button"
|
||||||
|
class="text-slate-400 hover:text-white text-2xl leading-none"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
FORMULAIRE
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<form id="formNouvelEnregistrement" class="p-6 space-y-5">
|
||||||
|
<!-- =================================================
|
||||||
|
INDICE
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="nouvelIndice"
|
||||||
|
class="block text-xs font-semibold text-slate-300 uppercase mb-2"
|
||||||
|
>
|
||||||
|
Indice
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nouvelIndice"
|
||||||
|
required
|
||||||
|
autocomplete="off"
|
||||||
|
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
|
placeholder="Exemple : CAC40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
NOM
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="nouveauNom"
|
||||||
|
class="block text-xs font-semibold text-slate-300 uppercase mb-2"
|
||||||
|
>
|
||||||
|
Nom
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nouveauNom"
|
||||||
|
required
|
||||||
|
autocomplete="off"
|
||||||
|
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
|
placeholder="Nom de l'action"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
ISIN + SYMBOLE
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<!-- ISIN -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="nouvelIsin"
|
||||||
|
class="block text-xs font-semibold text-slate-300 uppercase mb-2"
|
||||||
|
>
|
||||||
|
ISIN
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nouvelIsin"
|
||||||
|
required
|
||||||
|
maxlength="12"
|
||||||
|
autocomplete="off"
|
||||||
|
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white font-mono uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
|
placeholder="FR0000120404"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Symbole -->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="nouveauSymbole"
|
||||||
|
class="block text-xs font-semibold text-slate-300 uppercase mb-2"
|
||||||
|
>
|
||||||
|
Symbole
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nouveauSymbole"
|
||||||
|
required
|
||||||
|
autocomplete="off"
|
||||||
|
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||||
|
placeholder="AC"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
ACTIF + AFFICHER
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<!-- Actif -->
|
||||||
|
|
||||||
|
<label
|
||||||
|
class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-white">Actif</div>
|
||||||
|
|
||||||
|
<div class="text-xs text-slate-500">Action active</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="nouvelActif"
|
||||||
|
checked
|
||||||
|
class="w-5 h-5 accent-emerald-500"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Afficher -->
|
||||||
|
|
||||||
|
<label
|
||||||
|
class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-white">Afficher</div>
|
||||||
|
|
||||||
|
<div class="text-xs text-slate-500">Afficher sur le site</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="nouvelAfficher"
|
||||||
|
checked
|
||||||
|
class="w-5 h-5 accent-emerald-500"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
MESSAGE FORMULAIRE
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="messageNouveau"
|
||||||
|
class="hidden px-4 py-3 rounded-xl text-sm"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- =================================================
|
||||||
|
BOUTONS
|
||||||
|
================================================= -->
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3 pt-4 border-t border-slate-700">
|
||||||
|
<!-- Annuler -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="btnAnnuler"
|
||||||
|
type="button"
|
||||||
|
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-slate-600"
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Sauvegarder -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="btnSauvegarder"
|
||||||
|
type="submit"
|
||||||
|
class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-emerald-500"
|
||||||
|
>
|
||||||
|
Sauvegarder
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =====================================================
|
||||||
|
FOOTER
|
||||||
|
===================================================== -->
|
||||||
|
|
||||||
|
<footer
|
||||||
|
class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
|
||||||
|
>
|
||||||
|
Copyright Jean-Francois GIRAUD 2026
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- =====================================================
|
||||||
|
JAVASCRIPT
|
||||||
|
===================================================== -->
|
||||||
|
|
||||||
|
<script src="../js/tableindice.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+717
-487
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,824 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CONFIGURATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
const API_LIST_URL = "../php/api_list_full_table_indice.php";
|
||||||
|
const API_CREATE_URL = "../php/api_create_table_indice.php";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* ELEMENTS DOM
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
const tableauIndices = document.getElementById("tableauIndices");
|
||||||
|
const compteur = document.getElementById("compteur");
|
||||||
|
const message = document.getElementById("message");
|
||||||
|
|
||||||
|
const btnActualiser = document.getElementById("btnActualiser");
|
||||||
|
const btnNouveau = document.getElementById("btnNouveau");
|
||||||
|
const filtreIndice = document.getElementById("filtreIndice");
|
||||||
|
|
||||||
|
const modalNouvelEnregistrement = document.getElementById(
|
||||||
|
"modalNouvelEnregistrement",
|
||||||
|
);
|
||||||
|
|
||||||
|
const btnFermerModal = document.getElementById("btnFermerModal");
|
||||||
|
const btnAnnuler = document.getElementById("btnAnnuler");
|
||||||
|
|
||||||
|
const formNouvelEnregistrement = document.getElementById(
|
||||||
|
"formNouvelEnregistrement",
|
||||||
|
);
|
||||||
|
|
||||||
|
const nouvelIndice = document.getElementById("nouvelIndice");
|
||||||
|
const nouveauNom = document.getElementById("nouveauNom");
|
||||||
|
const nouvelIsin = document.getElementById("nouvelIsin");
|
||||||
|
const nouveauSymbole = document.getElementById("nouveauSymbole");
|
||||||
|
|
||||||
|
const nouvelActif = document.getElementById("nouvelActif");
|
||||||
|
const nouvelAfficher = document.getElementById("nouvelAfficher");
|
||||||
|
|
||||||
|
const messageNouveau = document.getElementById("messageNouveau");
|
||||||
|
const btnSauvegarder = document.getElementById("btnSauvegarder");
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* DONNEES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
let tousLesEnregistrements = [];
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* AFFICHER MESSAGE GENERAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function afficherMessage(texte, type = "info") {
|
||||||
|
message.textContent = texte;
|
||||||
|
|
||||||
|
message.classList.remove(
|
||||||
|
"hidden",
|
||||||
|
"bg-emerald-900/50",
|
||||||
|
"border-emerald-700",
|
||||||
|
"text-emerald-300",
|
||||||
|
"bg-rose-900/50",
|
||||||
|
"border-rose-700",
|
||||||
|
"text-rose-300",
|
||||||
|
"bg-slate-900",
|
||||||
|
"border-slate-700",
|
||||||
|
"text-slate-300",
|
||||||
|
);
|
||||||
|
|
||||||
|
message.classList.add("border");
|
||||||
|
|
||||||
|
if (type === "success") {
|
||||||
|
message.classList.add(
|
||||||
|
"bg-emerald-900/50",
|
||||||
|
"border-emerald-700",
|
||||||
|
"text-emerald-300",
|
||||||
|
);
|
||||||
|
} else if (type === "error") {
|
||||||
|
message.classList.add("bg-rose-900/50", "border-rose-700", "text-rose-300");
|
||||||
|
} else {
|
||||||
|
message.classList.add("bg-slate-900", "border-slate-700", "text-slate-300");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CACHER MESSAGE GENERAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function cacherMessage() {
|
||||||
|
message.classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* MESSAGE MODAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function afficherMessageNouveau(texte, type = "info") {
|
||||||
|
messageNouveau.textContent = texte;
|
||||||
|
|
||||||
|
messageNouveau.classList.remove(
|
||||||
|
"hidden",
|
||||||
|
"bg-emerald-900/50",
|
||||||
|
"border-emerald-700",
|
||||||
|
"text-emerald-300",
|
||||||
|
"bg-rose-900/50",
|
||||||
|
"border-rose-700",
|
||||||
|
"text-rose-300",
|
||||||
|
"bg-slate-900",
|
||||||
|
"border-slate-700",
|
||||||
|
"text-slate-300",
|
||||||
|
);
|
||||||
|
|
||||||
|
messageNouveau.classList.add("border");
|
||||||
|
|
||||||
|
if (type === "success") {
|
||||||
|
messageNouveau.classList.add(
|
||||||
|
"bg-emerald-900/50",
|
||||||
|
"border-emerald-700",
|
||||||
|
"text-emerald-300",
|
||||||
|
);
|
||||||
|
} else if (type === "error") {
|
||||||
|
messageNouveau.classList.add(
|
||||||
|
"bg-rose-900/50",
|
||||||
|
"border-rose-700",
|
||||||
|
"text-rose-300",
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
messageNouveau.classList.add(
|
||||||
|
"bg-slate-900",
|
||||||
|
"border-slate-700",
|
||||||
|
"text-slate-300",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CACHER MESSAGE MODAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function cacherMessageNouveau() {
|
||||||
|
messageNouveau.classList.add("hidden");
|
||||||
|
messageNouveau.textContent = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* ECHAPPER HTML
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function echapperHTML(valeur) {
|
||||||
|
if (valeur === null || valeur === undefined) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return String(valeur)
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CHECKBOX
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function creerCheckbox(valeur) {
|
||||||
|
const checked = Number(valeur) === 1 || valeur === true || valeur === "1";
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="flex justify-center items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
${checked ? "checked" : ""}
|
||||||
|
disabled
|
||||||
|
class="w-5 h-5
|
||||||
|
accent-emerald-500
|
||||||
|
cursor-not-allowed
|
||||||
|
opacity-90"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CREER UNE LIGNE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function creerLigne(enregistrement) {
|
||||||
|
return `
|
||||||
|
<tr class="hover:bg-slate-700/30 transition-colors">
|
||||||
|
|
||||||
|
<!-- ID -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-sm text-slate-500 whitespace-nowrap">
|
||||||
|
${echapperHTML(enregistrement.id)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Indice -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center
|
||||||
|
px-2.5 py-1
|
||||||
|
rounded-lg
|
||||||
|
bg-slate-700
|
||||||
|
border border-slate-600
|
||||||
|
text-xs font-semibold
|
||||||
|
text-slate-200"
|
||||||
|
>
|
||||||
|
${echapperHTML(enregistrement.indice)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Nom -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-sm font-medium text-white whitespace-nowrap">
|
||||||
|
${echapperHTML(enregistrement.nom)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- ISIN -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-sm text-slate-300 font-mono whitespace-nowrap">
|
||||||
|
${echapperHTML(enregistrement.isin)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Symbole -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-sm text-slate-300 font-semibold whitespace-nowrap">
|
||||||
|
${echapperHTML(enregistrement.symbole)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Actif -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-center">
|
||||||
|
${creerCheckbox(enregistrement.actif)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Afficher -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-center">
|
||||||
|
${creerCheckbox(enregistrement.afficher)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Updated -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-xs text-slate-400 whitespace-nowrap">
|
||||||
|
${echapperHTML(enregistrement.updated_at)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Created -->
|
||||||
|
|
||||||
|
<td class="px-4 py-3 text-xs text-slate-500 whitespace-nowrap">
|
||||||
|
${echapperHTML(enregistrement.created_at)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CONSTRUIRE LES FILTRES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function construireFiltres() {
|
||||||
|
const filtreActuel = filtreIndice.value;
|
||||||
|
|
||||||
|
const indices = [
|
||||||
|
...new Set(
|
||||||
|
tousLesEnregistrements
|
||||||
|
.map(function (enregistrement) {
|
||||||
|
return enregistrement.indice;
|
||||||
|
})
|
||||||
|
.filter(function (indice) {
|
||||||
|
return (
|
||||||
|
indice !== null &&
|
||||||
|
indice !== undefined &&
|
||||||
|
String(indice).trim() !== ""
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
indices.sort(function (a, b) {
|
||||||
|
return String(a).localeCompare(String(b), "fr", {
|
||||||
|
sensitivity: "base",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
filtreIndice.innerHTML = "";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Tout
|
||||||
|
*/
|
||||||
|
|
||||||
|
const optionTout = document.createElement("option");
|
||||||
|
|
||||||
|
optionTout.value = "tout";
|
||||||
|
optionTout.textContent = "Tout";
|
||||||
|
|
||||||
|
filtreIndice.appendChild(optionTout);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Afficher
|
||||||
|
*/
|
||||||
|
|
||||||
|
const optionAfficher = document.createElement("option");
|
||||||
|
|
||||||
|
optionAfficher.value = "afficher";
|
||||||
|
optionAfficher.textContent = "Afficher";
|
||||||
|
|
||||||
|
filtreIndice.appendChild(optionAfficher);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Inactif
|
||||||
|
*/
|
||||||
|
|
||||||
|
const optionInactif = document.createElement("option");
|
||||||
|
|
||||||
|
optionInactif.value = "inactif";
|
||||||
|
optionInactif.textContent = "Inactif";
|
||||||
|
|
||||||
|
filtreIndice.appendChild(optionInactif);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Indices
|
||||||
|
*/
|
||||||
|
|
||||||
|
indices.forEach(function (indice) {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
|
||||||
|
option.value = "indice:" + indice;
|
||||||
|
option.textContent = indice;
|
||||||
|
|
||||||
|
filtreIndice.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Restaurer le filtre
|
||||||
|
*/
|
||||||
|
|
||||||
|
const optionExiste = Array.from(filtreIndice.options).some(function (option) {
|
||||||
|
return option.value === filtreActuel;
|
||||||
|
});
|
||||||
|
|
||||||
|
filtreIndice.value = optionExiste ? filtreActuel : "tout";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* APPLIQUER LE FILTRE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function appliquerFiltre() {
|
||||||
|
const filtre = filtreIndice.value;
|
||||||
|
|
||||||
|
let enregistrementsFiltres;
|
||||||
|
|
||||||
|
if (filtre === "tout") {
|
||||||
|
enregistrementsFiltres = tousLesEnregistrements;
|
||||||
|
} else if (filtre === "afficher") {
|
||||||
|
enregistrementsFiltres = tousLesEnregistrements.filter(
|
||||||
|
function (enregistrement) {
|
||||||
|
return Number(enregistrement.afficher) === 1;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
} else if (filtre === "inactif") {
|
||||||
|
enregistrementsFiltres = tousLesEnregistrements.filter(
|
||||||
|
function (enregistrement) {
|
||||||
|
return Number(enregistrement.actif) === 0;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
} else if (filtre.startsWith("indice:")) {
|
||||||
|
const indiceRecherche = filtre.substring("indice:".length);
|
||||||
|
|
||||||
|
enregistrementsFiltres = tousLesEnregistrements.filter(
|
||||||
|
function (enregistrement) {
|
||||||
|
return (
|
||||||
|
String(enregistrement.indice).toLowerCase() ===
|
||||||
|
String(indiceRecherche).toLowerCase()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
enregistrementsFiltres = tousLesEnregistrements;
|
||||||
|
}
|
||||||
|
|
||||||
|
afficherDonneesFiltrees(enregistrementsFiltres);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* AFFICHER DONNEES FILTREES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function afficherDonneesFiltrees(enregistrements) {
|
||||||
|
tableauIndices.innerHTML = "";
|
||||||
|
|
||||||
|
if (!Array.isArray(enregistrements) || enregistrements.length === 0) {
|
||||||
|
compteur.textContent = "0 enregistrement";
|
||||||
|
|
||||||
|
tableauIndices.innerHTML = `
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colspan="9"
|
||||||
|
class="px-6 py-10 text-center text-sm text-slate-500"
|
||||||
|
>
|
||||||
|
Aucun enregistrement correspondant
|
||||||
|
au filtre sélectionné.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* IMPORTANT :
|
||||||
|
* tri systématique par ID croissant.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const donneesTriees = [...enregistrements].sort(function (a, b) {
|
||||||
|
return Number(a.id) - Number(b.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
let html = "";
|
||||||
|
|
||||||
|
donneesTriees.forEach(function (enregistrement) {
|
||||||
|
html += creerLigne(enregistrement);
|
||||||
|
});
|
||||||
|
|
||||||
|
tableauIndices.innerHTML = html;
|
||||||
|
|
||||||
|
compteur.textContent =
|
||||||
|
donneesTriees.length +
|
||||||
|
(donneesTriees.length > 1 ? " enregistrements" : " enregistrement");
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* AFFICHER DONNEES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function afficherDonnees(data) {
|
||||||
|
tousLesEnregistrements = Array.isArray(data) ? data : [];
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Tri global par ID croissant.
|
||||||
|
*/
|
||||||
|
|
||||||
|
tousLesEnregistrements.sort(function (a, b) {
|
||||||
|
return Number(a.id) - Number(b.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
construireFiltres();
|
||||||
|
|
||||||
|
appliquerFiltre();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CHARGER LES DONNEES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function chargerDonnees() {
|
||||||
|
btnActualiser.disabled = true;
|
||||||
|
|
||||||
|
btnActualiser.textContent = "↻ Chargement...";
|
||||||
|
|
||||||
|
afficherMessage("Chargement des indices et des actions...", "info");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(API_LIST_URL, {
|
||||||
|
method: "GET",
|
||||||
|
credentials: "same-origin",
|
||||||
|
cache: "no-store",
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Erreur HTTP " + response.status);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!result || result.status !== "success") {
|
||||||
|
throw new Error(
|
||||||
|
result && result.message
|
||||||
|
? result.message
|
||||||
|
: "L'API a retourné une erreur.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
afficherDonnees(result.data);
|
||||||
|
|
||||||
|
cacherMessage();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur chargement indices/actions :", error);
|
||||||
|
|
||||||
|
tableauIndices.innerHTML = `
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colspan="9"
|
||||||
|
class="px-6 py-10 text-center text-rose-400"
|
||||||
|
>
|
||||||
|
Impossible de charger les données.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
|
||||||
|
compteur.textContent = "Erreur de chargement";
|
||||||
|
|
||||||
|
afficherMessage(
|
||||||
|
"Erreur lors de la récupération des données : " + error.message,
|
||||||
|
"error",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
btnActualiser.disabled = false;
|
||||||
|
|
||||||
|
btnActualiser.textContent = "↻ Actualiser";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* OUVRIR MODAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function ouvrirModal() {
|
||||||
|
cacherMessageNouveau();
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Valeurs par défaut
|
||||||
|
*/
|
||||||
|
|
||||||
|
formNouvelEnregistrement.reset();
|
||||||
|
|
||||||
|
nouvelActif.checked = true;
|
||||||
|
nouvelAfficher.checked = true;
|
||||||
|
|
||||||
|
modalNouvelEnregistrement.classList.remove("hidden");
|
||||||
|
|
||||||
|
modalNouvelEnregistrement.classList.add("flex");
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Focus sur Indice
|
||||||
|
*/
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
nouvelIndice.focus();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* FERMER MODAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function fermerModal() {
|
||||||
|
modalNouvelEnregistrement.classList.add("hidden");
|
||||||
|
|
||||||
|
modalNouvelEnregistrement.classList.remove("flex");
|
||||||
|
|
||||||
|
cacherMessageNouveau();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* SAUVEGARDER NOUVEL ENREGISTREMENT
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function sauvegarderNouvelEnregistrement() {
|
||||||
|
const donnees = {
|
||||||
|
indice: nouvelIndice.value.trim(),
|
||||||
|
nom: nouveauNom.value.trim(),
|
||||||
|
isin: nouvelIsin.value.trim().toUpperCase(),
|
||||||
|
symbole: nouveauSymbole.value.trim().toUpperCase(),
|
||||||
|
actif: nouvelActif.checked ? 1 : 0,
|
||||||
|
afficher: nouvelAfficher.checked ? 1 : 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Validation côté client
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (!donnees.indice) {
|
||||||
|
afficherMessageNouveau("Le champ Indice est obligatoire.", "error");
|
||||||
|
|
||||||
|
nouvelIndice.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!donnees.nom) {
|
||||||
|
afficherMessageNouveau("Le champ Nom est obligatoire.", "error");
|
||||||
|
|
||||||
|
nouveauNom.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!donnees.isin) {
|
||||||
|
afficherMessageNouveau("Le champ ISIN est obligatoire.", "error");
|
||||||
|
|
||||||
|
nouvelIsin.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!donnees.symbole) {
|
||||||
|
afficherMessageNouveau("Le champ Symbole est obligatoire.", "error");
|
||||||
|
|
||||||
|
nouveauSymbole.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Désactivation du bouton
|
||||||
|
*/
|
||||||
|
|
||||||
|
btnSauvegarder.disabled = true;
|
||||||
|
|
||||||
|
btnSauvegarder.textContent = "Sauvegarde...";
|
||||||
|
|
||||||
|
cacherMessageNouveau();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(API_CREATE_URL, {
|
||||||
|
method: "POST",
|
||||||
|
|
||||||
|
credentials: "same-origin",
|
||||||
|
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
|
||||||
|
body: JSON.stringify(donnees),
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok || !result || result.status !== "success") {
|
||||||
|
throw new Error(
|
||||||
|
result && result.message
|
||||||
|
? result.message
|
||||||
|
: "Impossible de créer l'enregistrement.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Succès
|
||||||
|
*/
|
||||||
|
|
||||||
|
afficherMessageNouveau("Enregistrement créé avec succès.", "success");
|
||||||
|
|
||||||
|
/*
|
||||||
|
* On recharge la table.
|
||||||
|
*/
|
||||||
|
|
||||||
|
await chargerDonnees();
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Petite pause pour laisser voir
|
||||||
|
* le message de succès.
|
||||||
|
*/
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
fermerModal();
|
||||||
|
}, 500);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur création enregistrement :", error);
|
||||||
|
|
||||||
|
afficherMessageNouveau("Erreur : " + error.message, "error");
|
||||||
|
} finally {
|
||||||
|
btnSauvegarder.disabled = false;
|
||||||
|
|
||||||
|
btnSauvegarder.textContent = "Sauvegarder";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CHANGEMENT DE FILTRE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
filtreIndice.addEventListener("change", function () {
|
||||||
|
appliquerFiltre();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* BOUTON ACTUALISER
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
btnActualiser.addEventListener("click", function () {
|
||||||
|
chargerDonnees();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* BOUTON NOUVEAU
|
||||||
|
* ========================================================= */
|
||||||
|
|
||||||
|
btnNouveau.addEventListener("click", function () {
|
||||||
|
ouvrirModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* FERMETURE MODAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
btnFermerModal.addEventListener("click", function () {
|
||||||
|
fermerModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
btnAnnuler.addEventListener("click", function () {
|
||||||
|
fermerModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CLIC SUR LE FOND DU MODAL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
modalNouvelEnregistrement.addEventListener("click", function (event) {
|
||||||
|
if (event.target === modalNouvelEnregistrement) {
|
||||||
|
fermerModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* TOUCHE ESC
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.addEventListener("keydown", function (event) {
|
||||||
|
if (
|
||||||
|
event.key === "Escape" &&
|
||||||
|
!modalNouvelEnregistrement.classList.contains("hidden")
|
||||||
|
) {
|
||||||
|
fermerModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* SOUMISSION FORMULAIRE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
formNouvelEnregistrement.addEventListener("submit", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
sauvegarderNouvelEnregistrement();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* ISIN EN MAJUSCULES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
nouvelIsin.addEventListener("input", function () {
|
||||||
|
nouvelIsin.value = nouvelIsin.value.toUpperCase();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* SYMBOLE EN MAJUSCULES
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
nouveauSymbole.addEventListener("input", function () {
|
||||||
|
nouveauSymbole.value = nouveauSymbole.value.toUpperCase();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* INITIALISATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
chargerDonnees();
|
||||||
|
});
|
||||||
@@ -0,0 +1,385 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* API : CREATION D'UN ENREGISTREMENT DANS indice
|
||||||
|
* =========================================================
|
||||||
|
*
|
||||||
|
* Méthode :
|
||||||
|
* POST
|
||||||
|
*
|
||||||
|
* Content-Type :
|
||||||
|
* application/json
|
||||||
|
*
|
||||||
|
* Données attendues :
|
||||||
|
*
|
||||||
|
* {
|
||||||
|
* "indice": "CAC40",
|
||||||
|
* "nom": "Accor",
|
||||||
|
* "isin": "FR0000120404",
|
||||||
|
* "symbole": "AC",
|
||||||
|
* "actif": 1,
|
||||||
|
* "afficher": 1
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
require_once __DIR__ . '/database.php';
|
||||||
|
|
||||||
|
header(
|
||||||
|
'Content-Type: application/json; charset=utf-8'
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* FONCTION REPONSE JSON
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function reponseJson(
|
||||||
|
array $data,
|
||||||
|
int $httpCode = 200
|
||||||
|
): never {
|
||||||
|
|
||||||
|
http_response_code($httpCode);
|
||||||
|
|
||||||
|
echo json_encode(
|
||||||
|
$data,
|
||||||
|
JSON_UNESCAPED_UNICODE |
|
||||||
|
JSON_UNESCAPED_SLASHES
|
||||||
|
);
|
||||||
|
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* VERIFICATION METHODE HTTP
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Méthode HTTP non autorisée. Utilisez POST.'
|
||||||
|
],
|
||||||
|
405
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* LECTURE DU JSON
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$contenu = file_get_contents('php://input');
|
||||||
|
|
||||||
|
if ($contenu === false || trim($contenu) === '') {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Aucune donnée reçue.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = json_decode(
|
||||||
|
$contenu,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Vérification JSON
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (
|
||||||
|
!is_array($data) ||
|
||||||
|
json_last_error() !== JSON_ERROR_NONE
|
||||||
|
) {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Les données JSON sont invalides.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* RECUPERATION DES CHAMPS
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$indice = isset($data['indice'])
|
||||||
|
? trim((string) $data['indice'])
|
||||||
|
: '';
|
||||||
|
|
||||||
|
$nom = isset($data['nom'])
|
||||||
|
? trim((string) $data['nom'])
|
||||||
|
: '';
|
||||||
|
|
||||||
|
$isin = isset($data['isin'])
|
||||||
|
? strtoupper(trim((string) $data['isin']))
|
||||||
|
: '';
|
||||||
|
|
||||||
|
$symbole = isset($data['symbole'])
|
||||||
|
? strtoupper(trim((string) $data['symbole']))
|
||||||
|
: '';
|
||||||
|
|
||||||
|
$actif = isset($data['actif'])
|
||||||
|
? (int) $data['actif']
|
||||||
|
: 1;
|
||||||
|
|
||||||
|
$afficher = isset($data['afficher'])
|
||||||
|
? (int) $data['afficher']
|
||||||
|
: 1;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* VALIDATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($indice === '') {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Le champ indice est obligatoire.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($nom === '') {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Le champ nom est obligatoire.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($isin === '') {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Le champ ISIN est obligatoire.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($symbole === '') {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Le champ symbole est obligatoire.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* VALIDATION ISIN
|
||||||
|
* =========================================================
|
||||||
|
*
|
||||||
|
* Un ISIN comporte normalement 12 caractères.
|
||||||
|
*
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (strlen($isin) !== 12) {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Le code ISIN doit comporter exactement 12 caractères.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Vérification du format général :
|
||||||
|
*
|
||||||
|
* 2 lettres pays
|
||||||
|
* 9 caractères
|
||||||
|
* 1 chiffre de contrôle
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (
|
||||||
|
!preg_match(
|
||||||
|
'/^[A-Z]{2}[A-Z0-9]{9}[0-9]$/',
|
||||||
|
$isin
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Le format du code ISIN est invalide.'
|
||||||
|
],
|
||||||
|
400
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* NORMALISATION DES BOOLÉENS
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$actif = $actif === 1 ? 1 : 0;
|
||||||
|
|
||||||
|
$afficher = $afficher === 1 ? 1 : 0;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* INSERTION MYSQL
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
INSERT INTO indice
|
||||||
|
(
|
||||||
|
indice,
|
||||||
|
nom,
|
||||||
|
isin,
|
||||||
|
symbole,
|
||||||
|
actif,
|
||||||
|
afficher
|
||||||
|
)
|
||||||
|
VALUES
|
||||||
|
(
|
||||||
|
:indice,
|
||||||
|
:nom,
|
||||||
|
:isin,
|
||||||
|
:symbole,
|
||||||
|
:actif,
|
||||||
|
:afficher
|
||||||
|
)
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute(
|
||||||
|
[
|
||||||
|
':indice' => $indice,
|
||||||
|
':nom' => $nom,
|
||||||
|
':isin' => $isin,
|
||||||
|
':symbole' => $symbole,
|
||||||
|
':actif' => $actif,
|
||||||
|
':afficher' => $afficher
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ID créé
|
||||||
|
*/
|
||||||
|
|
||||||
|
$id = (int) $pdo->lastInsertId();
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* RELIRE L'ENREGISTREMENT CREE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$sqlLecture = "
|
||||||
|
SELECT
|
||||||
|
id,
|
||||||
|
indice,
|
||||||
|
nom,
|
||||||
|
isin,
|
||||||
|
symbole,
|
||||||
|
actif,
|
||||||
|
afficher,
|
||||||
|
updated_at,
|
||||||
|
created_at
|
||||||
|
FROM indice
|
||||||
|
WHERE id = :id
|
||||||
|
LIMIT 1
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmtLecture = $pdo->prepare(
|
||||||
|
$sqlLecture
|
||||||
|
);
|
||||||
|
|
||||||
|
$stmtLecture->execute(
|
||||||
|
[
|
||||||
|
':id' => $id
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
$enregistrement =
|
||||||
|
$stmtLecture->fetch();
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* REPONSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'success',
|
||||||
|
'message' => 'Enregistrement créé avec succès.',
|
||||||
|
'id' => $id,
|
||||||
|
'data' => $enregistrement
|
||||||
|
],
|
||||||
|
201
|
||||||
|
);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* GESTION ERREUR MYSQL
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
error_log(
|
||||||
|
'api_create_table_indice.php : ' .
|
||||||
|
$e->getMessage()
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Détection d'une contrainte UNIQUE
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ((int) $e->errorInfo[1] === 1062) {
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Cet enregistrement existe déjà.'
|
||||||
|
],
|
||||||
|
409
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
reponseJson(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Erreur lors de la création de l\'enregistrement.'
|
||||||
|
],
|
||||||
|
500
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* API : LECTURE COMPLETE DE LA TABLE indice
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
require_once __DIR__ . '/database.php';
|
||||||
|
|
||||||
|
header(
|
||||||
|
'Content-Type: application/json; charset=utf-8'
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Lecture de toute la table
|
||||||
|
*/
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
SELECT
|
||||||
|
id,
|
||||||
|
indice,
|
||||||
|
nom,
|
||||||
|
isin,
|
||||||
|
symbole,
|
||||||
|
actif,
|
||||||
|
afficher,
|
||||||
|
updated_at,
|
||||||
|
created_at
|
||||||
|
FROM indice
|
||||||
|
ORDER BY
|
||||||
|
indice ASC,
|
||||||
|
nom ASC
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
|
$data = $stmt->fetchAll();
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Réponse JSON
|
||||||
|
*/
|
||||||
|
|
||||||
|
echo json_encode(
|
||||||
|
[
|
||||||
|
'status' => 'success',
|
||||||
|
'count' => count($data),
|
||||||
|
'data' => $data
|
||||||
|
],
|
||||||
|
JSON_UNESCAPED_UNICODE |
|
||||||
|
JSON_UNESCAPED_SLASHES
|
||||||
|
);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Erreur MySQL
|
||||||
|
*/
|
||||||
|
|
||||||
|
http_response_code(500);
|
||||||
|
|
||||||
|
echo json_encode(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Erreur lors de la lecture de la table indice.'
|
||||||
|
],
|
||||||
|
JSON_UNESCAPED_UNICODE
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user