mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
Update 16 files
- /src/main/resources/templates/create-account.html - /src/main/resources/templates/my-profile.html - /src/main/resources/templates/home.html - /src/main/resources/templates/update-recipe.html - /src/main/resources/templates/explore.html - /src/main/resources/templates/public-profile.html - /src/main/java/com/example/demo/controller/SiteController.java - /src/main/java/com/example/demo/controller/ProfileController.java - /src/main/java/com/example/demo/dto/UserDto.java - /src/main/java/com/example/demo/dto/UpdateProfileDto.java - /src/main/java/com/example/demo/dto/ProfileDto.java - /src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java - /src/main/java/com/example/demo/service/Impl/UserServiceImpl.java - /src/main/java/com/example/demo/service/UserService.java - /src/main/java/com/example/demo/config/SecurityConfig.java - /src/main/java/com/example/demo/entity/User.java
This commit is contained in:
Madeleine Stamp
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Explore Recipes</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Explore Recipes</h1>
|
||||
|
||||
<nav>
|
||||
<a th:href="@{/}">Home</a> |
|
||||
<a th:href="@{/explore}">Explore</a> |
|
||||
<a th:href="@{/my-profile}">Profile</a>
|
||||
</nav>
|
||||
|
||||
<form id="search-form" th:action="@{/explore}" method="get">
|
||||
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search recipes">
|
||||
<button type="submit">Search</button>
|
||||
|
||||
<h3>Prep Time</h3>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="15"> <15 min
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="30"> 15~30 min
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="60"> 30~60 min
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="240"> 1~4 hours
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="prepTime" value="241"> 4+ hours
|
||||
</label>
|
||||
|
||||
<h3>Cook Time</h3>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="15"> <15 min
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="30"> 15~30 min
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="60"> 30~60 min
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="120"> 1~2 hours
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="cookTime" value="121"> 2+ hours
|
||||
</label>
|
||||
|
||||
<h3>Price</h3>
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="1"> $
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="2"> $$
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="3"> $$$
|
||||
</label><br>
|
||||
<label>
|
||||
<input type="checkbox" name="price" value="4"> $$$$
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<div th:if="${#lists.isEmpty(recipes)}">
|
||||
<p>No recipes found.</p>
|
||||
</div>
|
||||
|
||||
<div th:unless="${#lists.isEmpty(recipes)}">
|
||||
<div th:each="recipe : ${recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
|
||||
<h3>
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
<strong>Author:</strong>
|
||||
<a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
|
||||
th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
|
||||
Author Name
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p th:text="${recipe.description}">Recipe description</p>
|
||||
|
||||
<p>
|
||||
<strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
|
||||
<strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
|
||||
<strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
|
||||
<strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
|
||||
</p>
|
||||
|
||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
|
||||
</div>
|
||||
|
||||
<p><a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const input = document.getElementById('site-search');
|
||||
const tags = [];
|
||||
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;
|
||||
});
|
||||
|
||||
params.getAll('cookTime').forEach(p => {
|
||||
const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
|
||||
if (cb) cb.checked = true;
|
||||
});
|
||||
|
||||
params.getAll('prepTime').forEach(p => {
|
||||
const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
|
||||
if (cb) cb.checked = true;
|
||||
});
|
||||
|
||||
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)/);
|
||||
if (match) {
|
||||
e.preventDefault();
|
||||
addChip(match[2].substring(1));
|
||||
input.value = val.replace(match[0], '');
|
||||
input.value += ' ';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('input[name="price"]').forEach(cb => {
|
||||
cb.addEventListener('change', submitSearch);
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
function addChip(tag) {
|
||||
if (tags.includes(tag)) return;
|
||||
tags.push(tag);
|
||||
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'tag-chip';
|
||||
chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
|
||||
|
||||
chip.querySelector('button').addEventListener('click', () => {
|
||||
chip.remove();
|
||||
tags.splice(tags.indexOf(tag), 1);
|
||||
submitSearch();
|
||||
});
|
||||
|
||||
input.insertAdjacentElement('afterend', chip);
|
||||
}
|
||||
|
||||
function submitSearch() {
|
||||
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));
|
||||
|
||||
document.querySelectorAll('input[name="cookTime"]:checked')
|
||||
.forEach(cb => out.append('cookTime', cb.value));
|
||||
|
||||
document.querySelectorAll('input[name="prepTime"]:checked')
|
||||
.forEach(cb => out.append('prepTime', cb.value));
|
||||
|
||||
window.location.href = '/explore?' + out.toString();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user