Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 2fd530ff by Manuel Ruiz Toribio
Options

Filtros operativos y correccion de bugs

parent e7bb7bd9
Inline Side-by-side
Showing with 280 additions and 182 deletions
README.md
# Wa2Eat
# Wa2Eat
## Requisitos iniciales (Primera reunión con el cliente)
- **Registro de usuarios:** La página debe permitir a los usuarios registrarse y crear una cuenta para poder utilizar las funciones de la página. Los usuarios deben poder crear un perfil con información personal básica como su nombre y dirección de correo electrónico.
- **Función de ingreso de ingredientes:** La página debe permitir a los usuarios ingresar una lista de ingredientes que tienen en su hogar, junto con su fecha de caducidad. Esto ayudará a la página a ofrecer recomendaciones personalizadas de recetas para cada usuario.
- **Recomendaciones de recetas:** La página debe contar con una función que permita a los usuarios recibir recomendaciones de recetas basadas en los ingredientes que tienen en su hogar. Estas recomendaciones deberán estar ordenadas por orden de relevancia y podrán incluir también sugerencias para ingredientes que falten en la lista.
- **Función de ingreso de recetas:** La página debe permitir a los usuarios ingresar recetas con los ingredientes de cada una. Además, se tendrá la opción de añadir características adicionales para la receta, como la elaboración o el origen de la misma.
- **Filtros de búsqueda:** La página debe contar con diferentes filtros de búsqueda para que los usuarios puedan buscar recetas por temporada, país de origen, tipo de comida, etc. Esto ayudará a los usuarios a encontrar recetas específicas que se ajusten a sus necesidades.
- **Función de búsqueda de recetas:** La página debe contar con una función que permita a los usuarios buscar recetas en función de una serie de ingredientes introducidos, incluso si estos ingredientes no se encuentran en su lista de ingredientes en su cuenta.
- **Función de búsqueda de recetas:** La página debe contar con una función que permita a los usuarios buscar recetas que se encuentren disponibles.
- **Recetas detalladas:** Cada receta debe contar con una lista detallada de ingredientes, pasos a seguir y recomendaciones para la presentación de la comida. Además, es importante que se incluyan fotografías de las recetas para que los usuarios puedan ver cómo debe quedar la comida final.
- **Diseño y navegación:** Es importante que la página tenga un diseño atractivo y una navegación sencilla e intuitiva. Esto facilitará la búsqueda y el uso de las diferentes funciones de la página para los usuarios.
......
app/Config/Routes.php
<?php
namespace Config;
use App\Controllers\RecipesController;
// Create a new instance of our RouteCollection class.
$routes = Services::routes();
......@@ -46,7 +47,7 @@ $routes->get('/logout', 'User::logout');
// Ruta para ver una receta
$routes->get('/recipe/(:num)', 'RecipesController::view_recipe/$1');
$routes->get('/recipe/(:num)', 'RecipesController::view_recipe/$1');
//$routes->get('/recipe/(:num)', 'RecipesController::view_recipe/$1');
// Ruta para obtener una imagen de una receta dado un id
$routes->get('recipe/image/(:num)', 'RecipesController::show_image/$1');
......@@ -79,11 +80,8 @@ $routes->get('home','Pages::prueba');
$routes->get('(:segment)', 'Home::index');
// Ruta para la búsqueda de recetas
$routes->post('/filter_recipes', 'RecipesController::filter_recipes');
$routes->match(['get', 'post'], '/filterRecipes', 'RecipesController::filterRecipes');
// Ruta para el filtrado de recetas usando AJAX
$routes->match(['get', 'post'], '/getFilteredRecipes', [RecipesController::class, 'getFilteredRecipes']);
......
app/Controllers/Insert.php
......@@ -45,7 +45,7 @@ public function insertAjax()
// Código de registro y respuesta exitosa
$recipe_name = $this->request->getVar('recipe_name');
$recipe_description = $this->request->getVar('recipe_description');
$is_vegan = $this->request->getVar('is_vegan');
$is_vegan = $this->request->getPost('is_vegan') !== null ? 1 : 0;
$origin = $this->request->getVar('origin');
$season = $this->request->getVar('season');
$instructions = $this->request->getVar('instructions');
......@@ -54,16 +54,16 @@ public function insertAjax()
$recipeData = [
'recipe_name' => $recipe_name,
'recipe_description' => $recipe_description,
'is_vegan' => $is_vegan,
'is_vegan' => $is_vegan, // Aquí usamos $is_vegan
'origin' => $origin,
'season' => $season,
'instructions' => $instructions,
'recipe_photo' => $recipe_photo,
'recipe_video' => $recipe_video,
];
$recipes_model->saveRecipe($recipe_name,$season,$origin,$recipe_photo,$is_vegan,$recipe_description,$instructions,$recipe_video);
return $this->response->setStatusCode(200)->setJSON([
......
app/Controllers/RecipesController.php
......@@ -86,17 +86,30 @@ class RecipesController extends Controller
// En tu controlador de recetas
public function filterRecipes() {
$isVegan = $this->request->getVar('is_vegan');
$origin = $this->request->getVar('origin');
$season = $this->request->getVar('season');
/* public function filter_recipes() {
$vegan = $this->request->getPost('is_vegan') == 'Order one' ? 1 : 0;
$origin = $this->request->getPost('origin');
$season = $this->request->getPost('season');
$recipesModel = new \App\Models\RecipesModel();
$recipes = $recipesModel->filterRecipes($isVegan, $origin, $season);
$recipes = $recipesModel->getFilteredRecipes($vegan, $origin, $season);
echo json_encode($recipes);
}
$data = [];
$data['recipes'] = $recipes;
$data['recipesModel'] = $recipesModel;
echo view('home', $data);
} */
public function getFilteredRecipes()
{
$model = new RecipesModel();
$filters = $this->request->getPost();
$recipes = $model->filterRecipes($filters);
return $this->response->setJSON($recipes);
}
}
\ No newline at end of file
app/Models/RecipesModel.php
......@@ -61,24 +61,52 @@ class RecipesModel extends Model
public function deleteRecipe($id) {
return $this->delete($id);
}
/* public function filterRecipes($filters){
$builder = $this->builder();
if(isset($filters['origin'])){
$builder->whereIn('origin', $filters['origin']);
}
if(isset($filters['season'])){
$builder->whereIn('season', $filters['season']);
}
if(isset($filters['is_vegan'])){
$builder->whereIn('is_vegan', $filters['is_vegan']);
}
return $builder->get()->getResultArray();*/
public function filterRecipes($filters)
{
$builder = $this->db->table('recipes');
$builder->select('id, name, season, origin, is_vegan, description, instructions, link');
public function filterRecipes($isVegan, $origin, $season) {
$builder = $this->db->table($this->table);
if (!empty($filters['origin'])) {
$builder->whereIn('origin', $filters['origin']);
}
if (!empty($isVegan)) {
$builder->where('is_vegan', $isVegan);
if (!empty($filters['season'])) {
$builder->whereIn('season', $filters['season']);
}
if (!empty($origin)) {
$builder->whereIn('origin', $origin);
if (!empty($filters['is_vegan'])) {
$builder->where('is_vegan', $filters['is_vegan']);
}
if (!empty($season)) {
$builder->where('season', $season);
$query = $builder->get();
$recipes = $query->getResult();
// Itera sobre cada receta y obtén los ingredientes de cada una
foreach ($recipes as $recipe) {
$recipe->ingredients = $this->get_recipe_ingredients($recipe->id);
}
return $builder->get()->getResult();
return $recipes;
}
}
}
\ No newline at end of file
app/Views/pages/home.php
......@@ -21,12 +21,12 @@
$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>
</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=""
......@@ -79,39 +79,71 @@
</main><!-- End #main -->
<script type="text/javascript">
var base_url = '<?php echo base_url(); ?>';
</script>
<script>
$(document).ready(function() {
$('.filter-checkbox').change(function() {
var filters = {
is_vegan: $('#checkboxOne').is(':checked'),
origin: [],
season: []
};
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
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
$.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
}
$(document).ready(function () {
$('.filter-checkbox').on('change', function () {
let filters = {
is_vegan: $('#checkboxOne').is(':checked') ? 1 : 0,
origin: [],
season: []
};
// agrega los valores de los checkboxes seleccionados a los filtros
$('.indian-cboxtags input:checked, .french-cboxtags input:checked, .chinese-cboxtags input:checked, .mexican-cboxtags input:checked, .spanish-cboxtags input:checked, .japanese-cboxtags input:checked').each(function () {
filters.origin.push($(this).val());
});
$('.winter-cboxtags input:checked, .spring-cboxtags input:checked, .summer-cboxtags input:checked, .autumn-cboxtags input:checked').each(function () {
filters.season.push($(this).val());
});
$.post('/getFilteredRecipes', filters, function (data) {
// Limpia la sección de recetas antes de agregar las nuevas recetas
$('.section.dashboard').empty();
// Genera el contenido HTML para cada receta y lo agrega a la sección de recetas
$.each(data, function (i, recipe) {
let ingredientsHtml = '';
$.each(recipe.ingredients, function (j, ingredient) {
ingredientsHtml += `
<div class="chip" title="Cantidad: ${ingredient.amount}">
<img src="imagenes/ingredientes/${ingredient.icon}">
<b style="font-size: 14px">${ingredient.name}</b>
</div>`;
});
let recipeHtml = `
<div class="card info-card sales-card" onclick="window.location.href='recipe/${recipe.id}'">
<a href="recipe/${recipe.id}"></a>
<div class="row flex-nowrap">
<div class="col-lg-3 col-md-4 col-sm-12 imagen-container">
<img src="${base_url}/recipe/image/${recipe.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>
</div>
<div class="card-body">
<h5 class="card-title">
${recipe.name} <span>| ${recipe.origin}</span>
</h5>
${ingredientsHtml}
</div>
</div>
</div>
</div>`;
$('.section.dashboard').append(recipeHtml);
});
}, 'json');
});
});
});
});
</script>
</script>
\ No newline at end of file
app/Views/pages/insertRecipe.php
......@@ -46,6 +46,7 @@
<option value="México">Mexicana</option>
<option value="China">China</option>
<option value="India">India</option>
<option value="Otro">Otro</option>
</select>
</div>
......@@ -66,7 +67,7 @@
<div class="form-group col-md-4">
<label for="is_vegan" class="chip-label">Vegana</label>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="is_vegan" name="is_vegan">
<input type="checkbox" class="custom-control-input" id="is_vegan" name="is_vegan" >
<label class="custom-control-label chip" for="is_vegan"></label>
</div>
</div>
......
app/Views/pages/login.php
......@@ -80,7 +80,7 @@
<input style="background-color: #eee;" id="email-form" class="form-control" name="email" type="email" placeholder="Email" />
<input style="background-color: #eee;" id="password-form" class="form-control" name="password" type="password"
placeholder="Contraseña" />
<a href="#">¿Olvidaste tu contraseña?</a>
<span class="login-error">Credenciales incorrectas</span>
......
app/Views/pages/recipe_view.php
......@@ -7,83 +7,7 @@ function getYoutubeVideoId($url)
}
?>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.recipe-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.recipe-header img {
width: 100%;
max-width: 600px;
height: auto;
object-fit: cover;
border-radius: 8px;
}
.ingredient-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: 30px;
}
.ingredient-item {
display: flex;
align-items: center;
width: 50%;
padding: 5px 0;
}
.ingredient-item img {
width: 30px;
height: 30px;
margin-right: 10px;
}
.instructions {
white-space: pre-line;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
/* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#profile-pic {
border-radius: 10px;
width: 25px;
height: 25px;
}
</style>
<link rel="stylesheet" href="<?= base_url("css/recipe_view.css") ?>">
<main id="main" class="main">
<section class="section dashboard">
......@@ -150,4 +74,4 @@ function getYoutubeVideoId($url)
</div>
</section>
</main><!-- End #main -->
\ No newline at end of file
</main><!-- End #main -->
app/Views/templates/header.php
......@@ -186,8 +186,8 @@
</a>
</li><!-- End Dashboard Nav -->
<!-- Filtro 1-->
<div id="catFilters">
<!-- Filtro 1-->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Filtro Vegano</span><i
......@@ -294,7 +294,10 @@
</ul>
</li><!-- Fin Filtro Estaciones -->
</div>
<?php if ($session->has('logged_in')): ?>
......@@ -328,44 +331,32 @@
</aside><!-- End Sidebar-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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());
}
$('.filter-checkbox').click(function() {
var filters = {
vegan: $('.vegan-cboxtags input:checked').val(),
origin: [],
season: []
};
$('.indian-cboxtags input:checked, .french-cboxtags input:checked, .chinese-cboxtags input:checked, .mexican-cboxtags input:checked, .spanish-cboxtags input:checked, .japanese-cboxtags input:checked').each(function() {
filters.origin.push($(this).val());
});
$('.winter-cboxtags input:checked, .spring-cboxtags input:checked, .summer-cboxtags input:checked, .autumn-cboxtags input:checked').each(function() {
filters.season.push($(this).val());
});
console.log("Error: " );
$.ajax({
url: '/recipes/filterRecipes',
method: 'POST',
data: {is_vegan: isVegan, origin: origin, season: season},
type: 'POST',
url: '<?php echo base_url('/filter_recipes'); ?>',
data: filters,
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);
$('.dashboard').html(data);
}
});
});
});
</script>
\ No newline at end of file
</script>
-->
\ No newline at end of file
public/css/recipe_view.css 0 → 100644
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.recipe-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.recipe-header img {
width: 100%;
max-width: 600px;
height: auto;
object-fit: cover;
border-radius: 8px;
}
.ingredient-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: 30px;
}
.ingredient-item {
display: flex;
align-items: center;
width: 50%;
padding: 5px 0;
}
.ingredient-item img {
width: 30px;
height: 30px;
margin-right: 10px;
}
.instructions {
white-space: pre-line;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
/* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#profile-pic {
border-radius: 10px;
width: 25px;
height: 25px;
}
public/js/main.js
......@@ -3,6 +3,43 @@
(function () {
/*
$(document).ready(function() {
$(".filter-checkbox").change(function() {
var filters = {
origin: [],
season: [],
is_vegan: []
};
$("input:checkbox:checked").each(function(){
var id = $(this).attr('id');
var value = $(this).val();
if (id.startsWith('checkboxOne')) {
filters.is_vegan.push(value);
} else if (id.startsWith('checkboxFour') || id.startsWith('checkboxFive') || id.startsWith('checkboxSix') || id.startsWith('checkboxSeven') || id.startsWith('checkboxEight') || id.startsWith('checkboxNine')) {
filters.origin.push(value);
} else if (id.startsWith('checkboxTen') || id.startsWith('checkboxEleven') || id.startsWith('checkboxTwelve') || id.startsWith('checkbox13')) {
filters.season.push(value);
}
});
$.ajax({
url: "<?php echo base_url('recipes/index'); ?>",
type: 'get',
data: filters,
success: function(response) {
// Aquí deberías reemplazar el contenido de la sección con las nuevas tarjetas de recetas
$(".section.dashboard").html(response);
}
});
});
});
*/
const recipesSearch = document.querySelector('#search-query');
function search_recipe(query) {
......
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