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

feat: dummy country page and redirects 

from search and cards.
card content wrapped in an anchor doesn't look good,
and search only working with htmx (without graceful degradatino) also
doesn't look too good

but with 'hx-boost="true"' ordinary anchor in card also preserves
header, that's nice
This commit is contained in:
efim 2023-09-23 19:17:09 +00:00
parent b776000cf0
commit 433ff827b7
2 changed files with 61 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
16-countries-page-from-api/src/main/resources/templates/index.html
View File

@ -12,7 +12,7 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
</head> </head>
<body class="bg-very-light-gray"> <body class="bg-very-light-gray" hx-boost="true">
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -27,16 +27,32 @@
<p>Dark Mode</p> <p>Dark Mode</p>
</header> </header>
<nav class="flex flex-col px-6 my-4 justify-around h-48"> <nav class="flex flex-col px-6 my-4 justify-around h-48">
<form method="post" id="search-country" action=""> <form
method="get"
id="search-country"
action=""
hx-get="/country"
hx-target="body"
hx-push-url="true"
>
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg"> <div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
<p class="w-16 grid place-content-center">IC</p> <p class="w-16 grid place-content-center">IC</p>
<input <input
class="appearance-none flex-grow focus:outline-none mr-2" class="appearance-none flex-grow focus:outline-none mr-2"
type="text" type="text"
name="country-name" id="country-name-input"
name="countryName"
list="country-names-list"
placeholder="Search for a country..." placeholder="Search for a country..."
/> />
</div> </div>
<datalist id="country-names-list">
<option
th:each="country : ${allCountriesList}"
th:value="${country.name}"
value=""
></option>
</datalist>
</form> </form>
<form> <form>
<select <select
@ -83,6 +99,7 @@
th:id="${country.alpha3Code}" th:id="${country.alpha3Code}"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg" class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
> >
<a href="" th:href="@{~/country(countryName=${country.name})}">
<img <img
src="https://flagcdn.com/de.svg" src="https://flagcdn.com/de.svg"
th:src="${country.flag}" th:src="${country.flag}"
@ -91,7 +108,9 @@
class="rounded-t-lg" class="rounded-t-lg"
/> />
<section class="p-8 space-y-3"> <section class="p-8 space-y-3">
<h2 class="text-2xl font-bold" th:text="${country.name}">Germany</h2> <h2 class="text-2xl font-bold" th:text="${country.name}">
Germany
</h2>
<dl class="space-y-1"> <dl class="space-y-1">
<div class="flex"> <div class="flex">
<dt class="font-bold mr-2">Population:</dt> <dt class="font-bold mr-2">Population:</dt>
@ -111,6 +130,7 @@
</div> </div>
</dl> </dl>
</section> </section>
</a>
</article> </article>
<article <article

10
16-countries-page-from-api/src/main/scala/example/Routes.scala
View File

@ -13,6 +13,10 @@ case class Routes(countries: List[Country])(implicit
log: cask.Logger log: cask.Logger
) extends cask.Routes { ) extends cask.Routes {
/**
* initializing thymeleaf template engine
* which finds and renders html templates by name
*/
def buildTemplateEngine(): TemplateEngine = { def buildTemplateEngine(): TemplateEngine = {
val templateResolver = new ClassLoaderTemplateResolver() val templateResolver = new ClassLoaderTemplateResolver()
templateResolver.setTemplateMode(TemplateMode.HTML) templateResolver.setTemplateMode(TemplateMode.HTML)
@ -39,6 +43,7 @@ case class Routes(countries: List[Country])(implicit
context.setVariable("regionsSet", regions) context.setVariable("regionsSet", regions)
context.setVariable("countriesList", selectedCountries.asJava) context.setVariable("countriesList", selectedCountries.asJava)
context.setVariable("allCountriesList", countries.asJava)
context.setVariable("selectedRegion", region.getOrElse("")) context.setVariable("selectedRegion", region.getOrElse(""))
val indexPage = engine.process("index", context) val indexPage = engine.process("index", context)
@ -48,6 +53,11 @@ case class Routes(countries: List[Country])(implicit
) )
} }
@cask.get("/country")
def getCountryPage(countryName: String) = {
s"counrty $countryName was requested"
}
@cask.post("/do-thing") @cask.post("/do-thing")
def doThing(request: cask.Request) = { def doThing(request: cask.Request) = {
request.text().reverse request.text().reverse