111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function(){
|
|
|
|
let searchInput = "";
|
|
let tagsId = [];
|
|
let ingredientsId = [];
|
|
|
|
function buildCards( data ){
|
|
|
|
if( Array.isArray( data ) ){
|
|
data = Object.assign({}, data );
|
|
}
|
|
|
|
document.getElementById( "recetteList" ).innerHTML = '';
|
|
for( const [key, recette] of Object.entries( data ) ) {
|
|
let HTML_CONTENT = `<a class="recette-icone" href="<?php V::routeUrl( 'recettes->show', $recette->slug ); ?>">
|
|
<img class="recette-preview-image" src="random-recette.jpg">
|
|
<div class="recette-icone-content">
|
|
<h3>${recette.titre_recette}</h3>
|
|
<ul>
|
|
<li>Temps de préparation : ${recette.temps_de_preparation}</li>
|
|
<li>Nombre d'ingrédients : data.nb_ing</li>
|
|
</ul>
|
|
</div>
|
|
</a>`
|
|
document.getElementById("recetteList").innerHTML += HTML_CONTENT;
|
|
}
|
|
}
|
|
|
|
function advancedSearch(){
|
|
|
|
let form = new FormData();
|
|
form.append( "title", searchInput );
|
|
form.append( "tagsId", tagsId );
|
|
form.append( "ingredientsId", ingredientsId );
|
|
|
|
const XML = new XMLHttpRequest();
|
|
XML.open( "POST", '/api/recettes/list' );
|
|
XML.onreadystatechange = function ( e ) {
|
|
if( XML.status === 200 && XML.readyState === XMLHttpRequest.DONE ) {
|
|
try {
|
|
console.log( XML.response );
|
|
let response = JSON.parse(XML.response);
|
|
console.log( "Reponse parsé" );
|
|
buildCards( response.data );
|
|
} catch( e ) {
|
|
console.log( "Ce n'est pas un fichier JSON" );
|
|
}
|
|
}
|
|
}
|
|
XML.send( form );
|
|
}
|
|
|
|
const INGREDIENTSLIST = document.getElementById( 'ingredientsList' );
|
|
for( let item of INGREDIENTSLIST.getElementsByTagName( 'li' ) ){
|
|
item.addEventListener( 'click', function(){
|
|
|
|
let ingredientId = Number( item.getAttribute( 'data-ingredient-id' ) );
|
|
let index = ingredientsId.indexOf( ingredientId );
|
|
|
|
if( index > -1 ) {
|
|
ingredientsId.splice( index, 1 );
|
|
item.classList.add( 'tag-unselected' );
|
|
item.classList.remove( 'tag-selected' );
|
|
} else {
|
|
ingredientsId.push( ingredientId );
|
|
item.classList.add( 'tag-selected' );
|
|
item.classList.remove( 'tag-unselected' );
|
|
}
|
|
|
|
advancedSearch();
|
|
|
|
});
|
|
}
|
|
|
|
const TAGSLIST = document.getElementById( 'tagsList' );
|
|
for( let item of TAGSLIST.getElementsByTagName( 'li' ) ){
|
|
item.addEventListener( 'click', function(){
|
|
|
|
let tagId = Number( item.getAttribute( 'data-tag-id' ) );
|
|
let index = tagsId.indexOf( tagId );
|
|
|
|
if( index > -1 ) {
|
|
tagsId.splice( index, 1 );
|
|
item.classList.add( 'tag-unselected' );
|
|
item.classList.remove( 'tag-selected' );
|
|
} else {
|
|
tagsId.push( tagId );
|
|
item.classList.add( 'tag-selected' );
|
|
item.classList.remove( 'tag-unselected' );
|
|
}
|
|
|
|
advancedSearch();
|
|
|
|
});
|
|
}
|
|
|
|
const SEARCHBAR = document.getElementById( 'searchForm' );
|
|
searchInput = new URLSearchParams(document.location.search).get("s");
|
|
console.log( searchInput );
|
|
|
|
if( searchInput !== "" ) {
|
|
advancedSearch();
|
|
}
|
|
|
|
SEARCHBAR.onsubmit = function( e ){
|
|
e.preventDefault();
|
|
searchInput = document.getElementById( 'searchFormField' ).value;
|
|
advancedSearch();
|
|
}
|
|
|
|
}); |