Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
AdvancedSearch.php
View file @ 9e5b65ac
...@@ -10,18 +10,29 @@ ...@@ -10,18 +10,29 @@
</head> </head>
<body> <body>
<?php
include 'scripts/Functions.php';
$ingredientsList = getAllIngredients();
?>
<div id="content"> <div id="content">
<span id="elementInput" class="autocomplete"> <div id="elementInput" class="autocomplete">
<span> <span>
<h2>Rechercher un aliment : </h2> <h2 style="margin-right: 10px;">Rechercher un aliment :</h2>
</span> </span>
<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>
<span> <span>
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" /> <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="" /> <input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="setElementWanted();">✓</label> <label for="on" onclick="setElementWanted();">✓</label>
...@@ -34,22 +45,29 @@ ...@@ -34,22 +45,29 @@
<a></a> <a></a>
</div> </div>
</span> </span>
</span> </div>
<div id="searchDiv">
<button onclick="performSearch();">Rechercher</button>
</div>
<div id="chosenItemsOverview">
</div>
</div> </div>
<script src="scripts/DataQuery.js"></script>
<script src="scripts/Functions.js"></script>
<script> <script>
let chosenIngredients = new Map(); 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 . '"'; } ?>]; let allIngredients = [<?php $first = true; foreach($ingredientsList as $ingredient) { if(!$first) echo ','; else $first = false; echo '"' . $ingredient . '"'; } ?>];
autocomplete(document.getElementById("myInput"), allIngredients);
var allowUnwanted = false;
var allowMissing = false;
var maxUnsatisfied = 0;
function elementInputChange(val) function elementInputChange(val)
{ {
var toggleSwitch = document.getElementById('toggleWanted'); var toggleSwitch = document.getElementById('toggleWanted');
if(allIngredients.includes(val)) if(allIngredients.includes(val))
{ {
toggleSwitch.disabled = "false"; toggleSwitch.classList.remove('unclickable');
if(chosenIngredients.get(val) == 'wanted') if(chosenIngredients.get(val) == 'wanted')
{ {
document.getElementById('on').checked = "checked"; document.getElementById('on').checked = "checked";
...@@ -68,7 +86,7 @@ ...@@ -68,7 +86,7 @@
} }
else else
{ {
toggleSwitch.disabled = "true"; toggleSwitch.classList.add('unclickable');
document.getElementById('on').checked = ""; document.getElementById('on').checked = "";
document.getElementById('na').checked = "checked"; document.getElementById('na').checked = "checked";
document.getElementById('off').checked = ""; document.getElementById('off').checked = "";
...@@ -93,6 +111,28 @@ ...@@ -93,6 +111,28 @@
chosenIngredients.set(element, 'unwanted'); 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> </script>
</body> </body>
......
Home.php
View file @ 9e5b65ac
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<button id="tabBtnF" class="right" value="MyFavouriteRecipes.php" onclick="tabButtonClicked(this)">Favoris</button> <button id="tabBtnF" class="right" value="MyFavouriteRecipes.php" onclick="tabButtonClicked(this)">Favoris</button>
</div> </div>
<iframe id="tabFrame" frameborder="0" src="Hierarchy.php"> <iframe id="tabFrame" onload="stopLoadingScreen();" frameborder="0" src="Hierarchy.php">
</iframe> </iframe>
</div> </div>
...@@ -29,11 +29,17 @@ ...@@ -29,11 +29,17 @@
<button id="BlurredElementCenteredClose">X</button> <button id="BlurredElementCenteredClose">X</button>
</div> </div>
<div id="loadingScreen">
<img id="loadingScreenImage" src=""></img>
</div>
<script> <script>
let wrapper = document.getElementById('BlurredElementCenteredContainer'); let wrapper = document.getElementById('BlurredElementCenteredContainer');
let content = document.getElementById('content'); let content = document.getElementById('content');
let embed = document.getElementById('BlurredElementEmbed'); let embed = document.getElementById('BlurredElementEmbed');
let loadingScreen = document.getElementById('loadingScreen');
let loadingScreenImage = document.getElementById('loadingScreenImage');
let activeTabButton = document.getElementById('tabBtnI'); let activeTabButton = document.getElementById('tabBtnI');
...@@ -46,13 +52,17 @@ ...@@ -46,13 +52,17 @@
{ {
if(m_value == 27) if(m_value == 27)
{ {
hideRecipe(); hideBlurred();
} }
} }
else if(m_event == 'recipeselect') else if(m_event == 'recipeselect')
{ {
showRecipe(m_value); showRecipe(m_value);
} }
else if(m_event == 'recipelist')
{
switchView('RecipeList.php?ids=' + m_value);
}
else if(m_event == 'hierarchyDisplay') else if(m_event == 'hierarchyDisplay')
{ {
setActiveTab('tabBtnI'); setActiveTab('tabBtnI');
...@@ -60,16 +70,17 @@ ...@@ -60,16 +70,17 @@
} }
} }
function hideRecipe() function hideBlurred()
{ {
wrapper.classList.remove('active'); wrapper.classList.remove('active');
content.classList.remove('blur'); content.classList.remove('blur');
wraper.disabled = false; 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 wrapper.classList.add('active'); // Set the RecipeView wrapper active
content.classList.add('blur'); // Blurs the original content of the page content.classList.add('blur'); // Blurs the original content of the page
...@@ -81,13 +92,24 @@ ...@@ -81,13 +92,24 @@
{ {
if(e.keyCode === 27) 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) function switchView(viewSrc)
{ {
startLoadingScreen();
var tabFrame = document.getElementById('tabFrame'); var tabFrame = document.getElementById('tabFrame');
tabFrame.setAttribute('src', viewSrc); tabFrame.setAttribute('src', viewSrc);
} }
...@@ -102,16 +124,25 @@ ...@@ -102,16 +124,25 @@
function tabButtonClicked(b) function tabButtonClicked(b)
{ {
if(b.id != activeTabButton.id)
{
setActiveTab(b.id); setActiveTab(b.id);
switchView(activeTabButton.value); 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'); let closeBtn = document.getElementById('BlurredElementCenteredClose');
closeBtn.addEventListener('click', hideRecipe); closeBtn.addEventListener('click', hideBlurred);
</script> </script>
......
RecipeList.php
View file @ 9e5b65ac
...@@ -13,29 +13,64 @@ ...@@ -13,29 +13,64 @@
<?php <?php
include "Donnees.inc.php"; include "Donnees.inc.php";
include "scripts/Functions.php"; include "scripts/Functions.php";
$recipesIds = explode('|', $_GET['ids']); if ($_GET['ids'] == '') echo '<h1>No recipe found</h1>';
foreach($recipesIds as $id) else{
{
echo '<li>';
echo '<div class="listElement">';
$recipe = $Recettes[(int)$id]; $recipesIds = explode('|', $_GET['ids']);
$count = count($recipesIds);
for($i = 0; $i < $count; $i++)
{
$re = explode(':', $recipesIds[$i]);
echo '<li>';
echo '<div class="listElement" onclick="showRecipe(' . intval($re[0]) . ');">';
$recipe = $Recettes[intval($re[0])];
$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>';
$image_url = getRecipeImage((int)$id); echo '</div>';
if($image_url != '') echo '<img src="Photos/' . $image_url . '">'; echo '</li>';
}
echo '<h1>' . $recipe['titre'] . '</h1>';
echo '</div>';
echo '</li>';
} }
?> ?>
</ul> </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> </body>
......
RecipeView.php
View file @ 9e5b65ac
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
$r_ingredients = $recipe['ingredients']; $r_ingredients = $recipe['ingredients'];
$r_recipe = $recipe['preparation']; $r_recipe = $recipe['preparation'];
$r_image = getRecipeImage($r_name); $image_url = getRecipeImage($r_name);
$exists = false; $image_url = '' . 'Photos/' . $image_url;
if(file_exists('Photos/'.$r_image)) $exists = true;; if(!file_exists($image_url)) $image_url = 'images/missing.jfif';
?> ?>
<div> <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> <span>
<h1> <h1>
<?php echo $r_name; ?> <?php echo $r_name; ?>
......
css/AdvancedSearch.css
View file @ 9e5b65ac
...@@ -9,10 +9,10 @@ body { ...@@ -9,10 +9,10 @@ body {
#content { #content {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
width: 80vw; width: 80vw;
height: max-content;
border-radius: 25px; border-radius: 25px;
} }
...@@ -29,4 +29,28 @@ body { ...@@ -29,4 +29,28 @@ body {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: 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
css/AutoComplete.css
View file @ 9e5b65ac
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
} }
input { input {
width: 400px; width: 400px;
border: 1px solid transparent;
background-color: #BBBBBB; background-color: #BBBBBB;
border-radius: 5px;
padding: 10px; padding: 10px;
font-size: 20px; font-size: 20px;
} }
......
css/Home.css
View file @ 9e5b65ac
...@@ -17,16 +17,19 @@ body { ...@@ -17,16 +17,19 @@ body {
.topnav { .topnav {
overflow: hidden; overflow: hidden;
z-index: 2;
background-color: rgba(200, 200, 200, 0.76);
} }
.topnav button { .topnav button {
float: left; float: left;
border-style: none; border-style: none;
background-color: rgba( 200, 200, 200, 100); background-color: transparent;
text-align: center; text-align: center;
padding: 14px 16px; padding: 9px 12px;
text-decoration: none; text-decoration: none;
font-size: 17px; font-weight: bold;
font-size: 20px;
} }
.topnav button.right { .topnav button.right {
...@@ -35,10 +38,27 @@ body { ...@@ -35,10 +38,27 @@ body {
.topnav button:hover { .topnav button:hover {
font-weight: bolder; font-weight: bolder;
cursor: pointer;
} }
.topnav button.active { .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 { #content {
...@@ -50,6 +70,7 @@ body { ...@@ -50,6 +70,7 @@ body {
#content.blur { #content.blur {
filter: blur(5px); filter: blur(5px);
-webkit-filter: blur(5px);
} }
#BlurredElementCenteredContainer { #BlurredElementCenteredContainer {
......
css/RecipeList.css
View file @ 9e5b65ac
body { body {
padding: 20px; padding: 20px;
background-color: darkgray; background-color: rgba(169, 169, 169, 0.5);
} }
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
border: 1px solid black; border: 1px solid black;
border-radius: 15px;
} }
ul li { ul li {
padding: 8px 16px; padding: 8px 16px;
height: 75px; height: 75px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
background-color: #888888; background-color: rgba(88, 88, 88, 0.5);
display: block; display: block;
} }
ul li:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
ul li:last-child { ul li:last-child {
border-bottom: none border-bottom: none;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.listElement {
display: flex;