mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
Merge branch 'main' of gitlab.com:etc404/software-engineering-project
i didn't commit my decorative changes before create-html was updated sorry
This commit is contained in:
kaipher7
@@ -191,28 +191,22 @@ body, html {
|
||||
.main-content {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
/*display: flex; this line was breaking the searched results. They returned recipes would not load at the top of the page*/
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
scrollbar-color: var(--dusty-red) var(--pale-yellow);
|
||||
height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* safari and old browsers*/
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--pale-yellow);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--dusty-red);
|
||||
}
|
||||
|
||||
|
||||
/* =========================
|
||||
Search Bar
|
||||
========================= */
|
||||
.search-bar, input[type="search"] {
|
||||
width: 90%;
|
||||
/* width: 90%; */
|
||||
margin: 10px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
@@ -266,10 +260,76 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
}
|
||||
|
||||
|
||||
#tag-input-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: var(--dusty-red);
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
min-height: 50px;
|
||||
flex: 1;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#tag-input-wrapper input[type="text"] {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--dark-yellow);
|
||||
font-size: 20px;
|
||||
font-family: 'Mali', cursive;
|
||||
font-weight: 600;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#chips-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: var(--dark);
|
||||
min-height: 32px;
|
||||
color: var(--dark-yellow);
|
||||
border-radius: 20px;
|
||||
padding: 2px 8px 3px 12px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-chip button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--dark-yellow);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 1.4em;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
font-family: 'Mali', cursive;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tag-chip button:hover { opacity: 1; }
|
||||
|
||||
|
||||
/* =========================
|
||||
Recipe Cards Layout
|
||||
========================= */
|
||||
.recipe-card {
|
||||
padding-top: 20px;
|
||||
margin-top: 35px;
|
||||
width: 99.5%;
|
||||
display: flex;
|
||||
@@ -279,8 +339,12 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
flex-direction: row;
|
||||
height: fit-content;
|
||||
padding-right: 10px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
scrollbar-color: var(--dusty-red) var(--pale-yellow);
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--dark);
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
|
||||
<meta name="_csrf" th:content="${_csrf.token}"/>
|
||||
<title>Create Thyme Crunch Account</title>
|
||||
<link rel="stylesheet" th:href="@{css/create-account.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">
|
||||
@@ -57,34 +60,39 @@
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
const form = document.getElementById("createUserForm");
|
||||
const passwordField = document.getElementById("password");
|
||||
const confirmPasswordField = document.getElementById("confirmPassword");
|
||||
const passwordError = document.getElementById("passwordError");
|
||||
|
||||
function checkPasswords() {
|
||||
|
||||
if (confirmPasswordField.value === "") {
|
||||
confirmPasswordField.classList.remove("invalid");
|
||||
passwordError.textContent = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordField.value !== confirmPasswordField.value) {
|
||||
confirmPasswordField.classList.add("invalid");
|
||||
passwordError.textContent = "Passwords do not match.";
|
||||
} else {
|
||||
confirmPasswordField.classList.remove("invalid");
|
||||
passwordError.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
passwordField.addEventListener("input", checkPasswords);
|
||||
confirmPasswordField.addEventListener("input", checkPasswords);
|
||||
|
||||
document.getElementById("createUserForm").addEventListener("submit", function(e) {
|
||||
form.addEventListener("submit", async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const password = passwordField.value;
|
||||
const confirmPassword = confirmPasswordField.value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
e.preventDefault();
|
||||
confirmPasswordField.classList.add("invalid");
|
||||
passwordError.textContent = "Passwords do not match.";
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -92,18 +100,39 @@
|
||||
username: document.getElementById("username").value,
|
||||
email: document.getElementById("email").value,
|
||||
hashedpassword: password,
|
||||
role: "USER"
|
||||
role: "ROLE_USER"
|
||||
};
|
||||
|
||||
fetch("http://localhost:8080/api/users", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content');
|
||||
const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');
|
||||
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await fetch("/api/users", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
[csrfHeader]: csrfToken,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
passwordError.style.color = "green";
|
||||
passwordError.textContent = "Account created successfully. Redirecting to login...";
|
||||
setTimeout(function () {
|
||||
window.location.href = "/login";
|
||||
}, 1500);
|
||||
} else {
|
||||
const errorText = await response.text();
|
||||
passwordError.style.color = "red";
|
||||
passwordError.textContent = "Account creation failed. Please try a different username or email.";
|
||||
console.error("Create account failed:", errorText);
|
||||
}
|
||||
} catch (error) {
|
||||
passwordError.style.color = "red";
|
||||
passwordError.textContent = "Could not connect to the server.";
|
||||
console.error("Request error:", error);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -249,6 +249,7 @@ function buildRecipeJSON(user) {
|
||||
const cookTimeMinutes = Number(document.getElementById('cooking').value);
|
||||
const servings = Number(document.getElementById('servings').value);
|
||||
const status = "DRAFT";
|
||||
const cost = Number(document.getElementById('cost').value);
|
||||
|
||||
// Ingredients
|
||||
const recipeIngredients = [...document.querySelectorAll('#ingredients-container .dynamic-row')]
|
||||
@@ -282,6 +283,7 @@ function buildRecipeJSON(user) {
|
||||
cookTimeMinutes,
|
||||
servings,
|
||||
status,
|
||||
cost,
|
||||
user,
|
||||
recipeIngredients,
|
||||
steps,
|
||||
|
||||
@@ -1,75 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Thyme Crunch Home</title>
|
||||
<link rel="stylesheet" th:href="@{css/explore.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">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||
<title>Explore Recipes</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Explore Recipes</h1>
|
||||
|
||||
<header class="top-header">
|
||||
<img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
|
||||
<h1 class="site-name">Thyme Crunch</h1>
|
||||
<img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
|
||||
</header>
|
||||
<nav>
|
||||
<a th:href="@{/}">Home</a> |
|
||||
<a th:href="@{/explore}">Explore</a> |
|
||||
<a th:href="@{/my-profile}">Profile</a>
|
||||
</nav>
|
||||
|
||||
<div class="body">
|
||||
<!--Navigation Bar -->
|
||||
<div class="body-left">
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="#">Explore</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Saved</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>
|
||||
<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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="search-bar">
|
||||
<form action="/search" method="get">
|
||||
<label for="site-search">Search:</label>
|
||||
<div class="search-btn">
|
||||
<input type="search" id="site-search" name="q" placeholder="Search for recipes...">
|
||||
<button type="submit"><i class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="recipe-card">
|
||||
<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>
|
||||
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
|
||||
<div class="card-text">
|
||||
<h2 th:text="${recipe.title}"></h2>
|
||||
<p th:text="${recipe.description}"></p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<div th:each="img : ${recipe.images}">
|
||||
<img th:src="${img.imageUrl}" alt="Recipe Image"/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<p th:text="${recipe.description}">Recipe description</p>
|
||||
|
||||
<!--Filter -->
|
||||
<div class="body-right">
|
||||
<div class="sidebar-right">
|
||||
<h1> FILTER </h1>
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
@@ -21,7 +21,7 @@
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a th:href="@{/explore}">Explore</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||
<li><a href="#">Saved</a></li>
|
||||
<li>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>My Profile</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>My Profile</h1>
|
||||
|
||||
<p><strong>Username:</strong> <span th:text="${profile.username}">username</span></p>
|
||||
<p>
|
||||
<strong>Public Profile:</strong>
|
||||
<a th:href="@{/users/{id}(id=${profile.id})}">View my public profile</a>
|
||||
</p>
|
||||
|
||||
<h2>Edit Profile</h2>
|
||||
<form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}">
|
||||
<div>
|
||||
<label for="displayName">Screen Name</label><br>
|
||||
<input type="text" id="displayName" th:field="*{displayName}" maxlength="100">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<label for="bio">Bio</label><br>
|
||||
<textarea id="bio" th:field="*{bio}" rows="6" cols="50" maxlength="1000"></textarea>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<button type="submit">Save Profile</button>
|
||||
</form>
|
||||
|
||||
<h2>My Recipes</h2>
|
||||
|
||||
<div th:if="${#lists.isEmpty(profile.recipes)}">
|
||||
<p>You have not created any recipes yet.</p>
|
||||
</div>
|
||||
|
||||
<div th:unless="${#lists.isEmpty(profile.recipes)}">
|
||||
<div th:each="recipe : ${profile.recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
|
||||
<h3 th:text="${recipe.title}">Recipe Title</h3>
|
||||
|
||||
<p>
|
||||
<strong>Author:</strong>
|
||||
<a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
|
||||
th:text="${recipe.userDto.effectiveDisplayName}">
|
||||
Author Name
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p th:text="${recipe.description}">Recipe description</p>
|
||||
|
||||
<a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a>
|
||||
<span> | </span>
|
||||
<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}">Edit Recipe</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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