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

@@ -15,6 +15,7 @@ public enum Theme: String, CaseIterable, Codable, Equatable, Sendable {
public static let darkThemes = [
Self.aqua,
Self.cyberpunk,
Self.dark,
Self.dracula,
Self.night,
@@ -23,7 +24,6 @@ public enum Theme: String, CaseIterable, Codable, Equatable, Sendable {
public static let lightThemes = [
Self.cupcake,
Self.cyberpunk,
Self.light,
Self.nord,
Self.retro,

View File

@@ -13,7 +13,7 @@ public struct Label: HTML, Sendable {
}
public var body: some HTML<HTMLTag.span> {
span(.class("text-xl text-secondary font-bold")) {
span(.class("text-lg text-secondary font-bold")) {
title
}
}

View File

@@ -0,0 +1,18 @@
import Elementary
public struct PageTitle: HTML, Sendable {
let title: String
public init(_ title: String) {
self.title = title
}
public init(_ title: () -> String) {
self.title = title()
}
public var body: some HTML<HTMLTag.h1> {
h1(.class("text-3xl font-bold")) { title }
}
}

View File

@@ -14,7 +14,7 @@ struct DuctSizingView: HTML, Sendable {
var body: some HTML {
div {
h1(.class("text-2xl py-4")) { "Duct Sizes" }
PageTitle { "Duct Sizes" }
if rooms.count == 0 {
p(.class("text-error italic")) {
"Must complete all the previous sections to display duct sizing calculations."

View File

@@ -23,11 +23,9 @@ struct EffectiveLengthsView: HTML, Sendable {
}
var body: some HTML {
div(
.class("m-4 space-y-4")
) {
div(.class("space-y-4")) {
Row {
h1(.class("text-2xl font-bold")) { "Equivalent Lengths" }
PageTitle { "Equivalent Lengths" }
PlusButton()
.attributes(
.class("btn-ghost"),
@@ -40,6 +38,8 @@ struct EffectiveLengthsView: HTML, Sendable {
div {
h2(.class("text-xl font-bold pb-4")) { "Supplies" }
.attributes(.class("hidden"), when: supplies.count == 0)
div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4")) {
for (n, row) in supplies.enumerated() {
EffectiveLengthView(effectiveLength: row)
@@ -50,6 +50,7 @@ struct EffectiveLengthsView: HTML, Sendable {
div {
h2(.class("text-xl font-bold pb-4")) { "Returns" }
.attributes(.class("hidden"), when: returns.count == 0)
div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 space-x-4 space-y-4")) {
for (n, row) in returns.enumerated() {
EffectiveLengthView(effectiveLength: row)

View File

@@ -29,7 +29,7 @@ struct EquipmentInfoForm: HTML, Sendable {
ModalForm(id: Self.id, dismiss: dismiss) {
h1(.class("text-3xl font-bold pb-6 ps-2")) { "Equipment Info" }
form(
.class("space-y-4 p-4"),
.class("grid grid-cols-1 gap-4"),
equipmentInfo != nil
? .hx.patch(route)
: .hx.post(route),
@@ -42,27 +42,40 @@ struct EquipmentInfoForm: HTML, Sendable {
input(.class("hidden"), .name("id"), .value("\(equipmentInfo.id)"))
}
div {
label(.for("staticPressure")) { "Static Pressure" }
Input(id: "staticPressure", placeholder: "Static pressure")
.attributes(
.type(.number), .value(staticPressure), .min("0"), .max("1.0"), .step("0.1")
)
}
div {
label(.for("heatingCFM")) { "Heating CFM" }
Input(id: "heatingCFM", placeholder: "CFM")
.attributes(.type(.number), .min("0"), .value(equipmentInfo?.heatingCFM))
}
div {
label(.for("coolingCFM")) { "Cooling CFM" }
Input(id: "coolingCFM", placeholder: "CFM")
.attributes(.type(.number), .min("0"), .value(equipmentInfo?.coolingCFM))
}
div {
SubmitButton(title: "Save")
.attributes(.class("btn-block"))
}
LabeledInput(
"Static Pressure",
.name("staticPressure"),
.type(.number),
.value(staticPressure),
.min("0"),
.max("1.0"),
.step("0.1"),
.required
)
LabeledInput(
"Heating CFM",
.name("heatingCFM"),
.type(.number),
.value(equipmentInfo?.heatingCFM),
.placeholder("1000"),
.min("0"),
.required,
.autofocus
)
LabeledInput(
"Cooling CFM",
.name("coolingCFM"),
.type(.number),
.value(equipmentInfo?.coolingCFM),
.placeholder("1000"),
.min("0"),
.required
)
SubmitButton(title: "Save")
.attributes(.class("btn-block my-6"))
}
}
}

View File

@@ -8,12 +8,12 @@ struct EquipmentInfoView: HTML, Sendable {
var body: some HTML {
div(
.class("space-y-4 p-4"),
.class("space-y-4"),
.id("equipmentInfo")
) {
Row {
h1(.class("text-2xl font-bold")) { "Equipment Info" }
PageTitle { "Equipment Info" }
Tooltip("Edit equipment info") {
EditButton()
@@ -29,16 +29,28 @@ struct EquipmentInfoView: HTML, Sendable {
table(.class("table table-zebra")) {
tbody(.class("text-lg")) {
tr {
td { Label("Static Pressure") }
td { Number(equipmentInfo.staticPressure) }
td { span { "Static Pressure" } }
td {
div(.class("flex justify-end")) {
Number(equipmentInfo.staticPressure)
}
}
}
tr {
td { Label("Heating CFM") }
td { Number(equipmentInfo.heatingCFM) }
td { span { "Heating CFM" } }
td {
div(.class("flex justify-end")) {
Number(equipmentInfo.heatingCFM)
}
}
}
tr {
td { Label("Cooling CFM") }
td { Number(equipmentInfo.coolingCFM) }
td { span { "Cooling CFM" } }
td {
div(.class("flex justify-end")) {
Number(equipmentInfo.coolingCFM)
}
}
}
}
}

View File

@@ -44,7 +44,7 @@ struct FrictionRateView: HTML, Sendable {
div(.class("space-y-6")) {
div(.class("grid grid-cols-2 px-4")) {
h1(.class("text-4xl font-bold items-end my-auto")) { "Friction Rate" }
PageTitle { "Friction Rate" }
div(.class("space-y-4 justify-end")) {

View File

@@ -9,7 +9,7 @@ struct ProjectDetail: HTML, Sendable {
var body: some HTML {
div {
Row {
h1(.class("text-2xl font-bold")) { "Project" }
h1(.class("text-3xl font-bold")) { "Project" }
EditButton()
.attributes(
.class("btn-ghost"),
@@ -21,24 +21,44 @@ struct ProjectDetail: HTML, Sendable {
table(.class("table table-zebra text-lg")) {
tbody {
tr {
td { Label("Name") }
td { project.name }
td { "Name" }
td {
div(.class("flex justify-end")) {
project.name
}
}
}
tr {
td { Label("Street Address") }
td { project.streetAddress }
td { "Street Address" }
td {
div(.class("flex justify-end")) {
project.streetAddress
}
}
}
tr {
td { Label("City") }
td { project.city }
td { "City" }
td {
div(.class("flex justify-end")) {
project.city
}
}
}
tr {
td { Label("State") }
td { project.state }
td { "State" }
td {
div(.class("flex justify-end")) {
project.state
}
}
}
tr {
td { Label("Zip") }
td { project.zipCode }
td { "Zip" }
td {
div(.class("flex justify-end")) {
project.zipCode
}
}
}
}
}

View File

@@ -20,7 +20,7 @@ struct ProjectsTable: HTML, Sendable {
Navbar(sidebarToggle: false)
div(.class("m-6")) {
Row {
h1(.class("text-2xl font-bold")) { "Projects" }
PageTitle { "Projects" }
Tooltip("Add project") {
PlusButton()
.attributes(
@@ -31,7 +31,7 @@ struct ProjectsTable: HTML, Sendable {
}
.attributes(.class("pb-6"))
div(.class("overflow-x-auto rounded-box border")) {
div(.class("overflow-x-auto")) {
table(.class("table table-zebra")) {
thead {
tr {

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