efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(15): making fragments, loading based on step

This commit is contained in:
efim 2023-07-14 05:03:18 +00:00
parent aca7ae8ecf
commit f8f1580fc7
9 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
15-multi-step-form/src/main/resources/public/out.css
View File

@ -665,6 +665,10 @@ video {
height: 100vh; height: 100vh;
} }
.h-40 {
height: 10rem;
}
.w-11\/12 { .w-11\/12 {
width: 91.666667%; width: 91.666667%;
} }

9
15-multi-step-form/src/main/resources/templates/index.html
View File

@ -33,15 +33,18 @@
</head> </head>
<body> <body>
<main class="grid place-content-center w-screen h-screen bg-magnolia"> <main class="grid place-content-center w-screen h-screen bg-magnolia">
<section
<section> hx-get="/get-form"
hx-trigger="load"
hx-swap="outerHTML"
>
<!-- here be immediate hx-get for the form. to subscitute the body -->
<img class="w-14 text-green-500 fill-current" th:src="'public/images/tail-spin.svg'" src="../public/images/tail-spin.svg" alt="loading..." /> <img class="w-14 text-green-500 fill-current" th:src="'public/images/tail-spin.svg'" src="../public/images/tail-spin.svg" alt="loading..." />
</section> </section>
<section class="absolute top-0 end-0" id="new-session-control"> <section class="absolute top-0 end-0" id="new-session-control">
<button hx-get="/force-new-session">Request new session</button> <button hx-get="/force-new-session">Request new session</button>
</section> </section>
<!-- here be immediate hx-get for the form. to subscitute the body -->
<div class="fixed inset-x-0 bottom-0 attribution"> <div class="fixed inset-x-0 bottom-0 attribution">
Challenge by Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"

1
15-multi-step-form/src/main/resources/templates/step1.html
View File

@ -38,6 +38,7 @@
<form <form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl" class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step" id="form-step"
th:fragment="formFragment(formData)"
> >
<summary <summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]" class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"

5
15-multi-step-form/src/main/resources/templates/step2.html
View File

@ -36,9 +36,10 @@
<![endif]--> <![endif]-->
<main class="grid place-content-center h-screen"> <main class="grid place-content-center h-screen">
<article <form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl" class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step" id="form-step"
th:fragment="formFragment(formData)"
> >
<summary <summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]" class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@ -188,7 +189,7 @@
>Next Step</a >Next Step</a
> >
</section> </section>
</article> </form>
</main> </main>
</body> </body>
</html> </html>

5
15-multi-step-form/src/main/resources/templates/step3.html
View File

@ -36,9 +36,10 @@
<![endif]--> <![endif]-->
<main class="grid place-content-center h-screen"> <main class="grid place-content-center h-screen">
<article <form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl" class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step" id="form-step"
th:fragment="formFragment(formData)"
> >
<summary <summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]" class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@ -181,7 +182,7 @@
>Next Step</a >Next Step</a
> >
</section> </section>
</article> </form>
</main> </main>
</body> </body>
</html> </html>

5
15-multi-step-form/src/main/resources/templates/step4.html
View File

@ -36,9 +36,10 @@
<![endif]--> <![endif]-->
<main class="grid place-content-center h-screen"> <main class="grid place-content-center h-screen">
<article <form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl" class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step" id="form-step"
th:fragment="formFragment(formData)"
> >
<summary <summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]" class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@ -140,7 +141,7 @@
>Confirm</a >Confirm</a
> >
</section> </section>
</article> </form>
</main> </main>
</body> </body>
</html> </html>

1
15-multi-step-form/src/main/resources/templates/step5.html
View File

@ -39,6 +39,7 @@
<article <article
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl" class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step" id="form-step"
th:fragment="formFragment(formData)"
> >
<summary <summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]" class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"

5
15-multi-step-form/src/main/scala/multistepform/Models.scala
View File

@ -6,5 +6,8 @@ object Models {
final case class Answers( final case class Answers(
sessionId: String = "id1", sessionId: String = "id1",
currentStep: Int = 1, currentStep: Int = 1,
) // fragmentName: String = "step1",
) {
def fragmentName: String = s"step${currentStep}"
}
} }

9
15-multi-step-form/src/main/scala/multistepform/Routes.scala
View File

@ -5,6 +5,7 @@ import org.thymeleaf.TemplateEngine
import org.thymeleaf.context.Context import org.thymeleaf.context.Context
import cask.endpoints.ParamReader import cask.endpoints.ParamReader
import java.util.UUID import java.util.UUID
import scala.jdk.CollectionConverters._
case class Routes()(implicit cc: castor.Context, log: cask.Logger) case class Routes()(implicit cc: castor.Context, log: cask.Logger)
extends cask.Routes { extends cask.Routes {
@ -59,7 +60,15 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
*/ */
@cask.get("/get-form") @cask.get("/get-form")
def getForm(sessionId: cask.Cookie) = { def getForm(sessionId: cask.Cookie) = {
val state = Models.Answers(currentStep = 1)
cask.Response("yoyo") cask.Response("yoyo")
val context = new Context()
context.setVariable("formData", state)
val formFragment = templateEngine.process(state.fragmentName, Set("formFragment").asJava, context)
cask.Response(
formFragment,
headers = Seq("Content-Type" -> "text/html;charset=UTF-8")
)
} }
@cask.staticResources("/public") @cask.staticResources("/public")