feat: Updates rectangular size to be a modal form, some style updates to other views.

Sources/ViewController/Views/DuctSizing/DuctSizingView.swift

@@ -42,9 +42,9 @@ struct DuctSizingView: HTML, Sendable {
               th(.class("hidden xl:table-cell")) { "Round Size" }
               th { "Velocity" }
               th { "Final Size" }
-              th { "Height" }
-              th { "Width" }
               th { "Flex Size" }
+              th { "Width" }
+              th { "Height" }
             }
           }
           tbody {
@@ -70,7 +70,7 @@ struct DuctSizingView: HTML, Sendable {
     }
 
     var body: some HTML<HTMLTag.tr> {
-      tr(.class("text-lg"), .id(room.roomID.idString)) {
+      tr(.class("text-lg items-baseline"), .id(room.roomID.idString)) {
         td { room.registerID }
         td { room.roomName }
         td { Number(room.heatingLoad, digits: 0) }
@@ -89,25 +89,8 @@ struct DuctSizingView: HTML, Sendable {
             .attributes(.class("badge badge-outline badge-secondary text-xl  font-bold"))
         }
         td {
-          form(
-            .hx.post(route),
-            .hx.target("body"),
-            .hx.swap(.outerHTML)
-            // .hx.trigger(
-            //   .event(.change).from("#rectangularSize_\(room.roomID.idString)")
-            // )
-          ) {
-            input(.class("hidden"), .name("register"), .value("\(room.roomName.last!)"))
-            Row {
-              Input(
-                id: "height",
-                name: "height",
-                placeholder: "Height"
-              )
-              .attributes(.type(.number), .min("0"), .value(room.rectangularSize?.height))
-              SubmitButton()
-            }
-          }
+          Number(room.flexSize)
+            .attributes(.class("badge badge-outline badge-primary text-xl  font-bold"))
         }
         td {
           if let width = room.rectangularWidth {
@@ -115,8 +98,44 @@ struct DuctSizingView: HTML, Sendable {
           }
         }
         td {
-          Number(room.flexSize)
-            .attributes(.class("badge badge-outline badge-primary text-xl  font-bold"))
+          div(.class("flex justify-between items-center space-x-4")) {
+            div(.id("height_\(room.roomID.idString)"), .class("h-full my-auto")) {
+              if let height = room.rectangularSize?.height {
+                Number(height)
+              }
+            }
+            div {
+              div(.class("join")) {
+                // FIX: Delete rectangular size from room.
+                TrashButton()
+                  .attributes(.class("join-item btn-ghost"))
+                  .attributes(
+                    .hx.delete(
+                      route: .project(
+                        .detail(
+                          projectID,
+                          .ductSizing(
+                            .deleteRectangularSize(
+                              room.roomID,
+                              room.rectangularSize?.id ?? .init())
+                          )
+                        )
+                      )
+                    ),
+                    .hx.target("closest tr"),
+                    .hx.swap(.outerHTML),
+                    when: room.rectangularSize != nil
+                  )
+
+                EditButton()
+                  .attributes(
+                    .class("join-item btn-ghost text-success hover:text-white"),
+                    .showModal(id: RectangularSizeForm.id(room))
+                  )
+              }
+            }
+          }
+          RectangularSizeForm(projectID: projectID, room: room)
         }
       }
     }

Sources/ViewController/Views/DuctSizing/RectangularSizeForm.swift

@@ -0,0 +1,92 @@
+import Elementary
+import ElementaryHTMX
+import ManualDCore
+import Styleguide
+
+struct RectangularSizeForm: HTML, Sendable {
+
+  static func id(_ roomID: Room.ID? = nil) -> String {
+    let base = "rectangularSizeForm"
+    guard let roomID else { return base }
+    return "\(base)_\(roomID.idString)"
+  }
+
+  static func id(_ room: DuctSizing.RoomContainer) -> String {
+    return id(room.roomID)
+  }
+
+  let projectID: Project.ID
+  let roomID: Room.ID
+  let rectangularSizeID: DuctSizing.RectangularDuct.ID?
+  let register: Int
+  let height: Int?
+  let dismiss: Bool
+
+  init(
+    projectID: Project.ID,
+    roomID: Room.ID,
+    rectangularSizeID: DuctSizing.RectangularDuct.ID? = nil,
+    register: Int,
+    height: Int? = nil,
+    dismiss: Bool = true
+  ) {
+    self.projectID = projectID
+    self.roomID = roomID
+    self.rectangularSizeID = rectangularSizeID
+    self.register = register
+    self.height = height
+    self.dismiss = dismiss
+  }
+
+  init(
+    projectID: Project.ID,
+    room: DuctSizing.RoomContainer,
+    dismiss: Bool = true
+  ) {
+    let register =
+      room.rectangularSize?.register
+      ?? (Int("\(room.roomName.last!)") ?? 1)
+
+    self.init(
+      projectID: projectID,
+      roomID: room.roomID,
+      rectangularSizeID: room.rectangularSize?.id,
+      register: register,
+      height: room.rectangularSize?.height,
+      dismiss: dismiss
+    )
+  }
+
+  var route: String {
+    SiteRoute.View.router.path(
+      for: .project(.detail(projectID, .ductSizing(.index)))
+    )
+    .appendingPath("room")
+    .appendingPath(roomID)
+
+  }
+
+  var body: some HTML {
+    ModalForm(id: Self.id(roomID), dismiss: dismiss) {
+
+      h1(.class("text-lg pb-6")) { "Rectangular Size" }
+
+      form(
+        .class("space-y-4"),
+        .hx.post(route),
+        .hx.target("body"),
+        .hx.swap(.outerHTML)
+      ) {
+        input(.class("hidden"), .name("register"), .value(register))
+        input(.class("hidden"), .name("id"), .value(rectangularSizeID))
+
+        Input(id: "height", placeholder: "Height")
+          .attributes(.type(.number), .min("0"), .value(height), .required, .autofocus)
+
+        SubmitButton()
+          .attributes(.class("btn-block"))
+      }
+
+    }
+  }
+}