mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
explore page working i believe
This commit is contained in:
@@ -59,12 +59,15 @@ public class RecipeController {
|
||||
@GetMapping("/search")
|
||||
public ResponseEntity<List<RecipeDto>> searchRecipes(
|
||||
@RequestParam(required = false) String name, // by not adding a name all recipes will appear basically
|
||||
@RequestParam(required = false) List<String> tags // since users can choose no tags this isnt required
|
||||
@RequestParam(required = false) List<String> tags, // since users can choose no tags this isnt required
|
||||
@RequestParam(required = false) List<Integer> prices,
|
||||
@RequestParam(required = false) List<Integer> cookTime,
|
||||
@RequestParam(required = false) List<Integer> prepTime
|
||||
) {
|
||||
|
||||
|
||||
|
||||
List<RecipeDto> recipes = recipeService.getRecipes(name, tags);
|
||||
List<RecipeDto> recipes = recipeService.getRecipes(name, tags, prices, cookTime, prepTime);
|
||||
return new ResponseEntity<>(recipes, HttpStatus.OK);
|
||||
}
|
||||
|
||||
|
||||
@@ -62,11 +62,18 @@ public class SiteController {
|
||||
public String explore(
|
||||
@RequestParam(required = false) String q,
|
||||
@RequestParam(required = false) List<String> tags,
|
||||
@RequestParam(required = false) List<Integer> prices,
|
||||
@RequestParam(required = false) List<Integer> cookTime,
|
||||
@RequestParam(required = false) List<Integer> prepTime,
|
||||
Model model
|
||||
) {
|
||||
List<RecipeDto> recipes = recipeService.getRecipes(q, tags);
|
||||
List<RecipeDto> recipes = recipeService.getRecipes(q, tags, prices, cookTime, prepTime);
|
||||
model.addAttribute("recipes", recipes);
|
||||
String displayQuery = q;
|
||||
|
||||
|
||||
model.addAttribute("q", q);
|
||||
model.addAttribute("tags", tags);
|
||||
return "explore";
|
||||
}
|
||||
|
||||
|
||||
@@ -17,6 +17,7 @@ public class RecipeDto {
|
||||
private List<StepDto> steps;
|
||||
private List<ImageDto> images;
|
||||
private List<TagDto> tags;
|
||||
private Integer cost;
|
||||
|
||||
public RecipeDto() {
|
||||
super();
|
||||
@@ -24,7 +25,7 @@ public class RecipeDto {
|
||||
|
||||
public RecipeDto(String title, String description, Integer prepTimeMinutes, Integer cookTimeMinutes,
|
||||
Integer servings, UserDto userDto, String status, List<RecipeIngredientDto> ingredients,
|
||||
List<StepDto> steps, List<ImageDto> images, List<TagDto> tags) {
|
||||
List<StepDto> steps, List<ImageDto> images, List<TagDto> tags, Integer cost) {
|
||||
super();
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
@@ -37,6 +38,7 @@ public class RecipeDto {
|
||||
this.steps = steps;
|
||||
this.images = images;
|
||||
this.tags = tags;
|
||||
this.cost = cost;
|
||||
}
|
||||
|
||||
// getters and setters
|
||||
@@ -136,4 +138,14 @@ public class RecipeDto {
|
||||
public void setId(Integer id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public Integer getCost() {
|
||||
return cost;
|
||||
}
|
||||
|
||||
public void setCost(Integer cost) {
|
||||
this.cost = cost;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -40,6 +40,10 @@ public class Recipe {
|
||||
|
||||
private String status;
|
||||
|
||||
@NotNull(message = "Please Provide a cost")
|
||||
@Positive(message = "This value cannot be negative")
|
||||
private Integer cost;
|
||||
|
||||
private LocalDateTime createdAt;
|
||||
private LocalDateTime updatedAt;
|
||||
|
||||
@@ -76,7 +80,7 @@ public class Recipe {
|
||||
}
|
||||
|
||||
public Recipe(String title, String description, Integer prepTimeMinutes, Integer cookTimeMinutes, Integer servings,
|
||||
User user, String status) {
|
||||
User user, String status, Integer cost) {
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
this.prepTimeMinutes = prepTimeMinutes;
|
||||
@@ -86,6 +90,7 @@ public class Recipe {
|
||||
this.status = status;
|
||||
this.createdAt = LocalDateTime.now();
|
||||
this.updatedAt = LocalDateTime.now();
|
||||
this.cost = cost;
|
||||
}
|
||||
|
||||
// Getters and setters
|
||||
@@ -208,4 +213,12 @@ public class Recipe {
|
||||
public void setUsers(Set<User> users) {
|
||||
this.users = users;
|
||||
}
|
||||
|
||||
public Integer getCost() {
|
||||
return cost;
|
||||
}
|
||||
|
||||
public void setCost(Integer cost) {
|
||||
this.cost = cost;
|
||||
}
|
||||
}
|
||||
@@ -76,7 +76,7 @@ public class RecipeServiceImpl implements RecipeService {
|
||||
|
||||
RecipeDto dto = new RecipeDto(recipe.getTitle(), recipe.getDescription(), recipe.getPrepTimeMinutes(),
|
||||
recipe.getCookTimeMinutes(), recipe.getServings(), userDto, recipe.getStatus(), ingredientDtos,
|
||||
stepDtos, imageDtos, tagDtos);
|
||||
stepDtos, imageDtos, tagDtos, recipe.getCost());
|
||||
|
||||
dto.setId(recipe.getId());
|
||||
|
||||
@@ -131,7 +131,7 @@ public class RecipeServiceImpl implements RecipeService {
|
||||
|
||||
|
||||
Recipe recipe = new Recipe(dto.getTitle(), dto.getDescription(), dto.getPrepTimeMinutes(),
|
||||
dto.getCookTimeMinutes(), dto.getServings(), currentUser, dto.getStatus());
|
||||
dto.getCookTimeMinutes(), dto.getServings(), currentUser, dto.getStatus(), dto.getCost());
|
||||
|
||||
if (dto.getIngredients() != null) {
|
||||
for (RecipeIngredientDto riDto : dto.getIngredients()) {
|
||||
@@ -218,6 +218,7 @@ public class RecipeServiceImpl implements RecipeService {
|
||||
existingRecipe.setCookTimeMinutes(recipeDto.getCookTimeMinutes());
|
||||
existingRecipe.setServings(recipeDto.getServings());
|
||||
existingRecipe.setStatus(recipeDto.getStatus());
|
||||
existingRecipe.setCost(recipeDto.getCost());
|
||||
|
||||
List<RecipeIngredientDto> updatedIngredients = recipeDto.getIngredients();
|
||||
List<RecipeIngredient> ingredientsToRemove = new ArrayList<>();
|
||||
@@ -371,7 +372,7 @@ public class RecipeServiceImpl implements RecipeService {
|
||||
|
||||
@Override
|
||||
@Transactional
|
||||
public List<RecipeDto> getRecipes(String name, List<String> tags) {
|
||||
public List<RecipeDto> getRecipes(String name, List<String> tags, List<Integer> prices, List<Integer> cookTime, List<Integer> prepTime) {
|
||||
|
||||
List<Recipe> recipes;
|
||||
|
||||
@@ -389,6 +390,45 @@ public class RecipeServiceImpl implements RecipeService {
|
||||
.collect(Collectors.toList());
|
||||
}
|
||||
|
||||
if (prices != null && !prices.isEmpty() && !recipes.isEmpty()) {
|
||||
recipes = recipes.stream()
|
||||
.filter(recipe -> prices.contains(recipe.getCost()))
|
||||
.collect(Collectors.toList());
|
||||
}
|
||||
|
||||
if (cookTime != null && !cookTime.isEmpty() && !recipes.isEmpty()) {
|
||||
recipes = recipes.stream()
|
||||
.filter(recipe -> {
|
||||
int minutes = recipe.getCookTimeMinutes();
|
||||
for (Integer ct : cookTime) {
|
||||
if (ct == 15 && minutes <= 15) return true;
|
||||
if (ct == 30 && minutes > 15 && minutes <= 30) return true;
|
||||
if (ct == 60 && minutes > 30 && minutes <= 60) return true;
|
||||
if (ct == 120 && minutes > 60 && minutes <= 120) return true;
|
||||
if (ct == 121 && minutes > 120) return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
.collect(Collectors.toList());
|
||||
}
|
||||
|
||||
if (prepTime != null && !prepTime.isEmpty() && !recipes.isEmpty()) {
|
||||
recipes = recipes.stream()
|
||||
.filter(recipe -> {
|
||||
int minutes = recipe.getPrepTimeMinutes();
|
||||
for (Integer ct : prepTime) {
|
||||
if (ct == 15 && minutes <= 15) return true;
|
||||
if (ct == 30 && minutes > 15 && minutes <= 30) return true;
|
||||
if (ct == 60 && minutes > 30 && minutes <= 60) return true;
|
||||
if (ct == 240 && minutes > 60 && minutes <= 240) return true;
|
||||
if (ct == 241 && minutes > 240) return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
.collect(Collectors.toList());
|
||||
}
|
||||
|
||||
|
||||
List<RecipeDto> recipeList = new ArrayList<>();
|
||||
|
||||
for (Recipe recipe : recipes) {
|
||||
|
||||
@@ -17,7 +17,7 @@ public interface RecipeService {
|
||||
|
||||
RecipeDto getRecipeById(Integer recipeId);
|
||||
|
||||
List<RecipeDto> getRecipes(String name, List<String> tags);
|
||||
List<RecipeDto> getRecipes(String name, List<String> tags, List<Integer> prices, List<Integer> cookTime, List<Integer> prepTime);
|
||||
|
||||
RecipeDto updateRecipe(RecipeDto recipedto, Integer Id, String currentUsername);
|
||||
|
||||
|
||||
@@ -202,20 +202,11 @@ body, html {
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
@@ -269,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;
|
||||
@@ -282,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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -40,12 +40,15 @@
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="search-bar">
|
||||
<form action="/explore" method="get">
|
||||
<form action="/explore" method="get" id="search-form">
|
||||
<label for="site-search">Search:</label>
|
||||
<div class="search-btn">
|
||||
<input type="search" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
|
||||
<button type="submit"><i class="fa fa-search"></i></button>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
<div class="recipe-card">
|
||||
@@ -69,6 +72,46 @@
|
||||
<div class="sidebar-right">
|
||||
<h1> FILTER </h1>
|
||||
<form id="filter-form">
|
||||
<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>
|
||||
@@ -91,6 +134,102 @@
|
||||
</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 ):
|
||||
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);
|
||||
});
|
||||
const lastChip = input.parentElement.querySelector('.tag-chip:last-of-type');
|
||||
if (lastChip) {
|
||||
lastChip.insertAdjacentElement('afterend', chip);
|
||||
} else {
|
||||
input.insertAdjacentElement('afterend', chip);
|
||||
}
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
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