feat-WIP: Style updates, new form inputs.

This commit is contained in:
2026-01-12 22:49:58 -05:00
parent fa9e8cffb0
commit 432533c940
13 changed files with 249 additions and 134 deletions

View File

@@ -39,8 +39,7 @@ struct RoomForm: HTML, Sendable {
ModalForm(id: Self.id(room), dismiss: dismiss) {
h1(.class("text-3xl font-bold pb-6")) { "Room" }
form(
.class("modal-backdrop"),
.init(name: "method", value: "dialog"),
.class("grid grid-cols-1 gap-4"),
room == nil
? .hx.post(route)
: .hx.patch(route),
@@ -54,34 +53,54 @@ struct RoomForm: HTML, Sendable {
input(.class("hidden"), .name("id"), .value("\(id)"))
}
div {
label(.for("name")) { "Name:" }
Input(id: "name", placeholder: "Room Name")
.attributes(.type(.text), .required, .autofocus, .value(room?.name))
}
div {
label(.for("heatingLoad")) { "Heating Load:" }
Input(id: "heatingLoad", placeholder: "Heating Load")
.attributes(.type(.number), .required, .min("0"), .value(room?.heatingLoad))
}
div {
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(
.type(.number), .required, .min("0"),
.value("\(room != nil ? room!.registerCount : 1)"),
)
}
LabeledInput(
"Name",
.name("name"),
.type(.text),
.placeholder("Name"),
.required,
.autofocus,
.value(room?.name)
)
LabeledInput(
"Heating Load",
.name("heatingLoad"),
.type(.number),
.placeholder("1234"),
.required,
.min("0"),
.value(room?.heatingLoad)
)
LabeledInput(
"Cooling Total",
.name("coolingTotal"),
.type(.number),
.placeholder("1234"),
.required,
.min("0"),
.value(room?.coolingTotal)
)
LabeledInput(
"Cooling Sensible",
.name("coolingSensible"),
.type(.number),
.placeholder("1234 (Optional)"),
.min("0"),
.value(room?.coolingSensible)
)
LabeledInput(
"Registers",
.name("registerCount"),
.type(.number),
.min("1"),
.required,
.value(room?.registerCount ?? 1)
)
SubmitButton()
.attributes(.class("btn-block"))
}

View File

@@ -14,61 +14,84 @@ struct RoomsView: HTML, Sendable {
var body: some HTML {
div(.class("flex w-full flex-col")) {
Row {
h1(
.class("flex flex-row text-2xl font-bold pb-6 h-full items-center")
) { "Room Loads" }
PageTitle { "Room Loads" }
div(.class("flex justify-end")) {
div(.class("flex justify-end items-end -my-2")) {
Tooltip("Project wide sensible heat ratio", position: .left) {
button(
.class(
"""
grid grid-cols-1 gap-2 p-4 justify-end
justify-end items-end p-4
hover:bg-neutral hover:text-white hover:rounded-lg
"""
),
.showModal(id: SHRForm.id)
) {
LabeledContent("Sensible Heat Ratio") {
LabeledContent {
div(.class("flex justify-end items-end space-x-4")) {
// SVG(.squarePen)
span(.class("font-bold")) {
"Sensible Heat Ratio"
}
}
} content: {
if let sensibleHeatRatio {
Badge(number: sensibleHeatRatio)
}
}
div(.class("flex justify-end")) {
SVG(.squarePen)
}
}
}
}
}
div(.class("flex flex-wrap justify-between mt-6")) {
div(.class("flex items-end space-x-4")) {
span(.class("font-bold")) { "Heating Total" }
Badge(number: rooms.heatingTotal, digits: 0)
.attributes(.class("badge-error"))
}
div(.class("flex items-end space-x-4")) {
span(.class("font-bold")) { "Cooling Total" }
Badge(number: rooms.coolingTotal, digits: 0)
.attributes(.class("badge-success"))
}
div(.class("flex justify-end items-end space-x-4 me-4")) {
span(.class("font-bold")) { "Cooling Sensible" }
Badge(number: rooms.coolingSensible(shr: sensibleHeatRatio), digits: 0)
.attributes(.class("badge-info"))
}
}
// .attributes(.class("mt-6 me-4"))
div(.class("divider")) {}
SHRForm(projectID: projectID, sensibleHeatRatio: sensibleHeatRatio)
div(.class("overflow-x-auto")) {
table(.class("table table-zebra"), .id("roomsTable")) {
table(.class("table table-zebra text-lg"), .id("roomsTable")) {
thead {
tr {
th { Label("Name") }
tr(.class("text-lg font-bold")) {
th { "Name" }
th {
div(.class("flex justify-center")) {
Label("Heating Load")
"Heating Load"
}
}
th {
div(.class("flex justify-center")) {
Label("Cooling Total")
"Cooling Total"
}
}
th {
div(.class("flex justify-center")) {
Label("Cooling Sensible")
"Cooling Sensible"
}
}
th {
div(.class("flex justify-center")) {
Label("Register Count")
"Register Count"
}
}
th {
@@ -89,30 +112,6 @@ struct RoomsView: HTML, Sendable {
for room in rooms {
RoomRow(room: room, shr: sensibleHeatRatio)
}
// TOTALS
tr(.class("font-bold text-xl")) {
td { Label("Total") }
td {
div(.class("flex justify-center")) {
Badge(number: rooms.heatingTotal)
.attributes(.class("badge-error badge-xl"))
}
}
td {
div(.class("flex justify-center")) {
Badge(number: rooms.coolingTotal, digits: 0)
.attributes(.class("badge-success badge-xl"))
}
}
td {
div(.class("flex justify-center")) {
Badge(number: rooms.coolingSensible(shr: sensibleHeatRatio), digits: 0)
.attributes(.class("badge-info badge-xl"))
}
}
td {}
td {}
}
}
}
}
@@ -143,19 +142,19 @@ struct RoomsView: HTML, Sendable {
td {
div(.class("flex justify-center")) {
Number(room.heatingLoad, digits: 0)
.attributes(.class("text-error"))
// .attributes(.class("text-error"))
}
}
td {
div(.class("flex justify-center")) {
Number(room.coolingTotal, digits: 0)
.attributes(.class("text-success"))
// .attributes(.class("text-success"))
}
}
td {
div(.class("flex justify-center")) {
Number(coolingSensible, digits: 0)
.attributes(.class("text-info"))
// .attributes(.class("text-info"))
}
}
td {
@@ -204,22 +203,28 @@ struct RoomsView: HTML, Sendable {
var body: some HTML {
ModalForm(id: Self.id, dismiss: true) {
h1(.class("text-xl font-bold mb-6")) {
"Sensible Heat Ratio"
}
form(
.class("space-y-6"),
.class("grid grid-cols-1 gap-4"),
.hx.patch("/projects/\(projectID)/rooms/update-shr"),
.hx.target("body"),
.hx.swap(.outerHTML)
) {
input(.class("hidden"), .name("projectID"), .value("\(projectID)"))
div {
label(.for("sensibleHeatRatio")) { "Sensible Heat Ratio" }
Input(id: "sensibleHeatRatio", placeholder: "Sensible Heat Ratio")
.attributes(.min("0"), .max("1"), .step("0.01"), .value(sensibleHeatRatio))
}
div {
SubmitButton()
.attributes(.class("btn-block"))
}
LabeledInput(
"SHR",
.type(.number),
.placeholder("0.83"),
.min("0"),
.max("1"),
.step("0.01"),
.value(sensibleHeatRatio),
.autofocus
)
SubmitButton()
.attributes(.class("btn-block my-6"))
}
}
}