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

Public/css/output.css

@@ -2206,9 +2206,6 @@
   .collapse {
     visibility: collapse;
   }
-  .invisible {
-    visibility: hidden;
-  }
   .visible {
     visibility: visible;
   }
@@ -5372,6 +5369,9 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .my-auto {
+    margin-block: auto;
+  }
   .label {
     @layer daisyui.l1.l2.l3 {
       display: inline-flex;
@@ -5578,12 +5578,6 @@
   .ms-4 {
     margin-inline-start: calc(var(--spacing) * 4);
   }
-  .ms-6 {
-    margin-inline-start: calc(var(--spacing) * 6);
-  }
-  .ms-8 {
-    margin-inline-start: calc(var(--spacing) * 8);
-  }
   .me-4 {
     margin-inline-end: calc(var(--spacing) * 4);
   }
@@ -5626,6 +5620,15 @@
       }
     }
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -6760,9 +6763,6 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
   .grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
@@ -7826,9 +7826,6 @@
   .ps-2 {
     padding-inline-start: calc(var(--spacing) * 2);
   }
-  .ps-8 {
-    padding-inline-start: calc(var(--spacing) * 8);
-  }
   .file-input-xl {
     @layer daisyui.l1.l2 {
       padding-inline-end: calc(0.25rem * 6);
@@ -7843,6 +7840,9 @@
   .pe-2 {
     padding-inline-end: calc(var(--spacing) * 2);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -7852,6 +7852,9 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .align-baseline {
+    vertical-align: baseline;
+  }
   .file-input-lg {
     @layer daisyui.l1.l2 {
       --size: calc(var(--size-field, 0.25rem) * 12);
@@ -9377,6 +9380,13 @@
       }
     }
   }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
   .focus\:outline {
     &:focus {
       outline-style: var(--tw-outline-style);
@@ -9393,11 +9403,6 @@
       outline-color: var(--color-indigo-600);
     }
   }
-  .md\:grid-cols-1 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -9456,26 +9461,6 @@
       }
     }
   }
-  .lg\:visible {
-    @media (width >= 64rem) {
-      visibility: visible;
-    }
-  }
-  .lg\:block {
-    @media (width >= 64rem) {
-      display: block;
-    }
-  }
-  .lg\:inline-block {
-    @media (width >= 64rem) {
-      display: inline-block;
-    }
-  }
-  .lg\:table-cell {
-    @media (width >= 64rem) {
-      display: table-cell;
-    }
-  }
   .lg\:grid-cols-2 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -9486,26 +9471,11 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .xl\:visible {
-    @media (width >= 80rem) {
-      visibility: visible;
-    }
-  }
   .xl\:table-cell {
     @media (width >= 80rem) {
       display: table-cell;
     }
   }
