innocuous-symmetry/go-htmx-tailwind-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stability fixes, better template support

Browse Source
This commit is contained in:
Mikayla Dobson
2024-03-16 14:41:36 +00:00
parent 066e6d2a09
commit 994389b8ef
9 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/components/add-category.html Normal file
View File

@@ -0,0 +1,8 @@
<select class="data-input-NEW_ITEM_ROW" id="category-selector-NEW_ITEM_ROW" data-include-edit="NEW_ITEM_ROW" name="category">
<option value="0">Bedroom</option>
<option value="1">Bathroom</option>
<option value="2">Kitchen</option>
<option value="3">Office</option>
<option value="4">Living Room</option>
<option value="5">Other</option>
</select>

7
templates/components/add-packing-stage.html Normal file
View File

@@ -0,0 +1,7 @@
<select class="data-input-NEW_ITEM_ROW" id="packing-stage-selector-NEW_ITEM_ROW" data-include-edit="NEW_ITEM_ROW" name="stage">
<option value="0">Essentials</option>
<option value="1">Stage One</option>
<option value="2">Stage Two</option>
<option value="3">Stage Three</option>
<option value="4">Determine Later</option>
</select>

4
templates/components/edit-category.html
View File

@@ -1,8 +1,8 @@
<select class="category-selector" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
<select class="data-input-{{.ID}}" id="category-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
<option value="0">Bedroom</option>
<option value="1">Bathroom</option>
<option value="2">Kitchen</option>
<option value="3">Office</option>
<option value="4">Living Room</option>
<option value="5">Other</option>
</select>
</select>

4
templates/components/edit-packing-stage.html
View File

@@ -1,7 +1,7 @@
<select class="packing-stage-selector" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
<select class="data-input-{{.ID}}" id="packing-stage-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
<option value="0">Essentials</option>
<option value="1">Stage One</option>
<option value="2">Stage Two</option>
<option value="3">Stage Three</option>
<option value="4">Determine Later</option>
</select>
</select>

2
templates/items/entity-add-success.html Normal file
View File

@@ -0,0 +1,2 @@
{{ template "items/entity-row.html" . }}
{{ template "items/entity-add.html" }}

24
templates/items/entity-add.html
View File

@@ -5,6 +5,7 @@
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
placeholder="Item name"
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="NEW_ITEM_ROW"
@@ -12,24 +13,15 @@
/>
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="NEW_ITEM_ROW"
name="stage"
/>
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="NEW_ITEM_ROW"
name="category"
/>
{{ template "components/add-packing-stage.html" }}
</td>
<td class="whitespace-nowrap px-6 py-4">
{{ template "components/add-category.html" }}
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
placeholder="Short description"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="NEW_ITEM_ROW"
name="description"
@@ -38,6 +30,7 @@
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
placeholder="Notes"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="NEW_ITEM_ROW"
name="notes"
@@ -45,11 +38,12 @@
<td class="whitespace-nowrap px-1 py-1">
<a
id="add-new-item-button-NEW_ITEM_ROW"
hx-post="/items/add"
hx-target="#datarow-NEW_ITEM_ROW"
hx-swap="outerHTML"
hx-indicator="#processing"
hx-include="input[data-include-edit='NEW_ITEM_ROW']"
hx-include="[data-include-edit='NEW_ITEM_ROW']"
class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
href=""
>Add</a

28
templates/items/entity-edit.html
View File

@@ -13,23 +13,10 @@
/>
</td>
<td class="whitespace-nowrap px-6 py-4">
<select class="data-input-{{.ID}}" id="packing-stage-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
<option value="0">Essentials</option>
<option value="1">Stage One</option>
<option value="2">Stage Two</option>
<option value="3">Stage Three</option>
<option value="4">Determine Later</option>
</select>
{{ template "components/edit-packing-stage.html" . }}
</td>
<td class="whitespace-nowrap px-6 py-4">
<select class="data-input-{{.ID}}" id="category-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
<option value="0">Bedroom</option>
<option value="1">Bathroom</option>
<option value="2">Kitchen</option>
<option value="3">Office</option>
<option value="4">Living Room</option>
<option value="5">Other</option>
</select>
{{ template "components/edit-category.html" . }}
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
@@ -51,6 +38,7 @@
<td class="whitespace-nowrap px-1 py-1">
<a
id="datarow-{{.ID}}-save"
hx-put="/items/save/{{.ID}}"
hx-target="#datarow-{{.ID}}"
hx-swap="outerHTML"
@@ -73,6 +61,16 @@
>
</td>
<script>
window.addEventListener("keydown", (e) => {
/** @typedef KeyboardEvent */
const target = e.target;
if (e.target.key == "Enter") {
const a = document.getElementById("datarow-{{.ID}}-save");
void a.click();
}
})
document.getElementById("category-selector-{{.ID}}").onchange = (e) => {
console.log(e.target.value);
}