jfgiraud/bolsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: tout ok et popup centrées et modernes il ne reste plus que ordreJFG

Browse Source
This commit is contained in:
jfgiraud
2026-07-07 17:54:53 +00:00
parent 4df8cf495a
commit 3a5e8a70e2
3 changed files with 367 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/ordreGF.css
+185 -20
View File
@@ -156,26 +156,6 @@
background-color: #283593;
}
.ordregf-modal {
border: none;
border-radius: 8px;
padding: 20px;
background: #1c2030;
color: #fff;
}
.ordregf-modal input {
background: #13161f;
border: 1px solid #333;
color: white;
padding: 5px;
margin: 5px 0;
}
.modal-actions {
margin-top: 15px;
display: flex;
gap: 10px;
}
.ordregf-master-row {
background: linear-gradient(90deg, #001f3f, #004cff) !important;
color: #ffffff;
@@ -243,3 +223,188 @@ body {
box-sizing: border-box;
transition: background 0.2s ease;
}
/* ===========================
MODALES
=========================== */
.ordregf-modal {
width: 520px;
max-width: 92vw;
border: none;
border-radius: 18px;
background: #20263a;
color: white;
padding: 30px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
animation: popup 0.18s ease-out;
}
.ordregf-modal::backdrop {
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(5px);
}
@keyframes popup {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ordregf-modal h2 {
margin-top: 0;
margin-bottom: 25px;
text-align: center;
font-size: 24px;
font-weight: 600;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
.form-group label {
font-weight: 600;
color: #cfd8ff;
}
.ordregf-modal input,
.ordregf-modal select {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid #3b4668;
background: #151b2d;
color: white;
font-size: 15px;
outline: none;
transition: 0.25s;
}
.ordregf-modal input:focus,
.ordregf-modal select:focus {
border-color: #4d84ff;
box-shadow: 0 0 0 3px rgba(77, 132, 255, 0.25);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 28px;
}
.modal-actions button {
border: none;
padding: 11px 22px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.modal-actions button:first-child {
background: #444b63;
color: white;
}
.modal-actions button:first-child:hover {
background: #59617c;
}
.modal-actions button:last-child {
background: #2dbf5a;
color: white;
}
.modal-actions button:last-child:hover {
background: #27a84f;
}
.form-group .triple {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
#btnRechercher {
margin-top: 10px;
width: 100%;
padding: 12px;
border: none;
border-radius: 10px;
background: #2962ff;
color: white;
font-weight: 600;
cursor: pointer;
}
#btnRechercher:hover {
background: #1d4ed8;
}
dialog.ordregf-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: 520px;
max-width: 90vw;
border: none;
border-radius: 18px;
padding: 30px;
background: #20263a;
color: white;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}
dialog.ordregf-modal::backdrop {
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(5px);
}
js/ordreGF.js
+132 -26
View File
@@ -1,47 +1,108 @@
document.addEventListener("DOMContentLoaded", () => {
// --- 1. GESTION DES MODALS ET FORMULAIRES ---
// =====================================================
// OUTILS MODALES
// =====================================================
function openModal(modal) {
if (!modal) return;
modal.showModal();
// Force le centrage avec le CSS dialog
modal.style.transform = "translate(-50%, -50%)";
}
function closeModal(modal) {
if (!modal) return;
modal.close();
modal.style.transform = "";
}
// Fermeture par clic en dehors de la fenêtre
document.querySelectorAll("dialog").forEach((dialog) => {
dialog.addEventListener("click", (e) => {
const rect = dialog.getBoundingClientRect();
const inside =
e.clientX >= rect.left &&
e.clientX <= rect.right &&
e.clientY >= rect.top &&
e.clientY <= rect.bottom;
if (!inside) {
closeModal(dialog);
}
});
});
// =====================================================
// MODAL CREATION ORDRE
// =====================================================
// Modal Créer Ordre
const modalCreerOrdre = document.getElementById("modalCreerOrdre");
const btnCreer = document.querySelector(".ordregf-btn-creer");
if (modalCreerOrdre && btnCreer) {
btnCreer.addEventListener("click", () => modalCreerOrdre.showModal());
btnCreer.addEventListener("click", () => {
openModal(modalCreerOrdre);
});
document.getElementById("btnAnnuler")?.addEventListener("click", () => {
document.getElementById("formCreerOrdre").reset();
modalCreerOrdre.close();
document.getElementById("btnValider").disabled = true;
document.getElementById("formCreerOrdre")?.reset();
closeModal(modalCreerOrdre);
const btnValider = document.getElementById("btnValider");
if (btnValider) {
btnValider.disabled = true;
}
});
}
// Recherche Action
// =====================================================
// RECHERCHE ACTION
// =====================================================
const btnRechercher = document.getElementById("btnRechercher");
btnRechercher?.addEventListener("click", async () => {
const isin = document.getElementById("isinRecherche").value;
if (!isin) return alert("Veuillez entrer un code ISIN");
if (!isin) {
alert("Veuillez entrer un code ISIN");
return;
}
const response = await fetch(
`/php/api_rechercher_action.php?isin=${encodeURIComponent(isin)}`,
);
const data = await response.json();
if (data.success) {
document.getElementById("Nom").value = data.company_name;
document.getElementById("ticker").value = data.ticker;
document.getElementById("code_yahoo").value = data.yahoo_code;
document.getElementById("btnValider").disabled = false;
} else {
alert("Action non trouvée");
}
});
// Enregistrement Ordre
// =====================================================
// ENREGISTREMENT ORDRE
// =====================================================
document
.getElementById("formCreerOrdre")
?.addEventListener("submit", async (e) => {
e.preventDefault();
// FormData récupère automatiquement tous les champs ayant un attribut "name"
const formData = new FormData(e.target);
const response = await fetch("/php/api_enregistrer_ordre.php", {
@@ -50,6 +111,7 @@ document.addEventListener("DOMContentLoaded", () => {
});
const result = await response.json();
if (result.success) {
location.reload();
} else {
@@ -60,43 +122,64 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
// Enregistrement Detail
// =====================================================
// ENREGISTREMENT DETAIL
// =====================================================
document
.getElementById("formCreerDetail")
?.addEventListener("submit", async (e) => {
e.preventDefault();
const response = await fetch("/php/api_enregistrer_detail.php", {
method: "POST",
body: new FormData(e.target),
});
const result = await response.json();
if (result.success) location.reload();
else
if (result.success) {
location.reload();
} else {
alert(
"Erreur lors de l'enregistrement du détail : " +
(result.message || ""),
);
}
});
// --- 2. GESTION MODIFICATION (DÉLÉGATION D'ÉVÉNEMENT) ---
// =====================================================
// MODIFICATION DETAIL
// =====================================================
document.addEventListener("click", (e) => {
const button = e.target.closest(".ordregf-btn-modifier-petit");
if (button) {
if (!button) return;
const detail = JSON.parse(button.getAttribute("data-detail"));
const modal = document.getElementById("modalModifierDetail");
if (modal) {
if (!modal) return;
document.getElementById("edit_id").value = detail.Id;
document.getElementById("edit_Id_entete").value = detail.Id_entete;
document.getElementById("edit_date").value = detail.Date_op;
document.getElementById("edit_quantite").value = detail.Quantite;
document.getElementById("edit_prix").value = detail.Prix_brut;
document.getElementById("edit_frais_broker").value =
detail.Frais_brocker || 0;
document.getElementById("edit_frais_etat").value =
detail.Frais_etat || 0;
document.getElementById("edit_frais_autre").value =
detail.Frais_autre || 0;
document.getElementById("edit_frais_etat").value = detail.Frais_etat || 0;
document.getElementById("edit_frais_autre").value = detail.Frais_autre || 0;
document.getElementById("edit_type").value = (
detail.Type || ""
).toLowerCase();
@@ -109,24 +192,47 @@ document.addEventListener("DOMContentLoaded", () => {
detail.Ordre || ""
).toLowerCase();
modal.showModal();
}
}
openModal(modal);
});
// Soumission Modification
const formModif = document.getElementById("formModifierDetail");
formModif?.addEventListener("submit", async (e) => {
// =====================================================
// ENREGISTREMENT MODIFICATION
// =====================================================
document
.getElementById("formModifierDetail")
?.addEventListener("submit", async (e) => {
e.preventDefault();
const response = await fetch("/php/api_modifier_detail.php", {
method: "POST",
body: new FormData(e.target),
});
const result = await response.json();
if (result.success) {
location.reload();
} else {
alert("Erreur : " + result.message);
}
});
//fermer la popup en cliquant à côté
document.querySelectorAll("dialog").forEach((dialog) => {
dialog.addEventListener("click", (e) => {
const rect = dialog.getBoundingClientRect();
const inside =
e.clientX >= rect.left &&
e.clientX <= rect.right &&
e.clientY >= rect.top &&
e.clientY <= rect.bottom;
if (!inside) {
dialog.close();
}
});
});
});
php/ordreGF.php
+18 -14
View File
@@ -236,20 +236,20 @@ require_once __DIR__ . '/header.php';
<form id="formCreerOrdre">
<h2>Créer un nouvel ordre</h2>
<div class="form-group">
<label>ISIN :</label><br>
<label>ISIN</label>
<input type="text" id="isinRecherche" name="isin" required>
<button type="button" id="btnRechercher">Rechercher</button>
</div>
<div class="form-group">
<label>Nom :</label><br>
<label>Nom :</label>
<input type="text" name="Nom" id="Nom" readonly>
</div>
<div class="form-group">
<label>Ticker :</label><br>
<label>Ticker :</label>
<input type="text" name="ticker" id="ticker" readonly>
</div>
<div class="form-group">
<label>Code Yahoo :</label><br>
<label>Code Yahoo :</label>
<input type="text" name="code_yahoo" id="code_yahoo" readonly>
</div>
<div class="modal-actions" style="margin-top: 20px;">
@@ -264,23 +264,25 @@ require_once __DIR__ . '/header.php';
<input type="hidden" name="Id_entete" id="Id_entete_detail">
<h2>Ajouter un mouvement</h2>
<div class="form-group">
<label>Date :</label><br>
<label>Date :</label>
<input type="date" name="Date_op" required>
</div>
<div class="form-group">
<label>Quantité :</label><br>
<label>Quantité :</label>
<input type="number" name="Quantite" required>
</div>
<div class="form-group">
<label>Prix Brut :</label><br>
<label>Prix Brut :</label>
<input type="number" step="0.001" name="Prix_brut" required>
</div>
<div class="form-group">
<label>Frais (Broker / Etat / Autre) :</label><br>
<label>Frais</label>
<div class="triple">
<input type="number" step="0.01" name="Frais_brocker" placeholder="Broker">
<input type="number" step="0.01" name="Frais_etat" placeholder="Etat">
<input type="number" step="0.01" name="Frais_etat" placeholder="État">
<input type="number" step="0.01" name="Frais_autre" placeholder="Autre">
</div>
</div>
<div class="form-group">
<label>Ordre (Achat/Vente) :</label>
<select name="Ordre">
@@ -315,23 +317,25 @@ require_once __DIR__ . '/header.php';
<input type="hidden" name="Id_entete" id="edit_Id_entete">
<h2>Modifier le mouvement</h2>
<div class="form-group">
<label>Date :</label><br>
<label>Date :</label>
<input type="date" name="Date_op" id="edit_date" required>
</div>
<div class="form-group">
<label>Quantité :</label><br>
<label>Quantité :</label>
<input type="number" name="Quantite" id="edit_quantite" required>
</div>
<div class="form-group">
<label>Prix Brut :</label><br>
<label>Prix Brut :</label>
<input type="number" step="0.001" name="Prix_brut" id="edit_prix" required>
</div>
<div class="form-group">
<label>Frais :</label><br>
<label>Frais</label>
<div class="triple">
<input type="number" step="0.01" name="Frais_brocker" id="edit_frais_broker" placeholder="Broker">
<input type="number" step="0.01" name="Frais_etat" id="edit_frais_etat" placeholder="Etat">
<input type="number" step="0.01" name="Frais_etat" id="edit_frais_etat" placeholder="État">
<input type="number" step="0.01" name="Frais_autre" id="edit_frais_autre" placeholder="Autre">
</div>
</div>
<div class="form-group">
<label>Ordre :</label>
<select name="Ordre" id="edit_ordre">