etc404/thymecrunch
1
0
Fork 0
mirror of https://gitlab.com/etc404/software-engineering-project.git synced 2026-05-10 20:52:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

explore page working i believe

Browse Source
This commit is contained in:
durn
2026-04-17 19:30:25 -06:00
parent b26af70ef5
commit c2e6722829
9 changed files with 300 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/explore.css
+71 -10
View File
@@ -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);
src/main/resources/templates/create-recipe.html
+2
View File
@@ -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,
src/main/resources/templates/explore.html
+143 -4
View File
@@ -40,14 +40,17 @@
<!-- 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>
<div class="recipe-card">
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
@@ -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>