WIP: Working on friction rate worksheet views.
This commit is contained in:
@@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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")
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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")) {}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user