Skip to content

Commit

Permalink
edit-recipe taslak
Browse files Browse the repository at this point in the history
  • Loading branch information
@eylulozatman
eylulozatman committed May 26, 2024
1 parent 5fff951 commit 2e4780f
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 7 deletions.
5 changes: 1 addition & 4 deletions scripts/addNewRecipeToBook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,7 @@ const saveButton = document.getElementById("save-button");
window.history.back();
// window.history.go(-1);
});





}

setupBackButton();
74 changes: 74 additions & 0 deletions scripts/editUserRecipe.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@

async function saveRecipe(recipeData) {
const apiUrl = 'https://recipiebeckend.azurewebsites.net/user/edit-recipe'; // ???????
const JWTAccessToken = sessionStorage.getItem('accessToken');

const formData = new FormData();
for (const key in recipeData) {
formData.append(key, recipeData[key]);
}

console.log('formData: ', formData);

try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Authorization': JWTAccessToken
},
body: formData,
});

if (!response.ok) {
const errorMessage = await response.text();
throw new Error(`Failed to save recipe. Status: ${response.status}. Message: ${errorMessage}`);
}
} catch (error) {
console.error('Error saving recipe:', error.message);
throw error;
}
}


const saveButton = document.getElementById("save-button");
saveButton.addEventListener("click", function (event) {
const hours = parseInt(document.getElementById('recipe-prep-hour').value);
const minutes = parseInt(document.getElementById('recipe-prep-minute').value);
const totalMinutes = (hours * 60) + minutes;

const photoInput = document.getElementById('photo').files[0];
const recipePhoto = photoInput ? photoInput : null;

const recipeData = {
title: document.getElementById('recipe-title').value,
ingredients: document.getElementById('recipe-ingredients').value,
description: document.getElementById('recipe-description').value,
cuisine: document.getElementById('recipe-cuisine').value,
meal: document.getElementById('recipe-meal').value,
preparationTime:totalMinutes,
// recipePhoto: document.getElementById('photo').files[0] ? document.getElementById('photo').files[0] : null,
};

if (recipePhoto !== null) {
recipeData.recipePhoto = recipePhoto;
}

event.preventDefault();
console.log("Save button clicked");
console.log(recipeData);

saveRecipe(recipeData);
});




function setupBackButton() {
const backButton = document.getElementById('back-arrow-button');

backButton.addEventListener('click', () => {
window.history.back();
// window.history.go(-1);
});

}
25 changes: 22 additions & 3 deletions scripts/recipe-book.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,11 @@ async function showRecipes() {
publishButton.textContent = publishButton.textContent === "Publish" ? "Unpublish" : "Publish";
}
// Create Edit button
// const editButton = document.createElement("button");
// editButton.textContent = "Edit";
// buttonsContainer.appendChild(editButton);

const editRecipeBtn = document.createElement("button");
editRecipeBtn.classList.add("edit-recipe-btn");
editRecipeBtn.textContent = "Edit Recipe";
buttonsContainer.appendChild(editRecipeBtn);

// Create Delete button
const deleteButton = document.createElement("button");
Expand Down Expand Up @@ -240,6 +242,23 @@ async function showRecipes() {
}
});

// ********************EDIT RECIPE************************************
editRecipeBtn.addEventListener("click", function() {
const recipeId = recipe.id;
const urlParams = new URLSearchParams();
urlParams.append("id", recipeId);
urlParams.append("title", recipe.title);
urlParams.append("description", recipe.description);
urlParams.append("ingredients", recipe.ingredients);
urlParams.append("cuisine", recipe.cuisine);
urlParams.append("meal", recipe.meal);
urlParams.append("preparationTime", recipe.preparationTime);
urlParams.append("photoPath", recipe.photoPath);

const editRecipeUrl = `editUserRecipe.html?${urlParams.toString()}`;
window.open(editRecipeUrl, "_self");
});

deleteButton.addEventListener("click", async () => {
const userRecipeId = recipe.id;
try {
Expand Down
35 changes: 35 additions & 0 deletions styles/editUserRecipe.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
textarea {
width: 100%;
padding: 10px;
font-size: 16px;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #0056b3;
}
95 changes: 95 additions & 0 deletions templates/editUserRecipe.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/editUserRecipe.css">
<title>Edit Recipe</title>
</head>

<body>
<header>
<div id="header-container">
<button id="back-arrow-button">
<ion-icon class="back-arrow" name="chevron-back-circle-outline"></ion-icon>
</button>
<h1 id="my-recipe-book-title">Edit Recipe</h1>
</div>
</header>

<div class="recipe-form-container">
<h1 class="form-header">Edit Your Recipe</h1>

<!-- Recipe form -->
<form id="recipe-form" enctype="multipart/form-data">
<label for="recipe-title">Title:</label>
<input type="text" id="recipe-title" name="title" required>

<label for="recipe-ingredients">Ingredients:</label>
<textarea id="recipe-ingredients" name="ingredients" required></textarea>

<label for="recipe-description">Description:</label>
<textarea id="recipe-description" name="description" required></textarea>

<label for="recipe-cuisine">Cuisine:</label>
<textarea id="recipe-cuisine" name="cuisine"></textarea>

<label for="recipe-meal">Meal:</label>
<textarea id="recipe-meal" name="meal"></textarea>

<!-- <label for="recipe-prep-time">Preparation Time:</label>
<input type="text" id="recipe-prep-time" name="prep-time"></input> -->

<label for="recipe-prep-hour">Preparation Time:</label>
<div class="prep-time-container">
<select id="recipe-prep-hour" name="prep-hour">
<option value="0">0 hour</option>
<option value="1">1 hour</option>
<option value="2">2 hours</option>
<option value="3">3 hours</option>
<!-- Add more options as needed -->
</select>
<select id="recipe-prep-minute" name="prep-minute">
<option value="0">0 minutes</option>
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
<option value="15">15 minutes</option>
<option value="20">20 minutes</option>
<option value="25">25 minutes</option>
<option value="30">30 minutes</option>
<option value="35">35 minutes</option>
<option value="40">40 minutes</option>
<option value="45">45 minutes</option>
<option value="50">50 minutes</option>
<option value="55">55 minutes</option>
<!-- Add more options as needed -->
</select>
</div>

<label for="photo">Choose a Photo: <span class="file-name" style="color: black;"></span></label>
<label class="custom-file-input" for="photo">
Choose File
<input type="file" id="photo" class="photo" name="photo" accept="image/*" onchange="displayFileName(this)">
</label>
<script>
function displayFileName(input) {
const fileName = input.files[0] ? input.files[0].name : '';
document.querySelector('.file-name').textContent = fileName;
}
</script>
</form>

<!-- Back button -->
<div class="button-container">
<a href="recipe-book.html" id="back-button">Back to Recipe Book</a>
<button type="submit" class="save-button" id="save-button">Save Recipe</button>
</div>
</div>
<script src="../scripts/editUserRecipe.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</body>

</html>

0 comments on commit 2e4780f

Please sign in to comment.