-  .xl\:grid-cols-2 {
-    @media (width >= 80rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-3 {
-    @media (width >= 80rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
   .\32 xl\:table-cell {
     @media (width >= 96rem) {
       display: table-cell;

Sources/DatabaseClient/Rooms.swift

@@ -9,6 +9,8 @@ extension DatabaseClient {
   public struct Rooms: Sendable {
     public var create: @Sendable (Room.Create) async throws -> Room
     public var delete: @Sendable (Room.ID) async throws -> Void
+    public var deleteRectangularSize:
+      @Sendable (Room.ID, DuctSizing.RectangularDuct.ID) async throws -> Room
     public var get: @Sendable (Room.ID) async throws -> Room?
     public var fetch: @Sendable (Project.ID) async throws -> [Room]
     public var update: @Sendable (Room.ID, Room.Update) async throws -> Room
@@ -31,6 +33,18 @@ extension DatabaseClient.Rooms: TestDependencyKey {
         }
         try await model.delete(on: database)
       },
+      deleteRectangularSize: { roomID, rectangularDuctID in
+        guard let model = try await RoomModel.find(roomID, on: database) else {
+          throw NotFoundError()
+        }
+        model.rectangularSizes?.removeAll {
+          $0.id == rectangularDuctID
+        }
+        if model.hasChanges {
+          try await model.save(on: database)
+        }
+        return try model.toDTO()
+      },
       get: { id in
         try await RoomModel.find(id, on: database).map { try $0.toDTO() }
       },

Sources/ManualDCore/DuctSizing.swift

@@ -3,15 +3,18 @@ import Foundation
 
 public enum DuctSizing {
 
-  public struct RectangularDuct: Codable, Equatable, Sendable {
+  public struct RectangularDuct: Codable, Equatable, Identifiable, Sendable {
 
+    public let id: UUID
     public let register: Int?
     public let height: Int
 
     public init(
+      id: UUID = .init(),
       register: Int? = nil,
       height: Int,
     ) {
+      self.id = id
       self.register = register
       self.height = height
     }

Sources/ManualDCore/Routes/ViewRoute.swift

@@ -677,6 +677,7 @@ extension SiteRoute.View.ProjectRoute {
 
   public enum DuctSizingRoute: Equatable, Sendable {
     case index
+    case deleteRectangularSize(Room.ID, DuctSizing.RectangularDuct.ID)
     case roomRectangularForm(Room.ID, RoomRectangularForm)
 
     static let rootPath = "duct-sizing"
@@ -686,6 +687,17 @@ extension SiteRoute.View.ProjectRoute {
         Path { rootPath }
         Method.get
       }
+      Route(.case(Self.deleteRectangularSize)) {
+        Path {
+          rootPath
+          "room"
+          Room.ID.parser()
+        }
+        Method.delete
+        Query {
+          Field("rectangularSize") { DuctSizing.RectangularDuct.ID.parser() }
+        }
+      }
       Route(.case(Self.roomRectangularForm)) {
         Path {
           rootPath

Sources/Styleguide/Buttons.swift

@@ -94,7 +94,7 @@ public struct TrashButton: HTML, Sendable {
   public var body: some HTML<HTMLTag.button> {
     button(
       .type(.button),
-      .class("btn btn-error btn-circle dark:text-white")
+      .class("btn btn-error")
     ) {
       SVG(.trash)
     }

Sources/Styleguide/ElementaryExtensions.swift

@@ -1,4 +1,5 @@
 import Elementary
+import Foundation
 import ManualDCore
 
 extension HTMLAttribute where Tag: HTMLTrait.Attributes.href {
@@ -28,6 +29,10 @@ extension HTMLAttribute where Tag == HTMLTag.input {
   public static func value(_ double: Double?) -> Self {
     value(double == nil ? "" : "\(double!)")
   }
+
+  public static func value(_ uuid: UUID?) -> Self {
+    value(uuid?.uuidString ?? "")
+  }
 }
 
 extension HTMLAttribute where Tag == HTMLTag.button {

Sources/Styleguide/Tooltip.swift

@@ -0,0 +1,24 @@
+import Elementary
+
+public struct Tooltip<Inner: HTML & Sendable>: HTML, Sendable {
+
+  let tooltip: String
+  let inner: Inner
+
+  public init(
+    _ tooltip: String,
+    @HTMLBuilder inner: () -> Inner
+  ) {
+    self.tooltip = tooltip
+    self.inner = inner()
+  }
+
+  public var body: some HTML<HTMLTag.div> {
+    div(
+      .class("tooltip"),
+      .data("tip", value: tooltip)
+    ) {
+      inner
+    }
+  }
+}

Sources/ViewController/Live.swift

@@ -350,6 +350,16 @@ extension SiteRoute.View.ProjectRoute.DuctSizingRoute {
       return request.view {
         ProjectView(projectID: projectID, activeTab: .ductSizing, logger: request.logger)
       }
+
+    case .deleteRectangularSize(let roomID, let rectangularSizeID):
+      let room = try await database.rooms.deleteRectangularSize(roomID, rectangularSizeID)
+      let container = try await manualD.calculate(
+        rooms: [room],
+        designFrictionRateResult: database.designFrictionRate(projectID: projectID),
+        projectSHR: database.projects.getSensibleHeatRatio(projectID)
+      ).first!
+      return DuctSizingView.RoomRow(projectID: projectID, room: container)
+
     case .roomRectangularForm(let roomID, let form):
       let _ = try await database.rooms.update(
         roomID,

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(
+          Number(room.flexSize)
-            .hx.post(route),
+            .attributes(.class("badge badge-outline badge-primary text-xl  font-bold"))
-            .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()
-            }
-          }
         }
         td {
           if let width = room.rectangularWidth {
@@ -115,8 +98,44 @@ struct DuctSizingView: HTML, Sendable {
           }
         }
         td {
-          Number(room.flexSize)
+          div(.class("flex justify-between items-center space-x-4")) {
-            .attributes(.class("badge badge-outline badge-primary text-xl  font-bold"))
+            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"))
+      }
+
+    }
+  }
+}

Sources/ViewController/Views/Rooms/RoomsView.swift

@@ -16,15 +16,15 @@ struct RoomsView: HTML, Sendable {
     div {
       Row {
         h1(.class("text-2xl font-bold")) { "Room Loads" }
-        div(
+        // div(
-          .class("tooltip tooltip-left"),
+        //   .class("tooltip tooltip-left"),
-          .data("tip", value: "Add room")
+        //   .data("tip", value: "Add room")
-        ) {
+        // ) {
-          div(.class("flex me-4")) {
+        //   div(.class("flex me-4")) {
-            PlusButton()
+        //     PlusButton()
-              .attributes(.showModal(id: RoomForm.id()))
+        //       .attributes(.showModal(id: RoomForm.id()))
-          }
+        //   }
-        }
+        // }
       }
       .attributes(.class("pb-6"))
 
@@ -54,7 +54,18 @@ struct RoomsView: HTML, Sendable {
               th { Label("Cooling Total") }
               th { Label("Cooling Sensible") }
               th { Label("Register Count") }
-              th {}
+              th {
+                div(.class("flex justify-end")) {
+                  Tooltip("Add Room") {
+                    PlusButton()
+                      .attributes(
+                        .class("mx-auto"),
+                        .showModal(id: RoomForm.id())
+                      )
+                  }
+                  .attributes(.class("tooltip-left"))
+                }
+              }
             }
           }
           tbody {
@@ -123,20 +134,27 @@ struct RoomsView: HTML, Sendable {
         td {
           div(.class("flex justify-end")) {
             div(.class("join")) {
+              Tooltip("Delete room") {
                 TrashButton()
                   .attributes(
-                  .class("join-item"),
+                    .class("join-item btn-ghost"),
                     .hx.delete(
                       route: .project(.detail(room.projectID, .rooms(.delete(id: room.id))))),
                     .hx.target("closest tr"),
                     .hx.confirm("Are you sure?")
                   )
+              }
+              .attributes(.class("tooltip-bottom"))
+
+              Tooltip("Edit room") {
                 EditButton()
                   .attributes(
-                  .class("join-item"),
+                    .class("join-item btn-ghost"),
                     .showModal(id: RoomForm.id(room))
                   )
               }
+              .attributes(.class("tooltip-bottom"))
+            }
           }
           RoomForm(
             dismiss: true,

input.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@source not "./tailwindcss";
+@source not "./daisyui{,*}.mjs";
+
+@plugin "./daisyui.mjs";