Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 808360e8 by Manuel Ruiz Toribio
Options

Ajax de recetas incompleto

parent a5baaf48
Inline Side-by-side
Showing with 229 additions and 107 deletions
app/Config/Routes.php
...@@ -46,6 +46,9 @@ $routes->get('/insert_recipe', 'InsertRecipeController::index'); ...@@ -46,6 +46,9 @@ $routes->get('/insert_recipe', 'InsertRecipeController::index');
$routes->match(['get', 'post'], '/search_ingredient', 'InsertRecipeController::search_ingredient'); $routes->match(['get', 'post'], '/search_ingredient', 'InsertRecipeController::search_ingredient');
$routes->post('/insert_recipe', 'InsertRecipeController::insert_recipe'); $routes->post('/insert_recipe', 'InsertRecipeController::insert_recipe');
$routes->match(['get', 'post'], '/search_recipe', 'RecipesController::search_recipe');
$routes->get('login','Pages::viewLogin'); $routes->get('login','Pages::viewLogin');
$routes->get('users','User::list'); $routes->get('users','User::list');
......
app/Controllers/Home.php
...@@ -8,4 +8,6 @@ class Home extends BaseController ...@@ -8,4 +8,6 @@ class Home extends BaseController
{ {
return view('welcome_message'); return view('welcome_message');
} }
} }
app/Controllers/RecipesController.php
...@@ -45,5 +45,25 @@ class RecipesController extends Controller ...@@ -45,5 +45,25 @@ class RecipesController extends Controller
} }
} }
//public function search_recipe() {
// Obtener la consulta de búsqueda desde el formulario
// $query = $this->request->getVar('query');
// Cargar el modelo de ingredientes (si no lo has hecho)
//$recipesModel = new \App\Models\RecipesModel();
// Buscar ingredientes en la base de datos que coincidan con la consulta
// $recipes = $recipesModel->search_recipe($query);
// Devolver los ingredientes coincidentes en formato JSON
// return $this->response->setJSON($recipes);
// }
public function search_recipe()
{
$query = $this->request->getVar('query');
$recipesModel = new \App\Models\RecipesModel();
$recipes = $recipesModel->search_recipe($query);
return $this->response->setJSON($recipes);
}
} }
\ No newline at end of file
app/Models/RecipesModel.php
...@@ -44,6 +44,20 @@ class recipesModel extends Model ...@@ -44,6 +44,20 @@ class recipesModel extends Model
return $query->getResult(); return $query->getResult();
} }
/* public function search_recipe($query)
{
if ($query) {
return $this->like('name', $query)->findAll();
}
return [];
} */
public function search_recipe($query)
{
if ($query) {
return $this->like('name', $query)->findAll();
}
return [];
}
} }
\ No newline at end of file
app/Views/templates/header.php
...@@ -32,7 +32,8 @@ ...@@ -32,7 +32,8 @@
<link href="<?= base_url("css/style.css") ?>" rel="stylesheet"> <link href="<?= base_url("css/style.css") ?>" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.4.min.js" <script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
...@@ -43,110 +44,114 @@ ...@@ -43,110 +44,114 @@
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header" class="header fixed-top d-flex align-items-center"> <header id="header" class="header fixed-top d-flex align-items-center">
<div class="d-flex align-items-center justify-content-between">
<a href="/home" class="logo d-flex align-items-center">
<img src="<?= base_url("iconos/logo.png") ?>" alt="" style="margin-right: 0px;">
<img class="d-none d-lg-block" src="<?= base_url("iconos/logo_a_medias.png") ?> "
style="margin-left: 0px;"></img>
</a>
<i class="bi bi-list toggle-sidebar-btn"></i>
</div><!-- End Logo -->
<div class="search-bar">
<form class="search-form d-flex align-items-center" method="POST" action="#">
<input type="text" id="search-query" name="query" placeholder="Buscar por receta..."
title="Enter search keyword">
</form>
<div id="recipe_dropdown" class="recipe-dropdown">
<ul id="recipe_list" class="recipe-list list-unstyled"></ul>
</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<a href="/home" class="logo d-flex align-items-center"> <nav class="header-nav ms-auto">
<img src="<?= base_url("iconos/logo.png") ?>" alt="" style="margin-right: 0px;"> <ul class="d-flex align-items-center">
<img class="d-none d-lg-block" src="<?= base_url("iconos/logo_a_medias.png") ?> "
style="margin-left: 0px;"></img> <li class="nav-item d-block d-lg-none">
<a class="nav-link nav-icon search-bar-toggle " href="#">
<i class="bi bi-search"></i>
</a> </a>
<i class="bi bi-list toggle-sidebar-btn"></i> </li><!-- End Search Icon-->
</div><!-- End Logo -->
<div class="search-bar">
<form class="search-form d-flex align-items-center" method="POST" action="#">
<input type="text" name="query" placeholder="Buscar por receta..." title="Enter search keyword">
<button type="submit" title="Search"><i class="bi bi-search"></i></button> <li class="nav-item dropdown pe-3">
</form>
</div><!-- End Search Bar --> <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
<img src="<?= base_url("imagenes/profile.png") ?>" alt="Profile" class="rounded-circle">
<nav class="header-nav ms-auto">
<ul class="d-flex align-items-center">
<li class="nav-item d-block d-lg-none"> <span class="d-none d-md-block dropdown-toggle ps-2">
<a class="nav-link nav-icon search-bar-toggle " href="#">
<i class="bi bi-search"></i> </span>
</a><!-- End Profile Iamge Icon -->
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
<li class="dropdown-header">
<h6>
<?php
if (isset($usuario)) {
echo $usuario->username;
} else {
echo "Usuario sin registrar";
}
?>
</h6>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="users-profile.html">
<i class="bi bi-person"></i>
<span>Mi perfil</span>
</a> </a>
</li><!-- End Search Icon--> </li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<li class="nav-item dropdown pe-3"> <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
<i class="bi bi-gear"></i>
<a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown"> <span>Ajustes de cuenta</span>
<img src="<?= base_url("imagenes/profile.png") ?>" alt="Profile" class="rounded-circle"> </a>
</li>
<li>
<hr class="dropdown-divider">
<span class="d-none d-md-block dropdown-toggle ps-2"> </li>
</span> <li>
</a><!-- End Profile Iamge Icon --> <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
<i class="bi bi-question-circle"></i>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile"> <span>¿Necesitas ayuda?</span>
<li class="dropdown-header"> </a>
<h6> </li>
<?php <li>
if (isset($usuario)) { <hr class="dropdown-divider">
echo $usuario->username; </li>
} else {
echo "Usuario sin registrar"; <li>
} <a class="dropdown-item d-flex align-items-center" href="#">
?> <i class="bi bi-box-arrow-right"></i>
</h6> <span>Cerrar sesión</span>
</li> </a>
<li> </li>
<hr class="dropdown-divider">
</li> </ul><!-- End Profile Dropdown Items -->
</li><!-- End Profile Nav -->
<li>
<a class="dropdown-item d-flex align-items-center" href="users-profile.html"> </ul>
<i class="bi bi-person"></i> </nav><!-- End Icons Navigation -->
<span>Mi perfil</span>
</a> </header><!-- End Header -->
</li> \ No newline at end of file
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="users-profile.html">
<i class="bi bi-gear"></i>
<span>Ajustes de cuenta</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
<i class="bi bi-question-circle"></i>
<span>¿Necesitas ayuda?</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bi bi-box-arrow-right"></i>
<span>Cerrar sesión</span>
</a>
</li>
</ul><!-- End Profile Dropdown Items -->
</li><!-- End Profile Nav -->
</ul>
</nav><!-- End Icons Navigation -->
</header><!-- End Header -->
\ No newline at end of file
public/css/style.css
...@@ -417,6 +417,32 @@ h6 { ...@@ -417,6 +417,32 @@ h6 {
color: #012970; color: #012970;
} }
.recipe-dropdown {
position:sticky;
left: 0;
right: 0;
top: 100%;
background: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 3px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.recipe-item {
display: flex;
align-items: center;
padding: 8px;
cursor: pointer;
}
.recipe-item:hover {
background-color: #f8f9fa;
}
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Header Nav # Header Nav
--------------------------------------------------------------*/ --------------------------------------------------------------*/
......
public/js/main.js
...@@ -321,4 +321,53 @@ ...@@ -321,4 +321,53 @@
}, 200); }, 200);
} }
function search_recipe(query) {
fetch('/search_recipe', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
},
body: 'query=' + encodeURIComponent(query)
})
.then((response) => response.json())
.then((searchResults) => {
const recipeList = document.querySelector('#recipe_list');
recipeList.innerHTML = '';
if (searchResults.length > 0) {
document.querySelector('#recipe_dropdown').style.display = 'block';
} else {
document.querySelector('#recipe_dropdown').style.display = 'none';
}
searchResults.forEach((recipe) => {
const listItem = document.createElement('li');
listItem.classList.add('recipe-item');
const nameElement = document.createElement('span');
nameElement.textContent = recipe.name;
listItem.appendChild(nameElement);
recipeList.appendChild(listItem);
});
});
}
document.addEventListener('click', function (event) {
if (!event.target.closest('.search-bar')) {
document.querySelector('#recipe_dropdown').style.display = 'none';
}
});
document.querySelector('#search-query').addEventListener('input', function (event) {
search_recipe(event.target.value);
});
})(); })();
\ No newline at end of file
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 sign in to comment