WIP: Sidebar improvements, working on other views.

Sources/ViewController/Views/FrictionRate/ComponentLossTable.swift

@@ -1,62 +0,0 @@
-import Elementary
-import ElementaryHTMX
-import ManualDCore
-import Styleguide
-
-struct ComponentPressureLossTable: HTML, Sendable {
-
-  let componentPressureLosses: [ComponentPressureLoss]
-
-  var body: some HTML {
-    div(.id("cplTable")) {
-      h1(.class("text-2xl font-bold pb-4")) { "Component Pressure Losses" }
-      table(
-        .class(
-          "w-full border-collapse border border-gray-200 table-fixed"
-        )
-      ) {
-        thead { tableHeader }
-        tbody(.id("cplTableBody")) {
-          Rows(componentPressureLosses: componentPressureLosses)
-        }
-      }
-    }
-    div(.id("componentLossForm")) {}
-  }
-
-  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")) { "Pressure Loss" }
-      th(.class("border border-gray-200 text-xl font-bold")) {
-        Row {
-          div {}
-          button(
-            .class("px-2"),
-            .hx.get(route: .frictionRate(.form(.componentPressureLoss))),
-            .hx.target("#componentLossForm"),
-            .hx.swap(.outerHTML)
-          ) {
-            Icon(.circlePlus)
-          }
-        }
-      }
-    }
-  }
-
-  private struct Rows: HTML, Sendable {
-    let componentPressureLosses: [ComponentPressureLoss]
-
-    var body: some HTML {
-      for cpl in componentPressureLosses {
-        tr {
-          td(.class("border border-gray-200 p-2")) { cpl.name }
-          td(.class("border border-gray-200 p-2")) { "\(cpl.value)" }
-          td(.class("border border-gray-200 p-2")) {
-            // FIX: Add edit button
-          }
-        }
-      }
-    }
-  }
-}

Sources/ViewController/Views/FrictionRate/ComponentLossesView.swift

@@ -0,0 +1,50 @@
+import Elementary
+import ElementaryHTMX
+import ManualDCore
+import Styleguide
+
+struct ComponentPressureLossesView: HTML, Sendable {
+
+  let componentPressureLosses: [ComponentPressureLoss]
+
+  private var total: Double {
+    componentPressureLosses.reduce(into: 0) { $0 += $1.value }
+  }
+
+  var body: some HTML {
+    div(
+      .class(
+        """
+        border border-gray-200 rounded-lg shadow-lg space-y-4 p-4
+        """
+      )
+    ) {
+      Row {
+        h1(.class("text-2xl font-bold")) { "Component Pressure Losses" }
+        button(
+          .hx.get(route: .frictionRate(.form(.componentPressureLoss, dismiss: false))),
+          .hx.target("#componentLossForm"),
+          .hx.swap(.outerHTML)
+        ) {
+          Icon(.circlePlus)
+        }
+      }
+
+      for row in componentPressureLosses {
+        Row {
+          Label { row.name }
+          Number(row.value)
+        }
+        .attributes(.class("border-b border-gray-200"))
+      }
+
+      Row {
+        Label { "Total" }
+        Number(total)
+          .attributes(.class("text-xl font-bold"))
+      }
+    }
+    div(.id("componentLossForm")) {}
+  }
+
+}

Sources/ViewController/Views/FrictionRate/EquipmentInfoView.swift

@@ -13,19 +13,19 @@ struct EquipmentInfoView: HTML, Sendable {
 
       Row {
         Label { "Static Pressure" }
-        span { "\(equipmentInfo.staticPressure)" }
+        Number(equipmentInfo.staticPressure)
       }
       .attributes(.class("border-b border-gray-200"))
 
       Row {
         Label { "Heating CFM" }
-        span { "\(equipmentInfo.heatingCFM)" }
+        Number(equipmentInfo.heatingCFM)
       }
       .attributes(.class("border-b border-gray-200"))
 
       Row {
         Label { "Cooling CFM" }
-        span { "\(equipmentInfo.coolingCFM)" }
+        Number(equipmentInfo.coolingCFM)
       }
       .attributes(.class("border-b border-gray-200"))
 

Sources/ViewController/Views/FrictionRate/FrictionRateView.swift

@@ -5,10 +5,10 @@ import Styleguide
 struct FrictionRateView: HTML, Sendable {
 
   var body: some HTML {
-    div(.class("w-full flex-1 p-4 space-y-6")) {
+    div(.class("p-4 space-y-6")) {
       h1(.class("text-4xl font-bold pb-6")) { "Friction Rate" }
       EquipmentInfoView(equipmentInfo: EquipmentInfo.mock)
-      ComponentPressureLossTable(componentPressureLosses: ComponentPressureLoss.mock)
+      ComponentPressureLossesView(componentPressureLosses: ComponentPressureLoss.mock)
     }
   }
 }