feat: Updates form routes and database routes to use id's in the url path.

Sources/ViewController/Views/ComponentLoss/ComponentLossForm.swift

@@ -4,38 +4,62 @@ import ManualDCore
 import Styleguide
 
 struct ComponentLossForm: HTML, Sendable {
+
+  static func id(_ componentLoss: ComponentPressureLoss? = nil) -> String {
+    let base = "componentLossForm"
+    guard let componentLoss else { return base }
+    return "\(base)_\(componentLoss.id.idString)"
+  }
+
   let dismiss: Bool
   let projectID: Project.ID
+  let componentLoss: ComponentPressureLoss?
+
+  var route: String {
+    SiteRoute.View.router.path(
+      for: .project(.detail(projectID, .componentLoss(.index)))
+    )
+    .appendingPath(componentLoss?.id)
+    // if let componentLoss {
+    //   return baseRoute.appending("/\(componentLoss.id)")
+    // }
+    // return baseRoute
+  }
 
   var body: some HTML {
-    ModalForm(id: "componentLossForm", dismiss: dismiss) {
+    ModalForm(id: Self.id(componentLoss), dismiss: dismiss) {
       h1(.class("text-2xl font-bold")) { "Component Loss" }
-      form(.class("space-y-4 p-4")) {
+      form(
+        .class("space-y-4 p-4"),
+        componentLoss == nil
+          ? .hx.post(route)
+          : .hx.patch(route),
+        .hx.target("body"),
+        .hx.swap(.outerHTML)
+      ) {
+
+        if let componentLoss {
+          input(.class("hidden"), .name("id"), .value("\(componentLoss.id)"))
+        }
+
+        input(.class("hidden"), .name("projectID"), .value("\(projectID)"))
+
         div {
           label(.for("name")) { "Name" }
           Input(id: "name", placeholder: "Name")
-            .attributes(.type(.text), .required, .autofocus)
+            .attributes(.type(.text), .required, .autofocus, .value(componentLoss?.name))
         }
         div {
           label(.for("value")) { "Value" }
-          Input(id: "name", placeholder: "Pressure loss")
-            .attributes(.type(.number), .min("0"), .max("1"), .step("0.1"), .required)
-        }
-        Row {
-          div {}
-          div {
-            CancelButton()
-              .attributes(
-                .hx.get(
-                  route: .project(
-                    .detail(projectID, .frictionRate(.form(.componentPressureLoss, dismiss: true))))
-                ),
-                .hx.target("#componentLossForm"),
-                .hx.swap(.outerHTML)
-              )
-            SubmitButton()
-          }
+          Input(id: "value", placeholder: "Pressure loss")
+            .attributes(
+              .type(.number), .min("0.03"), .max("1.0"), .step("0.1"), .required,
+              .value(componentLoss?.value)
+            )
         }
+
+        SubmitButton()
+          .attributes(.class("btn-block"))
       }
     }
   }

Sources/ViewController/Views/ComponentLoss/ComponentLossesView.swift

@@ -23,33 +23,71 @@ struct ComponentPressureLossesView: HTML, Sendable {
       )
     ) {
       Row {
-        h1(.class("text-2xl font-bold")) { "Component Pressure Losses" }
+        div(.class("flex space-x-4 items-center")) {
+          h1(.class("text-2xl font-bold")) { "Component Pressure Losses" }
+          div(.class("flex text-primary space-x-2 items-baseline")) {
+            Number(total)
+              .attributes(.class("text-xl font-bold badge badge-outline badge-primary"))
+            span(.class("text-sm italic")) { "Total" }
+          }
+        }
         PlusButton()
           .attributes(
-            .hx.get(
-              route: .project(
-                .detail(projectID, .frictionRate(.form(.componentPressureLoss, dismiss: false))))
-            ),
-            .hx.target("#componentLossForm"),
-            .hx.swap(.outerHTML)
+            .showModal(id: ComponentLossForm.id())
           )
       }
 
-      for row in componentPressureLosses {
-        Row {
-          Label { row.name }
-          Number(row.value)
+      table(.class("table table-zebra")) {
+        thead {
+          tr(.class("text-xl font-bold")) {
+            th { "Name" }
+            th { "Value" }
+            th {}
+          }
+        }
+        tbody {
+          for row in componentPressureLosses {
+            TableRow(row: row)
+          }
         }
-        .attributes(.class("border-b border-gray-200"))
-      }
 
-      Row {
-        Label { "Total" }
-        Number(total)
-          .attributes(.class("text-xl font-bold"))
       }
     }
-    ComponentLossForm(dismiss: true, projectID: projectID)
+    ComponentLossForm(dismiss: true, projectID: projectID, componentLoss: nil)
   }
 
+  struct TableRow: HTML, Sendable {
+    let row: ComponentPressureLoss
+
+    var body: some HTML<HTMLTag.tr> {
+      tr(.class("text-lg")) {
+        td { row.name }
+        td { Number(row.value) }
+        td {
+          div(.class("flex join items-end justify-end mx-auto")) {
+            TrashButton()
+              .attributes(
+                .class("join-item"),
+                .hx.delete(
+                  route: .project(
+                    .detail(row.projectID, .componentLoss(.delete(row.id)))
+                  )
+                ),
+                .hx.target("body"),
+                .hx.swap(.outerHTML),
+                .hx.confirm("Are your sure?")
+
+              )
+            EditButton()
+              .attributes(
+                .class("join-item"),
+                .showModal(id: ComponentLossForm.id(row))
+              )
+          }
+
+          ComponentLossForm(dismiss: true, projectID: row.projectID, componentLoss: row)
+        }
+      }
+    }
+  }
 }