feat: Style updates.

This commit is contained in:
2026-01-11 20:57:06 -05:00
parent f7c6373255
commit 0a68177aa8
19 changed files with 410 additions and 141 deletions

View File

@@ -15,37 +15,31 @@ struct ComponentPressureLossesView: HTML, Sendable {
}
var body: some HTML {
div(
.class(
"""
border border-gray-200 rounded-lg shadow-lg space-y-4 p-4
"""
)
) {
div(.class("space-y-4")) {
Row {
div(.class("flex space-x-4 items-center")) {
h1(.class("text-2xl font-bold")) { "Component Pressure Losses" }
div(.class("flex text-primary space-x-2 items-baseline")) {
Number(total)
.attributes(.class("text-xl font-bold badge badge-outline badge-primary"))
span(.class("text-sm italic")) { "Total" }
}
}
Tooltip("Add Component Loss") {
PlusButton()
.attributes(
.class("btn-ghost text-2xl"),
.showModal(id: ComponentLossForm.id())
)
h1(.class("text-2xl font-bold")) { "Component Pressure Losses" }
LabeledContent("Total") {
Badge(number: total)
}
}
.attributes(.class("px-4"))
table(.class("table table-zebra")) {
thead {
tr(.class("text-xl font-bold")) {
th { "Name" }
th { "Value" }
th {}
th {
div(.class("flex justify-end mx-auto")) {
Tooltip("Add Component Loss") {
PlusButton()
.attributes(
.class("btn-ghost text-2xl"),
.showModal(id: ComponentLossForm.id())
)
}
}
}
}
}
tbody {

View File

@@ -41,7 +41,7 @@ struct DuctSizingView: HTML, Sendable {
th(.class("hidden 2xl:table-cell")) { "Htg CFM" }
th(.class("hidden 2xl:table-cell")) { "Clg CFM" }
th { "Dsn CFM" }
th(.class("hidden xl:table-cell")) { "Round Size" }
th(.class("hidden 2xl:table-cell")) { "Round Size" }
th { "Velocity" }
th { "Final Size" }
th { "Flex Size" }
@@ -84,7 +84,7 @@ struct DuctSizingView: HTML, Sendable {
.attributes(
.class("badge badge-outline badge-\(room.designCFM.color) text-xl font-bold"))
}
td(.class("hidden xl:table-cell")) { Number(room.roundSize, digits: 0) }
td(.class("hidden 2xl:table-cell")) { Number(room.roundSize, digits: 0) }
td { Number(room.velocity) }
td {
Number(room.finalSize)
@@ -131,7 +131,7 @@ struct DuctSizingView: HTML, Sendable {
EditButton()
.attributes(
.class("join-item btn-ghost text-success hover:text-white"),
.class("join-item btn-ghost"),
.showModal(id: RectangularSizeForm.id(room))
)
}

View File

@@ -8,7 +8,7 @@ struct EquipmentInfoView: HTML, Sendable {
var body: some HTML {
div(
.class("space-y-4 border border-gray-200 rounded-lg shadow-lg p-4"),
.class("space-y-4 p-4"),
.id("equipmentInfo")
) {
@@ -27,23 +27,17 @@ struct EquipmentInfoView: HTML, Sendable {
if let equipmentInfo {
table(.class("table table-zebra")) {
thead {
tr {
th { Label("Name") }
th { Label("Value") }
}
}
tbody(.class("text-lg")) {
tr {
td { "Static Pressure" }
td { Label("Static Pressure") }
td { Number(equipmentInfo.staticPressure) }
}
tr {
td { "Heating CFM" }
td { Label("Heating CFM") }
td { Number(equipmentInfo.heatingCFM) }
}
tr {
td { "Cooling CFM" }
td { Label("Cooling CFM") }
td { Number(equipmentInfo.coolingCFM) }
}
}

View File

@@ -43,24 +43,26 @@ struct FrictionRateView: HTML, Sendable {
}
var body: some HTML {
div(.class("p-4 space-y-6")) {
Row {
h1(.class("text-4xl font-bold pb-6")) { "Friction Rate" }
div(.class("space-y-4")) {
div(.class("flex space-x-4 justify-end")) {
if let availableStaticPressure {
Label("Available Static Pressure")
Number(availableStaticPressure, digits: 2)
.attributes(.class("badge badge-lg badge-outline font-bold ms-4"))
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" }
div(.class("space-y-4 justify-end")) {
if let frictionRateDesignValue {
LabeledContent("Friction Rate Design Value") {
Badge(number: frictionRateDesignValue, digits: 2)
.attributes(.class("\(badgeColor)"))
}
.attributes(.class("justify-end"))
}
div(.class("flex space-x-4 justify-end")) {
if let frictionRateDesignValue {
Label("Friction Rate Design Value")
Number(frictionRateDesignValue, digits: 2)
.attributes(.class("badge badge-lg badge-outline \(badgeColor) font-bold"))
if let availableStaticPressure {
LabeledContent("Available Static Pressure") {
Badge(number: availableStaticPressure, digits: 2)
}
.attributes(.class("justify-end"))
}
}
}
@@ -94,12 +96,14 @@ struct FrictionRateView: HTML, Sendable {
.attributes(.class("hidden"), when: !showHighErrors)
}
div(.class("grid grid-cols-1 lg:grid-cols-2 gap-4")) {
EquipmentInfoView(equipmentInfo: equipmentInfo, projectID: projectID)
ComponentPressureLossesView(
componentPressureLosses: componentLosses, projectID: projectID
)
}
div(.class("divider")) {}
// div(.class("grid grid-cols-1 lg:grid-cols-2 gap-4")) {
// EquipmentInfoView(equipmentInfo: equipmentInfo, projectID: projectID)
ComponentPressureLossesView(
componentPressureLosses: componentLosses, projectID: projectID
)
// }
}
}
}

View File

@@ -5,7 +5,7 @@ import Styleguide
public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
public var title: String { "Manual-D" }
public var title: String { "Duct Calc" }
public var lang: String { "en" }
let inner: Inner
@@ -22,7 +22,11 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
script(.src("https://unpkg.com/htmx.org@2.0.8")) {}
script(.src("/js/main.js")) {}
link(.rel(.stylesheet), .href("/css/output.css"))
link(.rel(.icon), .href("/images/favicon.ico"), .custom(name: "type", value: "image/x-icon"))
link(
.rel(.icon),
.href("/images/favicon.ico"),
.init(name: "type", value: "image/x-icon")
)
link(
.rel(.icon),
.href("/images/favicon-32x32.png"),

View File

@@ -25,6 +25,7 @@ struct Navbar: HTML, Sendable {
}
.navButton()
}
}
Tooltip("Home", position: .right) {
@@ -35,7 +36,7 @@ struct Navbar: HTML, Sendable {
img(
.src("/images/mand_logo_sm.webp"),
)
span { "Manual-D" }
span { "Duct Calc" }
}
.navButton()
}

View File

@@ -7,51 +7,95 @@ struct ProjectDetail: HTML, Sendable {
let project: Project
var body: some HTML {
div(
.class(
"""
border border-gray-200 rounded-lg shadow-lg space-y-4 p-4 m-4
"""
)
) {
div {
Row {
h1(.class("text-2xl font-bold")) { "Project" }
EditButton()
.attributes(
.class("btn-ghost"),
.on(.click, "projectForm.showModal()")
)
}
Row {
Label("Name")
span { project.name }
div(.class("overflow-x-auto")) {
table(.class("table table-zebra text-lg")) {
tbody {
tr {
td { Label("Name") }
td { project.name }
}
tr {
td { Label("Street Address") }
td { project.streetAddress }
}
tr {
td { Label("City") }
td { project.city }
}
tr {
td { Label("State") }
td { project.state }
}
tr {
td { Label("Zip") }
td { project.zipCode }
}
}
}
}
.attributes(.class("border-b border-gray-200"))
Row {
Label("Address")
span { project.streetAddress }
}
.attributes(.class("border-b border-gray-200"))
Row {
Label("City")
span { project.city }
}
.attributes(.class("border-b border-gray-200"))
Row {
Label("State")
span { project.state }
}
.attributes(.class("border-b border-gray-200"))
Row {
Label("Zip")
span { project.zipCode }
}
ProjectForm(dismiss: true, project: project)
}
ProjectForm(dismiss: true, project: project)
}
// var body: some HTML {
// div(
// .class(
// """
// space-y-4 p-4 m-4
// """
// )
// ) {
// Row {
// h1(.class("text-2xl font-bold")) { "Project" }
// EditButton()
// .attributes(
// .class("btn-ghost"),
// .on(.click, "projectForm.showModal()")
// )
// }
//
// Row {
// Label("Name")
// span { project.name }
// }
// .attributes(.class("border-b border-gray-200"))
//
// Row {
// Label("Address")
// span { project.streetAddress }
// }
// .attributes(.class("border-b border-gray-200"))
//
// Row {
// Label("City")
// span { project.city }
// }
// .attributes(.class("border-b border-gray-200"))
//
// Row {
// Label("State")
// span { project.state }
// }
// .attributes(.class("border-b border-gray-200"))
//
// Row {
// Label("Zip")
// span { project.zipCode }
// }
// }
//
// ProjectForm(dismiss: true, project: project)
// }
}

View File

@@ -48,6 +48,14 @@ struct ProjectView: HTML, Sendable {
} onSuccess: { project in
ProjectDetail(project: project)
}
case .equipment:
await resultView(projectID) {
try await database.equipment.fetch(projectID)
} onSuccess: { equipment in
EquipmentInfoView(equipmentInfo: equipment, projectID: projectID)
}
// FIX:
// div { "Fix Me" }
case .rooms:
await resultView(projectID) {
try await (
@@ -179,6 +187,16 @@ extension ProjectView {
.attributes(.data("active", value: "true"), when: active == .rooms)
}
li(.class("flex w-full")) {
row(
title: "Equipment",
icon: .fan,
route: .project(.detail(projectID, .equipment(.index))),
isComplete: completedSteps.equipmentInfo
)
.attributes(.data("active", value: "true"), when: active == .equipment)
}
li(.class("w-full")) {
// Tooltip("Equivalent Lengths", position: .right) {
row(
@@ -235,6 +253,7 @@ extension ProjectView {
"""
),
.hx.get(href),
.hx.pushURL(true),
.hx.target("body"),
.hx.swap(.outerHTML)
) {

View File

@@ -12,44 +12,65 @@ struct RoomsView: HTML, Sendable {
let sensibleHeatRatio: Double?
var body: some HTML {
div {
h1(.class("text-2xl font-bold pb-6")) { "Room Loads" }
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" }
div(.class("border rounded-lg mb-6")) {
Row {
div {
div(.class("space-x-6 my-2 items-center")) {
Label("Sensible Heat Ratio")
.attributes(.class("my-auto"))
if let sensibleHeatRatio {
Number(sensibleHeatRatio)
.attributes(.class("badge badge-outline"))
div(.class("flex justify-end")) {
Tooltip("Project wide sensible heat ratio", position: .left) {
button(
.class(
"""
grid grid-cols-1 gap-2 p-4 justify-end
hover:bg-neutral hover:text-white hover:rounded-lg
"""
),
.showModal(id: SHRForm.id)
) {
LabeledContent("Sensible Heat Ratio") {
if let sensibleHeatRatio {
Badge(number: sensibleHeatRatio)
}
}
div(.class("flex justify-end")) {
SVG(.squarePen)
}
}
p(.class("text-sm italic")) {
"Project wide sensible heat ratio"
}
}
Tooltip("Edit SHR") {
EditButton()
.attributes(.class("btn-ghost"), .showModal(id: SHRForm.id))
}
}
.attributes(.class("m-4"))
SHRForm(projectID: projectID, sensibleHeatRatio: sensibleHeatRatio)
}
div(.class("overflow-x-auto rounded-box border")) {
div(.class("divider")) {}
SHRForm(projectID: projectID, sensibleHeatRatio: sensibleHeatRatio)
div(.class("overflow-x-auto")) {
table(.class("table table-zebra"), .id("roomsTable")) {
thead {
tr {
th { Label("Name") }
th { Label("Heating Load") }
th { Label("Cooling Total") }
th { Label("Cooling Sensible") }
th { Label("Register Count") }
th {
div(.class("flex justify-center")) {
Label("Heating Load")
}
}
th {
div(.class("flex justify-center")) {
Label("Cooling Total")
}
}
th {
div(.class("flex justify-center")) {
Label("Cooling Sensible")
}
}
th {
div(.class("flex justify-center")) {
Label("Register Count")
}
}
th {
div(.class("flex justify-end")) {
Tooltip("Add Room") {
@@ -58,8 +79,8 @@ struct RoomsView: HTML, Sendable {
.class("btn-ghost mx-auto"),
.showModal(id: RoomForm.id())
)
.attributes(.class("tooltip-left"))
}
.attributes(.class("tooltip-left"))
}
}
}
@@ -72,16 +93,22 @@ struct RoomsView: HTML, Sendable {
tr(.class("font-bold text-xl")) {
td { Label("Total") }
td {
Number(rooms.heatingTotal, digits: 0)
.attributes(.class("badge badge-outline badge-error badge-xl"))
div(.class("flex justify-center")) {
Badge(number: rooms.heatingTotal)
.attributes(.class("badge-error badge-xl"))
}
}
td {
Number(rooms.coolingTotal, digits: 0)
.attributes(.class("badge badge-outline badge-success badge-xl"))
div(.class("flex justify-center")) {
Badge(number: rooms.coolingTotal, digits: 0)
.attributes(.class("badge-success badge-xl"))
}
}
td {
Number(rooms.coolingSensible(shr: sensibleHeatRatio), digits: 0)
.attributes(.class("badge badge-outline badge-info badge-xl"))
div(.class("flex justify-center")) {
Badge(number: rooms.coolingSensible(shr: sensibleHeatRatio), digits: 0)
.attributes(.class("badge-info badge-xl"))
}
}
td {}
td {}
@@ -113,19 +140,27 @@ struct RoomsView: HTML, Sendable {
tr(.id("roomRow_\(room.name)")) {
td { room.name }
td {
Number(room.heatingLoad, digits: 0)
.attributes(.class("text-error"))
div(.class("flex justify-center")) {
Number(room.heatingLoad, digits: 0)
.attributes(.class("text-error"))
}
}
td {
Number(room.coolingTotal, digits: 0)
.attributes(.class("text-success"))
div(.class("flex justify-center")) {
Number(room.coolingTotal, digits: 0)
.attributes(.class("text-success"))
}
}
td {
Number(coolingSensible, digits: 0)
.attributes(.class("text-info"))
div(.class("flex justify-center")) {
Number(coolingSensible, digits: 0)
.attributes(.class("text-info"))
}
}
td {
Number(room.registerCount)
div(.class("flex justify-center")) {
Number(room.registerCount)
}
}
td {
div(.class("flex justify-end")) {