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

feat: selection filtering table update

This commit is contained in:
efim 2023-09-23 18:22:09 +00:00
parent c260d348d7
commit b776000cf0
1 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,14 +40,30 @@
</form> </form>
<form> <form>
<select <select
name="region"
class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none" class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none"
hx-get="/"
hx-target="#countries-main-list"
hx-select="#countries-main-list"
hx-push-url="true"
> >
<option value="" selected disabled <option
th:selected=${#strings.isEmpty(selectedRegion)} value=""
>Filter by Region</option> selected
<option th:each="region: ${regionsSet}" th:value="${region}" th:text="${region}" disabled
th:selected="${#strings.isEmpty(selectedRegion)}"
>
Filter by Region
</option>
<option
th:each="region: ${regionsSet}"
th:value="${region}"
th:text="${region}"
th:selected="${selectedRegion == region}" th:selected="${selectedRegion == region}"
value="Africa">Africa</option> value="Africa"
>
Africa
</option>
<option th:remove="all" value="Americas">Americas</option> <option th:remove="all" value="Americas">Americas</option>
<option th:remove="all" value="Asia">Asia</option> <option th:remove="all" value="Asia">Asia</option>
<option th:remove="all" value="Europe">Europe</option> <option th:remove="all" value="Europe">Europe</option>
@ -55,7 +71,9 @@
</select> </select>
</form> </form>
</nav> </nav>
<main class="flex flex-col items-center gap-10 pb-8" <main
class="flex flex-col items-center gap-10 pb-8"
id="countries-main-list"
th:remove="all-but-first" th:remove="all-but-first"
th:fragment="countries-main (countriesList)" th:fragment="countries-main (countriesList)"
> >
@ -73,13 +91,15 @@
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" <h2 class="text-2xl font-bold" th:text="${country.name}">Germany</h2>
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>
<dd th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}">81,771,900</dd> <dd
th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}"
>
81,771,900
</dd>
</div> </div>
<div class="flex"> <div class="flex">
<dt class="font-bold mr-2">Region:</dt> <dt class="font-bold mr-2">Region:</dt>
@ -148,7 +168,6 @@
</dl> </dl>
</section> </section>
</article> </article>
</main> </main>
</body> </body>
</html> </html>