ducky/htmx-go-todo
1
0
Fork 0
mirror of https://github.com/ducky-labs/htmx-go-todo.git synced 2026-02-04 06:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
Emanuel Turis
2023-10-20 07:46:32 +03:00
parent ccb0c914e5
commit d1f37d7b0e
12 changed files with 607 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
templates/count.html Normal file
View File

@@ -0,0 +1,15 @@
{{ define "TotalCount" }}
<p id="total" {{ if .SwapOOB }}hx-swap-oob="innerHTML:#total"{{ end }}>
Total tasks:
{{ .Count }}
</p>
{{ end }}
{{ define "CompletedCount" }}
<p
id="completed"
{{ if .SwapOOB }}hx-swap-oob="innerHTML:#completed"{{ end }}
>
Completed tasks: {{ .Count }}
</p>
{{ end }}

98
templates/form.html Normal file
View File

@@ -0,0 +1,98 @@
{{ define "Form" }}
<form hx-post="/tasks" hx-swap="outerHTML">
<input
id="title"
name="title"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-5"
/>
<button
type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none mt-2.5 text-center inline-flex items-center"
>
Add task
</button>
</form>
{{ end }}
{{ define "InnerItem" }}
<div
id="task-{{ .Item.ID }}"
class="flex items-center justify-between bg-gray-100 rounded-lg px-4 py-2.5 transition"
>
<div class="flex items-center space-x-2.5">
<button
type="button"
class="cursor-move text-gray-500 hover:text-gray-700 handle"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 9h16.5m-16.5 6.75h16.5"
/>
</svg>
</button>
<p class="title">{{ .Item.Title }}</p>
</div>
<div class="flex items-center space-x-2.5">
<button type="button" class="text-red-500 hover:text-red-700">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<button type="button" class="edit text-blue-500 hover:text-blue-700">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/>
</svg>
</button>
<input
type="checkbox"
hx-put="/tasks/{{ .Item.ID }}/toggle"
{{ if .Item.Completed }}checked{{ end }}
class="w-5 h-5 text-blue-700 bg-white border-gray-300 rounded focus:ring-blue-600"
/>
</div>
</div>
{{ end }}
{{ define "Item" }}
{{ if .SwapOOB }}
<div hx-swap-oob="beforeend:#items">
{{ template "InnerItem" . }}
</div>
{{ else }}
{{ template "InnerItem" . }}
{{ end }}
{{ end }}

16
templates/index.html
View File

@@ -9,7 +9,21 @@
<script src="/static/htmx.js" type="text/javascript"></script>
</head>
<body>
<p class="text-5xl">Hello, world!</p>
<div class="max-w-screen-md mx-auto mt-8">
<div class="flex justify-between items-center">
{{ template "TotalCount" dict "Count" .Count "SwapOOB" false }}
{{ template "CompletedCount" dict "Count" .CompletedCount "SwapOOB" false }}
</div>
{{ template "Form" }}
<div id="items" class="space-y-2.5 mt-4">
{{ range .Items }}
{{ template "Item" dict "Item" . "SwapOOB" false }}
{{ end }}
</div>
</div>
</body>
</html>
{{ end }}