michael/swift-duct-calc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Housh
2025-12-31 16:16:39 -05:00
parent c29e1acffe
commit 34bba7bdfc
15 changed files with 370 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
Sources/ViewController/Views/Rooms/RoomForm.swift
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)" }
}
}
}
}
}

71
Sources/ViewController/Views/Rooms/RoomTable.swift Normal file
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.
}
}
}
}
}
}

22
Sources/ViewController/Views/Sidebar.swift
View File

@@ -1,26 +1,28 @@
import Elementary
import Styleguide
// TODO: Need to add active to sidebar links.
struct Sidebar: HTML {
var body: some HTML {
aside(
.class(
"""
h-screen sticky top-0 border-r-3 border-gray-800 bg-gray-100 shadow
h-screen sticky top-0 min-w-[280px] flex-none border border-r-3 border-gray-800 bg-gray-100 shadow
"""
)
) {
row(title: "Project", icon: "map-pin", href: "/projects")
row(title: "Rooms", icon: "door-closed", href: "/rooms")
row(title: "Equivalent Lengths", icon: "ruler-dimension-line", href: "#")
row(title: "Friction Rate", icon: "square-function", href: "#")
row(title: "Duct Sizes", icon: "wind", href: "#")
row(title: "Project", icon: .mapPin, href: "/projects")
row(title: "Rooms", icon: .doorClosed, href: "/rooms")
row(title: "Equivalent Lengths", icon: .rulerDimensionLine, href: "#")
row(title: "Friction Rate", icon: .squareFunction, href: "#")
row(title: "Duct Sizes", icon: .wind, href: "#")
}
}
private func row(
title: String,
icon: String,
icon: Icon.Key,
href: String
) -> some HTML {
a(
@@ -31,10 +33,8 @@ struct Sidebar: HTML {
),
.href(href)
) {
i(.data("lucide", value: icon)) {}
p(
.class("text-xl font-bold")
) {
Icon(icon)
span(.class("text-xl font-bold")) {
title
}
}