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

This commit is contained in:
2026-01-06 10:12:48 -05:00
parent fc12e47b5c
commit 5fcc5b88fa
14 changed files with 161 additions and 130 deletions

View File

@@ -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);
}

View File

@@ -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 {
guard coolingLoad >= 0 else {
if let coolingTotal {
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")
var coolingLoad: Double
@Field(key: "coolingTotal")
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

View File

@@ -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.registerCount = registerCount
}
}
// 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.coolingTotal = coolingTotal
self.coolingSensible = coolingSensible
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()

View File

@@ -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) {
CharacterSet.urlPathAllowed.map(.string)
}
Field("next", .string, default: nil)
// {
// CharacterSet.map(.string)
// }
}
}
}
@@ -419,9 +427,7 @@ extension SiteRoute.View {
Field("email", .string)
Field("password", .string)
Optionally {
Field("next", default: nil) {
CharacterSet.urlPathAllowed.map(.string)
}
Field("next", .string, default: nil)
}
}
.map(.memberwise(User.Login.init))

View File

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

View File

@@ -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 {
div(.id(id)) {}
} else {
div(
.id(id),
.class(
"""
fixed top-40 left-[25vw] w-1/2 z-50 text-gray-800
bg-gray-200 border border-gray-400
rounded-lg shadow-lg mx-10
"""
)
) {
dialog(.id(id), .class("modal")) {
div(.class("modal-box")) {
if closeButton {
button(
.class("btn btn-sm btn-circle btn-ghost absolute right-2 top-2"),
.on(.click, "\(id).close()")
) {
SVG(.close)
}
}
inner
}
}
.attributes(.class("modal-open"), when: dismiss == false)
}
}

View File

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

View File

@@ -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")) {}

View File

@@ -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))),
.hx.target("#projectForm"),
.hx.swap(.outerHTML)
.on(.click, "projectForm.showModal()")
)
}
@@ -54,6 +52,6 @@ struct ProjectDetail: HTML, Sendable {
}
}
ProjectForm(dismiss: true)
ProjectForm(dismiss: true, project: project)
}
}

View File

@@ -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")) {
CancelButton()
.attributes(
.hx.get(route: .project(.form(dismiss: true))),
.hx.target("#projectForm"),
.hx.swap(.outerHTML)
)
div(.class("flex mt-6")) {
SubmitButton()
.attributes(.class("btn-block"))
}
}
}

View File

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

View File

@@ -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:" }
Input(id: "coolingLoad", placeholder: "Cooling Load")
.attributes(.type(.number), .required, .min("0"), .value(room?.coolingLoad))
label(.for("coolingTotal")) { "Cooling Total:" }
Input(id: "coolingTotal", placeholder: "Cooling Total")
.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 {
// Force button to the right, probably a better way.
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()
}
div(.class("flex justify-end space-x-4")) {
SubmitButton()
}
.attributes(.class("py-4"))
}
}
}

View File

@@ -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.target("#roomForm"),
.hx.swap(.outerHTML),
// .hx.get(route: .project(.detail(projectID, .rooms(.form(dismiss: false))))),
// .hx.target("#roomForm"),
// .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 }
}
}

View File

@@ -13,22 +13,20 @@ struct LoginForm: HTML, Sendable {
}
var body: some HTML {
div(
.id("loginForm"),
.class("flex items-center justify-center")
) {
ModalForm(id: "loginForm", closeButton: false, dismiss: false) {
h1(.class("text-2xl font-bold mb-6")) { style.title }
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")) {
legend(.class("fieldset-legend")) { style.title }
if style == .signup {
if style == .signup {
div {
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"