WIP: Updates rooms views.

Sources/ViewController/Views/Rooms/RoomForm.swift

@@ -10,19 +10,17 @@ struct RoomForm: HTML, Sendable {
 
   var body: some HTML {
     div(
+      .id("roomForm"),
       .class(
-        "fixed top-20 z-50 w-1/2 mx-[20vw] my-10 bg-gray-700 rounded-lg shadow-lg p-4"
-      ),
-      .id("roomForm")
+        """
+        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")) { "New Room" }
-      form(
-        .class(
-          """
-          space-y-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()

Sources/ViewController/Views/Rooms/RoomTable.swift

@@ -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.
-          }
-        }
-      }
-    }
-
-  }
-}

Sources/ViewController/Views/Rooms/RoomsView.swift

@@ -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")) {}
+    }
+  }
+
+}