initial commit

2024-09-18 21:11:50 +02:00
parent 5d46262520
commit 74dd3e08df
7 changed files with 364 additions and 2 deletions
--- a/views/index.html
+++ b/views/index.html
@ -0,0 +1,83 @@
+{{ block "index" . }}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://unpkg.com/htmx.org/dist/htmx.min.js"></script>
+    <title></title>
+    <link href="/css/index.css" rel="stylesheet">
+  </head>
+  <body>
+      {{ template "form" .Form }}
+      <hr />
+      {{ template "display" .Data }}
+
+      <script>
+        // allow 422 responses to swap as we are using this as a signal that
+        // a form was submitted with bad data and want to rerender with the errors
+        document.addEventListener("DOMContentLoaded", event => {
+          document.body.addEventListener("htmx:beforeSwap", evt => {
+            if (evt.detail.xhr.status === 422) {
+              evt.detail.shouldSwap = true;
+              evt.detail.isError = false;
+            }
+          })
+        })
+
+      </script>
+  </body>
+</html>
+{{ end }}
+
+{{ block "form" . }}
+<form hx-swap="outerHTML" hx-post="/contacts">
+  name: <input 
+    {{ if .Values.name }} value="{{ .Values.name }}" {{ end }} 
+    type="text" name="name" />
+  email: <input
+    {{ if .Values.email }} value="{{ .Values.email }}" {{ end }} 
+    type="email" name="email" />
+
+    {{ if .Errors.email }}
+      <span style="color: red">{{ .Errors.email }}</span>
+    {{ end }}
+  <button>Create contact</button>
+</form>
+{{ end }}
+
+{{ block "display" . }}
+<div id="contacts" style="display: flex; flex-direction: column">
+  {{ range .Contacts }}
+    {{ template "contact" . }}
+  {{ end }}
+</div>
+{{ end }}
+
+{{ block "contact" . }}
+  <div class="contact" id="contact-{{ .Id }}" style="display: flex;">
+    <div style="width: 1rem; cursor: pointer;"
+      hx-indicator="#contact-{{ .Id }}-indicator" 
+      hx-target="#contact-{{ .Id }}" 
+      hx-swap="outerHTML swap:500ms" 
+      hx-delete="/contacts/{{ .Id }}" 
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path fill="none" d="M0 0h24v24H0z"/>
+        <path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
+      </svg>
+    </div>
+    Name: <span>{{ .Name }}</span>
+    Email: <span>{{ .Email }}</span>
+
+    <div id="contact-{{ .Id }}-indicator" class="htmx-indicator">
+      <img src="/images/bars.svg" alt="loading" style="width: 1rem;" />
+    </div>
+  </div>
+{{ end }}
+
+{{ block "oob-contact" . }}
+  <div id="contacts" hx-swap-oob="afterbegin">
+    {{ template "contact" . }}
+  </div>
+{{ end }}