WIP: Working on friction rate worksheet views.

This commit is contained in:
2025-12-31 21:56:43 -05:00
parent 591875cf13
commit 24c87602e9
12 changed files with 326 additions and 11 deletions

View File

@@ -0,0 +1,45 @@
import Elementary
import ElementaryHTMX
import ManualDCore
import Styleguide
struct ComponentLossForm: HTML, Sendable {
var body: some HTML {
div(
.id("componentLossForm"),
.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
"""
)
) {
h1(.class("text-2xl font-bold")) { "Component Loss" }
form(.class("space-y-4 p-4")) {
div {
label(.for("name")) { "Name" }
Input(id: "name", placeholder: "Name")
.attributes(.type(.text), .required, .autofocus)
}
div {
label(.for("value")) { "Value" }
Input(id: "name", placeholder: "Pressure loss")
.attributes(.type(.number), .min("0"), .max("1"), .step("0.1"), .required)
}
Row {
div {}
div {
CancelButton()
.attributes(
.hx.get(route: .frictionRate(.form(.componentPressureLoss, dismiss: true))),
.hx.target("#componentLossForm"),
.hx.swap(.outerHTML)
)
SubmitButton()
}
}
}
}
}
}

View File

@@ -0,0 +1,62 @@
import Elementary
import ElementaryHTMX
import ManualDCore
import Styleguide
struct ComponentPressureLossTable: HTML, Sendable {
let componentPressureLosses: [ComponentPressureLoss]
var body: some HTML {
div(.id("cplTable")) {
h1(.class("text-2xl font-bold pb-4")) { "Component Pressure Losses" }
table(
.class(
"w-full border-collapse border border-gray-200 table-fixed"
)
) {
thead { tableHeader }
tbody(.id("cplTableBody")) {
Rows(componentPressureLosses: componentPressureLosses)
}
}
}
div(.id("componentLossForm")) {}
}
private var tableHeader: some HTML<HTMLTag.tr> {
tr {
th(.class("border border-gray-200 text-xl font-bold")) { "Name" }
th(.class("border border-gray-200 text-xl font-bold")) { "Pressure Loss" }
th(.class("border border-gray-200 text-xl font-bold")) {
Row {
div {}
button(
.class("px-2"),
.hx.get(route: .frictionRate(.form(.componentPressureLoss))),
.hx.target("#componentLossForm"),
.hx.swap(.outerHTML)
) {
Icon(.circlePlus)
}
}
}
}
}
private struct Rows: HTML, Sendable {
let componentPressureLosses: [ComponentPressureLoss]
var body: some HTML {
for cpl in componentPressureLosses {
tr {
td(.class("border border-gray-200 p-2")) { cpl.name }
td(.class("border border-gray-200 p-2")) { "\(cpl.value)" }
td(.class("border border-gray-200 p-2")) {
// FIX: Add edit button
}
}
}
}
}
}

View File

@@ -2,16 +2,28 @@ import Elementary
import ManualDCore
import Styleguide
// TODO: Have form hold onto equipment info model to edit.
struct EquipmentForm: HTML, Sendable {
var body: some HTML {
div(.id("equipmentForm")) {
h1(.class("text-3xl font-bold pb-6")) { "Equipment Info" }
form {
div(
.id("equipmentForm"),
.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
"""
)
) {
h1(.class("text-3xl font-bold pb-6 ps-2")) { "Equipment Info" }
form(.class("space-y-4 p-4")) {
div {
label(.for("staticPressure")) { "Static Pressure" }
Input(id: "staticPressure", placeholder: "Static pressure")
.attributes(.type(.number), .value("0.5"), .min("0"), .max("1.0"), .step("0.1"))
.attributes(
.type(.number), .value("0.5"), .min("0"), .max("1.0"), .step("0.1")
)
}
div {
label(.for("heatingCFM")) { "Heating CFM" }
@@ -26,6 +38,12 @@ struct EquipmentForm: HTML, Sendable {
Row {
div {}
div(.class("space-x-4")) {
CancelButton()
.attributes(
.hx.get(route: .frictionRate(.form(.equipmentInfo, dismiss: true))),
.hx.target("#equipmentForm"),
.hx.swap(.outerHTML)
)
SubmitButton(title: "Save")
}
}

View File

@@ -0,0 +1,45 @@
import Elementary
import ManualDCore
import Styleguide
struct EquipmentInfoView: HTML, Sendable {
let equipmentInfo: EquipmentInfo
var body: some HTML {
div(.class("space-y-4 border border-gray-200 rounded-lg shadow-lg p-4")) {
Row {
h1(.class("text-2xl font-bold")) { "Equipment Info" }
}
Row {
Label { "Static Pressure" }
span { "\(equipmentInfo.staticPressure)" }
}
.attributes(.class("border-b border-gray-200"))
Row {
Label { "Heating CFM" }
span { "\(equipmentInfo.heatingCFM)" }
}
.attributes(.class("border-b border-gray-200"))
Row {
Label { "Cooling CFM" }
span { "\(equipmentInfo.coolingCFM)" }
}
.attributes(.class("border-b border-gray-200"))
Row {
div {}
EditButton()
.attributes(
.hx.get(route: .frictionRate(.form(.equipmentInfo))),
.hx.target("#equipmentForm"),
.hx.swap(.outerHTML)
)
}
}
div(.id("equipmentForm")) {}
}
}

View File

@@ -5,8 +5,10 @@ import Styleguide
struct FrictionRateView: HTML, Sendable {
var body: some HTML {
div {
EquipmentForm()
div(.class("w-full flex-1 p-4 space-y-6")) {
h1(.class("text-4xl font-bold pb-6")) { "Friction Rate" }
EquipmentInfoView(equipmentInfo: EquipmentInfo.mock)
ComponentPressureLossTable(componentPressureLosses: ComponentPressureLoss.mock)
}
}
}