stability fixes, better template support

.gitignore

@@ -1,7 +1,10 @@
 app
+mikayla-moving
+
+tmp
+output.css
+
 *.swp
 *.test
 *.out
-tmp
+*.db
-output.css
-example.db

routes/items.go

@@ -202,7 +202,7 @@ func Post(r *http.Request) *web.Response {
 	return web.HTML(
 		http.StatusOK,
 		html,
-		"items/entity-row.html",
+		"items/entity-add-success.html",
 		item,
 		nil,
 	)

templates/components/add-category.html

@@ -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>

templates/components/add-packing-stage.html

@@ -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>

templates/components/edit-category.html

@@ -1,4 +1,4 @@
-<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>

templates/components/edit-packing-stage.html

@@ -1,4 +1,4 @@
-<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>

templates/items/entity-add-success.html

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

templates/items/entity-add.html

@@ -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
+      {{ template "components/add-packing-stage.html" }}
-        type="text"
+    </td>
-        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+    <td class="whitespace-nowrap px-6 py-4">
-        data-include-edit="NEW_ITEM_ROW"
+      {{ template "components/add-category.html" }}
-        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"
-      />
     </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

templates/items/entity-edit.html

@@ -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">
+    {{ template "components/edit-packing-stage.html" . }}
-      <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>
   </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">
+    {{ template "components/edit-category.html" . }}
-      <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>
   </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);
     }