Skip to content
Snippets Groups Projects
Commit 6535f2f4 authored by vautrin33u's avatar vautrin33u
Browse files

ajout page panier

parent fb75702a
No related branches found
No related tags found
1 merge request!1Master
panier.js 0 → 100644
// 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
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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment