Skip to content

Small polish #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Riggs333 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Small polish #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3b631e
Update to htmx 1.8.2, devtools to devOnly scope
Riggs333 Jan 5, 2023
ae3f60d
Refactoring templates
Riggs333 Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ dependencies {
implementation("org.jetbrains.kotlin:kotlin-reflect")
implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
implementation("io.github.wimdeblauwe:htmx-spring-boot-thymeleaf:2.0.0")
implementation("org.springframework.boot:spring-boot-devtools")
developmentOnly("org.springframework.boot:spring-boot-devtools")
Copy link
Owner

@holgergp holgergp Jan 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! Ich hatte doch schon die Dev-Tools! Oder muss ich da noch mehr machen? Erkennt intellij das automatisch? Oder macht Gradle da was?

(Das hatte bei mir bislang keinen merkbaren Einfluss)

implementation("org.webjars:webjars-locator:0.41")
implementation("org.webjars.npm:htmx.org:1.7.0")
implementation("org.webjars.npm:htmx.org:1.8.2")
implementation("org.webjars.npm:sortablejs:1.8.3")
testImplementation("org.springframework.boot:spring-boot-starter-test")
}
Expand Down
16 changes: 7 additions & 9 deletions src/main/resources/templates/fragments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,8 @@
<div class="position" th:classappend="${'rank' + teamStat.index}">
<div class="team">
<div th:text="${teamStat.index + 1}"></div>
<th:block th:if="${team.editMode == true}">
<div th:insert="fragments :: editTeam" th:remove="tag"/>
</th:block>
<th:block th:if="${team.editMode == false}">
<div th:insert="fragments :: showTeam" th:remove="tag"/>
</th:block>
<div th:if="${team.editMode}" th:insert="~{fragments :: editTeam}" th:remove="tag"/>
Copy link
Owner

@holgergp holgergp Jan 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hattest du das ausprobiert? Ich habe (irgendwo bei SO) gelesen, dass aus Gründen ein insert eine höhere Präzedenz als ein if hat. 🤷

<div th:if="${not team.editMode}" th:insert="~{fragments :: showTeam}" th:remove="tag"/>
<div class="editButton" hx:post="|/edit/${team.id}|" hx-swap="innerHTML" hx-target="#soccer-table">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -34,14 +30,16 @@

<div th:fragment="soccer-table" th:remove="tag">

<div th:insert="fragments :: position(${team})" th:each="team : ${soccerTable.positions}" th:remove="tag">
<div th:insert="~{fragments :: position(${team})}" th:each="team : ${soccerTable.positions}" th:remove="tag">
Copy link
Owner

@holgergp holgergp Jan 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! Tilde! Was tut das?

</div>

</div>

<div th:fragment="editTeam" th:remove="tag">
<input name='teamName' th:value="${team.name}" form="edit-soccer-table"/>
<input type='hidden' name='teamId' th:value="${team.id}" form="edit-soccer-table"/>
<form id="edit-soccer-table" hx-post="/saveSingleTeam" hx-swap="innerHTML" hx-target="#soccer-table">
Copy link
Owner

@holgergp holgergp Jan 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dann habe ich doch nested Forms, oder? Das wollte ich verhindern mit dem Auslagern nach oben.

<input name='teamName' th:value="${team.name}"/>
<input type='hidden' name='teamId' th:value="${team.id}"/>
</form>
</div>

<div th:fragment="showTeam" th:text="${team.name}">FC Wolfsburg</div>
13 changes: 9 additions & 4 deletions src/main/resources/templates/soccerTable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,17 @@
<body>
<div class="app">
<h1>Kickertabelle zum Selberstecken</h1>
<form id="edit-soccer-table" hx-post="/saveSingleTeam" hx-swap="innerHTML" hx-target="#soccer-table"></form>

<form id="soccer-table" class="soccer-table sortable" hx-post="/soccerTable" hx-trigger="end" hx-swap="innerHTML"
<form id="soccer-table"
class="soccer-table sortable"
hx-post="/soccerTable"
hx-trigger="end"
Copy link
Owner

@holgergp holgergp Jan 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jo! Nice!
Gibt es prettier drüben bei euch? Ok Fangfrage! 😁

hx-swap="innerHTML"
th:remove="all-but-first">

<div th:insert="fragments :: position(${team})" th:each="team : ${soccerTable.positions}" th:remove="tag">
<div th:insert="~{fragments :: position(${team})}"
th:each="team : ${soccerTable.positions}"
th:remove="tag">
</div>
</form>
</div>
Expand All @@ -34,4 +39,4 @@ <h1>Kickertabelle zum Selberstecken</h1>
</script>


</html>
</html>