Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
B
Boissons
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
VAUTRIN Guillaume
Boissons
Commits
6535f2f4
You need to sign in or sign up before continuing.
Commit
6535f2f4
authored
3 years ago
by
vautrin33u
Browse files
Options
Downloads
Patches
Plain Diff
ajout page panier
parent
fb75702a
No related branches found
No related tags found
1 merge request
!1
Master
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
panier.js
+132
-0
132 additions, 0 deletions
panier.js
recettes.css
+53
-0
53 additions, 0 deletions
recettes.css
with
185 additions
and
0 deletions
panier.js
0 → 100644
+
132
−
0
View file @
6535f2f4
// 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
This diff is collapsed.
Click to expand it.
recettes.css
0 → 100644
+
53
−
0
View file @
6535f2f4
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
;
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment