feat: Adds multi-step form to generate equivalent lengths for a project.

This commit is contained in:
2026-01-07 11:56:04 -05:00
parent dbf7e3b1b4
commit f8bed40670
12 changed files with 450 additions and 92 deletions

View File

@@ -0,0 +1,46 @@
import DatabaseClient
import ManualDCore
extension SiteRoute.View.ProjectRoute.EquivalentLengthRoute.StepThree {
func validate() throws(ValidationError) {
guard groupGroups.count == groupLengths.count,
groupGroups.count == groupLetters.count,
groupGroups.count == groupQuantities.count
else {
throw ValidationError("Equivalent length form group counts are not equal.")
}
}
var groups: [EffectiveLength.Group] {
var groups = [EffectiveLength.Group]()
for (n, group) in groupGroups.enumerated() {
groups.append(
.init(
group: group,
letter: groupLetters[n],
value: Double(groupLengths[n]),
quantity: groupQuantities[n]
)
)
}
return groups
}
}
extension EffectiveLength.Create {
init(
form: SiteRoute.View.ProjectRoute.EquivalentLengthRoute.StepThree,
projectID: Project.ID
) {
self.init(
projectID: projectID,
name: form.name,
type: form.type,
straightLengths: form.straightLengths,
groups: form.groups
)
}
}

View File

