Maintenance Gitlab - Jeudi 09 Décembre 2021 à partir de 10h - Mises à jour de sécurité

Commit 7b7d1960 authored by ALGLAVE Ivan's avatar ALGLAVE Ivan
Browse files

AvancedSearch fonctionnal

parent 1f0fbba7
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<?php <?php
include 'scripts/Functions.php'; include 'scripts/Functions.php';
$ingredientsList = getAllIngredients(); $ingredientsList = getAllIngredients();
?> ?>
<div id="content"> <div id="content">
<div id="elementInput" class="autocomplete"> <div id="elementInput" class="autocomplete">
...@@ -49,12 +49,31 @@ ...@@ -49,12 +49,31 @@
<div id="searchDiv"> <div id="searchDiv">
<button onclick="performSearch();">Rechercher</button> <button onclick="performSearch();">Rechercher</button>
</div> </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>
<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> </div>
<script> <script>
let ingredientsOverview = document.getElementsByClassName("chosenItemsOverview")[0];
let ingredientViewOriginal = document.getElementById('CI_Clone');
let inputField = document.getElementById('myInput');
let chosenIngredients = new Map(); let chosenIngredients = new Map();
let allIngredients = [<?php $first = true; foreach($ingredientsList as $ingredient) { if(!$first) echo ','; else $first = false; echo '"' . $ingredient . '"'; } ?>]; let allIngredients = [<?php $first = true; foreach($ingredientsList as $ingredient) { if(!$first) echo ','; else $first = false; echo '"' . $ingredient . '"'; } ?>];
...@@ -62,6 +81,21 @@ ...@@ -62,6 +81,21 @@
var allowMissing = false; var allowMissing = false;
var maxUnsatisfied = 0; var maxUnsatisfied = 0;
function allowMissingClicked(status)
{
allowMissing = (status == 'checked');
}
function allowUnwantedClicked(status)
{
allowUnwanted = (status == 'checked');
}
function maxUnsatisfiedChanged(value)
{
maxUnsatisfied = value;
}
function elementInputChange(val) function elementInputChange(val)
{ {
var toggleSwitch = document.getElementById('toggleWanted'); var toggleSwitch = document.getElementById('toggleWanted');
...@@ -80,9 +114,6 @@ ...@@ -80,9 +114,6 @@
document.getElementById('na').checked = ""; document.getElementById('na').checked = "";
document.getElementById('off').checked = "checked"; document.getElementById('off').checked = "checked";
} }
else{
}
} }
else else
{ {
...@@ -96,19 +127,40 @@ ...@@ -96,19 +127,40 @@
function setElementWanted() function setElementWanted()
{ {
var element = document.getElementById('myInput').value; 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() function setElementNone()
{ {
var element = document.getElementById('myInput').value; 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() function setElementUnwanted()
{ {
var element = document.getElementById('myInput').value; 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() function performSearch()
...@@ -133,6 +185,36 @@ ...@@ -133,6 +185,36 @@
window.top.postMessage(data, [data.event, data.value]); 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> </script>
</body> </body>
......
...@@ -30,7 +30,11 @@ ...@@ -30,7 +30,11 @@
echo '<li><div class="container">'; echo '<li><div class="container">';
echo '<div class="extra">';
echo '<img class="toggleFavourite" src="images/favourite.png" >'; 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]) . ');">'; echo '<div class="listElement" onclick="showRecipe(' . intval($re[0]) . ');">';
$recipe = $Recettes[intval($re[0])]; $recipe = $Recettes[intval($re[0])];
......
...@@ -11,6 +11,7 @@ body { ...@@ -11,6 +11,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
width: 80vw; width: 80vw;
border-radius: 25px; border-radius: 25px;
...@@ -53,4 +54,66 @@ body { ...@@ -53,4 +54,66 @@ body {
#searchDiv button:hover { #searchDiv button:hover {
background-color: grey; 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
...@@ -54,9 +54,15 @@ ul li:last-child { ...@@ -54,9 +54,15 @@ ul li:last-child {
object-fit: contain; object-fit: contain;
} }
.toggleFavourite { .extra {
float: right; float: right;
vertical-align: middle; display: flex;
flex-direction: column;
justify-content: right;
align-items: flex-end;
}
.toggleFavourite {
width: 32px; width: 32px;
height: auto; height: auto;
} }
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment