feat: Updates rectangular size to be a modal form, some style updates to other views.
This commit is contained in:
@@ -2206,9 +2206,6 @@
|
||||
.collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -5372,6 +5369,9 @@
|
||||
.my-2 {
|
||||
margin-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
.my-auto {
|
||||
margin-block: auto;
|
||||
}
|
||||
.label {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: inline-flex;
|
||||
@@ -5578,12 +5578,6 @@
|
||||
.ms-4 {
|
||||
margin-inline-start: calc(var(--spacing) * 4);
|
||||
}
|
||||
.ms-6 {
|
||||
margin-inline-start: calc(var(--spacing) * 6);
|
||||
}
|
||||
.ms-8 {
|
||||
margin-inline-start: calc(var(--spacing) * 8);
|
||||
}
|
||||
.me-4 {
|
||||
margin-inline-end: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -5626,6 +5620,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.mt-1\.5 {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -6760,9 +6763,6 @@
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
@@ -7826,9 +7826,6 @@
|
||||
.ps-2 {
|
||||
padding-inline-start: calc(var(--spacing) * 2);
|
||||
}
|
||||
.ps-8 {
|
||||
padding-inline-start: calc(var(--spacing) * 8);
|
||||
}
|
||||
.file-input-xl {
|
||||
@layer daisyui.l1.l2 {
|
||||
padding-inline-end: calc(0.25rem * 6);
|
||||
@@ -7843,6 +7840,9 @@
|
||||
.pe-2 {
|
||||
padding-inline-end: calc(var(--spacing) * 2);
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pt-6 {
|
||||
padding-top: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -7852,6 +7852,9 @@
|
||||
.pb-6 {
|
||||
padding-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.align-baseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.file-input-lg {
|
||||
@layer daisyui.l1.l2 {
|
||||
--size: calc(var(--size-field, 0.25rem) * 12);
|
||||
@@ -9377,6 +9380,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-white {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus\:outline {
|
||||
&:focus {
|
||||
outline-style: var(--tw-outline-style);
|
||||
@@ -9393,11 +9403,6 @@
|
||||
outline-color: var(--color-indigo-600);
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-1 {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-2 {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -9456,26 +9461,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.lg\:visible {
|
||||
@media (width >= 64rem) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.lg\:block {
|
||||
@media (width >= 64rem) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.lg\:inline-block {
|
||||
@media (width >= 64rem) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.lg\:table-cell {
|
||||
@media (width >= 64rem) {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-2 {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -9486,26 +9471,11 @@
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.xl\:visible {
|
||||
@media (width >= 80rem) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.xl\:table-cell {
|
||||
@media (width >= 80rem) {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
.xl\:grid-cols-2 {
|
||||
@media (width >= 80rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.xl\:grid-cols-3 {
|
||||
@media (width >= 80rem) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.\32 xl\:table-cell {
|
||||
@media (width >= 96rem) {
|
||||
display: table-cell;
|
||||
|
||||
@@ -9,6 +9,8 @@ extension DatabaseClient {
|
||||
public struct Rooms: Sendable {
|
||||
public var create: @Sendable (Room.Create) async throws -> Room
|
||||
public var delete: @Sendable (Room.ID) async throws -> Void
|
||||
public var deleteRectangularSize:
|
||||
@Sendable (Room.ID, DuctSizing.RectangularDuct.ID) async throws -> Room
|
||||
public var get: @Sendable (Room.ID) async throws -> Room?
|
||||
public var fetch: @Sendable (Project.ID) async throws -> [Room]
|
||||
public var update: @Sendable (Room.ID, Room.Update) async throws -> Room
|
||||
@@ -31,6 +33,18 @@ extension DatabaseClient.Rooms: TestDependencyKey {
|
||||
}
|
||||
try await model.delete(on: database)
|
||||
},
|
||||
deleteRectangularSize: { roomID, rectangularDuctID in
|
||||
guard let model = try await RoomModel.find(roomID, on: database) else {
|
||||
throw NotFoundError()
|
||||
}
|
||||
model.rectangularSizes?.removeAll {
|
||||
$0.id == rectangularDuctID
|
||||
}
|
||||
if model.hasChanges {
|
||||
try await model.save(on: database)
|
||||
}
|
||||
return try model.toDTO()
|
||||
},
|
||||
get: { id in
|
||||
try await RoomModel.find(id, on: database).map { try $0.toDTO() }
|
||||
},
|
||||
|
||||
@@ -3,15 +3,18 @@ import Foundation
|
||||
|
||||
public enum DuctSizing {
|
||||
|
||||
public struct RectangularDuct: Codable, Equatable, Sendable {
|
||||
public struct RectangularDuct: Codable, Equatable, Identifiable, Sendable {
|
||||
|
||||
public let id: UUID
|
||||
public let register: Int?
|
||||
public let height: Int
|
||||
|
||||
public init(
|
||||
id: UUID = .init(),
|
||||
register: Int? = nil,
|
||||
height: Int,
|
||||
) {
|
||||
self.id = id
|
||||
self.register = register
|
||||
self.height = height
|
||||
}
|
||||
|
||||
@@ -677,6 +677,7 @@ extension SiteRoute.View.ProjectRoute {
|
||||
|
||||
public enum DuctSizingRoute: Equatable, Sendable {
|
||||
case index
|
||||
case deleteRectangularSize(Room.ID, DuctSizing.RectangularDuct.ID)
|
||||
case roomRectangularForm(Room.ID, RoomRectangularForm)
|
||||
|
||||
static let rootPath = "duct-sizing"
|
||||
@@ -686,6 +687,17 @@ extension SiteRoute.View.ProjectRoute {
|
||||
Path { rootPath }
|
||||
Method.get
|
||||
}
|
||||
Route(.case(Self.deleteRectangularSize)) {
|
||||
Path {
|
||||
rootPath
|
||||
"room"
|
||||
Room.ID.parser()
|
||||
}
|
||||
Method.delete
|
||||
Query {
|
||||
Field("rectangularSize") { DuctSizing.RectangularDuct.ID.parser() }
|
||||
}
|
||||
}
|
||||
Route(.case(Self.roomRectangularForm)) {
|
||||
Path {
|
||||
rootPath
|
||||
|
||||
@@ -94,7 +94,7 @@ public struct TrashButton: HTML, Sendable {
|
||||
public var body: some HTML<HTMLTag.button> {
|
||||
button(
|
||||
.type(.button),
|
||||
.class("btn btn-error btn-circle dark:text-white")
|
||||
.class("btn btn-error")
|
||||
) {
|
||||
SVG(.trash)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import Elementary
|
||||
import Foundation
|
||||
import ManualDCore
|
||||
|
||||
extension HTMLAttribute where Tag: HTMLTrait.Attributes.href {
|
||||
@@ -28,6 +29,10 @@ extension HTMLAttribute where Tag == HTMLTag.input {
|
||||
public static func value(_ double: Double?) -> Self {
|
||||
value(double == nil ? "" : "\(double!)")
|
||||
}
|
||||
|
||||
public static func value(_ uuid: UUID?) -> Self {
|
||||
value(uuid?.uuidString ?? "")
|
||||
}
|
||||
}
|
||||
|
||||
extension HTMLAttribute where Tag == HTMLTag.button {
|
||||
|
||||
24
Sources/Styleguide/Tooltip.swift
Normal file
24
Sources/Styleguide/Tooltip.swift
Normal file
@@ -0,0 +1,24 @@
|
||||
import Elementary
|
||||
|
||||
public struct Tooltip<Inner: HTML & Sendable>: HTML, Sendable {
|
||||
|
||||
let tooltip: String
|
||||
let inner: Inner
|
||||
|
||||
public init(
|
||||
_ tooltip: String,
|
||||
@HTMLBuilder inner: () -> Inner
|
||||
) {
|
||||
self.tooltip = tooltip
|
||||
self.inner = inner()
|
||||
}
|
||||
|
||||
public var body: some HTML<HTMLTag.div> {
|
||||
div(
|
||||
.class("tooltip"),
|
||||
.data("tip", value: tooltip)
|
||||
) {
|
||||
inner
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -350,6 +350,16 @@ extension SiteRoute.View.ProjectRoute.DuctSizingRoute {
|
||||
return request.view {
|
||||
ProjectView(projectID: projectID, activeTab: .ductSizing, logger: request.logger)
|
||||
}
|
||||
|
||||
case .deleteRectangularSize(let roomID, let rectangularSizeID):
|
||||
let room = try await database.rooms.deleteRectangularSize(roomID, rectangularSizeID)
|
||||
let container = try await manualD.calculate(
|
||||
rooms: [room],
|
||||
designFrictionRateResult: database.designFrictionRate(projectID: projectID),
|
||||
projectSHR: database.projects.getSensibleHeatRatio(projectID)
|
||||
).first!
|
||||
return DuctSizingView.RoomRow(projectID: projectID, room: container)
|
||||
|
||||
case .roomRectangularForm(let roomID, let form):
|
||||
let _ = try await database.rooms.update(
|
||||
roomID,
|
||||
|
||||
@@ -42,9 +42,9 @@ struct DuctSizingView: HTML, Sendable {
|
||||
th(.class("hidden xl:table-cell")) { "Round Size" }
|
||||
th { "Velocity" }
|
||||
th { "Final Size" }
|
||||
th { "Height" }
|
||||
th { "Width" }
|
||||
th { "Flex Size" }
|
||||
th { "Width" }
|
||||
th { "Height" }
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
@@ -70,7 +70,7 @@ struct DuctSizingView: HTML, Sendable {
|
||||
}
|
||||
|
||||
var body: some HTML<HTMLTag.tr> {
|
||||
tr(.class("text-lg"), .id(room.roomID.idString)) {
|
||||
tr(.class("text-lg items-baseline"), .id(room.roomID.idString)) {
|
||||
td { room.registerID }
|
||||
td { room.roomName }
|
||||
td { Number(room.heatingLoad, digits: 0) }
|
||||
@@ -89,25 +89,8 @@ struct DuctSizingView: HTML, Sendable {
|
||||
.attributes(.class("badge badge-outline badge-secondary text-xl font-bold"))
|
||||
}
|
||||
td {
|
||||
form(
|
||||
.hx.post(route),
|
||||
.hx.target("body"),
|
||||
.hx.swap(.outerHTML)
|
||||
// .hx.trigger(
|
||||
// .event(.change).from("#rectangularSize_\(room.roomID.idString)")
|
||||
// )
|
||||
) {
|
||||
input(.class("hidden"), .name("register"), .value("\(room.roomName.last!)"))
|
||||
Row {
|
||||
Input(
|
||||
id: "height",
|
||||
name: "height",
|
||||
placeholder: "Height"
|
||||
)
|
||||
.attributes(.type(.number), .min("0"), .value(room.rectangularSize?.height))
|
||||
SubmitButton()
|
||||
}
|
||||
}
|
||||
Number(room.flexSize)
|
||||
.attributes(.class("badge badge-outline badge-primary text-xl font-bold"))
|
||||
}
|
||||
td {
|
||||
if let width = room.rectangularWidth {
|
||||
@@ -115,8 +98,44 @@ struct DuctSizingView: HTML, Sendable {
|
||||
}
|
||||
}
|
||||
td {
|
||||
Number(room.flexSize)
|
||||
.attributes(.class("badge badge-outline badge-primary text-xl font-bold"))
|
||||
div(.class("flex justify-between items-center space-x-4")) {
|
||||
div(.id("height_\(room.roomID.idString)"), .class("h-full my-auto")) {
|
||||
if let height = room.rectangularSize?.height {
|
||||
Number(height)
|
||||
}
|
||||
}
|
||||
div {
|
||||
div(.class("join")) {
|
||||
// FIX: Delete rectangular size from room.
|
||||
TrashButton()
|
||||
.attributes(.class("join-item btn-ghost"))
|
||||
.attributes(
|
||||
.hx.delete(
|
||||
route: .project(
|
||||
.detail(
|
||||
projectID,
|
||||
.ductSizing(
|
||||
.deleteRectangularSize(
|
||||
room.roomID,
|
||||
room.rectangularSize?.id ?? .init())
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
.hx.target("closest tr"),
|
||||
.hx.swap(.outerHTML),
|
||||
when: room.rectangularSize != nil
|
||||
)
|
||||
|
||||
EditButton()
|
||||
.attributes(
|
||||
.class("join-item btn-ghost text-success hover:text-white"),
|
||||
.showModal(id: RectangularSizeForm.id(room))
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
RectangularSizeForm(projectID: projectID, room: room)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
import Elementary
|
||||
import ElementaryHTMX
|
||||
import ManualDCore
|
||||
import Styleguide
|
||||
|
||||
struct RectangularSizeForm: HTML, Sendable {
|
||||
|
||||
static func id(_ roomID: Room.ID? = nil) -> String {
|
||||
let base = "rectangularSizeForm"
|
||||
guard let roomID else { return base }
|
||||
return "\(base)_\(roomID.idString)"
|
||||
}
|
||||
|
||||
static func id(_ room: DuctSizing.RoomContainer) -> String {
|
||||
return id(room.roomID)
|
||||
}
|
||||
|
||||
let projectID: Project.ID
|
||||
let roomID: Room.ID
|
||||
let rectangularSizeID: DuctSizing.RectangularDuct.ID?
|
||||
let register: Int
|
||||
let height: Int?
|
||||
let dismiss: Bool
|
||||
|
||||
init(
|
||||
projectID: Project.ID,
|
||||
roomID: Room.ID,
|
||||
rectangularSizeID: DuctSizing.RectangularDuct.ID? = nil,
|
||||
register: Int,
|
||||
height: Int? = nil,
|
||||
dismiss: Bool = true
|
||||
) {
|
||||
self.projectID = projectID
|
||||
self.roomID = roomID
|
||||
self.rectangularSizeID = rectangularSizeID
|
||||
self.register = register
|
||||
self.height = height
|
||||
self.dismiss = dismiss
|
||||
}
|
||||
|
||||
init(
|
||||
projectID: Project.ID,
|
||||
room: DuctSizing.RoomContainer,
|
||||
dismiss: Bool = true
|
||||
) {
|
||||
let register =
|
||||
room.rectangularSize?.register
|
||||
?? (Int("\(room.roomName.last!)") ?? 1)
|
||||
|
||||
self.init(
|
||||
projectID: projectID,
|
||||
roomID: room.roomID,
|
||||
rectangularSizeID: room.rectangularSize?.id,
|
||||
register: register,
|
||||
height: room.rectangularSize?.height,
|
||||
dismiss: dismiss
|
||||
)
|
||||
}
|
||||
|
||||
var route: String {
|
||||
SiteRoute.View.router.path(
|
||||
for: .project(.detail(projectID, .ductSizing(.index)))
|
||||
)
|
||||
.appendingPath("room")
|
||||
.appendingPath(roomID)
|
||||
|
||||
}
|
||||
|
||||
var body: some HTML {
|
||||
ModalForm(id: Self.id(roomID), dismiss: dismiss) {
|
||||
|
||||
h1(.class("text-lg pb-6")) { "Rectangular Size" }
|
||||
|
||||
form(
|
||||
.class("space-y-4"),
|
||||
.hx.post(route),
|
||||
.hx.target("body"),
|
||||
.hx.swap(.outerHTML)
|
||||
) {
|
||||
input(.class("hidden"), .name("register"), .value(register))
|
||||
input(.class("hidden"), .name("id"), .value(rectangularSizeID))
|
||||
|
||||
Input(id: "height", placeholder: "Height")
|
||||
.attributes(.type(.number), .min("0"), .value(height), .required, .autofocus)
|
||||
|
||||
SubmitButton()
|
||||
.attributes(.class("btn-block"))
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,15 +16,15 @@ struct RoomsView: HTML, Sendable {
|
||||
div {
|
||||
Row {
|
||||
h1(.class("text-2xl font-bold")) { "Room Loads" }
|
||||
div(
|
||||
.class("tooltip tooltip-left"),
|
||||
.data("tip", value: "Add room")
|
||||
) {
|
||||
div(.class("flex me-4")) {
|
||||
PlusButton()
|
||||
.attributes(.showModal(id: RoomForm.id()))
|
||||
}
|
||||
}
|
||||
// div(
|
||||
// .class("tooltip tooltip-left"),
|
||||
// .data("tip", value: "Add room")
|
||||
// ) {
|
||||
// div(.class("flex me-4")) {
|
||||
// PlusButton()
|
||||
// .attributes(.showModal(id: RoomForm.id()))
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.attributes(.class("pb-6"))
|
||||
|
||||
@@ -54,7 +54,18 @@ struct RoomsView: HTML, Sendable {
|
||||
th { Label("Cooling Total") }
|
||||
th { Label("Cooling Sensible") }
|
||||
th { Label("Register Count") }
|
||||
th {}
|
||||
th {
|
||||
div(.class("flex justify-end")) {
|
||||
Tooltip("Add Room") {
|
||||
PlusButton()
|
||||
.attributes(
|
||||
.class("mx-auto"),
|
||||
.showModal(id: RoomForm.id())
|
||||
)
|
||||
}
|
||||
.attributes(.class("tooltip-left"))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
@@ -123,20 +134,27 @@ struct RoomsView: HTML, Sendable {
|
||||
td {
|
||||
div(.class("flex justify-end")) {
|
||||
div(.class("join")) {
|
||||
Tooltip("Delete room") {
|
||||
TrashButton()
|
||||
.attributes(
|
||||
.class("join-item"),
|
||||
.class("join-item btn-ghost"),
|
||||
.hx.delete(
|
||||
route: .project(.detail(room.projectID, .rooms(.delete(id: room.id))))),
|
||||
.hx.target("closest tr"),
|
||||
.hx.confirm("Are you sure?")
|
||||
)
|
||||
}
|
||||
.attributes(.class("tooltip-bottom"))
|
||||
|
||||
Tooltip("Edit room") {
|
||||
EditButton()
|
||||
.attributes(
|
||||
.class("join-item"),
|
||||
.class("join-item btn-ghost"),
|
||||
.showModal(id: RoomForm.id(room))
|
||||
)
|
||||
}
|
||||
.attributes(.class("tooltip-bottom"))
|
||||
}
|
||||
}
|
||||
RoomForm(
|
||||
dismiss: true,
|
||||
|
||||
6
input.css
Normal file
6
input.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@source not "./tailwindcss";
|
||||
@source not "./daisyui{,*}.mjs";
|
||||
|
||||
@plugin "./daisyui.mjs";
|
||||
3167
output.css
Normal file
3167
output.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user