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
parent
b776000cf0
commit
433ff827b7
|
|
@ -12,7 +12,7 @@
|
|||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
</head>
|
||||
<body class="bg-very-light-gray">
|
||||
<body class="bg-very-light-gray" hx-boost="true">
|
||||
<!--[if lt IE 8]>
|
||||
<p class="browserupgrade">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
|
|
@ -27,16 +27,32 @@
|
|||
<p>Dark Mode</p>
|
||||
</header>
|
||||
<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">
|
||||
<p class="w-16 grid place-content-center">IC</p>
|
||||
<input
|
||||
class="appearance-none flex-grow focus:outline-none mr-2"
|
||||
type="text"
|
||||
name="country-name"
|
||||
id="country-name-input"
|
||||
name="countryName"
|
||||
list="country-names-list"
|
||||
placeholder="Search for a country..."
|
||||
/>
|
||||
</div>
|
||||
<datalist id="country-names-list">
|
||||
<option
|
||||
th:each="country : ${allCountriesList}"
|
||||
th:value="${country.name}"
|
||||
value=""
|
||||
></option>
|
||||
</datalist>
|
||||
</form>
|
||||
<form>
|
||||
<select
|
||||
|
|
@ -83,34 +99,38 @@
|
|||
th:id="${country.alpha3Code}"
|
||||
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||
>
|
||||
<img
|
||||
src="https://flagcdn.com/de.svg"
|
||||
th:src="${country.flag}"
|
||||
alt="flag of Germany"
|
||||
th:alt="|flag of ${country.name}|"
|
||||
class="rounded-t-lg"
|
||||
/>
|
||||
<section class="p-8 space-y-3">
|
||||
<h2 class="text-2xl font-bold" th:text="${country.name}">Germany</h2>
|
||||
<dl class="space-y-1">
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Population:</dt>
|
||||
<dd
|
||||
th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}"
|
||||
>
|
||||
81,771,900
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Region:</dt>
|
||||
<dd th:text="${country.region}">Europe</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Capital:</dt>
|
||||
<dd th:text="${country.capital}">Berlin</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<a href="" th:href="@{~/country(countryName=${country.name})}">
|
||||
<img
|
||||
src="https://flagcdn.com/de.svg"
|
||||
th:src="${country.flag}"
|
||||
alt="flag of Germany"
|
||||
th:alt="|flag of ${country.name}|"
|
||||
class="rounded-t-lg"
|
||||
/>
|
||||
<section class="p-8 space-y-3">
|
||||
<h2 class="text-2xl font-bold" th:text="${country.name}">
|
||||
Germany
|
||||
</h2>
|
||||
<dl class="space-y-1">
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Population:</dt>
|
||||
<dd
|
||||
th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}"
|
||||
>
|
||||
81,771,900
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Region:</dt>
|
||||
<dd th:text="${country.region}">Europe</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Capital:</dt>
|
||||
<dd th:text="${country.capital}">Berlin</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ case class Routes(countries: List[Country])(implicit
|
|||
log: cask.Logger
|
||||
) extends cask.Routes {
|
||||
|
||||
/**
|
||||
* initializing thymeleaf template engine
|
||||
* which finds and renders html templates by name
|
||||
*/
|
||||
def buildTemplateEngine(): TemplateEngine = {
|
||||
val templateResolver = new ClassLoaderTemplateResolver()
|
||||
templateResolver.setTemplateMode(TemplateMode.HTML)
|
||||
|
|
@ -39,6 +43,7 @@ case class Routes(countries: List[Country])(implicit
|
|||
|
||||
context.setVariable("regionsSet", regions)
|
||||
context.setVariable("countriesList", selectedCountries.asJava)
|
||||
context.setVariable("allCountriesList", countries.asJava)
|
||||
context.setVariable("selectedRegion", region.getOrElse(""))
|
||||
|
||||
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")
|
||||
def doThing(request: cask.Request) = {
|
||||
request.text().reverse
|
||||
|
|
|
|||
Loading…
Reference in New Issue