Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit b09851d8 by Juan Montilla
Options

ajax

parent 83dd03bb
Inline Side-by-side
Showing with 840 additions and 822 deletions
app/Config/Routes.php
...@@ -38,6 +38,8 @@ $routes->match(['get', 'post'], '/registerAjax', [User::class, 'registerAjax']); ...@@ -38,6 +38,8 @@ $routes->match(['get', 'post'], '/registerAjax', [User::class, 'registerAjax']);
$routes->match(['get'], '/home', [User::class, 'user_ok']); $routes->match(['get'], '/home', [User::class, 'user_ok']);
$routes->get('/recipe/(:num)', 'RecipesController::view_recipe/$1');
// Ruta para obtener una imagen de una receta dado un id // Ruta para obtener una imagen de una receta dado un id
$routes->get('recipe/image/(:num)', 'RecipesController::show_image/$1'); $routes->get('recipe/image/(:num)', 'RecipesController::show_image/$1');
...@@ -46,15 +48,15 @@ $routes->get('/insert_recipe', 'InsertRecipeController::index'); ...@@ -46,15 +48,15 @@ $routes->get('/insert_recipe', 'InsertRecipeController::index');
$routes->match(['get', 'post'], '/search_ingredient', 'InsertRecipeController::search_ingredient'); $routes->match(['get', 'post'], '/search_ingredient', 'InsertRecipeController::search_ingredient');
$routes->post('/insert_recipe', 'InsertRecipeController::insert_recipe'); $routes->post('/insert_recipe', 'InsertRecipeController::insert_recipe');
// Ruta para la búsqueda de recetas
$routes->match(['get', 'post'], '/search_recipe', 'RecipesController::search_recipe'); $routes->match(['get', 'post'], '/search_recipe', 'RecipesController::search_recipe');
$routes->get('login','Pages::viewLogin'); $routes->get('login','Pages::viewLogin');
$routes->get('users','User::list'); $routes->get('users','User::list');
$routes->get('home','Pages::prueba'); $routes->get('home','Pages::prueba');
$routes->get('(:segment)', 'Home::index'); $routes->get('(:segment)', 'Home::index');
$routes->get('/recipe/(:num)', 'RecipesController::view_recipe/$1');
......
app/Controllers/RecipesController.php
...@@ -25,7 +25,7 @@ class RecipesController extends Controller ...@@ -25,7 +25,7 @@ class RecipesController extends Controller
]; ];
return view('templates/header', $data) return view('templates/header', $data)
. view('pages/recipe_view', $data) . view('pages/recipe_view')
. view('templates/footer'); . view('templates/footer');
} }
...@@ -45,25 +45,11 @@ class RecipesController extends Controller ...@@ -45,25 +45,11 @@ class RecipesController extends Controller
} }
} }
//public function search_recipe() {
// Obtener la consulta de búsqueda desde el formulario
// $query = $this->request->getVar('query');
// Cargar el modelo de ingredientes (si no lo has hecho)
//$recipesModel = new \App\Models\RecipesModel();
// Buscar ingredientes en la base de datos que coincidan con la consulta
// $recipes = $recipesModel->search_recipe($query);
// Devolver los ingredientes coincidentes en formato JSON
// return $this->response->setJSON($recipes);
// }
public function search_recipe() public function search_recipe()
{ {
$query = $this->request->getVar('query'); $query = $this->request->getVar('query');
$recipesModel = new \App\Models\RecipesModel(); $recipesModel = new \App\Models\RecipesModel();
$recipes = $recipesModel->search_recipe($query); $recipes = $recipesModel->searchRecipe($query);
return $this->response->setJSON($recipes); return $this->response->setJSON($recipes);
} }
} }
\ No newline at end of file
app/Models/RecipesModel.php
...@@ -3,7 +3,7 @@ namespace App\Models; ...@@ -3,7 +3,7 @@ namespace App\Models;
use CodeIgniter\Model; use CodeIgniter\Model;
class recipesModel extends Model class RecipesModel extends Model
{ {
protected $table = 'recipes'; protected $table = 'recipes';
protected $primaryKey = 'id'; protected $primaryKey = 'id';
...@@ -11,7 +11,7 @@ class recipesModel extends Model ...@@ -11,7 +11,7 @@ class recipesModel extends Model
protected $returnType = 'object'; # 'object' or 'array' protected $returnType = 'object'; # 'object' or 'array'
protected $useSoftDeletes = false; # true if you expect to recover data protected $useSoftDeletes = false; # true if you expect to recover data
# Fields that can be set during save, insert, or update methods # Fields that can be set during save, insert, or update methods
protected $allowedFields = ['id', 'name', 'season','origin','photo','is_vegan','description','instructions','link']; protected $allowedFields = ['id', 'name', 'season', 'origin', 'photo', 'is_vegan', 'description', 'instructions', 'link'];
protected $useTimestamps = false; # no timestamps on inserts and updates protected $useTimestamps = false; # no timestamps on inserts and updates
# Do not use validations rules (for the time being...) # Do not use validations rules (for the time being...)
protected $validationRules = []; protected $validationRules = [];
...@@ -35,7 +35,8 @@ class recipesModel extends Model ...@@ -35,7 +35,8 @@ class recipesModel extends Model
return $this->insert($data); return $this->insert($data);
} }
public function get_recipe_ingredients($recipe_id) { public function get_recipe_ingredients($recipe_id)
{
$builder = $this->db->table('recipes_ingredient'); $builder = $this->db->table('recipes_ingredient');
$builder->select('ingredient.name, ingredient.icon, recipes_ingredient.amount'); $builder->select('ingredient.name, ingredient.icon, recipes_ingredient.amount');
$builder->join('ingredient', 'recipes_ingredient.id_ingredient = ingredient.id'); $builder->join('ingredient', 'recipes_ingredient.id_ingredient = ingredient.id');
...@@ -43,21 +44,22 @@ class recipesModel extends Model ...@@ -43,21 +44,22 @@ class recipesModel extends Model
$query = $builder->get(); $query = $builder->get();
return $query->getResult(); return $query->getResult();
} }
/* public function search_recipe($query)
{
if ($query) {
return $this->like('name', $query)->findAll();
}
return [];
} */
public function search_recipe($query)
public function searchRecipe($query)
{ {
if ($query) { if ($query) {
// Seleccionar todas las columnas excepto 'photo'
$this->select('id, name, season, origin, is_vegan, description, instructions, link');
return $this->like('name', $query)->findAll(); return $this->like('name', $query)->findAll();
} }
return []; return [];
} }
} }
\ No newline at end of file
app/Views/pages/home.php
<!-- ======= Sidebar ======= -->
<aside id="sidebar" class="sidebar">
<ul class="sidebar-nav" id="sidebar-nav">
<li class="nav-item">
<a class="nav-link " href="index.html">
<i class="bi bi-grid"></i>
<span>Recetas</span>
</a>
</li><!-- End Dashboard Nav -->
<!-- Filtro 1-->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Filtro Vegano</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="vegan-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Order one">
<label for="checkboxOne">Recetas Veganas </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<!-- Filtro 1-->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav2" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Filtro 2</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav2" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="indian-cboxtags">
<li>
<input type="checkbox" id="checkboxFour" value="Order four">
<label for="checkboxFour">India </label>
</li>
</ul>
<ul class="french-cboxtags">
<li>
<input type="checkbox" id="checkboxFive" value="Order five">
<label for="checkboxFive">Francia </label>
</li>
</ul>
<ul class="chinese-cboxtags">
<li>
<input type="checkbox" id="checkboxSix" value="Order six">
<label for="checkboxSix">China </label>
</li>
</ul>
<ul class="mexican-cboxtags">
<li>
<input type="checkbox" id="checkboxSeven" value="Order seven">
<label for="checkboxSeven">México </label>
</li>
</ul>
<ul class="spanish-cboxtags">
<li>
<input type="checkbox" id="checkboxEight" value="Order eigth">
<label for="checkboxEight">España </label>
</li>
</ul>
<ul class="japanese-cboxtags">
<li>
<input type="checkbox" id="checkboxNine" value="Order nine">
<label for="checkboxNine">Japón </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav3" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Estaciones</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav3" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="winter-cboxtags">
<li>
<input type="checkbox" id="checkboxTen" value="Order ten">
<label for="checkboxTen">Invierno </label>
</li>
</ul>
<ul class="spring-cboxtags">
<li>
<input type="checkbox" id="checkboxEleven" value="Order eleven">
<label for="checkboxEleven">Primavera </label>
</li>
</ul>
<ul class="summer-cboxtags">
<li>
<input type="checkbox" id="checkboxTwelve" value="Order twelve">
<label for="checkboxTwelve">Verano </label>
</li>
</ul>
<ul class="autumn-cboxtags">
<li>
<input type="checkbox" id="checkbox13" value="Order 13">
<label for="checkbox13">Otoño </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-file-earmark"></i>
<span>Subir receta</span>
</a>
</li><!-- End Profile Page Nav -->
<li class="nav-item">
<a class="nav-link collapsed" href="https://www.instagram.com/salvaperfectti/">
<i class="bi bi-envelope"></i>
<span>Contacto</span>
</a>
</li><!-- End Contact Page Nav -->
<li class="nav-item">
<a class="nav-link collapsed" href="/login">
<i class="bi bi-box-arrow-in-right"></i>
<span>Registro/Login</span>
</a>
</li><!-- End Login Page Nav -->
<li class="nav-item">
<a class="nav-link collapsed" href="http://www.homerswebpage.com/">
<i class="bi bi-dash-circle"></i>
<span>Error 404</span>
</a>
</li><!-- End Error 404 Page Nav -->
</ul>
</aside><!-- End Sidebar-->
<main id="main" class="main"> <main id="main" class="main">
<div class="pagetitle"> <div class="pagetitle">
...@@ -179,51 +20,50 @@ ...@@ -179,51 +20,50 @@
foreach ($recipes as $row) { foreach ($recipes as $row) {
$ingredients = $recipesModel->get_recipe_ingredients($row->id); $ingredients = $recipesModel->get_recipe_ingredients($row->id);
?> ?>
<!-- Inicio de la tarjeta de la receta --> <!-- Inicio de la tarjeta de la receta -->
<div class="recipe-card-wrapper"> <div class="card info-card sales-card"
<a href="<?php echo base_url('recipe/' . $row->id); ?>" class="recipe-card-link"> onclick="window.location.href='<?php echo base_url('recipe/' . $row->id); ?>'">
<div class="card info-card sales-card"> <a href="<?php echo base_url('recipe/' . $row->id); ?>">
<div class="row"> </a>
<div class="col-md-3 imagen-container"> <div class="row flex-nowrap">
<img src="<?php echo base_url('recipe/image/' . $row->id); ?>" alt="" class="img-fluid rounded-start"> <div class="col-lg-3 col-md-4 col-sm-12 imagen-container">
</div> <img src="<?php echo base_url('recipe/image/' . $row->id); ?>" alt=""
class="img-fluid rounded-start">
</div>
<div class="col-md-9"> <div class="col-lg-9 col-md-8 col-sm-12">
<div class="filter"> <div class="filter">
<a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a> <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"> <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<li class="dropdown-header text-start"> <li class="dropdown-header text-start">
<h6>Opciones</h6> <h6>Opciones</h6>
</li> </li>
<li><a class="dropdown-item" href="#">Guardar</a></li> <li><a class="dropdown-item" href="#">Guardar</a></li>
<li><a class="dropdown-item" href="#">Compartir</a></li> <li><a class="dropdown-item" href="#">Compartir</a></li>
</ul> </ul>
</div> </div>
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title">
<?php echo $row->name; ?> <span>| <?php echo $row->name; ?> <span>|
<?php echo $row->origin; ?> <?php echo $row->origin; ?>
</span> </span>
</h5> </h5>
<!--ingredientes--> <!--ingredientes-->
<?php foreach ($ingredients as $ingredient) { ?> <?php foreach ($ingredients as $ingredient) { ?>
<div class="chip" title="Cantidad: <?php echo $ingredient->amount; ?>"> <div class="chip" title="Cantidad: <?php echo $ingredient->amount; ?>">
<img src="imagenes/ingredientes/<?php echo $ingredient->icon; ?>"> <img src="imagenes/ingredientes/<?php echo $ingredient->icon; ?>">
<b style="font-size: 14px"> <b style="font-size: 14px">
<?php echo $ingredient->name; ?> <?php echo $ingredient->name; ?>
</b> </b>
</div>
<?php } ?>
<!--fin ingredientes-->
</div> </div>
</div> <?php } ?>
<!--fin ingredientes-->
</div> </div>
</div> </div>
</a> </div>
</div> </div>
<!-- Fin de la tarjeta de la receta --> <!-- Fin de la tarjeta de la receta -->
<?php <?php
} }
......
app/Views/pages/recipe_view.php
<?php <?php
function getYoutubeVideoId($url) { function getYoutubeVideoId($url)
{
$pattern = '/^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i'; $pattern = '/^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i';
preg_match($pattern, $url, $matches); preg_match($pattern, $url, $matches);
return isset($matches[1]) ? $matches[1] : null; return isset($matches[1]) ? $matches[1] : null;
...@@ -7,112 +8,124 @@ function getYoutubeVideoId($url) { ...@@ -7,112 +8,124 @@ function getYoutubeVideoId($url) {
?> ?>
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.container { .container {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
} }
.recipe-header { .recipe-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
} }
.recipe-header img { .recipe-header img {
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: 8px;
} }
.ingredient-list { .ingredient-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-bottom: 30px; margin-bottom: 30px;
} }
.ingredient-item { .ingredient-item {
display: flex; display: flex;
align-items: center; align-items: center;
width: 50%; width: 50%;
padding: 5px 0; padding: 5px 0;
} }
.ingredient-item img { .ingredient-item img {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
} }
.instructions { .instructions {
white-space: pre-line; white-space: pre-line;
} }
.video-container { .video-container {
position: relative; position: relative;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 */ padding-bottom: 56.25%;
height: 0; /* Relación de aspecto 16:9 */
overflow: hidden; height: 0;
} overflow: hidden;
}
.video-container iframe {
position: absolute; .video-container iframe {
top: 0; position: absolute;
left: 0; top: 0;
width: 100%; left: 0;
height: 100%; width: 100%;
} height: 100%;
</style> }
</style>
<main id="mainview" class="mainview">
<main id="main" class="main">
<section class="section dashboard"> <section class="section dashboard">
<div class="container"> <div class="container">
<div class="recipe-header"> <div class="recipe-header">
<h1>Receta:</h1> <h1>
<h1><?php echo $recipe->name; ?></h1> <?php echo $recipe->name; ?>
<img src="<?php echo base_url('recipe/image/' . $recipe->id); ?>" alt="<?php echo $recipe->name; ?>" /> </h1>
</div> <img src="<?php echo base_url('recipe/image/' . $recipe->id); ?>" alt="<?php echo $recipe->name; ?>" />
</div>
<p><?php echo $recipe->description; ?></p>
<p>
<h2>Ingredientes</h2> <?php echo $recipe->description; ?>
<ul class="ingredient-list"> </p>
<?php foreach ($ingredients as $ingredient) { ?>
<li class="ingredient-item"> <h2>Ingredientes</h2>
<img src="../imagenes/ingredientes/<?php echo $ingredient->icon; ?>" alt="<?php echo $ingredient->name; ?>" /> <ul class="ingredient-list">
<span><?php echo $ingredient->name; ?>: <?php echo $ingredient->amount; ?></span> <?php foreach ($ingredients as $ingredient) { ?>
</li> <li class="ingredient-item">
<?php } ?> <img src="../imagenes/ingredientes/<?php echo $ingredient->icon; ?>"
</ul> alt="<?php echo $ingredient->name; ?>" />
<span>
<h2>Instrucciones</h2> <?php echo $ingredient->name; ?>:
<p class="instructions"><?php echo $recipe->instructions; ?></p> <?php echo $ingredient->amount; ?>
</span>
<?php if (!empty($recipe->link)): ?> </li>
<?php $videoId = getYoutubeVideoId($recipe->link); ?> <?php } ?>
<?php if ($videoId): ?> </ul>
<h2>Video de la receta</h2>
<div class="video-container"> <h2>Instrucciones</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $videoId; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p class="instructions">
</div> <?php echo $recipe->instructions; ?>
</p>
<?php if (!empty($recipe->link)): ?>
<?php $videoId = getYoutubeVideoId($recipe->link); ?>
<?php if ($videoId): ?>
<h2>Video de la receta</h2>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $videoId; ?>"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<?php endif; ?>
<?php endif; ?> <?php endif; ?>
<?php endif; ?> </div>
</div>
</section> </section>
</main><!-- End #main --> </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>
</head> </head>
...@@ -55,15 +55,15 @@ ...@@ -55,15 +55,15 @@
<i class="bi bi-list toggle-sidebar-btn"></i> <i class="bi bi-list toggle-sidebar-btn"></i>
</div><!-- End Logo --> </div><!-- End Logo -->
<!-- Barra de búsqueda -->
<div class="search-bar"> <div class="search-bar">
<form class="search-form d-flex align-items-center" method="POST" action="#"> <form class="search-form d-flex align-items-center" method="POST" action="#">
<input type="text" id="search-query" name="query" placeholder="Buscar por receta..." <input type="text" id="search-query" name="query" placeholder="Buscar por receta..."
title="Enter search keyword"> title="Enter search keyword" >
</form> </form>
<div id="recipe_dropdown" class="recipe-dropdown"> <ul id="recipe_list" class="ingredients-list list-unstyled"></ul>
<ul id="recipe_list" class="recipe-list list-unstyled"></ul> </div>
</div> <!-- Fin barra de búsqueda -->
</div>
...@@ -154,4 +154,163 @@ ...@@ -154,4 +154,163 @@
</ul> </ul>
</nav><!-- End Icons Navigation --> </nav><!-- End Icons Navigation -->
</header><!-- End Header --> </header><!-- End Header -->
\ No newline at end of file
<!-- ======= Sidebar ======= -->
<aside id="sidebar" class="sidebar">
<ul class="sidebar-nav" id="sidebar-nav">
<li class="nav-item">
<a class="nav-link " href="index.html">
<i class="bi bi-grid"></i>
<span>Recetas</span>
</a>
</li><!-- End Dashboard Nav -->
<!-- Filtro 1-->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Filtro Vegano</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="vegan-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Order one">
<label for="checkboxOne">Recetas Veganas </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<!-- Filtro 1-->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav2" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Filtro 2</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav2" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="indian-cboxtags">
<li>
<input type="checkbox" id="checkboxFour" value="Order four">
<label for="checkboxFour">India </label>
</li>
</ul>
<ul class="french-cboxtags">
<li>
<input type="checkbox" id="checkboxFive" value="Order five">
<label for="checkboxFive">Francia </label>
</li>
</ul>
<ul class="chinese-cboxtags">
<li>
<input type="checkbox" id="checkboxSix" value="Order six">
<label for="checkboxSix">China </label>
</li>
</ul>
<ul class="mexican-cboxtags">
<li>
<input type="checkbox" id="checkboxSeven" value="Order seven">
<label for="checkboxSeven">México </label>
</li>
</ul>
<ul class="spanish-cboxtags">
<li>
<input type="checkbox" id="checkboxEight" value="Order eigth">
<label for="checkboxEight">España </label>
</li>
</ul>
<ul class="japanese-cboxtags">
<li>
<input type="checkbox" id="checkboxNine" value="Order nine">
<label for="checkboxNine">Japón </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav3" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Estaciones</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav3" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="winter-cboxtags">
<li>
<input type="checkbox" id="checkboxTen" value="Order ten">
<label for="checkboxTen">Invierno </label>
</li>
</ul>
<ul class="spring-cboxtags">
<li>
<input type="checkbox" id="checkboxEleven" value="Order eleven">
<label for="checkboxEleven">Primavera </label>
</li>
</ul>
<ul class="summer-cboxtags">
<li>
<input type="checkbox" id="checkboxTwelve" value="Order twelve">
<label for="checkboxTwelve">Verano </label>
</li>
</ul>
<ul class="autumn-cboxtags">
<li>
<input type="checkbox" id="checkbox13" value="Order 13">
<label for="checkbox13">Otoño </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-file-earmark"></i>
<span>Subir receta</span>
</a>
</li><!-- End Profile Page Nav -->
<li class="nav-item">
<a class="nav-link collapsed" href="https://www.instagram.com/salvaperfectti/">
<i class="bi bi-envelope"></i>
<span>Contacto</span>
</a>
</li><!-- End Contact Page Nav -->
<li class="nav-item">
<a class="nav-link collapsed" href="/login">
<i class="bi bi-box-arrow-in-right"></i>
<span>Registro/Login</span>
</a>
</li><!-- End Login Page Nav -->
<li class="nav-item">
<a class="nav-link collapsed" href="http://www.homerswebpage.com/">
<i class="bi bi-dash-circle"></i>
<span>Error 404</span>
</a>
</li><!-- End Error 404 Page Nav -->
</ul>
</aside><!-- End Sidebar-->
\ No newline at end of file
public/css/style.css
...@@ -360,6 +360,26 @@ h6 { ...@@ -360,6 +360,26 @@ h6 {
.header .search-bar { .header .search-bar {
min-width: 360px; min-width: 360px;
padding: 0 20px; padding: 0 20px;
position: relative;
}
#recipe_list {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
border-top: none;
border-radius: 0 0 .25rem .25rem;
padding: 0;
margin: 0;
}
.recipe-item {
cursor: pointer;
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
...@@ -789,10 +809,7 @@ h6 { ...@@ -789,10 +809,7 @@ h6 {
} }
/* Info Cards */ /* Info Cards */
.dashboard .info-card { s
padding-bottom: 10px;
}
.dashboard .info-card h6 { .dashboard .info-card h6 {
font-size: 28px; font-size: 28px;
color: #012970; color: #012970;
...@@ -904,12 +921,6 @@ h6 { ...@@ -904,12 +921,6 @@ h6 {
padding-left: 0; padding-left: 0;
} }
.recipe-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.dashboard .news p { .dashboard .news p {
font-size: 14px; font-size: 14px;
color: #777777; color: #777777;
......
public/js/insert.js
...@@ -11,21 +11,21 @@ const recipeForm = document.querySelector("form.my-form"); ...@@ -11,21 +11,21 @@ const recipeForm = document.querySelector("form.my-form");
recipeForm.addEventListener("submit", function (event) { recipeForm.addEventListener("submit", function (event) {
const selectedIngredients = Array.from(document.querySelectorAll(".selected-ingredient")); const selectedIngredients = Array.from(document.querySelectorAll(".selected-ingredient"));
const ingredientsData = selectedIngredients.map((ingredientElem) => { const ingredientsData = selectedIngredients.map((ingredientElem) => {
return { return {
id: ingredientElem.dataset.ingredientId, id: ingredientElem.dataset.ingredientId,
amount: ingredientElem.querySelector(".ingredient-amount").textContent, amount: ingredientElem.querySelector(".ingredient-amount").textContent,
}; };
}); });
const hiddenInput = document.createElement("input"); const hiddenInput = document.createElement("input");
hiddenInput.type = "hidden"; hiddenInput.type = "hidden";
hiddenInput.name = "selected_ingredients"; hiddenInput.name = "selected_ingredients";
hiddenInput.value = JSON.stringify(ingredientsData); hiddenInput.value = JSON.stringify(ingredientsData);
recipeForm.appendChild(hiddenInput); recipeForm.appendChild(hiddenInput);
}); });
// Array para almacenar palabras clave seleccionadas // Array para almacenar palabras clave seleccionadas
let ingredients = []; let ingredients = [];
...@@ -35,7 +35,7 @@ function searchIngredients(query) { ...@@ -35,7 +35,7 @@ function searchIngredients(query) {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest' // Añadir esta línea 'X-Requested-With': 'XMLHttpRequest'
}, },
body: 'query=' + encodeURIComponent(query) body: 'query=' + encodeURIComponent(query)
}) })
...@@ -109,38 +109,38 @@ function removeIngredient(ingredient) { ...@@ -109,38 +109,38 @@ function removeIngredient(ingredient) {
function updateSelectedIngredients() { function updateSelectedIngredients() {
// Limpiar el campo de selección // Limpiar el campo de selección
selectedIngredients.innerHTML = ''; selectedIngredients.innerHTML = '';
// Agregar cada ingrediente seleccionado al campo de selección // Agregar cada ingrediente seleccionado al campo de selección
ingredients.forEach(function (ingredient) { ingredients.forEach(function (ingredient) {
const ingredientElement = document.createElement('div'); const ingredientElement = document.createElement('div');
ingredientElement.classList.add('selected-ingredient'); ingredientElement.classList.add('selected-ingredient');
ingredientElement.setAttribute('data-ingredient-id', ingredient.id); ingredientElement.setAttribute('data-ingredient-id', ingredient.id);
// Crear el elemento de imagen para el icono del ingrediente // Crear el elemento de imagen para el icono del ingrediente
const iconElement = document.createElement('img'); const iconElement = document.createElement('img');
iconElement.classList.add('ingredient-icon'); iconElement.classList.add('ingredient-icon');
iconElement.src = '../imagenes/ingredientes/' + ingredient.icon; iconElement.src = '../imagenes/ingredientes/' + ingredient.icon;
ingredientElement.appendChild(iconElement); ingredientElement.appendChild(iconElement);
// Agregar el nombre del ingrediente y la cantidad // Agregar el nombre del ingrediente y la cantidad
const ingredientNameAndQuantity = document.createElement('span'); const ingredientNameAndQuantity = document.createElement('span');
ingredientNameAndQuantity.textContent = `${ingredient.name} (${ingredient.quantity})`; ingredientNameAndQuantity.textContent = `${ingredient.name} (${ingredient.quantity})`;
ingredientNameAndQuantity.classList.add('ingredient-amount'); ingredientNameAndQuantity.classList.add('ingredient-amount');
ingredientElement.appendChild(ingredientNameAndQuantity); ingredientElement.appendChild(ingredientNameAndQuantity);
// Agregar el botón para eliminar el ingrediente // Agregar el botón para eliminar el ingrediente
const removeBtn = document.createElement('button'); const removeBtn = document.createElement('button');
removeBtn.classList.add('btn', 'btn-danger', 'btn-sm'); removeBtn.classList.add('btn', 'btn-danger', 'btn-sm');
removeBtn.textContent = 'x'; removeBtn.textContent = 'x';
removeBtn.addEventListener('click', function () { removeBtn.addEventListener('click', function () {
removeIngredient(ingredient); removeIngredient(ingredient);
}); });
ingredientElement.appendChild(removeBtn); ingredientElement.appendChild(removeBtn);
selectedIngredients.appendChild(ingredientElement); selectedIngredients.appendChild(ingredientElement);
}); });
} }
...@@ -154,43 +154,43 @@ ingredientSearch.addEventListener('input', function (event) { ...@@ -154,43 +154,43 @@ ingredientSearch.addEventListener('input', function (event) {
var inputPhoto = document.getElementById('photo'); var inputPhoto = document.getElementById('photo');
var imageUploadContainer = document.querySelector('.image-upload-container'); var imageUploadContainer = document.querySelector('.image-upload-container');
inputPhoto.addEventListener('change', function(event) { inputPhoto.addEventListener('change', function (event) {
displayImagePreview(event.target.files[0]); displayImagePreview(event.target.files[0]);
}); });
imageUploadContainer.addEventListener('dragover', function(event) { imageUploadContainer.addEventListener('dragover', function (event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
event.dataTransfer.dropEffect = 'copy'; event.dataTransfer.dropEffect = 'copy';
}); });
imageUploadContainer.addEventListener('drop', function(event) { imageUploadContainer.addEventListener('drop', function (event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (event.dataTransfer.files.length > 0) { if (event.dataTransfer.files.length > 0) {
displayImagePreview(event.dataTransfer.files[0]); displayImagePreview(event.dataTransfer.files[0]);
inputPhoto.files = event.dataTransfer.files; inputPhoto.files = event.dataTransfer.files;
} }
}); });
function displayImagePreview(file) { function displayImagePreview(file) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function() { reader.onload = function () {
var output = document.getElementById('image-preview'); var output = document.getElementById('image-preview');
output.src = reader.result; output.src = reader.result;
output.style.display = 'block'; output.style.display = 'block';
} }
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
document.getElementById('photo').addEventListener('change', function(event) { document.getElementById('photo').addEventListener('change', function (event) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function() { reader.onload = function () {
var output = document.getElementById('image-preview'); var output = document.getElementById('image-preview');
output.src = reader.result; output.src = reader.result;
output.style.display = 'block'; output.style.display = 'block';
} }
reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL(event.target.files[0]);
}); });
public/js/main.js
/**
* Template Name: NiceAdmin
* Updated: Mar 09 2023 with Bootstrap v5.2.3
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ (function () {
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/ const recipesSearch = document.querySelector('#search-query');
*/
(function() { function search_recipe(query) {
"use strict"; fetch('/search_recipe', {
method: 'POST',
/** headers: {
* Easy selector helper function 'Content-Type': 'application/x-www-form-urlencoded',
*/ 'X-Requested-With': 'XMLHttpRequest'
const select = (el, all = false) => { },
el = el.trim() body: 'query=' + encodeURIComponent(query)
if (all) { })
return [...document.querySelectorAll(el)] .then((response) => response.json())
.then((searchResults) => {
// Limpiar la lista de recetas coincidentes anterior
const recipeList = document.querySelector('#recipe_list');
recipeList.innerHTML = '';
// Agregar recetas coincidentes a la lista desplegable
searchResults.forEach((recipe) => {
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 = recipe.name;
nameElement.classList.add('recipe-name', 'flex-grow-1');
listItem.appendChild(nameElement);
listItem.setAttribute('data-id', recipe.id);
listItem.setAttribute('title', 'Haz clic para seleccionar ' + recipe.name);
listItem.setAttribute('href', '/recipe/' + recipe.id);
listItem.addEventListener('click', function () {
window.location.href = this.getAttribute('href');
});
recipeList.appendChild(listItem);
});
});
}
// Agregar evento para ir a una receta cuando se seleccione
recipesSearch.addEventListener('input', function (event) {
// Llamar a la función search_recipe para buscar y mostrar recetas coincidentes
search_recipe(event.target.value);
});
"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 { } else {
return document.querySelector(el) navbarlink.classList.remove('active')
} }
} })
}
/** window.addEventListener('load', navbarlinksActive)
* Easy event listener function onscroll(document, navbarlinksActive)
*/
const on = (type, el, listener, all = false) => { /**
if (all) { * Toggle .header-scrolled class to #header when page is scrolled
select(el, all).forEach(e => e.addEventListener(type, listener)) */
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else { } else {
select(el, all).addEventListener(type, listener) selectHeader.classList.remove('header-scrolled')
} }
} }
window.addEventListener('load', headerScrolled)
/** onscroll(document, headerScrolled)
* Easy on scroll event listener }
*/
const onscroll = (el, listener) => { /**
el.addEventListener('scroll', listener) * 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)
* Sidebar toggle }
*/
if (select('.toggle-sidebar-btn')) {
on('click', '.toggle-sidebar-btn', function(e) {
select('body').classList.toggle('toggle-sidebar')
}) /**
* 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: [{
* Search bar toggle title: 'My page 1',
*/ value: 'https://www.tiny.cloud'
if (select('.search-bar-toggle')) { },
on('click', '.search-bar-toggle', function(e) { {
select('.search-bar').classList.toggle('search-bar-show') title: 'My page 2',
}) value: 'http://www.moxiecode.com'
} }
],
/** image_class_list: [{
* Navbar links active state on scroll title: 'None',
*/ value: ''
let navbarlinks = select('#navbar .scrollto', true) },
const navbarlinksActive = () => { {
let position = window.scrollY + 200 title: 'Some class',
navbarlinks.forEach(navbarlink => { value: 'class-name'
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) importcss_append: true,
file_picker_callback: (callback, value, meta) => {
/** /* Provide file and text for the link dialog */
* Toggle .header-scrolled class to #header when page is scrolled if (meta.filetype === 'file') {
*/ callback('https://www.google.com/logos/google.jpg', {
let selectHeader = select('#header') text: 'My text'
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) /* 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'
* 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) /* 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)
* Initiate tooltips .forEach(function (form) {
*/ form.addEventListener('submit', function (event) {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) if (!form.checkValidity()) {
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { event.preventDefault()
return new bootstrap.Tooltip(tooltipTriggerEl) event.stopPropagation()
})
/**
* 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, form.classList.add('was-validated')
file_picker_callback: (callback, value, meta) => { }, false)
/* 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);
}
/**
* 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);
}
/*
function search_recipe(query) {
if (query.trim() === '') {
document.querySelector('#recipe_dropdown').style.display = 'none'; /*
return; function search_recipe(query) {
} if (query.trim() === '') {
document.querySelector('#recipe_dropdown').style.display = 'none';
var xhr = new XMLHttpRequest(); return;
xhr.open('POST', '/search_recipe', true); }
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () { xhr.open('POST', '/search_recipe', true);
if (xhr.readyState === 4 && xhr.status === 200) { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
try { xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
var searchResults = JSON.parse(xhr.responseText); 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);
if (searchResults.length > 0) { const recipeList = document.querySelector('#recipe_list');
document.querySelector('#recipe_dropdown').style.display = 'block'; recipeList.innerHTML = '';
} else {
document.querySelector('#recipe_dropdown').style.display = 'none'; if (searchResults.length > 0) {
} document.querySelector('#recipe_dropdown').style.display = 'block';
} else {
searchResults.forEach((recipe) => { document.querySelector('#recipe_dropdown').style.display = 'none';
const listItem = document.createElement('li'); }
listItem.classList.add('recipe-item');
searchResults.forEach((recipe) => {
const nameElement = document.createElement('span'); const listItem = document.createElement('li');
nameElement.textContent = recipe.name; listItem.classList.add('recipe-item');
listItem.appendChild(nameElement);
const nameElement = document.createElement('span');
recipeList.appendChild(listItem); nameElement.textContent = recipe.name;
}); listItem.appendChild(nameElement);
} catch (error) {
console.error('Error parsing JSON response:', error); recipeList.appendChild(listItem);
} });
} else if (xhr.readyState === 4) { } catch (error) {
console.error('Error in request:', xhr.status, xhr.statusText); 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) { xhr.send('query=' + encodeURIComponent(query));
if (!event.target.closest('.search-bar')) { }
document.querySelector('#recipe_dropdown').style.display = 'none';
} document.addEventListener('click', function (event) {
}); if (!event.target.closest('.search-bar')) {
*/ document.querySelector('#recipe_dropdown').style.display = 'none';
}
function search_recipe(query) { });
fetch('/search_recipe', { */
method: 'POST',
headers: { })();
'Content-Type': 'application/x-www-form-urlencoded', \ No newline at end of file
'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);
});
})();
\ 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