diff --git a/AdvancedSearch.php b/AdvancedSearch.php
index 40811b238975453119682a74396109b8c934ce3a..1e7df18063283c6d48a257316dac6ff43fc77abe 100644
--- a/AdvancedSearch.php
+++ b/AdvancedSearch.php
@@ -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>
diff --git a/RecipeList.php b/RecipeList.php
index 6d69ad2bbfd8709530d8cabeeeef126525685b5a..0e7a5ec3e936b57402be8eaf37bb49d98a366e2d 100644
--- a/RecipeList.php
+++ b/RecipeList.php
@@ -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])];
diff --git a/css/AdvancedSearch.css b/css/AdvancedSearch.css
index c6bcfa80f995752f25ba164867ed561ca465df48..8fcb98ffdba002ead1aeeb41475f48d70a53a093 100644
--- a/css/AdvancedSearch.css
+++ b/css/AdvancedSearch.css
@@ -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
diff --git a/css/RecipeList.css b/css/RecipeList.css
index fc6cf32a0545efa25737d05d26e9c16c07680065..1c4a75ed81ff0938b144d826d872701d5dc288c8 100644
--- a/css/RecipeList.css
+++ b/css/RecipeList.css
@@ -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
diff --git a/images/check.png b/images/check.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e7a0a7f676091a599ee779e82295ac210cce112
Binary files /dev/null and b/images/check.png differ
diff --git a/images/uncheck.png b/images/uncheck.png
new file mode 100644
index 0000000000000000000000000000000000000000..610c64cc6e5b3ee7d2b77855d6abfbdbbe80519c
Binary files /dev/null and b/images/uncheck.png differ