WIP: Moves some common views to a Styleguide module, working on room table and form.

This commit is contained in:
2025-12-31 16:16:39 -05:00
parent c29e1acffe
commit 34bba7bdfc
15 changed files with 370 additions and 90 deletions

View File

@@ -1,97 +1,63 @@
import Dependencies
import Elementary
import ElementaryHTMX
import Foundation
import ManualDCore
import Styleguide
// TODO: Need to hold the project ID in hidden input field.
struct RoomForm: HTML, Sendable {
var body: some HTML {
div(.class("mx-10 my-10")) {
h1(.class("text-3xl font-bold pb-6")) { "Rooms " }
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(
.class(
"""
grid md:grid-cols-3 gap-4
space-y-4
"""
)
) {
div(.class("col-span-1")) {
div {
label(.for("name")) { "Name:" }
}
input(
.type(.text), .name("name"), .id("name"), .placeholder("Room Name"), .required,
.autofocus
)
div {
label(.for("name")) { "Name:" }
Input(id: "name", placeholder: "Room Name")
.attributes(.type(.text), .required, .autofocus)
}
div(.class("col-span-1")) {
div {
label(.for("heatingLoad")) { "Heating Load:" }
}
input(
.type(.number), .name("heatingLoad"), .id("heatingLoad"), .placeholder("Heating Load"),
.required
)
div {
label(.for("heatingLoad")) { "Heating Load:" }
Input(id: "heatingLoad", placeholder: "Heating Load")
.attributes(.type(.number), .required, .min("0"))
}
div(.class("col-span-1")) {
div {
label(.for("coolingLoad")) { "Cooling Load:" }
}
input(
.type(.number), .name("coolingLoad"), .id("coolingLoad"), .placeholder("Cooling Load"),
.required
)
div {
label(.for("coolingLoad")) { "Cooling Load:" }
Input(id: "coolingLoad", placeholder: "Cooling Load")
.attributes(.type(.number), .required, .min("0"))
}
div {
label(.for("registerCount")) { "Registers:" }
Input(id: "registerCount", placeholder: "Register Count")
.attributes(.type(.number), .required, .value("1"), .min("1"))
}
Row {
// Force button to the right, probably a better way.
div {}
div(.class("space-x-4")) {
CancelButton()
.attributes(
.hx.get(route: .room(.index)),
.hx.target("body"),
.hx.swap(.outerHTML)
)
SubmitButton()
}
}
.attributes(.class("py-4"))
}
}
}
}
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)
}
}
}
}
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" }
}
}
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)" }
}
}
}
}
}

View File

@@ -0,0 +1,71 @@
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.
}
}
}
}
}
}