mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
Update 13 files
- /src/main/java/com/example/demo/service/Impl/UserServiceImpl.java - /src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java - /src/main/java/com/example/demo/service/UserService.java - /src/main/java/com/example/demo/controller/SiteController.java - /src/main/java/com/example/demo/controller/RecipeUploadForm.java - /src/main/java/com/example/demo/controller/ProfileController.java - /src/main/java/com/example/demo/config/SecurityConfig.java - /src/main/java/com/example/demo/config/WebConfig.java - /src/main/resources/templates/explore.html - /src/main/resources/templates/view-recipe.html - /src/main/resources/templates/public-profile.html - /src/main/resources/templates/my-profile.html - /src/main/resources/templates/home.html
This commit is contained in:
Madeleine Stamp
@@ -19,40 +19,42 @@
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<!--Navigation Bar -->
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
|
||||
<li th:if="${guest}">
|
||||
<a th:href="@{/login(redirect='/explore')}" class="login-link">Login</a>
|
||||
</li>
|
||||
|
||||
<li th:unless="${guest}">
|
||||
<form th:action="@{/logout}" method="post">
|
||||
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a th:href="@{/create}" class="create_icon">
|
||||
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="search-bar">
|
||||
<form action="/explore" method="get" id="search-form">
|
||||
<label for="site-search">Search:</label>
|
||||
<div class="search-btn">
|
||||
<div id="tag-input-wrapper">
|
||||
<!-- <div id="chips-container"></div> -->
|
||||
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
|
||||
</div>
|
||||
<button type="submit"><i class="fa fa-search"></i></button>
|
||||
</div>
|
||||
<div id="tag-input-wrapper">
|
||||
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
|
||||
</div>
|
||||
<button type="submit"><i class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p th:if="${#lists.isEmpty(recipes)}">There are no recipes that fit this description.</p>
|
||||
|
||||
<div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
|
||||
@@ -72,109 +74,107 @@
|
||||
|
||||
</main>
|
||||
|
||||
<!--Filter -->
|
||||
<div class="body-right">
|
||||
<div class="sidebar-right">
|
||||
<h1> FILTER </h1>
|
||||
<form id="filter-form">
|
||||
<h3>Prep Time</h3>
|
||||
<h3>Prep Time</h3>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="15"><15 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="30">15~30 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="15"><15 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="30">15~30 min
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="60">30~60 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="60">30~60 min
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="240">1~4 hours
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="240">1~4 hours
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="241">4+ hours
|
||||
</label>
|
||||
<h3>Cook Time</h3>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="241">4+ hours
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="15"><15 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="30">15~30 min
|
||||
</label>
|
||||
<h3>Cook Time</h3>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="60">30~60 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="15"><15 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="30">15~30 min
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="120">1~2 hours
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="60">30~60 min
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="121">2+ hours
|
||||
</label>
|
||||
<h3>Price</h3>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="120">1~2 hours
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="1"> $
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="121">2+ hours
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="2"> $$
|
||||
</label>
|
||||
<h3>Price</h3>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="3"> $$$
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="1"> $
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="4"> $$$$
|
||||
</label>
|
||||
</form>
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="2"> $$
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="3"> $$$
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="4"> $$$$
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const input = document.getElementById('site-search');
|
||||
const tags = [];
|
||||
|
||||
// Restore price checkboxes from URL
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
params.getAll('prices').forEach(p => {
|
||||
const cb = document.querySelector(`input[name="price"][value="${p}"]`);
|
||||
if (cb) cb.checked = true;
|
||||
});
|
||||
|
||||
// Restore cookTime checkboxes from URL
|
||||
params.getAll('cookTime').forEach(p => {
|
||||
const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
|
||||
if (cb) cb.checked = true;
|
||||
});
|
||||
});
|
||||
|
||||
// Restore prepTime checkboxes from URL
|
||||
params.getAll('prepTime').forEach(p => {
|
||||
const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
|
||||
if (cb) cb.checked = true;
|
||||
});
|
||||
});
|
||||
|
||||
// Restore tag chips from URL
|
||||
params.getAll('tags').forEach(addChip);
|
||||
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
|
||||
const val = input.value + ' ';
|
||||
const match = val.match(/(^|\s)(#\w+)(\s)/); // NASTY regex ):
|
||||
const match = val.match(/(^|\s)(#\w+)(\s)/);
|
||||
if (match) {
|
||||
e.preventDefault();
|
||||
addChip(match[2].substring(1));
|
||||
input.value = val.replace(match[0], '');
|
||||
input.value += ' ';
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -185,15 +185,14 @@
|
||||
|
||||
document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
|
||||
cb.addEventListener('change', submitSearch);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
|
||||
cb.addEventListener('change', submitSearch);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('search-form').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
submitSearch();
|
||||
});
|
||||
|
||||
@@ -216,13 +215,12 @@
|
||||
}
|
||||
|
||||
function submitSearch() {
|
||||
// Only use chips for tags, not strings!
|
||||
const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
|
||||
|
||||
|
||||
const out = new URLSearchParams();
|
||||
if (cleanedQuery) out.set('q', cleanedQuery);
|
||||
tags.forEach(t => out.append('tags', t));
|
||||
|
||||
document.querySelectorAll('input[name="price"]:checked')
|
||||
.forEach(cb => out.append('prices', cb.value));
|
||||
|
||||
@@ -234,14 +232,19 @@
|
||||
|
||||
window.location.href = '/explore?' + out.toString();
|
||||
}
|
||||
})();
|
||||
|
||||
// For cost display
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
const num = parseInt(el.textContent);
|
||||
el.textContent = num === 0 ? '' : '$'.repeat(num);
|
||||
})();
|
||||
|
||||
function renderCost(cost) {
|
||||
const num = parseInt(cost, 10);
|
||||
if (!num || num <= 0) return '';
|
||||
if (num >= 4) return '$$$$';
|
||||
return '$'.repeat(num);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
el.textContent = renderCost(el.textContent);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Thyme Crunch Home</title>
|
||||
<title>Thyme Crunch Favorites</title>
|
||||
<link rel="stylesheet" th:href="@{css/home.css}">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
|
||||
</head>
|
||||
@@ -15,73 +15,82 @@
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<!--Navigation Bar -->
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li>
|
||||
|
||||
<li th:if="${guest}">
|
||||
<a th:href="@{/login}" class="login-link">Login</a>
|
||||
</li>
|
||||
|
||||
<li th:unless="${guest}">
|
||||
<form th:action="@{/logout}" method="post">
|
||||
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.">
|
||||
|
||||
<a th:href="@{/create}" class="create_icon">
|
||||
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="recipe-card">
|
||||
<p th:if="${#lists.isEmpty(recipes)}">You have not saved any recipes.</p>
|
||||
<div th:if="${guest}" style="text-align:center; padding: 20px 0;">
|
||||
<p style="margin-bottom:16px;">Log in to view and save your favorite recipes.</p>
|
||||
<a th:href="@{/login}" style="display:inline-block; padding:10px 18px; background:#850000; color:white; text-decoration:none; border-radius:8px;">
|
||||
Login
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
|
||||
<div class="card-text">
|
||||
<h2 th:text="${recipe.title}">Recipe Title</h2>
|
||||
<p th:text="${recipe.description}">Description</p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
||||
</div>
|
||||
<p class="card-cost" th:text="${recipe.cost}">Cost</p>
|
||||
</div>
|
||||
</a>
|
||||
<div th:unless="${guest}">
|
||||
<p th:if="${#lists.isEmpty(recipes)}">You have not saved any recipes.</p>
|
||||
|
||||
<div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
|
||||
<div class="card-text">
|
||||
<h2 th:text="${recipe.title}">Recipe Title</h2>
|
||||
<p th:text="${recipe.description}">Description</p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
||||
</div>
|
||||
<p class="card-cost" th:text="${recipe.cost}">Cost</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!--New Bar -->
|
||||
<div class="body-right">
|
||||
<div class="sidebar-right">
|
||||
<h1> NEW </h1>
|
||||
<div class="new-recipes">
|
||||
<a th:each="recipe : ${newestRecipes}"
|
||||
th:href="@{/recipes/{id}(id=${recipe.id})}"
|
||||
class="new-recipe-item">
|
||||
<p th:text="${recipe.title}">Title</p>
|
||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<h1>FAVES</h1>
|
||||
<p style="text-align:center; padding:0 16px;">
|
||||
Your saved recipes appear here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// For cost display
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
const num = parseInt(el.textContent);
|
||||
el.textContent = num === 0 ? '' : '$'.repeat(num);
|
||||
});
|
||||
function renderCost(cost) {
|
||||
const num = parseInt(cost, 10);
|
||||
if (!num || num <= 0) return '';
|
||||
if (num >= 4) return '$$$$';
|
||||
return '$'.repeat(num);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
el.textContent = renderCost(el.textContent);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -22,8 +22,8 @@
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a href="/">Favorites</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
@@ -32,7 +32,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||
<a th:href="@{/create}" class="create_icon">
|
||||
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
|
||||
</a>
|
||||
</div>
|
||||
@@ -92,10 +92,16 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// For cost display
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
const num = parseInt(el.textContent);
|
||||
el.textContent = num === 0 ? '' : '$'.repeat(num);
|
||||
// For cost display <!-- Cost change -->
|
||||
function renderCost(cost) {
|
||||
const num = parseInt(cost, 10);
|
||||
if (!num || num <= 0) return '';
|
||||
if (num >= 4) return '$$$$';
|
||||
return '$'.repeat(num);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
el.textContent = renderCost(el.textContent);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -18,28 +18,31 @@
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!-- Left Navigation -->
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li>
|
||||
|
||||
<li th:if="${guest}">
|
||||
<a th:href="@{/login}" class="login-link">Login</a>
|
||||
</li>
|
||||
|
||||
<li th:unless="${guest}">
|
||||
<form th:action="@{/logout}" method="post">
|
||||
<input type="image" th:src="@{/images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||
|
||||
<a th:href="@{/create}" class="create_icon">
|
||||
<img th:src="@{/images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Content — recipes -->
|
||||
<main class="main-content">
|
||||
|
||||
<h2 th:text="${profile.effectiveDisplayName} + '\'s Recipes'">User's Recipes</h2>
|
||||
|
||||
<p th:if="${#lists.isEmpty(profile.recipes)}">This user has not created any recipes yet.</p>
|
||||
@@ -62,16 +65,14 @@
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Right Sidebar — public profile info only -->
|
||||
<div class="body-right">
|
||||
<div class="sidebar-right">
|
||||
<p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
|
||||
<p th:text="'@' + ${profile.username}">@username</p>
|
||||
<div class="bio-wrap">
|
||||
<p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
|
||||
<p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,10 +80,15 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// For cost display
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
const num = parseInt(el.textContent);
|
||||
el.textContent = num === 0 ? '' : '$'.repeat(num);
|
||||
function renderCost(cost) {
|
||||
const num = parseInt(cost, 10);
|
||||
if (!num || num <= 0) return '';
|
||||
if (num >= 4) return '$$$$';
|
||||
return '$'.repeat(num);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.card-cost').forEach(el => {
|
||||
el.textContent = renderCost(el.textContent);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -18,12 +18,11 @@
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!--Navigation Bar -->
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a href="/">Favorites</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
@@ -32,12 +31,11 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||
<img th:src="@{/images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.">
|
||||
<a th:href="@{/create}" class="create_icon">
|
||||
<img th:src="@{/images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div th:if="${recipe != null}" class="recipe-container">
|
||||
<section class="recipe-section">
|
||||
@@ -93,10 +91,9 @@
|
||||
<p><strong>Prep Time:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> minutes</p>
|
||||
<p><strong>Cook Time:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> minutes</p>
|
||||
<p><strong>Servings:</strong> <span th:text="${recipe.servings}">0</span></p>
|
||||
<p><strong>Cost:</strong> <span th:text="${#strings.repeat('$', recipe.cost)}">$</span></p>
|
||||
<p><strong>Cost:</strong> <span th:text="${recipe.cost >= 4 ? '$$$$' : #strings.repeat('$', recipe.cost)}">$</span></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="recipe-tags">
|
||||
<h2>Tags: </h2>
|
||||
<div th:if="${recipe.tags != null and !#lists.isEmpty(recipe.tags)}" class="tag-list">
|
||||
@@ -111,7 +108,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button class="save-btn" th:data-recipe-id="${recipe.id}">Save Recipe</button>
|
||||
<button type="button" class="save-btn" th:data-recipe-id="${recipe.id}">Save Recipe</button>
|
||||
</div>
|
||||
|
||||
<div th:unless="${recipe != null}" class="recipe-not-found">
|
||||
@@ -119,9 +116,59 @@
|
||||
<h1>Recipe not found</h1>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
async function getCurrentUser() {
|
||||
const response = await fetch('/api/users/me', {
|
||||
credentials: 'same-origin'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const user = await response.json();
|
||||
return user || null;
|
||||
}
|
||||
|
||||
async function saveRecipe(recipeId, button) {
|
||||
const csrfHeader = document.querySelector('meta[name="_csrf_header"]')?.content;
|
||||
const csrfToken = document.querySelector('meta[name="_csrf"]')?.content;
|
||||
|
||||
const user = await getCurrentUser();
|
||||
|
||||
if (!user || !user.id) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/users/${user.id}/favorites/${recipeId}`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
...(csrfHeader && csrfToken ? { [csrfHeader]: csrfToken } : {})
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const text = await response.text();
|
||||
alert(text || 'Could not save recipe.');
|
||||
return;
|
||||
}
|
||||
|
||||
button.textContent = 'Saved';
|
||||
button.disabled = true;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.save-btn').forEach(button => {
|
||||
button.addEventListener('click', async () => {
|
||||
const recipeId = button.dataset.recipeId;
|
||||
await saveRecipe(recipeId, button);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user