Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
ALGLAVE Ivan
Drinkpedia
Commits
7b7d1960
Commit
7b7d1960
authored
Dec 31, 2020
by
ALGLAVE Ivan
Browse files
AvancedSearch fonctionnal
parent
1f0fbba7
Changes
6
Hide whitespace changes
Inline
Side-by-side
AdvancedSearch.php
View file @
7b7d1960
...
...
@@ -13,7 +13,7 @@
<?php
include
'scripts/Functions.php'
;
$ingredientsList
=
getAllIngredients
();
?>
?>
<div
id=
"content"
>
<div
id=
"elementInput"
class=
"autocomplete"
>
...
...
@@ -49,12 +49,31 @@
<div
id=
"searchDiv"
>
<button
onclick=
"performSearch();"
>
Rechercher
</button>
</div>
<div
id=
"chosenItemsOverview"
>
<div
id=
"parametersDiv"
>
<h2>
Autoriser des éléments manquants
</h2>
<input
id=
"AllowMissingCheckbox"
type=
"checkbox"
onclick=
"allowMissingClicked(this.checked);"
>
<h2>
Autoriser des éléments non desirés
</h2>
<input
id=
"AllowUnwaentedCheckbox"
type=
"checkbox"
onclick=
"allowUnwantedClicked(this.checked);"
>
<h2>
Nombre maximum de conditions non-satisfiées :
</h2>
<input
type=
"number"
id=
"maxUnsatifiedInput"
min=
"0"
max=
"20"
oninput=
"maxUnsatisfiedChanged(this.value);"
value=
"0"
>
</div>
<div
class=
"chosenItemsOverview"
>
</div>
<div
style=
"display: none;"
>
<div
id=
"CI_Clone"
class=
"chosenItem"
>
<img
class=
"chosenItemImage"
src=
"images/check.png"
>
<h2
class=
"chosenItemName"
>
Example
</h2>
<button
value=
"Clone"
onclick=
"chosenItemCrossClicked(this)"
class=
"chosenItemCross"
>
X
</button>
</div>
</div>
</div>
<script>
let
ingredientsOverview
=
document
.
getElementsByClassName
(
"
chosenItemsOverview
"
)[
0
];
let
ingredientViewOriginal
=
document
.
getElementById
(
'
CI_Clone
'
);
let
inputField
=
document
.
getElementById
(
'
myInput
'
);
let
chosenIngredients
=
new
Map
();
let
allIngredients
=
[
<?php
$first
=
true
;
foreach
(
$ingredientsList
as
$ingredient
)
{
if
(
!
$first
)
echo
','
;
else
$first
=
false
;
echo
'"'
.
$ingredient
.
'"'
;
}
?>
];
...
...
@@ -62,6 +81,21 @@
var
allowMissing
=
false
;
var
maxUnsatisfied
=
0
;
function
allowMissingClicked
(
status
)
{
allowMissing
=
(
status
==
'
checked
'
);
}
function
allowUnwantedClicked
(
status
)
{
allowUnwanted
=
(
status
==
'
checked
'
);
}
function
maxUnsatisfiedChanged
(
value
)
{
maxUnsatisfied
=
value
;
}
function
elementInputChange
(
val
)
{
var
toggleSwitch
=
document
.
getElementById
(
'
toggleWanted
'
);
...
...
@@ -80,9 +114,6 @@
document
.
getElementById
(
'
na
'
).
checked
=
""
;
document
.
getElementById
(
'
off
'
).
checked
=
"
checked
"
;
}
else
{
}
}
else
{
...
...
@@ -96,19 +127,40 @@
function
setElementWanted
()
{
var
element
=
document
.
getElementById
(
'
myInput
'
).
value
;
chosenIngredients
.
set
(
element
,
'
wanted
'
);
setElementWantedByName
(
element
);
}
function
setElementWantedByName
(
name
)
{
chosenIngredients
.
set
(
name
,
'
wanted
'
);
appendIngredient
(
name
,
'
wanted
'
);
if
(
inputField
.
value
==
name
)
elementInputChange
(
name
);
}
function
setElementNone
()
{
var
element
=
document
.
getElementById
(
'
myInput
'
).
value
;
chosenIngredients
.
delete
(
element
);
setElementNoneByName
(
element
);
}
function
setElementNoneByName
(
name
)
{
chosenIngredients
.
delete
(
name
);
removeIngredient
(
name
);
if
(
inputField
.
value
==
name
)
elementInputChange
(
name
);
}
function
setElementUnwanted
()
{
var
element
=
document
.
getElementById
(
'
myInput
'
).
value
;
chosenIngredients
.
set
(
element
,
'
unwanted
'
);
setElementUnwantedByName
(
element
);
}
function
setElementUnwantedByName
(
name
)
{
chosenIngredients
.
set
(
name
,
'
unwanted
'
);
appendIngredient
(
name
,
'
unwanted
'
);
if
(
inputField
.
value
==
name
)
elementInputChange
(
name
);
}
function
performSearch
()
...
...
@@ -133,6 +185,36 @@
window
.
top
.
postMessage
(
data
,
[
data
.
event
,
data
.
value
]);
}
function
appendIngredient
(
ing
,
status
)
{
let
new_id
=
'
CI_
'
+
ing
;
if
(
document
.
getElementById
(
new_id
))
removeIngredient
(
ing
);
let
clone
=
ingredientViewOriginal
.
cloneNode
(
true
);
clone
.
id
=
'
CI_
'
+
ing
;
let
cross
=
clone
.
getElementsByClassName
(
'
chosenItemCross
'
)[
0
];
let
name
=
clone
.
getElementsByClassName
(
'
chosenItemName
'
)[
0
];
let
image
=
clone
.
getElementsByClassName
(
'
chosenItemImage
'
)[
0
];
cross
.
value
=
ing
;
name
.
innerHTML
=
ing
;
if
(
status
==
'
unwanted
'
)
image
.
src
=
'
images/uncheck.png
'
;
ingredientsOverview
.
appendChild
(
clone
);
}
function
removeIngredient
(
ing
)
{
ingredientsOverview
.
removeChild
(
document
.
getElementById
(
'
CI_
'
+
ing
));
if
(
inputField
.
value
==
ing
)
document
.
getElementById
(
'
na
'
).
click
();
}
function
chosenItemCrossClicked
(
node
)
{
removeIngredient
(
node
.
value
);
}
</script>
</body>
...
...
RecipeList.php
View file @
7b7d1960
...
...
@@ -30,7 +30,11 @@
echo
'<li><div class="container">'
;
echo
'<div class="extra">'
;
echo
'<img class="toggleFavourite" src="images/favourite.png" >'
;
echo
'<p class="unsatisfied">Non satisfiés : '
.
$re
[
1
]
.
'</p>'
;
echo
'</div>'
;
echo
'<div class="listElement" onclick="showRecipe('
.
intval
(
$re
[
0
])
.
');">'
;
$recipe
=
$Recettes
[
intval
(
$re
[
0
])];
...
...
css/AdvancedSearch.css
View file @
7b7d1960
...
...
@@ -11,6 +11,7 @@ body {
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
background-color
:
rgba
(
255
,
255
,
255
,
0.75
);
width
:
80vw
;
border-radius
:
25px
;
...
...
@@ -53,4 +54,66 @@ body {
#searchDiv
button
:hover
{
background-color
:
grey
;
}
.chosenItemsOverview
{
border-style
:
solid
;
border-width
:
2px
;
border-color
:
black
;
border-radius
:
10px
;
background-color
:
rgba
(
180
,
180
,
180
,
0.50
);
display
:
flex
;
flex-wrap
:
wrap
;
width
:
60vw
;
min-height
:
10vh
;
justify-content
:
center
;
align-items
:
center
;
margin
:
50px
;
}
.chosenItem
{
height
:
48px
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
border-style
:
solid
;
border-radius
:
10px
;
border-width
:
1px
;
border-color
:
black
;
margin
:
10px
;
}
.chosenItemImage
{
width
:
32px
;
height
:
32px
;
margin
:
10px
;
}
.chosenItemName
{
font-size
:
20px
;
font-weight
:
bold
;
}
.chosenItemCross
{
font-size
:
20px
;
font-weight
:
bold
;
border-style
:
none
;
background-color
:
transparent
;
color
:
red
;
}
#parametersDiv
{
font-size
:
x-small
;
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
center
;
align-items
:
center
;
margin
:
0px
;
}
#parametersDiv
input
{
text-align
:
center
;
width
:
64px
;
margin
:
2px
;
padding
:
2px
;
}
\ No newline at end of file
css/RecipeList.css
View file @
7b7d1960
...
...
@@ -54,9 +54,15 @@ ul li:last-child {
object-fit
:
contain
;
}
.
toggleFavourite
{
.
extra
{
float
:
right
;
vertical-align
:
middle
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
right
;
align-items
:
flex-end
;
}
.toggleFavourite
{
width
:
32px
;
height
:
auto
;
}
\ No newline at end of file
}
\ No newline at end of file
images/check.png
0 → 100644
View file @
7b7d1960
14.3 KB
images/uncheck.png
0 → 100644
View file @
7b7d1960
16.5 KB
Write
Preview
Supports
Markdown
0%
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!
Cancel
Please
register
or
sign in
to comment