Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit d073734b by Manuel Ruiz Toribio
Options

Añadir ingredientes nuevos

parent 17a568fc
Inline Side-by-side
Showing with 123 additions and 144 deletions
app/Config/Routes.php
......@@ -77,9 +77,7 @@ $routes->get('users', 'User::list', ['filter' => 'admin_auth']);
$routes->get('home','Pages::prueba');
$routes->get('(:segment)', 'Home::index');
// Ruta para la búsqueda de re
$routes->post('/filter_recipes', 'RecipesController::filter_recipes');
$routes->match(['get', 'post'], '/filterRecipes', 'RecipesController::filterRecipes');
......
app/Controllers/RecipesController.php
......@@ -86,23 +86,17 @@ class RecipesController extends Controller
// En tu controlador de recetas
public function filter_recipes() {
$is_vegan = $this->request->getPost('is_vegan');
$origin = $this->request->getPost('origin');
$season = $this->request->getPost('season');
$recipesModel = new \App\Models\RecipesModel();
// Utiliza el método del modelo para obtener las recetas filtradas
$recipes = $recipesModel->filter_recipes($is_vegan, $origin, $season);
public function filterRecipes() {
$isVegan = $this->request->getVar('is_vegan');
$origin = $this->request->getVar('origin');
$season = $this->request->getVar('season');
// Crear la vista parcial de las recetas y la devuelve
$data = [
'recipes' => $recipes
];
$recipesModel = new \App\Models\RecipesModel();
$recipes = $recipesModel->filterRecipes($isVegan, $origin, $season);
echo view('pages/recipe_cards', $data);
echo json_encode($recipes);
}
}
\ No newline at end of file
app/Models/RecipesModel.php
......@@ -62,25 +62,23 @@ class RecipesModel extends Model
return $this->delete($id);
}
public function filter_recipes($is_vegan, $origin, $season) {
$builder = $this->db->table('recipes');
public function filterRecipes($isVegan, $origin, $season) {
$builder = $this->db->table($this->table);
// Filtra por si es vegano o no
if ($is_vegan == 1) {
$builder->where('is_vegan', $is_vegan);
if (!empty($isVegan)) {
$builder->where('is_vegan', $isVegan);
}
// Filtra por origen
if (!empty($origin)) {
$builder->whereIn('origin', $origin);
}
// Filtra por estaciones
if (!empty($season)) {
$builder->whereIn('season', $season);
$builder->where('season', $season);
}
return $builder->get()->getResult();
}
}
\ No newline at end of file
app/Views/pages/home.php
......@@ -33,16 +33,7 @@
</div>
<div class="col-lg-9 col-md-8 col-sm-12">
<div class="filter">
<a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<li class="dropdown-header text-start">
<h6>Opciones</h6>
</li>
<li><a class="dropdown-item" href="#">Guardar</a></li>
<li><a class="dropdown-item" href="#">Compartir</a></li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">
......@@ -78,47 +69,37 @@
<script>
let originalRecipes;
$(document).ready(function () {
// Cuando se hace click en cualquier checkbox
originalRecipes = $("#recipeCards").html();
$("input[type='checkbox']").click(function () {
let vegan = $('#checkboxOne').is(':checked') ? 1 : 0;
let origins = [];
let seasons = [];
$(document).ready(function() {
$('.filter-checkbox').change(function() {
var filters = {
is_vegan: $('#checkboxOne').is(':checked'),
origin: [],
season: []
};
// Recoger los valores de los checkboxes de origen seleccionados
$("input[id^='checkboxFour']:checked, input[id^='checkboxFive']:checked, input[id^='checkboxSix']:checked, input[id^='checkboxSeven']:checked, input[id^='checkboxEight']:checked, input[id^='checkboxNine']:checked").each(function () {
origins.push($(this).val());
});
if ($('#checkboxFour').is(':checked')) filters.origin.push('India');
if ($('#checkboxFive').is(':checked')) filters.origin.push('Francia');
if ($('#checkboxSix').is(':checked')) filters.origin.push('China');
if ($('#checkboxSeven').is(':checked')) filters.origin.push('México');
if ($('#checkboxEight').is(':checked')) filters.origin.push('España');
if ($('#checkboxNine').is(':checked')) filters.origin.push('Japón');
// y así sucesivamente para cada país
// Recoger los valores de los checkboxes de estaciones seleccionados
$("input[id^='checkboxTen']:checked, input[id^='checkboxEleven']:checked, input[id^='checkboxTwelve']:checked, input[id^='checkbox13']:checked").each(function () {
seasons.push($(this).val());
});
if ($('#checkboxTen').is(':checked')) filters.season.push('Invierno');
if ($('#checkboxEleven').is(':checked')) filters.season.push('Primavera');
if ($('#checkboxTwelve').is(':checked')) filters.season.push('Verano');
if ($('#checkbox13').is(':checked')) filters.season.push('Otoño');
// y así sucesivamente para cada estación
// Verificar si todos los checkboxes están desmarcados
if ($("input[type='checkbox']:checked").length == 0) {
// Si todos los checkboxes están desmarcados, restablece el contenido de las recetas
$("#recipeCards").html(originalRecipes);
} else {
// Si no, realiza la petición AJAX
$.ajax({
url: '/filter_recipes', // Asegúrate de que esta ruta esté definida en tus rutas
method: 'POST',
data: {
is_vegan: vegan,
origin: origins,
season: seasons
}, //Meter los datos en un body para hacer el query directamente, especificar el formato JSON y comprobar si hay que especificar en header
success: function (data) {
// Actualizamos el contenido de las recetas
$("#recipeCards").html(data);
originalRecipes = $("#recipeCards").html();
}
});
}
$.ajax({
url: '/Controllers/RecipesController', // la URL de tu controlador que filtra las recetas
method: 'POST',
data: filters,
success: function(data) {
$('#recipeCards').html(data); // actualiza el contenido de la sección de recetas
}
});
});
});
</script>
app/Views/pages/recipe_cards.php deleted 100644 → 0
<?php
if (sizeof($recipes) > 0) {
foreach ($recipes as $row) {
$ingredients = $recipesModel->get_recipe_ingredients($row->id);
?>
<!-- Inicio de la tarjeta de la receta -->
<div class="card info-card sales-card"
onclick="window.location.href='<?php echo base_url('recipe/' . $row->id); ?>'">
<a href="<?php echo base_url('recipe/' . $row->id); ?>">
</a>
<div class="row flex-nowrap">
<div class="col-lg-3 col-md-4 col-sm-12 imagen-container">
<img src="<?php echo base_url('recipe/image/' . $row->id); ?>" alt=""
class="img-fluid rounded-start">
</div>
<div class="col-lg-9 col-md-8 col-sm-12">
<div class="filter">
<a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<li class="dropdown-header text-start">
<h6>Opciones</h6>
</li>
<li><a class="dropdown-item" href="#">Guardar</a></li>
<li><a class="dropdown-item" href="#">Compartir</a></li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">
<?php echo $row->name; ?> <span>|
<?php echo $row->origin; ?>
</span>
</h5>
<!--ingredientes-->
<?php foreach ($ingredients as $ingredient) { ?>
<div class="chip" title="Cantidad: <?php echo $ingredient->amount; ?>">
<img src="imagenes/ingredientes/<?php echo $ingredient->icon; ?>">
<b style="font-size: 14px">
<?php echo $ingredient->name; ?>
</b>
</div>
<?php } ?>
<!--fin ingredientes-->
</div>
</div>
</div>
</div>
<!-- Fin de la tarjeta de la receta -->
<?php
}
}
?>
app/Views/templates/header.php
......@@ -198,7 +198,7 @@
<!--Contenido del dropdown-->
<ul class="vegan-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Order one">
<input type="checkbox" class="filter-checkbox" id="checkboxOne" value="Order one">
<label for="checkboxOne">Recetas Veganas </label>
</li>
</ul>
......@@ -215,41 +215,41 @@
<!--Contenido del dropdown-->
<ul class="indian-cboxtags">
<li>
<input type="checkbox" id="checkboxFour" value="India">
<input type="checkbox" class="filter-checkbox" id="checkboxFour" value="India">
<label for="checkboxFour">India </label>
</li>
</ul>
<ul class="french-cboxtags">
<li>
<input type="checkbox" id="checkboxFive" value="Francia">
<input type="checkbox" class="filter-checkbox" id="checkboxFive" value="Francia">
<label for="checkboxFive">Francia </label>
</li>
</ul>
<ul class="chinese-cboxtags">
<li>
<input type="checkbox" id="checkboxSix" value="China">
<input type="checkbox" class="filter-checkbox" id="checkboxSix" value="China">
<label for="checkboxSix">China </label>
</li>
</ul>
<ul class="mexican-cboxtags">
<li>
<input type="checkbox" id="checkboxSeven" value="México">
<input type="checkbox" class="filter-checkbox" id="checkboxSeven" value="México">
<label for="checkboxSeven">México </label>
</li>
</ul>
<ul class="spanish-cboxtags">
<li>
<input type="checkbox" id="checkboxEight" value="España">
<input type="checkbox" class="filter-checkbox" id="checkboxEight" value="España">
<label for="checkboxEight">España </label>
</li>
</ul>
<ul class="japanese-cboxtags">
<li>
<input type="checkbox" id="checkboxNine" value="Japón">
<input type="checkbox" class="filter-checkbox" id="checkboxNine" value="Japón">
<label for="checkboxNine">Japón </label>
</li>
</ul>
......@@ -268,27 +268,27 @@
<!--Contenido del dropdown-->
<ul class="winter-cboxtags">
<li>
<input type="checkbox" id="checkboxTen" value="Invierno">
<input type="checkbox" class="filter-checkbox" id="checkboxTen" value="Invierno">
<label for="checkboxTen">Invierno </label>
</li>
</ul>
<ul class="spring-cboxtags">
<li>
<input type="checkbox" id="checkboxEleven" value="Primavera">
<input type="checkbox" class="filter-checkbox" id="checkboxEleven" value="Primavera">
<label for="checkboxEleven">Primavera </label>
</li>
</ul>
<ul class="summer-cboxtags">
<li>
<input type="checkbox" id="checkboxTwelve" value="Verano">
<input type="checkbox" class="filter-checkbox" id="checkboxTwelve" value="Verano">
<label for="checkboxTwelve">Verano </label>
</li>
</ul>
<ul class="autumn-cboxtags">
<li>
<input type="checkbox" id="checkbox13" value="Otoño">
<input type="checkbox" class="filter-checkbox" id="checkbox13" value="Otoño">
<label for="checkbox13">Otoño </label>
</li>
</ul>
......@@ -327,4 +327,46 @@
</ul>
</aside><!-- End Sidebar-->
\ No newline at end of file
</aside><!-- End Sidebar-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
let isVegan = $('#checkboxOne').is(":checked") ? 1 : 0;
let origin = [];
let season = [];
$("input[id^='checkbox']:checked").each(function() {
let id = $(this).attr('id');
if (id === 'checkboxFour' || id === 'checkboxFive' || id === 'checkboxSix' || id === 'checkboxSeven' || id === 'checkboxEight' || id === 'checkboxNine') {
origin.push($(this).val());
} else if (id === 'checkboxTen' || id === 'checkboxEleven' || id === 'checkboxTwelve' || id === 'checkbox13') {
season.push($(this).val());
}
});
$.ajax({
url: '/recipes/filterRecipes',
method: 'POST',
data: {is_vegan: isVegan, origin: origin, season: season},
success: function(data) {
let recipes = JSON.parse(data);
// Aquí puedes reemplazar las tarjetas de recetas existentes con las
let recipeCards = '';
for(let i = 0; i < recipes.length; i++) {
recipeCards += '<div class="recipe-card">';
recipeCards += '<h2>' + recipes[i].name + '</h2>';
recipeCards += '<p>' + recipes[i].description + '</p>';
recipeCards += '</div>';
}
$('#recipes-container').html(recipeCards);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});
</script>
\ No newline at end of file
public/css/style.css
......@@ -1303,6 +1303,7 @@ s
.card:hover {
background: linear-gradient(135deg, #FA6E59, #FFDB5C);
box-shadow: 0 5px 15px #340e8b91;
cursor: pointer;
}
......
public/js/main.js
......@@ -45,11 +45,27 @@
});
}
// Agregar evento para ir a una receta cuando se seleccione
recipesSearch.addEventListener('input', function (event) {
// Llamar a la función search_recipe para buscar y mostrar recetas coincidentes
search_recipe(event.target.value);
});
// Agregar evento para ir a una receta cuando se seleccione
recipesSearch.addEventListener('input', function (event) {
// Llamar a la función search_recipe para buscar y mostrar recetas coincidentes
search_recipe(event.target.value);
});
recipesSearch.addEventListener('keydown', function (event) {
if (event.keyCode === 13) { // Verificar si la tecla presionada es Enter (código 13)
event.preventDefault(); // Prevenir el comportamiento predeterminado del Enter (enviar formulario, etc.)
const recipeList = document.querySelector('#recipe_list');
const firstRecipe = recipeList.querySelector('li'); // Obtener el primer elemento de la lista
if (firstRecipe) { // Verificar si hay al menos una receta en la lista
const recipeLink = firstRecipe.getAttribute('href');
if (recipeLink) {
window.location.href = recipeLink; // Redirigir a la primera receta
}
}
}
});
"use strict";
......
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