(FEAT): Loading search filters in homepage!
This was a simple update, just missing in the past. I really need to cleanup the page loading, but that will come when the error displays get implemented.
This commit is contained in:
Hayden Hargreaves
parent
c608744696
commit
37c88561b6
@ -58,7 +58,18 @@ func HomePage(ctx *gin.Context) {
|
||||
return
|
||||
}
|
||||
|
||||
page = templates.HomePage(true, viewedRecipes, madeRecipes, recipeOfTheWeek)
|
||||
if bytes, err := ctx.Cookie("search-filters"); err != nil {
|
||||
fmt.Printf("ERROR: Failed to get search-filter cookie. %s\n", err.Error())
|
||||
page = templates.HomePage(true, viewedRecipes, madeRecipes, recipeOfTheWeek, nil)
|
||||
} else {
|
||||
var filters domainRecipe.SearchFilters
|
||||
if err := json.Unmarshal([]byte(bytes), &filters); err != nil {
|
||||
fmt.Printf("ERROR: Failed to unmarshal search-filter cookie. %s\n", err.Error())
|
||||
page = templates.HomePage(true, viewedRecipes, madeRecipes, recipeOfTheWeek, nil)
|
||||
} else {
|
||||
page = templates.HomePage(true, viewedRecipes, madeRecipes, recipeOfTheWeek, &filters)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Get the recipe of the week
|
||||
recipeOfTheWeek, err := deps.RecipeService.GetRecipeOfTheWeek(nil)
|
||||
@ -70,7 +81,18 @@ func HomePage(ctx *gin.Context) {
|
||||
return
|
||||
}
|
||||
|
||||
page = templates.HomePage(false, nil, nil, recipeOfTheWeek)
|
||||
if bytes, err := ctx.Cookie("search-filters"); err != nil {
|
||||
fmt.Printf("ERROR: Failed to get search-filter cookie. %s\n", err.Error())
|
||||
page = templates.HomePage(false, nil, nil, recipeOfTheWeek, nil)
|
||||
} else {
|
||||
var filters domainRecipe.SearchFilters
|
||||
if err := json.Unmarshal([]byte(bytes), &filters); err != nil {
|
||||
fmt.Printf("ERROR: Failed to unmarshal search-filter cookie. %s\n", err.Error())
|
||||
page = templates.HomePage(false, nil, nil, recipeOfTheWeek, nil)
|
||||
} else {
|
||||
page = templates.HomePage(false, nil, nil, recipeOfTheWeek, &filters)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
title := "Potion - Home"
|
||||
|
||||
@ -5,132 +5,126 @@ import "github.com/haydenhargreaves/Potion/internal/domain/server"
|
||||
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
||||
|
||||
templ introSection() {
|
||||
<section class="w-full h-fit mb-16">
|
||||
<div class="relative">
|
||||
<video class="" autoplay loop muted playsinline>
|
||||
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4"/>
|
||||
</video>
|
||||
<h1
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
|
||||
text-white text-3xl w-4/5 font-bold z-10"
|
||||
>
|
||||
Discover Your Next Favorite Meal
|
||||
</h1>
|
||||
</div>
|
||||
<p class="leading-relaxed p-4 my-8">
|
||||
Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
|
||||
we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
|
||||
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
|
||||
browse our trending dishes for fresh ideas.
|
||||
</p>
|
||||
</section>
|
||||
<section class="w-full h-fit mb-16">
|
||||
<div class="relative">
|
||||
<video class="" autoplay loop muted playsinline>
|
||||
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
|
||||
text-white text-3xl w-4/5 font-bold z-10">
|
||||
Discover Your Next Favorite Meal
|
||||
</h1>
|
||||
</div>
|
||||
<p class="leading-relaxed p-4 my-8">
|
||||
Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
|
||||
we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
|
||||
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
|
||||
browse our trending dishes for fresh ideas.
|
||||
</p>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ searchSection() {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@components.BannerText("Craving Something Specific?")
|
||||
<div class="w-full md:w-3/4">
|
||||
@components.SearchBar(nil, true, false, false)
|
||||
</div>
|
||||
<div class="hidden" id="result-list"></div>
|
||||
</section>
|
||||
templ searchSection(filters *domainRecipe.SearchFilters) {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@components.BannerText("Craving Something Specific?")
|
||||
<div class="w-full md:w-3/4">
|
||||
@components.SearchBar(filters, true, false, false)
|
||||
</div>
|
||||
<div class="hidden" id="result-list"></div>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ highlightSection(recipeOfTheWeek *domainRecipe.Recipe) {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@components.BannerText("Recipe of the Week!")
|
||||
<p class="leading-relaxed p-4 my-8">
|
||||
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
|
||||
our community loves most. This isn't just about how many people view a recipe; it's also about
|
||||
how many times it's been made, liked, reviewed, and its average rating, all combined to find
|
||||
the true fan favorite of the week. It's our way of highlighting the best recipes that truly
|
||||
resonate with our users!
|
||||
</p>
|
||||
<div class="flex items-center justify-center w-full">
|
||||
@components.RecipeCardLarge(recipeOfTheWeek)
|
||||
</div>
|
||||
</section>
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@components.BannerText("Recipe of the Week!")
|
||||
<p class="leading-relaxed p-4 my-8">
|
||||
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
|
||||
our community loves most. This isn't just about how many people view a recipe; it's also about
|
||||
how many times it's been made, liked, reviewed, and its average rating, all combined to find
|
||||
the true fan favorite of the week. It's our way of highlighting the best recipes that truly
|
||||
resonate with our users!
|
||||
</p>
|
||||
<div class="flex items-center justify-center w-full">
|
||||
@components.RecipeCardLarge(recipeOfTheWeek)
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ listsSection(loggedIn bool, viewed, made []domainRecipe.Recipe) {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@components.BannerText("Take Another Look.")
|
||||
<div class="w-full">
|
||||
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
|
||||
if loggedIn {
|
||||
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
||||
if len(viewed) > 0 {
|
||||
for _, recipe := range viewed {
|
||||
@components.RecipeCardSmall(recipe)
|
||||
}
|
||||
@components.ContentCardSmall("View full history...", "/v1/web/history")
|
||||
} else {
|
||||
<p class="text-sm">You have not viewed any recipes. There is nothing to show.</p>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<div class="my-2 mx-4 text-gray-800">
|
||||
<a class="underline" href={ domain.WEB_LOGIN }>
|
||||
<p class="text-sm">Log in to view metrics.</p>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
<h3 class="text-lg mt-8 mx-4">Make again</h3>
|
||||
if loggedIn {
|
||||
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
||||
if len(made) > 0 {
|
||||
for _, recipe := range made {
|
||||
@components.RecipeCardSmall(recipe)
|
||||
}
|
||||
@components.ContentCardSmall("View full history...", "/v1/web/history")
|
||||
} else {
|
||||
<p class="text-sm">You have not made any recipes. There is nothing to show.</p>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<div class="my-2 mx-4 text-gray-800">
|
||||
<a class="underline" href={ domain.WEB_LOGIN }>
|
||||
<p class="text-sm">Log in to view metrics.</p>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@components.BannerText("Take Another Look.")
|
||||
<div class="w-full">
|
||||
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
|
||||
if loggedIn {
|
||||
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
||||
if len(viewed) > 0 {
|
||||
for _, recipe := range viewed {
|
||||
@components.RecipeCardSmall(recipe)
|
||||
}
|
||||
@components.ContentCardSmall("View full history...", "/v1/web/history")
|
||||
} else {
|
||||
<p class="text-sm">You have not viewed any recipes. There is nothing to show.</p>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<div class="my-2 mx-4 text-gray-800">
|
||||
<a class="underline" href={ domain.WEB_LOGIN }>
|
||||
<p class="text-sm">Log in to view metrics.</p>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
<h3 class="text-lg mt-8 mx-4">Make again</h3>
|
||||
if loggedIn {
|
||||
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
||||
if len(made) > 0 {
|
||||
for _, recipe := range made {
|
||||
@components.RecipeCardSmall(recipe)
|
||||
}
|
||||
@components.ContentCardSmall("View full history...", "/v1/web/history")
|
||||
} else {
|
||||
<p class="text-sm">You have not made any recipes. There is nothing to show.</p>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<div class="my-2 mx-4 text-gray-800">
|
||||
<a class="underline" href={ domain.WEB_LOGIN }>
|
||||
<p class="text-sm">Log in to view metrics.</p>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ ctaSection() {
|
||||
<section
|
||||
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center"
|
||||
>
|
||||
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
|
||||
Unleash Your Inner Chef!
|
||||
</h2>
|
||||
<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
|
||||
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
|
||||
It's time to bring your creations to life!
|
||||
</p>
|
||||
<a
|
||||
href={ domain.WEB_CREATE }
|
||||
class="flex items-center justify-center
|
||||
<section
|
||||
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center">
|
||||
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
|
||||
Unleash Your Inner Chef!
|
||||
</h2>
|
||||
<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
|
||||
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
|
||||
It's time to bring your creations to life!
|
||||
</p>
|
||||
<a href={ domain.WEB_CREATE } class="flex items-center justify-center
|
||||
bg-gradient-to-r from-blue-400 to-blue-600 text-white
|
||||
px-12 py-5 rounded-full shadow-sm hover:shadow-md
|
||||
transition-all duration-300 ease-in-out shadow-blue-700
|
||||
text-lg md:text-2xl font-bold uppercase tracking-wide"
|
||||
>
|
||||
Create Your Recipe!
|
||||
</a>
|
||||
</section>
|
||||
text-lg md:text-2xl font-bold uppercase tracking-wide">
|
||||
Create Your Recipe!
|
||||
</a>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe) {
|
||||
@components.Navbar("home")
|
||||
<div class="w-full h-fit flex justify-center">
|
||||
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
|
||||
@introSection()
|
||||
@searchSection()
|
||||
@highlightSection(recipeOfTheWeek)
|
||||
@listsSection(loggedIn, viewed, made)
|
||||
@ctaSection()
|
||||
</div>
|
||||
</div>
|
||||
templ HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe, filters *domainRecipe.SearchFilters) {
|
||||
@components.Navbar("home")
|
||||
<div class="w-full h-fit flex justify-center">
|
||||
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
|
||||
@introSection()
|
||||
@searchSection(filters)
|
||||
@highlightSection(recipeOfTheWeek)
|
||||
@listsSection(loggedIn, viewed, made)
|
||||
@ctaSection()
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ func introSection() templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func searchSection() templ.Component {
|
||||
func searchSection(filters *domainRecipe.SearchFilters) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
@ -74,7 +74,7 @@ func searchSection() templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = components.SearchBar(nil, true, false, false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = components.SearchBar(filters, true, false, false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -304,7 +304,7 @@ func ctaSection() templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe) templ.Component {
|
||||
func HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe, filters *domainRecipe.SearchFilters) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
@ -337,7 +337,7 @@ func HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = searchSection().Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = searchSection(filters).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user