Skip to content

Commit

Permalink
Merge pull request #41 from DigitalDiners/Ingredient-Optimisation
Browse files Browse the repository at this point in the history 
Fixed slow search!
  • Loading branch information
@AkiraWebbDev
AkiraWebbDev authored Oct 5, 2023
2 parents 65163ed + d089f6d commit ce1e87b
Show file tree
Hide file tree
Showing 7 changed files with 220 additions and 107 deletions.
1 change: 1 addition & 0 deletions assets/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,6 @@ <h2><a href="recipes.html">Recipes</a></h2>
</body>
<script src="scripts/script.js"></script>
<script src="scripts/planner.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

</html>
52 changes: 22 additions & 30 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,68 +179,60 @@ button:active,
background-color: #f2f2f2;
}


/* recipe CARD STYLING */
#search-results {
display: flex;
flex-wrap: wrap;
/* display: grid;
grid-template-columns: auto 1fr; */
/* RECIPE CARD STYLING */
#search-results, #saved-recipe-container, #andrews-recipe-container, #featured-recipe-container {
/*width : 100%;*/
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-rows: masonry;
gap: 10px;
/*align-items: start;*/
}

.recipe-card {
display: flex;
align-items: center;
/*display: flex;
flex-direction: column; */
border-radius: 20px;
padding: 10px;
margin: 10px;
background-color: white;
box-shadow: 0 0 10px lightgrey;
max-width: 400px;
/* max-width: 500px; */
}

.recipe-name {
font-weight: bold;
font-size: large;
margin-bottom: 10px;
}

.recipe-card button {
margin-right: 10px;
margin-top: 10px;
}

