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 @@
<li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-person"></i>
<span>Perfil</span>
<i class="bi bi-file-earmark"></i>
<span>Subir receta</span>
</a>
</li><!-- End Profile Page Nav -->
......
app/Views/pages/insertRecipe.php
<link rel="stylesheet" href="<?= base_url("css/insert.css") ?>">
<main id="main" class="main">
<section class="section dashboard">
<h1>Subir una receta</h1>
<form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form">
<!-- Seleccionar nombre receta-->
<div class="form-group">
<label for="name">Nombre de la receta:</label>
<input type="text" id="name" name="name" required class="form-control">
</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>
<section class="section dashboard">
<h1>Subir una receta</h1>
<form action=<?= base_url('/insert_recipe'); ?> method="post" enctype="multipart/form-data" class="my-form">
<div class="form-content">
<div class="form-group name-group">
<label for="name">Nombre de la receta:</label>
<input type="text" id="name" name="name" required class="form-control name-input">
</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 class="form-group photo-group">
<div class="image-upload-container">
<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 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>
<!-- 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>
<!--Seleccionar foto -->
<div class="form-group">
<label for="photo">Subir una foto:</label>
<input type="file" id="photo" name="photo" accept="image/*" class="form-control-file">
</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 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>
</div>
<ul id="ingredients_list" class="ingredients-list list-unstyled"></ul>
<input type="submit" value="Subir receta" class="btn btn-primary">
</form>
<div class="form-group">
<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 @@
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
......
php.ini
extension=memcached.so
\ No newline at end of file
extension=memcached.so
error_reporting = E_ALL
display_errors = On
\ No newline at end of file
public/css/insert.css
......@@ -2,67 +2,68 @@
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.my-form label {
}
.my-form label {
font-weight: bold;
color: #7d7d7d;
}
.my-form input[type="text"],
.my-form input[type="search"],
.my-form textarea {
color: #000000;
}
.my-form input[type="text"],
.my-form input[type="search"],
.my-form textarea {
background-color: #f5f5f5;
border-radius: 5px;
border-color: #000000;
padding: 10px;
margin-bottom: 10px;
box-shadow: none;
color: #333;
}
.my-form input[type="text"]:focus,
.my-form input[type="search"]:focus,
.my-form textarea:focus {
}
.my-form input[type="text"]:focus,
.my-form input[type="search"]:focus,
.my-form textarea:focus {
outline: none;
box-shadow: none;
background-color: #f2f2f2;
}
.my-form input[type="checkbox"],
.my-form input[type="radio"] {
}
.my-form input[type="checkbox"],
.my-form input[type="radio"] {
margin-right: 5px;
}
.my-form .form-check-label {
}
.my-form .form-check-label {
color: #7d7d7d;
}
.my-form select {
}
.my-form select {
background-color: #f5f5f5;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: none;
color: #333;
}
.my-form select:focus {
}
.my-form select:focus {
outline: none;
box-shadow: none;
background-color: #f2f2f2;
}
.my-form input[type="file"] {
}
.my-form input[type="file"] {
margin-bottom: 10px;
}
.my-form .btn-primary {
}
.my-form .btn-primary {
background-color: #8cb6e8;
border: none;
border-radius: 5px;
......@@ -70,34 +71,35 @@ body {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.my-form .btn-primary:hover {
}
.my-form .btn-primary:hover {
background-color: #76a9d4;
color: #fff;
}
/* Media queries */
@media (max-width: 576px) {
}
/* Media queries */
@media (max-width: 576px) {
.container {
padding: 10px;
padding: 10px;
}
.my-form input[type="text"],
.my-form input[type="search"],
.my-form textarea,
.my-form select {
font-size: 14px;
padding: 8px;
font-size: 14px;
padding: 8px;
}
.my-form .btn-primary {
font-size: 14px;
padding: 8px 16px;
font-size: 14px;
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;
border: none;
border-radius: 50%;
......@@ -110,37 +112,37 @@ body {
padding: 0;
transition: background-color 0.3s ease;
width: 1.5rem;
}
.selected-ingredient button:hover {
}
.selected-ingredient button:hover {
background-color: #721c24;
color: #fff;
}
}
/* Agregar estilos para la lista desplegable de ingredientes */
/* Agregar estilos para la lista desplegable de ingredientes */
.ingredients-list {
margin-top: 5px;
max-height: 200px;
overflow-y: auto;
}
.ingredient-item {
}
.ingredient-item {
cursor: pointer;
transition: background-color 0.2s ease;
}
.ingredient-item:hover {
}
.ingredient-item:hover {
background-color: #e2e2e2;
}
.ingredient-icon {
}
.ingredient-icon {
width: 24px;
height: 24px;
}
/* Estilos para el contenedor de ingredientes seleccionados */
.selected-ingredients-container {
}
/* Estilos para el contenedor de ingredientes seleccionados */
.selected-ingredients-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
......@@ -149,9 +151,9 @@ body {
border-radius: 0.25rem;
min-height: 38px;
align-items: center;
}
.selected-ingredient {
}
.selected-ingredient {
display: flex;
align-items: center;
background-color: #f5f5f5;
......@@ -162,22 +164,123 @@ body {
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 {
background-color: #f8d7da;
border-radius: 50%;
color: #721c24;
cursor: pointer;
font-size: 0.8rem;
height: 1.5rem;
line-height: 0.8rem;
margin-left: 0.5rem;
padding: 0;
transition: background-color 0.3s ease;
width: 1.5rem;
background-color: #f8d7da;
border-radius: 50%;
color: #721c24;
cursor: pointer;
font-size: 0.8rem;
height: 1.5rem;
line-height: 0.8rem;
margin-left: 0.5rem;
padding: 0;
transition: background-color 0.3s ease;
width: 1.5rem;
}
.selected-ingredient button:hover {
background-color: #721c24;
color: #fff;
background-color: #721c24;
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) {
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 @@
/*
function search_recipe(query) {
fetch('/search_recipe', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
},
body: 'query=' + encodeURIComponent(query)
})
.then((response) => response.json())
.then((searchResults) => {
const recipeList = document.querySelector('#recipe_list');
recipeList.innerHTML = '';
if (query.trim() === '') {
document.querySelector('#recipe_dropdown').style.display = 'none';
return;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/search_recipe', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
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';
} else {
} else {
document.querySelector('#recipe_dropdown').style.display = 'none';
}
}
searchResults.forEach((recipe) => {
searchResults.forEach((recipe) => {
const listItem = document.createElement('li');
listItem.classList.add('recipe-item');
......@@ -354,19 +357,66 @@
listItem.appendChild(nameElement);
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) {
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