WIP: Rooms table style updates in duct sizing tab, but room form is not working properly on all rows for some reason.

This commit is contained in:
2026-01-13 22:47:50 -05:00
parent 62a82ed674
commit 71848c607a
6 changed files with 196 additions and 250 deletions

View File

@@ -19,7 +19,7 @@ public struct ModalForm<T: HTML>: HTML, Sendable where T: Sendable {
self.inner = inner()
}
public var body: some HTML {
public var body: some HTML<HTMLTag.dialog> {
dialog(.id(id), .class("modal")) {
div(.class("modal-box")) {
if closeButton {

View File

@@ -546,7 +546,7 @@ extension SiteRoute.View.ProjectRoute.DuctSizingRoute {
.filter({ $0.roomID == room.id })
.first!
} onSuccess: { container in
DuctSizingView.RoomRow(projectID: projectID, room: container)
DuctSizingView.RoomRow(room: container)
}
case .roomRectangularForm(let roomID, let form):
@@ -564,7 +564,7 @@ extension SiteRoute.View.ProjectRoute.DuctSizingRoute {
.filter({ $0.roomID == room.id })
.first!
} onSuccess: { container in
DuctSizingView.RoomRow(projectID: projectID, room: container)
DuctSizingView.RoomRow(room: container)
}
case .trunk(let route):

View File

@@ -28,150 +28,33 @@ struct DuctSizingView: HTML, Sendable {
"Must complete all the previous sections to display duct sizing calculations."
}
} else {
RoomsTable(projectID: projectID, rooms: rooms)
RoomsTable(rooms: rooms)
}
Row {
h2(.class("text-2xl font-bold")) { "Trunk Sizes" }
PlusButton()
.attributes(
.class("me-6"),
.showModal(id: TrunkSizeForm.id())
)
}
.attributes(.class("mt-6"))
div(.class("divider -mt-2")) {}
if supplyTrunks.count > 0 {
h2(.class("text-lg font-bold text-info")) { "Supply Trunks" }
TrunkTable(trunks: supplyTrunks, rooms: rooms)
}
if returnTrunks.count > 0 {
h2(.class("text-lg font-bold text-error")) { "Return Trunks" }
TrunkTable(trunks: returnTrunks, rooms: rooms)
}
TrunkSizeForm(rooms: rooms, dismiss: true)
}
}
struct RoomsTable: HTML, Sendable {
let projectID: Project.ID
let rooms: [DuctSizing.RoomContainer]
var body: some HTML<HTMLTag.div> {
div(.class("overflow-x-auto")) {
table(.class("table table-zebra")) {
thead {
tr(.class("text-xl text-gray-400 font-bold")) {
th { "ID" }
th { "Name" }
th { "H-BTU" }
th { "C-BTU" }
th(.class("hidden 2xl:table-cell")) { "Htg CFM" }
th(.class("hidden 2xl:table-cell")) { "Clg CFM" }
th { "Dsn CFM" }
th(.class("hidden 2xl:table-cell")) { "Round Size" }
th { "Velocity" }
th { "Final Size" }
th { "Flex Size" }
th { "Width" }
th { "Height" }
}
}
tbody {
for room in rooms {
RoomRow(projectID: projectID, room: room)
}
}
}
}
}
}
struct RoomRow: HTML, Sendable {
let projectID: Project.ID
let room: DuctSizing.RoomContainer
var route: String {
SiteRoute.View.router.path(
for: .project(.detail(projectID, .ductSizing(.index)))
)
.appendingPath("room")
.appendingPath(room.roomID)
}
var body: some HTML<HTMLTag.tr> {
tr(.class("text-lg items-baseline"), .id(room.roomID.idString)) {
td { room.registerID }
td { room.roomName }
td { Number(room.heatingLoad, digits: 0) }
td { Number(room.coolingLoad, digits: 0) }
td(.class("hidden 2xl:table-cell")) { Number(room.heatingCFM, digits: 0) }
td(.class("hidden 2xl:table-cell")) { Number(room.coolingCFM, digits: 0) }
td {
Badge(number: room.designCFM.value, digits: 0)
.attributes(.class("badge-\(room.designCFM.color)"))
}
td(.class("hidden 2xl:table-cell")) { Number(room.roundSize, digits: 1) }
td { Number(room.velocity) }
td {
Badge(number: room.finalSize)
.attributes(.class("badge-secondary"))
}
td {
Badge(number: room.flexSize)
.attributes(.class("badge-primary"))
}
td {
if let width = room.rectangularWidth {
Number(width)
}
}
td {
div(.class("flex justify-between items-center space-x-4")) {
div(.id("height_\(room.roomID.idString)"), .class("h-full my-auto")) {
if let height = room.rectangularSize?.height {
Number(height)
}
}
div {
div(.class("join")) {
// FIX: Delete rectangular size from room.
TrashButton()
.attributes(.class("join-item btn-ghost"))
.attributes(
.hx.delete(
route: .project(
.detail(
projectID,
.ductSizing(
.deleteRectangularSize(
room.roomID,
room.rectangularSize?.id ?? .init())
)
)
)
),
.hx.target("closest tr"),
.hx.swap(.outerHTML),
when: room.rectangularSize != nil
)
EditButton()
.attributes(
.class("join-item btn-ghost"),
.showModal(id: RectangularSizeForm.id(room))
)
}
}
}
RectangularSizeForm(projectID: projectID, room: room)
}
}
// Row {
// h2(.class("text-2xl font-bold")) { "Trunk Sizes" }
//
// PlusButton()
// .attributes(
// .class("me-6"),
// .showModal(id: TrunkSizeForm.id())
// )
// }
// .attributes(.class("mt-6"))
//
// div(.class("divider -mt-2")) {}
//
// if supplyTrunks.count > 0 {
// h2(.class("text-lg font-bold text-info")) { "Supply Trunks" }
// TrunkTable(trunks: supplyTrunks, rooms: rooms)
// }
//
// if returnTrunks.count > 0 {
// h2(.class("text-lg font-bold text-error")) { "Return Trunks" }
// TrunkTable(trunks: returnTrunks, rooms: rooms)
// }
//
// TrunkSizeForm(rooms: rooms, dismiss: true)
}
}

View File

@@ -6,7 +6,7 @@ import Styleguide
struct RectangularSizeForm: HTML, Sendable {
static func id(_ roomID: Room.ID? = nil) -> String {
let base = "rectangularSizeForm"
let base = "rectangularSize"
guard let roomID else { return base }
return "\(base)_\(roomID.idString)"
}
@@ -15,7 +15,9 @@ struct RectangularSizeForm: HTML, Sendable {
return id(room.roomID)
}
let projectID: Project.ID
@Environment(ProjectViewValue.$projectID) var projectID
let id: String
let roomID: Room.ID
let rectangularSizeID: DuctSizing.RectangularDuct.ID?
let register: Int
@@ -23,14 +25,14 @@ struct RectangularSizeForm: HTML, Sendable {
let dismiss: Bool
init(
projectID: Project.ID,
id: String? = nil,
roomID: Room.ID,
rectangularSizeID: DuctSizing.RectangularDuct.ID? = nil,
register: Int,
height: Int? = nil,
dismiss: Bool = true
) {
self.projectID = projectID
self.id = id ?? Self.id(roomID)
self.roomID = roomID
self.rectangularSizeID = rectangularSizeID
self.register = register
@@ -39,7 +41,7 @@ struct RectangularSizeForm: HTML, Sendable {
}
init(
projectID: Project.ID,
id: String? = nil,
room: DuctSizing.RoomContainer,
dismiss: Bool = true
) {
@@ -48,7 +50,7 @@ struct RectangularSizeForm: HTML, Sendable {
?? (Int("\(room.roomName.last!)") ?? 1)
self.init(
projectID: projectID,
id: id,
roomID: room.roomID,
rectangularSizeID: room.rectangularSize?.id,
register: register,
@@ -66,8 +68,8 @@ struct RectangularSizeForm: HTML, Sendable {
}
var body: some HTML {
ModalForm(id: Self.id(roomID), dismiss: dismiss) {
var body: some HTML<HTMLTag.dialog> {
ModalForm(id: id, dismiss: dismiss) {
h1(.class("text-lg pb-6")) { "Rectangular Size" }

View File

@@ -0,0 +1,158 @@
import Elementary
import ElementaryHTMX
import Foundation
import ManualDCore
import Styleguide
extension DuctSizingView {
struct RoomsTable: HTML, Sendable {
@Environment(ProjectViewValue.$projectID) var projectID
let rooms: [DuctSizing.RoomContainer]
var body: some HTML<HTMLTag.div> {
div(.class("overflow-x-auto")) {
table(.class("table table-zebra")) {
thead {
tr(.class("text-xl text-gray-400 font-bold")) {
th { "ID" }
th { "Name" }
th { "BTU" }
th { "CFM" }
th(.class("hidden 2xl:table-cell")) { "Round Size" }
th { "Velocity" }
th { "Size" }
th {}
}
}
tbody {
for room in rooms {
RoomRow(room: room)
}
}
}
}
}
}
struct RoomRow: HTML, Sendable {
@Environment(ProjectViewValue.$projectID) var projectID
let room: DuctSizing.RoomContainer
let formID = UUID().idString
var deleteRoute: String {
guard let id = room.rectangularSize?.id else { return "" }
return SiteRoute.View.router.path(
for: .project(
.detail(
projectID,
.ductSizing(.deleteRectangularSize(room.roomID, id))
)
)
)
}
var body: some HTML<HTMLTag.tr> {
tr(.class("text-lg items-baseline"), .id(room.roomID.idString)) {
td { room.registerID }
td { room.roomName }
td {
div(.class("grid grid-cols-2 gap-2")) {
span(.class("label")) { "Heating" }
Number(room.heatingLoad, digits: 0)
span(.class("label")) { "Cooling" }
Number(room.coolingLoad, digits: 0)
}
}
td {
div(.class("grid grid-cols-2 gap-2")) {
span(.class("label")) { "Design" }
Badge(number: room.designCFM.value, digits: 0)
span(.class("label")) { "Heating" }
Number(room.heatingCFM, digits: 0)
span(.class("label")) { "Cooling" }
Number(room.coolingCFM, digits: 0)
}
}
td(.class("hidden 2xl:table-cell")) { Number(room.roundSize, digits: 1) }
td { Number(room.velocity) }
td {
div(.class("grid grid-cols-2 gap-2")) {
span(.class("label")) { "Final" }
Badge(number: room.finalSize)
.attributes(.class("badge-secondary"))
span(.class("label")) { "Flex" }
Badge(number: room.flexSize)
.attributes(.class("badge-primary"))
if let width = room.rectangularWidth,
let height = room.rectangularSize?.height
{
span(.class("label")) { "Rectangular" }
Badge {
span { "\(width) x \(height)" }
}
}
}
}
td {
div(.class("flex justify-end space-x-4")) {
div(.class("join")) {
if room.rectangularSize != nil {
// FIX: Delete rectangular size from room.
TrashButton()
.attributes(.class("join-item btn-ghost"))
.attributes(
.hx.delete(deleteRoute),
.hx.target("closest tr"),
.hx.swap(.outerHTML),
when: room.rectangularSize != nil
)
}
EditButton()
.attributes(
.class("join-item btn-ghost"),
.showModal(id: formID)
// .showModal(id: RectangularSizeForm.id(room))
)
}
}
// FakeForm(id: formID)
RectangularSizeForm(id: formID, room: room)
// .attributes(.class("modal-open"))
}
}
}
}
struct FakeForm: HTML, Sendable {
let id: String
var body: some HTML<HTMLTag.dialog> {
ModalForm(id: id, dismiss: true) {
div { "Fake Form" }
}
}
}
}