Maintenance Gitlab - Jeudi 09 Décembre 2021 à partir de 10h - Mises à jour de sécurité

Commit 84113064 authored by ALGLAVE Ivan's avatar ALGLAVE Ivan
Browse files

Can select Ingredients you want / don't want / don't care in the AdvancedSearch page

parent 3f51e964
......@@ -4,25 +4,95 @@
<title>Drinkpedia</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/AdvancedSearch.css">
<link rel="stylesheet" type="text/css" href="css/AutoComplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type = "text/javascript" src="scripts/DataQuery.js"></script>
</head>
<body>
<form autocomplete="off">
<div class="autocomplete" style="width:300px;">
<h2>Rechercher un aliment : </h2>
<input id="myInput" autocomplete="off" type="text" name="myIngredient" placeholder="Ingrédient">
</div>
</form>
<div id="content">
<span id="elementInput" class="autocomplete">
<span>
<h2>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">
</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">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="setElementWanted();"></label>
<input id="na" name="state-d" type="radio" checked="checked" />
<label for="na" onclick="setElementNone();">/</label>
<input id="off" name="state-d" type="radio" />
<label for="off" onclick="setElementUnwanted();"></label>
<a></a>
</div>
</span>
</span>
</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);
function elementInputChange(val)
{
var toggleSwitch = document.getElementById('toggleWanted');
if(allIngredients.includes(val))
{
toggleSwitch.disabled = "false";
if(chosenIngredients.get(val) == 'wanted')
{
document.getElementById('on').checked = "checked";
document.getElementById('na').checked = "";
document.getElementById('off').checked = "";
}
else if(chosenIngredients.get(val) == 'unwanted')
{
document.getElementById('on').checked = "";
document.getElementById('na').checked = "";
document.getElementById('off').checked = "checked";
}
else{
}
}
else
{
toggleSwitch.disabled = "true";
document.getElementById('on').checked = "";
document.getElementById('na').checked = "checked";
document.getElementById('off').checked = "";
}
}
function setElementWanted()
{
var element = document.getElementById('myInput').value;
chosenIngredients.set(element, 'wanted');
}
function setElementNone()
{
var element = document.getElementById('myInput').value;
chosenIngredients.delete(element);
}
function setElementUnwanted()
{
var element = document.getElementById('myInput').value;
chosenIngredients.set(element, 'unwanted');
}
</script>
</body>
......
......@@ -4,11 +4,12 @@
<title>Drinkpedia</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/Home.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body id="body">
<div class="background"></div>
<div id="content">
<div class="topnav">
<button id="tabBtnI" class="active" value="Hierarchy.php" onclick="tabButtonClicked(this)">Hiérarchie</button>
......@@ -22,7 +23,6 @@
</iframe>
</div>
<div id="BlurredElementCenteredContainer">
<iframe id="BlurredElementEmbed" src=""></iframe>
......
......@@ -6,6 +6,7 @@
<body>
<?php
include "scripts/Functions.php";
include "Donnees.inc.php";
$id_recipe = $_GET['id_recipe'];
......@@ -14,10 +15,14 @@
$r_name = $recipe['titre'];
$r_ingredients = $recipe['ingredients'];
$r_recipe = $recipe['preparation'];
$r_image = getRecipeImage($r_name);
$exists = false;
if(file_exists('Photos/'.$r_image)) $exists = true;;
?>
<div>
<img src=<?php include "scripts/Functions.php"; echo "\"Photos/" . getRecipeImage($r_name) . "\"" ?> width="128" height="128">
<img src=<?php echo "\"Photos/" . $r_image . "\"" ?> width="128" height="128" hidden=<?php if(file_exists("Photos/" . $r_image)) echo "\"true\""; else echo "\"false\""; ?>>
<span>
<h1>
<?php echo $r_name; ?>
......
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
font: 24px Arial;
color: 555555;
font-weight: bold;
display: flex;
justify-content: center;
}
#content {
display: flex;
justify-content: center;
background-color: rgba(255, 255, 255, 0.75);
width: 80vw;
height: max-content;
border-radius: 25px;
}
.switch-toggle {
width: 6em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
#elementInput {
height: 20vh;
display: inline-flex;
justify-content: center;
align-items: center;
}
\ No newline at end of file
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
input {
width: 400px;
border: 1px solid transparent;
background-color: #BBBBBB;
padding: 10px;
font-size: 20px;
}
input[type=text] {
background-color: #BBBBBB;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
}
\ No newline at end of file
......@@ -2,10 +2,11 @@
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: none;
background-color: transparent;
}
body {
background: lightblue;
width: 100vw;
}
......@@ -15,4 +16,14 @@ body {
.category-view {
display: block;
}
button:hover {
font-weight: bolder;
}
ul {
list-style-type: none;
padding: 0;
border: 1px solid black;
}
\ No newline at end of file
......@@ -4,20 +4,25 @@
box-sizing: border-box;
}
body {
background-image: url('../images/pattern.jpg');
background-repeat: repeat;
background-size: 45%;
}
#tabFrame {
border: none;
flex-grow: 1;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav button {
background-color: cornsilk;
float: left;
color: black;
border-style: none;
background-color: rgba( 200, 200, 200, 100);
text-align: center;
padding: 14px 16px;
text-decoration: none;
......@@ -29,13 +34,11 @@
}
.topnav button:hover {
background-color: cornflowerblue;
color: black;
font-weight: bolder;
}
.topnav button.active {
background-color: #534caf;
color: white;
font-weight: bolder;
}
#content {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment