Création des interfaces utilisateurs et ventes

assets/script/achat.js

@@ -0,0 +1,125 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const saleForm = document.getElementById("saleForm");
+    const salesList = document.getElementById("salesList");
+    const medicamentsContainer = document.getElementById("medicamentsContainer");
+    const addMedicamentButton = document.getElementById("addMedicament");
+
+    const medicaments = [
+        "Paracetamol",
+        "Ibuprofen",
+        "Amoxicillin",
+        "Aspirin",
+        "Ciprofloxacin",
+        // Ajoutez plus de médicaments ici
+    ];
+
+    async function createAutocomplete(input, list) {
+        input.addEventListener("input", async function() {
+            const value = input.value.toLowerCase();
+            list.innerHTML = "";
+            if (value) {
+                const filteredMedicaments = await recupData(value);
+                filteredMedicaments.forEach(medicament => {
+                    const li = document.createElement("li");
+                    li.textContent = medicament.nom;
+                    li.addEventListener("click", function() {
+                        input.value = medicament.value
+                        list.innerHTML = "";
+                    });
+                    list.appendChild(li);
+                });
+                list.style.display = "block";
+            } else {
+                list.style.display = "none";
+            }
+        });
+    }
+
+    function addMedicamentGroup() {
+        const group = document.createElement("div");
+        group.className = "form-group medicament-group";
+
+        group.innerHTML = `
+            <label for="medicament">Nom du médicament :</label>
+            <input type="text" class="medicament" name="medicament" required>
+            <ul class="medicament-list dropdown-content"></ul>
+            <label for="prix">Prix :</label>
+            <input type="number" class="prix" name="prix" step="0.01" required>
+            <button type="button" class="remove-medicament"><i class="fas fa-minus-circle"></i></button>
+        `;
+
+        medicamentsContainer.appendChild(group);
+
+        const medicamentInput = group.querySelector(".medicament");
+        const medicamentList = group.querySelector(".medicament-list");
+        const removeButton = group.querySelector(".remove-medicament");
+
+        createAutocomplete(medicamentInput, medicamentList);
+
+        removeButton.addEventListener("click", function() {
+            medicamentsContainer.removeChild(group);
+        });
+    }
+
+    addMedicamentButton.addEventListener("click", addMedicamentGroup);
+
+    saleForm.addEventListener("submit", function(event) {
+        event.preventDefault();
+
+        const medicamentGroups = document.querySelectorAll(".medicament-group");
+        let confirmationMessage = "Confirmez-vous l'enregistrement de la vente :\n";
+
+        medicamentGroups.forEach(group => {
+            const medicament = group.querySelector(".medicament").value;
+            const prix = group.querySelector(".prix").value;
+            confirmationMessage += `Médicament : ${medicament}, Prix : ${prix} €\n`;
+        });
+
+        if (confirm(confirmationMessage)) {
+            medicamentGroups.forEach(group => {
+                const medicament = group.querySelector(".medicament").value;
+                const prix = group.querySelector(".prix").value;
+                const li = document.createElement("li");
+                li.innerHTML = `${medicament} - ${prix} € <i class="fas fa-trash-alt"></i>`;
+                salesList.appendChild(li);
+
+                li.querySelector("i").addEventListener("click", function() {
+                    li.remove();
+                });
+
+                group.remove();
+            });
+            addMedicamentGroup(); // Ajouter un premier groupe vide
+        }
+    });
+
+    // Ajouter un premier groupe vide au chargement de la page
+    addMedicamentGroup();
+});
+
+
+async function recupData (value)
+{
+    try {
+        await new Promise(resolve => setTimeout(resolve, 500))
+        const result = await fetch('http://localhost:8090/API/medicament', {
+            method: 'POST',
+            headers: {
+                "Content-Type" : 'application/json',
+            },
+            body: JSON.stringify({
+                value: value,
+            }),
+        })
+        if (result.ok) {
+            const data = await result.json()
+            return data
+        }
+        else {
+            throw new Error('Erjkjfhsd')
+        }
+    }
+    catch(error) {
+        console.log(error)
+    }
+}

assets/script/achats.js

