Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 17a568fc by Manuel Ruiz Toribio
Options

Vista de mis recetas

parent f92b1e87
Inline Side-by-side
Showing with 216 additions and 124 deletions
app/Config/Routes.php
......@@ -62,7 +62,6 @@ $routes->post('/insert_recipe', 'InsertRecipeController::insert_recipe');
// Ruta para la búsqueda de recetas
$routes->match(['get', 'post'], '/search_recipe', 'RecipesController::search_recipe');
$routes->post('filter_recipes', 'RecipesController::get_filtered_recipes');
// Ruta para vista "Mis recetas"
$routes->get('/myrecipes', 'User::personalRecipes', ['filter' => 'user_auth']);
......@@ -79,6 +78,10 @@ $routes->get('home','Pages::prueba');
$routes->get('(:segment)', 'Home::index');
// Ruta para la búsqueda de re
$routes->post('/filter_recipes', 'RecipesController::filter_recipes');
......
app/Controllers/RecipesController.php
......@@ -35,7 +35,6 @@ class RecipesController extends Controller
return view('templates/header', $data)
. view('pages/recipe_view')
. view('pages/recipe_view')
. view('templates/footer');
}
......@@ -87,16 +86,22 @@ class RecipesController extends Controller
// En tu controlador de recetas
public function get_filtered_recipes() {
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();
$vegan = $this->request->getPost('is_vegan') == "true" ? true : false;
$country = $this->request->getPost('origin');
$season = $this->request->getPost('season');
// Utiliza el método del modelo para obtener las recetas filtradas
$recipes = $recipesModel->filter_recipes($is_vegan, $origin, $season);
$filtered_recipes = $recipesModel->get_filtered_recipes($vegan, $country, $season);
// Crear la vista parcial de las recetas y la devuelve
$data = [
'recipes' => $recipes
];
return $this->response->setJSON($filtered_recipes);
echo view('pages/recipe_cards', $data);
}
......
app/Models/RecipesModel.php
......@@ -62,5 +62,25 @@ class RecipesModel extends Model
return $this->delete($id);
}
public function filter_recipes($is_vegan, $origin, $season) {
$builder = $this->db->table('recipes');
// Filtra por si es vegano o no
if ($is_vegan == 1) {
$builder->where('is_vegan', $is_vegan);
}
// Filtra por origen
if (!empty($origin)) {
$builder->whereIn('origin', $origin);
}
// Filtra por estaciones
if (!empty($season)) {
$builder->whereIn('season', $season);
}
return $builder->get()->getResult();
}
}
\ No newline at end of file
app/Views/pages/home.php
......@@ -76,102 +76,49 @@
</main><!-- End #main -->
<script>
function updateRecipeList() {
// Obtén el estado de los checkboxes
var vegan = document.getElementById("checkboxOne").checked;
var countries = ['India', 'Francia', 'China', 'México', 'España', 'Japón'];
var country = '';
var checkboxes = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked && countries.includes(checkboxes[i].nextElementSibling.innerText)) {
country = checkboxes[i].nextElementSibling.innerText;
break;
}
}
var seasons = ['Invierno', 'Primavera', 'Verano', 'Otoño'];
var season = '';
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked && seasons.includes(checkboxes[i].nextElementSibling.innerText)) {
season = checkboxes[i].nextElementSibling.innerText;
break;
}
}
// Enviar una solicitud AJAX a tu controlador de recetas
var xhr = new XMLHttpRequest();
xhr.open("POST", "/filter_recipes", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// Actualizar el contenido de la página con las recetas filtradas
var recipes = JSON.parse(this.responseText);
var recipeList = document.getElementById("recipeCards");
recipeList.innerHTML = ''; // Limpiar la lista de recetas
for (var i = 0; i < recipes.length; i++) {
var recipeHTML = generateRecipeHTML(recipes[i]);
recipeList.innerHTML += recipeHTML;
<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 = [];
// 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());
});
// 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());
});
// 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();
}
});
}
};
xhr.send("is_vegan=" + vegan + "&origin=" + country + "&season=" + season);
}
function generateRecipeHTML(recipe) {
var recipeHTML = `
<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>`;
return recipeHTML;
}
document.addEventListener('DOMContentLoaded', (event) => {
updateRecipeList();
});
});
</script>
\ No newline at end of file
</script>
app/Views/pages/insertRecipe.php
......@@ -40,10 +40,10 @@
<div class="form-group col-md-4">
<label for="origin">Origen:</label>
<select id="origin" name="origin" class="form-control">
<option value="Española">Española</option>
<option value="Francesa">Francesa</option>
<option value="Italiana">Japonesa</option>
<option value="Mexiana">Mexicana</option>
<option value="España">Española</option>
<option value="Francia">Francesa</option>
<option value="Japón">Japonesa</option>
<option value="México">Mexicana</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
......@@ -53,10 +53,10 @@
<div class="form-group col-md-4">
<label for="season">Temporada:</label>
<select id="season" name="season" class="form-control">
<option value="invierno">Invierno</option>
<option value="primavera">Primavera</option>
<option value="verano">Verano</option>
<option value="otoño">Otoño</option>
<option value="Invierno">Invierno</option>
<option value="Primavera">Primavera</option>
<option value="Verano">Verano</option>
<option value="Otoño">Otoño</option>
<option value="4estaciones">4 estaciones</option>
</select>
</div>
......
app/Views/pages/recipe_cards.php 0 → 100644
<?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/pages/recipe_view.php
......@@ -64,7 +64,7 @@ function getYoutubeVideoId($url)
.video-container {
position: relative;
padding-bottom: 56.25%;
/* Relación de aspecto 16:9 */
/* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
}
......
app/Views/pages/userRecipes.php
<?php $session = session(); ?>
<main id="main" class="main">
<section class="section dashboard">
<h1>Vista por hacer🤠</h1>
<?php
$recipesModel = new \App\Models\RecipesModel();
$recipes = $recipesModel->findAll();
if (sizeof($recipes) > 0) {
foreach ($recipes as $row) {
$ingredients = $recipesModel->get_recipe_ingredients($row->id);
?>
<?php if ( $session->get('user')->email == $row->email_user): ?>
<!-- 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>
<?php endif; ?>
<!-- Fin de la tarjeta de la receta -->
<?php
}
}
?>
</section>
......
app/Views/templates/footer.php
......@@ -14,6 +14,8 @@
<script src="js/validate.js"></script>
<!-- Template Main JS File -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
......
app/Views/templates/header.php
......@@ -215,41 +215,41 @@
<!--Contenido del dropdown-->
<ul class="indian-cboxtags">
<li>
<input type="checkbox" id="checkboxFour" value="Order four">
<input type="checkbox" id="checkboxFour" value="India">
<label for="checkboxFour">India </label>
</li>
</ul>
<ul class="french-cboxtags">
<li>
<input type="checkbox" id="checkboxFive" value="Order five">
<input type="checkbox" id="checkboxFive" value="Francia">
<label for="checkboxFive">Francia </label>
</li>
</ul>
<ul class="chinese-cboxtags">
<li>
<input type="checkbox" id="checkboxSix" value="Order six">
<input type="checkbox" id="checkboxSix" value="China">
<label for="checkboxSix">China </label>
</li>
</ul>
<ul class="mexican-cboxtags">
<li>
<input type="checkbox" id="checkboxSeven" value="Order seven">
<input type="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="Order eigth">
<input type="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="Order nine">
<input type="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="Order ten">
<input type="checkbox" id="checkboxTen" value="Invierno">
<label for="checkboxTen">Invierno </label>
</li>
</ul>
<ul class="spring-cboxtags">
<li>
<input type="checkbox" id="checkboxEleven" value="Order eleven">
<input type="checkbox" id="checkboxEleven" value="Primavera">
<label for="checkboxEleven">Primavera </label>
</li>
</ul>
<ul class="summer-cboxtags">
<li>
<input type="checkbox" id="checkboxTwelve" value="Order twelve">
<input type="checkbox" id="checkboxTwelve" value="Verano">
<label for="checkboxTwelve">Verano </label>
</li>
</ul>
<ul class="autumn-cboxtags">
<li>
<input type="checkbox" id="checkbox13" value="Order 13">
<input type="checkbox" id="checkbox13" value="Otoño">
<label for="checkbox13">Otoño </label>
</li>
</ul>
......
public/js/main.js
......@@ -422,4 +422,5 @@
});
*/
})();
\ 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