Commit 9e5b65ac authored by ALGLAVE Ivan's avatar ALGLAVE Ivan
Browse files

Changed many things, fixed advancedSearch (missing overview of selected...

Changed many things, fixed advancedSearch (missing overview of selected ingredients), RecipeList, and added a loading screen when switching screens
parent 84113064
......@@ -10,18 +10,29 @@
</head>
<body>
<?php
include 'scripts/Functions.php';
$ingredientsList = getAllIngredients();
?>
<div id="content">
<span id="elementInput" class="autocomplete">
<div id="elementInput" class="autocomplete">
<span>
<h2>Rechercher un aliment : </h2>
<h2 style="margin-right: 10px;">Rechercher un aliment :</h2>
</span>
<span>
<input id="myInput" autocomplete="off" type="text" name="myIngredient" oninput="elementInputChange(this.value)" onchange="elementInputChange(this.value)" onblur="elementInputChange(this.value)" placeholder="Ingrédient">
<input name="ingredients" list="ingredients" value="" id="myInput" autocomplete="off" type="search" oninput="elementInputChange(this.value)" onchange="elementInputChange(this.value)" placeholder="Ingrédient">
<datalist id="ingredients">
<?php
foreach($ingredientsList as $ingredient) echo '<option value="' . $ingredient . '" />' ;
?>
</datalist>
</span>
<span>
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<div disabled="true" id="toggleWanted" class="switch-toggle switch-3 switch-candy">
<div id="toggleWanted" class="switch-toggle switch-3 switch-candy unclickable">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="setElementWanted();"></label>
......@@ -34,22 +45,29 @@
<a></a>
</div>
</span>
</span>
</div>
<div id="searchDiv">
<button onclick="performSearch();">Rechercher</button>
</div>
<div id="chosenItemsOverview">
</div>
</div>
<script src="scripts/DataQuery.js"></script>
<script src="scripts/Functions.js"></script>
<script>
let chosenIngredients = new Map();
let allIngredients = [<?php include 'scripts/Functions.php'; $first = true; foreach(getAllIngredients() as $ingredient) { if(!$first) echo ','; else $first = false; echo '"' . $ingredient . '"'; } ?>];
autocomplete(document.getElementById("myInput"), allIngredients);
let allIngredients = [<?php $first = true; foreach($ingredientsList as $ingredient) { if(!$first) echo ','; else $first = false; echo '"' . $ingredient . '"'; } ?>];
var allowUnwanted = false;
var allowMissing = false;
var maxUnsatisfied = 0;
function elementInputChange(val)
{
var toggleSwitch = document.getElementById('toggleWanted');
if(allIngredients.includes(val))
{
toggleSwitch.disabled = "false";
toggleSwitch.classList.remove('unclickable');
if(chosenIngredients.get(val) == 'wanted')
{
document.getElementById('on').checked = "checked";
......@@ -68,7 +86,7 @@
}
else
{
toggleSwitch.disabled = "true";
toggleSwitch.classList.add('unclickable');
document.getElementById('on').checked = "";
document.getElementById('na').checked = "checked";
document.getElementById('off').checked = "";
......@@ -93,6 +111,28 @@
chosenIngredients.set(element, 'unwanted');
}
function performSearch()
{
var wanted = new Array();
var unwanted = new Array();
chosenIngredients.forEach((value, key) => {
if(value == 'wanted') wanted.push(key);
else if(value == 'unwanted') unwanted.push(key);
});
getRecipes(wanted, unwanted, maxUnsatisfied, allowMissing, allowUnwanted, function(e) {
notifyParent(e);
});
}
function notifyParent(e) // Send a message to the parent window, asking to display the recipe #e
{
var data = {
event: 'recipelist',
value: e
};
window.top.postMessage(data, [data.event, data.value]);
}
</script>
</body>
......
......@@ -19,7 +19,7 @@
<button id="tabBtnF" class="right" value="MyFavouriteRecipes.php" onclick="tabButtonClicked(this)">Favoris</button>
</div>
<iframe id="tabFrame" frameborder="0" src="Hierarchy.php">
<iframe id="tabFrame" onload="stopLoadingScreen();" frameborder="0" src="Hierarchy.php">
</iframe>
</div>
......@@ -29,11 +29,17 @@
<button id="BlurredElementCenteredClose">X</button>
</div>
<div id="loadingScreen">
<img id="loadingScreenImage" src=""></img>
</div>
<script>
let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed');
let loadingScreen = document.getElementById('loadingScreen');
let loadingScreenImage = document.getElementById('loadingScreenImage');
let activeTabButton = document.getElementById('tabBtnI');
......@@ -46,13 +52,17 @@
{
if(m_value == 27)
{
hideRecipe();
hideBlurred();
}
}
else if(m_event == 'recipeselect')
{
showRecipe(m_value);
}
else if(m_event == 'recipelist')
{
switchView('RecipeList.php?ids=' + m_value);
}
else if(m_event == 'hierarchyDisplay')
{
setActiveTab('tabBtnI');
......@@ -60,16 +70,17 @@
}
}
function hideRecipe()
function hideBlurred()
{
wrapper.classList.remove('active');
content.classList.remove('blur');
wraper.disabled = false;
embed.setAttribute('src','');
}
function showRecipe(id) // Show the Recipe with the id 'id' in the file 'Donnees.inc.php'
function showInBlurred(address)
{
embed.setAttribute('src','RecipeView.php?id_recipe=' + id);
embed.setAttribute('src',address);
wrapper.classList.add('active'); // Set the RecipeView wrapper active
content.classList.add('blur'); // Blurs the original content of the page
......@@ -81,13 +92,24 @@
{
if(e.keyCode === 27)
{
hideRecipe();
hideBlurred();
}
});
}
function showRecipe(id) // Show the Recipe with the id 'id' in the file 'Donnees.inc.php'
{
showInBlurred('RecipeView.php?id_recipe=' + id);
}
function showRecipeList(idsStr)
{
showInBlurred('RecipeList.php?ids=' + idsStr);
}
function switchView(viewSrc)
{
startLoadingScreen();
var tabFrame = document.getElementById('tabFrame');
tabFrame.setAttribute('src', viewSrc);
}
......@@ -101,17 +123,26 @@
}
function tabButtonClicked(b)
{
if(b.id != activeTabButton.id)
{
setActiveTab(b.id);
switchView(activeTabButton.value);
}
function startLoadingScreen()
{
loadingScreen.classList.add('active');
loadingScreenImage.src = 'images/loading.gif?' + (new Date().getTime());
}
function stopLoadingScreen()
{
loadingScreen.classList.remove('active');
loadingScreenImage.src = '';
}
let closeBtn = document.getElementById('BlurredElementCenteredClose');
closeBtn.addEventListener('click', hideRecipe);
closeBtn.addEventListener('click', hideBlurred);
</script>
......
......@@ -13,30 +13,65 @@
<?php
include "Donnees.inc.php";
include "scripts/Functions.php";
if ($_GET['ids'] == '') echo '<h1>No recipe found</h1>';
else{
$recipesIds = explode('|', $_GET['ids']);
foreach($recipesIds as $id)
$count = count($recipesIds);
for($i = 0; $i < $count; $i++)
{
$re = explode(':', $recipesIds[$i]);
echo '<li>';
echo '<div class="listElement">';
echo '<div class="listElement" onclick="showRecipe(' . intval($re[0]) . ');">';
$recipe = $Recettes[(int)$id];
$recipe = $Recettes[intval($re[0])];
$image_url = getRecipeImage((int)$id);
if($image_url != '') echo '<img src="Photos/' . $image_url . '">';
$image_url = getRecipeImage($recipe['titre']);
$image_url = '' . 'Photos/' . $image_url;
if(file_exists($image_url)) echo '<img src="' . $image_url . '"></img>';
else echo '<img src="images/missing.jfif"></img>';
echo '<h1>' . $recipe['titre'] . '</h1>';
echo '</div>';
echo '</li>';
}
}
?>
</ul>
<script>
document.addEventListener('keyup', function (e)
{
if(e.keyCode == 27)
{
var data = {
event: 'keyup',
value: e.keyCode
};
window.top.postMessage(data, [data.event, data.value]);
}
});
function showRecipe(id)
{
var data = {
event: 'recipeselect',
value: id
};
window.top.postMessage(data, [data.event, data.value]);
}
</script>
</body>
</html>
\ No newline at end of file
......@@ -16,13 +16,13 @@
$r_ingredients = $recipe['ingredients'];
$r_recipe = $recipe['preparation'];
$r_image = getRecipeImage($r_name);
$exists = false;
if(file_exists('Photos/'.$r_image)) $exists = true;;
$image_url = getRecipeImage($r_name);
$image_url = '' . 'Photos/' . $image_url;
if(!file_exists($image_url)) $image_url = 'images/missing.jfif';
?>
<div>
<img src=<?php echo "\"Photos/" . $r_image . "\"" ?> width="128" height="128" hidden=<?php if(file_exists("Photos/" . $r_image)) echo "\"true\""; else echo "\"false\""; ?>>
<img src=<?php echo "\"" . $image_url . "\"" ?> width="128" height="128"; ?>
<span>
<h1>
<?php echo $r_name; ?>
......
......@@ -9,10 +9,10 @@ body {
#content {
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(255, 255, 255, 0.75);
width: 80vw;
height: max-content;
border-radius: 25px;
}
......@@ -30,3 +30,27 @@ body {
justify-content: center;
align-items: center;
}
.unclickable {
opacity: 25%;
pointer-events: none;
}
#searchDiv {
display: flex;
justify-content: center;
align-items: center;
}
#searchDiv button {
font-size: xx-large;
font-weight: bold;
border-radius: 10px;
background-color: darkgray;
margin: 25px;
padding: 15px;
}
#searchDiv button:hover {
background-color: grey;
}
\ No newline at end of file
......@@ -5,8 +5,8 @@
}
input {
width: 400px;
border: 1px solid transparent;
background-color: #BBBBBB;
border-radius: 5px;
padding: 10px;
font-size: 20px;
}
......
......@@ -17,16 +17,19 @@ body {
.topnav {
overflow: hidden;
z-index: 2;
background-color: rgba(200, 200, 200, 0.76);
}
.topnav button {
float: left;
border-style: none;
background-color: rgba( 200, 200, 200, 100);
background-color: transparent;
text-align: center;
padding: 14px 16px;
padding: 9px 12px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
font-size: 20px;
}
.topnav button.right {
......@@ -35,10 +38,27 @@ body {
.topnav button:hover {
font-weight: bolder;
cursor: pointer;
}
.topnav button.active {
font-weight: bolder;
text-decoration: underline;
}
#loadingScreen {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
#loadingScreen.active {
display: flex;
}
#content {
......@@ -50,6 +70,7 @@ body {
#content.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
}
#BlurredElementCenteredContainer {
......
body {
padding: 20px;
background-color: darkgray;
background-color: rgba(169, 169, 169, 0.5);
}
ul {
list-style-type: none;
padding: 0;
border: 1px solid black;
border-radius: 15px;
}
ul li {
padding: 8px 16px;
height: 75px;
border-bottom: 1px solid black;
background-color: #888888;
background-color: rgba(88, 88, 88, 0.5);
display: block;
}
ul li:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
ul li:last-child {
border-bottom: none
border-bottom: none;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.listElement {
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
}
.listElement img {
border-radius: 7px;
border-color: black;
border-width: 2px;
border-style: solid;
width: 64px;
height: 64px;
margin-right: 15px;
}
\ No newline at end of file
......@@ -7,24 +7,20 @@ function query(func_name, args, callback)
function getRecipes(wanted_ingredients = [], unwanted_ingredients = [], max_unsatisfied = 0, allow_missing = true, allow_unwanted = true, callback)
{
alert('hi');
query('getRecipe', [wanted_ingredients, unwanted_ingredients, max_unsatisfied, allow_missing, allow_unwanted], callback);
query('getRecipes', [wanted_ingredients.join('|'), unwanted_ingredients.join('|'), max_unsatisfied, allow_missing, allow_unwanted], callback);
}
function getIngredients(parent_category = 'Aliment', callback)
{
alert('hi');
query('getIngredients', [parent_category], callback);
}
function getRecipeImage(id, callback)
{
alert('hi');
query('getRecipeImage', [id], callback);
}
function getAllIngredients(callback)
{
alert('getAllIngredients');
query('getAllIngredients', [], callback);
}
\ No newline at end of file
......@@ -10,6 +10,8 @@
}
else if($funcName == 'getRecipes')
{
$str = '';
foreach($_POST['arguments'] as $arg) $str = $str . ' - ' . $arg;
echo getRecipesForJS($_POST['arguments'][0], $_POST['arguments'][1], $_POST['arguments'][2], $_POST['arguments'][3], $_POST['arguments'][4]);
}
else if($funcName == 'getIngredients')
......
......@@ -25,11 +25,11 @@ function autocomplete(inp, arr) {
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.innerHTML += "<input type='hidden' value='" + i + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
inp.value = arr[parseInt(this.getElementsByTagName("input")[0].value)];
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
......@@ -87,6 +87,8 @@ function autocomplete(inp, arr) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
var input = document.getElementsByTagName("input")[0];
input.dispatchEvent(new Event('change'));
}
}
/*execute a function when someone clicks in the document:*/
......
......@@ -8,19 +8,22 @@ function recipeContains($recipe, $ingredient)
function getRecipesForJS($wanted_ingredients, $unwanted_ingredients, $max_unsatisfied, $allow_missing, $allow_unwanted)
{
$res = "";
$validRecipes = getRecipes($wanted_ingredients, $unwanted_ingredients, $max_unsatisfied, $allow_missing, $allow_unwanted);
$vrArray = [];
foreach($validRecipes as $recipe)
{
$res .= $recipe['id'] . ':' . $recipe['score'] . '|';
$vrArray[] = $recipe['id'] . ':' . $recipe['score'];
}
return $res;
return implode('|', $vrArray);
}
function getRecipes($wanted_ingredients, $unwanted_ingredients, $max_unsatisfied, $allow_missing, $allow_unwanted)
function getRecipes($wanted_ing, $unwanted_ing, $max_unsatisfied, $allow_missing, $allow_unwanted)
{
include "Donnees.inc.php";
$wanted_ingredients = array_filter(explode('|', $wanted_ing));
$unwanted_ingredients = array_filter(explode('|', $unwanted_ing));
$Recipes = array();
for($i = 0; $i < count($Recettes); $i++)
{
......@@ -36,7 +39,6 @@ function getRecipes($wanted_ingredients, $unwanted_ingredients, $max_unsatisfied
if(!$allow_missing)
{
$valid = false;
break;
}
$score++;
}
......@@ -50,7 +52,6 @@ function getRecipes($wanted_ingredients, $unwanted_ingredients, $max_unsatisfied
if(!$allow_unwanted)
{
$valid = false;
break;
}
$score++;
}
......@@ -59,7 +60,6 @@ function getRecipes($wanted_ingredients, $unwanted_ingredients, $max_unsatisfied
{
if($score <= $max_unsatisfied)
{
//$Recipes .= $i . ':' . $score . '|';
$Recipes[] = array(
'id'=> $i,
'score'=> $score
......@@ -80,10 +80,9 @@ function getIngredients($parent_category)
{
$ingredients = $Hierarchie[$parent_category]['sous-categorie'];
foreach($ingredients as $i)
{
$res .= $i . '|';
}
sort($ingredients);
$res = implode('|', $ingredients);
}
return $res;
......@@ -100,24 +99,22 @@ function getSubIngredients($cat)
{
include "Donnees.inc.php";
$sub_list = array();
$sub_list[] = $cat;
if(!isset($Hierarchie[$cat]['sous-categorie'])) $sub_list[] = $cat;
else foreach($Hierarchie[$cat]['sous-categorie'] as $ing)
{
foreach(getSubIngredients($ing) as $sub)
{
else foreach($Hierarchie[$cat]['sous-categorie'] as $ing){
foreach(getSubIngredients($ing) as $sub){