WIP: tout ok et popup centrées et modernes il ne reste plus que ordreJFG
This commit is contained in:
+185
-20
@@ -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);
|
||||
}
|
||||
|
||||
+160
-54
@@ -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,73 +122,117 @@ 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) {
|
||||
const detail = JSON.parse(button.getAttribute("data-detail"));
|
||||
const modal = document.getElementById("modalModifierDetail");
|
||||
if (modal) {
|
||||
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_type").value = (
|
||||
detail.Type || ""
|
||||
).toLowerCase();
|
||||
|
||||
document.getElementById("edit_etat").value = (
|
||||
detail.Etat || ""
|
||||
).toLowerCase();
|
||||
if (!button) return;
|
||||
|
||||
document.getElementById("edit_ordre").value = (
|
||||
detail.Ordre || ""
|
||||
).toLowerCase();
|
||||
const detail = JSON.parse(button.getAttribute("data-detail"));
|
||||
|
||||
modal.showModal();
|
||||
}
|
||||
}
|
||||
const modal = document.getElementById("modalModifierDetail");
|
||||
|
||||
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_type").value = (
|
||||
detail.Type || ""
|
||||
).toLowerCase();
|
||||
|
||||
document.getElementById("edit_etat").value = (
|
||||
detail.Etat || ""
|
||||
).toLowerCase();
|
||||
|
||||
document.getElementById("edit_ordre").value = (
|
||||
detail.Ordre || ""
|
||||
).toLowerCase();
|
||||
|
||||
openModal(modal);
|
||||
});
|
||||
|
||||
// Soumission Modification
|
||||
const formModif = document.getElementById("formModifierDetail");
|
||||
formModif?.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const response = await fetch("/php/api_modifier_detail.php", {
|
||||
method: "POST",
|
||||
body: new FormData(e.target),
|
||||
// =====================================================
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert("Erreur : " + result.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
+22
-18
@@ -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,22 +264,24 @@ 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>
|
||||
<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_autre" placeholder="Autre">
|
||||
<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="État">
|
||||
<input type="number" step="0.01" name="Frais_autre" placeholder="Autre">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Ordre (Achat/Vente) :</label>
|
||||
@@ -315,22 +317,24 @@ 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>
|
||||
<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_autre" id="edit_frais_autre" placeholder="Autre">
|
||||
<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="É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>
|
||||
|
||||
Reference in New Issue
Block a user