WIP: Initial effective length views.

Sources/ViewController/Views/EffectiveLength/EffectiveLengthForm.swift

@@ -18,11 +18,55 @@ struct EffectiveLengthForm: HTML, Sendable {
     ) {
       h1(.class("text-2xl font-bold")) { "Effective Length" }
       form(.class("space-y-4 p-4")) {
-        // FIX: Add fields
+        div {
+          label(.for("name")) { "Name" }
+          Input(id: "name", placeholder: "Name")
+            .attributes(.type(.text), .required, .autofocus)
+        }
+        div {
+          label(.for("type")) { "Type" }
+          // FIX: Add select field.
+          select(
+            .id("type"), .name("type"),
+            .class("w-full border rounded-md")
+          ) {
+            option(.value("supply")) { "Supply" }
+            option(.value("return")) { "Return" }
+          }
+        }
+        Row {
+          Label { "Straigth Lengths" }
+          button(
+            .type(.button),
+            .hx.get(route: .effectiveLength(.field(.straightLength))),
+            .hx.target("#straightLengths"),
+            .hx.swap(.beforeEnd)
+          ) {
+            SVG(.circlePlus)
+          }
+        }
+        div(.id("straightLengths")) {
+          StraightLengthField()
+        }
+
+        Row {
+          Label { "Groups" }
+          button(
+            .type(.button),
+            .hx.get(route: .effectiveLength(.field(.group))),
+            .hx.target("#groups"),
+            .hx.swap(.beforeEnd)
+          ) {
+            SVG(.circlePlus)
+          }
+        }
+        div(.id("groups"), .class("space-y-4")) {
+          GroupField()
+        }
 
         Row {
           div {}
-          div {
+          div(.class("space-x-4")) {
             CancelButton()
               .attributes(
                 .hx.get(route: .effectiveLength(.form(dismiss: true))),
@@ -36,3 +80,38 @@ struct EffectiveLengthForm: HTML, Sendable {
     }
   }
 }
+
+struct StraightLengthField: HTML, Sendable {
+  let value: Int?
+
+  init(value: Int? = nil) {
+    self.value = value
+  }
+
+  var body: some HTML<HTMLTag.div> {
+    div(.class("pb-4")) {
+      Input(
+        name: "straightLengths[]",
+        placeholder: "Length"
+      )
+      .attributes(.type(.number), .min("0"))
+    }
+  }
+}
+
+struct GroupField: HTML, Sendable {
+
+  var body: some HTML {
+    Row {
+      Input(name: "group[][group]", placeholder: "Group")
+        .attributes(.type(.number), .min("0"))
+      Input(name: "group[][letter]", placeholder: "Letter")
+        .attributes(.type(.text))
+      Input(name: "group[][length]", placeholder: "Length")
+        .attributes(.type(.number), .min("0"))
+      Input(name: "group[][quantity]", placeholder: "Quantity")
+        .attributes(.type(.number), .min("1"), .value("1"))
+    }
+    .attributes(.class("space-x-2"))
+  }
+}

Sources/ViewController/Views/EffectiveLength/EffectiveLengthsView.swift

@@ -9,11 +9,7 @@ struct EffectiveLengthsView: HTML, Sendable {
 
   var body: some HTML {
     div(
-      .class(
-        """
-        m-4
-        """
-      )
+      .class("m-4")
     ) {
       Row {
         h1(.class("text-2xl font-bold")) { "Effective Lengths" }
@@ -29,11 +25,7 @@ struct EffectiveLengthsView: HTML, Sendable {
 
       div(
         .id("effectiveLengths"),
-        .class(
-          """
-          border border-gray-200 rounded-lg shadow-lg
-          """
-        )
+        .class("space-y-6")
       ) {
         for row in effectiveLengths {
           EffectiveLengthView(effectiveLength: row)
@@ -63,7 +55,7 @@ struct EffectiveLengthsView: HTML, Sendable {
       div(
         .class(
           """
-          pb-6
+          border border-gray-200 rounded-lg shadow-lg p-4
           """
         )
       ) {
@@ -99,7 +91,7 @@ struct EffectiveLengthsView: HTML, Sendable {
           Number(Double(straightLengthsTotal) + groupsTotal, digits: 0)
             .attributes(.class("text-xl font-bold"))
         }
-        .attributes(.class("border border-gray-200"))
+        .attributes(.class("border-b border-t border-gray-200"))
       }
     }
   }