WIP: Updates rooms views.

This commit is contained in:
2026-01-01 10:12:02 -05:00
parent 582d94d13b
commit 7c37392390
7 changed files with 148 additions and 160 deletions

View File

@@ -28,7 +28,7 @@ extension SiteRoute {
extension SiteRoute.View {
public enum ProjectRoute: Equatable, Sendable {
case create(Project.Create)
case form
case form(dismiss: Bool = false)
case index
static let rootPath = "projects"
@@ -54,6 +54,9 @@ extension SiteRoute.View {
"create"
}
Method.get
Query {
Field("dismiss", default: false) { Bool.parser() }
}
}
Route(.case(Self.index)) {
Path { rootPath }
@@ -65,7 +68,7 @@ extension SiteRoute.View {
extension SiteRoute.View {
public enum RoomRoute: Equatable, Sendable {
case form
case form(dismiss: Bool = false)
case index
static let rootPath = "rooms"
@@ -77,6 +80,9 @@ extension SiteRoute.View {
"create"
}
Method.get
Query {
Field("dismiss", default: false) { Bool.parser() }
}
}
Route(.case(Self.index)) {
Path { rootPath }

View File

@@ -25,10 +25,12 @@ extension SiteRoute.View.ProjectRoute {
return MainPage {
ProjectView(project: .mock)
}
case .form:
return MainPage {
ProjectForm()
case .form(let dismiss):
guard !dismiss else {
return div(.id("projectForm")) {}
}
return ProjectForm()
case .create:
return mainPage
}
@@ -38,14 +40,14 @@ extension SiteRoute.View.ProjectRoute {
extension SiteRoute.View.RoomRoute {
func renderView(isHtmxRequest: Bool) async throws -> AnySendableHTML {
switch self {
case .form:
// TODO: Check that it's an htmx request.
case .form(let dismiss):
guard !dismiss else {
return div(.id("roomForm")) {}
}
return RoomForm()
case .index:
return MainPage {
div {
RoomTable(rooms: Room.mocks)
}
RoomsView(rooms: Room.mocks)
}
}
}

View File

@@ -1,6 +1,7 @@
import Elementary
import ElementaryHTMX
import ManualDCore
import Styleguide
struct ProjectForm: HTML, Sendable {
@@ -13,75 +14,58 @@ struct ProjectForm: HTML, Sendable {
}
var body: some HTML {
// TODO: Add htmx attributes.
div(.class("mx-20 my-20")) {
h1(.class("text-3xl font-bold")) { "Project" }
form(.class("w-full max-w-sm")) {
div(.class("flex items-center mb-6")) {
label(
.for("name"), .class("block text-gray-500 font-bold mr-4")
) { "Name:" }
input(
.type(.text), .name("name"), .placeholder("Customer Name"),
.value(project?.name ?? ""), .required, .autofocus
div(
.id("projectForm"),
.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
"""
)
.defaultInput()
) {
h1(.class("text-3xl font-bold pb-6 ps-2")) { "Project" }
form(.class("space-y-4 p-4")) {
div {
label(.for("name")) { "Name" }
Input(id: "name", placeholder: "Name")
.attributes(.type(.text), .required, .autofocus)
}
div(.class("flex items-center mb-6")) {
label(.for("streetAddress"), .class("block text-gray-500 font-bold mr-4")) { "Address:" }
input(
.type(.text), .name("streetAddress"),
.placeholder("Street Address"),
.value(project?.streetAddress ?? ""),
.required
div {
label(.for("streetAddress")) { "Address" }
Input(id: "streetAddress", placeholder: "Street Address")
.attributes(.type(.text), .required)
}
div {
label(.for("city")) { "City" }
Input(id: "city", placeholder: "City")
.attributes(.type(.text), .required)
}
div {
label(.for("state")) { "State" }
Input(id: "state", placeholder: "State")
.attributes(.type(.text), .required)
}
div {
label(.for("zipCode")) { "Zip" }
Input(id: "zipCode", placeholder: "Zip code")
.attributes(.type(.text), .required)
}
Row {
div {}
div(.class("space-x-4")) {
CancelButton()
.attributes(
.hx.get(route: .project(.form(dismiss: true))),
.hx.target("#projectForm"),
.hx.swap(.outerHTML)
)
.defaultInput()
SubmitButton()
}
// div(.class("w-full space-x-2")) {
// label(.for("city")) { "City:" }
//
// input(
// .type(.text), .name("city"),
// .placeholder("City"),
// .value(project?.city ?? ""),
// .required
// )
// .defaultInput()
// }
// div(.class("w-full space-y-2")) {
// label(.for("state")) { "State:" }
// input(
// .type(.text), .name("state"),
// .placeholder("State"),
// .value(project?.state ?? ""),
// .required
// )
// .defaultInput()
// }
// div(.class("w-full space-y-2")) {
// label(.for("zipCode")) {
// "Zip:"
// }
// input(
// .type(.text), .name("zipCode"),
// .placeholder("Zip Code"),
// .value(project?.zipCode ?? ""),
// .required
// )
// .defaultInput()
// }
}
}
}
}
// TODO: Move
extension input {
func defaultInput() -> some HTML<HTMLTag.input> {
attributes(
.class(
"w-full rounded-md bg-white px-3 py-1.5 text-slate-900 outline-1 -outline-offset-1 outline-slate-300 focus:outline focus:-outline-offset-2 focus:outline-indigo-600"
)
)
}
}

View File

@@ -16,7 +16,12 @@ struct ProjectView: HTML, Sendable {
) {
Row {
h1(.class("text-2xl font-bold")) { "Project" }
// FIX: Add edit button.
EditButton()
.attributes(
.hx.get(route: .project(.form(dismiss: false))),
.hx.target("#projectForm"),
.hx.swap(.outerHTML)
)
}
Row {

View File

@@ -10,19 +10,17 @@ struct RoomForm: HTML, Sendable {
var body: some HTML {
div(
.class(
"fixed top-20 z-50 w-1/2 mx-[20vw] my-10 bg-gray-700 rounded-lg shadow-lg p-4"
),
.id("roomForm")
) {
h1(.class("text-3xl font-bold pb-6")) { "New Room" }
form(
.id("roomForm"),
.class(
"""
space-y-4
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
"""
)
) {
h1(.class("text-3xl font-bold pb-6")) { "Room" }
form {
div {
label(.for("name")) { "Name:" }
Input(id: "name", placeholder: "Room Name")
@@ -49,8 +47,8 @@ struct RoomForm: HTML, Sendable {
div(.class("space-x-4")) {
CancelButton()
.attributes(
.hx.get(route: .room(.index)),
.hx.target("body"),
.hx.get(route: .room(.form(dismiss: true))),
.hx.target("#roomForm"),
.hx.swap(.outerHTML)
)
SubmitButton()

View File

@@ -1,71 +0,0 @@
import Dependencies
import Elementary
import ElementaryHTMX
import Foundation
import ManualDCore
import Styleguide
struct RoomTable: HTML, Sendable {
let rooms: [Room]
var body: some HTML {
div(.class("m-10")) {
h1(.class("text-3xl font-bold")) { "Rooms" }
table(
.id("rooms"),
.class(
"w-full border-collapse border border-gray-200 table-fixed"
)
) {
thead { tableHeader }
tbody {
Rows(rooms: rooms)
}
}
div(.id("roomForm")) {}
}
}
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")) { "Heating Load" }
th(.class("border border-gray-200 text-xl font-bold")) { "Cooling Total" }
th(.class("border border-gray-200 text-xl font-bold")) { "Cooling Sensible" }
th(.class("border border-gray-200 text-xl font-bold")) { "Register Count" }
th(.class("border border-gray-200 text-xl font-bold")) {
div(.class("flex justify-between")) {
div {}
button(
.class("px-2"),
.hx.get(route: .room(.form)),
.hx.target("#roomForm"),
.hx.swap(.outerHTML)
) {
Icon(.circlePlus)
}
}
}
}
}
private struct Rows: HTML, Sendable {
let rooms: [Room]
var body: some HTML {
for room in rooms {
tr {
td(.class("border border-gray-200 p-2")) { room.name }
td(.class("border border-gray-200 p-2")) { "\(room.heatingLoad)" }
td(.class("border border-gray-200 p-2")) { "\(room.coolingLoad.total)" }
td(.class("border border-gray-200 p-2")) { "\(room.coolingLoad.sensible)" }
td(.class("border border-gray-200 p-2")) { "\(room.registerCount)" }
td(.class("border border-gray-200 p-2")) {
// TODO: Add edit button.
}
}
}
}
}
}

View File

@@ -0,0 +1,64 @@
import Dependencies
import Elementary
import ElementaryHTMX
import Foundation
import ManualDCore
import Styleguide
struct RoomsView: HTML, Sendable {
let rooms: [Room]
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)
}
}
div(
.id("roomTable"),
.class(
"""
border border-gray-200 rounded-lg shadow-lg
space-y-4 p-4
"""
)
) {
// Header
Row {
Label("Name")
Label("Heating Load")
Label("Cooling Total")
Label("Cooling Sensible")
Label("Register Count")
}
.attributes(.class("border-b border-gray-200"))
// Rows
for row in rooms {
Row {
span { row.name }
Number(row.heatingLoad)
.attributes(.class("text-red-500"))
Number(row.coolingLoad.total)
.attributes(.class("text-green-400"))
Number(row.coolingLoad.sensible)
.attributes(.class("text-blue-400"))
Number(row.registerCount)
}
.attributes(.class("border-b border-gray-200"))
}
}
div(.id("roomForm")) {}
}
}
}