From 3dd81852570f374ad4a3131e40d58500d103f922 Mon Sep 17 00:00:00 2001 From: Hayden Hargreaves Date: Thu, 14 Aug 2025 20:38:53 -0700 Subject: [PATCH] (FEAT): Allowed for removal of ingredients and instructions. This is very janky and makes me wonder if I should have used a framework. But it works? --- internal/templates/pages/create.templ | 99 ++++++++-- internal/templates/pages/search.templ | 230 ++++++++++------------- internal/templates/pages/search_templ.go | 16 +- 3 files changed, 193 insertions(+), 152 deletions(-) diff --git a/internal/templates/pages/create.templ b/internal/templates/pages/create.templ index ee26f4f..309f40c 100644 --- a/internal/templates/pages/create.templ +++ b/internal/templates/pages/create.templ @@ -25,7 +25,7 @@ templ Page() { share your masterpiece!

* -
-
+
    +
  • -
-
+ + `; list.appendChild(item); } + function removeIngredient(index) { + const list = document.getElementById("ingredient-list"); + + // List contents, ensure valid items + const listElement = list.querySelector(`#ingredient-${index}`); + if (listElement) listElement.remove(); + } + function addInstruction() { const list = document.getElementById("instruction-list"); const itemNum = list.querySelectorAll("textarea").length + 1; - const item = document.createElement("textarea"); - item.id = "instructions"; - item.name = "instructions"; - item.className = "border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm"; - item.rows = "3"; - item.placeholder = `Step ${itemNum}: Describe this step...`; - list.appendChild(item); + const div = document.createElement("div"); + div.id = `instruction-${itemNum}`; + div.className = "flex"; + + div.innerHTML = ` + + + + `; + + list.appendChild(div); } - + + function removeInstruction (num) { + const list = document.getElementById("instruction-list"); + const item = list.querySelector(`#instruction-${num}`); + if (item) item.remove(); + + // This list will start at 2, since the first element is not included + const remainingItems = list.querySelectorAll("div"); + + for (let i = 2; i < remainingItems.length + 2; i++) { + // Get the old content + const textContent = remainingItems[i - 2].querySelector("textarea").value; + + // Create a new element + const div = document.createElement("div"); + div.id = `instruction-${i}`; + div.className = "flex"; + div.innerHTML = ` + + + + `; + + remainingItems[i - 2].replaceWith(div); + } + } + } diff --git a/internal/templates/pages/search.templ b/internal/templates/pages/search.templ index d82baec..050fb3d 100644 --- a/internal/templates/pages/search.templ +++ b/internal/templates/pages/search.templ @@ -1,151 +1,123 @@ package templates import ( - "fmt" - "github.com/haydenhargreaves/Potion/internal/domain/recipe" - domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe" - domainServer "github.com/haydenhargreaves/Potion/internal/domain/server" - "github.com/haydenhargreaves/Potion/internal/templates/components" +"fmt" +"github.com/haydenhargreaves/Potion/internal/domain/recipe" +domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe" +domainServer "github.com/haydenhargreaves/Potion/internal/domain/server" +"github.com/haydenhargreaves/Potion/internal/templates/components" ) templ SearchPage(filters *domainRecipe.SearchFilters, searchOnLoad bool) { - @components.Navbar("") -
-
- @components.BannerText("Recipe Search") - @components.SearchBar(filters, false, searchOnLoad, false) -
- @ResultList(nil) -
-
+ @components.Navbar("") +
+
+ @components.BannerText("Recipe Search") + @components.SearchBar(filters, false, searchOnLoad, false) +
+ @ResultList(nil) +
+
} templ ResultList(recipes []domain.Recipe) { -
- for _, recipe := range recipes { - @searchResult(recipe) - } - if len(recipes) == 0 || recipes == nil { -

No results

- } else { -

End of results

- } -
+
+ for _, recipe := range recipes { + @searchResult(recipe) + } + if len(recipes) == 0 || recipes == nil { +

No results

+ } else { +

End of results

+ } +
} templ searchResult(recipe domain.Recipe) { -
- -
-
-
-

- { recipe.Title } -

-
- - @timeIconSm() - { recipe.Duration.Total } min - - - for _ = range(recipe.Difficulty) { - @starIconSm(true) - } - for _ = range(5 - recipe.Difficulty) { - @starIconSm(false) - } - - - @servingIconSm() - Serves { recipe.Serves } - -
-
- -
-

- { recipe.Description } -

-
-
+
+ +
+
+
+

+ { recipe.Title } +

+
+ + @timeIconSm() + { recipe.Duration.Total } min + + + for _ = range(recipe.Difficulty) { + @starIconSm(true) + } + for _ = range(5 - recipe.Difficulty) { + @starIconSm(false) + } + + + @servingIconSm() + Serves { recipe.Serves } + +
+
+ +
+

+ { recipe.Description } +

+
+
} templ servingIconSm() { - - - - - - - + + + + + + + } templ timeIconSm() { - - - + + + } templ starIconSm(filled bool) { - if filled { - - - - - } else { - - - - - } + if filled { + + + + + + } else { + + + + + + } } diff --git a/internal/templates/pages/search_templ.go b/internal/templates/pages/search_templ.go index d528da7..275bd90 100644 --- a/internal/templates/pages/search_templ.go +++ b/internal/templates/pages/search_templ.go @@ -41,7 +41,7 @@ func SearchPage(filters *domainRecipe.SearchFilters, searchOnLoad bool) templ.Co if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -147,7 +147,7 @@ func searchResult(recipe domain.Recipe) templ.Component { var templ_7745c5c3_Var4 string templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id)) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 38, Col: 71} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 38, Col: 73} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) if templ_7745c5c3_Err != nil { @@ -160,7 +160,7 @@ func searchResult(recipe domain.Recipe) templ.Component { var templ_7745c5c3_Var5 string templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 46, Col: 24} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 46, Col: 26} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) if templ_7745c5c3_Err != nil { @@ -173,7 +173,7 @@ func searchResult(recipe domain.Recipe) templ.Component { var templ_7745c5c3_Var6 string templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Category) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 46, Col: 95} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 46, Col: 97} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) if templ_7745c5c3_Err != nil { @@ -190,7 +190,7 @@ func searchResult(recipe domain.Recipe) templ.Component { var templ_7745c5c3_Var7 string templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Duration.Total) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 51, Col: 35} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 51, Col: 37} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) if templ_7745c5c3_Err != nil { @@ -227,7 +227,7 @@ func searchResult(recipe domain.Recipe) templ.Component { var templ_7745c5c3_Var8 string templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Serves) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 63, Col: 34} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 63, Col: 36} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) if templ_7745c5c3_Err != nil { @@ -250,7 +250,7 @@ func searchResult(recipe domain.Recipe) templ.Component { var templ_7745c5c3_Var9 string templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Description) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 79, Col: 26} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 79, Col: 28} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) if templ_7745c5c3_Err != nil { @@ -285,7 +285,7 @@ func servingIconSm() templ.Component { templ_7745c5c3_Var10 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err }