initial signals set up

src/main/scala/fahrtenbuch/Entry.scala

@@ -1,8 +1,65 @@
 package fahrtenbuch
 
 import scala.scalajs.js.Date
+import com.raquo.laminar.api.L.{*, given}
+import org.scalajs.dom.HTMLTableRowElement
+import com.raquo.laminar.nodes.ReactiveHtmlElement
 
-case class Entry(startKm: Double, endKm: Double, date: Date, animal: String, paid: Boolean, driver: String):
+type Id = String
+
+case class EntryComponent(
+    entry: Entry,
+    editMode: Boolean
+):
+  def render: ReactiveHtmlElement[HTMLTableRowElement] = {
+    if editMode then
+      tr(
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(input(cls := "input")),
+        td(
+          button(
+            cls := "button is-success",
+            span(
+              cls := "icon edit",
+              i(cls := "mdi mdi-18px mdi-check-bold")
+            )
+          )
+        )
+      )
+    else
+      tr(
+        td(entry.date.toDateString()),
+        td(entry.driver),
+        td(entry.startKm),
+        td(entry.endKm),
+        td(entry.animal),
+        td(entry.costWear),
+        td(entry.costTotal),
+        td(entry.paid),
+        td(
+          button(
+            cls := "button is-link",
+            span(cls := "icon edit", i(cls := "mdi mdi-18px mdi-pencil"))
+          )
+        )
+      )
+  }
+
+case class Entry(
+    id: Id,
+    startKm: Double,
+    endKm: Double,
+    date: Date,
+    animal: String,
+    paid: Boolean,
+    driver: String
+):
   val distance = endKm - startKm
 
   // 13 cent pro km, 5 cent Abnutzung

src/main/scala/fahrtenbuch/main.scala

@@ -20,10 +20,27 @@ def Fahrtenbuch(): Unit =
 
 object Main {
 
-  val entries = List(
+  val entries = Var(
-    Entry(100.0, 200.0, new Date(), "🐷", true, "Gesine"),
+    List(
-    Entry(200.0, 300.0, new Date(), "Dog", false, "Bob")
+      Entry("0", 100.0, 200.0, new Date(), "🐷", true, "Gesine"),
+      Entry("1", 200.0, 300.0, new Date(), "Dog", false, "Bob")
     )
+  )
+  val entriesSignal = entries.signal
+
+  val editState = Var(Map.empty[Id, Boolean])
+  val editStateSignal = editState.signal
+
+  val entryComponents: Signal[List[EntryComponent]] =
+    entriesSignal
+      .combineWith(editStateSignal)
+      .map { case (entries, editState) =>
+        entries.map(entry =>
+          EntryComponent(entry, editState.getOrElse(entry.id, false))
+        )
+      }
+
+  val editClickBus = new EventBus[(Id, Boolean)]
 
   def appElement(): HtmlElement =
     div(
@@ -40,21 +57,29 @@ object Main {
             th("Tier"),
             th("Abnutzung"),
             th("Gesamtkosten"),
-            th("Bezahlt")
+            th("Bezahlt"),
+            th()
           )
         ),
         tbody(
-          entries.map(entry =>
+          children <-- entryComponents.map(_.map(_.render))
+        ),
         tr(
-              td(entry.date.toDateString()),
+          td(input(cls := "input")),
-              td(entry.driver),
+          td(input(cls := "input")),
-              td(entry.startKm),
+          td(input(cls := "input")),
-              td(entry.endKm),
+          td(input(cls := "input")),
-              td(entry.animal),
+          td(input(cls := "input")),
-              td(entry.costWear),
+          td(input(cls := "input")),
-              td(entry.costTotal),
+          td(input(cls := "input")),
-              td(entry.paid),
+          td(input(cls := "input")),
-              td(span(cls := "icon", i(cls := "mdi mdi-pencil-box")))
+          td(
+            button(
+              cls := "button is-success",
+              span(
+                cls := "icon edit",
+                i(cls := "mdi mdi-18px mdi-check-bold")
+              )
             )
           )
         )