Filtros operativos y correccion de bugs

parent e7bb7bd9
...@@ -14,15 +14,15 @@ ...@@ -14,15 +14,15 @@
# ENVIRONMENT # ENVIRONMENT
#-------------------------------------------------------------------- #--------------------------------------------------------------------
CI_ENVIRONMENT = development CI_ENVIRONMENT = production
#-------------------------------------------------------------------- #--------------------------------------------------------------------
# APP # APP
#-------------------------------------------------------------------- #--------------------------------------------------------------------
# app.baseURL = 'https://tbw2223-12-mrtjcmh.oa.r.appspot.com' app.baseURL = 'https://tbw2223-12-mrtjcmh.oa.r.appspot.com'
# If you have trouble with `.`, you could also use `_`. # If you have trouble with `.`, you could also use `_`.
app_baseURL = 'http://localhost' # app_baseURL = 'http://localhost'
# app.forceGlobalSecureRequests = false # app.forceGlobalSecureRequests = false
# app.CSPEnabled = false # app.CSPEnabled = false
...@@ -31,18 +31,18 @@ CI_ENVIRONMENT = development ...@@ -31,18 +31,18 @@ CI_ENVIRONMENT = development
# DATABASE # DATABASE
#-------------------------------------------------------------------- #--------------------------------------------------------------------
database.default.hostname = localhost #database.default.hostname = localhost
database.default.database = webapp #database.default.database = webapp
database.default.username = webapp_user #database.default.username = webapp_user
database.default.password = FOE6f35AUtbL015D #database.default.password = FOE6f35AUtbL015D
database.default.DBDriver = MySQLi #database.default.DBDriver = MySQLi
# database.default.hostname = 34.65.71.245 database.default.hostname = 34.65.71.245
# database.default.database = webapp database.default.database = webapp
# database.default.username = mrtjcmh database.default.username = mrtjcmh
# database.default.password = d7c+}rB+Ezouc<ak database.default.password = d7c+}rB+Ezouc<ak
# database.default.DBDriver = MySQLi database.default.DBDriver = MySQLi
# database.default.hostname = localhost # database.default.hostname = localhost
# database.default.database = ci4 # database.default.database = ci4
......
# Wa2Eat # Wa2Eat
## Requisitos iniciales (Primera reunión con el cliente) ## 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. - **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. - **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.
- **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.
- **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. - **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. - **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. - **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.
......
<?php <?php
namespace Config; namespace Config;
use App\Controllers\RecipesController;
// Create a new instance of our RouteCollection class. // Create a new instance of our RouteCollection class.
$routes = Services::routes(); $routes = Services::routes();
...@@ -46,7 +47,7 @@ $routes->get('/logout', 'User::logout'); ...@@ -46,7 +47,7 @@ $routes->get('/logout', 'User::logout');
// Ruta para ver una receta // 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'); //$routes->get('/recipe/(:num)', 'RecipesController::view_recipe/$1');
// Ruta para obtener una imagen de una receta dado un id // Ruta para obtener una imagen de una receta dado un id
$routes->get('recipe/image/(:num)', 'RecipesController::show_image/$1'); $routes->get('recipe/image/(:num)', 'RecipesController::show_image/$1');
...@@ -79,11 +80,8 @@ $routes->get('home','Pages::prueba'); ...@@ -79,11 +80,8 @@ $routes->get('home','Pages::prueba');
$routes->get('(:segment)', 'Home::index'); $routes->get('(:segment)', 'Home::index');
// Ruta para la búsqueda de recetas // Ruta para el filtrado de recetas usando AJAX
$routes->post('/filter_recipes', 'RecipesController::filter_recipes'); $routes->match(['get', 'post'], '/getFilteredRecipes', [RecipesController::class, 'getFilteredRecipes']);
$routes->match(['get', 'post'], '/filterRecipes', 'RecipesController::filterRecipes');
......
...@@ -45,7 +45,7 @@ public function insertAjax() ...@@ -45,7 +45,7 @@ public function insertAjax()
// Código de registro y respuesta exitosa // Código de registro y respuesta exitosa
$recipe_name = $this->request->getVar('recipe_name'); $recipe_name = $this->request->getVar('recipe_name');
$recipe_description = $this->request->getVar('recipe_description'); $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'); $origin = $this->request->getVar('origin');
$season = $this->request->getVar('season'); $season = $this->request->getVar('season');
$instructions = $this->request->getVar('instructions'); $instructions = $this->request->getVar('instructions');
...@@ -54,18 +54,18 @@ public function insertAjax() ...@@ -54,18 +54,18 @@ public function insertAjax()
$recipeData = [ $recipeData = [
'recipe_name' => $recipe_name, 'recipe_name' => $recipe_name,
'recipe_description' => $recipe_description, 'recipe_description' => $recipe_description,
'is_vegan' => $is_vegan, 'is_vegan' => $is_vegan, // Aquí usamos $is_vegan
'origin' => $origin, 'origin' => $origin,
'season' => $season, 'season' => $season,
'instructions' => $instructions, 'instructions' => $instructions,
'recipe_photo' => $recipe_photo, 'recipe_photo' => $recipe_photo,
'recipe_video' => $recipe_video, 'recipe_video' => $recipe_video,
]; ];
$recipes_model->saveRecipe($recipe_name,$season,$origin,$recipe_photo,$is_vegan,$recipe_description,$instructions,$recipe_video); $recipes_model->saveRecipe($recipe_name,$season,$origin,$recipe_photo,$is_vegan,$recipe_description,$instructions,$recipe_video);
return $this->response->setStatusCode(200)->setJSON([ return $this->response->setStatusCode(200)->setJSON([
'text' => 'Receta añadida' 'text' => 'Receta añadida'
]); ]);
......
...@@ -86,17 +86,30 @@ class RecipesController extends Controller ...@@ -86,17 +86,30 @@ class RecipesController extends Controller
// En tu controlador de recetas // En tu controlador de recetas
public function filterRecipes() { /* public function filter_recipes() {
$isVegan = $this->request->getVar('is_vegan'); $vegan = $this->request->getPost('is_vegan') == 'Order one' ? 1 : 0;
$origin = $this->request->getVar('origin'); $origin = $this->request->getPost('origin');
$season = $this->request->getVar('season'); $season = $this->request->getPost('season');
$recipesModel = new \App\Models\RecipesModel(); $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
...@@ -61,24 +61,52 @@ class RecipesModel extends Model ...@@ -61,24 +61,52 @@ class RecipesModel extends Model
public function deleteRecipe($id) { public function deleteRecipe($id) {
return $this->delete($id); return $this->delete($id);
} }
/* public function filterRecipes($filters){
$builder = $this->builder();
public function filterRecipes($isVegan, $origin, $season) { if(isset($filters['origin'])){
$builder = $this->db->table($this->table); $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');
if (!empty($isVegan)) { if (!empty($filters['origin'])) {
$builder->where('is_vegan', $isVegan); $builder->whereIn('origin', $filters['origin']);
} }
if (!empty($origin)) { if (!empty($filters['season'])) {
$builder->whereIn('origin', $origin); $builder->whereIn('season', $filters['season']);
} }
if (!empty($season)) { if (!empty($filters['is_vegan'])) {
$builder->where('season', $season); $builder->where('is_vegan', $filters['is_vegan']);
} }
return $builder->get()->getResult(); $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 $recipes;
}
} }
...@@ -79,39 +79,71 @@ ...@@ -79,39 +79,71 @@
</main><!-- End #main --> </main><!-- End #main -->
<script type="text/javascript">
var base_url = '<?php echo base_url(); ?>';
</script>
<script> <script>
$(document).ready(function() { $(document).ready(function () {
$('.filter-checkbox').change(function() { $('.filter-checkbox').on('change', function () {
var filters = { let filters = {
is_vegan: $('#checkboxOne').is(':checked'), is_vegan: $('#checkboxOne').is(':checked') ? 1 : 0,
origin: [], origin: [],
season: [] season: []
}; };
if ($('#checkboxFour').is(':checked')) filters.origin.push('India'); // agrega los valores de los checkboxes seleccionados a los filtros
if ($('#checkboxFive').is(':checked')) filters.origin.push('Francia'); $('.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 () {
if ($('#checkboxSix').is(':checked')) filters.origin.push('China'); filters.origin.push($(this).val());
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
}
}); });
$('.winter-cboxtags input:checked, .spring-cboxtags input:checked, .summer-cboxtags input:checked, .autumn-cboxtags input:checked').each(function () {
filters.season.push($(this).val());
}); });
});
</script>
$.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>
\ No newline at end of file
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
<option value="México">Mexicana</option> <option value="México">Mexicana</option>
<option value="China">China</option> <option value="China">China</option>
<option value="India">India</option> <option value="India">India</option>
<option value="Otro">Otro</option>
</select> </select>
</div> </div>
...@@ -66,7 +67,7 @@ ...@@ -66,7 +67,7 @@
<div class="form-group col-md-4"> <div class="form-group col-md-4">
<label for="is_vegan" class="chip-label">Vegana</label> <label for="is_vegan" class="chip-label">Vegana</label>
<div class="custom-control custom-switch"> <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> <label class="custom-control-label chip" for="is_vegan"></label>
</div> </div>
</div> </div>
......
...@@ -80,7 +80,7 @@ ...@@ -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="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" <input style="background-color: #eee;" id="password-form" class="form-control" name="password" type="password"
placeholder="Contraseña" /> placeholder="Contraseña" />
<a href="#">¿Olvidaste tu contraseña?</a>
<span class="login-error">Credenciales incorrectas</span> <span class="login-error">Credenciales incorrectas</span>
......
...@@ -7,83 +7,7 @@ function getYoutubeVideoId($url) ...@@ -7,83 +7,7 @@ function getYoutubeVideoId($url)
} }
?> ?>
<style> <link rel="stylesheet" href="<?= base_url("css/recipe_view.css") ?>">
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>
<main id="main" class="main"> <main id="main" class="main">
<section class="section dashboard"> <section class="section dashboard">
......
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
</a> </a>
</li><!-- End Dashboard Nav --> </li><!-- End Dashboard Nav -->
<div id="catFilters">
<!-- Filtro 1--> <!-- Filtro 1-->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#"> <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
...@@ -296,6 +296,9 @@ ...@@ -296,6 +296,9 @@
</li><!-- Fin Filtro Estaciones --> </li><!-- Fin Filtro Estaciones -->
</div>
<?php if ($session->has('logged_in')): ?> <?php if ($session->has('logged_in')): ?>
<!-- Si usuario logueado --> <!-- Si usuario logueado -->
...@@ -328,44 +331,32 @@ ...@@ -328,44 +331,32 @@
</aside><!-- End Sidebar--> </aside><!-- End Sidebar-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> <!-- <script>
$(document).ready(function() { $(document).ready(function() {
$('input[type="checkbox"]').change(function() { $('.filter-checkbox').click(function() {
let isVegan = $('#checkboxOne').is(":checked") ? 1 : 0; var filters = {
let origin = []; vegan: $('.vegan-cboxtags input:checked').val(),
let season = []; origin: [],
season: []
$("input[id^='checkbox']:checked").each(function() { };
let id = $(this).attr('id'); $('.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() {
if (id === 'checkboxFour' || id === 'checkboxFive' || id === 'checkboxSix' || id === 'checkboxSeven' || id === 'checkboxEight' || id === 'checkboxNine') { filters.origin.push($(this).val());
origin.push($(this).val());
} else if (id === 'checkboxTen' || id === 'checkboxEleven' || id === 'checkboxTwelve' || id === 'checkbox13') {
season.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({ $.ajax({
url: '/recipes/filterRecipes', type: 'POST',
method: 'POST', url: '<?php echo base_url('/filter_recipes'); ?>',
data: {is_vegan: isVegan, origin: origin, season: season}, data: filters,
success: function(data) { 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); $('.dashboard').html(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
} }
}); });
}); });
}); });
</script> </script>
-->
\ No newline at end of file
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;
}
...@@ -3,6 +3,43 @@ ...@@ -3,6 +3,43 @@
(function () { (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'); const recipesSearch = document.querySelector('#search-query');
function search_recipe(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