186 lines
6.3 KiB
Plaintext
186 lines
6.3 KiB
Plaintext
package templates
|
|
|
|
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
import "fmt"
|
|
import "strings"
|
|
import domain "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
|
import domainUser "github.com/haydenhargreaves/Potion/internal/domain/user"
|
|
import domainEngagement "github.com/haydenhargreaves/Potion/internal/domain/engagement"
|
|
|
|
func displayDifficulty(diff int) string {
|
|
switch diff {
|
|
case 1:
|
|
return "Beginner"
|
|
case 2:
|
|
return "Easy"
|
|
case 3:
|
|
return "Intermediate"
|
|
case 4:
|
|
return "Challenging"
|
|
case 5:
|
|
return "Extreme"
|
|
default:
|
|
return ""
|
|
}
|
|
}
|
|
|
|
func displayTags(tags []domainRecipe.Tag) string {
|
|
names := make([]string, 0, len(tags))
|
|
for _, tag := range tags {
|
|
names = append(names, tag.Name)
|
|
}
|
|
return strings.Join(names, ", ")
|
|
}
|
|
|
|
templ userDetailsSection(user domainUser.User, recipeCount int, favoriteCount int) {
|
|
<section class="w-full flex flex-col justify-center my-8 py-4 border-b border-gray-300">
|
|
<div class="w-full p-4 md:p-8 flex items-center gap-x-8">
|
|
if user.ImageUrl != "" {
|
|
<img class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none" src={
|
|
user.ImageUrl } />
|
|
} else {
|
|
<img class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none" src={
|
|
fmt.Sprintf("https://ui-avatars.com/api/?name=%s+%s&size=150", strings.Split(user.Name, " " )[0],
|
|
strings.Split(user.Name, " " )[1]) } />
|
|
}
|
|
<div class="flex flex-col gap-y-4">
|
|
<div class="">
|
|
<h1 class="text-md md:text-2xl font-semibold">{ user.Name }</h1>
|
|
<p class="text-xs md:text-sm">{ user.Email }</p>
|
|
</div>
|
|
<div class="flex gap-x-4">
|
|
<p class="text-xs md:text-sm"><span class="font-bold">{ recipeCount }</span> recipes</p>
|
|
<p class="text-xs md:text-sm"><span class="font-bold">{ favoriteCount }</span> favorites</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ recipesSection(recipes []domainRecipe.Recipe) {
|
|
<section class="p-8">
|
|
<h2 class="text-2xl font-semibold text-gray-800">My Recipes</h2>
|
|
<ul class="w-full my-2">
|
|
if len(recipes) <= 4 {
|
|
for _, recipe :=range recipes {
|
|
@recipeListItem(recipe)
|
|
}
|
|
} else {
|
|
for _, recipe :=range recipes[:4] {
|
|
@recipeListItem(recipe)
|
|
}
|
|
}
|
|
<a href={ domain.WEB_NOT_FOUND }>
|
|
<li
|
|
class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center">
|
|
See all...
|
|
</li>
|
|
</a>
|
|
</ul>
|
|
</section>
|
|
}
|
|
|
|
templ favoritesSection(recipes []domainRecipe.Recipe) {
|
|
<section class="p-8">
|
|
<h2 class="text-2xl font-semibold text-gray-800">My Favorites</h2>
|
|
<ul class="w-full my-2">
|
|
if len(recipes) <= 4 {
|
|
for _, recipe := range recipes {
|
|
@recipeListItem(recipe)
|
|
}
|
|
} else {
|
|
for _, recipe := range recipes[:4] {
|
|
@recipeListItem(recipe)
|
|
}
|
|
}
|
|
<a href={ domain.WEB_FAVORITES }>
|
|
<li
|
|
class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center">
|
|
See all...
|
|
</li>
|
|
</a>
|
|
</ul>
|
|
</section>
|
|
}
|
|
|
|
templ activitySection(engagement []domainEngagement.Engagement) {
|
|
<section class="p-8">
|
|
<h2 class="text-2xl font-semibold text-gray-800">Recent Activity</h2>
|
|
<p class="text-sm my-2">Activity section is under construction!</p>
|
|
<ul class="w-full my-2">
|
|
for _, eng := range engagement {
|
|
@activityListItem(eng)
|
|
}
|
|
<a href={ domain.WEB_NOT_FOUND }>
|
|
<li
|
|
class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center">
|
|
See all...
|
|
</li>
|
|
</a>
|
|
</ul>
|
|
</section>
|
|
}
|
|
|
|
templ recipeListItem(recipe domainRecipe.Recipe) {
|
|
<li class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150">
|
|
<p hx-post={ fmt.Sprintf(domain.API_ENGAGEMENT_VIEW, recipe.Id) } hx-trigger="click" hx-swap="none"
|
|
class="text-base md:text-lg hover:text-blue-600 duration-100 cursor-pointer">
|
|
{ recipe.Title }
|
|
</p>
|
|
<p class="hidden md:block text-sm text-gray-700 my-1.5">
|
|
Difficulty: <span class="font-semibold">{ displayDifficulty(recipe.Difficulty) }</span>
|
|
| Duration: <span class="font-semibold">{ recipe.Duration.Total } min</span>
|
|
| Category: <span class="font-semibold">{ recipe.Category }</span>
|
|
</p>
|
|
<p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
|
|
Difficulty: <span class="font-semibold">{ displayDifficulty(recipe.Difficulty) }</span>
|
|
</p>
|
|
<p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
|
|
Duration: <span class="font-semibold">{ recipe.Duration.Total } min</span>
|
|
</p>
|
|
<p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
|
|
Category: <span class="font-semibold">{ recipe.Category }</span>
|
|
</p>
|
|
if len(recipe.Tags) > 0 {
|
|
<p class="text-xs italic text-gray-500">
|
|
Tags: { displayTags(recipe.Tags) }
|
|
</p>
|
|
}
|
|
</li>
|
|
}
|
|
|
|
templ activityListItem(engagement domainEngagement.Engagement) {
|
|
<li
|
|
class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150 flex justify-between items-center">
|
|
<p class="text-sm md:text-base text-gray-800">
|
|
{ engagement.Message }
|
|
</p>
|
|
<p class="text-xs md:text-sm text-gray-600 w-fit shrink-0">
|
|
{ engagement.Created.Format("01/02/2006") }
|
|
</p>
|
|
</li>
|
|
}
|
|
|
|
templ logoutSection() {
|
|
<section class="w-full flex flex-col justify-center items-center py-8 border-t border-gray-300 mt-auto">
|
|
<a href={ domain.API_AUTH_LOGOUT }
|
|
class="text-center border border-red-500 text-red-500 w-9/10 md:w-1/3 py-2 rounded-lg hover:cursor-pointer hover:bg-red-100 duration-300">
|
|
Logout
|
|
</a>
|
|
</section>
|
|
}
|
|
|
|
templ ProfilePage(user domainUser.User, recipes []domainRecipe.Recipe, favorites []domainRecipe.Recipe, engagement []domainEngagement.Engagement) {
|
|
@components.Navbar(" profile")
|
|
<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 border-l border-r border-gray-300 bg-white flex flex-col">
|
|
@userDetailsSection(user, len(recipes), len(favorites))
|
|
@recipesSection(recipes)
|
|
@favoritesSection(favorites)
|
|
@activitySection(engagement)
|
|
@logoutSection()
|
|
</div>
|
|
</div>
|
|
}
|