@@ -0,0 +1,106 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const port = window.location.port
+    const saleForm = document.getElementById("saleForm");
+    const medicamentContainer = document.getElementById("medicamentContainer");
+    const salesList = document.getElementById("salesList");
+    const premier = document.querySelector(".premier");
+    const price = document.querySelector(".premier-1");
+    const nombre = document.querySelector(".premier-2");
+    const suggestions = document.querySelector(".suggestions");
+    const container = document.querySelector('.container')
+
+    container.style.scrollbarWidth = "none"
+    container.style.Webkitscrollbar = "none"
+
+    premier.addEventListener('input', (e) => {
+         fetchSuggestions(premier.value, suggestions, price, premier, nombre);
+    })
+    // /  // Ajouter un groupe de médicaments initial
+    // /  addMedicamentGroup();
+
+    // Ajouter un groupe de médicaments supplémentaire
+    document.getElementById("addMedicament").addEventListener("click", addMedicamentGroup);
+
+     function addMedicamentGroup() {
+         const group = document.createElement("div");
+         group.classList.add("medicament-group");
+
+         const medicamentInput = document.createElement("input");
+         medicamentInput.type = "text";
+         medicamentInput.classList.add("medicament");
+         medicamentInput.placeholder = "Nom du médicament";
+
+         const prixInput = document.createElement("input");
+         prixInput.type = "number";
+         prixInput.classList.add("prix");
+         prixInput.placeholder = "Prix";
+         prixInput.readOnly = true;
+
+         const nombreInput = document.createElement("input");
+         nombreInput.type = "number";
+         nombreInput.classList.add("prix");
+         nombreInput.placeholder = "Nombre";
+         nombreInput.readOnly = false;
+
+         const suggestionsList = document.createElement("ul");
+         suggestionsList.classList.add("suggestions");
+
+         const deleteButton = document.createElement('button')
+         deleteButton.classList.add('button')
+         deleteButton.innerHTML = "Supprimer"
+
+         group.appendChild(medicamentInput);
+         group.appendChild(prixInput);
+         group.appendChild(nombreInput);
+         group.appendChild(suggestionsList);
+         group.appendChild(deleteButton)
+
+         medicamentContainer.appendChild(group);
+
+         medicamentInput.addEventListener("input", function() {
+             fetchSuggestions(medicamentInput.value, suggestionsList, prixInput, medicamentInput, nombreInput);
+         });
+
+         deleteButton.addEventListener('click', () => {
+            group.remove()
+         })
+     }
+
+    function fetchSuggestions(query, suggestionsList, prixInput, medicamentInput, nombre) {
+        fetch(`http://localhost:${port}/API/medicament?value=` + query)
+            .then(response => response.json())
+            .then(data => {
+                console.log(data)
+                suggestionsList.innerHTML = ''; // Clear previous suggestions
+                data.forEach(medicament => {
+                   const suggestionItem = document.createElement("li");
+                   suggestionItem.textContent = medicament.nom;
+                   suggestionItem.addEventListener("click", function() {
+                       suggestionsList.innerHTML = '';
+                       prixInput.value = medicament.prix;
+                       suggestionItem.textContent = medicament.nom;
+                       medicamentInput.value = medicament.nom
+                       nombre.setAttribute('name', 'medicament-'+medicament.id)
+                   });
+                   suggestionsList.appendChild(suggestionItem);
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching suggestions:', error);
+            });
+    } 
+
+    // saleForm.addEventListener("submit", function(event) {
+    //     event.preventDefault();
+
+    //     const medicamentGroups = document.querySelectorAll(".medicament-group");
+
+    //     const allInput = []
+
+    //     medicamentGroups.forEach(element => {
+    //         const medicamentInput = element.querySelector('.medicament')
+    //         allInput.push(medicamentInput)
+    //     })
+
+    // });
+ });

assets/script/facture.js

@@ -0,0 +1,4 @@
+const details = document.querySelector('.invoice-details')
+
+details.style.scrollbarWidth = "none"
+details.style.Webkitscrollbar = "none"

assets/script/header.js

@@ -12,7 +12,7 @@ const select = document.getElementById('select')
 
 if (select) {
 	select.addEventListener('change', (e) => {
-		if (e.target.value == "admin") window.location.href = "/"
-		else window.location.href = "/users"
+		if (e.target.value == "admin") window.location.href = "/admin/medicament"
+		else window.location.href = "/users/medicament"
 	})
 }	

assets/styles/achat.css

@@ -0,0 +1,136 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f5f7;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+ }
+
+ .container {
+    position:absolute;
+    top:17%;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 500px;
+    max-height:90vh;
+    overflow-y:scroll;
+}
+
+ h1, h2 {
+     text-align: center;
+     color: #4caf50;
+ }
+
+ .form-group {
+     margin-bottom: 15px;
+ }
+
+ .medicament-group {
+     position: relative;
+     padding-bottom: 15px;
+ }
+
+ label {
+     display: block;
+     margin-bottom: 5px;
+     color: #333;
+ }
+
+ input[type="text"],
+ input[type="number"] {
+     width: calc(100% - 22px);
+     padding: 10px;
+     border: 1px solid #ccc;
+     border-radius: 4px;
+     box-sizing: border-box;
+     margin-bottom: 5px;
+ }
+
+ button {
+     background-color: #4caf50;
+     color: white;
+     padding: 10px 20px;
+     border: none;
+     border-radius: 4px;
+     cursor: pointer;
+     width: 100%;
+     margin-top: 10px;
+ }
+
+ .button {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+    margin-top: 10px;
+    background-color: #d32f2f;
+    width:auto;
+ }
+
+ .button:hover {
+    background-color:#e74c3c;
+ }
+
+ button[type="button"] {
+     width: auto;
+     background-color: #0d6efd;
+     margin-top: 0;
+ }
+
+ button:hover {
+     background-color: #45a049;
+ }
+
+ button[type="button"]:hover {
+     background-color: #0555ce;
+ }
+
+ #salesList {
+     list-style-type: none;
+     padding: 0;
+ }
+
+ #salesList li {
+     background-color: #f9f9f9;
+     border: 1px solid #ddd;
+     padding: 10px;
+     margin-bottom: 5px;
+     border-radius: 4px;
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+ }
+
+ #salesList li i {
+     cursor: pointer;
+     color: #e74c3c;
+ }
+
+ .dropdown-content {
+     position: absolute;
+     background-color: #fff;
+     border: 1px solid #ddd;
+     border-radius: 4px;
+     max-height: 150px;
+     overflow-y: auto;
+     width: calc(100% - 22px);
+     display: none;
+     z-index: 1;
+ }
+
+ .dropdown-content li {
+     padding: 10px;
+     cursor: pointer;
+ }
+
+ .dropdown-content li:hover {
+     background-color: #f1f1f1;
+ }