Scribd
Importer
15 vues11 pages

Document addEventListener (DOMConten

Le document contient un code JavaScript qui gère un système de gestion de commandes, clients et produits pour une application web. Il permet de charger dynamiquement des pages HTML, de gérer des formulaires pour ajouter, modifier et supprimer des clients et des produits, ainsi que de créer des commandes tout en stockant les données dans le localStorage. En outre, il inclut des fonctionnalités pour générer des PDF des commandes et afficher un historique des commandes passées.

Transféré par

ramondgwendezongo
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
15 vues11 pages

Document addEventListener (DOMConten

Le document contient un code JavaScript qui gère un système de gestion de commandes, clients et produits pour une application web. Il permet de charger dynamiquement des pages HTML, de gérer des formulaires pour ajouter, modifier et supprimer des clients et des produits, ainsi que de créer des commandes tout en stockant les données dans le localStorage. En outre, il inclut des fonctionnalités pour générer des PDF des commandes et afficher un historique des commandes passées.

Transféré par

ramondgwendezongo
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd

document.

addEventListener("DOMContentLoaded", function ()
{
const links =[Link]("nav a");
const content = [Link]("content");

// Fonction pour charger un fichier HTML et l'injecter


async function loadPage(page) {
try {
const res = await fetch(`pages/${page}.html`);
if (![Link]) throw new Error(`Erreur ${[Link]}`);
[Link] = await [Link]();
} catch (err) {
[Link] = `<p style = "color: red;"> Impossible de charger la
page "${page}".</p>`;
[Link](err);
}
if (page === "clients") {
initClientsPage();
} else if (page === "produits") {
initProduitsPage();
} else if (page === "commandes") {
initCommandesPage();
}
}

//initialisation : charger le dashboard


loadPage("dashboard");

//click sur les lien du menu


[Link](link => {
[Link]("click", e => {
[Link]();
const page = [Link];
loadPage(page);
});
});

let clients = [];

function initClientsPage() {
clients = [Link]([Link]("clients")) || [];
const form =[Link]("client-form");
const nameInput = [Link]("client-name");
const emailInput = [Link]("client-email");
const idInput = [Link]("client-id");
const tableBody = [Link]("#clients-table tbody");

function renderTable() {
[Link] = "";
[Link]((client, index) => {
const row = [Link]("tr");
[Link] = `
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>
<button onclick="editClient(${index})">Modifier</button>
<button onclick="deleteClient(${index})">Supprimer</button>
</td>
`;
[Link](row);
});
const clearBtn = [Link]("clear-all");

[Link] = () => {
if(confirm("Voulez-vous vraiment supprimer tous les clients ?")) {
clients = [];
[Link]("clients");
renderTable();
}
};
}

[Link] = (e) => {


[Link]();
const name = [Link]();
const email = [Link]();
const id = [Link];

if (id) {
//modification
clients[id] = { name, email};
}else {
//ajout
[Link]({name, email});
}

[Link]();
[Link] = "";
renderTable();
[Link]("clients",[Link](clients));
};

[Link] = (index) => {


const client = clients[index];
[Link] = [Link];
[Link] = [Link];
[Link] = index;
};

[Link] = (index) => {


if(confirm("Supprimer ce client ?")) {
[Link](index, 1);
[Link]("clients",[Link](clients));
renderTable();
}
};

renderTable();
}

function initProduitsPage() {
let produits = [Link]([Link]("produits")) || [];

const form = [Link]("produit-form");


const nomInput = [Link]("produit-nom");
const prixInput = [Link]("produit-prix");
const stockInput = [Link]("produit-stock");
const idInput = [Link]("produit-id");
const tableBody = [Link]("#produits-table tbody");
const viderBtn = [Link]("vider-produits");

function renderTable () {
[Link] = "";
[Link]((produit, index) => {
const row = [Link]("tr");
[Link] = `
<td>${[Link]}</td>
<td>${[Link]} F</td>
<td>${[Link]}</td>
<td>
<button onclick="editProduit(${index})">Modifier</button>
<button onclick="deleteProduit(${index})">Supprimer</button>
</td>
`;
[Link](row);
});
}

[Link] = (e) => {


[Link]();
const nom = [Link]();
const prix = parseInt([Link]);
const stock = parseInt([Link]);
const id = [Link];

if (id) {
produits[id] = { nom, prix, stock };
} else {
[Link]({ nom, prix, stock });
}

[Link]("produits", [Link](produits));
[Link]();
[Link] = "";
renderTable();
};

[Link] = (index) => {


const p = produits[index];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = index;
};

[Link] = (index) => {


if (confirm("Supprimer ce produit ?")) {
[Link](index, 1);
[Link]("produits",[Link](produits));
renderTable();
}
};

[Link] = () => {
if (confirm("Supprimer tous les produits ?")) {
produits = [];
[Link]("produits");
renderTable();
}
};

renderTable();
}

let commandeEnCours = [];

[Link] = function() {
const tableBody = [Link]("#commande-table tbody");
if(!tableBody) return;
const totalSpan = [Link]("total-commande");
let total = 0;
[Link] = "";

[Link]
((item, i) => {
const sousTotal = [Link] * [Link];
total += sousTotal;

const row = [Link]("tr");


[Link] = `
<td>${[Link]}</td>
<td>${[Link]} F</td>
<td>${[Link]}</td>
<td>${sousTotal} F</td>
<td><button
onclick="supprimerProduitCommande(${i})">Supprimer</button></td>
`;
[Link](row);
});

[Link] = total;
};

[Link] = function(index) {
[Link](index, 1);
renderCommande();
};

function initCommandesPage() {
const clients = [Link]([Link]("clients")) || [];
const produits = [Link]([Link]("produits")) || [];

const clientSelect = [Link]("client-select");


const produitSelect = [Link]("produit-select");
const stockDisplay = [Link]("stock-disponible");
const quantiteInput = [Link]("quantite");
const ajouterBtn = [Link]("ajouter-produit");
const form = [Link]("commande-form")

commandeEnCours = [];

renderHistoriqueCommandes();

//Etape 1 : Remplir les select avec les clients et les produits


[Link] = [Link]((c, i) => `<option value="${i}">$
{[Link]}</option>`).join("");

[Link] = [Link]((p,i) => `<option value="${i}">$


{[Link]} - ${parseInt([Link])} F</option>`).join("");

[Link] = () => {
const selectedProduit = produits[[Link]];
if(selectedProduit) {
[Link] = `Stock : ${[Link]}`;
} else {
[Link] = "";
}
};

[Link]();

[Link] = () => {
const produitIndex = [Link];
const quantite = parseInt([Link]);

if(!produitIndex || isNaN(quantite) || quantite < 1) {


alert("Veuillez sélectionner un produit et une quantité valide.");
return;
}

const produit = produits[produitIndex];

//verification du stock disponible


const quantiteDejaAjoutee = [Link](item => [Link] ==
produitIndex)?.quantite || 0;
if (quantite + quantiteDejaAjoutee > [Link]) {
alert(`Stock insuffisant ! Il reste seulement ${[Link] -
quantiteDejaAjoutee} en stock.`);
return;
}

//Vérifier si le produit est deja dans la commande


const existant = [Link](item => [Link] ==
produitIndex);
if(existant) {
[Link] += quantite;
} else {
[Link]({
index: produitIndex,
nom: [Link],
prix: [Link],
quantite: quantite,
});
}

renderCommande();
[Link] = 1;
};

[Link] = (e) => {


[Link]();
const clientIndex = [Link];
if ([Link] === 0) {
alert("Veuillez ajouter des produits a la commande.");
return;
}

const commandes = [Link]([Link]("commandes")) || [];


[Link]({
client: clients[clientIndex].name,
produits: commandeEnCours,
date: new Date().toLocaleDateString(),
});

// Mise a jour des stocks


[Link](item => {
const produitIndex = [Link];
produits[produitIndex].stock -= [Link];
});
[Link]("produits",[Link](produits));

[Link]("commandes", [Link](commandes));
alert("Commande enregistree !");
commandeEnCours = [];
renderCommande();
renderHistoriqueCommandes();
};

renderCommande();
renderHistoriqueCommandes();
[Link]("filtrer-
client").addEventListener("input",renderHistoriqueCommandes);
}
function renderHistoriqueCommandes() {
const commandes = [Link]([Link]("commandes")) || [];
const tbody = [Link]("#historique-commandes tbody");
const filtre = [Link]("filtrer-
client")?.[Link]() || "";

[Link] = "";

[Link]((cmd, index) => {


if(![Link]().includes(filtre)) return;

const total = [Link]((sum,p) => sum + ([Link] *


[Link]), 0);
const produitsListe = [Link](p => `${[Link]} ($
{[Link]})`).join(",");

const row = [Link]("tr");


[Link] = `
<td>${[Link]}</td>
<td>${produitsListe}</td>
<td>${total} F</td>
<td>${[Link]}</td>
<td>
<button onclick
="supprimerCommande(${index})">Supprimer</button>
<button onclick ="exporterCommandePDF(${index})">PDF</button>
</td>
`;
[Link](row);
});
}

[Link] = function (index) {


const commandes = [Link]([Link]("commandes")) || [];
const commande = commandes[index];
const { jsPDF } = [Link];
const doc = new jsPDF({
orientation: "portrait",
unit: "mm",
format: [80, 200]
});

const margin = 5;
let y = margin;

const logo = new Image();


[Link] = "assets/images/[Link]"

[Link] = function() {
// Logo
[Link](logo, "PNG", 0, y, 30, 12);
y += 16;

//En-tete entreprise
[Link]("courier", "bold")
[Link](10);
[Link]("MECATRAUM SARL", 40, y, { align: "center" });
y += 5;
[Link](8);
[Link]("Adresse : Ouagadougou, Patte d'oie", 40, y, { align: "center"
});
y += 4;
[Link]("Tel : +226 66-09-57-81", 40, y, { align: "center" });
y += 4;
[Link]("ramondgwendezongo@[Link]", 40, y, { align: "center"});
y += 6;

// Ligne de separetion
[Link](0.5);
[Link](margin, y, 80 - margin, y);
y += 4;

//suite du contenu PDF


[Link](8);
[Link](`Client : ${[Link]}`, margin, y);
y += 4;
[Link](`Date : ${[Link]}`, margin, y);
y += 6;

[Link]("Articles :", margin, y);


y += 4;

let total = 0;
[Link]((p) => {
const sousTotal = [Link] * [Link];
total += sousTotal;

[Link]("courier", "normal");
[Link](`${[Link]}`, margin, y);
y += 4;
[Link](`${[Link]} x ${[Link]} FCFA`, margin + 4, y);
[Link](`${sousTotal} FCFA`, 80 - margin, y, { align: "right"});
y += 5;
});

[Link](margin, y, 80 - margin, y);


y += 4;

[Link]("courier", "bold");
[Link]("Total :", margin, y);
[Link](`${total} FCFA`, 80 - margin, y, { align: "right"});
y += 8;

//Generer QR Code localement


const qrData = `CommandeID:${index}|Client:${[Link]}|Total:$
{total}`;
[Link](qrData, { errorCorrectionLevel:'H'}, function (err,
qrCodeUrl) {
if(!err) {
[Link](qrCodeUrl, "PNG", 60, y, 15, 15);//QR a droite
y += 20;
}

//creer un element temporaire pour le QR Code


const qrContainer = [Link]("div");
[Link] = "none";
[Link](qrContainer);

new QRCode(qrContainer, {
text: qrData,
width: 100,
height: 100
});

//Attendre que le QR Code soit genere


setTimeout(() => {
const qrImg = [Link]("img");
if (qrImg) {
const qrDataUrl =[Link];
[Link](qrDataUrl, "PNG", 25, y, 30, 30);
y += 36;

//message de remerciment
[Link](7);
[Link]("courier", "italic");
[Link]("Merci pour votre achat !", 40, y, { align:
"center"});
y += 4;
[Link]("A bientot chez MECATRAUM", 40, y, { align:
"center"})

//Sauvegarder ou afficher le PDF


[Link](`commande_${index}.pdf`);
} else {
alert("QR Code non genere.");
}
//Nettoyer
[Link](qrContainer);
}, 500);

//impression automatique
[Link]();
const Blob = [Link]("blob");
const url = [Link](pdfBlob);
[Link](url);
});
};
};

[Link] = function(index) {
if (confirm("Supprimer cette commande ?")) {
const commandes = [Link]([Link]("commandes")) || [];
[Link](index, 1);
[Link]("commandes",[Link](commandes));
renderHistoriqueCommandes();
}
};
});

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ERP Simplifie</title>
<link rel="stylesheet" href="css/[Link]">
<link rel="icon" href="data:,">
</head>
<script src="lib/[Link]/unpkg/[Link]"></script>
<script src="lib/[Link]"></script>
<script src="lib/[Link]"></script>
<body>
<header>
<h1>ERP Simplifie</h1>
</header>
<nav>
<ul>
<li> <a href="#" data-page="dashboard">Tableau de bord</a></li>
<li> <a href="#" data-page="clients">Clients</a></li>
<li> <a href="#" data-page="produits">Produits</a></li>
<li> <a href="#" data-page="commandes">Commandes</a></li>
</ul>
</nav>

<main id="content">
<p>Bienvenue sur votre tableau de bord.</p>
</main>

<footer>
<p>&copy; 2025 Mon ERP Simplifie</p>
</footer>

<script src="js/[Link]"></script>
</body>
</html>

<h2>Nouvelle commandes</h2>

<form id="commande-form">
<label for="client-select">Client :</label>
<select id="client-select" required></select>

<fieldset>
<legend>Ajouter un produit</legend>
<label for="produit-select">Produit :</label>
<select id="produit-select"></select>
<span id="stock-disponible" style="margin-left: 10px; color: gray;"></span>

<label for="quatite">Quantité :</label>


<input type="number" id="quantite" min="1" value="1" />

<button type="button" id="ajouter-produit">Ajouter</button>


</fieldset>

<h3>Produits ajoutés</h3>
<table id="commande-table">
<thead>
<tr>
<th>Nom</th>
<th>Prix Unitaire</th>
<th>Quantité</th>
<th>sous-total</th>
<th>Actions</th>
</tr>
</thead>
<tbody></tbody>
</table>

<p><strong>Total :</strong><span id="total-commande">0</span> F</p>


<button type="submit">Valider la commande</button>
<!-- <button onclick="exporterCommandePDF()">Exporter PDF</button> -->
</form>

<hr />

<h2>Historique des commandes</h2>


<label for="filtrer-client">Filtrer par client :</label>
<input type="text" id="filtrer-client" placeholder="Nom du client">
<table id="historique-commandes">
<thead>
<tr>
<th>Client</th>
<th>Produits</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>

Vous aimerez peut-être aussi