d950e75540
This means that we can use the cookie data to load the filters when the search page loads. The final step is making sure the search is complete and the simple redirection. Which will come in the next commit!
94 lines
3.8 KiB
Plaintext
94 lines
3.8 KiB
Plaintext
package components
|
|
|
|
import "fmt"
|
|
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 {
|
|
x := (bits>>pos)&1 == 1
|
|
fmt.Printf("BITS: %d, POS: %d, VAL: %v\n", bits, pos, x)
|
|
return x
|
|
}
|
|
|
|
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>
|
|
}
|