AvancedSearch fonctionnal

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>
 

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])];

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

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