Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 83dd03bb by Manuel Ruiz Toribio
Options

Merge remote-tracking branch 'origin/developJC' into developmanu

parents 808360e8 f10856c5
Inline Side-by-side
Showing with 430 additions and 223 deletions
app/Views/pages/home.php
...@@ -122,8 +122,8 @@ ...@@ -122,8 +122,8 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe"> <a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-person"></i> <i class="bi bi-file-earmark"></i>
<span>Perfil</span> <span>Subir receta</span>
</a> </a>
</li><!-- End Profile Page Nav --> </li><!-- End Profile Page Nav -->
......
app/Views/pages/insertRecipe.php
<link rel="stylesheet" href="<?= base_url("css/insert.css") ?>"> <link rel="stylesheet" href="<?= base_url("css/insert.css") ?>">
<main id="main" class="main"> <main id="main" class="main">
<section class="section dashboard"> <section class="section dashboard">
<h1>Subir una receta</h1> <h1>Subir una receta</h1>
<form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form"> <form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form">
<!-- Seleccionar nombre receta--> <div class="form-content">
<div class="form-group"> <div class="form-group name-group">
<label for="name">Nombre de la receta:</label> <label for="name">Nombre de la receta:</label>
<input type="text" id="name" name="name" required class="form-control"> <input type="text" id="name" name="name" required class="form-control name-input">
</div>
<!-- Seleccionar descripción -->
<div class="form-group">
<label for="description">Descripción de la receta:</label>
<textarea id="description" name="description" rows="4" cols="50" required class="form-control"></textarea>
</div>
<!-- Selccionar opción vegana -->
<div class="form-group form-check">
<input type="checkbox" id="is_vegan" name="is_vegan" class="form-check-input">
<label class="form-check-label" for="is_vegan">Vegana</label>
</div>
<!-- Seleccionar origen -->
<div class="form-group">
<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">Italiana</option>
<option value="Mexiana">Mexicana</option>
<option value="Americana">Americana</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
</div>
<!-- Seleccionar temporada -->
<div class="form-group">
<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="4estaciones">4 estaciones</option>
</select>
</div>
<!-- Seleccionar instrucciones -->
<div class="form-group">
<label for="instructions">Instrucciones:</label>
<textarea id="instructions" name="instructions" rows="6" cols="50" required class="form-control"></textarea>
</div>
<!-- Seleccionar ingredientes -->
<label >Ingredientes:</label>
<div class="input-group my-form">
<input
type="search"
id="ingredient_search"
name="ingredient_search"
placeholder="Buscar ingredientes..."
class="form-control"
/>
</div>
<ul id="ingredients_list" class="ingredients-list list-unstyled"></ul>
<div class="form-group">
<label for="selected_ingredients">Ingredientes seleccionados:</label>
<div id="selected_ingredients" class="selected-ingredients-container"></div>
</div>
<!-- Modal para ingresar la cantidad del ingrediente -->
<div class="modal fade" id="quantityModal" tabindex="-1" role="dialog" aria-labelledby="quantityModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quantityModalLabel">Ingresa la cantidad</h5>
</button>
</div> </div>
<div class="modal-body">
<div class="form-group"> <div class="form-group photo-group">
<label for="ingredient_quantity">Cantidad</label> <div class="image-upload-container">
<input type="text" class="form-control" id="ingredient_quantity" name="ingredient_quantity" placeholder="Ej: 2 tazas, 1/2 cucharada, 4 kg..."> <input type="file" id="photo" name="photo" accept="image/*" class="form-control-file" style="display:none;">
<label for="photo" class="image-upload-label">Selecciona o arrastra aquí una imagen de la receta</label>
<img id="image-preview" src="#" alt="Vista previa de la imagen" style="display:none;">
</div> </div>
</div> </div>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" id="cancel_quantity" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="save_quantity">Guardar</button> <!-- Seleccionar descripción -->
<div class="form-group">
<label for="description">Descripción de la receta:</label>
<textarea id="description" name="description" rows="4" cols="50" required class="form-control"></textarea>
</div>
<!-- Seleccionar instrucciones -->
<div class="form-group">
<label for="instructions">Instrucciones:</label>
<textarea id="instructions" name="instructions" rows="6" cols="50" required class="form-control"></textarea>
</div>
<div class="form-row">
<!-- Seleccionar origen -->
<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">Italiana</option>
<option value="Mexiana">Mexicana</option>
<option value="Americana">Americana</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
</div>
<!-- Seleccionar temporada -->
<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="4estaciones">4 estaciones</option>
</select>
</div>
</div>
<!-- Opción vegana -->
<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">
<label class="custom-control-label chip" for="is_vegan"></label>
</div> </div>
</div> </div>
</div>
</div>
<!--Seleccionar foto --> <!-- Seleccionar ingredientes -->
<div class="form-group"> <label>Ingredientes:</label>
<label for="photo">Subir una foto:</label> <div class="input-group my-form">
<input type="file" id="photo" name="photo" accept="image/*" class="form-control-file"> <input type="search" id="ingredient_search" name="ingredient_search" placeholder="Buscar ingredientes..."
</div> class="form-control" />
<div class="form-group"> </div>
<label for="link">Ingrese el enlace del video:</label> <ul id="ingredients_list" class="ingredients-list list-unstyled"></ul>
<input type="text" id="link" name="link" class="form-control" placeholder="ej: https://www.youtube.com/watch?v=cks8liHVdZg">
</div>
<input type="submit" value="Subir receta" class="btn btn-primary"> <div class="form-group">
</form> <label for="selected_ingredients">Ingredientes seleccionados:</label>
<div id="selected_ingredients" class="selected-ingredients-container"></div>
</div>
<script src="<?= base_url("js/insert.js") ?>"></script> <!-- Modal para ingresar la cantidad del ingrediente -->
<div class="modal fade" id="quantityModal" tabindex="-1" role="dialog" aria-labelledby="quantityModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quantityModalLabel">Ingresa la cantidad</h5>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="ingredient_quantity">Cantidad</label>
<input type="text" class="form-control" id="ingredient_quantity" name="ingredient_quantity"
placeholder="Ej: 2 tazas, 1/2 cucharada, 4 kg...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="cancel_quantity"
data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="save_quantity">Guardar</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="link">Ingrese el enlace del video:</label>
<input type="text" id="link" name="link" class="form-control"
placeholder="ej: https://www.youtube.com/watch?v=cks8liHVdZg">
</div>
</section> <input type="submit" value="Subir receta" class="btn btn-primary">
</form>
</main><!-- End #main --> <script src="<?= base_url("js/insert.js") ?>"></script>
</section>
</main><!-- End #main -->
\ No newline at end of file
app/Views/templates/header.php
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<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="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
......
php.ini
extension=memcached.so extension=memcached.so
\ No newline at end of file error_reporting = E_ALL
display_errors = On
\ No newline at end of file
public/css/insert.css
...@@ -2,67 +2,68 @@ ...@@ -2,67 +2,68 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.container { .container {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
} }
.my-form label { .my-form label {
font-weight: bold; font-weight: bold;
color: #7d7d7d; color: #000000;
} }
.my-form input[type="text"], .my-form input[type="text"],
.my-form input[type="search"], .my-form input[type="search"],
.my-form textarea { .my-form textarea {
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 5px; border-radius: 5px;
border-color: #000000;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: none; box-shadow: none;
color: #333; color: #333;
} }
.my-form input[type="text"]:focus, .my-form input[type="text"]:focus,
.my-form input[type="search"]:focus, .my-form input[type="search"]:focus,
.my-form textarea:focus { .my-form textarea:focus {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.my-form input[type="checkbox"], .my-form input[type="checkbox"],
.my-form input[type="radio"] { .my-form input[type="radio"] {
margin-right: 5px; margin-right: 5px;
} }
.my-form .form-check-label { .my-form .form-check-label {
color: #7d7d7d; color: #7d7d7d;
} }
.my-form select { .my-form select {
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: none; box-shadow: none;
color: #333; color: #333;
} }
.my-form select:focus { .my-form select:focus {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.my-form input[type="file"] { .my-form input[type="file"] {
margin-bottom: 10px; margin-bottom: 10px;
} }
.my-form .btn-primary { .my-form .btn-primary {
background-color: #8cb6e8; background-color: #8cb6e8;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
...@@ -70,34 +71,35 @@ body { ...@@ -70,34 +71,35 @@ body {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
} }
.my-form .btn-primary:hover { .my-form .btn-primary:hover {
background-color: #76a9d4; background-color: #76a9d4;
color: #fff; color: #fff;
} }
/* Media queries */ /* Media queries */
@media (max-width: 576px) { @media (max-width: 576px) {
.container { .container {
padding: 10px; padding: 10px;
} }
.my-form input[type="text"], .my-form input[type="text"],
.my-form input[type="search"], .my-form input[type="search"],
.my-form textarea, .my-form textarea,
.my-form select { .my-form select {
font-size: 14px; font-size: 14px;
padding: 8px; padding: 8px;
} }
.my-form .btn-primary { .my-form .btn-primary {
font-size: 14px; font-size: 14px;
padding: 8px 16px; padding: 8px 16px;
} }
} }
/* Estilos para el botón "x" en el campo de selección de ingredientes */
.selected-ingredient button { /* Estilos para el bot贸n "x" en el campo de selecci贸n de ingredientes */
.selected-ingredient button {
background-color: #f8d7da; background-color: #f8d7da;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
...@@ -110,37 +112,37 @@ body { ...@@ -110,37 +112,37 @@ body {
padding: 0; padding: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
width: 1.5rem; width: 1.5rem;
} }
.selected-ingredient button:hover { .selected-ingredient button:hover {
background-color: #721c24; background-color: #721c24;
color: #fff; color: #fff;
} }
/* Agregar estilos para la lista desplegable de ingredientes */ /* Agregar estilos para la lista desplegable de ingredientes */
.ingredients-list { .ingredients-list {
margin-top: 5px; margin-top: 5px;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }
.ingredient-item { .ingredient-item {
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
.ingredient-item:hover { .ingredient-item:hover {
background-color: #e2e2e2; background-color: #e2e2e2;
} }
.ingredient-icon { .ingredient-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
/* Estilos para el contenedor de ingredientes seleccionados */ /* Estilos para el contenedor de ingredientes seleccionados */
.selected-ingredients-container { .selected-ingredients-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5px; gap: 5px;
...@@ -149,9 +151,9 @@ body { ...@@ -149,9 +151,9 @@ body {
border-radius: 0.25rem; border-radius: 0.25rem;
min-height: 38px; min-height: 38px;
align-items: center; align-items: center;
} }
.selected-ingredient { .selected-ingredient {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #f5f5f5; background-color: #f5f5f5;
...@@ -162,22 +164,123 @@ body { ...@@ -162,22 +164,123 @@ body {
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
} }
/* Estilos para el botón "x" en el campo de selección de ingredientes */ /* Estilos para el bot贸n "x" en el campo de selecci贸n de ingredientes */
.selected-ingredient button { .selected-ingredient button {
background-color: #f8d7da; background-color: #f8d7da;
border-radius: 50%; border-radius: 50%;
color: #721c24; color: #721c24;
cursor: pointer; cursor: pointer;
font-size: 0.8rem; font-size: 0.8rem;
height: 1.5rem; height: 1.5rem;
line-height: 0.8rem; line-height: 0.8rem;
margin-left: 0.5rem; margin-left: 0.5rem;
padding: 0; padding: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
width: 1.5rem; width: 1.5rem;
} }
.selected-ingredient button:hover { .selected-ingredient button:hover {
background-color: #721c24; background-color: #721c24;
color: #fff; color: #fff;
}
.image-upload-container {
position: relative;
width: 100%;
max-width: 400px;
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
cursor: pointer;
margin-bottom: 20px;
}
.image-upload-label {
font-size: 18px;
color: #999;
}
#image-preview {
width: 100%;
max-width: 400px;
height: auto;
margin-top: 10px;
} }
.form-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.name-input {
border: none;
border-bottom: 1px solid #ccc;
background-color: transparent;
font-size: 2rem;
font-weight: bold;
text-align: center;
padding: 5px 0;
outline: none;
width: 100%;
max-width: 400px;
}
.name-input:focus {
border-bottom-color: #000;
}
.name-group {
flex: 1;
margin-right: 20px;
}
.photo-group {
flex: 1;
margin-left: 20px;
}
.form-row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.left,
.right {
width: 49%;
}
.three-fields {
display: flex;
justify-content: space-between;
align-items: center;
}
.three-fields .form-group {
width: 32%;
}
/* Estilos para el chip vegano */
.vegan-chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 14px;
font-weight: 600;
background-color: #f0f0f0;
border-radius: 24px;
cursor: pointer;
user-select: none;
}
.vegan-chip.selected {
background-color: #4caf50;
color: #ffffff;
}
\ No newline at end of file
public/imagenes/platos/samosas.webp deleted 100644 → 0
No preview for this file type
public/js/insert.js
...@@ -150,3 +150,47 @@ ingredientSearch.addEventListener('input', function (event) { ...@@ -150,3 +150,47 @@ ingredientSearch.addEventListener('input', function (event) {
searchIngredients(event.target.value); searchIngredients(event.target.value);
}); });
var inputPhoto = document.getElementById('photo');
var imageUploadContainer = document.querySelector('.image-upload-container');
inputPhoto.addEventListener('change', function(event) {
displayImagePreview(event.target.files[0]);
});
imageUploadContainer.addEventListener('dragover', function(event) {
event.preventDefault();
event.stopPropagation();
event.dataTransfer.dropEffect = 'copy';
});
imageUploadContainer.addEventListener('drop', function(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.files.length > 0) {
displayImagePreview(event.dataTransfer.files[0]);
inputPhoto.files = event.dataTransfer.files;
}
});
function displayImagePreview(file) {
var reader = new FileReader();
reader.onload = function() {
var output = document.getElementById('image-preview');
output.src = reader.result;
output.style.display = 'block';
}
reader.readAsDataURL(file);
}
document.getElementById('photo').addEventListener('change', function(event) {
var reader = new FileReader();
reader.onload = function() {
var output = document.getElementById('image-preview');
output.src = reader.result;
output.style.display = 'block';
}
reader.readAsDataURL(event.target.files[0]);
});
public/js/main.js
...@@ -324,28 +324,31 @@ ...@@ -324,28 +324,31 @@
/*
function search_recipe(query) { function search_recipe(query) {
fetch('/search_recipe', { if (query.trim() === '') {
method: 'POST', document.querySelector('#recipe_dropdown').style.display = 'none';
headers: { return;
'Content-Type': 'application/x-www-form-urlencoded', }
'X-Requested-With': 'XMLHttpRequest'
}, var xhr = new XMLHttpRequest();
body: 'query=' + encodeURIComponent(query) xhr.open('POST', '/search_recipe', true);
}) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
.then((response) => response.json()) xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
.then((searchResults) => { xhr.onreadystatechange = function () {
const recipeList = document.querySelector('#recipe_list'); if (xhr.readyState === 4 && xhr.status === 200) {
recipeList.innerHTML = ''; try {
var searchResults = JSON.parse(xhr.responseText);
const recipeList = document.querySelector('#recipe_list');
recipeList.innerHTML = '';
if (searchResults.length > 0) { if (searchResults.length > 0) {
document.querySelector('#recipe_dropdown').style.display = 'block'; document.querySelector('#recipe_dropdown').style.display = 'block';
} else { } else {
document.querySelector('#recipe_dropdown').style.display = 'none'; document.querySelector('#recipe_dropdown').style.display = 'none';
} }
searchResults.forEach((recipe) => { searchResults.forEach((recipe) => {
const listItem = document.createElement('li'); const listItem = document.createElement('li');
listItem.classList.add('recipe-item'); listItem.classList.add('recipe-item');
...@@ -354,19 +357,66 @@ ...@@ -354,19 +357,66 @@
listItem.appendChild(nameElement); listItem.appendChild(nameElement);
recipeList.appendChild(listItem); recipeList.appendChild(listItem);
}); });
}); } catch (error) {
console.error('Error parsing JSON response:', error);
}
} else if (xhr.readyState === 4) {
console.error('Error in request:', xhr.status, xhr.statusText);
}
};
xhr.send('query=' + encodeURIComponent(query));
} }
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
if (!event.target.closest('.search-bar')) { if (!event.target.closest('.search-bar')) {
document.querySelector('#recipe_dropdown').style.display = 'none'; document.querySelector('#recipe_dropdown').style.display = 'none';
} }
}); });
*/
function search_recipe(query) {
fetch('/search_recipe', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest' // Añadir esta línea
},
body: 'query=' + encodeURIComponent(query)
})
.then((response) => response.json())
.then((searchResults) => {
// Limpiar la lista de ingredientes coincidentes anterior
const recipeList = document.querySelector('#recipe_dropdown');
recipeList.innerHTML = '';
// Agregar ingredientes coincidentes a la lista desplegable
searchResults.forEach((ingredient) => {
const listItem = document.createElement('li');
listItem.classList.add('recipe-item', 'd-flex', 'align-items-center', 'p-2', 'mb-1', 'bg-light', 'rounded');
const nameElement = document.createElement('span');
nameElement.textContent = ingredient.name;
nameElement.classList.add('recipe-name', 'flex-grow-1');
listItem.appendChild(nameElement);
listItem.setAttribute('data-id', recipes.id);
listItem.setAttribute('title', 'Haz clic para seleccionar ' + recipes.name); // Añade información adicional al ingrediente
recipeList.appendChild(listItem);
});
});
}
// Agregar evento para agregar ingredientes cuando se presiona Enter en el campo de búsqueda
ingredientSearch.addEventListener('search', function (event) {
// Llamar a la función searchIngredients para buscar y mostrar ingredientes coincidentes
search_recipe(event.target.value);
});
document.querySelector('#search-query').addEventListener('input', function (event) {
search_recipe(event.target.value);
});
......
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