.recipe-image img{
width: 150px;
height: 150px;
.recipe-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

.recipe-image {
width: 150px;
height: 150px;

width: 100%;
height: 200px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
border-radius: 10px;
object-fit: cover;
object-position: center;

}

.recipe-info {
flex-grow: 1;
margin-left: 20px;
max-width: 300px;
padding: 10px 0;
}

.recipe-info .recipe-category {
font-style: italic;
}



.recipe-card h3 {
margin: 0;
margin: 10px 0;
}


Expand Down
126 changes: 100 additions & 26 deletions assets/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,19 @@ function searchRecipes() {

const jsonRecipes = SearchRecipes(ingredients);
const recipes = JSON.parse(jsonRecipes);

const recipeIds = recipes.map(r => r.recipeId);
// Fetch ingredients for all these recipes
const jsonIngredients = GetIngredientsForRecipes(recipeIds);
const allIngredients = JSON.parse(jsonIngredients);

console.log("Recipes:", recipes);
document.getElementById('search-results').innerHTML = "";

document.getElementById('search-results').innerHTML = "";
for (let recipe of recipes) {
displayCard(recipe, "search-results");
const recipeIngredients = allIngredients[recipe.recipeId];
displayCard(recipe, "search-results", recipeIngredients);
}
} catch (error) {
console.error("Error fetching recipes:", error);
Expand All @@ -83,15 +90,23 @@ function createStars(rating) {
return starsWrapper;
}

function displayCard(recipe, location) {
/*
var msnry;
// Wait for the content to load
document.addEventListener('DOMContentLoaded', function () {
// Initialize masonry
var grid = document.querySelector('#search-results');
msnry = new Masonry(grid, {
// options
itemSelector: '.recipe-card',
columnWidth: '.recipe-card',
percentPosition: true
});
});
*/

function displayCard(recipe, location, ingredientsArray) {
const searchResults = document.getElementById(location);

let recipeName = recipe.recipeName;
if(recipeName.length>18){
recipeName = recipeName.substring(0, 17);
recipeName+= "...";
}

// Create a div for the card
const card = document.createElement('div');
card.className = 'recipe-card';
Expand All @@ -101,9 +116,9 @@ function displayCard(recipe, location) {
recipeInfo.className = 'recipe-info';

// Add name to the card
const name = document.createElement('div');
const name = document.createElement('h2');
name.className = 'recipe-name';
name.textContent = recipeName;
name.textContent = recipe.recipeName;
recipeInfo.appendChild(name);

// Add image if it exists to the card
Expand Down Expand Up @@ -137,10 +152,43 @@ function displayCard(recipe, location) {
rating.appendChild(starsWrapper);
recipeInfo.appendChild(rating);

// Add ingredients to the card
const ingredientsDiv = document.createElement('div');
ingredientsDiv.className = 'recipe-ingredients';
const ingredientsHeader = document.createElement('h3');
ingredientsHeader.textContent = 'Ingredients';
ingredientsDiv.appendChild(ingredientsHeader);
const ingredientsList = document.createElement('ul');
for (const ingredient of ingredientsArray) {
const ingredientItem = document.createElement('li');
ingredientItem.textContent = ingredient.Name;
ingredientsList.appendChild(ingredientItem);
}
ingredientsDiv.appendChild(ingredientsList);
recipeInfo.appendChild(ingredientsDiv);

// Add instructions to the card
if (recipe.instructions && recipe.instructions.trim() !== '') {
const instructionsDiv = document.createElement('div');
instructionsDiv.className = 'recipe-instructions';
const instructionsHeader = document.createElement('h3');
instructionsHeader.textContent = 'Instructions';
instructionsDiv.appendChild(instructionsHeader);
const instructionList = document.createElement('ol');
const instructionArray = recipe.instructions.split('|');
for (const instruction of instructionArray) {
const instructionItem = document.createElement('li');
instructionItem.textContent = instruction.trim();
instructionList.appendChild(instructionItem);
}
instructionsDiv.appendChild(instructionList);
recipeInfo.appendChild(instructionsDiv);
}

// Add favorite button to the card
const favourite = document.createElement("button");
favourite.className = ("favourite-icon");
favourite.innerHTML = "&hearts;";
favourite.innerHTML = "&hearts;";
favourite.setAttribute("aria-label", "Add to favourites");
favourite.onclick = function () {
addToSaved(recipe.recipeId);
Expand Down Expand Up @@ -217,11 +265,14 @@ function displayCard(recipe, location) {
recipeInfo.appendChild(addSymbol);
recipeInfo.appendChild(popupContainer);



card.appendChild(recipeInfo);

searchResults.appendChild(card);

//if (msnry) {
// msnry.appended(card);
// msnry.layout();
//}

}


Expand All @@ -234,45 +285,59 @@ function addToSaved(recipeId) {
let isSaved = false;

for (let i = 0; i < savedRecipes.length; i++) {
if(savedRecipes[i] == recipeId){
isSaved=true;
if (savedRecipes[i] == recipeId) {
isSaved = true;
}
}
if(!isSaved){
if (!isSaved) {
savedRecipes.push(recipeId);
console.log("saved recipe(s):\n")
SaveRecipe(recipeId);
}else{
} else {
console.log("already saved\n")
}
}

//function which retrieves saved recipes from c
function getSaved(){
function getSaved() {
try {
const jsonRecipes = GetSaved();
const recipes = JSON.parse(jsonRecipes);

const recipeIds = recipes.map(r => r.recipeId);
// Fetch ingredients for all these recipes
const jsonIngredients = GetIngredientsForRecipes(recipeIds);
const allIngredients = JSON.parse(jsonIngredients);

console.log("Recipes:", recipes);
document.getElementById('saved-recipe-container').innerHTML = "";

for (let recipe of recipes) {
displayCard(recipe, 'saved-recipe-container');
const recipeIngredients = allIngredients[recipe.recipeId];
displayCard(recipe, 'saved-recipe-container', recipeIngredients);
}
} catch (error) {
console.error("Error fetching recipes:", error);
alert("Failed to fetch recipes. Please try again later.");
}
}

function getAndrews(){
function getAndrews() {
try {
const jsonRecipes = GetAndrews();
const recipes = JSON.parse(jsonRecipes);

const recipeIds = recipes.map(r => r.recipeId);
// Fetch ingredients for all these recipes
const jsonIngredients = GetIngredientsForRecipes(recipeIds);
const allIngredients = JSON.parse(jsonIngredients);

console.log("Recipes:", recipes);
document.getElementById('andrews-recipe-container').innerHTML = "";

for (let recipe of recipes) {
displayCard(recipe, 'andrews-recipe-container');
const recipeIngredients = allIngredients[recipe.recipeId];
displayCard(recipe, 'andrews-recipe-container', recipeIngredients);
}
} catch (error) {
console.error("Error fetching recipes:", error);
Expand All @@ -281,15 +346,22 @@ function getAndrews(){
}


function getFeatured(){
function getFeatured() {
try {
const jsonRecipes = ShowFeatured();
const recipes = JSON.parse(jsonRecipes);

const recipeIds = recipes.map(r => r.recipeId);
// Fetch ingredients for all these recipes
const jsonIngredients = GetIngredientsForRecipes(recipeIds);
const allIngredients = JSON.parse(jsonIngredients);

console.log("Recipes:", recipes);
document.getElementById('featured-recipe-container').innerHTML = "";

for (let recipe of recipes) {
displayCard(recipe, 'featured-recipe-container');
const recipeIngredients = allIngredients[recipe.recipeId];
displayCard(recipe, 'featured-recipe-container', recipeIngredients);
}
} catch (error) {
console.error("Error fetching recipes:", error);
Expand Down Expand Up @@ -317,7 +389,7 @@ function addToPlanner(recipeName, recipeId) {
const selectedMeal = mealOptions.value;
let mealOption = [];
addToJSON(selectedDay, selectedMeal, recipeName, currRecipeId);
mealOption.push(recipeName, currRecipeId, selectedDay, selectedMeal );
mealOption.push(recipeName, currRecipeId, selectedDay, selectedMeal);
mealPlanner.push(mealOption);
closePopup();
}
Expand Down Expand Up @@ -400,3 +472,5 @@ function closePopup() {
const popup = document.getElementById("popup");
popup.style.display = 'none';
}


Loading

0 comments on commit ce1e87b

Please sign in to comment.