WIP: Begins effective length views.

Sources/ViewController/Views/EffectiveLength/EffectiveLengthForm.swift

@@ -0,0 +1,38 @@
+import Elementary
+import ElementaryHTMX
+import ManualDCore
+import Styleguide
+
+struct EffectiveLengthForm: HTML, Sendable {
+
+  var body: some HTML {
+    div(
+      .id("effectiveLengthForm"),
+      .class(
+        """
+        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
+        """
+      )
+    ) {
+      h1(.class("text-2xl font-bold")) { "Effective Length" }
+      form(.class("space-y-4 p-4")) {
+        // FIX: Add fields
+
+        Row {
+          div {}
+          div {
+            CancelButton()
+              .attributes(
+                .hx.get(route: .effectiveLength(.form(dismiss: true))),
+                .hx.target("#effectiveLengthForm"),
+                .hx.swap(.outerHTML)
+              )
+            SubmitButton()
+          }
+        }
+      }
+    }
+  }
+}

Sources/ViewController/Views/EffectiveLength/EffectiveLengthsView.swift

@@ -0,0 +1,106 @@
+import Elementary
+import ElementaryHTMX
+import ManualDCore
+import Styleguide
+
+struct EffectiveLengthsView: HTML, Sendable {
+
+  let effectiveLengths: [EffectiveLength]
+
+  var body: some HTML {
+    div(
+      .class(
+        """
+        m-4
+        """
+      )
+    ) {
+      Row {
+        h1(.class("text-2xl font-bold")) { "Effective Lengths" }
+        button(
+          .hx.get(route: .effectiveLength(.form(dismiss: false))),
+          .hx.target("#effectiveLengthForm"),
+          .hx.swap(.outerHTML)
+        ) {
+          Icon(.circlePlus)
+        }
+      }
+      .attributes(.class("pb-6"))
+
+      div(
+        .id("effectiveLengths"),
+        .class(
+          """
+          border border-gray-200 rounded-lg shadow-lg
+          """
+        )
+      ) {
+        for row in effectiveLengths {
+          EffectiveLengthView(effectiveLength: row)
+        }
+      }
+
+      div(.id("effectiveLengthForm")) {}
+    }
+  }
+
+  private struct EffectiveLengthView: HTML, Sendable {
+
+    let effectiveLength: EffectiveLength
+
+    var straightLengthsTotal: Int {
+      effectiveLength.straightLengths
+        .reduce(into: 0) { $0 += $1 }
+    }
+
+    var groupsTotal: Double {
+      effectiveLength.groups.reduce(into: 0) {
+        $0 += ($1.value * Double($1.quantity))
+      }
+    }
+
+    var body: some HTML<HTMLTag.div> {
+      div(
+        .class(
+          """
+          pb-6
+          """
+        )
+      ) {
+        Row {
+          span(.class("text-xl font-bold")) { effectiveLength.name }
+        }
+        Row {
+          Label("Straight Lengths")
+        }
+        for length in effectiveLength.straightLengths {
+          Row {
+            div {}
+            Number(length)
+          }
+        }
+
+        Row {
+          Label("Groups")
+          Label("Equivalent Length")
+          Label("Quantity")
+        }
+        .attributes(.class("border-b border-gray-200"))
+
+        for group in effectiveLength.groups {
+          Row {
+            span { "\(group.group)-\(group.letter)" }
+            Number(group.value)
+            Number(group.quantity)
+          }
+        }
+        Row {
+          Label("Total")
+          Number(Double(straightLengthsTotal) + groupsTotal, digits: 0)
+            .attributes(.class("text-xl font-bold"))
+        }
+        .attributes(.class("border border-gray-200"))
+      }
+    }
+  }
+}