diff --git a/src/main/scala/fahrtenbuch/Entry.scala b/src/main/scala/fahrtenbuch/Entry.scala index 00931db..d635e1f 100644 --- a/src/main/scala/fahrtenbuch/Entry.scala +++ b/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 diff --git a/src/main/scala/fahrtenbuch/main.scala b/src/main/scala/fahrtenbuch/main.scala index 1b90516..22d503e 100644 --- a/src/main/scala/fahrtenbuch/main.scala +++ b/src/main/scala/fahrtenbuch/main.scala @@ -20,10 +20,27 @@ def Fahrtenbuch(): Unit = object Main { - val entries = List( - Entry(100.0, 200.0, new Date(), "🐷", true, "Gesine"), - Entry(200.0, 300.0, new Date(), "Dog", false, "Bob") + val entries = Var( + List( + 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 => - 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(span(cls := "icon", i(cls := "mdi mdi-pencil-box"))) + children <-- entryComponents.map(_.map(_.render)) + ), + 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") + ) ) ) )