WIP Adding HTMX for a bit of excitement

Signed-off-by: Paul Balogh <[email protected]>
weesvc · May 22, 2024 · 863208c · 863208c
1 parent 0570d9e
commit 863208c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/internal/server/assets/htmx.min.js b/internal/server/assets/htmx.min.js
diff --git a/internal/server/assets/wee-stylee.css b/internal/server/assets/wee-stylee.css
@@ -0,0 +1,4 @@
+tr.htmx-swapping td {
+    opacity: 0;
+    transition: opacity 1s ease-out;
+}
diff --git a/internal/server/views/layout.templ b/internal/server/views/layout.templ
@@ -10,6 +10,8 @@ templ Layout(content templ.Component) {
         <title>WeeSVC - A Tiny Server</title>
         <link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet" />
         <script src="/assets/dist/js/bootstrap.min.js"></script>
+        <script src="/assets/htmx.min.js"></script>
+        <link href="/assets/wee-stylee.css" rel="stylesheet" />
 	</head>
 	<body>
         @navbar()

diff --git a/internal/server/views/places.templ b/internal/server/views/places.templ
@@ -18,7 +18,7 @@ templ Places(places []*model.Place) {
             <th scope="col"></th>
         </tr>
         </thead>
-        <tbody>
+        <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
     for _, place := range places {
         <tr>
             <th scope="row">{ fmt.Sprintf("%d", place.ID) }</th>
@@ -28,6 +28,27 @@ templ Places(places []*model.Place) {
             <td>{ fmt.Sprintf("%f", place.Longitude) }</td>
             <td>
                 <a class="btn btn-dark" href={ templ.URL(fmt.Sprintf("https://google.com/search?q=%f,%f", place.Latitude, place.Longitude)) } target="_blank">Visit</a>
+                <button class="btn btn-danger" hx-delete={ fmt.Sprintf("/api/places/%d", place.ID) }>Delete</button>
+                <button class="btn btn-danger"
+                    hx-get={ fmt.Sprintf("/api/places/%d", place.ID) }
+                    hx-trigger="edit"
+                    onClick="let editing = document.querySelector('.editing')
+                         if(editing) {
+                           Swal.fire({title: 'Already Editing',
+                                      showCancelButton: true,
+                                      confirmButtonText: 'Yep, Edit This Row!',
+                                      text:'Hey!  You are already editing a row!  Do you want to cancel that edit and continue?'})
+                           .then((result) => {
+                                if(result.isConfirmed) {
+                                   htmx.trigger(editing, 'cancel')
+                                   htmx.trigger(this, 'edit')
+                                }
+                            })
+                         } else {
+                            htmx.trigger(this, 'edit')
+                         }">
+          Edit
+        </button>
             </td>
         </tr>
     }