Skip to content
Snippets Groups Projects
Commit 7b7d1960 authored by ALGLAVE Ivan's avatar ALGLAVE Ivan
Browse files

AvancedSearch fonctionnal

parent 1f0fbba7
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
......@@ -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])];
......
......@@ -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
......@@ -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

14.3 KiB

images/uncheck.png

16.5 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment