Skip to content

Commit 6b8a30a

Browse files
aks8maks8m
committed
WIP: Finishes general scope.html layout
1 parent 7001473 commit 6b8a30a

File tree

1 file changed

+102
-62
lines changed

1 file changed

+102
-62
lines changed

‎src/main/resources/templates/scope.html‎

Lines changed: 102 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -13,74 +13,114 @@
1313
<div id="main-content" th:fragment="main-content" layout:fragment="main-content">
1414
<div class="row mt-3 mb-3">
1515
<div class="col-md-12">
16-
<div class="card">
17-
<div class="card-header">
18-
Create a new Scope
19-
</div>
20-
<div class="card-body">
21-
<form
22-
action="#"
23-
th:action="@{/scope}"
24-
th:object="${scopeForm}"
25-
method="post"
26-
hx-post="/scope"
27-
hx-target="#scopes-container"
28-
hx-swap="morph"
29-
hx-trigger="submit">
30-
<div class="mb-3">
31-
<div class="form-floating">
32-
<input th:field="*{name}" type="text" class="form-control" id="nameInput"
33-
placeholder="Default Name">
34-
<label for="nameInput">Name</label>
35-
</div>
36-
</div>
37-
<div class="mb-3">
38-
<div class="form-floating">
39-
<select th:field="*{selectedStampCoordinateId}" class="form-select" id="stampSelect"
40-
aria-label="Floating label select example">
41-
<option
42-
th:each="stampCoordinate : ${scopeForm.stampCoordinates()}"
43-
th:value="${#strings.listJoin(stampCoordinate.id(), ',')}"
44-
th:text="${stampCoordinate.name()}"></option>
45-
</select>
46-
<label for="stampSelect">Status Time Author Module Path (STAMP)</label>
47-
</div>
16+
<div class="accordion" id="createScopeAccordion">
17+
<div class="accordion-item">
18+
<h2 class="accordion-header">
19+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
20+
data-bs-target="#createScopeCollapse">
21+
Create a new Scope
22+
</button>
23+
</h2>
24+
<div id="createScopeCollapse" class="accordion-collapse collapse"
25+
data-bs-parent="#createScopeAccordion">
26+
<div class="accordion-body">
27+
<form
28+
action="#"
29+
th:action="@{/scope}"
30+
th:object="${scopeForm}"
31+
method="post"
32+
hx-post="/scope"
33+
hx-target="#scopes-container"
34+
hx-swap="morph"
35+
hx-trigger="submit">
36+
<div class="mb-3">
37+
<div class="form-floating">
38+
<input th:field="*{name}" type="text" class="form-control" id="nameInput"
39+
placeholder="Default Name" autocomplete="false">
40+
<label for="nameInput">Name</label>
41+
</div>
42+
</div>
43+
<div class="mb-3">
44+
<div class="form-floating">
45+
<select th:field="*{selectedStampCoordinateId}" class="form-select"
46+
id="stampSelect"
47+
aria-label="Floating label select example">
48+
<option
49+
th:each="stampCoordinate : ${scopeForm.stampCoordinates()}"
50+
th:value="${#strings.listJoin(stampCoordinate.id(), ',')}"
51+
th:text="${stampCoordinate.name()}"></option>
52+
</select>
53+
<label for="stampSelect">Status Time Author Module Path (STAMP)</label>
54+
</div>
55+
</div>
56+
<div class="mb-3">
57+
<div class="form-floating">
58+
<select th:field="*{selectedLanguageCoordinateId}" class="form-select"
59+
id="languageSelect">
60+
<option
61+
th:each="languageCoordinate : ${scopeForm.languageCoordinates()}"
62+
th:value="${#strings.listJoin(languageCoordinate.id(), ',')}"
63+
th:text="${languageCoordinate.name()}"></option>
64+
</select>
65+
<label for="stampSelect">Language</label>
66+
</div>
67+
</div>
68+
<div class="mb-3">
69+
<div class="form-floating">
70+
<select th:field="*{selectedNavigationCoordinateId}" class="form-select"
71+
id="navigationSelect">
72+
<option
73+
th:each="navigationCoordinate : ${scopeForm.navigationCoordinates()}"
74+
th:value="${#strings.listJoin(navigationCoordinate.id(), ',')}"
75+
th:text="${navigationCoordinate.name()}"></option>
76+
</select>
77+
<label for="navigationSelect">Navigation</label>
78+
</div>
79+
</div>
80+
<button type="submit" class="btn btn-primary">Create</button>
81+
</form>
4882
</div>
49-
<div class="mb-3">
50-
<div class="form-floating">
51-
<select th:field="*{selectedLanguageCoordinateId}" class="form-select"
52-
id="languageSelect">
53-
<option
54-
th:each="languageCoordinate : ${scopeForm.languageCoordinates()}"
55-
th:value="${#strings.listJoin(languageCoordinate.id(), ',')}"
56-
th:text="${languageCoordinate.name()}"></option>
57-
</select>
58-
<label for="stampSelect">Language</label>
59-
</div>
60-
</div>
61-
<div class="mb-3">
62-
<div class="form-floating">
63-
<select th:field="*{selectedNavigationCoordinateId}" class="form-select"
64-
id="navigationSelect">
65-
<option
66-
th:each="navigationCoordinate : ${scopeForm.navigationCoordinates()}"
67-
th:value="${#strings.listJoin(navigationCoordinate.id(), ',')}"
68-
th:text="${navigationCoordinate.name()}"></option>
69-
</select>
70-
<label for="navigationSelect">Navigation</label>
71-
</div>
72-
</div>
73-
<button type="submit" class="btn btn-primary">Create</button>
74-
</form>
83+
</div>
7584
</div>
7685
</div>
7786
</div>
78-
<div class="row mb-3">
79-
<table id="scopes-container" class="table table-striped table-hover">
80-
81-
</table>
87+
</div>
88+
<div class="row mt-3 mb-3">
89+
<div class="col-md-12">
90+
<div class="card">
91+
<div class="card-body">
92+
<table id="scopes-container" class="table table-striped table-hover">
93+
<thead>
94+
<tr>
95+
<th>Name</th>
96+
<th>STAMP</th>
97+
<th>Language</th>
98+
<th>Navigation</th>
99+
<th>Actions</th>
100+
</tr>
101+
</thead>
102+
<tbody>
103+
<tr th:each="scope : ${scopes}">
104+
<td th:text="${scope.name()}"></td>
105+
<td th:text="${scope.stampCoordinate().name()}"></td>
106+
<td th:text="${scope.languageCoordinate().name()}"></td>
107+
<td th:text="${scope.navigationCoordinate().name()}"></td>
108+
<td>
109+
<!-- <button class="btn btn-danger btn-sm"-->
110+
<!-- th:attr="hx-delete=@{/scope/{id}(id=${scope.id})}"-->
111+
<!-- hx-confirm="Are you sure you want to delete this scope?"-->
112+
<!-- hx-target="closest tr"-->
113+
<!-- hx-swap="outerHTML"><i class="bi bi-trash"></i>-->
114+
<!-- </button>-->
115+
</td>
116+
</tr>
117+
</tbody>
118+
</table>
119+
</div>
120+
</div>
82121
</div>
83122
</div>
123+
</div>
84124
</main>
85125
<footer>
86126
<div id="footer-content" layout:fragment="footer-content" th:replace="~{fragments/footer :: #footer-content}"></div>

0 commit comments

Comments
 (0)