Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 48bd69f0 by Juan Montilla
Options

Version Mobiles

parent 1b97abbe
Expand all
Inline Side-by-side
Showing with 943 additions and 241 deletions
.env
......@@ -20,9 +20,9 @@ CI_ENVIRONMENT = production
# 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 `_`.
# app_baseURL = 'http://localhost'
app_baseURL = 'http://localhost'
# app.forceGlobalSecureRequests = false
# app.CSPEnabled = false
......@@ -31,19 +31,19 @@ CI_ENVIRONMENT = production
# DATABASE
#--------------------------------------------------------------------
#database.default.hostname = localhost
#database.default.database = webapp
#database.default.username = webapp_user
#database.default.password = FOE6f35AUtbL015D
#database.default.DBDriver = MySQLi
database.default.hostname = 34.65.71.245
database.default.hostname = localhost
database.default.database = webapp
database.default.username = mrtjcmh
database.default.password = d7c+}rB+Ezouc<ak
database.default.username = webapp_user
database.default.password = FOE6f35AUtbL015D
database.default.DBDriver = MySQLi
#database.default.hostname = 34.65.71.245
#database.default.database = webapp
#database.default.username = mrtjcmh
#database.default.password = d7c+}rB+Ezouc<ak
#database.default.DBDriver = MySQLi
# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
......
app/Config/Routes.php
......@@ -47,8 +47,6 @@ $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');
// Ruta para obtener una imagen de una receta dado un id
$routes->get('recipe/image/(:num)', 'RecipesController::show_image/$1');
......
app/Controllers/InsertRecipeController.php
......@@ -8,7 +8,8 @@ class InsertRecipeController extends Controller
{
public function index()
{
return view('templates/header')
$data['vista'] = 'insert';
return view('templates/header', $data)
. view('pages/insertRecipe')
. view('templates/footer');
}
......
app/Controllers/Pages.php
......@@ -22,7 +22,7 @@ public function index()
throw new PageNotFoundException($page);
}
$data['title'] = ucfirst($page); // Capitalize the first letter
$data['vista'] = 'home';
return view('templates/header', $data)
.view('pages/' . $page)
.view('templates/footer');
......
app/Controllers/RecipesController.php
......@@ -33,8 +33,9 @@ class RecipesController extends Controller
'photoUser' => $photo,
];
return view('templates/header', $data)
. view('pages/recipe_view')
$data2['vista'] = 'view';
return view('templates/header',$data2)
. view('pages/recipe_view', $data)
. view('templates/footer');
}
......@@ -83,33 +84,15 @@ class RecipesController extends Controller
}
}
public function getFilteredRecipes()
{
$model = new RecipesModel();
$filters = $this->request->getPost();
// En tu controlador de recetas
/* 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->getFilteredRecipes($vegan, $origin, $season);
$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);
$recipes = $model->filterRecipes($filters);
return $this->response->setJSON($recipes);
}
return $this->response->setJSON($recipes);
}
}
\ No newline at end of file
app/Controllers/User.php
......@@ -7,7 +7,9 @@ class User extends BaseController
{
$userModel = new \App\Models\UserModel();
$data['users'] = $userModel->findAll();
return view('templates/header')
$data2['vista'] = 'list';
return view('templates/header',$data2)
. view('user/list', $data)
. view('templates/footer');
}
......@@ -78,7 +80,8 @@ class User extends BaseController
}
public function user_ok()
{
return view('templates/header')
$data['vista'] = 'home';
return view('templates/header', $data)
. view('pages/home')
. view('templates/footer');
}
......@@ -180,14 +183,16 @@ class User extends BaseController
public function personalRecipes()
{
return view('templates/header')
$data['vista'] = 'profile';
return view('templates/header', $data)
. view('pages/userRecipes')
. view('templates/footer');
}
public function myprofile()
{
return view('templates/header')
$data['vista'] = 'profile';
return view('templates/header', $data)
. view('pages/profile_view')
. view('templates/footer');
}
......
app/Views/pages/home.php
......@@ -23,7 +23,7 @@
<!-- Inicio de la tarjeta de la receta -->
<div class="card info-card sales-card"
<div class="card info-card sales-card recipe-card"
onclick="window.location.href='<?php echo base_url('recipe/' . $row->id); ?>'">
<a href="<?php echo base_url('recipe/' . $row->id); ?>">
</a>
......@@ -34,16 +34,6 @@
</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">
......
app/Views/pages/login.php
......@@ -16,7 +16,8 @@
background-size: 100% auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
......@@ -27,24 +28,29 @@
style="margin-bottom: 20px; margin-top: 0px;">
</a>
<div class="col-md-8">
<div class="container" id="container">
<div class="container login-container" id="container">
<div class="form-container sign-up-container">
<!-- FORMULARIO REGISTER -->
<form action=<?= base_url('/register'); ?> method="post" style="flex-direction: column; padding: 0 30px;">
<h1>Crear cuenta</h1>
<form action=<?= base_url('/register'); ?> method="post"
style="flex-direction: column; padding: 0 30px;">
<h1 class="mobile-text">Crear cuenta</h1>
<div class="social-container">
<a href="https://accounts.google.com/" class="social"><img
<a href="https://accounts.google.com/" class="social mobile-icon"><img
src="<?= base_url("iconos/google.ico") ?>" width="53" height="53"></a>
<a href="https://www.facebook.com/" class="social"><img
<a href="https://www.facebook.com/" class="social mobile-icon"><img
src="<?= base_url("iconos/facebook.ico") ?>" width="52" height="52"></a>
<a href="https://appleid.apple.com/" class="social"><img
<a href="https://appleid.apple.com/" class="social mobile-icon"><img
src="<?= base_url("iconos/apple.ico") ?>" width="52" height="52"></a>
</div>
<span>o usa tu correo</span>
<input style="background-color: #eee;" id="username-register-form" class="form-control" name="username" type="text" placeholder="Nombre" />
<input style="background-color: #eee;" id="email-register-form" class="form-control" name="email" type="email" placeholder="Email" />
<input style="background-color: #eee;" id="password-register-form" class="form-control" name="password" type="password" id="password" placeholder="Contraseña" />
<input style="background-color: #eee;" id="username-register-form" class="form-control"
name="username" type="text" placeholder="Nombre" />
<input style="background-color: #eee;" id="email-register-form" class="form-control" name="email"
type="email" placeholder="Email" />
<input style="background-color: #eee;" id="password-register-form" class="form-control"
name="password" type="password" id="password" placeholder="Contraseña" />
<span class="error">
<?= \Config\Services::validation()->listErrors(); ?>
......@@ -60,42 +66,49 @@
<span class="register-error">Error</span>
<a href="#" class="switch-form" id="signin-link">Iniciar Sesión</a>
<button id="signup-button" type="submit">Registrarse</button>
</form>
</div>
<div class="form-container sign-in-container">
<div class="form-container sign-in-container open">
<!-- FORMULARIO LOGIN -->
<form action=<?= base_url('/login'); ?> method="post" style="flex-direction: column; padding: 0 30px;">
<h1>Iniciar Sesión</h1>
<h1 class="mobile-text">Iniciar Sesión</h1>
<div class="social-container">
<a href="https://accounts.google.com/" class="social"><img
<a href="https://accounts.google.com/" class="social mobile-icon"><img
src="<?= base_url("iconos/google.ico") ?>" width="53" height="53"></a>
<a href="https://www.facebook.com/" class="social"><img
<a href="https://www.facebook.com/" class="social mobile-icon"><img
src="<?= base_url("iconos/facebook.ico") ?>" width="52" height="52"></a>
<a href="https://appleid.apple.com/" class="social"><img
<a href="https://appleid.apple.com/" class="social mobile-icon"><img
src="<?= base_url("iconos/apple.ico") ?>" width="52" height="52"></a>
</div>
<span>o usa tu correo</span>
<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" />
<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" />
<span class="login-error">Credenciales incorrectas</span>
<button id="signin-button" type="submit">Iniciar Sesión</button>
<a href="#" class="switch-form" id="signup-link">Crear cuenta</a>
<button id="signin-button" type="submit">Iniciar Sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido a Wa2Eat!</h1>
<h1 class="mobile-text">¡Bienvenido a Wa2Eat!</h1>
<h8>Únete a la mayor comunidad de recetas en línea</h8>
<button class="ghost" id="signIn" style="margin-top: 10px;">Iniciar Sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Bienvenido de nuevo!</h1>
<h1 class="mobile-text">¡Bienvenido de nuevo!</h1>
<h8>Introduce tus credenciales y comienza a navegar</h8>
<button class="ghost" id="signUp" style="margin-top: 10px;">Registrarse</button>
</div>
......
app/Views/pages/recipe_view.php
......@@ -7,6 +7,8 @@ function getYoutubeVideoId($url)
}
?>
<link rel="stylesheet" href="<?= base_url("css/recipe_view.css") ?>">
<main id="main" class="main">
<section class="section dashboard">
......@@ -73,4 +75,4 @@ function getYoutubeVideoId($url)
</div>
</section>
</main><!-- End #main -->
</main><!-- End #main -->
\ No newline at end of file
app/Views/pages/userRecipes.php
<?php $session = session(); ?>
<main id="main" class="main">
<section class="section dashboard">
<?php
<?php
$recipesModel = new \App\Models\RecipesModel();
$recipes = $recipesModel->findAll();
......@@ -11,54 +12,47 @@
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>
<?php if ($session->get('user')->email == $row->email_user): ?>
<!-- Inicio de la tarjeta de la receta -->
<div class="card info-card sales-card recipe-card"
onclick="window.location.href='<?php echo base_url('recipe/' . $row->id); ?>'">
<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>
<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="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 class="col-lg-9 col-md-8 col-sm-12">
<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>
</div>
<!-- Fin de la tarjeta de la receta -->
<?php endif; ?>
<!-- Fin de la tarjeta de la receta -->
<?php
}
}
......
public/css/login.css
......@@ -105,8 +105,8 @@ input {
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
width: 1400px;
......@@ -146,12 +146,15 @@ input {
}
@keyframes show {
0%, 49.99% {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
50%,
100% {
opacity: 1;
z-index: 5;
}
......@@ -168,7 +171,7 @@ input {
z-index: 100;
}
.container.right-panel-active .overlay-container{
.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
......@@ -183,12 +186,12 @@ input {
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
transform: translateX(50%);
}
.overlay-panel {
......@@ -239,31 +242,31 @@ input {
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
margin: 10px 0;
}
footer i {
color: red;
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
color: #3c97bf;
text-decoration: none;
}
#signin-button{
#signin-button {
border-radius: 20px;
border: 1px solid #FFFFFF;
......@@ -279,7 +282,7 @@ footer a {
}
#signup-button{
#signup-button {
border-radius: 20px;
border: 1px solid #FFFFFF;
......@@ -293,4 +296,32 @@ footer a {
transition: transform 80ms ease-in;
margin-top: 10px;
}
\ No newline at end of file
}
.switch-form {
display: none;
}
@media only screen and (max-width: 600px) {
.container:not(.mobile) .sign-in-container,
.container:not(.mobile) .sign-up-container {
display: none;
}
.container.mobile .sign-in-container,
.container.mobile .sign-up-container {
display: block;
width: 100%;
position: relative;
opacity: 1;
transform: none;
}
.container.mobile .overlay-container {
display: none;
}
.switch-form {
display: block;
}
}
public/css/style.css
......@@ -2563,3 +2563,21 @@ ul.autumn-cboxtags li input[type="checkbox"] {
opacity: 0;
}
@media (max-width: 600px) {
.recipe-card .row {
/* Cambia la dirección de los elementos de fila a columna */
flex-direction: column;
}
.recipe-card .imagen-container {
/* Ajusta la imagen para que ocupe todo el ancho en pantallas pequeñas */
width: 100%;
}
.recipe-card .col-lg-9 {
/* Ajusta el cuerpo de la tarjeta para que ocupe todo el ancho en pantallas pequeñas */
width: 100%;
}
}
\ No newline at end of file
public/js/login.js
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
const signInContainer = document.querySelector('.sign-in-container');
const signUpContainer = document.querySelector('.sign-up-container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
......@@ -87,3 +89,62 @@ $("#signup-button").on("click", function(e){
})
$(document).ready(function() {
const signInButton = $('#signIn');
const signUpButton = $('#signUp');
const container = $('#container');
const signInContainer = $('.sign-in-container');
const signUpContainer = $('.sign-up-container');
if ($(window).width() < 500) {
signInButton.on('click', function() {
signUpContainer.removeClass('open');
signInContainer.addClass('open');
});
signUpButton.on('click', function() {
signInContainer.removeClass('open');
signUpContainer.addClass('open');
});
signInContainer.addClass('open');
}
});
document.getElementById('signup-link').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('signUp').click();
});
$(window).resize(function() {
var width = $(window).width();
if(width <= 600) {
$('#container').addClass('mobile');
$('.sign-up-container').hide();
$('.sign-in-container').show();
} else {
$('#container').removeClass('mobile');
}
}).resize(); // Trigger resize function on page load
$('#signup-link').click(function(e) {
e.preventDefault();
if ($('#container').hasClass('mobile')) {
$('.sign-in-container').hide();
$('.sign-up-container').show();
} else {
// Code to slide forms goes here
}
});
$('#signin-link').click(function(e) {
e.preventDefault();
if ($('#container').hasClass('mobile')) {
$('.sign-up-container').hide();
$('.sign-in-container').show();
} else {
// Code to slide forms goes here
}
});
public/js/main.js
......@@ -3,43 +3,6 @@
(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) {
......@@ -420,60 +383,6 @@ recipesSearch.addEventListener('keydown', function (event) {
}, 200);
}
/*
function search_recipe(query) {
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) {
document.querySelector('#recipe_dropdown').style.display = 'block';
} else {
document.querySelector('#recipe_dropdown').style.display = 'none';
}
searchResults.forEach((recipe) => {
const listItem = document.createElement('li');
listItem.classList.add('recipe-item');
const nameElement = document.createElement('span');
nameElement.textContent = recipe.name;
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';
}
});
*/
})();
\ No newline at end of file
public/recipe/js/apexcharts.min.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.bundle.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.bundle.js.map 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.bundle.min.js.map 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.esm.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.esm.js.map 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.esm.min.js.map 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.js.map 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/bootstrap.min.js.map 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/chart.umd.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/echarts.min.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/insert.js 0 → 100644
const ingredientSearch = document.querySelector('#ingredient_search');
const selectedIngredients = document.querySelector('#selected_ingredients');
const cancelQuantityBtn = document.getElementById("cancel_quantity");
cancelQuantityBtn.onclick = function () {
$("#quantityModal").modal("hide");
};
const recipeForm = document.querySelector("form.my-form");
recipeForm.addEventListener("submit", function (event) {
const selectedIngredients = Array.from(document.querySelectorAll(".selected-ingredient"));
const ingredientsData = selectedIngredients.map((ingredientElem) => {
return {
id: ingredientElem.dataset.ingredientId,
amount: ingredientElem.querySelector(".ingredient-amount").textContent,
};
});
const hiddenInput = document.createElement("input");
hiddenInput.type = "hidden";
hiddenInput.name = "selected_ingredients";
hiddenInput.value = JSON.stringify(ingredientsData);
recipeForm.appendChild(hiddenInput);
});
// Array para almacenar palabras clave seleccionadas
let ingredients = [];
function searchIngredients(query) {
fetch('/search_ingredient', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
},
body: 'query=' + encodeURIComponent(query)
})
.then((response) => response.json())
.then((searchResults) => {
// Limpiar la lista de ingredientes coincidentes anterior
const ingredientsList = document.querySelector('#ingredients_list');
ingredientsList.innerHTML = '';
// Agregar ingredientes coincidentes a la lista desplegable
searchResults.forEach((ingredient) => {
const listItem = document.createElement('li');
listItem.classList.add('ingredient-item', 'd-flex', 'align-items-center', 'p-2', 'mb-1', 'bg-light', 'rounded');
const iconElement = document.createElement('img');
iconElement.setAttribute('src', '../imagenes/ingredientes/' + ingredient.icon);
iconElement.setAttribute('alt', ingredient.name + ' icon');
iconElement.classList.add('ingredient-icon', 'mr-2');
listItem.appendChild(iconElement);
const nameElement = document.createElement('span');
nameElement.textContent = ingredient.name;
nameElement.classList.add('ingredient-name', 'flex-grow-1');
listItem.appendChild(nameElement);
listItem.setAttribute('data-id', ingredient.id);
listItem.setAttribute('title', 'Haz clic para seleccionar ' + ingredient.name); // Añade información adicional al ingrediente
listItem.addEventListener('click', function () {
$("#quantityModal").modal("show");
const saveQuantityBtn = document.getElementById("save_quantity");
saveQuantityBtn.onclick = function () {
const quantity = document.getElementById("ingredient_quantity").value;
if (quantity) {
addIngredient(ingredient.name, ingredient.id, quantity, ingredient.icon);
$("#quantityModal").modal("hide");
document.getElementById("ingredient_quantity").value = "";
}
};
});
ingredientsList.appendChild(listItem);
});
});
}
// Función para agregar un ingrediente
function addIngredient(ingredientName, ingredientId, quantity, icon) {
// Agregar el ingrediente al array y actualizar el campo de selección
if (ingredientName && !ingredients.find(ing => ing.name === ingredientName)) {
ingredients.push({ name: ingredientName, id: ingredientId, quantity: quantity, icon: icon });
updateSelectedIngredients();
ingredientSearch.value = '';
}
}
// Función para eliminar una palabra clave
function removeIngredient(ingredient) {
// Eliminar la palabra clave del array y actualizar el campo de selección
ingredients = ingredients.filter(function (value) {
return value != ingredient;
});
updateSelectedIngredients();
}
// Función para actualizar el campo de selección de palabras clave
function updateSelectedIngredients() {
// Limpiar el campo de selección
selectedIngredients.innerHTML = '';
// Agregar cada ingrediente seleccionado al campo de selección
ingredients.forEach(function (ingredient) {
const ingredientElement = document.createElement('div');
ingredientElement.classList.add('selected-ingredient');
ingredientElement.setAttribute('data-ingredient-id', ingredient.id);
// Crear el elemento de imagen para el icono del ingrediente
const iconElement = document.createElement('img');
iconElement.classList.add('ingredient-icon');
iconElement.src = '../imagenes/ingredientes/' + ingredient.icon;
ingredientElement.appendChild(iconElement);
// Agregar el nombre del ingrediente y la cantidad
const ingredientNameAndQuantity = document.createElement('span');
ingredientNameAndQuantity.textContent = `${ingredient.name} (${ingredient.quantity})`;
ingredientNameAndQuantity.classList.add('ingredient-amount');
ingredientElement.appendChild(ingredientNameAndQuantity);
// Agregar el botón para eliminar el ingrediente
const removeBtn = document.createElement('button');
removeBtn.classList.add('btn', 'btn-danger', 'btn-sm');
removeBtn.textContent = 'x';
removeBtn.addEventListener('click', function () {
removeIngredient(ingredient);
});
ingredientElement.appendChild(removeBtn);
selectedIngredients.appendChild(ingredientElement);
});
}
// Agregar evento para agregar ingredientes cuando se presiona Enter en el campo de búsqueda
ingredientSearch.addEventListener('input', function (event) {
// Llamar a la función searchIngredients para buscar y mostrar ingredientes coincidentes
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/recipe/js/login.js 0 → 100644
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
document.querySelector('form').addEventListener('submit', function(event) {
var passwordInput = document.querySelector('#password');
if (passwordInput.value.length <= 8) {
alert('La contraseña debe tener más de 8 caracteres');
event.preventDefault();
}
});
$("#signin-button").on("click", function(e){
e.preventDefault();
// Get form data
var formData = {
email: $('#email-form').val(),
password: $('#password-form').val()
};
$.ajax({
type: 'POST',
url: '/loginAjax',
data: formData,
dataType: 'json',
success: function(response) {
// Handle success response
console.log(response);
window.location.assign('/home');
},
error: function(xhr, status, error) {
// Handle error response
console.log(xhr.responseText);
$('.login-error').fadeIn(1000, function() {
// Fade out the error message after 2 seconds
setTimeout(function() {
$('.login-error').fadeOut();
}, 2000);
});
}
});
})
$("#signup-button").on("click", function(e){
e.preventDefault();
// Get form data
var formData = {
email: $('#email-register-form').val(),
password: $('#password-register-form').val(),
username: $('#username-register-form').val()
};
$.ajax({
type: 'POST',
url: '/registerAjax',
data: formData,
dataType: 'json',
success: function(response) {
// Handle success response
console.log(response);
window.location.assign('/home');
},
error: function(xhr, status, error) {
// Handle error response
var errorMessage = JSON.parse(xhr.responseText).text;
console.log("Error: " + errorMessage);
$('.register-error').text(errorMessage).fadeIn(1000, function() {
// Fade out the error message after 2 seconds
setTimeout(function() {
$('.register-error').fadeOut();
}, 2000);
});
}
});
})
public/recipe/js/quill.min.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/recipe_view.js 0 → 100644
/**
* Template Name: NiceAdmin
* Updated: Mar 09 2023 with Bootstrap v5.2.3
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
(function() {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
if (all) {
select(el, all).forEach(e => e.addEventListener(type, listener))
} else {
select(el, all).addEventListener(type, listener)
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Sidebar toggle
*/
if (select('.toggle-sidebar-btn')) {
on('click', '.toggle-sidebar-btn', function(e) {
select('body').classList.toggle('toggle-sidebar')
})
}
/**
* Search bar toggle
*/
if (select('.search-bar-toggle')) {
on('click', '.search-bar-toggle', function(e) {
select('.search-bar').classList.toggle('search-bar-show')
})
}
/**
* Navbar links active state on scroll
*/
let navbarlinks = select('#navbar .scrollto', true)
const navbarlinksActive = () => {
let position = window.scrollY + 200
navbarlinks.forEach(navbarlink => {
if (!navbarlink.hash) return
let section = select(navbarlink.hash)
if (!section) return
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
navbarlink.classList.add('active')
} else {
navbarlink.classList.remove('active')
}
})
}
window.addEventListener('load', navbarlinksActive)
onscroll(document, navbarlinksActive)
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else {
selectHeader.classList.remove('header-scrolled')
}
}
window.addEventListener('load', headerScrolled)
onscroll(document, headerScrolled)
}
/**
* Back to top button
*/
let backtotop = select('.back-to-top')
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add('active')
} else {
backtotop.classList.remove('active')
}
}
window.addEventListener('load', toggleBacktotop)
onscroll(document, toggleBacktotop)
}
/**
* Initiate tooltips
*/
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
/**
* Initiate quill editors
*/
if (select('.quill-editor-default')) {
new Quill('.quill-editor-default', {
theme: 'snow'
});
}
if (select('.quill-editor-bubble')) {
new Quill('.quill-editor-bubble', {
theme: 'bubble'
});
}
if (select('.quill-editor-full')) {
new Quill(".quill-editor-full", {
modules: {
toolbar: [
[{
font: []
}, {
size: []
}],
["bold", "italic", "underline", "strike"],
[{
color: []
},
{
background: []
}
],
[{
script: "super"
},
{
script: "sub"
}
],
[{
list: "ordered"
},
{
list: "bullet"
},
{
indent: "-1"
},
{
indent: "+1"
}
],
["direction", {
align: []
}],
["link", "image", "video"],
["clean"]
]
},
theme: "snow"
});
}
/**
* Initiate TinyMCE Editor
*/
const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
tinymce.init({
selector: 'textarea.tinymce-editor',
plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
editimage_cors_hosts: ['picsum.photos'],
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl',
toolbar_sticky: true,
toolbar_sticky_offset: isSmallScreen ? 102 : 108,
autosave_ask_before_unload: true,
autosave_interval: '30s',
autosave_prefix: '{path}{query}-{id}-',
autosave_restore_when_empty: false,
autosave_retention: '2m',
image_advtab: true,
link_list: [{
title: 'My page 1',
value: 'https://www.tiny.cloud'
},
{
title: 'My page 2',
value: 'http://www.moxiecode.com'
}
],
image_list: [{
title: 'My page 1',
value: 'https://www.tiny.cloud'
},
{
title: 'My page 2',
value: 'http://www.moxiecode.com'
}
],
image_class_list: [{
title: 'None',
value: ''
},
{
title: 'Some class',
value: 'class-name'
}
],
importcss_append: true,
file_picker_callback: (callback, value, meta) => {
/* Provide file and text for the link dialog */
if (meta.filetype === 'file') {
callback('https://www.google.com/logos/google.jpg', {
text: 'My text'
});
}
/* Provide image and alt text for the image dialog */
if (meta.filetype === 'image') {
callback('https://www.google.com/logos/google.jpg', {
alt: 'My alt text'
});
}
/* Provide alternative source and posted for the media dialog */
if (meta.filetype === 'media') {
callback('movie.mp4', {
source2: 'alt.ogg',
poster: 'https://www.google.com/logos/google.jpg'
});
}
},
templates: [{
title: 'New Table',
description: 'creates a new table',
content: '<div class="mceTmpl"><table width="98%%" border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
},
{
title: 'Starting my story',
description: 'A cure for writers block',
content: 'Once upon a time...'
},
{
title: 'New list with dates',
description: 'New List with dates',
content: '<div class="mceTmpl"><span class="cdate">cdate</span><br><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
}
],
template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
height: 600,
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding',
contextmenu: 'link image table',
skin: useDarkMode ? 'oxide-dark' : 'oxide',
content_css: useDarkMode ? 'dark' : 'default',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
/**
* Initiate Bootstrap validation check
*/
var needsValidation = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(needsValidation)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
/**
* Initiate Datatables
*/
const datatables = select('.datatable', true)
datatables.forEach(datatable => {
new simpleDatatables.DataTable(datatable);
})
/**
* Autoresize echart charts
*/
const mainContainer = select('#main');
if (mainContainer) {
setTimeout(() => {
new ResizeObserver(function() {
select('.echart', true).forEach(getEchart => {
echarts.getInstanceByDom(getEchart).resize();
})
}).observe(mainContainer);
}, 200);
}
})();
\ No newline at end of file
public/recipe/js/tinymce.min.js 0 → 100644
This diff could not be displayed because it is too large.
public/recipe/js/validate.js 0 → 100644
/**
* PHP Email Form Validation - v3.6
* URL: https://bootstrapmade.com/php-email-form/
* Author: BootstrapMade.com
*/
(function () {
"use strict";
let forms = document.querySelectorAll('.php-email-form');
forms.forEach( function(e) {
e.addEventListener('submit', function(event) {
event.preventDefault();
let thisForm = this;
let action = thisForm.getAttribute('action');
let recaptcha = thisForm.getAttribute('data-recaptcha-site-key');
if( ! action ) {
displayError(thisForm, 'The form action property is not set!');
return;
}
thisForm.querySelector('.loading').classList.add('d-block');
thisForm.querySelector('.error-message').classList.remove('d-block');
thisForm.querySelector('.sent-message').classList.remove('d-block');
let formData = new FormData( thisForm );
if ( recaptcha ) {
if(typeof grecaptcha !== "undefined" ) {
grecaptcha.ready(function() {
try {
grecaptcha.execute(recaptcha, {action: 'php_email_form_submit'})
.then(token => {
formData.set('recaptcha-response', token);
php_email_form_submit(thisForm, action, formData);
})
} catch(error) {
displayError(thisForm, error);
}
});
} else {
displayError(thisForm, 'The reCaptcha javascript API url is not loaded!')
}
} else {
php_email_form_submit(thisForm, action, formData);
}
});
});
function php_email_form_submit(thisForm, action, formData) {
fetch(action, {
method: 'POST',
body: formData,
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(response => {
if( response.ok ) {
return response.text();
} else {
throw new Error(`${response.status} ${response.statusText} ${response.url}`);
}
})
.then(data => {
thisForm.querySelector('.loading').classList.remove('d-block');
if (data.trim() == 'OK') {
thisForm.querySelector('.sent-message').classList.add('d-block');
thisForm.reset();
} else {
throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action);
}
})
.catch((error) => {
displayError(thisForm, error);
});
}
function displayError(thisForm, error) {
thisForm.querySelector('.loading').classList.remove('d-block');
thisForm.querySelector('.error-message').innerHTML = error;
thisForm.querySelector('.error-message').classList.add('d-block');
}
})();
\ 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