WIP: Updates rooms view.
This commit is contained in:
@@ -68,7 +68,7 @@ extension Room {
|
||||
Room(
|
||||
id: UUID(0),
|
||||
projectID: UUID(0),
|
||||
name: "Test",
|
||||
name: "Kitchen",
|
||||
heatingLoad: 12345,
|
||||
coolingLoad: .init(total: 12345, sensible: 12345),
|
||||
registerCount: 2,
|
||||
@@ -78,20 +78,20 @@ extension Room {
|
||||
Room(
|
||||
id: UUID(1),
|
||||
projectID: UUID(1),
|
||||
name: "Test",
|
||||
name: "Bedroom - 1",
|
||||
heatingLoad: 12345,
|
||||
coolingLoad: .init(total: 12345, sensible: 12345),
|
||||
registerCount: 2,
|
||||
registerCount: 1,
|
||||
createdAt: Date(),
|
||||
updatedAt: Date()
|
||||
),
|
||||
Room(
|
||||
id: UUID(2),
|
||||
projectID: UUID(2),
|
||||
name: "Test",
|
||||
name: "Family Room",
|
||||
heatingLoad: 12345,
|
||||
coolingLoad: .init(total: 12345, sensible: 12345),
|
||||
registerCount: 2,
|
||||
registerCount: 3,
|
||||
createdAt: Date(),
|
||||
updatedAt: Date()
|
||||
),
|
||||
|
||||
@@ -80,3 +80,12 @@ public struct EditButton: HTML, Sendable {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public struct PlusButton: HTML, Sendable {
|
||||
|
||||
public init() {}
|
||||
|
||||
public var body: some HTML<HTMLTag.button> {
|
||||
button(.type(.button)) { SVG(.circlePlus) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ public struct Number: HTML, Sendable {
|
||||
private var formatter: NumberFormatter {
|
||||
let formatter = NumberFormatter()
|
||||
formatter.maximumFractionDigits = fractionDigits
|
||||
formatter.numberStyle = .decimal
|
||||
return formatter
|
||||
}
|
||||
|
||||
|
||||
@@ -40,10 +40,7 @@ extension SiteRoute.View.RoomRoute {
|
||||
func renderView(isHtmxRequest: Bool) async throws -> AnySendableHTML {
|
||||
switch self {
|
||||
case .form(let dismiss):
|
||||
guard !dismiss else {
|
||||
return div(.id("roomForm")) {}
|
||||
}
|
||||
return RoomForm()
|
||||
return RoomForm(dismiss: dismiss)
|
||||
case .index:
|
||||
return MainPage(active: .rooms) {
|
||||
RoomsView(rooms: Room.mocks)
|
||||
|
||||
@@ -7,16 +7,6 @@ struct EffectiveLengthForm: HTML, Sendable {
|
||||
let dismiss: Bool
|
||||
|
||||
var body: some HTML {
|
||||
// div(
|
||||
// .id("effectiveLengthForm"),
|
||||
// .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
|
||||
// """
|
||||
// )
|
||||
// ) {
|
||||
ModalForm(id: "effectiveLengthForm", dismiss: dismiss) {
|
||||
h1(.class("text-2xl font-bold")) { "Effective Length" }
|
||||
form(.class("space-y-4 p-4")) {
|
||||
|
||||
@@ -13,13 +13,19 @@ struct EffectiveLengthsView: HTML, Sendable {
|
||||
) {
|
||||
Row {
|
||||
h1(.class("text-2xl font-bold")) { "Effective Lengths" }
|
||||
button(
|
||||
.hx.get(route: .effectiveLength(.form(dismiss: false))),
|
||||
.hx.target("#effectiveLengthForm"),
|
||||
.hx.swap(.outerHTML)
|
||||
) {
|
||||
Icon(.circlePlus)
|
||||
}
|
||||
PlusButton()
|
||||
.attributes(
|
||||
.hx.get(route: .effectiveLength(.form(dismiss: false))),
|
||||
.hx.target("#effectiveLengthForm"),
|
||||
.hx.swap(.outerHTML)
|
||||
)
|
||||
// button(
|
||||
// .hx.get(route: .effectiveLength(.form(dismiss: false))),
|
||||
// .hx.target("#effectiveLengthForm"),
|
||||
// .hx.swap(.outerHTML)
|
||||
// ) {
|
||||
// Icon(.circlePlus)
|
||||
// }
|
||||
}
|
||||
.attributes(.class("pb-6"))
|
||||
|
||||
@@ -32,7 +38,7 @@ struct EffectiveLengthsView: HTML, Sendable {
|
||||
}
|
||||
}
|
||||
|
||||
div(.id("effectiveLengthForm")) {}
|
||||
EffectiveLengthForm(dismiss: true)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -21,13 +21,12 @@ struct ComponentPressureLossesView: HTML, Sendable {
|
||||
) {
|
||||
Row {
|
||||
h1(.class("text-2xl font-bold")) { "Component Pressure Losses" }
|
||||
button(
|
||||
.hx.get(route: .frictionRate(.form(.componentPressureLoss, dismiss: false))),
|
||||
.hx.target("#componentLossForm"),
|
||||
.hx.swap(.outerHTML)
|
||||
) {
|
||||
Icon(.circlePlus)
|
||||
}
|
||||
PlusButton()
|
||||
.attributes(
|
||||
.hx.get(route: .frictionRate(.form(.componentPressureLoss, dismiss: false))),
|
||||
.hx.target("#componentLossForm"),
|
||||
.hx.swap(.outerHTML)
|
||||
)
|
||||
}
|
||||
|
||||
for row in componentPressureLosses {
|
||||
@@ -44,7 +43,8 @@ struct ComponentPressureLossesView: HTML, Sendable {
|
||||
.attributes(.class("text-xl font-bold"))
|
||||
}
|
||||
}
|
||||
div(.id("componentLossForm")) {}
|
||||
// div(.id("componentLossForm")) {}
|
||||
ComponentLossForm(dismiss: true)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
|
||||
script(.src("https://unpkg.com/htmx.org@2.0.8")) {}
|
||||
script(.src("https://cdn.tailwindcss.com")) {}
|
||||
script(.src("/js/main.js")) {}
|
||||
script(.src("https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4")) {}
|
||||
link(.rel(.stylesheet), .href("/css/main.css"))
|
||||
link(.rel(.icon), .href("/images/favicon.ico"), .custom(name: "type", value: "image/x-icon"))
|
||||
}
|
||||
|
||||
@@ -8,17 +8,10 @@ import Styleguide
|
||||
// TODO: Need to hold the project ID in hidden input field.
|
||||
struct RoomForm: HTML, Sendable {
|
||||
|
||||
let dismiss: Bool
|
||||
|
||||
var body: some HTML {
|
||||
div(
|
||||
.id("roomForm"),
|
||||
.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 p-4
|
||||
"""
|
||||
)
|
||||
) {
|
||||
ModalForm(id: "roomForm", dismiss: dismiss) {
|
||||
h1(.class("text-3xl font-bold pb-6")) { "Room" }
|
||||
form {
|
||||
div {
|
||||
|
||||
@@ -11,14 +11,26 @@ struct RoomsView: HTML, Sendable {
|
||||
var body: some HTML {
|
||||
div(.class("m-10")) {
|
||||
Row {
|
||||
h1(.class("text-3xl font-bold pb-6")) { "Rooms" }
|
||||
button(
|
||||
.hx.get(route: .room(.form(dismiss: false))),
|
||||
.hx.target("#roomForm"),
|
||||
.hx.swap(.outerHTML)
|
||||
) {
|
||||
Icon(.circlePlus)
|
||||
}
|
||||
h1(.class("text-3xl font-bold pb-6")) { "Room Loads" }
|
||||
// div(
|
||||
// .class("tooltip"),
|
||||
// .data("tip", value: "Add room")
|
||||
// ) {
|
||||
// PlusButton()
|
||||
// .attributes(
|
||||
// .hx.get(route: .room(.form(dismiss: false))),
|
||||
// .hx.target("#roomForm"),
|
||||
// .hx.swap(.outerHTML),
|
||||
// .class("btn")
|
||||
// )
|
||||
// }
|
||||
HTMLRaw(
|
||||
"""
|
||||
<div class="tooltip" data-tip="hello">
|
||||
<button class="btn">Hover me</button>
|
||||
</div>
|
||||
"""
|
||||
)
|
||||
}
|
||||
|
||||
div(
|
||||
@@ -26,39 +38,98 @@ struct RoomsView: HTML, Sendable {
|
||||
.class(
|
||||
"""
|
||||
border border-gray-200 rounded-lg shadow-lg
|
||||
space-y-4 p-4
|
||||
grid grid-cols-5 p-4
|
||||
"""
|
||||
)
|
||||
) {
|
||||
// Header
|
||||
Label("Name")
|
||||
// Pushes items to right
|
||||
Row {
|
||||
Label("Name")
|
||||
div {}
|
||||
Label("Heating Load")
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Label("Cooling Total")
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Label("Cooling Sensible")
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Label("Register Count")
|
||||
}
|
||||
.attributes(.class("border-b border-gray-200"))
|
||||
|
||||
// Divider
|
||||
div(.class("border-b border-gray-200 col-span-5 mb-2")) {}
|
||||
|
||||
// Rows
|
||||
for row in rooms {
|
||||
span { row.name }
|
||||
// Pushes items to right
|
||||
Row {
|
||||
span { row.name }
|
||||
div {}
|
||||
Number(row.heatingLoad)
|
||||
.attributes(.class("text-red-500"))
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Number(row.coolingLoad.total)
|
||||
.attributes(.class("text-green-400"))
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Number(row.coolingLoad.sensible)
|
||||
.attributes(.class("text-blue-400"))
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Number(row.registerCount)
|
||||
}
|
||||
.attributes(.class("border-b border-gray-200"))
|
||||
|
||||
// Divider
|
||||
div(.class("border-b border-gray-200 col-span-5 mb-2")) {}
|
||||
}
|
||||
|
||||
// Totals
|
||||
Label("Total")
|
||||
Row {
|
||||
div {}
|
||||
Number(rooms.heatingTotal)
|
||||
.attributes(.class("bg-red-500 text-white font-bold rounded-lg shadow-lg px-4 py-2"))
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Number(rooms.coolingTotal)
|
||||
.attributes(.class("bg-green-400 text-white font-bold rounded-lg shadow-lg px-4 py-2"))
|
||||
}
|
||||
Row {
|
||||
div {}
|
||||
Number(rooms.coolingSensibleTotal)
|
||||
.attributes(.class("bg-blue-400 text-white font-bold rounded-lg shadow-lg px-4 py-2"))
|
||||
}
|
||||
// Empty register count column
|
||||
div {}
|
||||
}
|
||||
|
||||
div(.id("roomForm")) {}
|
||||
RoomForm(dismiss: true)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
extension Array where Element == Room {
|
||||
var heatingTotal: Double {
|
||||
reduce(into: 0) { $0 += $1.heatingLoad }
|
||||
}
|
||||
|
||||
var coolingTotal: Double {
|
||||
reduce(into: 0) { $0 += $1.coolingLoad.total }
|
||||
}
|
||||
|
||||
var coolingSensibleTotal: Double {
|
||||
reduce(into: 0) { $0 += $1.coolingLoad.sensible }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user