9ac7356668
The search is nearly complete for the initial implementation. Just need to figure out what to do with the text search provided, make any required UI changes, and eventual implement pagination via a "load more" button.
97 lines
4.0 KiB
Plaintext
97 lines
4.0 KiB
Plaintext
package components
|
|
|
|
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
|
|
|
// isBitActive returns true when the bit at pos (0 indexed) is true.
|
|
func isBitActive(bits, pos int) bool {
|
|
return (bits>>pos)&1 == 1
|
|
}
|
|
|
|
templ dropdownButton(content, name, value string, selected bool) {
|
|
<label class="inline-block cursor-pointer select-none">
|
|
<input type="checkbox" name={ name } value={ value } class="sr-only peer"
|
|
if selected {
|
|
checked
|
|
} />
|
|
<span class="peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600
|
|
px-2 py-1 border border-gray-300 rounded-lg">
|
|
{ content }
|
|
</span>
|
|
</label>
|
|
}
|
|
|
|
templ FilterDropdown(filters domainRecipe.SearchFilters) {
|
|
<script>
|
|
function toggleDropdown() {
|
|
const menu = document.getElementById("filter-dropdown-menu");
|
|
const button = document.getElementById("filter-dropdown-button");
|
|
|
|
if (menu.classList.contains("block")) {
|
|
menu.classList.remove("block");
|
|
menu.classList.add("hidden");
|
|
} else {
|
|
menu.classList.remove("hidden");
|
|
menu.classList.add("block");
|
|
}
|
|
}
|
|
</script>
|
|
<div id="filter-dropdown-menu" class="hidden w-full p-2 border border-gray-300 my-2 rounded-lg">
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-2">
|
|
Meal
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@dropdownButton("Breakfast", "meal", "1", isBitActive(filters.MealType, 0))
|
|
@dropdownButton("Lunch", "meal", "2", isBitActive(filters.MealType, 1))
|
|
@dropdownButton("Dinner", "meal", "4", isBitActive(filters.MealType, 2))
|
|
@dropdownButton("Desert", "meal", "8", isBitActive(filters.MealType, 3))
|
|
@dropdownButton("Snack", "meal", "16", isBitActive(filters.MealType, 4))
|
|
@dropdownButton("Side", "meal", "32", isBitActive(filters.MealType, 5))
|
|
@dropdownButton("Other", "meal", "64", isBitActive(filters.MealType, 6))
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-2">
|
|
Cook Time
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@dropdownButton("< 15 min", "time" , "1" , isBitActive(filters.Time, 0))
|
|
@dropdownButton("15 to 30 min", "time", "2" , isBitActive(filters.Time, 1))
|
|
@dropdownButton("30 to 60 min", "time" , "4" , isBitActive(filters.Time, 2))
|
|
@dropdownButton("60 to 120 min", "time" , "8" , isBitActive(filters.Time, 3))
|
|
@dropdownButton("+120 min", "time" , "16" , isBitActive(filters.Time, 4))
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-2">
|
|
Difficulty
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@dropdownButton("Beginner", "difficulty", "1", isBitActive(filters.Difficulty, 0))
|
|
@dropdownButton("Easy", "difficulty", "2", isBitActive(filters.Difficulty, 1))
|
|
@dropdownButton("Intermediate", "difficulty", "4", isBitActive(filters.Difficulty, 2))
|
|
@dropdownButton("Challenging", "difficulty", "8", isBitActive(filters.Difficulty, 3))
|
|
@dropdownButton("Extreme", "difficulty", "16", isBitActive(filters.Difficulty, 4))
|
|
</div>
|
|
</div>
|
|
<div class="w-full border-b border-gray-300 py-2">
|
|
<h3 class="mb-2">
|
|
Serving Size
|
|
</h3>
|
|
<div class="flex text-xs flex-wrap gap-1 gap-y-3">
|
|
@dropdownButton("1 to 2", "serving", "1", isBitActive(filters.ServingSize, 0))
|
|
@dropdownButton("2 to 4", "serving", "2", isBitActive(filters.ServingSize, 1))
|
|
@dropdownButton("4 to 6", "serving", "4", isBitActive(filters.ServingSize, 2))
|
|
@dropdownButton("6 to 8", "serving", "8", isBitActive(filters.ServingSize, 3))
|
|
@dropdownButton("8+", "serving", "16", isBitActive(filters.ServingSize, 4))
|
|
</div>
|
|
</div>
|
|
<div class="w-full pt-2 flex justify-end items-end">
|
|
<button type="submit"
|
|
class="w-full text-sm md:text-base text-white rounded-lg py-1.5 md:py-2 bg-blue-600 hover:bg-blue-700 duration-300">
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|