diff --git a/panier.js b/panier.js new file mode 100644 index 0000000000000000000000000000000000000000..d5dcd290d7c545c457837288c6819491d7937fa2 --- /dev/null +++ b/panier.js @@ -0,0 +1,132 @@ +// Ajoute un formulaire pour ajouter des recettes aux favoris +function ajoutFormulaire(conteneur, parent, recette){ + let formRec = document.createElement('form'); + let field = document.createElement('fieldset'); + var cancel = document.createElement('button'); + + + // définition du formulaire + formRec.method = 'POST'; + formRec.name = 'formRecette'; + + // Définition du bouton annuler + cancel.textContent = "Retirer des favoris"; + cancel.name = 'retire'; + cancel.type = 'button'; // Empêche le rechargement de le page + + cancel.addEventListener('click', () => { + + let input = { + panier : 'retirer', + recette_id : recette.id + }; + console.log(input); + + const xhr = new XMLHttpRequest(); + xhr.open("POST", "/Service.php", true); + xhr.setRequestHeader("Content-Type", "application/json ; charset=UTF-8"); + + // Vérification des résultats + xhr.onreadystatechange = function(){ + if (xhr.readyState === 4 && xhr.status === 200){ + //let resultat = JSON.parse(xhr.response); + conteneur.innerHTML = ""; + } + } + xhr.send(JSON.stringify(input)); + }); + + // Mise en page + parent.append(formRec); + formRec.appendChild(field); + field.append(cancel); + parent.append(); +} + + +// Affiche les recettes +function afficheRecettes(recette){ + // Récupère l'élément qui va afficher les recettes + let div = document.getElementById("panierClient"); + + // parcours de toutes les recettes contenu dans l'objet + for (var i = 0; i<recette.length; i++){ + // Création des éléments titre / paragraphe / liste + let conteneur = document.createElement('span'); // Contient les éléments html d'une recette + let image = document.createElement('img'); // image + let titre = document.createElement('h2'); // titre de niveau 2 + let paragraph = document.createElement('p'); // paragraphe contenant la liste et description + var liste = document.createElement('ul'); // liste + + liste.innerHTML += "Ingrédients :"; + + // Récupération du contenu + titre.textContent = recette[i].titre; + paragraph.textContent = recette[i].preparation; + let ingredients = recette[i].ingredients.split("|"); + for (var j = 0; j<ingredients.length; j++){ + liste.innerHTML += "<li>"+ingredients[j]+"</li>"; + } + + const search = recette[i].titre; + // Génère l'objet de requête à envoyer au serveur (traiter par Service.php) : le nom de la recette + const input = { + images : search + }; + // Envoie de la requête + var xhr = new XMLHttpRequest(); + xhr.open('POST', "/Service.php", true); + xhr.onload = () => { + if (xhr.response != null){ + image.src = xhr.responseText; + } + }; + + xhr.send(JSON.stringify(input)); + + // Ajout à la div de recettes + div.append(conteneur); + conteneur.append(titre); + conteneur.append(image); + conteneur.append(paragraph); + paragraph.append(liste); + ajoutFormulaire(conteneur, paragraph, recette[i]); + } +} + +/** + * Affiche les options de catégories + */ + function getPanier(){ + // Récupère la position à laquelle on veut afficher des informations + var zone = document.getElementById("panierClient"); + if (zone != null) zone.innerHTML = ''; + + // Création d'un objet contenant la requêtes + var input = { + panier: 'get' + }; + + // Demande au serveur php (donc à la db) les noms de + const xhr = new XMLHttpRequest(); + xhr.open("POST", "/Service.php", true); + xhr.setRequestHeader("Content-Type", "application/json ; charset=UTF-8"); + + // Vérification des résultats + xhr.onreadystatechange = function(){ + if (xhr.readyState === 4 && xhr.status === 200){ + // Si le retour n'est pas vide, on affiche les titres + if (this.response != null){ + var resultat = JSON.parse(xhr.response); + afficheRecettes(resultat); + console.log(resultat); + } + } + } + xhr.send(JSON.stringify(input)); +} + + + + +window.onload = getPanier(); \ No newline at end of file diff --git a/recettes.css b/recettes.css new file mode 100644 index 0000000000000000000000000000000000000000..89819d23baec9dfe17679c69f840219ef03fc457 --- /dev/null +++ b/recettes.css @@ -0,0 +1,53 @@ +body{ +background-color: #c483a6; +color: white; +} + +h2{ +color: #fec4ae; +font-weight: bold; +text-align: center; +} + +img{ +display:block; +margin-left:auto; +margin-right:auto; +border: 2px solid #a9d5e3; +} + +ul{ +text-align: center; +} + +span{ +border: 2px solid #a9d5e3; +} + +input{ +background-color:white; +font-size:20px; +border-radius:12px; +border: 2px solid black; +transition-duration:0.4s; +width:150px; +} + +#requete{ +width:400px; +} + +input:hover{ +background-color:black; +color:white; +} + +input + input{ +margin-left:10px; +} + +#panier{ +position: fixed; +margin-right:2em; +right:0; +}