feat: Better modal form using dialog, some forms still need updated to use it effectively.

Public/css/output.css

@@ -4227,9 +4227,15 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-40 {
     top: calc(var(--spacing) * 40);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .dock-sm {
     @layer daisyui.l1.l2 {
       height: calc(0.25rem * 14);
@@ -5270,6 +5276,9 @@
       }
     }
   }
+  .mx-6 {
+    margin-inline: calc(var(--spacing) * 6);
+  }
   .mx-10 {
     margin-inline: calc(var(--spacing) * 10);
   }
@@ -5604,6 +5613,9 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .breadcrumbs {
     @layer daisyui.l1.l2.l3 {
       max-width: 100%;
@@ -5680,6 +5692,9 @@
       font-weight: 600;
     }
   }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .carousel-item {
     @layer daisyui.l1.l2.l3 {
       box-sizing: content-box;
@@ -6522,6 +6537,9 @@
       width: calc(var(--size-selector, 0.25rem) * 4);
     }
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -7768,6 +7786,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -7777,6 +7798,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
@@ -7797,6 +7821,9 @@
   .pe-2 {
     padding-inline-end: calc(var(--spacing) * 2);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }

Sources/DatabaseClient/Rooms.swift

@@ -63,7 +63,8 @@ extension Room.Create {
     return .init(
       name: name,
       heatingLoad: heatingLoad,
-      coolingLoad: coolingLoad,
+      coolingTotal: coolingTotal,
+      coolingSensible: coolingSensible,
       registerCount: registerCount,
       projectID: projectID
     )
@@ -76,9 +77,14 @@ extension Room.Create {
     guard heatingLoad >= 0 else {
       throw ValidationError("Room heating load should not be less than 0.")
     }
-    guard coolingLoad >= 0 else {
+    guard coolingTotal >= 0 else {
       throw ValidationError("Room cooling total should not be less than 0.")
     }
+    if let coolingSensible {
+      guard coolingSensible >= 0 else {
+        throw ValidationError("Room cooling sensible should not be less than 0.")
+      }
+    }
     guard registerCount >= 1 else {
       throw ValidationError("Room cooling sensible should not be less than 1.")
     }
@@ -98,11 +104,16 @@ extension Room.Update {
         throw ValidationError("Room heating load should not be less than 0.")
       }
     }
-    if let coolingLoad {
+    if let coolingTotal {
-      guard coolingLoad >= 0 else {
+      guard coolingTotal >= 0 else {
         throw ValidationError("Room cooling total should not be less than 0.")
       }
     }
+    if let coolingSensible {
+      guard coolingSensible >= 0 else {
+        throw ValidationError("Room cooling sensible should not be less than 0.")
+      }
+    }
     if let registerCount {
       guard registerCount >= 1 else {
         throw ValidationError("Room cooling sensible should not be less than 1.")
@@ -120,7 +131,8 @@ extension Room {
         .id()
         .field("name", .string, .required)
         .field("heatingLoad", .double, .required)
-        .field("coolingLoad", .double, .required)
+        .field("coolingTotal", .double, .required)
+        .field("coolingSensible", .double)
         .field("registerCount", .int8, .required)
         .field("createdAt", .datetime)
         .field("updatedAt", .datetime)
@@ -150,8 +162,11 @@ final class RoomModel: Model, @unchecked Sendable {
   @Field(key: "heatingLoad")
   var heatingLoad: Double
 
-  @Field(key: "coolingLoad")
+  @Field(key: "coolingTotal")
-  var coolingLoad: Double
+  var coolingTotal: Double
+
+  @Field(key: "coolingSensible")
+  var coolingSensible: Double?
 
   @Field(key: "registerCount")
   var registerCount: Int
@@ -171,7 +186,8 @@ final class RoomModel: Model, @unchecked Sendable {
     id: UUID? = nil,
     name: String,
     heatingLoad: Double,
-    coolingLoad: Double,
+    coolingTotal: Double,
+    coolingSensible: Double? = nil,
     registerCount: Int,
     createdAt: Date? = nil,
     updatedAt: Date? = nil,
@@ -180,7 +196,8 @@ final class RoomModel: Model, @unchecked Sendable {
     self.id = id
     self.name = name
     self.heatingLoad = heatingLoad
-    self.coolingLoad = coolingLoad
+    self.coolingTotal = coolingTotal
+    self.coolingSensible = coolingSensible
     self.registerCount = registerCount
     self.createdAt = createdAt
     self.updatedAt = updatedAt
@@ -193,7 +210,8 @@ final class RoomModel: Model, @unchecked Sendable {
       projectID: $project.id,
       name: name,
       heatingLoad: heatingLoad,
-      coolingLoad: coolingLoad,
+      coolingTotal: coolingTotal,
+      coolingSensible: coolingSensible,
       registerCount: registerCount,
       createdAt: createdAt!,
       updatedAt: updatedAt!
@@ -211,9 +229,13 @@ final class RoomModel: Model, @unchecked Sendable {
       hasUpdates = true
       self.heatingLoad = heatingLoad
     }
-    if let coolingLoad = updates.coolingLoad, coolingLoad != self.coolingLoad {
+    if let coolingTotal = updates.coolingTotal, coolingTotal != self.coolingTotal {
       hasUpdates = true
-      self.coolingLoad = coolingLoad
+      self.coolingTotal = coolingTotal
+    }
+    if let coolingSensible = updates.coolingSensible, coolingSensible != self.coolingSensible {
+      hasUpdates = true
+      self.coolingSensible = coolingSensible
     }
     if let registerCount = updates.registerCount, registerCount != self.registerCount {
       hasUpdates = true

Sources/ManualDCore/Room.swift

@@ -6,7 +6,8 @@ public struct Room: Codable, Equatable, Identifiable, Sendable {
   public let projectID: Project.ID
   public let name: String
   public let heatingLoad: Double
-  public let coolingLoad: Double
+  public let coolingTotal: Double
+  public let coolingSensible: Double?
   public let registerCount: Int
   public let createdAt: Date
   public let updatedAt: Date
@@ -16,7 +17,8 @@ public struct Room: Codable, Equatable, Identifiable, Sendable {
     projectID: Project.ID,
     name: String,
     heatingLoad: Double,
-    coolingLoad: Double,
+    coolingTotal: Double,
+    coolingSensible: Double? = nil,
     registerCount: Int = 1,
     createdAt: Date,
     updatedAt: Date
@@ -25,7 +27,8 @@ public struct Room: Codable, Equatable, Identifiable, Sendable {
     self.projectID = projectID
     self.name = name
     self.heatingLoad = heatingLoad
-    self.coolingLoad = coolingLoad
+    self.coolingTotal = coolingTotal
+    self.coolingSensible = coolingSensible
     self.registerCount = registerCount
     self.createdAt = createdAt
     self.updatedAt = updatedAt
@@ -38,75 +41,48 @@ extension Room {
     public let projectID: Project.ID
     public let name: String
     public let heatingLoad: Double
-    public let coolingLoad: Double
+    public let coolingTotal: Double
+    public let coolingSensible: Double?
     public let registerCount: Int
 
     public init(
       projectID: Project.ID,
       name: String,
       heatingLoad: Double,
-      coolingLoad: Double,
+      coolingTotal: Double,
+      coolingSensible: Double? = nil,
       registerCount: Int = 1
     ) {
       self.projectID = projectID
       self.name = name
       self.heatingLoad = heatingLoad
-      self.coolingLoad = coolingLoad
+      self.coolingTotal = coolingTotal
+      self.coolingSensible = coolingSensible
       self.registerCount = registerCount
     }
-
-    public init(
-      form: Room.Form,
-      projectID: Project.ID
-    ) {
-      self.init(
-        projectID: projectID,
-        name: form.name,
-        heatingLoad: form.heatingLoad,
-        coolingLoad: form.coolingLoad,
-        registerCount: form.registerCount
-      )
-    }
   }
 
   public struct Update: Codable, Equatable, Sendable {
     public let id: Room.ID
     public let name: String?
     public let heatingLoad: Double?
-    public let coolingLoad: Double?
+    public let coolingTotal: Double?
+    public let coolingSensible: Double?
     public let registerCount: Int?
 
     public init(
       id: Room.ID,
       name: String? = nil,
       heatingLoad: Double? = nil,
-      coolingLoad: Double? = nil,
+      coolingTotal: Double? = nil,
+      coolingSensible: Double? = nil,
       registerCount: Int? = nil
     ) {
       self.id = id
       self.name = name
       self.heatingLoad = heatingLoad
-      self.coolingLoad = coolingLoad
+      self.coolingTotal = coolingTotal
-      self.registerCount = registerCount
+      self.coolingSensible = coolingSensible
-    }
-  }
-
-  // TODO: Remove and just use create.
-  public struct Form: Codable, Equatable, Sendable {
-    public let name: String
-    public let heatingLoad: Double
-    public let coolingLoad: Double
-    public let registerCount: Int
-
-    public init(
-      name: String,
-      heatingLoad: Double,
-      coolingLoad: Double,
-      registerCount: Int
-    ) {
-      self.name = name
-      self.heatingLoad = heatingLoad
-      self.coolingLoad = coolingLoad
       self.registerCount = registerCount
     }
   }
@@ -121,7 +97,7 @@ extension Room {
         projectID: UUID(0),
         name: "Kitchen",
         heatingLoad: 12345,
-        coolingLoad: 1234,
+        coolingTotal: 1234,
         registerCount: 2,
         createdAt: Date(),
         updatedAt: Date()
@@ -131,7 +107,7 @@ extension Room {
         projectID: UUID(1),
         name: "Bedroom - 1",
         heatingLoad: 12345,
-        coolingLoad: 1456,
+        coolingTotal: 1456,
         registerCount: 1,
         createdAt: Date(),
         updatedAt: Date()
@@ -141,7 +117,7 @@ extension Room {
         projectID: UUID(2),
         name: "Family Room",
         heatingLoad: 12345,
-        coolingLoad: 1673,
+        coolingTotal: 1673,
         registerCount: 3,
         createdAt: Date(),
         updatedAt: Date()

Sources/ManualDCore/Routes/ViewRoute.swift

@@ -176,7 +176,7 @@ extension SiteRoute.View.ProjectRoute {
     case delete(id: Room.ID)
     case form(id: Room.ID? = nil, dismiss: Bool = false)
     case index
-    case submit(Room.Form)
+    case submit(Room.Create)
     case update(Room.Update)
 
     static let rootPath = "rooms"
@@ -213,12 +213,16 @@ extension SiteRoute.View.ProjectRoute {
         Method.post
         Body {
           FormData {
+            Field("projectID") { Project.ID.parser() }
             Field("name", .string)
             Field("heatingLoad") { Double.parser() }
-            Field("coolingLoad") { Double.parser() }
+            Field("coolingTotal") { Double.parser() }
+            Optionally {
+              Field("coolingSensible", default: nil) { Double.parser() }
+            }
             Field("registerCount") { Digits() }
           }
-          .map(.memberwise(Room.Form.init))
+          .map(.memberwise(Room.Create.init))
         }
       }
       Route(.case(Self.update)) {
@@ -234,7 +238,10 @@ extension SiteRoute.View.ProjectRoute {
               Field("heatingLoad") { Double.parser() }
             }
             Optionally {
-              Field("coolingLoad") { Double.parser() }
+              Field("coolingTotal") { Double.parser() }
+            }
+            Optionally {
+              Field("coolingSensible") { Double.parser() }
             }
             Optionally {
               Field("registerCount") { Digits() }
@@ -405,9 +412,10 @@ extension SiteRoute.View {
         Method.get
         Query {
           Optionally {
-            Field("next", default: nil) {
+            Field("next", .string, default: nil)
-              CharacterSet.urlPathAllowed.map(.string)
+            // {
-            }
+            //   CharacterSet.map(.string)
+            // }
           }
         }
       }
@@ -419,9 +427,7 @@ extension SiteRoute.View {
             Field("email", .string)
             Field("password", .string)
             Optionally {
-              Field("next", default: nil) {
+              Field("next", .string, default: nil)
-                CharacterSet.urlPathAllowed.map(.string)
-              }
             }
           }
           .map(.memberwise(User.Login.init))

Sources/Styleguide/Buttons.swift

@@ -16,7 +16,7 @@ public struct SubmitButton: HTML, Sendable {
     button(
       .class(
         """
-        text-white font-bold text-xl bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-lg shadow-lg
+        btn btn-secondary
         """
       ),
       .type(type)

Sources/Styleguide/ModalForm.swift

@@ -2,36 +2,37 @@ import Elementary
 
 public struct ModalForm<T: HTML>: HTML, Sendable where T: Sendable {
 
+  let closeButton: Bool
   let dismiss: Bool
   let id: String
   let inner: T
 
   public init(
     id: String,
+    closeButton: Bool = true,
     dismiss: Bool,
     @HTMLBuilder inner: () -> T
   ) {
+    self.closeButton = closeButton
     self.dismiss = dismiss
     self.id = id
     self.inner = inner()
   }
 
   public var body: some HTML {
-    if dismiss {
+    dialog(.id(id), .class("modal")) {
-      div(.id(id)) {}
+      div(.class("modal-box")) {
-    } else {
+        if closeButton {
-      div(
+          button(
-        .id(id),
+            .class("btn btn-sm btn-circle btn-ghost absolute right-2 top-2"),
-        .class(
+            .on(.click, "\(id).close()")
-          """
+          ) {
-          fixed top-40 left-[25vw] w-1/2 z-50 text-gray-800
+            SVG(.close)
-          bg-gray-200 border border-gray-400 
+          }
-          rounded-lg shadow-lg mx-10
+        }
-          """
-        )
-      ) {
         inner
       }
     }
+    .attributes(.class("modal-open"), when: dismiss == false)
   }
 }

Sources/ViewController/Live.swift

@@ -179,7 +179,7 @@ extension SiteRoute.View.ProjectRoute.RoomRoute {
 
     case .submit(let form):
       request.logger.debug("New room form submitted.")
-      let _ = try await database.rooms.create(.init(form: form, projectID: projectID))
+      let _ = try await database.rooms.create(form)
       return request.view {
         ProjectView(projectID: projectID, activeTab: .rooms)
       }

Sources/ViewController/Views/MainPage.swift

@@ -26,7 +26,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
   }
 
   public var body: some HTML {
-    div {
+    div(.class("h-screen w-full")) {
       inner
     }
     script(.src("https://unpkg.com/lucide@latest")) {}

Sources/ViewController/Views/Project/ProjectDetail.swift

@@ -18,9 +18,7 @@ struct ProjectDetail: HTML, Sendable {
         h1(.class("text-2xl font-bold")) { "Project" }
         EditButton()
           .attributes(
-            .hx.get(route: .project(.form(id: project.id, dismiss: false))),
+            .on(.click, "projectForm.showModal()")
-            .hx.target("#projectForm"),
-            .hx.swap(.outerHTML)
           )
       }
 
@@ -54,6 +52,6 @@ struct ProjectDetail: HTML, Sendable {
       }
     }
 
-    ProjectForm(dismiss: true)
+    ProjectForm(dismiss: true, project: project)
   }
 }

Sources/ViewController/Views/Project/ProjectForm.swift

@@ -34,7 +34,7 @@ struct ProjectForm: HTML, Sendable {
         div {
           label(.for("name")) { "Name" }
           Input(id: "name", placeholder: "Name")
-            .attributes(.type(.text), .required, .autofocus)
+            .attributes(.type(.text), .required, .autofocus, .value(project?.name))
         }
         div {
           label(.for("streetAddress")) { "Address" }
@@ -57,14 +57,9 @@ struct ProjectForm: HTML, Sendable {
             .attributes(.type(.text), .required, .value(project?.zipCode))
         }
 
-        div(.class("flex justify-end space-x-6")) {
+        div(.class("flex mt-6")) {
-          CancelButton()
-            .attributes(
-              .hx.get(route: .project(.form(dismiss: true))),
-              .hx.target("#projectForm"),
-              .hx.swap(.outerHTML)
-            )
           SubmitButton()
+            .attributes(.class("btn-block"))
         }
       }
     }

Sources/ViewController/Views/Project/ProjectsTable.swift

@@ -67,8 +67,7 @@ extension ProjectsTable {
           td { "\(project.name)" }
           td { "\(project.streetAddress)" }
           td {
-            Row {
+            div(.class("flex justify-end space-x-6")) {
-              div {}
               TrashButton()
                 .attributes(
                   .hx.delete(route: .project(.delete(id: project.id))),

Sources/ViewController/Views/Rooms/RoomForm.swift

@@ -17,6 +17,8 @@ struct RoomForm: HTML, Sendable {
       h1(.class("text-3xl font-bold pb-6")) { "Room" }
       // TODO: Use htmx here.
       form(
+        .class("modal-backdrop"),
+        .init(name: "method", value: "dialog"),
         room == nil
           ? .hx.post(route: .project(.detail(projectID, .rooms(.index))))
           : .hx.patch(route: .project(.detail(projectID, .rooms(.index)))),
@@ -41,11 +43,16 @@ struct RoomForm: HTML, Sendable {
             .attributes(.type(.number), .required, .min("0"), .value(room?.heatingLoad))
         }
         div {
-          label(.for("coolingLoad")) { "Cooling Load:" }
+          label(.for("coolingTotal")) { "Cooling Total:" }
-          Input(id: "coolingLoad", placeholder: "Cooling Load")
+          Input(id: "coolingTotal", placeholder: "Cooling Total")
-            .attributes(.type(.number), .required, .min("0"), .value(room?.coolingLoad))
+            .attributes(.type(.number), .required, .min("0"), .value(room?.coolingTotal))
         }
         div {
+          label(.for("coolingSensible")) { "Cooling Sensible:" }
+          Input(id: "coolingSensible", placeholder: "Cooling Sensible (Optional)")
+            .attributes(.type(.number), .min("0"), .value(room?.coolingSensible))
+        }
+        div(.class("pb-6")) {
           label(.for("registerCount")) { "Registers:" }
           Input(id: "registerCount", placeholder: "Register Count")
             .attributes(
@@ -53,20 +60,9 @@ struct RoomForm: HTML, Sendable {
               .value("\(room != nil ? room!.registerCount : 1)"),
             )
         }
-        Row {
+        div(.class("flex justify-end space-x-4")) {
-          // Force button to the right, probably a better way.
+          SubmitButton()
-          div {}
-          div(.class("space-x-4")) {
-            CancelButton()
-              .attributes(
-                .hx.get(route: .project(.detail(projectID, .rooms(.form(dismiss: true))))),
-                .hx.target("#roomForm"),
-                .hx.swap(.outerHTML)
-              )
-            SubmitButton()
-          }
         }
-        .attributes(.class("py-4"))
       }
     }
   }

Sources/ViewController/Views/Rooms/RoomsView.swift

@@ -20,9 +20,10 @@ struct RoomsView: HTML, Sendable {
           .data("tip", value: "Add room")
         ) {
           button(
-            .hx.get(route: .project(.detail(projectID, .rooms(.form(dismiss: false))))),
+            // .hx.get(route: .project(.detail(projectID, .rooms(.form(dismiss: false))))),
-            .hx.target("#roomForm"),
+            // .hx.target("#roomForm"),
-            .hx.swap(.outerHTML),
+            // .hx.swap(.outerHTML),
+            .on(.click, "roomForm.showModal()"),
             .class("btn btn-primary w-[40px] text-2xl")
           ) {
             "+"
@@ -81,9 +82,10 @@ struct RoomsView: HTML, Sendable {
             .attributes(.class("text-error"))
         }
         td {
-          Number(room.coolingLoad)
+          Number(room.coolingTotal)
             .attributes(.class("text-success"))
         }
+        // FIX: Add cooling sensible.
         td {
           Number(room.registerCount)
         }
@@ -120,6 +122,6 @@ extension Array where Element == Room {
   }
 
   var coolingTotal: Double {
-    reduce(into: 0) { $0 += $1.coolingLoad }
+    reduce(into: 0) { $0 += $1.coolingTotal }
   }
 }

Sources/ViewController/Views/User/LoginForm.swift

@@ -13,22 +13,20 @@ struct LoginForm: HTML, Sendable {
   }
 
   var body: some HTML {
-    div(
+    ModalForm(id: "loginForm", closeButton: false, dismiss: false) {
-      .id("loginForm"),
+      h1(.class("text-2xl font-bold mb-6")) { style.title }
-      .class("flex items-center justify-center")
+
-    ) {
       form(
-        .method(.post)
+        .method(.post),
+        .class("space-y-4")
       ) {
 
         if let next {
           input(.class("hidden"), .name("next"), .value(next))
         }
 
-        fieldset(.class("fieldset bg-base-200 border-base-300 rounded-box w-xl border p-4")) {
+        if style == .signup {
-          legend(.class("fieldset-legend")) { style.title }
+          div {
-
-          if style == .signup {
             label(.class("input validator w-full")) {
               SVG(.user)
               input(
@@ -43,7 +41,9 @@ struct LoginForm: HTML, Sendable {
               "Must be at least 3 characters"
             }
           }
+        }
 
+        div {
           label(.class("input validator w-full")) {
             SVG(.email)
             input(
@@ -52,7 +52,9 @@ struct LoginForm: HTML, Sendable {
             )
           }
           div(.class("validator-hint hidden")) { "Enter valid email address." }
+        }
 
+        div {
           label(.class("input validator w-full")) {
             SVG(.key)
             input(
@@ -61,8 +63,10 @@ struct LoginForm: HTML, Sendable {
               .name("password"), .id("password"),
             )
           }
+        }
 
-          if style == .signup {
+        if style == .signup {
+          div {
             label(.class("input validator w-full")) {
               SVG(.key)
               input(
@@ -84,10 +88,15 @@ struct LoginForm: HTML, Sendable {
               "At least one uppercase letter"
             }
           }
+        }
 
-          button(.class("btn btn-secondary mt-4")) { style.title }
+        div(.class("flex")) {
+          button(.class("btn btn-secondary mt-4 w-full")) { style.title }
+        }
+
+        div(.class("flex justify-center")) {
           a(
-            .class("btn btn-link mt-4"),
+            .class("btn btn-link"),
             .href(route: style == .signup ? .login(.index(next: next)) : .signup(.index))
           ) {
             style == .login ? "Sign Up" : "Login"