@@ -39,10 +39,6 @@ extension ViewController.Request {
}
case .project(let route):
return try await route.renderView(on: self)
case .effectiveLength(let route):
return try await route.renderView(isHtmxRequest: isHtmxRequest)
// case .user(let route):
// return try await route.renderView(isHtmxRequest: isHtmxRequest)
default:
// FIX: FIX
return _render(isHtmxRequest: false) {
@@ -117,6 +113,8 @@ extension SiteRoute.View.ProjectRoute {
}
case .equipment(let route):
return try await route.renderView(on: request, projectID: projectID)
case .equivalentLength(let route):
return try await route.renderView(on: request, projectID: projectID)
case .frictionRate(let route):
return try await route.renderView(on: request, projectID: projectID)
case .rooms(let route):
@@ -239,16 +237,21 @@ extension SiteRoute.View.ProjectRoute.FrictionRateRoute.FormType {
}
}
extension SiteRoute.View.EffectiveLengthRoute {
extension SiteRoute.View.ProjectRoute.EquivalentLengthRoute {
func renderView(
on request: ViewController.Request,
projectID: Project.ID
) async throws -> AnySendableHTML {
@Dependency(\.database) var database
func renderView(isHtmxRequest: Bool) async throws -> AnySendableHTML {
switch self {
case .index:
return _render(isHtmxRequest: isHtmxRequest, active: .effectiveLength) {
EffectiveLengthsView(effectiveLengths: EffectiveLength.mocks)
return request.view {
ProjectView(projectID: projectID, activeTab: .equivalentLength)
}
case .form(let dismiss):
return EffectiveLengthForm(dismiss: dismiss)
return EffectiveLengthForm(projectID: projectID, dismiss: dismiss)
case .field(let type, let style):
switch type {
@@ -258,7 +261,27 @@ extension SiteRoute.View.EffectiveLengthRoute {
// FIX:
return GroupField(style: style ?? .supply)
}
case .submit(let step):
switch step {
case .one(let stepOne):
return EffectiveLengthForm.StepTwo(
projectID: projectID, stepOne: stepOne, effectiveLength: nil
)
case .two(let stepTwo):
request.logger.debug("ViewController: Got step two...")
return EffectiveLengthForm.StepThree(
projectID: projectID, effectiveLength: nil, stepTwo: stepTwo
)
case .three(let stepThree):
request.logger.debug("ViewController: Got step three: \(stepThree)")
try stepThree.validate()
_ = try await database.effectiveLength.create(.init(form: stepThree, projectID: projectID))
return ProjectView(projectID: projectID, activeTab: .equivalentLength)
}
}
}
}

View File

@@ -9,34 +9,100 @@ import Styleguide
// Currently when the select field is changed it doesn't change the group
// I can get it to add a new one.
// TODO: Add back buttons / capability??
struct EffectiveLengthForm: HTML, Sendable {
static let id = "equivalentLengthForm"
let projectID: Project.ID
let dismiss: Bool
let type: EffectiveLength.EffectiveLengthType
init(dismiss: Bool, type: EffectiveLength.EffectiveLengthType = .supply) {
init(
projectID: Project.ID,
dismiss: Bool,
type: EffectiveLength.EffectiveLengthType = .supply
) {
self.projectID = projectID
self.dismiss = dismiss
self.type = type
}
var body: some HTML {
ModalForm(id: "effectiveLengthForm", dismiss: dismiss) {
ModalForm(id: Self.id, dismiss: dismiss) {
h1(.class("text-2xl font-bold")) { "Effective Length" }
form(.class("space-y-4 p-4")) {
div {
label(.for("name")) { "Name" }
Input(id: "name", placeholder: "Name")
.attributes(.type(.text), .required, .autofocus)
div(.id("formStep")) {
StepOne(projectID: projectID, effectiveLength: nil)
}
}
}
struct StepOne: HTML, Sendable {
let projectID: Project.ID
let effectiveLength: EffectiveLength?
var route: String {
let baseRoute = SiteRoute.View.router.path(
for: .project(.detail(projectID, .equivalentLength(.index)))
)
return "\(baseRoute)/stepOne"
}
var body: some HTML {
form(
.class("space-y-4"),
.hx.post(route),
.hx.target("#formStep"),
.hx.swap(.innerHTML)
) {
if let id = effectiveLength?.id {
input(.class("hidden"), .name("id"), .value("\(id)"))
}
div {
label(.for("type")) { "Type" }
GroupTypeSelect(selected: type)
.attributes(.class("w-full border rounded-md"))
Input(id: "name", placeholder: "Name")
.attributes(.type(.text), .required, .autofocus, .value(effectiveLength?.name))
GroupTypeSelect(projectID: projectID, selected: effectiveLength?.type ?? .supply)
Row {
div {}
SubmitButton(title: "Next")
}
}
}
}
struct StepTwo: HTML, Sendable {
let projectID: Project.ID
let stepOne: SiteRoute.View.ProjectRoute.EquivalentLengthRoute.StepOne
let effectiveLength: EffectiveLength?
var route: String {
let baseRoute = SiteRoute.View.router.path(
for: .project(.detail(projectID, .equivalentLength(.index)))
)
return "\(baseRoute)/stepTwo"
}
var body: some HTML {
form(
.class("space-y-4"),
.hx.post(route),
.hx.target("#formStep"),
.hx.swap(.innerHTML)
) {
if let id = effectiveLength?.id {
input(.class("hidden"), .name("id"), .value("\(id)"))
}
input(.class("hidden"), .name("name"), .value(stepOne.name))
input(.class("hidden"), .name("type"), .value(stepOne.type.rawValue))
Row {
Label { "Straigth Lengths" }
button(
.type(.button),
.hx.get(route: .effectiveLength(.field(.straightLength))),
.hx.get(
route: .project(.detail(projectID, .equivalentLength(.field(.straightLength))))
),
.hx.target("#straightLengths"),
.hx.swap(.beforeEnd)
) {
@@ -47,11 +113,50 @@ struct EffectiveLengthForm: HTML, Sendable {
StraightLengthField()
}
Row {
div {}
SubmitButton(title: "Next")
}
}
}
}
struct StepThree: HTML, Sendable {
let projectID: Project.ID
let effectiveLength: EffectiveLength?
let stepTwo: SiteRoute.View.ProjectRoute.EquivalentLengthRoute.StepTwo
var route: String {
let baseRoute = SiteRoute.View.router.path(
for: .project(.detail(projectID, .equivalentLength(.index)))
)
return "\(baseRoute)/stepThree"
}
var body: some HTML {
form(
.class("space-y-4"),
.hx.post(route),
.hx.target("body"),
.hx.swap(.outerHTML)
) {
if let id = effectiveLength?.id {
input(.class("hidden"), .name("id"), .value("\(id)"))
}
input(.class("hidden"), .name("name"), .value(stepTwo.name))
input(.class("hidden"), .name("type"), .value(stepTwo.type.rawValue))
for length in stepTwo.straightLengths {
input(.class("hidden"), .name("straightLengths"), .value("\(length)"))
}
Row {
Label { "Groups" }
button(
.type(.button),
.hx.get(route: .effectiveLength(.field(.group, style: type))),
.hx.get(
route: .project(
.detail(projectID, .equivalentLength(.field(.group, style: stepTwo.type))))
),
.hx.target("#groups"),
.hx.swap(.beforeEnd)
) {
@@ -59,20 +164,11 @@ struct EffectiveLengthForm: HTML, Sendable {
}
}
div(.id("groups"), .class("space-y-4")) {
GroupField(style: type)
GroupField(style: stepTwo.type)
}
Row {
div {}
div(.class("space-x-4")) {
CancelButton()
.attributes(
.hx.get(route: .effectiveLength(.form(dismiss: true))),
.hx.target("#effectiveLengthForm"),
.hx.swap(.outerHTML)
)
SubmitButton()
}
SubmitButton()
}
}
}
@@ -87,13 +183,17 @@ struct StraightLengthField: HTML, Sendable {
}
var body: some HTML<HTMLTag.div> {
div(.class("pb-4")) {
Row {
Input(
name: "straightLengths[]",
name: "straightLengths",
placeholder: "Length"
)
.attributes(.type(.number), .min("0"))
.attributes(.type(.number), .min("0"), .autofocus, .required)
TrashButton()
.attributes(.data("remove", value: "true"))
}
.attributes(.hx.ext("remove"))
}
}
@@ -103,17 +203,17 @@ struct GroupField: HTML, Sendable {
var body: some HTML {
Row {
// Input(name: "group[][group]", placeholder: "Group")
// .attributes(.type(.number), .min("0"))
GroupSelect(style: style)
Input(name: "group[][letter]", placeholder: "Letter")
.attributes(.type(.text))
Input(name: "group[][length]", placeholder: "Length")
.attributes(.type(.number), .min("0"))
Input(name: "group[][quantity]", placeholder: "Quantity")
.attributes(.type(.number), .min("1"), .value("1"))
Input(name: "group[letter]", placeholder: "Letter")
.attributes(.type(.text), .autofocus, .required)
Input(name: "group[length]", placeholder: "Length")
.attributes(.type(.number), .min("0"), .required)
Input(name: "group[quantity]", placeholder: "Quantity")
.attributes(.type(.number), .min("1"), .value("1"), .required)
TrashButton()
.attributes(.data("remove", value: "true"))
}
.attributes(.class("space-x-2"))
.attributes(.class("space-x-2"), .hx.ext("remove"))
}
}
@@ -123,7 +223,8 @@ struct GroupSelect: HTML, Sendable {
var body: some HTML {
select(
.name("group")
.name("group[group]"),
.class("select")
) {
for value in style.selectOptions {
option(.value("\(value)")) { "\(value)" }
@@ -135,17 +236,14 @@ struct GroupSelect: HTML, Sendable {
struct GroupTypeSelect: HTML, Sendable {
var selected: EffectiveLength.EffectiveLengthType
let projectID: Project.ID
let selected: EffectiveLength.EffectiveLengthType
var body: some HTML<HTMLTag.select> {
select(.name("type"), .id("type")) {
select(.class("select"), .name("type"), .id("type")) {
for value in EffectiveLength.EffectiveLengthType.allCases {
option(
.value("\(value.rawValue)"),
.hx.get(route: .effectiveLength(.field(.group, style: value))),
.hx.target("#groups"),
.hx.swap(.beforeEnd),
.hx.trigger(.event(.change).from("#type"))
) { value.title }
.attributes(.selected, when: value == selected)
}

View File

@@ -5,6 +5,7 @@ import Styleguide
struct EffectiveLengthsView: HTML, Sendable {
let projectID: Project.ID
let effectiveLengths: [EffectiveLength]
var body: some HTML {
@@ -12,20 +13,9 @@ struct EffectiveLengthsView: HTML, Sendable {
.class("m-4")
) {
Row {
h1(.class("text-2xl font-bold")) { "Effective Lengths" }
h1(.class("text-2xl font-bold")) { "Equivalent Lengths" }
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(.showModal(id: EffectiveLengthForm.id))
}
.attributes(.class("pb-6"))
@@ -38,7 +28,7 @@ struct EffectiveLengthsView: HTML, Sendable {
}
}
EffectiveLengthForm(dismiss: true)
EffectiveLengthForm(projectID: projectID, dismiss: true)
}
}

View File

@@ -23,6 +23,14 @@ public struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable
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"))
HTMLRaw(
"""
<script src="https://unpkg.com/htmx-remove@latest"
integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"
crossorigin="anonymous">
</script>
"""
)
}
public var body: some HTML {

View File

@@ -42,8 +42,9 @@ struct ProjectView: HTML, Sendable {
sensibleHeatRatio: database.projects.getSensibleHeatRatio(projectID)
)
case .effectiveLength:
case .equivalentLength:
try await EffectiveLengthsView(
projectID: projectID,
effectiveLengths: database.effectiveLength.fetch(projectID)
)
case .frictionRate:
@@ -103,11 +104,19 @@ struct Sidebar: HTML {
)
.attributes(.data("active", value: active == .project ? "true" : "false"))
row(title: "Rooms", icon: .doorClosed, route: .project(.detail(projectID, .rooms(.index))))
.attributes(.data("active", value: active == .rooms ? "true" : "false"))
row(
title: "Rooms",
icon: .doorClosed,
route: .project(.detail(projectID, .rooms(.index)))
)
.attributes(.data("active", value: active == .rooms ? "true" : "false"))
row(title: "Equivalent Lengths", icon: .rulerDimensionLine, route: .effectiveLength(.index))
.attributes(.data("active", value: active == .effectiveLength ? "true" : "false"))
row(
title: "Equivalent Lengths",
icon: .rulerDimensionLine,
route: .project(.detail(projectID, .equivalentLength(.index)))
)
.attributes(.data("active", value: active == .equivalentLength ? "true" : "false"))
row(
title: "Friction Rate",